Web et présentation d information spatiale

Dimension: px

Commencer à balayer dès la page:

Download "Web et présentation d information spatiale"

Thérèse Gaudet
il y a 8 ans
Total affichages :

1 Université de La Rochelle LUP-SIG 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

2 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 Serveur HTTP (2) Document HTML (4) Internet (3)

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.

3 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/ 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

0rc1) Gecko/20020417 Accept text/xml,application/xml,application/xhtml+xml,text/html;... Accept-Language en-us, en;q=0.

Réponse HTTP Structure d une réponse envoyée par le serveur Web Réponse HTTP Serveur HTTP HTTP/1.1 200

4 Réponse HTTP Structure d une réponse envoyée par le serveur Web Réponse HTTP Serveur HTTP HTTP/ OK Date Fri, 18 Feb GMT Server Apache/ (Unix) Last-modified Fri, 28 Sep GMT Accept-ranges bytes Content-length 1552 Content-Type text/html; charset=iso <html> <head> <title>un document HTML</title> </head> <body> <center><h3>un document HTML</h3></center> exemple.html <html> <body>... 4

163548 GMT Accept-ranges bytes Content-length 1552 Content-Type text/html; charset=iso-8859-1 <html>

5 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

un programme sur le serveur (script Common Gateway Interface) Navigateur (1)

6 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

données Fichiers Images, natifs SIG Textes (XML) Interrogation Résultat Serveur d

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.

7 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// le nom du serveur le programme exécuter le premier paramètre le deuxième paramètre 7

Le document reçu sera celui généré par ce programme. <a href="http//www.serveur.

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

8 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// action="http// 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 value="adulte1" value="adulte1" >19 > value="adulte2">41 value="adulte2"> value="senior"> value="senior"> + + de de </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

action="http//www.april.org/cgibin/treat.

9 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

HTTP un programme qui traite les données les deux parties

10 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

ces balises d autres éléments HTML peuvent y être inclus (texte, mise

11 Syntaxe de la balise FORM Syntaxe <form action="http//server.com/code/programme.exe" method="get">  </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

-- elements de formulaire --> </form> Attributs de <form> action l

12 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// method="get"> Exemple de la méthode post <form action=" http// method="post"> 12

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="

13 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

maxlength=nombre_caracteres_autorises> name nom de paramètre pour le programme value valeur de paramètre (si

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.

14 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> value="adulte2"> value="senior"> value="senior"> + de de60 60 </SELECT> </SELECT> valeur envoyée au serveur 14

.. </SELECT> selected l élément sélectionné initialement (un seul) Exemple <SELECT <SELECT name=age> name=age>

15 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

16 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

name="mail" value="no_mail"> Ne pas contacter par mail Bouton «radio» input type="radio"

17 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 value="adulte1" value="adulte1" selected>19 selected> value="adulte2">41 value="adulte2"> value="senior"> value="senior"> + + de de </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

$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"$

18 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

peut être trformé en élément invisible avec le même nom et la valeur «pré-définie» Les éléments invisibles sont un

19 Références Ce document http//perso.univ-lr.fr/jmfollin/s2_coursform.pdf Guide HTML http//membres.lycos.fr/guidehtml/ http// Guide Internet http//guide.ungi.net/ W3Schools HTML Tutorial http// Script CGI http// 19

com/truc/resume.html Guide Internet http//guide.ungi.

Documents pareils

Gilles.Roussel univ-mlv.fr HTTP/1.1 RFC 2068

Gilles.Roussel univ-mlv.fr HTTP/1.1 RFC 2068 HTTP/1.1 RFC 2068 1 Caractéristiques Niveau application Sans état Tout transfert de données Au dessus du protocole TCP Largement utilisé dans le World Wide Web Utilise les normes : URI (Uniform Resource