Exercices — Composition de page dynamique

Avant de commencer

Ces exercices prolongent le chapitre Page dynamique.

Entrainement

Le site Nord & Tasse est une petite boutique montréalaise spécialisée dans le café et les accessoires pour la préparation du café à la maison.

Pour commencer

Pour ces exercices, crée un dossier site-nord-tasse dans le dossier xampp/htdocs et n’oublie pas de démarrer (Start) XAMPP.

Exercice 1 : Optimiser la structure

Le site contient actuellement trois pages :

• une page d’accueil ;
• une page qui présente les produits ;
• une page de contact.

Repère ce qui est identique ou commun aux trois pages et qui pourrait être extrait dans des fragments réutilisables. Identifie également ce qui est propre à chaque page.

Crée ensuite les fragments nécessaires et intègre-les dans chacune des pages avec include ou require.

---

Page accueil.php

<!doctype html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <title>Accueil — Nord & Tasse</title>
</head>

<body>

  <header>
    <p><strong>Nord & Tasse</strong></p>

    <nav>
      <a href="accueil.php">Accueil</a> ·
      <a href="produits.php">Produits</a> ·
      <a href="contact.php">Contact</a>
    </nav>
  </header>

  <main>
    <h1>Le café simplement</h1>

    <p>
      Nord & Tasse sélectionne des cafés et des accessoires
      pour préparer un bon café à la maison.
    </p>

    <section>
      <h2>Notre sélection</h2>

      <p>
        Découvrez chaque mois des cafés provenant de torréfacteurs
        québécois ainsi que nos accessoires préférés.
      </p>

      <a href="produits.php">Découvrir nos produits</a>
    </section>
  </main>

  <footer>
    <p>© 2026 Nord & Tasse — Montréal</p>
  </footer>

</body>
</html>

---

Page produits.php

<!doctype html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <title>Produits — Nord & Tasse</title>
</head>

<body>

  <header>
    <p><strong>Nord & Tasse</strong></p>

    <nav>
      <a href="accueil.php">Accueil</a> ·
      <a href="produits.php">Produits</a> ·
      <a href="contact.php">Contact</a>
    </nav>
  </header>

  <main>
    <h1>Nos produits</h1>

    <p>
      Découvrez notre sélection de cafés et d'accessoires
      pour préparer votre café à la maison.
    </p>

    <section>
      <h2>Café Boréal</h2>

      <p>
        Un café à torréfaction moyenne aux notes de chocolat,
        de noisette et de caramel.
      </p>

      <p><strong>18,95 $</strong> — 340 g</p>
    </section>

    <section>
      <h2>Café Matin clair</h2>

      <p>
        Un café léger et fruité, aux notes d'agrumes et de miel.
      </p>

      <p><strong>17,50 $</strong> — 340 g</p>
    </section>

    <section>
      <h2>Presse française</h2>

      <p>
        Une cafetière simple permettant de préparer un café
        riche et corsé en quelques minutes.
      </p>

      <p><strong>29,95 $</strong></p>
    </section>

    <section>
      <h2>Moulin manuel</h2>

      <p>
        Un moulin compact avec réglage de la mouture,
        adapté au café filtre et à la presse française.
      </p>

      <p><strong>34,95 $</strong></p>
    </section>
  </main>

  <footer>
    <p>© 2026 Nord & Tasse — Montréal</p>
  </footer>

</body>
</html>

---

Page contact.php

<!doctype html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <title>Contact — Nord & Tasse</title>
</head>

<body>

  <header>
    <p><strong>Nord & Tasse</strong></p>

    <nav>
      <a href="accueil.php">Accueil</a> ·
      <a href="produits.php">Produits</a> ·
      <a href="contact.php">Contact</a>
    </nav>
  </header>

  <main>
    <h1>Nous joindre</h1>

    <p>
      Une question sur un produit ou sur la préparation du café ?
      Notre équipe pourra vous conseiller.
    </p>

    <section>
      <h2>Coordonnées</h2>

      <p>Téléphone : 514 555-0182</p>
      <p>Courriel : bonjour@nordettasse.example</p>
      <p>Adresse : 1250, rue du Marché, Montréal</p>
    </section>

    <section>
      <h2>Heures d'ouverture</h2>

      <p>Lundi au vendredi : 8 h à 18 h</p>
      <p>Samedi et dimanche : 9 h à 17 h</p>
    </section>
  </main>

  <footer>
    <p>© 2026 Nord & Tasse — Montréal</p>
  </footer>

</body>
</html>

VérificationIndice 1

Compare les trois pages côte à côte.

Certaines parties sont répétées exactement dans les trois fichiers. Par exemple, la navigation et le pied de page sont identiques.

Plutôt que de les copier dans chaque page, elles pourraient être placées dans des fichiers séparés et incluses avec include.

VérificationIndice 2

Le début du document est presque identique dans les trois pages, mais le contenu de <title> change :

<title>Accueil — Nord & Tasse</title>

<title>Produits — Nord & Tasse</title>

<title>Contact — Nord & Tasse</title>

Il n’est pas nécessaire de créer trois fragments différents.

Un fichier inclus a accès aux variables définies avant son include.

Il est donc possible de définir une variable $titre dans chaque page avant d’inclure le fragment commun.

Par exemple :

<?php
$titre = 'Accueil';
?>

VérificationIndice 3

Une organisation possible du projet pourrait commencer ainsi :

/
├── accueil.php
├── produits.php
├── contact.php
└── fragments/
    ├── ...
    ├── ...
    └── ...

Demande-toi quelles parties appartiennent à la structure générale du site et lesquelles représentent réellement le contenu propre à chaque page.

Exercice 2 : Optimiser la navigation

Dans l’exercice précédent, la navigation a été déplacée dans un fragment commun.

Cependant, la liste des liens est encore directement écrite dans ce fragment. Plus le site grandit, plus cette façon de faire devient difficile à maintenir.

Modifie le site afin que sa navigation soit construite à partir d’un fichier de configuration décrivant les pages disponibles.

La configuration doit permettre de définir au minimum :

• l’identifiant d’une page ;
• son titre ;
• son URL.

La navigation doit ensuite être générée à partir de cette configuration plutôt que d’une liste de liens écrite manuellement.

Pour aider le visiteur à se repérer dans le site, le lien correspondant à la page courante doit également se distinguer visuellement des autres.

Ajoute aussi l’attribut HTML approprié pour indiquer sémantiquement qu’un lien représente la page actuellement affichée.

VérificationIndice 1

Une structure de données peut représenter les différentes pages du site.

Pour chaque page, il faut conserver les informations nécessaires pour produire un lien de navigation.

VérificationIndice 2

Pour distinguer la page courante, le fragment doit savoir quelle page est actuellement affichée.

Une possibilité consiste à définir une variable propre à chaque page avant d’inclure les fragments communs.

VérificationIndice 3

Lorsque la page générée correspond à la page courante, ajoute :

• une classe CSS permettant de la distinguer visuellement ;
• l’attribut aria-current="page".

Par exemple, le HTML final pourrait contenir :

<a href="produits.php" class="active" aria-current="page">
  Produits
</a>

Exercice 3 : Optimiser les données des produits

La page produits.php contient actuellement à la fois :

• les données des produits ;
• le HTML utilisé pour les présenter.

Cette organisation fonctionne avec quelques produits, mais elle devient rapidement difficile à maintenir lorsque le catalogue grandit.

Modifie la page afin de séparer les données de leur affichage.

Les informations sur les produits doivent être déplacées dans un fichier distinct. La page produits.php doit ensuite utiliser ces données pour générer la liste des produits.

La présentation HTML d’un produit doit également être extraite dans un template réutilisable.

Résultat attendu

Une fois le travail terminé :

• les informations sur les produits ne sont plus directement écrites dans produits.php ;
• les produits sont définis dans un fichier distinct ;
• produits.php parcourt les données disponibles pour afficher le catalogue ;
• la structure HTML utilisée pour présenter un produit n’est définie qu’une seule fois ;
• tous les produits utilisent le même template de présentation ;
• l’ajout d’un produit ne nécessite pas de recopier un bloc HTML complet.

VérificationIndice 1

Les produits ont tous une structure semblable : un nom, une description, un prix et parfois un format.

Une collection de tableaux associatifs permet de représenter ce type de données en PHP.

VérificationIndice 2

Le template d’un produit pourrait recevoir, par l’intermédiaire d’une variable, les informations du produit actuellement traité.

Il devrait être responsable uniquement de sa présentation, par exemple :

<section>
  <h2>...</h2>
  <p>...</p>
  <p>...</p>
</section>

Les valeurs affichées doivent toutefois provenir des données du produit et non être écrites directement dans le template.

VérificationIndice 3

La structure du projet pourrait maintenant contenir des fichiers dédiés aux données et aux templates :

/
├── accueil.php
├── produits.php
├── contact.php
├── config.php
├── donnees/
│   └── ...
└── fragments/
    ├── entete.php
    ├── navigation.php
    ├── ...
    └── pied.php

Synthèse – Site personnel

Tu dois maintenant créer un petit site personnel de type portfolio permettant de te présenter, de montrer quelques réalisations et de résumer ton parcours.

Pages obligatoires

Ton site doit contenir au moins trois pages.

Accueil

La page d’accueil présente rapidement la personne et permet au visiteur de comprendre qui elle est et ce qu’elle recherche.

Elle doit notamment présenter :

• une courte présentation ;
• quelques intérêts ;
• les principales compétences ;
• les disponibilités ou le type d’opportunités recherchées ;
• une façon de prendre contact.

Tu peux organiser cette information comme tu le souhaites.

Réalisations

La page realisations.php constitue le portfolio.

Elle présente plusieurs projets ou réalisations de façon suffisamment détaillée pour permettre au visiteur de comprendre le travail effectué.

Chaque réalisation devrait contenir plusieurs informations pertinentes, par exemple :

• le titre du projet ;
• une description ;
• les technologies utilisées ;
• le contexte du projet ;
• le rôle ou les responsabilités ;
• un lien vers le projet ou son dépôt, lorsque pertinent.

Les réalisations doivent être présentées de manière cohérente et utiliser une structure visuelle commune.

À propos

La page a-propos.php présente plus en détail le parcours de la personne.

Elle doit notamment contenir :

• la formation ;
• les expériences professionnelles ou scolaires ;
• d’autres informations pertinentes au profil présenté.

Tu peux y ajouter d’autres sections selon le contexte choisi : certifications, langues, activités, implication, intérêts professionnels, etc.

Contenu minimal

Le portfolio doit contenir au minimum :

• 3 pages ;
• 3 réalisations distinctes ;
• plusieurs compétences ;
• au moins une formation ;
• au moins une expérience ;
• des informations permettant de contacter la personne.

Tu peux ajouter d’autres pages ou sections si elles apportent quelque chose au portfolio.

Structure

L’organisation des fichiers est laissée à ton jugement.

Elle doit toutefois montrer clairement la séparation entre :

• les pages du site ;
• les éléments réutilisables ;
• la configuration ;
• les données utilisées pour générer certains contenus.

Choisis des noms de fichiers et de dossiers qui permettent de comprendre facilement leur rôle.

Présentation

Ajoute une ou plusieurs feuille de style CSS afin de donner au portfolio une présentation simple mais soignée. Le site doit notamment être lisible, facile à parcourir et utilisable sur différentes tailles d’écran.

L’objectif n’est pas de produire une interface complexe, mais de présenter correctement le contenu et de montrer une bonne organisation du site.

---

VérificationRéflexion

Observe l’organisation de ton projet.

Si tu devais ajouter demain :

• une quatrième page ;
• une sixième réalisation ;
• une nouvelle information dans toutes les cartes de projet ;

combien de fichiers devrais-tu modifier ?

Une bonne organisation devrait limiter le nombre de changements nécessaires.

VérificationPour aller plus loin

Une fois les exigences minimales terminées, tu peux enrichir ton portfolio avec, par exemple :

• des images pour les réalisations ;
• des liens vers GitHub ou une démonstration ;
• une page dédiée à une réalisation ;
• des catégories de projets ;
• des liens vers des profils professionnels ;
• une section de technologies ou d’outils maîtrisés.