Modèles de Pages Dynamiques

Introduction

Imaginons un site web composé de 20 pages. Chacune de ces pages possède le même en-tête avec un menu de navigation, et le même pied de page avec les informations de contact. Un jour, le client vous demande d'ajouter un lien vers une nouvelle page dans le menu. Avec des fichiers HTML statiques, vous devez ouvrir et modifier les 20 fichiers un par un. Si vous oubliez un fichier ou faites une faute de frappe dans l'un d'eux, vous vous retrouvez avec un site incohérent.

Ce problème illustre un principe fondamental en développement : le principe DRY (Don't Repeat Yourself). Chaque morceau de code qui se répète à l'identique dans plusieurs fichiers est une source potentielle d'erreurs et de perte de temps. La solution consiste à isoler les éléments communs dans des fichiers séparés et à les inclure là où on en a besoin. C'est exactement ce que permettent les modèles de pages dynamiques.

Création d'un Modèle de Page Dynamique

Arborescence du projet

Avant de commencer à coder, prenons l'habitude de visualiser la structure de notre projet. Voici l'arborescence que nous allons construire


                    /mon-site
                    ├── index.php
                    ├── contact.php
                    ├── config/
                    │   └── config.php
                    ├── templates/
                    │   ├── header.php
                    │   └── footer.php
                    └── assets/
                        └── css/
                            └── style.css

À la racine du projet se trouvent les fichiers que l'utilisateur peut visiter directement via son navigateur (index.php, contact.php, etc). Le dossier config/ contient les fichiers de configuration du site (constantes, paramètres partagés). Le dossier templates/ contient les fragments HTML réutilisables (en-tête, pied de page). Cette séparation reflète la différence de rôle entre ces fichiers : la configuration définit des valeurs, les templates émettent du HTML. Le dossier assets/ regroupe les ressources statiques (CSS, images, etc.).

Le fichier de configuration (config.php)

Avant de créer le modèle de page, commençons par un fichier de configuration qui centralisera les paramètres partagés par toutes les pages du site. Pour l'instant, nous n'y définirons qu'une seule constante, mais ce fichier pourra accueillir d'autres paramètres au fil du développement du projet.


                    <?php
                    define('BASE_URL', '/mon-site');

La constante BASE_URL représente le chemin de base de votre site sur le serveur. Selon votre environnement de travail, votre site peut être accessible à la racine du serveur (http://localhost/) ou dans un sous-dossier (http://localhost/mon-site/). Sans cette constante, tous vos liens et chemins vers les ressources (CSS, images, etc.) seraient écrits "en dur" et cesseraient de fonctionner si vous déplacez le projet dans un autre dossier ou si vous le mettez en ligne sur un serveur dont la structure est différente.

En centralisant ce chemin dans une constante, vous n'avez qu'un seul endroit à modifier en cas de changement d'environnement. Si votre site est directement accessible à la racine du serveur, il suffit de définir BASE_URL comme une chaîne vide ('').

Création de l'en-tête (header.php)

Le fichier header.php contient le début du document HTML, commun à toutes les pages : la déclaration DOCTYPE, l'ouverture des balises <html>, <head> et <body>, ainsi que l'en-tête visuel du site (navigation, logo, etc.).


                    <?php require_once __DIR__ . '/../config/config.php'; ?>
                    <!DOCTYPE html>
                    <html lang="fr">
                    <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Mon Site Web</title>
                        <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/style.css">
                    </head>
                    <body>
                        <header>
                            <nav>
                                <ul>
                                    <li><a href="<?= BASE_URL ?>/">Accueil</a></li>
                                    <li><a href="<?= BASE_URL ?>/contact.php">Contact</a></li>
                                </ul>
                            </nav>
                        </header>
                        <main>

Notez que ce fichier commence par inclure config.php avec require_once. C'est le choix approprié ici car config.php définit une constante : l'inclure deux fois provoquerait une erreur "Cannot redeclare...". Le _once protège contre ce risque. Nous reviendrons sur la distinction entre require et require_once juste après.

Notez également que ce fichier ouvre des balises (<body>, <main>) sans les fermer. C'est normal : elles seront fermées dans footer.php. Les deux fichiers forment ensemble un document HTML complet.

Création du pied de page (footer.php)

Le fichier footer.php vient compléter le document en fermant les balises ouvertes par header.php


                        </main>
                        <footer>
                            <p>&copy; Mon Site Web</p>
                        </footer>
                    </body>
                    </html>

Assembler le tout : la page d'accueil (index.php)

Le fichier index.php a un rôle particulier : la plupart des serveurs web sont configurés pour le charger automatiquement lorsqu'un visiteur accède à un répertoire sans préciser de fichier dans l'URL. C'est donc notre page d'accueil.

Pour construire cette page, il suffit d'inclure l'en-tête, d'écrire le contenu spécifique à la page, puis d'inclure le pied de page


                    <?php require __DIR__ . '/templates/header.php'; ?>
                    <h2>Bienvenue sur notre site !</h2>
                    <p>Ceci est le contenu de la page d'accueil.</p>
                    <?php require __DIR__ . '/templates/footer.php'; ?>

Et voilà : le contenu de header.php, le contenu propre à la page, et le contenu de footer.php sont assemblés pour former une page HTML complète. Si demain vous devez modifier le menu, vous ne modifiez qu'un seul fichier : header.php. Toutes les pages du site seront automatiquement mises à jour.

Pourquoi require ?

Vous connaissez déjà les différences entre require, include, et leurs variantes _once. Nous venons d'utiliser deux instructions d'inclusion différentes, et ce n'est pas un hasard. Le choix dépend du rôle du fichier inclus :

require plutôt qu'include : si le fichier d'en-tête ou de pied de page est introuvable, la page ne peut pas s'afficher correctement. Il est préférable que PHP arrête l'exécution avec une erreur fatale plutôt que de générer une page incomplète qui pourrait tromper l'utilisateur.
require pour les templates (header, footer) : un fichier de template ne fait qu'émettre du HTML. Il n'y a aucun risque de conflit à l'inclure, et le _once pourrait même devenir un piège si vous souhaitiez un jour réutiliser un même fragment à plusieurs endroits. C'est d'ailleurs le choix fait par WordPress dans ses fonctions de chargement de templates.
require_once pour les fichiers de définition (config, fonctions, classes) : ces fichiers déclarent des constantes, des fonctions ou des classes. Les inclure deux fois provoquerait une erreur fatale. Le _once protège contre ce risque.

Quant à __DIR__, il représente le chemin absolu du répertoire contenant le fichier en cours d'exécution. En le combinant avec un chemin relatif (__DIR__ . '/templates/header.php'), on obtient un chemin fiable quelle que soit la manière dont le script est appelé.

Exercice : Comprendre l'importance de BASE_URL

Objectif : Comprendre pourquoi les chemins relatifs et les chemins absolus "en dur" posent problème, et comment BASE_URL résout ces problèmes.
Instructions :
1. Créez un projet nommé test-liens dans le répertoire www de Laragon, avec la structure suivante :
```
                                    /test-liens
                                    ├── index.php
                                    ├── contact.php
                                    └── articles/
                                        └── article-01.php
                                
```
  Chaque page contiendra un simple menu de navigation avec des liens vers les trois pages. Pour l'instant, utilisez des liens relatifs
```
                                    <nav>
                                        <ul>
                                            <li><a href="index.php">Accueil</a></li>
                                            <li><a href="contact.php">Contact</a></li>
                                            <li><a href="articles/article-01.php">Article 01</a></li>
                                        </ul>
                                    </nav>
                                
```
2. Testez : depuis la page d'accueil, naviguez vers article-01.php. Depuis cette page, essayez de revenir à la page Contact en cliquant sur le lien. Observez l'URL dans la barre d'adresse : que s'est-il passé ? Pourquoi le lien ne fonctionne-t-il pas ?
3. Le problème vient du fait que les liens relatifs sont résolus par rapport à l'emplacement de la page en cours. Depuis articles/article-01.php, le lien contact.php est interprété comme articles/contact.php, un fichier qui n'existe pas.
4. Pour résoudre ce problème, remplacez les liens relatifs par des liens absolus commençant par /
```
                                    <li><a href="/test-liens/contact.php">Contact</a></li>
                                    <li><a href="/test-liens/articles/article-01.php">Article 01</a></li>
                                
```
  Testez : la navigation fonctionne maintenant depuis toutes les pages, quel que soit le niveau de profondeur.
5. Maintenant, renommez le dossier de votre projet : dans l'explorateur de fichiers, allez dans le répertoire www de Laragon et renommez test-liens en test-liens-v2. Accédez à votre site via http://localhost/test-liens-v2/ et essayez de naviguer. Que constatez-vous ?
6. Tous les liens sont cassés car le nom du dossier (/test-liens/) est écrit en dur dans chaque lien. Si vous avez 20 pages, vous devez modifier chaque occurrence manuellement. C'est exactement le problème que BASE_URL résout.
7. Créez un fichier config.php à la racine du projet contenant define('BASE_URL', '/test-liens-v2');. Incluez ce fichier en haut de chaque page et remplacez tous les chemins en dur par BASE_URL
```
                                    <li><a href="<?= BASE_URL ?>/contact.php">Contact</a></li>
                                
```
8. Testez : la navigation fonctionne. Renommez à nouveau le dossier (par exemple en test-liens-final), modifiez uniquement la valeur de BASE_URL dans config.php, et vérifiez que tout fonctionne encore sans toucher aux autres fichiers.

Exercice : Projet Progressif 01

Cet exercice consiste à construire un site web modulaire complet en appliquant les notions vues dans ce chapitre. Le site sera composé de deux pages (accueil et contact) partageant un en-tête et un pied de page communs, une configuration centralisée et une feuille de style.

Attendu

À la fin de cet exercice, vous devez obtenir un site fonctionnel dont la navigation et les ressources utilisent BASE_URL. Le titre et la description de chaque page doivent être personnalisés dynamiquement. La mise en forme doit être assurée par une feuille de style CSS partagée.

Structure

Organiser les fichiers en respectant l'arborescence suivante


                    /projet-progressif-01
                    ├── index.php
                    ├── contact.php
                    ├── config/
                    │   └── config.php
                    ├── templates/
                    │   ├── header.php
                    │   └── footer.php
                    └── assets/
                        └── css/
                            └── style.css

Instructions

Étape 01

Mettre en place la configuration du projet.

Créer l'arborescence complète du projet. À ce stade, les fichiers peuvent être vides.
Dans config/config.php, définir la constante BASE_URL correspondant au chemin de base de votre projet sur le serveur.
- Si votre projet est accessible via http://localhost/projet-progressif-01/, la valeur sera '/projet-progressif-01'.

Étape 02

Construire le modèle de page réutilisable.

Dans templates/header.php, inclure le fichier de configuration avec require_once, puis écrire le début du document HTML commun à toutes les pages.
- La déclaration DOCTYPE, l'ouverture des balises <html>, <head> et <body>.
- Dans le <head>, importer la feuille de style en utilisant BASE_URL pour construire le chemin vers assets/css/style.css.
- Un menu de navigation avec des liens vers les pages Accueil et Contact. Utiliser BASE_URL dans chaque attribut href
```
                                    <nav>
                                        <ul>
                                            <li><a href="...">Accueil</a></li>
                                            <li><a href="...">Contact</a></li>
                                        </ul>
                                    </nav>
                                
```
- L'ouverture de la balise <main>.
Dans templates/footer.php, fermer les balises ouvertes par header.php (<main>, <body>, <html>) et ajouter un pied de page avec un copyright.

Étape 03

Rendre le modèle de page dynamique en personnalisant le titre et la description de chaque page.

Dans templates/header.php, modifier la balise <title> pour qu'elle affiche la valeur d'une variable $pageTitre avec une valeur par défaut grâce à l'opérateur ??.
Ajouter une balise <meta name="description"> dont le contenu est personnalisé par une variable $metaDescription, également avec une valeur par défaut.

Étape 04

Créer les pages du site en utilisant le modèle.

Dans index.php, définir les variables $pageTitre et $metaDescription, puis inclure templates/header.php. Ajouter un titre <h2>Accueil</h2> et un paragraphe de contenu. Terminer par l'inclusion de templates/footer.php.
Dans contact.php, suivre le même principe avec un titre Contact. Ajouter un formulaire avec les champs suivants :
- nom : champ requis, minimum 2 caractères, maximum 255 caractères.
- prénom : champ facultatif, minimum 2 caractères, maximum 255 caractères.
- email : champ requis.
- message : champ requis, minimum 10 caractères, maximum 3000 caractères.
Utiliser les attributs HTML required, minlength et maxlength pour appliquer ces contraintes.

Étape 05

Ajouter la mise en forme.

Dans assets/css/style.css, personnaliser l'apparence du site selon vos préférences. Veillez à définir une classe CSS active avec un style distinctif (couleur de texte, soulignement, poids de la police, etc.). Cette classe sera utilisée dans le chapitre suivant pour mettre en évidence le lien actif dans le menu.

Vérifications

Ouvrir le site dans le navigateur. Naviguer entre les pages Accueil et Contact. Vérifier que la navigation fonctionne, que le titre de l'onglet change et que la feuille de style est bien appliquée sur toutes les pages.
Vérifier la portabilité du projet. Renommer le dossier du projet dans le répertoire www de Laragon. Modifier uniquement la valeur de BASE_URL dans config/config.php. Recharger le site et vérifier que tous les liens et ressources fonctionnent encore sans avoir touché aux autres fichiers.
Inspecter le code source dans le navigateur (clic droit → Afficher le code source). Vérifier que le HTML généré forme un document complet et valide, avec les balises correctement ouvertes et fermées.