Programmation Web PDF
Programmation Web PDF
Programmation Web PDF
Chapitre 2
Programmation Web
Sommaire
2.1 Le Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.1.1 Serveurs web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.1.2 Clients web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.2 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.2.1 Bases de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.2.2 Liens hypertexte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.2.3 Principales balises HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.2.4 Feuilles de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.3 Programmation CGI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.3.1 Principes de base du CGI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.3.2 Formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.3.3 Echanges client/serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2.3.4 Quelques limites de la programmation CGI . . . . . . . . . . . . . . . . . . . . 39
Ce premier chapitre propose une présentation générale des techniques de programmation du Web et
présente, non exhaustivement, son principal langage, HTML, et le mécanisme de base pour produire des
sites interactifs, le CGI.
2.1 Le Web
Le World-Wide Web (ou WWW, ou Web) est un grand – très grand – système d’information réparti
sur un ensemble de sites connectés par le réseau Internet. Ce système est essentiellement constitué de do-
cuments hypertextes, ce terme pouvant être pris au sens large : textes, images, sons, vidéos, etc. Chaque
site propose un ensemble plus ou moins important de documents qui sont transmis sur le réseau par l’in-
termédiaire d’un programme serveur. Ce programme serveur dialogue avec un programme client qui peut
être situé n’importe où sur le réseau. Le programme client prend le plus souvent la forme d’un navigateur,
grâce auquel un utilisateur du Web peut demander et de consulter très simplement des documents.
Le dialogue entre un programme serveur et un programme client s’effectue selon des règles précises
qui constituent un protocole. Le protocole du Web est HTTP, mais il est souvent possible de communiquer
avec un site via d’autres protocoles, comme par exemple FTP qui permet d’échanger des fichiers. Ce livre
ne rentre pas dans le détail des protocoles, même si nous aurons occasionnellement à évoquer certains
aspects de HTTP.
Nous revenons brièvement sur chacun de ces concepts ci-dessous.
14 CHAPITRE 2. PROGRAMMATION WEB
requetes
Client httpd
Internet
Documents
Dans tout ce qui suit, le programme serveur sera simplement désigné par le terme serveur ou
par le nom du programme particulier que nous utilisons, Apache. Les termes navigateur et client
désignerons tous deux le programme client. Enfin le terme utilisateur (ou, parfois, internaute ), sera
Documents web
Les documents échangés sur le Web peuvent être de types très divers. De fait, afin de ne pas entretenir
de confusion, la terminologie a récemment changé et on utilise le terme plus général de ressource pour
désigner les informations disponibles sur le Web. Cela dit le principal type de ressource est le document
hypertexte, un texte dans lequel certains mots, ou groupes de mots, sont des liens, ou ancres, donnant accès
à d’autres documents. Le langage qui permet de spécifier des documents hypertextes, et donc de fait le
principal langage du Web, est HTML, qui sera décrit plus loin.
À titre d’exemple, voici un court (hyper)texte dans lequel les expressions en italiques sont des liens :
Ce livre, édité aux Editions O’Reilly, est consacré aux techniques de création de sites à l’aide du langage
PHP et du serveur MySQL
Comme on le voit, un tel texte peut être lu, classiquement, en séquence. On peut aussi le lire en
profondeur en suivant, par exemple, le lien Editions O’Reilly qui donne probablement accès à la page
2.2. HTML 15
d’accueil du site web des Editions O’Reilly. Cette page d’accueil comprendra elle-même de nombreux
liens qui permettront à d’autres documents, et ainsi de suite.
Le Web peut être vu comme un immense, et très complexe, graphe de documents reliés par des liens hy-
pertextes. Les liens présents dans un document peuvent donner accès non seulement à d’autres documents
du même site, mais également à des documents gérés par d’autres sites, n’importe où sur le réseau.
Un des principaux mécanismes du Web est le principe de localisation, dit Universal Resource Location
(URL), qui permet de faire référence de manière unique à un document. Une URL est constituée de trois
parties :
– le nom du protocole utilisé pour accéder à la ressource ;
– le nom du serveur hébergeant la ressource ;
– le numéro du port réseau sur lequel le serveur est à l’écoute ;
– le chemin d’accès, sur la machine serveur, à la ressource.
À titre d’exemple, voici l’URL de la page web de ce livre chez l’éditeur :
http://www.editions-oreilly.fr/mysqlphp.html
Cette URL s’interprête de la manière suivante : il s’agit d’un document accessible via le protocole
HTTP, sur le serveur www.editions-oreilly.fr qui est l’écoute sur le port 80 – numéro par défaut, donc non
précisé dans l’URL – et dont le nom est mysqlphp.html.
À chaque lien dans un document HTML est associée une URL qui donne la localisation de la res-
source. Les navigateurs permettent à l’utilisateur de suivre à un lien par simple clic souris, et se chargent
de récupérer le document correspondant grâce à l’URL. Ce mécanisme rend transparent, dans la plupart
des cas, les adresses des documents web pour les utilisateurs.
2.2 HTML
Le langage HTML (pour HyperText Markup Language) permet de créer des documents indépendants
de toute plate-forme, et donc particulièrement bien adaptés à des échanges d’informations dans un envi-
ronnement hétérogène comme le Web.
HTML repose sur quelques concepts très différents de ceux que l’on peut trouver dans un traitement de
texte standard permettant de créer des documents mis en forme. Tout d’abord, dans un document HTML,
les instructions de mise en forme sont nettement distinctes du texte lui-même. Un système de balises (d’où
le terme Markup Language) permet d’indiquer explicitement, pour chaque partie du texte, quelle est sa
fonction (titre, en-tête de section, légende de figure, etc) ou son mode de présentation. C’est ensuite à
l’outil qui affiche le document HTML de déterminer la position, la taille et les attributs graphiques associés
à chaque balise.
En second lieu, HTML permet de créer des documents hypertextes : contrairement à un texte papier
standard qui se lit séquentiellement, un texte HTML comprend des liens qui permettent d’accéder direc-
tement à d’autres documents, situés soit sur le même serveur, soit n’importe où sur le Web. Un lien étant
associé à une ressource identifiée par une URL, suivre un lien consiste en fait à demander à un serveur web
16 CHAPITRE 2. PROGRAMMATION WEB
de fournir cette resource (en général un document HTML). On peut ainsi explorer de manière transparente
(autrement dit, sans avoir à connaı̂tre explicitement les adresses) l’ensemble des documents qui sont mis à
libre disposition sur Internet,
Il existe de nombreux éditeurs de documents HTML – on peut citer DreamWeaver ou FrontPage sous
Windows, Quanta+ sous Linux – qui facilitent le travail de saisie des balises et fournissent une aide au
positionnement (ou plus exactement au pré-positionnement puisque c’est le navigateur qui sera en charge
de la mise en forme finale) des différentes parties du document (images, menus, textes, etc). Notre objectif
dans ce livre étant n’étant pas d’aborder les problèmes de mise en page et de conception graphique de
sites web, nous nous limiterons à des documents HTML relativement simples, en mettant l’accent sur leur
intégration avec PHP et MySQL.
Le corps du document est marqué par la balise BODY et contient les informations qui seront af-
fichées par le navigateur, ainsi que des commandes de mise en forme. Voici un premier document HTML,
très simple.
On distingue deux types de balises. Les conteneurs permettent d’encadrer une partie de texte (désignée
par le terme élément dans la terminologie HTML) et définissent une ou plusieurs caractéristiques de mise en
forme qui s’appliquent à cette partie de texte. Par exemple tout texte compris entre les balises CENTER
et /CENTER sera centré par le navigateur. De manière générale un conteneur CONT est ouvert par une
commande CONT et fermé par une balise /CONT . Un deuxième type de balise n’affecte pas le texte
du document : c’est le cas par exemple de HR qui trace une ligne horizontale. On parlera alors d’élément
vide.
Remarque : On peut utiliser indifféremment des majuscules ou minuscules (ou un mélange des deux)
pour les balises HTML. Pour plus de clarté nous utiliserons systématiquement les majuscules.
Dans l’exemple ci-dessus, on trouve les balises de base d’un document HTML Le document lui-même
est encadré par le conteneur HTML . On trouve ensuite successivement les conteneurs HEAD , puis
BODY . Le premier est ici réduit à son contenu minimal, à savoir un titre (et un seul) défini par la
balise TITLE . En général ce titre ne s’affiche pas dans la page, mais en tant qu’attribut de la fenêtre
d’affichage. Dans Netscape par exemple, le titre est affiché dans le bord supérieur de cette fenêtre.
La balise BODY encadre le contenu du document proprement dit. Ici on trouve tout d’abord un
titre qui doit s’afficher, centré (conteneur CENTER ), en gros caractères (conteneur H1 ). Les balises
2.2. HTML 17
Hn , où n est un chiffre pouvant aller de 1 à 6, définissent des en-têtes (header) de section, d’importance
décroissante. Il revient au navigateur de choisir des attributs graphiques tels que l’importance (visuelle)
donnée à H1 soit maximale, puis dégressive pour les balises de H2 à H6 . Enfin le document de
Remarque : En principe les caractères accentués dans un texte HTML devraient être spécifiés par des
symboles (appelés entités) commençant par un ’&’ et finissant par ’;’. Un ’é’ est par exemple rendu par le
symbole é. C’est la méthode la plus sûre puisque les caractères accentués sont codés sur 8 bits
(au lieu de 7 pour les caractères ascii les plus simples). Il n’y a pas de garantie absolue qu’un document
codé sur 8 bits sera interprété avec le bon jeu de caractères (caractères latins) par le navigateur, mais nous
utiliserons quand même directement les caractères accentués qui sont plus faciles à manipuler que les en-
tités HTML.
La manière dont ce texte est disposé dans le fichier contenant le document HTML n’a aucune incidence
sur la présentation qu’en fera le navigateur. En particulier les blancs et sauts de lignes multiples entre les
mots sont ramenés un à seul espace de séparation au moment de l’affichage. De plus le navigateur est libre
de déterminer la largeur de la page, la police utilisée et la taille des caractères, etc. En fait toute mise en
forme doit être explicitement spécifiée dans le document par la balise appropriée.
La figure 2.2 montre la présentation de ce premier document avec Netscape. Notez la manière dont sont
rendues les instructions de mise en forme, ainsi que l’affichage du titre dans le cadre de la fenêtre.
3. enfin Editions O’Reilly peut servir de lien vers le site des Éditions O’Reilly.
18 CHAPITRE 2. PROGRAMMATION WEB
La balise qui permet de créer des liens est le conteneur A pour anchor – ancre en français .
L’URL qui désigne le lien est un attribut de la balise. Voici par exemple comment on associe le mot
MySQL à son URL.
A HREF="http://www.mysql.com" MySQL /A
Les attributs dans les balises sont des paires nom=valeur. Les attributs peuvent notamment être
utilisés pour spécifier explicitement des propriétés graphiques (couleur, police, etc) associées à une balise.
Dans le cas des liens, l’attribut HREF doit prendre pour valeur l’URL. En principe la valeur doit être
encadrée par des guillemets doubles (“) ou simples (’), même si les navigateurs tolèrent l’absence de ces
guillemets quand il n’y a pas d’ambiguité.
Voici le document avec les trois liens : noter que la disposition du texte (blancs et sauts de lignes) a été
changée, sans que cela influe sur la présentation finale produite par Netscape. La seule modification notable
faite par le navigateur consistera à mettre en valeur l’élément délimité par les balises A et /A , en
général en le soulignant et en lui attribuant une couleur spécifique. La figure 2.3 montre le résultat obtenu.
Exemple 2 ExHTML2.html : Utilisation des ancres
<HTML>
<HEAD>
<TITLE>Pratique de MySQL et PHP</TITLE>
</HEAD>
<BODY BGCOLOR="white">
<CENTER>
<H1>
Pratique de <A HREF="http://www.mysql.com">MySQL</A>
et <A HREF="http://www.php.net">PHP</A>
</H1></CENTER>
<HR>
Ce site est consacré au
livre "Pratique de <A HREF="http://www.mysql.com">MySQL</A>
et <A HREF="http://www.php.net">PHP</A>", paru aux
<A HREF="http://www.editions-oreilly.fr">Editions O’Reilly</A>.
</BODY>
</HTML>
La balise A peut être utilisée de manière un peu plus générale. On peut par exemple définir une
position interne à un document en plaçant des marques , puis utiliser une ancre pour se positionner
directement sur une marque. Ces ancres internes permettent de se déplacer rapidement à l’intérieur d’un
même document sans avoir à utiliser le défilement séquentiel du texte, et sont donc particulièrement utiles
dans les très longs documents. Par exemple :
A NAME=’Liens’ Liens utiles /A
définit une position de de nom Liens. On peut alors utiliser une ancre donnant directement accès à cette
position :
A HREF=’Liens’ Aller directement aux liens utiles /A
Quand l’utilisateur clique sur Philippe Rigaux , la fenêtre du navigateur permettant d’envoyer des
– HR insère une ligne horizontale (c’est un élément vide : pas de balise de fermeture).
– UL et OL permettent de créer des listes d’items, chacun étant marqué par LI . Par exemple :
<OL>
<LI> Un premier item. </LI>
<LI> Un second. </LI>
<LI> ... </LI>
</OL>
Chaque item est marqué par une puce dans le cas de UL , et par un numéro dans le cas de OL .
lignes, et employer une police à chasse fixe de type Courier. Cette balise peut notamment être utilisée
pour afficher du code informatique.
– TABLE permet d’insérer un tableau. Il s’agit d’une fonctionnalité importante de HTML, no-
tamment parce qu’elle permet de contrôler assez précisément le positionnement relatif des éléments
dans une page. La balise comprend de nombreuses options et attributs, et est présentée en détail
ci-dessous.
– FORM permet d’insérer un formulaire. Les formulaires constituent le moyen privilégié pour in-
teragir avec l’utilisateur en lui demandant de saisir des informations : voir section 2.3.2.
1. Les navigateurs sont en général assez tolérants pour accepter l’omission d’une balise de fermeture s’il n’y a pas d’ambiguı̈té.
Par exemple la balise /P peut être oubliée sans dommage.
20 CHAPITRE 2. PROGRAMMATION WEB
– DIV permet de diviser un texte, et de changer le style de présentation, notamment avec l’attribut
ALIGN qui peut prendre les valeurs LEFT, CENTER ou RIGHT. Le conteneur CENTER est
Tableaux
La balise TABLE permet d’insérer un tableau. Chaque ligne est marquée par TR et /TR , et
chaque colonne par TD et /TD . Il existe de nombreuses balises permettant d’indiquer une légende
Les attributs permettent de contrôler l’apparence d’un tableau, à chaque niveau (tableau, ligne, co-
lonne). Voici les principaux attributs de la balise TABLE .
– BORDER indique l’épaisseur des traits bordant les cellules. Une valeur de 0 supprimera toute bordure.
On obtient alors une grille invisible dont l’intérêt principal est de permettre l’alignement régulier
d’un ensemble d’éléments dans une page. Nous utiliserons cette possibilité pour la mise en page de
formulaires.
– CELLSPACING définit l’espace (en pixels) entre les cellules.
– CELLPADDING définit l’espace entre le bord de la cellule et son contenu.
– ALIGN définit l’alignement du contenu des cellules. Cet attribut peut prendre les valeurs LEFT,
CENTER et RIGHT.
– WIDTH indique la largeur occupée par le tableau dans la fenêtre d’affichage du navigateur. On peut
donner la largeur en pourcentage de cette fenêtre, ce qui est recommandé puisque cela permet d’adap-
ter l’affichage proportionnelement à la taille choisie par l’utilisateur. Par exemple WITDH="80%"
indique que la largeur du tableau est limitée à 80 % de celle de la fenêtre. On peut aussi indiquer une
valeur absolue (en pixels). Par défaut (autrement dit, quand WIDTH n’est pas défini), le navigateur
calcule automatiquement la largeur de chaque colonne et celle du tableau en fonction du contenu.
L’exemple 3 montre les principales options. Le tableau est décrit par une liste d’éléments TR , eux-
mêmes constitués de cellules marquées par TH pour les en-têtes de colonnes et par TD pour les
cellules. La balise /TR peut toujours être omise puisque TR indique le début d’une nouvelle ligne.
<TR><TD>Titanic<TD>1997<TD>Cameron<TD>James<TD>1954
<TR><TD>Sacrifice<TD>1986<TD>Tarkovski<TD>Andrei<TD>1932
</TABLE>
</BODY></HTML>
ALIGN est équivalent, au niveau d’une cellule individuelle, à l’attribut de même nom au niveau du tableau.
WIDTH permet d’indiquer (en pourcentage ou en pixels) la largeur d’une colonne.
COLSPAN=c permet d’indiquer qu’un élément couvre plusieurs colonnes.
ROWSPAN=r permet d’étendre un élément sur plusieurs lignes.
NOWRAP force un élément à s’étendre sur une seule ligne au lieu de revenir à la ligne quand le bord de la
cellule est atteint.
– TT permet de passer dans une police à chasse constante, de type Courier, pour présenter par
principe le gras.
Il est possible de changer la police de caractère, la taille ou la couleur avec la balise FONT qui
propose de nombreux attributs de mise en forme. À titre d’exemple, voici comment passer, avec FONT ,
L’attribut SIZE peut prendre pour valeur un entier de 1 à 7, 1 représentant la taille la plus grande.
L’inclusion d’images se fait avec la balise IMG (il n’y a pas de fermeture) qui doit contenir un
demande au serveur cartier le fichier redbar.gif (correspondant à un trait horizontal de couleur rouge).
Voici quelques autres attributs de la balise IMG :
et rend très difficile une modification des choix de présentation après coup (comment faire pour passer tous
les éléments H1 en couleur rouge, quand le site en contient déjà quelques dizaines, voire quelques
centaines ?).
Ces options on perdu de leur intérêt avec la version 4 de HTML qui introduit les feuilles de style, une
méthode beaucoup plus puissante pour gérer la présentation des documents HTML.
TR.A0 {background-color:white}
TR.A1 {background-color:yellow}
Ce fichier est un fichier ascii très ordinaire, contenant des instructions de mise en forme qui peuvent
être disposées arbitrairement. Les commentaires sont encadrés par /* et */ , comme en C.
On trouve ensuite les noms des balises, suivis par un ensemble d’affectation de valeurs à certains
attributs de ces balises. La balise BODY a pour attribut background-color à laquelle on affecte
la valeur white. De même les balises A et Hn ont pour attribut color qui est ici affectée à une
variante de rouge. L’énumération complète de tous les attributs pour toutes les balises sort du cadre de ce
livre, mais nous citons les plus usités dans ce qui suit.
Une instruction de la forme H1 color : white est une règle dans la terminologie CSS, H1 est
le sélecteur, color est la propriété, et white est la valeur. Toutes les balises HTML peuvent être uti-
lisées comme sélecteur. Il est possible de grouper plusieurs sélecteurs et de leur associer des déclarations
communes (voir exemple 4 pour A et Hn ), et, inversement, de grouper plusieurs propriétés (voir
24 CHAPITRE 2. PROGRAMMATION WEB
Quand le sélecteur est un conteneur, ses propriétés sont héritées par tout le code HTML compris entre
les balises d’ouverture et de fermeture, même si ce code contient lui-même des conteneurs imbriqués. Par
exemple la couleur de fond définie pour BODY est valable pour tout le document, du moins tant qu’il
#ca0000. Que faire quand on souhaite utiliser des critères plus fins que le simple nom de la balise pour
déterminer la présentation à adopter ?
Un exemple très concret nous est donné avec la présentation des tableaux. Afin de faciliter la lecture,
il est courant d’alterner la couleur de fond pour chaque ligne. La propriété définissant la couleur de fond
s’applique à la balise TR : le mécanisme que nous avons vu jusqu’à présent ne permet d’associer à
TR qu’une couleur et s’avère donc insuffisant pour gérer la couleur en fonction du contexte.
Les classes CSS permettent d’associer aux balises un contexte d’application qui peut être référencé
dans le document HTML. Dans l’exemple 4, les lignes suivantes utilisent cette notion de classe.
TR.A0 background-color:white
TR.A1 background-color:yellow
On a donc deux classes pour TR . La classe A0 spécifie une couleur de fond blanche, la classe A1 une
couleur de fond jaune. Voici maintenant comment on peut faire référence à ces classes dans le document
HTML.
TR CLASS=’A0’ TD Alien TD 1979 TD Scott TD Ridley TD 1943
Les classes offrent un mécanisme vraiment puissant pour dissocier les balises HTML des attributs de
présentation. À l’extrême, on peut définir une classe sans faire référence à une balise. Par exemple l’ins-
truction suivante crée une classe remarque qui peut être utilisée, dans le document HTML, en association
avec n’importe quelle balise.
.remarque background-color:yellow
Un dernier mot sur les feuilles de style : pourquoi le terme cascading ? En fait il peut y avoir, pour un
même document, plusieurs spécifications contradictoires. On peut imaginer des styles placés dans l’en-tête
du document, qui entrent en conflit avec une feuille de style externe liée au document. Le terme cascading
fait référence aux règles de priorité que le navigateur doit suivre pour choisir la spécification à appliquer.
Application à un document
Il reste à appliquer cette feuille de style à un document HTML. Il suffit d’ajouter, dans le conteneur
HEAD , la ligne suivante.
<TH>Prénom
<TH>Année naissance
</TR>
<TR CLASS=A0><TD>Alien<TD>1979<TD>Scott<TD>Ridley<TD>1943
<TR CLASS=A1><TD>Vertigo<TD>1958<TD>Hitchcock<TD>Alfred<TD>1899
<TR CLASS=A0><TD>Van Gogh<TD>1991<TD>Pialat<TD>Maurice<TD>1925
<TR CLASS=A1><TD>Pulp Fiction<TD>1994<TD>Tarantino<TD>Quentin<TD>1963
<TR CLASS=A0><TD>Psychose<TD>1960<TD>Hitchcock<TD>Alfred<TD>1899
<TR CLASS=A1><TD>Kagemusha<TD>1980<TD>Kurosawa<TD>Akira<TD>1910
<TR CLASS=A0><TD>Volte-face<TD>1997<TD>Woo<TD>John<TD>1946
<TR CLASS=A1><TD>Sleepy Hollow<TD>1999<TD>Burton<TD>Tim<TD>1958
<TR CLASS=A0><TD>Titanic<TD>1997<TD>Cameron<TD>James<TD>1954
<TR CLASS=A1><TD>Sacrifice<TD>1986<TD>Tarkovski<TD>Andrei<TD>1932
</TABLE>
</BODY></HTML>
La figure 2.5 montre la présentation de ce document avec Netscape. Vous pouvez constater, entre autres,
l’alternance des couleurs dans la présentation du tableau.
Compléments CSS
Nous donnons ci-dessous une sélection de quelques propriétés importantes qui peuvent être utilisées
dans les feuilles de style. Si vous souhaitez en savoir plus, référez vous à la bibliographie ou aux liens
donnés sur le site. Toutes ces propriétés font partie de la norme CSS, mais il est toujours bon de tester leur
effet avec les deux navigateurs principaux.
font-family Le plus prudent est d’utiliser un nom générique comme serif (Times), sans-serif (Arial
ou Helvetica) ou monospace (Courier).
font-size Les valeurs peuvent être exprimées en points (par exemple font-size:16pt), en pixels (
font-size:20px), ou par des termes génériques (xx-small, x-small, small, medium,
large, x-large, xx-large).
font-style Permet de mettre en italiques (italic), en oblique, ou de revenir à normal.
font-weight Les valeurs principales sont bold pour mettre en caractères gras, et normal.
text-decoration Valeurs principales : underline, overline et none. On peut indiquer au navigateur
que les ancres ne devront pas être soulignées avec l’instruction A:link text-decoration :
none . Noter que A:link fait référence à une classe prédéfinie de la balise A .
text-align Permet de contrôler l’alignement horizontal du texte à l’intérieur des balises définissant un pa-
ragraphe, avec les valeurs center, left, right et justify.
vertical-align Permet de contrôler l’alignement vertical, avec les valeurs top, bottom, middle, sub
(pour mettre en indice) et super (pour mettre en exposant).
margin-top, margin-bottom, margin-left, margin-right Les CSS permettent de contrôler la marge autour
des éléments du document, ce qui est très difficile en HTML simple. Les valeurs peuvent être in-
diquées en pixels (10px) ou en points (20pt).
color Cette propriété correspond à la couleur du texte. Il y a beaucoup de possibilités pour spécifier une
couleur. On peut utiliser un code hexadécimal (comme #ca0000), une combinaison rouge-vert-
bleu, ou plus simplement un nom comme white, black, red, blue, aqua, olive. Les
noms ou codes couleurs peuvent se trouver partout sur le Web, par exemple à www.webreference.com.
background-color Correspond à la couleur de fond.
background-image Permet d’utiliser une image comme fond de l’élément. Cette propriété accepte pour
valeur url(MonURL) où MonURL peut être une URL quelconque, y compris, comme c’est souvent
le cas, un nom de fichier local.
position Avec les CSS il devient possible d’indiquer explicitement la position des éléments dans une page.
Cette propriété peut prendre deux valeurs. absolute indique un positionnement absolu, par rap-
port à la fenêtre d’affichage et indépendamment des autres éléments. relative signifie que les
paramètres de positionnement s’interprètent relativement à la position normale de l’élément, et in-
fluent sur le positionnement des autres objets.
width, left, top Ces propriétés sont à utiliser en association avec position. Par exemple
H1 position:relative; left: 100px; top:50px
indique que les éléments H1 doivent être décalés de 100 pixels sur la gauche et 50 pixels vers le
bas.
choisir les films qui lui sont proposés (par exemple tous les films de l’année 1999), (2) l’administrateur doit
disposer d’un outil pratique pour engendrer à la demande une sous-liste des films disponibles.
requetes requetes
Client Programme
Internet httpd
document(s) CGI
document(s)
Client Internet HTML HTML
avec navigateur WEB
Fichiers
La figure 2.6 illustre les composants classiques d’une architecture CGI. Le navigateur (client) envoie
une requête (souvent à partir d’un formulaire HTML) qui est plus complexe que la simple demande de
transmission d’un document. Cette requête consiste à faire déclencher une action (que nous désignins par
programme CGI dans ce qui suit) sur le serveur. En d’autres termes, l’URL dans la page web référence,
au lieu d’une page HTML, le nom du programme CGI qui doit se trouver (du moins sous UNIX) dans le
répertoire cgi-bin.
L’exécution du programme CGI par le serveur web se déroule en trois phases :
1. Requête du client au serveur : le programme serveur récupère les informations transmises par le
navigateur, soit le nom du programme CGI accompagné, le plus souvent, de paramètres saisies par
l’internaute dans un formulaire ;
2. Exécution du programme CGI : le serveur déclenche l’exécution du programme CGI, en lui fournis-
sant les paramètres reçus ci-dessus ;
3. Transmission du document HTML : le programme CGI renvoie le résultat de son exécution au serveur
sous la forme d’un fichier HTML, le serveur se contentant alors de faire suivre au client.
Le programme CGI peut être écrit en n’importe quel langage (C, C++, Perl, script shell, etc) et 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 peut 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.
Avec le CGI, les communications entre serveur et client deviennent plus riches. Il faut décrire d’une
part comment le client (navigateur) transmet des informations plus compliquées qu’une simple URL au
serveur, et d’autre part comment le serveur joue son rôle de transmission entre le programme CGI et le
navigateur.
28 CHAPITRE 2. PROGRAMMATION WEB
2.3.2 Formulaires
Les formulaires constituent un moyen privilégié d’interaction puisqu’ils permettent à l’utilisateur d’en-
trer ses demandes par l’intermédiaire de champs de saisie, et de transmettre ces demandes au serveur.
HTML propose un ensemble de balises pour définir des champs de saisie qui offrent la possibilité appréciable
de créer très facilement une interface.
La figure 2.7 montre un exemple de formulaire permettant la saisie de la description d’un film. Différents
types de champs sont utilisés :
– Le titre et l’année sont des champs simples de saisie. L’utilisateur est libre d’entrer toute valeur
alphanumérique de son choix.
– Le pays producteur est proposé sous la forme d’une liste de valeurs prédéfinies. Le choix est de type
exclusif : on ne peut cocher qu’une valeur à la fois.
– Le genre est lui aussi présenté sous la forme d’une liste de choix imposés, mais ici il est possible de
sélectionner plusieurs choix simultanément.
– L’internaute peut transmettre au serveur un fichier contenant l’affiche du film, grâce à un champ
spécial qui offre la possibilité de choisir (bouton Browse) le fichier sur le disque local.
– Une liste présentée sous la forme d’un menu déroulant propose une liste des metteurs en scène.
– On peut entrer le résumé du film dans une fenêtre de saisie de texte.
– Enfin, les boutons Valider ou Annuler sont utilisés pour, au choix, transmettre les valeurs
La balise FORM
C’est un conteneur délimité par FORM et /FORM qui, outre les champs de saisie, peut contenir
n’importe quel texte ou balise HTML. Les trois attributs suivants sont essentiels pour la communication du
programme serveur avec un programme CGI :
– ACTION est la référence au programme qui doit être exécuté par le serveur ;
– METHOD indique le mode de transmission des paramètres au programme CGI. Il y a essentiellement
deux valeurs possibles, GET ou POST ;
– ENCTYPE indique quel est le type d’encodage des données du formulaire qui doit être utilisé pour la
transmission au serveur. Il y a deux valeurs possibles.
1. application/x-www-form-urlencoded.
Il s’agit de l’option par défaut, utilisée même quand on ne donne pas d’attribut ENCTYPE. Les
champs du formulaire sont transmis sous la forme d’une liste de paires nom=valeur, séparées
par des ’&’.
2. multipart/form-data.
Cette option doit être utilisée pour les transmissions comprenant des fichiers. Le mode de trans-
mission par défaut est en effet inefficace pour les fichiers binaires à cause de la codification
assez volumineuse qui est utilisée pour les caractères non-alphanum ériques. Quand on utilise
multipart/form-data, les fichiers sont transmis séparément des champs classiques, avec une
représentation plus compacte que ces derniers.
Le formulaire des saisie des films utilise cette option pour transmettre efficacemnt le fichier
contenant l’affiche du film (voir chapitre 5, section 5.3.2).
Voici une illustration avec le code HTML donnant le début du formulaire de la figure 6. Le service
associé à ce formulaire est le programme Films qui se trouve sur le serveur cartier.cnam.fr (port
8080). La méthode POST indique un mode particulier de passage des paramètres.
FORM ACTION=’http://cartier.cnam.fr:8080/cgi-bin/Films’ METHOD=POST
À l’intérieur d’un formulaire, on peut placer plusieurs types de champs de saisie, incluant les valeurs
numériques ou alphanumériques simples saisies par l’utilisateur, les choix multiples ou exclusifs parmi un
ensemble de valeurs prédéfinies, du texte libre ou la transmission de fichiers.
2.3. PROGRAMMATION CGI 29
La balise INPUT
La balise INPUT est la plus générale. Elle permet de définir tous les champs de formulaires, à
30 CHAPITRE 2. PROGRAMMATION WEB
programme CGI, de référencer les valeurs saisies sous la forme de couples nom=valeur. La plupart des
champs ont également un attribut VALUE qui permet de définir une valeur par défaut (voir exemple ci-
desssous). Les valeurs de NAME ne sont pas visibles dans la fenêtre du navigateur : elles ne servent qu’à
référencer les valeurs respectives de ces champs au moment du passage des paramètres au programme CGI.
Le type d’un champ est défini par un atribut TYPE qui peut prendre les valeurs suivantes :
TYPE=TEXT Correspond à un champ de saisie permettant à l’utilisateur d’entrer n’importe quelle chaı̂ne
de caractères. La taille de l’espace de saisie est fixée par l’attribut SIZE, et la longueur maximale
par l’attribut MAXLENGTH. Voici le champ pour la saisie du titre du film.
Il est important de noter que caché ne veut pas dire secret ! Rien n’empêche un utilisateur de
consulter la valeur d’un champ caché en regardant le code source du document HTML.
TYPE=CHECKBOX Ce type crée les boutons associés à des valeurs, ce qui permet à l’utilisateur de cocher
un ou plusieurs choix, sans avoir à entrer explicitement la valeur. En associant le même nom à un
ensemble de champs CHECKBOX, on indique au navigateur que ces champs doivent être groupés
dans la fenêtre d’affichage.
L’exemple ci-dessous montre comment donner le choix (non exclusif) entre les genres des films.
Comédie : <INPUT TYPE=’CHECKBOX’ NAME=’genre’ VALUE=’C’>
Drame : <INPUT TYPE=’CHECKBOX’ NAME=’genre’ VALUE=’D’>
Histoire : <INPUT TYPE=’CHECKBOX’ NAME=’genre’ VALUE=’H’>
Suspense : <INPUT TYPE=’CHECKBOX’ NAME=’genre’ VALUE=’S’>
Contrairement aux champs de type TEXT ou apparenté, les valeurs (champ VALUE) ne sont pas
visibles. On peut donc utiliser une codification (’C’, ’D’, ...) plus concise que les libellés descriptifs
(Comédie, Drame, ...). Au moment où le formulaire sera validé, une information genre=valeur
sera passée au programme CGI pour chaque bouton sélectionné par l’utilisateur. Ce programme est
bien entendu supposé connaı̂tre la signification des codes qu’il reçoı̂t.
TYPE=RADIOBOX Comme précédemment, on donne le choix entre plusieurs valeurs, mais ce choix est
maintenant exclusif. Par exemple on n’autorise qu’un seul pays producteur.
France : <INPUT TYPE=RADIO NAME=’pays’ VALUE=’FR’ CHECKED>
Etats-Unis : <INPUT TYPE=RADIO NAME=’pays’ VALUE=’US’>
Allemagne : <INPUT TYPE=RADIO NAME=’pays’ VALUE=’DE’>
Japon : <INPUT TYPE=RADIO NAME=’pays’ VALUE=’JP’>
L’attribut CHECKED (sans valeur associée) permet de pré-sélectionner un des choix. Il est parti-
culièrement utile pour les champs RADIO mais peut aussi être utilisé avec les champs CHECKBOX.
TYPE=SUBMIT Ce champ correspond en fait à un bouton qui valide la saisie et déclenche le programme
CGI sur le serveur. En principe il n’y a qu’un seul bouton SUBMIT, mais on peut en utiliser plusieurs,
chacun étant caractérisé par un attribut NAME auquel on associe une valeur spécifique.
La valeur de l’attribut VALUE est ici le texte à afficher. Au lieu de présenter un bouton simple, on
peut utiliser un image quelconque, avec le type IMAGE. Par exemple :
La balise SELECT
Le principe de ce type de champ est similaire à celui des champs RADIO ou CHECKBOX. On affiche
une liste d’options parmi lesquelles l’utilisateur peut faire un ou plusieurs choix. Le champ SELECT est
surtout utile quand le nombre de valeurs est élevé.
SELECT est un conteneur dans lequel on doit énumérer, avec les balises OPTION , tous les
choix possibles. La balise OPTION a elle-même un attribut VALUE qui indique la valeur à envoyer au
programme CGI quand le choix correspondant est sélectionné par l’utilisateur. Voici par exemple un champ
SELECT proposant une liste de réalisateurs :
Metteur en scène :
<SELECT NAME=’realisateur’ SIZE=3>
<OPTION VALUE=1>Alfred Hitchcock
<OPTION VALUE=2>Maurice Pialat
<OPTION VALUE=3 SELECTED>Quentin Tarantino
<OPTION VALUE=4>Akira Kurosawa
<OPTION VALUE=5>John Woo
<OPTION VALUE=6>Tim Burton
</SELECT>
L’attribut SIZE indique le nombre de choix à visualiser simultanément. Par défaut, SELECT pro-
pose un choix exclusif. L’attribut MULTIPLE (sans valeur associée) donne la possibilité de séléctionner
plusieurs choix.
Au niveau de la balise OPTION , l’attribut SELECTED permet de pré-sélectionner un des choix
(ou plusieurs si le champ SELECT est de type MULTIPLE). Noter que si on sélectionne ’John Woo’,
la valeur 5, pour le paramètre nommé realisateur, sera envoyée au programme CGI. Ce dernier est
supposé averti de la signification de ces codes.
La balise TEXTAREA
Enfin la dernière balise des formulaires HTML est TEXTAREA qui permet à l’utilisateur de saisir
un texte libre sur plusieurs lignes. Les 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 :
<TEXTAREA NAME=’resume’ COLS=30 ROWS=3>Résumé du film
</TEXTAREA>
L’exemple 6 donne le code HTML complet pour la création du formulaire de la figure 2.7. Une première
remarque est que le code est long, relativement fastidieux à lire, et assez répétitif. En fait la plus grande par-
tie du code est constituée de balises HTML (ouvertures, fermetures, attributs) et pas par le texte spécifique
à l’application. HTML est un langage bavard , et une page HTML devient rapidement très volumineuse,
32 CHAPITRE 2. PROGRAMMATION WEB
confuse, et donc difficile à faire évoluer. Un des buts que nous nous fixerons avec PHP est de se doter des
moyens d’obtenir un code beaucoup plus concis.
<H1>Votre choix</H1>
<INPUT TYPE=SUBMIT VALUE=’Valider’>
<INPUT TYPE=RESET VALUE=’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 est 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
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. Une solution plus séduisante est d’effectuer les contrôles par le
navigateur, à l’aide d’un langage comme Javascript qui permet de faire de la programmation au niveau du
client.
Un exemple simple
Prenons un exemple très simple qui nous permettra d’illustrer les divers aspects des échanges CGI. Afin
de rendre plus souple l’affichage de la liste des films dans une page HTML, on va stocker cette liste dans
un simple fichier texte sur le serveur et permettre à l’utilisateur le choisir les films qu’il faut extraire de ce
fichier pour les afficher dans le navigateur. Pour cela on va créer un formulaire qui permet d’indiquer les
critères de sélection des films à afficher, puis on va associer à ce formulaire un programme CGI qui va :
L’exemple 7 montre un (petit !) fichier de films qui sera utilisé pour nos exemples.
De même nous nous contenterons, en attendant de faire beaucoup mieux avec PHP et MySQL, d’un
formulaire qui permet de saisir un titre, un intervalle de dates, et d’appliquer un ET ou un OU pour combiner
ces deux critères. Voici le code de ce formulaire.
</BODY></HTML>
Transmission au serveur
Au moment où l’utilisateur déclenche la recherche, la navigateur concatène dans une chaı̂ne de ca-
ractères une suite de descriptions de la forme nomChamp=val où nomChamp est le nom du champ dans
2.3. PROGRAMMATION CGI 35
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 anMin, 1980 dans anMax et le ET
1. Méthode GET : la chaı̂ne est placée à la fin de l’URL appelée, après un caractère ’?’. Donc on
obtiendrait dans ce cas :
cgi-bin/ExCGI1?titre=Le+Saint&anMin=1978&anMax=1980&comb=ET
La méthode POST est généralement préférée car elle évite d’avoir à gérer des URL très longues.
Actions du serveur
Quand le serveur reçoit une requête CGI, il lance le programme, et lui transmet un ensemble de pa-
ramè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 on a affaire à Netscape ou à
Internet Explorer. Ces transmissions de paramètres se font essentiellement par l’une des trois méthodes
suivantes.
– Variables d’environnement. Le serveur, avant d’exécuter le programme CGI, initialise 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 2.1.
– Entrée standard (stdin). Quand la méthode est POST, les paramètres sont transmis sur l’entrée
standard du programme.
– Sortie standard (stdout). Le programme CGI est responsable de la production d’un document,
HTML ou autre, qui doit être renvoyé au navigateur du client. Ce document, y compris les en-têtes
du protocole HTTP qui sont habituellement pris en charge par le serveur, doit être transmis sur la
sortie standard du programme.
Une des premières tâches du programme est de décoder la chaı̂ne contenant les paramètres pour en
extraire les valeurs des champs.
PATH INFO Informations sur les chemins d’accès menant par exemple
vers des fichiers que l’on souhaite utiliser.
REMOTE USER Nom du client, pour les sites sécurisés avec htaccess
(voir annexe A).
Ce dernier doit prendre en charge l’en-tête du document. Un début typique pour un programme CGI est
donc d’écrire l’en-tête d’un fichier HTML sur stdout. Par exemple (langage C) :
Noter les deux \n qui, pour d’obscures raisons, semblent nécessaires pour insérer une ligne vide après
la clause Content-type. Pour le reste, le programme doit continuer à afficher la suite de la page HTML
avec la fonction printf .
/*************************************************
Phase 1: extraction des paramètres
**************************************************/
lg = atoi (getenv("CONTENT_LENGTH"));
fgets (ligne, lg+1, stdin);
printf ("<B>Paramètres :</B> %s<P>\n", ligne);
/*************************************************
Phase 2: recherche et affichage
**************************************************/
return 1;
}
/** Fin du programme */
/*************************************************
Fonction ExtraitArg
**************************************************/
arg[posArg] = ’\0’;
return &(ligne[pos+1]);
}
Beaucoup de détails sont laissés de côté, et notamment tous les contrôles qui seraient souhaitables pour
vérifier que les valeurs passées sont correctes.
Pour l’essentiel, ce programme écrit sur la sortie standard, avec des fonctions printf, un fichier
HTML. Ce fichier comprend des parties statiques pour la mise en forme, et une partie dynamique qui
présente le résultat de la requête. Voici quelques explications sur les principaux aspects.
Tout d’abord on va stocker dans une chaı̂ne de caractères ligne la liste des paramètres qui est fournie
sur l’entrée standard (stdin en C). On récupère la valeur de la variable d’environnement CONTENT LENGTH.
lg = atoi (getenv("CONTENT_LENGTH"));
fgets (ligne, lg+1, stdin);
Vient ensuite la phase la moins agréable : il faut extraire les arguments qui sont dans la chaı̂ne ligne.
Ces arguments constituent une liste de paires nom=valeur (voir ci-dessus). Nous utilisons une fonction
très simple, ExtractArg, pour récupérer les valeurs en question.
Finalement on parcourt les lignes du fichier des films en effectuant le test par rapport aux valeurs saisies
dans le formulaire HTML.
Une des caractéristiques essentielles des programmes CGI est d’écrire sur la sortie standard (ici avec
printf) un document HTML qui comprend des données provenant de sources extérieures (ici un fichier).
Bien entendu il est possible d’utiliser des commandes HTML arbitrairement complexes, ce qui permettrait
par exemple de présenter les films sélectionnés sous forme de tableau comme dans l’exemple 3. Cela
entrainerait une lourdeur accrue du code qui est déjà assez touffu.
Le programme donné ci-dessus fonctionne et peut être testé sur notre site. Cela dit, s’il est suffisant
pour illustrer les principaux aspects de l’interface CGI, il présente beaucoup trop de faiblesses pour être
utilisé dans une application réelle. Par exemple il faudrait prendre en compte les caractères blancs dans
les titres des films qui sont codés par des ’+’ dans le passage au programme CGI, ainsi que les possibles
caractères spéciaux ou accentués. Il serait bon également de tester que la méthode utilisée est bien POST,
avec un test comme :
De plus la fonction ExtraitArg ne présente pas les plus grandes garanties de robustesse. D’ailleurs
le langage C n’est pas le plus approprié pour la programmation CGI, Perl paraissant plus adapté. Quel
que soit le langage utilisé, si vous souhaitez vraiment faire du CGI (ce qui ne devrait pas être nécessaire
puisque nous verrons plus loin que la solution PHP offre une solution plus simple et tout aussi puissante),
il faut de toutes manières utiliser une des nombreuses bibliothèques déjà disponibles, qui fournissent tout
un ensemble de fonctions prêtes à l’emploi pour la récupération des paramètres et la production de HTML.
Tout d’abord, comme nous l’avons vu avec l’exemple précédent, le passage des paramètres au pro-
gramme est relativement pénible à gérer, même si les nombreuses fonctions existantes amoindrissent cet
inconvénient. Idéalement, on souhaiterait disposer, directement dans le programme, des variables corres-
pondant aux champs du formulaire HTML : c’est ce que fait PHP.
40 CHAPITRE 2. PROGRAMMATION WEB
mation CGI n’est pas une extension de HTML qui permettrait de recourir à ce langage pour la partie des
pages qui correspond à du texte fixe. Au contraire, PHP s’intègre aux documents HTML et permet de passer
souplement d’un langage à un autre.
Sessions
Enfin une caractéristique essentielle de la programmation CGI (et de la programmation web en général)
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.
Un 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 obstacle pour la gestion
de sessions qui se dérouleraient 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é.
Plusieurs solutions, plus ou moins satisfaisantes, existent pour tenter de résoudre ce problème.
1. Variables d’environnement. Le protocole HTTP s’est enrichi d’un ensemble de variables qui sont
systématiquement transmises du navigateur au serveur. Par exemple les variables REMOTE USER et
REMOTE PASSWORD peuvent être définies au moment d’un accès à un site sécurisé. Cette méthode
est globalement insatisfaisante : les variables disponibles sont en nombre limité, fixées à l’avance, et
en partie dépendantes du navigateur utilisé.
2. Paramètres dans l’URL. Les informations constituant le contexte de la session peuvent être placées
systématiquement dans l’URL, après le caractère ’?’ qui indique le début des paramètres. Le pro-
gramme peut ensuite les récupérer dans la variable QUERY STRING. Cette technique est limitée
par la taille des informations qui peuvent être placées dans une URL, ainsi que par le manque de
confidentialité.
3. Cookies. La dernière possibilité, et 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. 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.
Il faut noter qu’un cookie ne disparaı̂t pas quand le navigateur est stoppé puisque il est stocké dans un
fichier. Netscape par exemple écrit les cookies dans un fichier cookies du répertoire netscape : il est toujours
intéressant de consulter ce fichier pour voir qui a laissé traı̂ner des informations chez vous !
On peut considérer comme relativement indélicat cette technique qui consiste à écrire des informations
sur le disque dur d’un client, et à son insu, mais les cookies offrent le moyen le plus simple, et aussi le
plus puissant, pour créer un contexte persistant aux différents échanges client/serveur. Nous les utiliserons
le moment venu pour gérer les sessions, mais par l’intermédiaire de fonctions PHP qui fournissent une
interface simple et facile à utiliser.