Université de La Rochelle LUP-SIG 2004-2005 Programmation SIG et Internet Cartographique Web et présentation d information spatiale Moteurs de recherche et formulaires HTML Jean-Michel FOLLIN jmfollin@univ-lr.fr 1
Dialogue client serveur (rappel) Schéma «classique» du dialogue entre un navigateur Web et un serveur Web Navigateur (1) Requête HTTP Serveur HTTP (2) Document HTML (4) Internet (3) Document HTML Un clic sur un lien demande de rapatrier un document HTML 2
Requête HTTP Structure d une requête envoyée par le navigateur au serveur Web Requête HTTP Serveur HTTP GET /documents/exemple.html HTTP/1.1 Host sigma.univ-lr.fr User-Agent Mozilla/5.0 (Windows; U; Win98; en-us; rv1.0rc1) Gecko/20020417 Accept text/xml,application/xml,application/xhtml+xml,text/html;... Accept-Language en-us, en;q=0.50 Accept-Encoding gzip, deflate, compress;q=0.9 Accept-Charset utf-8, * Keep-Alive 300 Connection keep-alive Referer http//server.univ-lr.fr2000/documents/requetehttp.html 3
Réponse HTTP Structure d une réponse envoyée par le serveur Web Réponse HTTP Serveur HTTP HTTP/1.1 200 OK Date Fri, 18 Feb 2005 170141 GMT Server Apache/2.0.47 (Unix) Last-modified Fri, 28 Sep 2001 163548 GMT Accept-ranges bytes Content-length 1552 Content-Type text/html; charset=iso-8859-1 <html> <head> <title>un document HTML</title> </head> <body> <center><h3>un document HTML</h3></center> exemple.html <html> <body>... 4
Traitement d informations sur le serveur (rappel) Principe de dialogue client-serveur lorsque la réponse (la page HTML) est obtenue suite l exécution d un programme sur le serveur (script Common Gateway Interface) Navigateur (1) Requête HTTP Internet Serveur HTTP (2) Exécution (CGI...) Document HTML (4) (3) Document HTML 5
Architecture «serveur cartographique» Client Navigateur Possible extension Serveur Web Données Trmission de la requête Résultat du traitement Scripts (php, asp, cgi, ) Cache de données Fichiers Images, natifs SIG Textes (XML) Interrogation Résultat Serveur d applications cartographiques Module de gestion (cartouche) spatiale SGBD SGBD SGBD Données attributaires 6
Exécution d un programme sur le serveur Une référence (l attribut href de la balise <a>) peut contenir un lien vers un programme disponible sur le serveur. Le document reçu sera celui généré par ce programme. <a href="http//www.serveur.com/cgi-bin/users.exe?nom=jean&prenom=dupon"> le nom du serveur le programme exécuter le premier paramètre le deuxième paramètre 7
Formulaires HTML Un formulaire HTML un moyen d envoyer des informations au serveur HTTP éléments d une page HTML pour saisir les informations structuration d informations envoyées traitement des informations par les programmes de serveur résultat obtenu (page HTML) dépend des informations envoyées <H2>Répondez <H2>Répondez aux aux questions questions suivantes</h2> suivantes</h2> <FORM <FORM action="http//www.april.org/cgibin/treat.pl" action="http//www.april.org/cgibin/treat.pl" method=get> method=get> <B>Prénom <B>Prénom </B> </B> type="text" type="text" name=prenom name=prenom size=20><br> size=20><br> </B>Nom</B> </B>Nom</B> type="text" type="text" name=nom name=nom size=20><br> size=20><br> </B>Age</B> </B>Age</B> <SELECT <SELECT name=age> name=age> value="jeune">value="jeune">de de 18 18 value="adulte1" value="adulte1" >19 >19 40 40 value="adulte2">41 value="adulte2">41 60 60 value="senior"> value="senior"> + + de de 60 60 </SELECT><BR> </SELECT><BR> type=submit type=submit value="envoyer"> value="envoyer"> type=reset type=reset value="remettre value="remettre zéro"> zéro"> </FORM> </FORM> 8
Composants client et serveur Client (navigateur Web) une page HTML avec le formulaire pour saisir les données Serveur HTTP un programme qui traite les données les deux parties sont nécessaires pour traiter les données! Serveur HTTP exécutable 9
Syntaxe des formulaires HTML Syntaxe un formulaire est défini par les balises <FORM> et </FORM> les éléments de formulaire sont placés entre ces balises d autres éléments HTML peuvent y être inclus (texte, mise en page, tableaux, etc ) Forme générale <FORM...>...>...>... </FORM> 10
Syntaxe de la balise FORM Syntaxe <form action="http//server.com/code/programme.exe" method="get"> <!-- elements de formulaire --> </form> Attributs de <form> action l adresse du programme qui va traiter les données method la méthode d envoi des données du formulaire 11
Méthodes d envoi des données Deux méthodes pour passer les données au programme get paramètres du programme (accés direct au script) post d un fichier temporairement crée par le serveur Web (chaîne prenom=jean&nom=dupont&age=-+de+18+ insérée d le corps de la requête) Exemple de la méthode get <form action=" http//www.april.org/cgi-bin/treat.pl" method="get"> Exemple de la méthode post <form action=" http//www.april.org/cgi-bin/treat.pl" method="post"> 12
Eléments champs de texte La balise <input> le champ pour saisir le texte [type="text"] name="nom_parametre" value="valeur_par_defaut" le texte affichée initialement size=nombre_caracteres_visibles maxlength=nombre_caracteres_autorises> name nom de paramètre pour le programme value valeur de paramètre (si aucun texte n est saisi) Exemple <B>Nom </B> name="nom" value="dupon" size="30"> <BR> <B>Prénom </B> name="prenom" value="" size="30"> 13
Eléments listes Syntaxe (les éléments de la liste sont définies entre les balises <select>) <SELECT name=nom_liste> value="valeur" selected> Text_affiche... </SELECT> selected l élément sélectionné initialement (un seul) Exemple <SELECT <SELECT name=age> name=age> value="jeune">- value="jeune">-de de18 18 value="adulte1" value="adulte1" selected>19 selected>19 40 40 value="adulte2">41 60 60 value="senior"> value="senior"> + de de60 60 </SELECT> </SELECT> valeur envoyée au serveur 14
Eléments boutons Un bouton est un élément > de type submit, reset ou button type="submit" name="nom" value="libelle"> Exemple type="submit" value="envoyer"> type="reset" value="effacer formulaire"> 15
D autres éléments Elément invisible (n est pas affiché d une page, mais sa valeur est trmise au programme) type="hidden" name="nom" value="valeur"> CheckBox input type="checkbox" type="checkbox" name="mail" value="no_mail"> Ne pas contacter par mail Bouton «radio» input type="radio" type="radio" name="statut" value="etudiant"> Etudiant type="radio" name="statut" value="salarie" checked> Salarié 16
Exemple <HTML> <HTML> <HEAD> <HEAD> <TITLE>Formulaire <TITLE>Formulaire simple</title> simple</title> </HEAD> </HEAD> <BODY> <BODY> <H2>Répondez <H2>Répondez aux aux questions questions suivantes</h2> suivantes</h2> <FORM <FORM action="http//localhost/cgi-bin/treat.pl" action="http//localhost/cgi-bin/treat.pl" method=get> method=get> <B>Prénom <B>Prénom <\B> <\B> name=prenom name=prenom value="" value="" size=20> size=20> <BR> <BR> <B>Nom <B>Nom <\B> <\B> name=nom name=nom value="dupont" value="dupont" size=20> size=20> <BR> <BR> <B>Age <B>Age <\B> <\B> <SELECT <SELECT name=age> name=age> value="jeune">value="jeune">de de 18 18 value="adulte1" value="adulte1" selected>19 selected>19 40 40 value="adulte2">41 value="adulte2">41 60 60 value="senior"> value="senior"> + + de de 60 60 </SELECT> </SELECT> <BR> <BR> type="radio" type="radio" name="statut" name="statut" value="etudiant"> value="etudiant"> Etudiant Etudiant type="radio" type="radio" name="statut" name="statut" value="salarie" value="salarie" checked> checked> Salarié Salarié <BR> <BR> type="checkbox" type="checkbox" name="mail" name="mail" value="no_mail"> value="no_mail"> Ne Ne pas pas contacter contacter par par mail mail <BR><BR> <BR><BR> type=button type=button value="envoyer"> value="envoyer"> type=reset type=reset value="remettre value="remettre zéro"> zéro"> </FORM> </FORM> </BODY></HTML> </BODY></HTML> 17
Les valeurs des éléments Pour tous les éléments d un formulaire les valeurs correspondant au couple name=value sont envoyées au serveur la valeur n est pas envoyée si le name n est pas défini ou n est pas sélectionné tout élément peut être trformé en élément invisible avec le même nom et la valeur «pré-définie» Les éléments invisibles sont un moyen de mémoriser les données saisies d plusieurs formulaires lors d une série d échanges entre le client et le serveur 18
Références Ce document http//perso.univ-lr.fr/jmfollin/s2_coursform.pdf Guide HTML http//membres.lycos.fr/guidehtml/ http//www.cabuzel.com/truc/resume.html Guide Internet http//guide.ungi.net/ W3Schools HTML Tutorial http//www.w3schools.com/html/ Script CGI http//www.april.org/groupes/doc/cgi-bin/cgi-bin.html 19