Ce genre de contrôle peut être fait par le serveur après que l’utilisateur a validé sa saisie, mais ce mode de fonctionnement a l’inconvénient de multiplier les échanges sur le réseau..
Trang 1La balise <textarea>
Enfin, la dernière balise des formulaires HTML, <textarea>, permet à l’utilisateur
de saisir un texte libre sur plusieurs lignes Ses principaux attributs, outre name qui permet de référencer le texte saisi, sont cols et rows qui indiquent respectivement le
nombre de colonnes et de lignes de la fenêtre de saisie.
<textarea> est un conteneur : tout ce qui est placé entre les balises de début et de fin est proposé comme texte par défaut à l’utilisateur Voici le code HTML du champ destiné à saisir le résumé du film :
< t e x t a r e a name = ’ r e s u m e ’ c o l s = ’ 3 0 ’ rows = ’ 3 ’ >Résumé du f i l m < /
t e x t a r e a >
L’exemple 1.2 donne le code HTML complet pour la création du formulaire
de la figure 1.3 Une première remarque est que le code est long, relativement fastidieux à lire, et assez répétitif En fait, lil est principalement constitué de balises HTML (ouvertures, fermetures, attributs), spécifique à l’application étant minori-taire HTML est un langage « bavard », et une page HTML devient rapidement très volumineuse, confuse, et donc difficile à faire évoluer Un des buts que nous nous fixerons avec PHP est de nous doter des moyens d’obtenir un code beaucoup plus concis.
Exemple 1.2 exemples/ExForm1.html:Le formulaire complet
< ? xml v e r s i o n = " 1 0 " e n c o d i n g = " i s o−8959−1 " ?>
< !DOCTYPE html PUBLIC "−//W3C/ / DTD XHTML 1 0 S t r i c t / / EN"
" h t t p : / / www w3 o r g / TR / xhtml1 /DTD/ xhtml1−s t r i c t dtd ">
<html xmlns= " h t t p : / / www w3 o r g / 1 9 9 9 / xhtml " xml : l a n g = " f r " >
<head>
< t i t l e > F o r m u l a i r e c o m p l e t < / t i t l e >
< l i n k r e l = ’ s t y l e s h e e t ’ h r e f = " f i l m s c s s " t y p e = " t e x t / c s s " / >
< / head>
<body>
<form a c t i o n = ’ F i l m php ’
method = ’ p o s t ’ e n c t y p e = ’ m u l t i p a r t / form−data ’ >
< i n p u t t y p e = ’ h i d d e n ’ name = ’monNom ’ v a l u e = ’ ExForm1 ’ / >
T i t r e : < i n p u t t y p e = ’ t e x t ’ s i z e = ’ 2 0 ’ name = ’ t i t r e ’ / >
Années : < i n p u t t y p e = ’ t e x t ’ s i z e = ’ 4 ’ m a x l e n g t h = ’ 4 ’
name = ’ annee ’ v a l u e = ’ 2 0 0 8 ’ / >
<p>
Comédie : < i n p u t t y p e = ’ checkbox ’ name = ’ g e n r e ’ v a l u e = ’C ’ / >
Drame : < i n p u t t y p e = ’ checkbox ’ name = ’ g e n r e ’ v a l u e = ’D ’ / >
H i s t o i r e : < i n p u t t y p e = ’ checkbox ’ name = ’ g e n r e ’ v a l u e = ’H ’ / >
S u s p e n s e : < i n p u t t y p e = ’ checkbox ’ name = ’ g e n r e ’ v a l u e = ’ S ’ / >
< / p>
<p>
F r a n c e : < i n p u t t y p e = ’ r a d i o ’ name = ’ p a y s ’ v a l u e = ’ FR ’
c h e c k e d = ’ 1 ’ / >
Trang 2E t a t s−Unis : <i n pu t type = ’ r a d i o ’ name= ’ pays ’ v a l u e = ’US ’ / >
A l l e m a g n e : < i n p u t t y p e = ’ r a d i o ’ name = ’ p a y s ’ v a l u e = ’DE ’ / >
J a p o n : < i n p u t t y p e = ’ r a d i o ’ name = ’ p a y s ’ v a l u e = ’ JP ’ / >
< / p><p>
A f f i c h e du f i l m : < i n p u t t y p e = ’ f i l e ’ s i z e = ’ 2 0 ’ name = ’ a f f i c h e ’ / >
< / p>
<p>
M e t t e u r en s c è n e :
< s e l e c t name = ’ r e a l i s a t e u r ’ s i z e = ’ 3 ’ >
< o p t i o n v a l u e = ’ 1 ’ > A l f r e d H i t c h c o c k< / o p t i o n >
< o p t i o n v a l u e = ’ 2 ’ > M a u r i c e P i a l a t < / o p t i o n >
< o p t i o n v a l u e = ’ 3 ’ s e l e c t e d = ’ 1 ’ >Quentin T a r a n t i n o < / o p t i o n >
< o p t i o n v a l u e = ’ 4 ’ > A k i r a K u r o s a w a < / o p t i o n >
< o p t i o n v a l u e = ’ 5 ’ >John Woo< / o p t i o n >
< o p t i o n v a l u e = ’ 6 ’ >Tim B u r t o n < / o p t i o n >
< / s e l e c t >
< b r / >
<p>
Résumé :
< t e x t a r e a name = ’ r e s u m e ’ c o l s = ’ 3 0 ’ rows = ’ 3 ’ >Résumé du f i l m
< / t e x t a r e a >
< / p>
<h1> V o t r e c h o i x < / h1>
< i n p u t t y p e = ’ s u b m i t ’ v a l u e = ’ V a l i d e r ’ / >
< i n p u t t y p e = ’ r e s e t ’ v a l u e = ’ Annuler ’ / >
< / form>
< / body>
< / html>
Deuxième remarque, qui vient à l’appui de la précédente : malgré tout le code employé, le résultat en terme de présentation graphique reste peu attrayant Pour bien faire, il faudrait (au minimum) aligner les libellés et les champs de saisie,
ce qui peut se faire avec un tableau à deux colonnes Il est facile d’imaginer le
surcroît de confusion introduit par l’ajout des balises <table>, <tr>, etc Là encore
l’utilisation de PHP permettra de produire du HTML de manière plus raisonnée et mieux organisée.
Enfin il n’est pas inutile de signaler que l’interface créée par un formulaire HTML est assez incomplète en termes d’ergonomie et de sécurité Il faudrait pouvoir aider l’utilisateur dans sa saisie, et surtout contrôler que les valeurs entrées respectent cer-taines règles Rien n’interdit, dans l’exemple donné ci-dessus, de ne pas entrer de titre pour le film, ou d’indiquer -768 pour l’année Ce genre de contrôle peut être fait par
le serveur après que l’utilisateur a validé sa saisie, mais ce mode de fonctionnement a
l’inconvénient de multiplier les échanges sur le réseau Le langage Javascript permet d’effectuer des contrôles au moment de la saisie; et un mécanisme nommé Ajax peut même être utilisé pour communiquer avec le serveur sans réafficher la page Nous vous renvoyons à un livre consacré à ces techniques pour plus d’information.
Trang 3Transmission de la requête du client au serveur
Tous les paramètres saisis dans un formulaire doivent maintenant être transmis au serveur web ou, plus précisément, au programme web sur ce serveur Inversement, ce programme doit produire un document (généralement un document HTML) et le
transmettre au navigateur via le serveur web.
Au moment ó l’utilisateur déclenche la recherche, le navigateur concatène dans
une chaỵne de caractères une suite de descriptions de la forme nomChamp=val ó nomChamp est le nom du champ dans le formulaire et val la valeur saisie Les
différents champs sont séparés par « & » et les caractères blancs sont remplacés par des « + ».
Par exemple, si on a saisi « Le Saint » dans titre, 1978 dans annee et coché le choix « Comédie », la chaỵne est constituée par :
titre=Le+Saint&annee=1978&genre=C
Il existe alors deux manières de transmettre cette chaỵne au serveur, selon que la méthode utilisée est get ou post.
1 Méthode get : la chaỵne est placée à la fin de l’URL appelée, après un
caractère ’?’ On obtiendrait dans ce cas :
http://localhost/Films.php?titre=Le+Saint&annee=1978&genre=C
2 Méthode post : la chaỵne est transmise séparément de l’URL.
La méthode post est généralement préférée quand les paramètres à transmettre sont volumineux, car elle évite d’avoir à gérer des URL très longues Elle présente cependant un inconvénient : quand on veut revenir, avec le bouton « Retour » du navigateur, sur une page à laquelle on a accédé avec post, le navigateur resoumet
le formulaire Bien sûr, il demande auparavant l’autorisation de l’utilisateur, mais
ce dernier n’a pas en général de raison d’être conscient des inconvénients possibles d’une double (ou triple, ou quadruple) soumission.
Quand le serveur reçoit une requête, il lance le programme et lui transmet un ensemble de paramètres correspondant non seulement aux champs du formulaire, mais également à diverses informations relatives au client qui a effectué la requête.
On peut par exemple savoir si l’on a affaire à Firefox ou à Safari Ces transmissions
de paramètres se font essentiellement par des variables d’environnement qui peuvent être récupérées par ce programme Quand la méthode utilisée est get, une de ces variables (QUERY_STRING) contient la liste des paramètres issus du formulaire Les variables les plus importantes sont décrites dans la table 1.1.
Le programme est en général écrit dans un langage spécialisé (comme PHP) qui s’intègre étroitement au programme serveur et facilite le mode de programmation particulier aux applications web En particulier le langage offre une méthode simple pour récupérer les paramètres de la requête et les variables d’environnement Il est libre de faire toutes les opérations nécessaires pour satisfaire la demande (dans la limite de ses droits d’accès bien sûr) Il peut notamment rechercher et transmettre des fichiers ou des images, effectuer des contrơles, des calculs, créer des rapports, etc Il
Trang 4peut aussi accéder à une base de données pour insérer ou rechercher des informations C’est ce dernier type d’utilisation, dans sa variante PHP/MySQL, que nous étudions dans ce livre.
Tableau 1.1 — Variables d’environnement
Variable d’environnement Description
REQUEST_METHOD Méthode de transmission des paramètres ( get , post , etc.).
QUERY_STRING Une chaỵne de caractères contenant tous les paramètres de l’appel en
cas de méthode get Cette chaỵne doit être décodée (voir ci-dessus),
ce qui constitue l’aspect le plus fastidieux du traitement.
CONTENT_LENGTH Longueur de la chaỵne transmise sur l’entrée standard, en cas de
méthode post SERVER_NAME Nom de la machine hébergeant le serveur web.
PATH_INFO Informations sur les chemins d’accès menant par exemple vers des
fichiers que l’on souhaite utiliser.
HTTP_USER_AGENT Type et version du navigateur utilisé par le client.
REMOTE_ADDR Adresse IP du client.
REMOTE_HOST Nom de la machine du client.
REMOTE_USER Nom de l’utilisateur, pour les sites protégés par une procédure
d’identification (voir annexe A).
REMOTE_PASSWORD Mot de passe de l’utilisateur, pour les sites sécurisés.
Transmission de la réponse du serveur au client
Le programme doit écrire le résultat sur sa sortie standardstdoutqui, par un mécanisme
de redirection, communique directement avec l’entrée standardstdindu serveur Le serveur transmet alors ce résultat au client.
Ce résultat peut être n’importe quel document multimédia, ce qui représente beaucoup de formats, depuis le simple texte ASCII jusqu’à la vidéo Dans le cas ó la requête d’un client se limite à demander au serveur de lui fournir un fichier, le serveur
se base sur l’extension de ce fichier pour déterminer son type.
Conformément au protocole HTTP, il faut alors transmettre ce type dans
l’en-tête, avec la clause Content-type: typeDocument , pour que le navigateur sache
comment décoder les informations qui lui proviennent par la suite Pour un fichier HTML par exemple, l’extension est le plus souvent.html, et la valeur de typeDocu-ment est text/html.
1.1.4 Sessions
Une caractéristique essentielle de la programmation web est son mode déconnecté Le
serveur ne mémorise pas les demandes successives effectuées par un client particulier,
et ne peut donc pas tenir compte de l’historique des échanges pour améliorer la communication avec le client.
Trang 5Un exemple familier qui illustre bien cette limitation est l’identification d’un
visiteur sur un site Cette identification se base sur un formulaire pour fournir un nom et un mot de passe, et le serveur, s’il valide ce code d’accès, peut alors donner
le droit au visiteur de consulter des parties sensibles du site Le problème est que lors de la prochaine connexion (qui peut avoir lieu dans les secondes qui suivent la première !) le serveur ne sera pas en mesure de reconnaître que le client s’est déjà connecté, et devra lui demander à nouveau nom et mot de passe.
L’absence de connexion permanente entre client et serveur web est un gros
obs-tacle pour la gestion de sessions se déroulant dans un contexte riche, constitué d’un
ensemble d’informations persistant tout au long des communications client/serveur Par exemple, on voudrait stocker non seulement le nom et le mot de passe, mais aussi l’historique des accès au site afin de guider plus facilement un visiteur habitué Plu-sieurs solutions, plus ou moins satisfaisantes, ont été essayées pour tenter de résoudre
ce problème La plus utilisée est de recourir aux cookies Essentiellement, un cookie est une donnée, représentable sous la forme habituelle nom=valeur, que le navigateur
conserve pour une période déterminée à la demande du serveur Cette demande doit être effectuée dans un en-tête HTTP avec une instruction Set-Cookie En voici un exemple :
Set-Cookie:
MonCookie=200;
expires=Mon,24-Dec-2010 12:00:00 GMT;
path=/;
domain=dauphine.fr
Cette instruction demande au navigateur de conserver jusqu’au 24 décembre 2010
un cookie nommé MonCookie ayant pour valeur 200 Les attributs optionnels path
et domain restreignent la visibilité du cookie pour les programmes serveurs qui communiquent avec le navigateur Par défaut, le cookie est transmis uniquement
au serveur qui l’a défini, pour toutes les pages web gérées par lui Ici on a élargi l’autorisation à tous les serveurs du domaine dauphine.fr.
Par la suite, les cookies stockés par un navigateur sont envoyés au serveur dans une variable d’environnement HTTP_COOKIE Nous ne détaillons pas le format d’échange qui est relativement complexe à décrypter PHP permet d’obtenir très facilement les
cookies.
Il faut noter qu’un cookie ne disparaît pas quand le navigateur est stoppé puisqu’il
est stocké dans un fichier Il est toujours intéressant de consulter la liste des cookies
(par exemple avec Web Developer pour voir qui a laissé traîner des informations
chez vous On peut considérer comme suspecte cette technique qui consiste à écrire
des informations sur le disque dur d’un client à son insu, mais les cookies offrent
le moyen le plus simple et puissant de créer un contexte persistant aux différents échanges client/serveur Nous les utiliserons le moment venu pour gérer les sessions, par l’intermédiaire de fonctions PHP qui fournissent une interface simple et facile à utiliser.