PHP  | PHP par la pratique  | PHP : Site modulaire avec include  | Exercice : Mon premier site modulaire

Exercice : Mon premier site modulaire

    5tq

Exercice : Mon premier site modulaire

🎯 Objectif

Construire un site PHP de 3 pages (Accueil, Services, Contact) qui partagent toutes le même header, la même navigation et le même footer.

Ce que tu sauras faire après : structurer n'importe quel projet PHP de façon modulaire.

Structure à créer

php-pratique/
└── site-modulaire/
    ├── includes/
    │   ├── header.php
    │   ├── nav.php
    │   └── footer.php
    ├── index.php
    ├── services.php
    └── contact.php

Crée ce dossier dans ton www/ ou htdocs/ et crée chaque fichier à la main.

Étape 1 — Le header

includes/header.php

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Le titre change selon la page (défini avant l'include) -->
    <title><?= $pageTitle ?? "Mon Site" ?></title>

    <!-- Bootstrap 5 via CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">

Étape 2 — La navigation

includes/nav.php

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">

        <!-- Logo / nom du site -->
        <a class="navbar-brand fw-bold" href="index.php">🛠️ MonSite</a>

        <!-- Liens de navigation -->
        <div class="navbar-nav ms-auto">
            <a class="nav-link text-white" href="index.php">Accueil</a>
            <a class="nav-link text-white" href="services.php">Services</a>
            <a class="nav-link text-white" href="contact.php">Contact</a>
        </div>

    </div>
</nav>

includes/footer.php

<footer class="bg-primary text-white text-center py-4 mt-5">
    <p class="mb-0">
        &copy; <?= date('Y') ?> MonSite &mdash; Fait avec PHP 🐘
    </p>
</footer>

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

Étape 4 — La page d'accueil

index.php

<?php
// Le titre de cet onglet/page
$pageTitle = "Accueil";

// On charge le header (qui utilise $pageTitle)
require 'includes/header.php';
require 'includes/nav.php';
?>

<main class="container mt-5">

    <div class="jumbotron bg-white p-5 rounded shadow-sm">
        <h1 class="display-5">Bienvenue 👋</h1>
        <p class="lead">Ceci est la page d'accueil de mon premier site modulaire en PHP.</p>
        <hr>
        <p>Le header et le footer sont dans des fichiers séparés.</p>
        <a href="services.php" class="btn btn-primary">Voir nos services →</a>
    </div>

</main>

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

Étape 5 — La page Services

services.php

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

// Les services sont dans un tableau PHP
$services = [
    ["nom" => "Développement web",    "icone" => "🌐", "desc" => "Sites PHP, WordPress, Laravel"],
    ["nom" => "Maintenance",           "icone" => "🔧", "desc" => "Mises à jour et corrections"],
    ["nom" => "Hébergement",           "icone" => "☁️",  "desc" => "Serveurs Linux managés"],
];
?>

<main class="container mt-5">
    <h1>Nos services</h1>

    <div class="row mt-4">
        <?php foreach ($services as $service) : ?>
            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body text-center">
                        <div class="display-4"><?= $service['icone'] ?></div>
                        <h5 class="card-title mt-2"><?= $service['nom'] ?></h5>
                        <p class="card-text text-muted"><?= $service['desc'] ?></p>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</main>

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

Observe : les données sont dans un tableau, pas dans le HTML.
Si tu veux modifier un service, tu modifies le tableau — pas le HTML.

Étape 6 — La page Contact

contact.php

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

<main class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">

            <h1>Nous contacter</h1>
            <p class="text-muted">Tu as une question ? Écris-nous.</p>

            <!-- Formulaire (on apprendra à le traiter plus tard) -->
            <form class="mt-4">
                <div class="mb-3">
                    <label class="form-label">Nom</label>
                    <input type="text" class="form-control" placeholder="Ton nom">
                </div>
                <div class="mb-3">
                    <label class="form-label">Email</label>
                    <input type="email" class="form-control" placeholder="ton@email.be">
                </div>
                <div class="mb-3">
                    <label class="form-label">Message</label>
                    <textarea class="form-control" rows="4"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Envoyer</button>
            </form>

        </div>
    </div>
</main>

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

✅ Vérifie que ça marche

  1. Ouvre http://site-modulaire.test (Laragon) ou http://localhost/php-pratique/site-modulaire/
  2. Clique sur chaque lien de navigation
  3. Vérifie que le titre de l'onglet change à chaque page
  4. Ouvre includes/nav.php, change une couleur Bootstrap → vérifie que toutes les pages sont mises à jour

🏆 Challenge

  • Change la couleur de la navbar de bg-primary à bg-dark dans nav.php
  • Ajoute une 4ème page "À propos" (apropos.php) en ajoutant UN lien dans nav.php
  • Combien de fichiers as-tu modifié pour ajouter cette page ?
Télécharger en PDF

Pour aller plus loin