Génération dynamique de pages web - Sport

Génération dynamique de pages web
Cet article décrit quelques techniques de programmation web permettant de générer des pages web
dynamiquement à partir d’une base de données.
STRUCTURE DE LA BASE DE DONNÉES
Figure 1
STRUCTURE DU SITE
Figure 2
HEPL 2009-2010
1
PAGE INDEX
Figure 3
La bannière, le pied de page et le menu sont stockés dans des fichiers externes pour une mise à jour
dynamique : il suffit de modifier un fichier pour modifier l’apparence de toutes les pages dans lesquelles il est
appelé. Les trois fichiers sont appelés respectivement aux lignes 22, 23 et 29 par une instruction include. Le
chemin vers le dossier contenant les fichiers à inclure est construit dynamiquement à partir de la constante
PATH définie à la ligne 6.
HEPL 2009-2010
2
La bannière est stockée dans le fichier banner.user.inc. Par pure convention, l’extension inc indique qu’il s’agit
d’un fichier à inclure. De même l’extension user indique qu’il s’agit de la bannière de la partie user. On pourra
ainsi créer facilement une bannière différente pour la partie admin.
Figure 4
Le pied de page est stocké dans le fichier footer.inc.php. On ajoute l’extension php car le fichier contient du
php.
Figure 5
Le menu est stocké dans le fichier menu.user.inc.php. Grâce à l’extension user, on pourra facilement créer un
menu différent pour la partie admin.
Figure 6
HEPL 2009-2010
3
PAGE LISTE01.PHP
Afficher la liste des noms des restaurants, l’un à la suite de l’autre, séparés par un point-virgule, sans autre
mise en page.
Figure 7
A la ligne 17, la fonction de connexion est une expression booléenne utilisant l’opérateur or. Si le premier
terme de l’expression est vrai, il n’est pas nécessaire d’évaluer le second et le script peut continuer à la ligne
21. Par contre, s’il est faux, le script doit évaluer le second terme, celui qui vient après l’opérateur or, et comme
ce second terme est une instruction die, le script avorte.
L’explication s’applique de la même façon aux lignes 21 et 22.
HEPL 2009-2010
4
Figure 8
Question : comment expliquer les lignes 30 et 31 ?
Figure 9
A la ligne 33,
A la ligne 38, la fonction mysql_fetch_array() lit une ligne du jeu d’enregistrements $rs et renvoie un tableau
associatif dans la variable $row. Lorsqu’il n’y a plus de lignes dans le jeu d’enregistrements, la fonction renvoie
false, ce qui provoque l’arrêt de la boucle while.
A la ligne 40, on imprime l’élément du tableau identifié par la chaîne "nomRestaurant" et on lui concatène un
point-virgule.
A la ligne 43, on a quitté le script php et on est revenu en html pour fermer le paragraphe </p>
A la ligne 44, on rouvre à nouveau le script pour pouvoir fermer la connexion, puis on le referme à la ligne 47
pour insérer les balises de fermeture </body> et </html>.
Figure 10
HEPL 2009-2010
5
Figure 11
PAGE LISTE02.PHP
Afficher les noms des restaurants en une colonne, avec bannière, menu et pied de page.
Figure 12
HEPL 2009-2010
6
Figure 13
A la ligne 16, on ajoute une enveloppe wrapper pour contenir tous les éléments html. Aux lignes 18 et 19, on
inclut la bannière et le menu, puis on continue avec la connexion. La ligne 21 correspond à la ligne 14 de la
figure 7.
Figure 14
A la ligne 34, on insère dans le code html une division identifiée par content et ouvre une <table> à la ligne
35 avant la boucle while. Dans la boucle while, à la ligne 39, on ouvre un <tr> qui contient un <td> (l. 40) et
dans ce <td>, on insère le nom du restaurant en php. Aux lignes 44 à 46, on rouvre le script php pour insérer
l’accolade de fermeture de la boucle, puis on insère les balises de fermeture de la table et de la division. On
rouvre alors le script pour fermer la connexion (l. 51) puis insérer le pied de page (l. 53).
HEPL 2009-2010
7
PAGE LISTE03.PHP
Même exercice, mais en alternant les couleurs pour les lignes paires et impaires
Figure 15
Il faut tout d’abord construire deux classes CSS correspondant aux couleurs paires et impaires.
Figure 16. Dans le fichier best50.css
Dans le script php, il faut pouvoir déterminer si le numéro de ligne est pair ou impair. Pour cela, nous déclarons
une variable $i que nous initialisons à 0 à la ligne 30.
A la ligne 32, nous utilisons l’opérateur modulo % pour calculer le reste de la division entière. Si le modulo est
égal à 0, la ligne est paire et nous affectons la valeur "paire" à la variable $classe (ligne 33), sinon elle
est impaire et nous affectons la valeur "impaire" à la variable $classe (ligne 35).
A la ligne 38, nous ajoutons un attribut class à la balise <tr> et nous indiquons la valeur de la variable
$classe dans les guillemets.
Il ne reste plus qu’à incrémenter la variable $i avant de fermer la boucle.
HEPL 2009-2010
8
Figure 17
Pour alléger le code de la page, nous stockons dans le fichier connexion.inc.php les instructions des
deux premières étapes (connexion et sélection) qui sont identiques pour toutes nos pages.
Figure 18
La fonction mysql_set_charset à la ligne 8 force l’affichage des données de la base de données en UTF-8 pour
un affichage correct des caractères accentués.
HEPL 2009-2010
9
Bien sûr, il faut inclure ce fichier dans la page liste03.php
Figure 19
PAGE LISTE04.PHP
Il faut maintenant pouvoir choisir le restaurant en fonction de l’initiale du nom. L’utilisateur choisit l’initiale
dans un alphabet en haut de la page. La nationalité du restaurant est représentée par un drapeau national à
droite du nom.
Figure 20
La fonction alphabet
Voyons d’abord comment afficher l’alphabet. Nous créons une fonction alphabet() que nous stockons
dans la page après le code html, pour rendre celui-ci plus lisible.
A la ligne 53, nous créons une division nommée alphabet et nous la refermons à la ligne 59.
A la ligne 54, nous utilisons une boucle for pour parcourir la plage des entiers de 65 à 90, correspondant aux
codes ASCII des caractères majuscules A-Z.
A la ligne 55, nous créons une zone de texte inline avec une balise span qui permettra de styler chaque initiale
et nous la refermons à la ligne 57.
HEPL 2009-2010
10
Figure 21
L’instruction la plus complexe est sans doute la fonction printf à la ligne 56. L’intérêt de cette fonction est
qu’elle permet d’imprimer la même valeur de différentes façons en fonction d’une chaîne de formatage.
Par exemple, le script ci-dessous affiche la valeur 122 successivement comme un caractère, comme un entier,
comme un réel, puis un réel sur 8 positions avec une décimale, puis en hexadécimal et finalement en
hexadécimal majuscule.
Figure 22
On obtient
Figure 23
Lorsque l’utilisateur clique sur une lettre de l’alphabet, la page doit être rappelée en lui transmettant la lettre
choisie. On peut vérifier que ce sera bien le cas en survolant une lettre de l’alphabet, le lien hypertexte
apparaît dans la barre de status au bas de la fenêtre du navigateur. Devinez quelle lettre est survolée à la figure
24.
HEPL 2009-2010
11
Figure 24
Pour provoquer ce comportement, le code html doit être formé d’un lien hypertexte <a> (fig. 25) dont
l’attribut href est formé du point d’interrogation suivi du nom de la variable, du signe =, puis de la valeur de la
variable :
Figure 25
Remarquez la valeur C majuscule dans la variable d’URL et le c minuscule qui sera affiché à l’écran. Le c
minuscule est obtenu en ajoutant 32 à la valeur ASCII.
Question : pourquoi l’alphabet est-il affiché en majuscules ?
Figure 26
Réponse : ce ne sont pas des majuscules mais des petites capitales obtenues par une règle dans la feuille de
style :
Figure 27
La fonction listeRestaurants()
Pour sélectionner uniquement les noms commençant par l’initiale choisie, il faut modifier ajouter une clause
where à la requête SQL. Pour retrouver les noms commençant par A on écrit
WHERE nomRestaurant like ‘A%’
En créant une fonction listeRestaurants qui reçoit en paramètre l’initiale choisie on peut facilement
généraliser la requête à toutes les lettres de l’alphabet.
En même temps, on complète la requête par une jointure sur la table tblPays afin de récupérer lenom du
fichier source de l’image du drapeau. La jointure est établie par le champ idPays, clé primaire de la table
tblPays.
HEPL 2009-2010
12
Figure 28
La fonction extract à la ligne 78 extrait les données du tableau associatif et crée les variables de même
nom. Par exemple, soit le tableau ($row) formé des éléments nomRestaurant, nomPays, drapeau
comme ci-dessous.
nomRestaurant
The Fat Duck
nomPays
UK
drapeau
unitedkingdom
La fonction extract($row) crée les variables $nomRestaurant, $nomPays, $drapeau.
Figure 29
A la ligne 79, on crée la variable $url qui servira à créer l’attribut src de la balise <img. Le nom $src
aurait mieux convenu, sans doute. Aux lignes 80 et 81, on crée les variables $alt et $title pour les
attributs de même nom.
Les lignes 83 à 87 sont connues.
HEPL 2009-2010
13
A la ligne 90 on est revenu en html pour insérer les balises plus facilement. On se sert de fragments de code
php pour imprimer les données et les valeurs d’attributs aux lignes 91 à 97.
Figure 30
Il faut maintenant appeler ces deux fonctions. Le code html sera généré dans la page à l’endroit où elles sont
appelées. A la ligne 39 fig. 31, on appelle la fonction alphabet() et à la ligne 40, on appelle la fonction
listeRestaurants() en transmettant la variable $initiale.
Figure 31
Il reste maintenant à récupérer la valeur de la variable d’URL dans la variable $initiale. Sachant que les
variables d’URL sont conservées dans la variable superglobale $_GET, on extrait ces variables tout au début
de la page, à la ligne 3, fig. 32.
Figure 32
HEPL 2009-2010
14
Il faut maintenant bien comprendre le fonctionnement de ce genre de page. Lorsque la page est appelée
depuis le menu, ce menu ne transmet pas la variable d’URL initiale. Vérifiez ci-dessous, lorsque l’on survole le
bouton Liste 4 dans le menu
Figure 33. Comparer la figure 24.
Il faut donc vérifier si la variable $initiale est bien définie et lui affecter une valeur par défaut lorsqu’elle
ne l’est pas.
Figure 34
HEPL 2009-2010
15