Après cette leçon, vous pourrez :
Dans notre précédente leçon, nous avons créé le code HTML servant à ajouter des éléments de formulaire dans notre page web. Nous allons maintenant leur faire faire quelque chose.
Les formulaires web ont été conçus pour que les internautes puissent envoyer du contenu d'une page web vers un programme spécial sur un serveur web. Ce serveur traiterait les données et retournerait un message à l'émetteur. La transaction complète s'effectue en quelques secondes au plus ! Si vous voulez offrir ce type d'interaction dans une page web, elle doit communiquer avec ces programmes spéciaux, généralement appelés CGI pour Common Gateway Interface (Interface Commune de Programmation). Pour de plus amples informations, voir le survol du CGI du NCSA.
Pour utiliser cette fonctionnalité, vous devez maîtriser un langage de programmation complexe. Ou bien avoir accès à un serveur web fournissant ces programmes. Plus loin dans cette leçon, nous vous montrerons comment créer des formulaires qui utilisent de tels programmes, mais nous allons tout d'abord étudier une alternative pour récupérer l'information venant des formulaires de pages web... par notre bon vieil e-mail.
Vous pouvez ajouter du code à un formulaire de page web afin qu'il envoie par email les données qu'un formulaire enverrait normalement à un programme CGI via Internet. Pour ce faire, modifiez le tag FORM que vous avez créé dans la dernière leçon de la manière suivante :
<form method="post" action="mailto:moi@monemail.bigu.edu">
Nous avons indiqué dans la zone "action" du formulaire de récolter toutes les données et de les envoyer à l'adresse email fournie.
Mais à quoi cela ressemble-t-il ? Ce n'est pas très joli ! Si nous ajoutions cela au formulaire Rapport que nous avons créé dans la leçon précédente, nous obtiendrions un email ressemblant à peu près à :
Date : Lun, 21 Dec 1998 15:44:18 -0700 De : alan levine <alan.levine@domail.maricopa.edu> Sujet : Formulaire envoyé par Mozilla A : moi@monemail.bigu.edu MIME-version : 1.0 X-Accept-Language : Français, fr name=Alan+Levine&email=levine%40maricopa.edu&pass=jaimelehtml&vname=Grand+Volcan &vlat=142+N&vlong=28+S&vtype=Phréato-Plinien&active=actif&vdate=Avril+1%2C+1999 ¬e1=risque+de+danger¬e3=observé&info=Grand+Volcan+est+situé+sur+le+flanc+d+une+grosse +montagne.+C+est+une+partie+des+légendes+locales+des+premiers+habitants +de+cette+région.&ref1=http%3A%2F%2Fwww.abc.com&ref2=http%3A%2F%2F&ref3=http%3A%2F%2F |
Cet exemple vous donne une idée de ce qu'un formulaire web fait du texte que vous écrivez et des boutons sur lesquels vous cliquez -- il attache tout dans une longue chaine de caractères. Si vous regardez d'un peu plus près, vous pouvez en voir le format :
nom_élément1=valeur_élément1&nom_élément2=valeur_élément2... &nom_élémentN=valeur_élémentN
de sorte que chaque élément de formulaire (champs, boutons-poussoir, zones de texte) envoie son nom connecté à sa valeur à l'aide d'un signe égal, les éléments étant accolés ensemble par des symboles "&". De plus, tous les espaces sont remplacés par des signes "+" ("Alan Levine" entré dans un champ texte devient "Alan+Levine") et d'autres symboles comme ":" et "/" sont convertis en des codes comme "%3A" et "%2F".
Ceci est un format très pratique pour un programme CGI qui va en extraire le contenu, l'évaluer et répondre.
Bien que vous puissiez utiliser cette technique sur vos propres formulaires web, les résultats ne sont pas très faciles à exploiter. Il existe une autre option dont vous pouvez vous servir pour améliorer le format dans lequel les données de formulaires sont envoyées via email, en modifiant encore une fois le tag FORM comme suit :
<form method="post" action="mailto:moi@monemail.bigu.edu" enctype="text/plain" >
L'attribut enctype= pour encoding type (type d'encodage) indique au navigateur web d'envoyer les données du formulaire non pas dans le format ci-dessus, mais comme une simple chaine de texte. Par exemple, en ajoutant ceci à notre rapport pour le site Web Volcan, le mail que nous recevons se présente maintenant de la manière suivante :
Date : Lun, 21 Dec 1998 15:44:18 -0700 De : alan levine <alan.levine@domail.maricopa.edu> Sujet : Formulaire envoyé par Mozilla A : moi@monemail.bigu.edu MIME-version: 1.0 X-Accept-Language : Français, fr name=Alan Levine email=alan.levine@domail.maricopa.edu pass=jaimelehtml vname=Grand Volcan vlat=142 N vlong=28 S vtype=Phréato-Plinien active=actif vdate=Avril 1, 1999 note1=risque de danger note2=éruptions historiques note3=observées info=Grand Volcan est dangereux ! Il a tué plusieurs personnes. ref1=http://www.bigu.edu/volcanoes ref2=http://www.usgs.gov/ ref3=http://www.volcano.nodak.edu/ |
dans une forme bien plus lisible.
NOTE : Bien que vous puissiez développer des formulaires web qui fonctionnent en envoyant l'information via e-mail, cette approche n'est pas très sécurisée pour bien des gens. Elle suppose que le navigateur web soit configuré pour envoyer un email par l'intermédiaire d'un compte personnel, ce qui ne marchera pas sur un navigateur dans un endroit public comme un cyber-café par exemple. Pour plus de détails, consultez la lettre d'information d'Avril 2000 de NetMechanic.
Il y a un grand nombre de sites gratuits hébergeant des scripts de mails en CGI plus sûrs pour vous, comme FormMail.To, FormMailer, Response-O-Matic, et d'autres encore dont vous pouvez trouver la liste sur The Free Site.
Envoyer des données de formulaire par email peut être utile si vous n'avez pas accès aux scripts CGI ou à un serveur web, mais l'interaction en est limitée ; les données vous sont envoyées par email, mais l'émetteur ne reçoit aucun message en retour.
Nous allons maintenant modifier le formulaire de rapport pour qu'il soit traité par un script CGI. Comme tout le monde n'a pas la possibilité d'exécuter ces programmes, nous en avons écrit un pour vous et vous pouvez le tester sur notre serveur web.
Ce script exécutera deux fonctions pour notre formulaire de rapport web Volcan. Il donnera le choix à la personne l'utilisant d'envoyer le rapport par e-mail à son instructeur ou de l'afficher dans une page web (pour l'imprimer ensuite).
Le formulaire intègrera une nouvelle option nous permettant d'encapsuler dans le code HTML un autre élément de formulaire web (invisible sur la page) dans lequel nous pourrons envoyer l'adresse email du professeur afin d'utiliser différentes adresses email dans différentes pages web.
... sont utilisés pour envoyer des données depuis le formulaire sans qu'elles apparaissent dans la page web.
<form method="post" action="http://www.mcli.dist.maricopa.edu/cgi-bin/tut/report.pl">
Le tag action contient l'URL d'un script CGI sur le serveur web MCLI qui va effectuer les tâches que nous avons programmées.
Ce script est programmé dans un langage appelé Perl (Practical Extraction and Report Language), décrit par son créateur Larry Wall comme "un langage interprêté optimisé pour analyser des fichiers texte aléatoires, extraire l'information de ces fichiers et imprimer des rapports à partir de cette information. C'est également un bon langage pour la gestion d'un système. Le langage se veut pratique (facile à utiliser, efficace, complet) plutôt que beau (condensé, élégant, minimal)". Perl est un des outils majeurs, mais en aucun cas le seul moyen d'interagir avec les formulaires web.
Pour ce didacticiel, et souvent pour bien des outils de développement web, vous n'avez même pas besoin de comprendre comment il fonctionne pour l'utiliser ! Pour ceux que ça intéresse, nous fournissons le code source perl, mais vous n'en avez pas besoin pour étudier cette leçon.
<tr> <td valign=top align=right><tt><b>format</b></td> <td valign=top> <input type="checkbox" name="rep_email" value="y"> envoyer à mon professeur par email<br> <input type="checkbox" name="rep_web" value="y" checked> générer une page web pour un aperçu/impression<br> <font size=2 color=#000099> sélectionnez les options concernant votre rapport</font> <!-- changez la valeur pour envoyer le rapport à une adresse réelle --> <input type="hidden" name="instructor" value="lava@pele.bigu.edu"> </td> </tr>
Nous avons ajouté deux nouvelles boites de validation : la première indique au script d'envoyer le rapport par email et la seconde (cochée par défaut) affiche le rapport dans une page web. Le dernier tag est un élément de formulaire caché appelé "instructor". La valeur de ce tag est l'adresse email où le rapport doit être envoyé. Si vous voulez voir comment ça marche, insérez votre propre adresse e-mail dans le tag.
Quoique pratique, le rapport que nous avons créé est un exemple très basique de ce que l'on peut faire avec les scripts CGI. Nous aurions pu ajouter des options pour que les rapports soumis soient écrits dans des fichiers sur le serveur web afin que d'autres personnes puissent les consulter. Nous aurions également pu comparer les entrées d'informations dans une base de données spécialisée sur les volcans, ou bien d'autres choses encore.
Ecrire des scripts CGI n'est pas très compliqué mais assez complexe pour dépasser le cadre de ce didacticiel. Ces programmes peuvent généralement être personnalisés pour faire pratiquement tout ce à quoi vous pouvez penser ! Pour cela, vous devez maîtriser un langage de programmation. Vous trouverez plus d'informations sur notre page de références.
Pour le moment, nous allons créer une nouvelle page utilisant un script CGI pour effectuer un calcul.En continuant à construire notre projet web Volcan, nous allons créer une page web contenant un outil pour estimer la vélocité de différents flux volcaniques.
<A HREF="proj_calc.html"> <font size=+2 face="arial,helvetica">C</font>ALCUL...</A><br> Outil pour estimer la vélocité des flux volcaniques <p>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR"> <html> <head></head> <BODY BGCOLOR=#FFFFCC TEXT=#333333 LINK="#0000CC" VLINK=#FF6666> <h2 align=center>Calculs Simples</h2> <h3>Equation cinétique et Energies Potentielles</h3> Afin de mieux comprendre les différents types de volcans, nous pouvons utiliser un peu de maths et les lois de la physique. Dans une éruption, vous pouvez suivre un "bloc" de matière volcanique en partant d'un point où toute son énergie est potentielle et afficher une égalité avec un autre point représentant le maximum de son énergie cinétique : <p> <center> <img src="../pictures/hb_graph.gif" alt="diagramme d'énergie" width="342" height="199"> </center> <p> où <font color="red"><b>m</b></font> est la masse du "bloc", <font color="red"><b>g</b></font> la constante d'accélération de la gravité, <font color="red"><b>h</b></font> la hauteur à laquelle l'énergie potentielle est maximum et <font color="red"><b>v</b></font> la vélocité quand l'énergie cinétique est au maximum. <p> En supposant la conservation de l'énergie et avec un peu d'Algèbre, nous pouvons écrire cette égalité : <P> <center> <font size=+3><tt> 2 g h = v<sup>2</sup></tt></font> </center> <p> Cela veut dire que, si nous connaissons la hauteur à laquelle un flux volcanique a surmonté un obstacle, nous pouvons estimer sa vélocité maximum à un moment avant ou après l'obstacle. Cette technique fut utilisée pour calculer la vélocité maximum du flux lors d'un glissement de terrain qui engloutit une colline de 600 mètres de hauteur en Iran, ainsi qu'une éruption volcanique au Japon qui grimpa jusqu'à un col de montagne situé à 500 métres d'altitude. Les estimations sont confirmées par les observations de ces évènements. <h3>Equation cinétique et Energies Potentielles</h3> Utilisez le formulaire ci-dessous pour calculer des estimations de vélocités d'éruptions volcaniques pour lesquelles vous documenterez la hauteur maximum (Pour les grandes éruptions <a href="term.html" target="_top">Pliniennes</a>, certains scientifiques utilisent la hauteur maximum du nuage de l'éruption). <p> <center> <form method=post action="http://www.mcli.dist.maricopa.edu/cgi-bin/tut/energy.pl"> <table border=0 cellpadding=6 cellspacing=2> <tr> <td valign=top align=right><tt><b>hauteur maximum</b></td> <td valign=top><input type="text" name="height" size="10"> </td> </tr> <tr> <td valign=top align=right><tt><b>unités</b></td> <td valign=top> <input type="radio" name="units" value="meters" checked> mètres <input type="radio" name="units" value="feet"> pieds </td> </tr> <tr> <td colspan=2 align=center><input type="submit" value="calculer la vélocité"> </td> </table> </form> </center> Notez que c'est porter un regard très sommaire sur les éruptions volcaniques ; i.e. cela ne tient pas compte des pertes d'énergie dues à la friction ou des particularités liées à la mécanique des fluides. Cette méthode s'est pourtant révélée utile pour comparer différents volcans. </body> </html>
NOTE : La plus grande partie de ce document est rédigée dans un HTML que nous avons vu au cours des précédentes leçons, et utilisé pour décrire la méthode de calcul du bas de page. Le tag <form> référence un autre script perl que nous avons écrit pour vous. Les données entrées dans le formulaire sont un champ de saisie de texte pour le nombre représentant la hauteur (H) et des boutons-poussoir pour l'unité de longueur.
Le script CGI vérifie l'entrée (pour s'assurer que c'est un nombre positif) et retourne une réponse dans l'unité choisie. (voir le code source CGI)
Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte.
Revoyons les grandes lignes de cette leçon :
Pouvez-vous écrire un formulaire web ayant les mêmes éléments que celui de la leçon mais avec une mise en page différente -- arrivez-vous à le faire fonctionner ?
Interaction page web / formulaire alimentée par JavaScript.
Ecrire le HTML : Leçon 28b : Action de Formulaires par email et CGI
©1994-2003
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
La 'net connection (en anglais) à MCLI est
Alan Levine
Suggestions en Français à Bernard Bensoussan
URL: http://www.mcli.dist.maricopa.edu/tut/tut28b.html