TD3 - PHP : Intégrer des parties dynamiques dans une page web HTML
Cette semaine, les TDs des groupes G3 et G2 sont avancés à mardi matin, 4 février 2025, 9h30 resp. 11h00. La date de rendu du TD3 reste inchangée, mercredi 5 février à 23h59.
Objectifs
L’objectif de ce TD est d’intégrer des parties dynamiques dans une page web HTML, en utilisant le langage de script PHP (Hypertext Preprocessor). Il est possible d’alterner entre les parties HTML et PHP : Lorsqu’on produit des pages HTML avec du code PHP, ce qui est entre les balises PHP <?php et ?> est interprété par le préprocesseur PHP. Ce qui n’est pas entre les balises PHP <?php et ?> est produit tel quel en sortie. On peut donc basculer entre le code PHP et le HTML à volonté.
A respecter tout au long de ce TD :
- Les extensions des fichiers doivent être toujours .php
- Dans le navigateur, l’URL commence toujours par
http://et non pas parfile:// - Si vous travaillez sur vos propres ordinateurs avec un environnement de développement du serveur web local, comme par exemple MAMP, vérifiez que votre serveur Apache (donc MAMP) est bien démarré.
Code PHP dans une page web HTML5
Exercice 3.1 “Hello World” de page web dynamique (HTML5 avec PHP)
- Ouvrir votre éditeur de texte (p.ex. VSCode), et dans Open Folder, vous sélectionnez votre dossier
cswdqui est dans votre dossierespaces/www(ou bien sur vos propres ordinateurs surC:\mamp\htdocsou/Applications/MAMP/htdocsouc:\wampserver64\wwwou similaire, selon votre configuration).
Dans ce dossier cswd, créez un nouveau dossier td3.
Votre arborescence sera donc :
espaces/
└── www/
└── cswd/
└── td1/
└── ...
└── td2/
└── ...
└── td3/
Dans ce dossier td3, créez un fichier html-helloworld.php, et mettez le code source suivant :
Fichier PHP (html-helloworld.php):
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML/PHP helloworld</title>
</head>
<body>
<h2>Introduction</h2>
<p>Votre première page web dynamique.</p>
</body>
</html>- Ouvrir votre page en allant sur votre page web personnel, comme par exemple :
https://prenom-nom.emi.u-bordeaux.fr/cswd/td3/html-helloworld.php
(Vous pouvez connaître l’URL de vos pages perso en vous connectant sur https://services.emi.u-bordeaux.fr/intranet/mesinfos/).
Si vous travaillez sur votre propre ordinateur, c’est
http://localhost/cswd/td3/html-helloworld.php
ou alors, selon, la configuration
http://localhost:8888/cswd/td3/html-helloworld.php
Avec MAMP, vous pouvez aussi aller sur “Ouvrir la page Webstart”, puis en haut, “mon site web”, et ajoutez le chemin relatif au dossier. Dans les nouvelles versions de MAMP, pour faire apparaître ce lien dans la page Webstart, dans les réglages, il faut mettre /cswd dans “My favorite link”.
Faites afficher le code source de votre page dans votre navigateur et comparez-le au contenu de votre fichier
html-helloworld.phpdans votre éditeur de texte.Remplacez maintenant le texte “Votre première page web dynamique.” par l’instruction echo dans un contexte PHP (démarqué par les balises (entre le
<?phpet?>)). Notez donc qu’il est tout à fait possible d’avoir des instructions php dans une page web, tant qu’ils sont entouré par les balises<?phpet?>:
<?php
$prenom = "Lisa";
echo "<p>Bonjour ".$prenom."</p>";
?>Ouvrez de nouveau votre page dans le navigateur.
Faites de nouveau afficher le code source de votre page dans votre navigateur et comparer-le au contenu de votre fichier
html-helloworld.phpdans votre éditeur de texte.A la suite dans votre fichier
html-helloworld.php, ajoutez un nouveau titreh2avec le texte “Heure de la journée”, et ensuite ajoutez l’instruction suivante :
<?php
echo date("H:i:s");
?>Remarque : Au CREMI, le fuseau horaire par défaut n’est pas Europe/Paris, mais UTC (temps universel coordonné). Pour le changer, avant l’appel à la fonction date, vous pouvez changer le fuseau horaire comme suit :
<?php
date_default_timezone_set("Europe/Paris");
?>Exercice 3.2 PHP dynamique : SI : alternatives avec if
Dans cet exercice, nous allons dire “Bonjour” ou “Bonsoir” en fonction de l’heure de la journée.
A la suite dans votre fichier
html-helloworld.php, ajoutez un nouveau titreh2avec le texte “Alternatives avec if”.Dans un contexte PHP, donc entre de nouvelles balises PHP
<?phpet?>, affectez une nouvelle variableheure:
<?php
$heure = 12;
?>Dans le contexte PHP, ajoutez une alternative SI avec l’instruction
if, qui exécute l’instructionecho "<p>Bonjour ".$prenom."</p>";si l’heure est inférieur à une certaine valeur, p.ex.18, et sinon, exécutez l’instructionecho "<p>Bonsoir ".$prenom."</p>";Testez : affectez donc la variable
heureà plusieurs valeurs différentes.Affectez la variable
heureà l’heure de la journée, en utilisant de nouveau la fonctiondate:
<?php
$heure = date("H");
?>- Testez.
Exercice 3.3 PHP dynamique : Boucles
A la suite dans votre fichier
html-helloworld.php, ajoutez un nouveau titreh2avec le texte “Boucles (sans changement de contexte)”.Ensuite, ajoutez une nouvelle balise PHP avec les instructions suivantes :
<?php
$n=5;
$i=1;
while ($i <= $n)
{
echo "<p>Bonjour</p>";
$i = $i + 1;
}
?>Ouvrez de nouveau votre page avec le navigateur.
Faites afficher le code source, et comparez-le au contenu de votre fichier html-helloworld.php dans votre éditeur de texte. Vous pouvez ajouter des affichages de
PHP_EOLpour améliorer la lisibilité de votre code source généré !Comme vous l’avez vu, le nombre d’itérations de la boucle est fixé à 5. Changez votre code pour afficher autant de fois “bonjour” que vous spécifiez à l’URL avec le paramètre
n. Donc, par exemple, si vous consultez votre page via l’URLhttps://..../.../td3/html-helloworld.php?n=3, vous récupérez ce paramètrenavec la méthode GET, comme dans le TD précédent.Si le paramètre
nn’est pas spécifié dans l’URL, mettez une valeur par défaut de 10 itérations.
Exercice 3.4 Alterner entre les contextes PHP et HTML_
A la suite dans votre fichier, ajoutez un nouveau titre
h2avec le texte “Boucles (avec changement de contexte)”.Ensuite, ajoutez le code suivant :
<?php
$n=5;
$i=1;
while ($i <= $n)
{
?>
<p>Bonjour</p>
<?php
$i = $i +1;
}
?>Voyez-vous une différence avec le résultat de l’exercice 3.2 ? Faites aussi afficher le code source de votre page dans votre navigateur et comparez.
Validez vos pages avec le validateur W3C à l’adresse suivante
http://validator.w3.org/(ou bienhttps://html5.validator.nu/si l’autre site n’est pas accessible car nous l’utilisons tous depuis un même origine…). Parmi les 3 options proposées pour vérifier votre page, vous pouvez spécifier l’URL, ou alors “direct input”. Réfléchissez pourquoi vous ne pouvez pas prendre l’option de téléverser un fichier !
“Multiplication pour les profanes”
Exercice 3.5 Création dynamique de code HTML5
Dans cet exercice, nous allons petit à petit reproduire le scénario esquissé dans les figures ci-dessus. Lorsque vous cliquez sur un des liens hypertextes de la page choix.php, cela renvoie vers la page multiplication.php et affichera la table de multiplication demandée et spécifiée en paramètre.
Créer une page HTML5 que vous appelez
choix.php(donc avec les balises DOCTYPE, html, head, body, …). Vous pouvez copier-coller le code depuis votre cheatsheet HTML5 dispobible sur la page web du cours (ou alors, utilisez un raccourci dans VSCode : dans votre fichierchoix.php, qui est vide pour l’instant, appuyez sur la touche ‘!’ est ensuite appuyez sur la touche “entrée”…).Achez la liste non-triée suivante (utilisez
<ul>,<li>). Pour l’instant, pour commencer avec un exercice simple, faites du HTML5 statique - n’utilisez pas une boucle et ne créez pas encore de lien hypertexte !
Modifier votre page
choix.phppour qu’elle utilise une boucle de typewhiledans un ou plusieurs contextes PHP. Remarque : Bien sûr, les balises<li>et</li>doivent être à l’intérieur de la boucle pour qu’elles soient produites plusieurs fois. Les balises<ul>et</ul>doivent être avant et après la boucle, respectivement, car ces balises ne sont nécessaires qu’une seule fois.Testez.
Modifiez l’intérieur de votre balise
<li>pour afficher un lien hypertexte comme suit :
<a href="multiplication.php?facteur=1">Table de m...</a>Testez. Bien sûr, lorsque vous cliquez sur un des liens, cela affiche un message d’erreur 404 parce que la page
multiplication.phpn’existe pas encore.Comme vous l’avez remarqué, pour chacun des liens, le paramètre
facteurque vous spécifiez est toujoursfacteur=1. Modifiez le lien pour afficher la bonne valeur pour le paramètrefacteur.Créez la page HTML5
multiplication.phpqui récupère le paramètrefacteur, et qui affiche le grand titre<h1>“Table de multiplication de” en y mettant le facteur (Notez que our l’instant, il n’est pas demandé d’afficher la table de multiplication. Ceci sera l’objet d’un autre exercice).Valider vos pages
choix.phpetmultiplication.phpavec le validateur W3C à l’adresse suivante http://validator.w3.org/. Parmi les 3 options proposées pour vérifier votre page, vous pouvez spécifier l’URL, ou alors “direct input”.
Exercices optionnels
Exercice 3.7 Table de multiplication (suite)
Complétez la page multiplication.php afin qu’elle affiche aussi la table de multiplication demandée, en sus du titre <h1>. Vous construirez donc une boucle en PHP…
Exercice 3.8 Jeu de cartes en PHP
Téléchargez les images d’un jeu de cartes de 54 cartes (+le dos des cartes) à l’adresse suivante : https://www.labri.fr/perso/preuter/cswd2025/cartes.zip
Décompressez le fichier dans votre dossier de travail td3.
Créer un fichier HTML5 s’appelant
cartes.php. Avec une boucle en PHP, ce fichier devra permettre d’afficher 5 images de dos de cartes, comme par exemple :
Modifiez le fichier
cartes.phppour afficher autant de cartes que spécifié dans l’URL.Transformez les images des dos de cartes en lien hypertextes, et permettez de faire retourner la carte sélectionné. Pour ce faire, le cible de chaque lien doit envoyer vers
cartes.phpavec un paramètre supplémentaire (en plus du nombre de cartes) avec le numéro de la carte sélectionné. Ensuite, pour chaque carte, il faudra tester s’il faut afficher le dos de carte ou une valeur de carte (tiré aléatoirement).
Vous pouvez maintenant bien sûr, affiner ce “jeu de cartes”, en s’assurant algorithmiquement que les cartes tirées aléatoirement soient tous différents, par exemple …
Comme d’habitude, les exercices sont à rendre sur moodle jusqu’à mercredi prochain, 23h59.