Vous êtes sur la page 1sur 6

Matériels

et systèmes

À la découverte
des pages
dynamiques
Michèle BORRAS – MATICE – Académie de Créteil

Lorsque, dans un site, les contenus d’une


page doivent être fréquemment actualisés,
il est intéressant de recourir à des pages
dynamiques. Créer de telles pages est une
vraie activité de programmation qui néces-
site l’utilisation d’un langage de scripts.
Nous vous proposons une approche par
l’exemple des principes de conception et
d’écriture de scripts en PHP.

POUR TESTER
Pour tester le fonctionnement des pages dynamiques dont la création vous est
proposée dans cet article, nous vous proposons de vous rendre aux adresses ci-
dessous.
p
Parmi les pages d’un site, certaines demandent de fréquentes
mises à jour. Sans autre outil qu’un éditeur de pages HTML
(Dreamweaver par exemple), il faut à chaque fois reprendre
ces pages dans l’éditeur pour en modifier le contenu. Seule
une personne compétente dans l’édition de pages HTML est
en mesure de faire les mises à jour. Or, on peut souhaiter
confier cette tâche à des personnes (des élèves ?) qui n’ont
pas besoin de connaître le fonctionnement d’un éditeur de
pages. Il leur suffit de pouvoir disposer d’un formulaire de
saisie en ligne pour effectuer ces modifications. La solution
consiste à générer dynamiquement les pages à mettre à jour.
Du point de vue de sa composition, une page est « dyna-
mique »(1) lorsque son contenu (ou une partie) est calculé par
le serveur au moment de son appel, en fonction de données
habituellement stockées dans une base de données.
L’actualisation de la base peut se faire par l’intermédiaire de
formulaires de saisie. La page est écrite, en partie ou entière-
ment, dans un langage de scripts comme PHP, ASP ou autre.
Ces langages, interprétés par le serveur, intègrent des instruc-
Pour consulter la Une : tions spécifiques permettant de faire exécuter des requêtes à
www.ac-creteil.fr/medialog/scripts/archive48/accueil.php la base de données, écrites dans le langage universel SQL.
Pour effectuer la mise à jour : Les scripts sont interprétés et exécutés par le serveur web.
www.ac-creteil.fr/medialog/scripts/archive48/formulaire_mise_a_jour.php Pour illustrer l’intérêt que peuvent présenter ces langages
Au cas où la mise à jour a déjà été faite, si vous voulez tester le fonctionnement dans la conception de pages dynamiques, nous vous
du formulaire, il faudra d’abord vider la table infos de la base de données, en proposons une « mise en situation » avec l’exemple suivant
exécutant le script PHP : réalisé en PHP.
www.ac-creteil.fr/medialog/scripts/archive48/effacer_infos.php
Si vous voulez alimenter la table des anniversaires : (1) La plupart des pages affichées sur la Toile sont des pages HTML. Elles sont dites « statiques » parce
www.ac-creteil.fr/medialog/scripts/archive48/rempli_anniversaire.php que leur contenu ne varie pas si on ne le modifie pas manuellement. Une fois affichée, une page, qu’elle
soit statique ou dynamique, peut présenter de l’animation et de l’interactivité par programmation avec
des langages comme JavaScript ou Flash, interprétés par le navigateur, « côté client ».

22 MÉDIALOG N°48 — DÉCEMBRE 2003


Matériels et systèmes
La page ci-dessus est une page dynamique. Elle affiche des informations qui
dépendent de la date du jour : la température, la météo, la fête à souhaiter…

CHAQUE JOUR, UNE NOUVELLE PAGE... de certains champs…, autrement dit en faire une véritable
application. Cela imposerait une programmation beau-
Dans une classe de CE1, chaque jour un groupe d’élèves coup plus complexe que celle que nous avons souhaité
est chargé de l’actualisation de la première page (la Une) présenter dans cet article.
de leur rubrique de classe sur le site de l’école. Pour cela, Pour la page de Une, on a donc défini les principes de fonc-
les enfants n’ont pas à utiliser un logiciel de conception de tionnement suivants :
pages HTML. Ils effectuent les modifications de cette page Premier cas : lorsque le formulaire de saisie a été rempli
directement dans le navigateur, par l’intermédiaire d’un avec au moins un champ saisi puis validé, le visiteur voit la
formulaire dont l’utilisation est la plus simple possible. page d’accueil actualisée.
Chaque jour, cette Une affiche les informations suivantes : la Deuxième cas : lorsque le formulaire de saisie a été validé
date, la température extérieure relevée le matin à l’entrée en sans aucun champ rempli, il voit une page qui affiche « Pas
classe, la météo du jour illustrée par un dessin, choisi parmi de mise à jour aujourd’hui ».
quatre, la fête du jour, relevée sur le calendrier mural affiché Troisième cas : si le formulaire n’a pas encore été validé, il
dans la classe, les activités du jour (bibliothèque, piscine, se trouve devant le message « Mise à jour non encore faite ».
chorale), telles qu’elles apparaissent dans l’emploi du temps Pour la page de remplissage du formulaire, le principe
hebdomadaire et l’info du jour, correspondant à un événe- adopté est que, si la mise à jour a déjà été faite, on n’a plus
ment marquant dans la vie de la classe ou de celle des accès au formulaire de saisie, mais au message « Mise à jour
élèves. Enfin, un clic sur l’image d’un gâteau d’anniversaire déjà faite ».
provoque l’affichage d’un message destiné aux enfants dont Dans la conception du formulaire de saisie, on a décidé que :
c’est l’anniversaire ce jour-là. la date est la date récupérée sur le système ;
Cette Une est une page dynamique écrite en PHP qui la température du jour sera sélectionnée dans une liste
utilise les données stockées dans une base de données. déroulante ;
Cette base de données est remplie grâce à une page l’image de la météo sera choisie parmi quatre images, le
« formulaire » elle-même écrite en PHP. L’ensemble choix étant unique et fait par la coche d’un bouton radio ;
constitue une application dont on a délibérément simplifié la fête sera tapée dans une zone de texte (une seule ligne) ;
le fonctionnement, pour présenter les principes de la les activités seront choisies par des cases à cocher, toutes
programmation en PHP. Elle fonctionne, en particulier, les cases pouvant être cochées (trois activités) ;
avec un certain nombre de limites en ce qui concerne la l’info du jour sera tapée dans une zone de texte multi-
saisie des données dans le formulaire. Ainsi, le formulaire lignes.
de saisie ne peut plus être revu et modifié une fois qu’il a Ces choix permettent de présenter la plupart des modes de
été validé. Le remplissage d’un seul champ suffit à saisie dans un formulaire. Pour prendre connaissance du
permettre la validation du formulaire entier. Bien sûr, on fonctionnement de l’application, nous vous invitons à vous
pourrait souhaiter revenir sur le formulaire, obliger la saisie rendre aux adresses citées dans l’encadré page 22.

MÉDIALOG N°48 — DÉCEMBRE 2003 23


Matériels
et systèmes

Date système
0 1 2 3 4 5 6 7
date temp info fete meteo pisc biblio cho

2003-09-18 23 le petit frère… Nadège 1 o

2003-09-19 22 Le cochon d’Inde… Émilie 1 o


2
2003-09-22 18 Les graines de… Maurice 2 o

2003-09-23 17 C’est l’automne 3

CONCEPTION DE L’APPLICATION La table de la base de données est conçue de la façon


suivante. Le champ date (de type date) récupère la date
L’application met en jeu un serveur web (www.ac- système au format anglais, format par défaut. Le champ
creteil.fr par exemple) exécutant des scripts PHP, un temp (de type char, acceptant trois caractères au plus)(2)
serveur de base de données MySql (à Créteil c’est une reçoit l’élément sélectionné dans la liste. Le champ meteo
autre machine) contenant les bases. Les scripts PHP sont (de type char acceptant 1 caractère) reçoit les valeurs
exécutés par le serveur web au moment de l’appel de la 1,2, 3 ou 4 correspondant au numéro attribué à chaque
page qui les contient, depuis un navigateur (lorsqu’on image dans le formulaire. Le champ fete (de type varchar
tape l’adresse de la page dans la barre d’adresses ou limité à 50 caractères) reçoit le prénom saisi dans la
lorsqu’on clique sur le lien correspondant dans une zone Fête du jour. Le champ info (de type text limité par
page). Les requêtes SQL sont transmises par les scripts défaut à 65536 caractères) reçoit le texte saisi dans la
PHP à Mysql. zone correspondante du formulaire. Pour les activités du
Une fois le cahier des charges défini, on fabrique l’inter- jour, on a choisi de créer un champ par activité (de type
face du formulaire de saisie (image 1 ci-dessus) à l’aide char acceptant 1 caractère) : pisc, biblio et cho. Lorsqu’une
d’un éditeur de pages HTML, Dreamweaver par exemple, des cases est cochée dans le formulaire, le caractère o
qui permet notamment d’insérer des objets de formulaire (la lettre « o » en minuscule) s’inscrit dans le champ
comme ceux que l’on a choisi d’utiliser. On fabrique, de correspondant qui est vide sinon.
la même façon, la page de Une (image 3 en page 25). Toutes les pages de l’application utilisent des scripts
Intervient ensuite la programmation. L’écriture dans la PHP. Les fichiers correspondant doivent avoir l’exten-
table (image 2), la récupération des données et l’affichage sion .PHP pour que ces scripts puissent être exécutés
de la page de Une vont nécessiter de programmer le tout, par le serveur. La page de mise à jour du formulaire
ici avec le couple PHP-MySql. Les valeurs entrées dans le
formulaire doivent être inscrites dans une table de la base
de données puis affichées dans la page de Une. (2) En raison des 3 points en début de liste déroulante.

24 MÉDIALOG N°48 — DÉCEMBRE 2003


Matériels et systèmes
3

$infos-jour

2003-09-18 23 le petit frère… Nadège 1 o

0 1 2 3 4 5 6 7

Les informations du jour sont saisies par les élèves dans une page formulaire
(image 1). Elles sont transmises par un script PHP dans une table de la base de
données (image 2). Dans la page de Une, un script PHP permet de récupérer
dans la table les informations du jour pour affichage (image 3). PROGRAMMATION
L’objectif de cet article est de montrer ce que sont des
pages dynamiques et en quoi consiste la programmation
s’appelle donc formulaire_mise_a_jour.php et la page de en PHP. En conséquence, nous n’aborderons pas la
Une accueil.php . Dans le formulaire de saisie, lorsque création de la base. Cette dernière a été créée, pour les
l’utilisateur clique sur le bouton Envoyer, les données besoins de la démonstration, avec un utilitaire appro-
saisies sont transmises à un script PHP qui les insère prié sur le serveur de base de données.(3)
dans la table. Une solide formation au couple PHP-MySql ou un équi-
Au moment où l’utilisateur appelle la page d’accueil, un valent est indispensable pour mener à bien un projet de
script PHP récupère en une seule fois toute la ligne des création de pages dynamiques accédant à une base de
données de la table correspondant à la date du jour si données. Ici, nous allons lever quelques coins du voile
celle-ci figure dans la table. Ensuite, la valeur de sur les mystères de la programmation en PHP, en présen-
chaque élément de la ligne ainsi récupérée est affichée tant les grands principes d’écriture d’une application.
à l’endroit voulu de la page. À l’appel de la page, deux Pour cela, nous nous limiterons à expliquer les parties
cas peuvent se présenter : la date du jour ne figure pas de programme correspondant à la saisie, la transmission
dans la table ou elle y figure avec tous les autres et l’affichage des données relatives à la météo et à la
champs vides. Le script teste ces deux cas. Il affiche fête du jour.
respectivement « mise à jour non encore faite » ou « la On suppose donc la table infos créée. Pour l’écriture des
mise à jour ne sera pas faite ». scripts, on utilise un éditeur spécifique dans lequel on
De la même façon, à l’appel de la page formulaire, le charge les pages html précédemment composées avec
script vérifie si la date du jour est dans la table. Dans ce Dreamweaver ou un autre éditeur. On les sauvegarde avec
cas, il affiche « mise à jour déjà faite ». Sinon le formu- l’extension .PHP. Ainsi la page formulaire_mise_a_jour.htm a
laire est affiché. été sauvegardée en formulaire_mise_a_jour.php et la page
accueil.htm en accueil.php.

(3) Il s’agit d’une base de données MySql. Les tables sont créées à l’aide de l’utilitaire phpMyAdmin.

MÉDIALOG N°48 — DÉCEMBRE 2003 25


Matériels
et systèmes

<input type="radio" name="meteo" value="1">


<img src="../../images_accueil/meteo_soleil.jpg" width="60"
height="60" alt="Plein soleil">
<input type="radio" name="meteo" value="2">
<img src="../../images_accueil/meteo_soleil_nuages.jpg" width="60"
height="60" alt="Nuages"> <br>
<input type="radio" name="meteo" value="3">
<img src="../../images_accueil/meteo_pluie.jpg" width="60"
height="60" alt="Pluie ou neige">
D <input type="radio" name="meteo" value="4">
<img src="../../images_accueil/meteo_neige.jpg" width="60"
height="60" alt="Neige">
B
Il en est de même pour la fête du jour (C).

C
<font color="#6699FF">Fête du jour : </font><br></b></font>
A <input type="text" name="fete" size="40">

La page à laquelle on envoie le formulaire se nomme


mise_a_jour.php. Cette action est indiquée dans la balise (D)
<form action="mise_a_jour.php" method="post">.

2. Transmission des données dans la page


mise_a_jour.php et écriture dans la table infos.
La page formulaire_mise_a_jour.php. Les lignes en pointillés représentent des
lignes de code qui ne sont pas explicitées ici.
À l’appui sur le bouton Envoyer (submit), s’effectue auto-
matiquement le passage des paramètres : la page
1. Préparation du formulaire pour la saisie des données mise_a_jour.php reçoit les valeurs des éléments du formu-
laire. Le nom donné à un élément de formulaire par NAME
La page formulaire_mise_a_jour.php contient au début du devient une variable PHP portant le même nom, mais
document (ici avant la balise <head>) un script PHP (entre préfixée par un dollar $. Ainsi, on a, dans mise_a_jour.php, :
les balises <? et ?>) qui teste l’existence de la date du jour $temp=23 (si on a sélectionné 23 dans la liste à la saisie),
(la date système) dans la table infos. $info=”Le petit frère de Johan est né cette nuit”, $meteo=1
Dans le corps du document (balise <body>), figure un seul (si c’est le bouton radio correspondant à ce numéro qui a
programmation

formulaire délimité par les balises <form> et </form> à été coché).


l’intérieur desquelles se trouvent tous ses composants,
ainsi qu’un bouton dit de soumission (submit) (A). Ce
bouton permet d’envoyer l’ensemble du formulaire au
script qui insère les valeurs dans la base. Chaque élément
de formulaire possède une propriété NAME qui est l’identi-
ficateur de l’objet. Il faut donner un nom explicite à
chacun de ces éléments, par exemple, NAME= ”temp”,
pour la liste déroulante des températures, NAME= ”fete”
pour la zone de saisie de la fête, NAME= ”meteo” pour les
boutons radios. Le cas échéant, il faut adapter les valeurs
(VALUE) et, par exemple, attribuer la valeur 1 au bouton
radio correspondant à l’image de plein soleil, la valeur 2
au bouton correspondant aux nuages (B)…

Ci-dessus, la page mise_a_jour.php.

La page mise_a_jour.php exploite ces données pour les écrire


dans la table, selon le code suivant :
mysql_query("insert into infos (date, temp, info, fete,
meteo, pisc,biblio,cho) values(NOW(),'$temp','$info',
fete','$meteo','$pisc','$biblio','$cho')",$connexion);

26 MÉDIALOG N°48 — DÉCEMBRE 2003


Matériels et systèmes
Ce qui signifie qu’on insère dans la table infos un nouvel On exécute ensuite la requête :
enregistrement. Les champs de la table sont énumérés dans $result=mysql_query($req,$connexion);
le même ordre que les valeurs correspondantes (VALUES). Le résultat ($result) reçoit, en cas de réussite de la requête,
Pour faciliter la lecture, les mêmes noms ont été donnés les informations de la ligne de la table dont le champ date
aux champs de la table et aux éléments correspondants du contient la date du jour.
formulaire, devenus des variables PHP. La valeur de la On extrait le résultat :
variable $fete s’inscrit dans le champ fete de la table infos $infos_jour=mysql_fetch_row($result);
(qui contient alors par exemple Nadège). Le champ meteo La variable $infos_jour contient l’enregistrement extrait

programmation
contient la valeur de la variable $meteo (1 par exemple). (s’il existe). C’est un tableau indicé dans l’ordre des
mysql_query est une instruction PHP, NOW() est une champs à partir de 0.
fonction mysql, correspondant à la date système au format Enfin, on a choisi de récupérer les contenus des champs
anglais (2003-09-18). dans des variables. On affecte une variable $date avec le
"insert into infos (date, temp, info, fete, meteo, premier élément de la variable $infos_jour :
pisc,biblio,cho) values(NOW(),'$temp','$info', '$fete', $date=$infos_jour[0];
'$meteo','$pisc','$biblio','$cho')" On affecte une variable $temp (pour la température) avec
est la requête SQL transmise. le deuxième élément de la variable $infos_jour, et ainsi de
$connexion correspond à la connexion au serveur de base de suite pour tous les éléments de la table.
données. Le champ fete étant en quatrième position, et le champ
meteo en cinquième, on obtient :
3. Récupération des données de la tables infos et affichage $fete=$infos_jour[3];
$meteo=$infos_jour[4];
Dans la page accueil.php, on récupère la date système par les Il faut ensuite remplacer, dans la variable $meteo, la valeur
lignes d’instructions suivantes (E) : récupérée dans la table par l’image correspondante (G).
setLocale("LC_TIME","french"); Dans le corps du document, on affiche le contenu des
$dateFR=strFTime("%A %d %B %Y"); variables par un script PHP contenant l’instruction echo
La première ligne permet de récupérer la date en français suivie du nom de la variable. Pour obtenir la mise en forme
et la seconde de choisir le format d’affichage (jeudi 18 désirée, cette instruction est intégrée aux balises HTML
septembre 2003). La variable $dateFR contient la date au d’attributs de caractères. Ainsi, pour l’affichage de la fête
format choisi. du jour :
<b><font color="#6699FF">Fête du jour : </font><br>
<? echo $fete; ?></b></font>
E
Pour l’affichage de l’image correspondant à la météo du jour :
<? echo $meteo; ?>

ET MON ANNIVERSAIRE ?
Pour l’affichage des anni-
G versaires, on utilise une
table qui contient les
prénoms, l'initiale du nom
et la date de naissance de
tous les élèves de la classe.
Cette table a été préalable-
ment remplie. Il peut y
avoir plusieurs anniver-
saires à souhaiter le même
jour. Par conséquent, le
résultat de la requête
formulée sur le jour et le
mois courants dans le
date_naiss prenom nom champ date de naissance,
2003-09-18 Emma B. fournit l'ensemble des
lignes correspondantes de
2003-09-19 Victor H.
Ci-dessus, la page accueil.php. la table. Il faut ensuite les
extraire une à une dans une
On récupère tous les champs de la table infos pour le jour boucle. Ici, on a choisi de
courant dans une seule variable (F) : recueillir ces lignes dans la page accueil.php, et de trans-
$req="select * from infos where date=NOW() "; mettre les noms (prénom et initiale du nom) à la page anni-
Cette ligne signifie : sélectionner tous les champs de la versaire.php qui les affiche dans une petite fenêtre.
table infos où le champ date est celui de la date du jour.

MÉDIALOG N°48 — DÉCEMBRE 2003 27