Exercice : Variables dans les includes

🎯 Objectif

Comprendre comment passer des informations à un fichier include pour qu'il s'adapte à chaque page.

Comment ça marche

Quand tu fais require 'includes/header.php', PHP insère littéralement le code du fichier à cet endroit.
Ça veut dire que le code qui précède l'include est disponible dans le fichier inclus.

<?php
$pageTitle = "Accueil";       // ← définie ICI, dans index.php
require 'includes/header.php'; // ← header.php peut utiliser $pageTitle
?>

Dans header.php, $pageTitle existe parce qu'elle a été définie avant l'include.

Enrichir le header

Ouvre includes/header.php et remplace le <title> par ceci :

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Titre de la page + nom du site -->
    <title><?= $pageTitle ?? "Page" ?> | MonSite</title>

    <!-- Description pour le SEO (optionnel) -->
    <?php if (isset($pageDescription)) : ?>
        <meta name="description" content="<?= htmlspecialchars($pageDescription) ?>">
    <?php endif; ?>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

htmlspecialchars() : convertit les caractères spéciaux (<, >, &, ") en HTML.
Toujours l'utiliser quand on affiche une variable dans du HTML. C'est une protection de base.

Utiliser ces variables dans les pages

index.php :

<?php
$pageTitle = "Accueil";
$pageDescription = "Bienvenue sur MonSite, spécialiste du développement web en Belgique.";
require 'includes/header.php';
require 'includes/nav.php';
?>

services.php :

<?php
$pageTitle = "Services";
$pageDescription = "Découvrez nos services : développement, maintenance, hébergement.";
require 'includes/header.php';
require 'includes/nav.php';
?>

contact.php :

<?php
$pageTitle = "Contact";
// Pas de $pageDescription définie → le header n'affichera pas la balise meta
require 'includes/header.php';
require 'includes/nav.php';
?>

Mettre en évidence le lien actif dans la nav

On peut aussi indiquer à la navbar quel lien est actif.

Dans chaque page, définis la variable $pageCourante :

// dans services.php
$pageCourante = "services";

Dans includes/nav.php :

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="index.php">MonSite</a>
        <div class="navbar-nav ms-auto">

            <!-- active si $pageCourante == "accueil" -->
            <a class="nav-link <?= ($pageCourante ?? '') == 'accueil' ? 'active fw-bold' : '' ?>"
               href="index.php">Accueil</a>

            <a class="nav-link <?= ($pageCourante ?? '') == 'services' ? 'active fw-bold' : '' ?>"
               href="services.php">Services</a>

            <a class="nav-link <?= ($pageCourante ?? '') == 'contact' ? 'active fw-bold' : '' ?>"
               href="contact.php">Contact</a>

        </div>
    </div>
</nav>

L'opérateur ternaire condition ? valeurSiVrai : valeurSiFaux est un if/else en une ligne.

✅ Vérifie

L'onglet du navigateur affiche bien "Services | MonSite" sur la page services
Le lien actif dans la navbar est différent selon la page courante

🏆 Challenge

Ajoute une variable $couleurNavbar (ex: "bg-primary", "bg-dark", "bg-danger") définie dans chaque page,
et utilise-la dans nav.php pour que chaque page ait sa propre couleur de navbar.

Télécharger en PDF

Exercice : Titre dynamique et variables dans les includes