World-Wide Web, formulaires électroniques, images réactives, etc.

(1)

Cahiers

enberg

GUT GUT GUT

m WORLD-WIDE WEB, FORMULAIRES

ÉLECTRONIQUES, IMAGES RÉACTIVES, ETC.

P FrançoisDagorn

Cahiers GUTenberg, n19 (1995), p. 59-66.

<http://cahiers.gutenberg.eu.org/fitem?id=CG_1995___19_59_0>

L’accès aux articles desCahiers GUTenberg (http://cahiers.gutenberg.eu.org/),

implique l’accord avec les conditions générales

d’utilisation (http://cahiers.gutenberg.eu.org/legal.html).

Toute utilisation commerciale ou impression systématique est constitutive d’une infraction pénale. Toute copie ou impression de ce fichier doit contenir la présente mention de copyright.

(2)

(3)

Cahiers^GUTenberg n19 | janvier 1995

World-Wide Web, formulaires

electroniques, images reactives, etc.

Francois Dagorn

Centre de Ressources en Informatique Universite de Rennes 1

E-mail:Francois.Dagorn@univ-rennes1.fr

Resume. Cet article presente en detail les mecanismes mis en uvre pour la realisation de formulaires electroniques et d'images reactives dans un environnement WWW.

Abstract. This paper details the stus used to realize electronic forms or clickable image maps within the World Wide Web.

1. Introduction

Les ⁽⁽ clients WWW⁾⁾sont en general utilises pour acceder a des documents diuses par des serveurs d'informations. En selectionnant une ancre dans un texte, l'utilisateur declenche le transfert de donnees dans le sens serveur-client... Ils peuvent egalement servir a communiquer des informations dans l'autre direction et ^etre utilises pour transmettre des parametres a un serveur HTTP. L'emission de formulaires electroniques et la presentation d'images reactives utilisent ces pro- prietes.

2. Protagonistes

Depuis l'emission d'un formulaire electronique ou d'une interaction avec une image reactive, jusqu'a l'accuse de reception du traitement adequat par un serveur HTTP, les protagonistes sont les suivants:

{ HTML qui propose les elements ^<^FORM^>, ^<^IMG^>et ^<^ISINDEX^>respecti- vement pour le traitement des formulaires, des images reactives et la com- munication d'un mot-clef a un moteur de recherche ;

:Presentation realisee a Nanterre, le 19 janvier 1995 lors de la journeeDiusion des documents electroniques.

59

(4)

Francois ^Dagorn

{ HTTP (et plus particulierement la version HTTP/1.0) qui procure les me- thodes ^POSTet^GETpour transmettre des parametres a un serveur WWW;

{ les serveurs HTTP qui permettent l'appel de programmes externes pour traiter les informations transmises par les clients. Une interface standardisee appelee CGI (Common Gateway Interface) precise les regles d'ecriture et d'execution des procedures (lesCGI scripts). Les principaux serveurs HTTP respectent la convention CGI.

3. Traitement des formulaires: un exemple

Notons que l'exemple ci-dessous suppose l'utilisation d'un serveur HTTP sur une plate-forme Unix.

3.1. Code HTML

Le premier element conduisant au traitement d'un formulaire est la presentation HTML de ce dernier comme dans l'exemple suivant:

<HTML>

<HEAD>

<TITLE>Test des fonctionnalites forms ...</TITLE>

</HEAD>

<BODY>

<H1>Test des fonctionnalites forms ...</H1>

<FORM ACTION="http://www.univ-rennes1.fr/test-cgi-form.cgi"

METHOD="POST">

Un champ : <INPUT NAME="nom" SIZE=30>

<P>

<HR>

Des radios boutons : <P>

<UL>

<LI> <INPUT TYPE="radio" NAME="mode" VALUE="FM">Modulation de frequence<P>

<LI> <INPUT TYPE="radio" NAME="mode" VALUE="GO" CHECKED> Grandes Ondes<P>

<LI> <INPUT TYPE="radio" NAME="mode" VALUE="PO"> Petites Ondes <P>

</UL>

Un menu deroulant :

<OPTION SELECTED>50F

<OPTION>60F

<OPTION>70F

<OPTION>100F

</SELECT><P>

Un mot de passe : <INPUT TYPE="password" NAME="passwd" SIZE="40">

<HR>

</FORM>

</BODY>

</HTML>

La description des formulaires fait partie de HTML niveau 2, elle est bornee par ^FORM et ^/FORM. L'attribut ^ACTION donne ici l'URL de la procedure qui va

(5)

Formulaires electroniques, images reactives, etc.

traiter les champs du formulaire (une fois saisis), par defaut c'est l'URL courant (celui qui a servi pour acher le formulaire) qui est sollicite.

L'attribut ^METHOD fait reference a HTTP et indique quelle est la methode qui sera utilisee pour transmettre les champs du formulaire. La methode ^POST est conseillee, elle transmet les champs dans le corps d'un message MIME. La methode^GETtransmet les parametres dans l'URL, divers problemes lies a la taille et au nombre des champs peuvent survenir.

La description des champs du formulaire est realisee par des elements ^INPUT,

SELECTet ^TEXTAREA qui permettent l'utilisation de champs textuels, radio boutons, menus deroulants^:^:^:

Le formulaire est transmis a l'URL indique par ^ACTION gr^ace a l'activation du bouton de commande de^TYPEsubmit.

3.2. Formulaire interprete par un client WWW

Un client WWW ayant recu le code HTML de l'exemple precedent ache la page suivante:

61

(6)

Francois ^Dagorn

3.3. Transmission par HTTP du formulaire

Lorsque l'emission du formulaire est demandee, le client eectue une requ^ete HTTP comme dans l'exemple suivant:

POST /test-cgi-form.cgi HTTP/1.0 Accept: text/plain

Accept: application/x-html Accept: application/html Accept: application/postscript ...

Accept: */*

User-Agent: NCSA Mosaic for the X Window System/2.4 libwww/2.12 modified Content-type: application/x-www-form-urlencoded

Content-length: 61

nom=toto+tutu+titi&mode=GO&menu=50F&passwd=en+clair

Les champs sont transmis derriere l'attribut MIMEContent-length, ils sont separes entre eux par le caractere &, les espaces sont remplaces par des +, les even- tuels &, /, etc. sont codes et remplaces par leur code Ascii precede du caractere %.

En receptionnant cette requ^ete^POSTle serveur HTTP cible passera le contr^ole a la procedure citee en argument (/test-cgi-form.cgiici) en lui transmettant les champs du formulaire sur son entree standard. Ce procede est propre a la methode^POST, dans le cas de la methode^GETles champs sont recuperes dans une variable d'environnement.

3.4. Procedure emettant et receptionnant le formulaire

Les programmes se deroulant a l'initiatived'un serveur HTTP (lesCGI scripts) peuvent ^etre ecrits dans n'importequel langage produisant des chiers executables, l'interpreteur de commande^cshest utilise dans ce qui suit.

3.4.1. Procedure test-cgi-form.cgi

#!/bin/csh -f

# appel de la procedure get-param, elle transmet les parametres separes

# par des espaces.

set argus = `/usr/local/www/cgi-bin/get-param`

echo 'Content-Type: Text/html' echo ''

switch ($argus[1])

case Nothing : # affichage du formulaire cat <<FINHTML

<HTML>

<HEAD>

<TITLE>Test des fonctionnalites forms ...</TITLE>

</HEAD>

(7)

<BODY>

<H1>Test des fonctionnalites forms ...</H1>

<FORM ACTION="http://www.univ-rennes1.fr/test-cgi-form.cgi"

METHOD="POST">

Un champ : <INPUT NAME="nom" SIZE=30>

<p>

<HR>

Des radios boutons : <P>

<UL>

<LI> <INPUT TYPE="radio" NAME="mode" VALUE="FM" >Modulation de frequence <P>

<LI> <INPUT TYPE="radio" NAME="mode" VALUE="GO" CHECKED> Grandes Ondes<P>

<LI> <INPUT TYPE="radio" NAME="mode" VALUE="PO"> Petites Ondes <P>

</UL>

Un menu deroulant :

<OPTION SELECTED>50F

<OPTION>60F

<OPTION>70F

<OPTION>100F

</SELECT><P>

Un mot de passe : <INPUT TYPE="password" NAME="passwd" SIZE="40">

<HR>

</FORM>

</BODY>

</HTML>

FINHTML breaksw

default : # traitement des parametres echo '<HTML>'

echo '<TITLE>Vos parametres etaient</TITLE>' echo '<HR>'

echo '<H1> Vos parametres etaient </H1>' echo $#argus parametres : $argus

echo '<p>'

echo 'Apres traitement des caracteres d echappement :'

@ i = 1

while !($i > $#argus)

# bien noter l'appel de unescape pour les espaces et caracteres speciaux echo '<P>'

echo ' ===>' `/usr/local/www/cgi-bin/unescape $argus[$i]`

@ i++

endecho '<HR>' echo '</HTML>' endif

La procedure est appelee de deux facons:

{ a la suite d'une requ^ete HTTP de type ^GET. Dans ce cas, il s'agit d'une demande d'emission du formulaire vers le client, la procedure get-param retourne la valeur^NOTHING, l'envoi du texte HTML decrivant le formulaire est eectue;

{ a la suite d'une requ^ete de type^POST, la variable^arguscontient les champs separes par des espaces (depouilles de leurs noms ici), le traitement du formulaire consistant a verier le contenu des champs recus et a faire part au 63

(8)

Francois ^Dagorn

client de leurs valeurs. Avant d'utiliser les champs contenus dans la variable

argusil est necessaire d'eectuer le decodage des caracteres d'echappement, c'est le r^ole de la procedure ^unescape.

Le document retourne au client WWW peut ^etre de n'importe quel type. On precise ici Content-Type: Text/html suivi d'une ligne vide. La presence de la ligne vide est tres importante, elle stipule au client que des elements de HTTP (Last-modified,Content-length,...) sont omis. Si cette ligne vide est absente, le client ne sait pas ou debutent les specications HTML du document resultant.

3.4.2. Procedure get-param

Le r^ole de^get-paramest de transmettre les champs du formulaire a la procedure test-cgi-form.cgi. Les champs sont donc recuperes sur l'entree standard, depouilles de leur nom (ce qui n'est pas tout a fait judicieux) et ecrits sur la sortie standard. La commande^get-paramtelle que donnee ci-dessous ne realisant qu'un sous-ensemble des fonctionnalites d'une procedure de traitement des parametres CGI, elle ne doit donc pas ^etre sortie du contexte de cet exemple:

#!/bin/csh

# get-param sert a decoder les champs d'un formulaire. Ils sont rendus sur

# la sortie standard separes par des espaces.

# FD (9/11/94)

# Si la methode n'est pas POST, il s'agit du premier appel (GET), il faut

# simplement afficher le formulaire en indiquant qu'il n'y a pas de

# parametres.

if ($REQUEST_METHOD == GET) then echo Nothing

exitendif

## Appel sans parametres ? (methode POST sans arguments ... hum !)

#if ($CONTENT_LENGTH == "") then echo Nothing

exitendif

## Le formulaire (rempli) vient d'etre emis, il faut receptionner les

# parametres et les restituer separes par des espaces.

#set param=$<

set argus=`echo $param | awk -F'&' '{i=1; while (i < NF) {print $(i); i++} ; print $(NF)}'`

foreach var ($argus)

set val = `echo $var | awk -F'=' '{print $2}'`

echo -n $val " "

end

(9)

Les variables REQUEST METHOD et CONTENT LENGTH sont des variables d'environnement (dites CGI) positionnees par le serveur HTTP. Elles ne sont pas les seules, les suivantes sont egalement utilisables:

{ QUERY STRINGqui contient les parametres emis par le client dans le cas d'une requ^ete utilisant la methode^GET;

{ REMOTE HOSTqui indique (si possible) le nom de la machine cliente;

{ REMOTE ADDRqui indique l'adresse IP de la machine cliente ; { ^:^:^:

3.4.3. Remarques

La mise au point des CGI scripts n'est pas aisee, les erreurs ne sont pas fa- cilement decelables car ils se deroulent sous le contr^ole d'un serveur HTTP qui redirige ses sorties. La reception et le decodage des valeurs des champs est laissee a la charge du programmeur et peuvent donc ^etre sources de problemes.

Des utilitaires sont disponibles pour le traitement des parametres, par exemple les utilisateurs de PERL apprecieront la fonction^ReadParse fournie par le package

cgi-lib¹. Elle restitue les parametres dans un tableau ^$in, le traitement des caracteres d'echappement et des espaces etant eectue au prealable.

4. Principes des images reactives

La presentation d'images reactives (parfois dites cliquables) par les clients WWW facilite la realisation d'interfaces graphiques conviviales. Les principes de fonctionnement sont les suivants:

{ une image a diuser par un serveur HTTP est decoupee en regions, a cha- cunes d'entre elles est associee une action a realiser (sous la forme d'un URL). Pour decouper une image en regions il est possible d'utiliser des outils (sur une plate-forme Unix) tels queImageMagick²ou^xv³la conguration des actions associees depend du serveur HTTP utilise (s'agissant du NCSA HTTPD, la lecture deGraphical Information Map Tutorial⁴est recomman- dee) ;

{ l'imageest presentee aux clients WWW par l'intermediaired'une ancre ayant la structure suivante:

1^:ftp://ftp.urec.fr/pub/reseaux/services inf os/WWW/ncsa/ncsa httpd/cgi/

2^:ftp://ftp.x.org/contrib/applications/ImageMagick

3^:http://www.univ-rennes1.fr/pub/X11/contrib/xv-3.00.tar.Z 4^:http://hoohoo.ncsa.uiuc.edu/ agoyal/mapping.html

65

(10)

Francois ^Dagorn

C'est l'attribut^ISMAPqui indique au client que l'image est reactive, et qu'il convient de noter les coordonnees du pointeur de la souris sur sollicitation de l'utilisateur;

{ les coordonnees de l'endroit pointe sont transmises au serveur HTTP derriere l'URL de la procedure de traitement (en utilisant une requ^ete HTTP de type

GET) comme dans l'exemple suivant:

GET /cgi-bin/imagemap/bretagne?542,228 HTTP/1.0 Accept: text/plain

Accept: application/x-html Accept: application/html ...

Accept: */*

User-Agent: NCSA Mosaic for the X....

Dans l'exemple ci-dessus,^/bretagneest un parametre transmis a la procedure/cgi-bin/imagemap.

Remarques

Les interfaces utilisateurs utilisant des images reactives ne sont pas toujours bien comprises des usagers. En eet le client WWW n'a pas connaissance du decoupage en regions, il ne peut donc pas signaler (par un eet video) les zones sensibles de l'image.