Création de formulaires interactifs

Transcription

1 SESSION 16 Création de formulaires interactifs Programme de la session Lancer un sondage en utilisant divers éléments d'entrée de formulaire Traiter les entrées utilisateur Activer un script à partir d'un formulaire Cette session traitera de la création des formulaires en ligne qui permettront aux utilisateurs de renvoyer les informations demandées vers le propriétaire du site. A l'appui des explications théoriques, des exemples illustreront les meilleures méthodes de collecte et de traitement des données reçues. Un sondage utilisateur Tout propriétaire de site Web doit au moins connaître l'opinion des utilisateurs sur le fonctionnement et l'impact de son site. La technique du sondage est la plus utilisée pour obtenir ces données. L'exemple de site Web, Guide du pêcheur de Freddy, va permettre de l'appliquer. Le Listing 16-1 est un simple sondage d'utilisateurs du site de Freddy et comprend des exemples d'éléments de formulaire de la Session 15. Les éléments de formulaire sont présentés dans un tableau pour qu'ils s'alignent bien dans la page.

2 162 Création de sites - Web Training Listing 16-1 Un exemple de formulaire de sondage. <H1>Sondage utilisateur</h1> <P>Eh, les fans de la pêche! Mettez vos commentaires et cliquez ensuite sur le bouton Soumettre! <P> <FORM ACTION="mailto:fred@fredsfishingguide.com" METHOD="post"> <TABLE WIDTH="100%" CELLSPACING="2" CELLPADDING="10" BORDER="0"> <TR> <TD WIDTH="50%"> <INPUT TYPE="text" NAME="Nom" SIZE="15"> <STRONG>Nom</STRONG> <TD WIDTH="50%"> <INPUT TYPE="text" NAME="Adresse" SIZE="15"> <STRONG> </STRONG> </TR> <TR> <TD WIDTH="50%" VALIGN="top"> <STRONG>Type de pêche favori?</strong> <SELECT NAME="Favorite" SIZE="4" MULTIPLE> <OPTION VALUE="mouche">Pêche à la mouche</option> <OPTION VALUE="bar">Pêche au bar</option> <OPTION VALUE="au large">pêche au large</option> <OPTION VALUE="littoral">Eau de mer du littoral</option> </SELECT> <TD WIDTH="50%" VALIGN="top"> <STRONG>Comment trouvez-vous le site de Fred?</STRONG> <BR> <INPUT TYPE="radio" NAME="Opinion" VALUE="Bien" CHECKED> C'est bien. <BR> <INPUT TYPE="radio" NAME="Opinion" VALUE="Mauvais"> C'est mauvais. </TR> <TR> <TD COLSPAN="2"> <INPUT TYPE="checkbox" NAME="Ajouter" VALUE="Oui" CHECKED> <STRONG>Ajoutez-moi à la liste de diffusion de Fred.</STRONG> </TR>

3 Session 16 - Création de formulaires interactifs 163 Listing 16-1 Un exemple de formulaire de sondage. (...) <TR> <TD WIDTH="50%"> <INPUT TYPE="submit" VALUE="Soumettre à Fred"> <TD WIDTH="50%"> <INPUT TYPE="reset" VALUE="Reinitialiser le formulaire"> </TR> </TABLE> </FORM> Les éléments de formulaire peuvent être combinés avec d'autres éléments comme les balises de paragraphe, de tableau, etc. Pour aligner correctement les éléments du formulaire, mettez-les dans un tableau comme dans le Listing Un tableau a été utilisé pour créer deux colonnes ; la ligne qui invite les utilisateurs à se joindre à la liste de diffusion de Freddy couvre précisément la largeur totale de ces deux colonnes pour une valeur de COLSPAN="2". N'oubliez surtout pas la règle suivante : tous les éléments qui constituent un formulaire doivent se trouver entre une paire de balises FORM. La Figure 16-1 affiche le formulaire en ligne obtenu. Il a été partiellement complété par un vrai passionné de pêche. Traitement des entrées utilisateur La véritable utilité d'un formulaire est de permettre aux utilisateurs de renvoyer le plus vite possible les informations qui lui sont demandées par le propriétaire du site. L'utilisateur commence le processus en cliquant sur le bouton Soumettre et un ensemble de paires nom/valeur est ensuite envoyé à l'adresse spécifiée dans l'attribut ACTION de la balise FORM. Chaque contrôle de formulaire (y compris les balises INPUT, SELECT et TEXTAREA) doit avoir un nom unique que vous lui attribuez en utilisant l'attribut NAME. La valeur saisie dans le champ est associée au nom de l'élément d'entrée. Exemple : l'ensemble de paires nom/valeur généré par le formulaire dans le Listing 16-1 pourrait être :

4 164 Création de sites - Web Training Figure 16-1 Divers éléments d'entrée sont appropriés pour les différents types de données. Ce sondage emploie plusieurs éléments d'entrée. Nous avons utilisé un tableau pour arranger les éléments du formulaire en deux colonnes. Nom = Billy Bass Adresse = billybass@billybass.com Favori = bar Opinion = Bon Ajouter à la liste = Oui Certains types de champs de saisie comme les zones de texte permettent aux utilisateurs de saisir n'importe quelle valeur. D'autres, comme les boutons radio et les cases à cocher permettent seulement de choisir l'une des valeurs proposées par le concepteur du site. La méthode du formulaire permet d'envoyer des données utilisateur sous forme de paires nom/valeur. Ce processus se divise en plusieurs étapes : 1. Démarrez votre éditeur Web et ouvrez le fichier (freds_fishing_guide/survey.html) contenant le sondage de Freddy à partir de notre site Web. Il contient le même listing que le Listing 16-1.

5 Session 16 - Création de formulaires interactifs Modifiez la balise FORM en remplaçant l'adresse de Freddy par la vôtre : <FORM ACTION="mailto:VotreAdresse @VotreSite.com" METHOD="post"> 3. Notez le fichier sur votre disque dur et ouvrez-le dans un navigateur Web. Vous devez avoir une page Web qui ressemble à celle affichée sur la Figure Remplissez le formulaire avec vos propres informations. Cliquez sur le bouton Soumettre. Le navigateur envoie les données qui viennent d'être entrées vers votre adresse (bien entendu, vous êtes ici connecté à Internet). 5. Attendez quelques instants, puis démarrez votre client et vérifiez votre courrier. Vous devez avoir un nouveau message contenant les données. 6. Selon le système utilisé, les données peuvent être sous forme d'un fichier joint au lieu de figurer dans le corps du message. Si c'est le cas, ouvrez le fichier attaché avec Bloc-notes ou un autre logiciel de traitement de texte. 7. Voici ce que vous devriez avoir : Nom=Billy+Bass&Adresse=billybass@billybass.com &Favori=bar&Opinion=Bon&Ajouter+à+la+liste=Oui 8. Remplacez chaque esperluette (&) par une coupure de ligne et vous aurez la même liste de paires nom/valeur précédemment décrite dans cette session : Nom = Billy+Bass Adresse = billybass@billybass.com Favori = bass Opinion = Bon Ajouter à la liste = Oui Les données deviennent votre propriété et vous êtes parfaitement libre de les utiliser à votre guise. Freddy peut les utiliser, ajouter Billy Bass à sa liste de diffusion sur autorisation de ce dernier, ou encore les sauvegarder pour les besoins du sondage mensuel. Ce sondage permettra de connaître le nombre d'utilisateurs pour chaque type de pêche et de modifier le contenu du site en conséquence.

6 166 Création de sites - Web Training Un formulaire de retour utilisateur Avec un simple lien mailto, un utilisateur peut envoyer ses réponses par courrier électronique au propriétaire du site ou au Webmaster (celui qui s'occupe de la conception et de la maintenance du site). Le contrôle de votre boîte de réception peut également être fait à l'aide d'un formulaire pour une meilleure gestion de votre courrier. Le sondage utilisateur permet aux visiteurs de votre site de répondre à des questions spécifiques. En ajoutant la zone de saisie de texte TEXTAREA au formulaire, une grande liberté d'expression est accordée à l'utilisateur afin qu'il puisse donner son opinion sans aucune limitation de lignes. Un simple lien mailto aurait suffi, mais l'avantage d'un formulaire est justement de recueillir toutes les informations spécifiques en plus des commentaires. Le Listing 16-2 est un simple formulaire de retour utilisateur demandant à chacun d'entre eux d'écrire leur nom, leur adresse et la nature de leur requête. L'utilisateur doit choisir seulement un des trois sujets proposés pour permettre le tri du courrier de Freddy en trois catégories. Si l'utilisateur choisit If Subject = "ventes", Freddy envoie le message vers le département commercial ; s'il sélectionne If Subject = "plainte", il envoie le message à la corbeille. La Figure 16-2 montre le modèle de formulaire de retour utilisateur dans la page. Un tableau a été utilisé pour aligner les éléments du formulaire exactement comme dans le Listing 16-1 ; en revanche dans le Listing 16-2, les balises de tableau ont été omises par souci de clarté. Listing 16-2 Un exemple d'utilisation des attributs METHOD et POST de la balise FORM. <FORM ACTION= METHOD="post"> <INPUT NAME="Nom" SIZE="15"> Nom <INPUT NAME="Adresse" SIZE="15"> Qu'est-ce que c'est? <BR> <INPUT TYPE="radio" NAME="Subject" VALUE="pêche" CHECKED>

7 Session 16 - Création de formulaires interactifs 167 Listing 16-2 Un exemple d'utilisation des attributs METHOD et POST de la balise FORM. (...) Pêche <INPUT TYPE="radio" NAME="Subject" VALUE="Plainte"> Plainte <INPUT TYPE="radio" NAME="Subject" VALUE="ventes"> Ventes <TEXTAREA COLS="32" ROWS="6" NAME="Commentaire">Saisissez votre texte ici. </TEXTAREA> <INPUT TYPE="submit" VALUE="Soumettre à Fred"> <INPUT TYPE="reset" VALUE="Réinitialiser le formulaire"> </FORM> Figure 16-2 Certains sites optent pour l'utilisation d'un formulaire de retour utilisateur plutôt qu'un lien direct.

8 168 Création de sites - Web Training Les scripts CGI Jusqu'à présent, la page créée a seulement permis à l'utilisateur de vous envoyer des données par courrier électronique. Cependant, le déchiffrage manuel et le traitement de toutes ces données représentent un travail énorme et fastidieux, ce qui est rédhibitoire pour les grands sites Web. Un vrai dilemme est apparu entre l'utilité du retour utilisateur et l'immense lourdeur des tâches. La technologie du Web a trouvé un nouveau procédé pour résoudre ce problème : c'est le formulaire en ligne. Celui-ci adresse désormais les données vers un programme et non plus vers un individu. Ce programme est chargé de recevoir les données, de les traiter, puis de sortir les résultats du traitement. Sur Internet, ce type de programme est appelé script. Les scripts exécutent toutes sortes de travaux de traitement de données. Sur le Web, des milliers de scripts sont distribués sous différentes marques commerciales ; d'autres sont gratuits et disponibles sur des sites de ressources comme ScriptSearch ( La plupart des services d'hébergement possèdent aussi une bibliothèque de scripts qu'ils tiennent à la disposition de leurs clients. Les scripts servent à automatiser le déchiffrage et l'interprétation des données contenues dans les formulaires. Imaginons un instant le pauvre Freddy avec toutes les réponses au sondage sur le type de pêche préféré par ses utilisateurs. Heureusement, un simple script peut automatiquement lui donner tous les résultats et les analyses du sondage. En général, un formulaire envoie des données vers un script CGI (Common Gateway Interface). Il ne s'agit pas d'un langage mais d'une spécification pour le transfert d'informations entre une page Web et un programme CGI. Ce dernier peut lui-même être écrit dans tous les langages ; parmi eux, Perl est le plus utilisé. Dans cette session, les deux exemples de formulaires de retour utilisateur sont des applications courantes pour les scripts CGI. Les scripts de sondage utilisateur et de formulaire sont disponibles dans le commerce ou sur Internet. Pour expédier les données d'un formulaire vers un script, spécifiez simplement le nom et l'emplacement du script dans la balise FORM : <FORM ACTION=" cgi-bin/user_survey.cgi" METHOD="post">

9 Session 16 - Création de formulaires interactifs 169 Remarquez que le script CGI a une extension.cgi et se trouve généralement dans le répertoire cgi-bin. Comme les scripts sont des programmes réels qui fonctionnent sur un serveur, ils représentent un risque d'insécurité potentiel pour un service d'hébergement. C'est pourquoi les FAI stockent tous les scripts CGI dans un répertoire spécial (cgi-bin) dont l'accès est restreint. Les FAI ne vous laisseront pas mettre des scripts sur leur serveur, sauf peut-être après une évaluation sérieuse des risques de sécurité potentiels. Il est donc recommandé d'utiliser la bibliothèque de scripts de votre FAI. Si vous avez besoin d'un script pour traiter le retour utilisateur, quatre options peuvent être proposées : 1. Si vous êtes un développeur Web d'un niveau assez élevé, rédigez vous-même votre script en langage Perl ou dans un autre langage (la création de bons scripts exige des connaissances approfondies en programmation). Sinon, le marché vous offre de très bons scripts. 2. Téléchargez le script qui vous convient à partir d'un site Web de ressources comme ScriptSearch ( et modifiez-le selon vos besoins. Par exemple, modifiez un peu le script que vous venez de télécharger pour les adresses URL, les noms de variables, etc. Vous devez connaître à cet effet certaines notions de script. Toutefois, un répertoire cgi-bin de votre hôte demeure en principe accessible. 3. Utilisez un des scripts fournis par votre service d'hébergement. C'est l'option la plus simple. Vous éviterez les problèmes de sécurité et votre service d'hébergement vous aidera à le faire fonctionner ; il mettra à votre disposition une bonne bibliothèque de scripts CGI : scripts mailto, sondages, moteurs de recherche, état du trafic, etc. 4. N'utilisez pas un script CGIet employez plutôt un des programmes modernes de scripting comme Active Server Pages (ASP) de Microsoft, Java Server Pages (JSP), PHP ou ColdFusion de Allaire. Avec leurs caractéristiques avancées, ces programmes font plutôt appel à votre intuition dans un environnement de programmation de type Windows. Ils sont nettement plus efficients pour la bande passante qu'une vieille combinaison CGI-Perl. Un bon service d'hébergement peut vous les fournir sans aucun problème.

10 170 Création de sites - Web Training RÉVISION La Session 16 a développé la création de formulaires du retour utilisateur. Plusieurs sujets ont été développés, à savoir : L'utilisation d'éléments d'entrée de formulaire pour créer un sondage utilisateur. La réception des entrées utilisateur par . Le traitement des entrées utilisateur par des scripts. TESTEZ VOS CONNAISSANCES 1. Donnez un moyen pour bien aligner les éléments d'un formulaire dans une page. (Consultez la section Un sondage utilisateur.) 2. Quel type de données est envoyé lorsque l'utilisateur soumet un formulaire? (Consultez la section Traitement des entrées utilisateur.) 3. Quel est l'attribut qui détermine la destination de ces données? (Consultez la section Traitement des entrées utilisateur.) 4. Quelles sont les deux destinations possibles de ces données? (Consultez la section Les scripts CGI.) 5. Pourquoi les FAI sont-ils réticents avant de permettre à leurs clients de stocker des scripts CGI sur leurs serveurs? (Consultez la section Les scripts CGI.)