PHP : Site modulaire avec include

    5tq

PHP : Site modulaire avec include

Le problème

Imagine un site de 8 pages. Chaque page a le même header et le même footer.
Tu changes le logo → tu ouvres 8 fichiers. Tu oublies une page → bug en prod. 😤

Solution : découper le site en morceaux réutilisables.


include et require

<?php include 'fichier.php'; ?>
<?php require 'fichier.php'; ?>

Les deux insèrent le contenu d'un autre fichier à cet endroit.

Quelle différence ?

include require
Fichier manquant Warning, le script continue Fatal error, le script s'arrête
À utiliser pour Blocs optionnels Blocs essentiels (header, footer)

Règle : pour header et footer, utilise toujours require.
Si le header manque, la page est cassée — autant arrêter tout de suite.


Structure de projet recommandée

php-pratique/
├── includes/
│   ├── header.php      ← ouverture HTML + <head> + Bootstrap
│   ├── nav.php         ← barre de navigation
│   └── footer.php      ← fermeture HTML + scripts
├── index.php
├── contact.php
└── produits.php

Le dossier includes/ regroupe tous les blocs partagés.
Les pages sont à la racine du projet.


Créer les blocs partagés

includes/header.php

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= $pageTitle ?? "Mon site" ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<?= $pageTitle ?? "Mon site" ?> :

  • <?= ... ?> est un raccourci pour <?php echo ... ?>
  • ?? signifie : si $pageTitle n'existe pas, utilise "Mon site"

includes/nav.php

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="index.php">MonSite</a>
        <div class="navbar-nav">
            <a class="nav-link" href="index.php">Accueil</a>
            <a class="nav-link" href="produits.php">Produits</a>
            <a class="nav-link" href="contact.php">Contact</a>
        </div>
    </div>
</nav>

includes/footer.php

<footer class="bg-dark text-white text-center py-3 mt-5">
    <p class="mb-0">&copy; <?= date('Y') ?> Mon Site — Tous droits réservés</p>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

date('Y') affiche l'année courante automatiquement.


Créer une page qui utilise les blocs

index.php

<?php
// On définit le titre AVANT d'inclure le header
$pageTitle = "Accueil";
require 'includes/header.php';
require 'includes/nav.php';
?>

<main class="container mt-4">
    <h1>Bienvenue</h1>
    <p>Ceci est la page d'accueil.</p>
</main>

<?php require 'includes/footer.php'; ?>

contact.php

<?php
$pageTitle = "Contact";
require 'includes/header.php';
require 'includes/nav.php';
?>

<main class="container mt-4">
    <h1>Nous contacter</h1>
    <p>Email : contact@monsite.be</p>
</main>

<?php require 'includes/footer.php'; ?>

Résultat : les deux pages ont exactement le même header et footer.
Tu changes nav.phptoutes les pages sont mises à jour. ✅


Les chemins de fichiers

Le chemin est relatif au fichier qui fait l'include.

// Depuis index.php (à la racine)
require 'includes/header.php';    // ✅ cherche includes/ dans le même dossier

// Depuis un fichier dans un sous-dossier (ex: admin/dashboard.php)
require '../includes/header.php'; // ✅ .. remonte d'un niveau

💡 Astuce : utilise __DIR__ pour un chemin absolu, sans ambiguïté :

require __DIR__ . '/includes/header.php';

Ce qu'on a maintenant

  • Un seul header.php → modifier Bootstrap ? Une seule ligne à changer.
  • Un seul nav.php → ajouter un lien ? Une seule ligne à changer.
  • Chaque page a son propre $pageTitle.

C'est la base de tout site PHP professionnel.


👉 Prochaine étape

Exercice : construire son premier site modulaire →