TD3 - PHP : Intégrer des parties dynamiques dans une page web HTML

Important

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é.

Important

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 par file://
  • 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)

  1. Ouvrir votre éditeur de texte (p.ex. VSCode), et dans Open Folder, vous sélectionnez votre dossier cswd qui est dans votre dossier espaces/www (ou bien sur vos propres ordinateurs sur C:\mamp\htdocs ou /Applications/MAMP/htdocs ou c:\wampserver64\www ou 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>
  1. 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/).

Note

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”.

  1. Faites afficher le code source de votre page dans votre navigateur et comparez-le au contenu de votre fichier html-helloworld.php dans votre éditeur de texte.

  2. 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 <?php et ?>)). 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 <?php et ?> :

<?php
$prenom = "Lisa";
echo "<p>Bonjour ".$prenom."</p>";
?>
  1. Ouvrez de nouveau votre page dans le navigateur.

  2. Faites de nouveau afficher le code source de votre page dans votre navigateur et comparer-le au contenu de votre fichier html-helloworld.php dans votre éditeur de texte.

  3. A la suite dans votre fichier html-helloworld.php, ajoutez un nouveau titre h2 avec 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.

  1. A la suite dans votre fichier html-helloworld.php, ajoutez un nouveau titre h2 avec le texte “Alternatives avec if”.

  2. Dans un contexte PHP, donc entre de nouvelles balises PHP <?php et ?>, affectez une nouvelle variable heure :

<?php
$heure = 12;
?>
  1. Dans le contexte PHP, ajoutez une alternative SI avec l’instruction if, qui exécute l’instruction echo "<p>Bonjour ".$prenom."</p>"; si l’heure est inférieur à une certaine valeur, p.ex. 18, et sinon, exécutez l’instruction echo "<p>Bonsoir ".$prenom."</p>";

  2. Testez : affectez donc la variable heure à plusieurs valeurs différentes.

  3. Affectez la variable heure à l’heure de la journée, en utilisant de nouveau la fonction date :

<?php
$heure = date("H");
?>
  1. Testez.

Exercice 3.3 PHP dynamique : Boucles

  1. A la suite dans votre fichier html-helloworld.php, ajoutez un nouveau titre h2 avec le texte “Boucles (sans changement de contexte)”.

  2. 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;
}
?>
  1. Ouvrez de nouveau votre page avec le navigateur.

  2. 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_EOL pour améliorer la lisibilité de votre code source généré !

  3. 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’URL https://..../.../td3/html-helloworld.php?n=3, vous récupérez ce paramètre n avec la méthode GET, comme dans le TD précédent.

  4. Si le paramètre n n’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_

  1. A la suite dans votre fichier, ajoutez un nouveau titre h2 avec le texte “Boucles (avec changement de contexte)”.

  2. Ensuite, ajoutez le code suivant :

<?php
$n=5;
$i=1;
while ($i <= $n)
{
?>
    <p>Bonjour</p>
    <?php
    $i = $i +1;
}
?>
  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.

  2. Validez vos pages avec le validateur W3C à l’adresse suivante http://validator.w3.org/ (ou bien https://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.

  1. 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 fichier choix.php, qui est vide pour l’instant, appuyez sur la touche ‘!’ est ensuite appuyez sur la touche “entrée”…).

  2. 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 !

  1. Modifier votre page choix.php pour qu’elle utilise une boucle de type while dans 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.

  2. Testez.

  3. 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>
  1. Testez. Bien sûr, lorsque vous cliquez sur un des liens, cela affiche un message d’erreur 404 parce que la page multiplication.php n’existe pas encore.

  2. Comme vous l’avez remarqué, pour chacun des liens, le paramètre facteur que vous spécifiez est toujours facteur=1. Modifiez le lien pour afficher la bonne valeur pour le paramètre facteur.

  3. Créez la page HTML5 multiplication.php qui récupère le paramètre facteur, 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).

  4. Valider vos pages choix.php et multiplication.php avec 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”.

Affichage d’une liste de membres d’un réseau social

Exercice 3.6 Structure de données tableaux associatifs en PHP

Dans cet exercice, nous travaillons avec une nouvelle structure de données : les tableaux associatifs (ou dictionnaires). Avec votre éditeur de texte, créez un nouveau fichier tableau_associatif.php.

Votre arborescence sera donc :

    espaces/
    └── www/
        └── cswd/
            └── td1/
                └── ...
            └── td2/
                └── ...
            └── td3/
                └── html-helloworld.php
                └── choix.php
                └── multi.php
                └── tableau_associatif.php
  1. Dans ce fichier tableau_associatif.php, mettez les balises pour avoir une page HTML5 (donc avec les balises DOCTYPE, html, head, body, …) comme dans les exercices précédents.

  2. En tout début de fichier (même avant `<!DOCTYPE html>’) tapez le code PHP suivant :

<?php
$membre['nom'] = "Lafarge";
$membre['prenom'] = "Patxi";
$membre['pseudo'] = "patxi";
?>
  1. Dans le corps de votre page, insérez un tableau HTML (<table>), et affichez les informations concernant le membre dans une ligne <tr> . Utilisez des en-têtes de tableau (<th>) qui affichent les en-têtes Nom, Prénom, et Pseudo, et utlisez des cellules classiques (<td>) pour les informations concernant le membre en utilisant le tableau associatif $membre.

  2. Maintenant, nous allons créer un tableau indexé sur un tableau associatif. Remplacez le code PHP du début de votre page avec le code suivant :

<?php
$membre = array();
$membre[0]['nom'] = "Lafarge";
$membre[0]['prenom'] = "Patxi";
$membre[0]['pseudo'] = "patxi";

$membre[1]['nom'] = "Errecaret";
$membre[1]['prenom'] = "Amaia";
$membre[1]['pseudo'] = "amaia";
// Bien sûr, vous pouvez modifiez les noms/prénoms/pseudos à votre goût
// vous pouvez définir d'autres membres.
?>
  1. Afficher maintenant tous les membres dans votre table, en utilisant une boucle en PHP, qui créé donc une ligne <tr> pour chaque membre !

  2. Pour chaque membre, créez ou téléchargez une image. Si vous téléchargez une image d’internet, p.ex. avec google images, veillez que vous avez le droit d’utiliser !!, en sélectionnait “outils” -> “droit d’usage” -> “Licence creative commons”. Retaillez l’image à 100 pixels de large et 100 pixels de haut avec un logiciel d’édition d’images. Nommez chacune de ces images en utilisant l’index du membre, donc membre-0.png, membre-1.png, etc., et enregistrez les dans un dossier images que vous créez en tant que sous-dossier de votre dossiez td3.

  3. Insérez une colonne à gauche du tableau s’appelant Avatar, et affichez la bonne image pour chaque membre en utilisant la balise <img>.

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

  1. 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

  2. Décompressez le fichier dans votre dossier de travail td3.

  3. 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 :

  1. Modifiez le fichier cartes.php pour afficher autant de cartes que spécifié dans l’URL.

  2. 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.php avec 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 …

Important

Comme d’habitude, les exercices sont à rendre sur moodle jusqu’à mercredi prochain, 23h59.