Découper la page avec des inclusions

L’en-tête et le pied de page du carnet apparaissent sur plusieurs pages. Si vous copiez leur HTML dans chaque fichier, une modification doit être répétée partout et risque de produire des versions différentes.

Vous allez déplacer les zones communes dans includes/entete.php et includes/pied.php, puis les charger depuis index.php. La page conserve son contenu et ses deux contacts de démonstration ; seul son assemblage change.

Créer les fichiers partagés

L’en-tête contient le début du document HTML, les métadonnées et la navigation du carnet. Il ouvre aussi le conteneur commun et l’élément principal : le contenu propre à la page sera inséré à cet endroit.

<?php
declare(strict_types=1);
?>
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Carnet de contacts</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="carnet-page">
    <header class="carnet-entete">
      <h1>Carnet de contacts</h1>
      <nav class="carnet-navigation" aria-label="Navigation principale">
        <a href="index.php">Contacts</a>
        <a href="contact-ajouter.php">Ajouter un contact</a>
        <a href="deconnexion.php">Se déconnecter</a>
      </nav>
    </header>
    <main class="carnet-principal">

Le pied de page termine les éléments ouverts dans l’en-tête et ferme le document. Les deux fichiers sont du PHP, même s’ils contiennent surtout du HTML : les balises PHP servent ici à respecter la déclaration stricte des types sans produire de sortie supplémentaire.

<?php
declare(strict_types=1);
?>
    </main>
    <footer class="carnet-pied">
      <p>Carnet de contacts privé</p>
    </footer>
  </div>
</body>
</html>

Assembler la page dans index.php

require charge le fichier indiqué et signale une erreur bloquante si celui-ci est introuvable. Avec __DIR__, le chemin part du dossier qui contient le fichier courant : l’inclusion ne dépend donc pas du dossier depuis lequel vous lancez le serveur.

<?php
declare(strict_types=1);

$contacts = [
    [
        'nom' => 'Ada Lovelace',
        'courriel' => '[email protected]',
        'telephone' => '01 23 45 67 89',
    ],
    [
        'nom' => 'Alan Turing',
        'courriel' => '[email protected]',
        'telephone' => '01 98 76 54 32',
    ],
];

$nombreContacts = count($contacts);

require __DIR__ . '/includes/entete.php';
?>
      <section aria-labelledby="titre-etat">
        <h2 id="titre-etat">État du carnet</h2>
        <p>Votre carnet contient <?= $nombreContacts ?> contacts.</p>
        <p>Version de PHP : <?= htmlspecialchars(PHP_VERSION, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></p>
      </section>
      <section aria-labelledby="titre-contacts">
        <h2 id="titre-contacts">Liste des contacts</h2>
        <?php if ($contacts === []): ?>
          <p>Aucun contact n’est enregistré.</p>
        <?php else: ?>
          <ul class="carnet-liste">
            <?php foreach ($contacts as $contact): ?>
              <li class="carnet-contact">
                <h3><?= htmlspecialchars($contact['nom'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></h3>
                <p><?= htmlspecialchars($contact['courriel'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></p>
                <p><?= htmlspecialchars($contact['telephone'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></p>
              </li>
            <?php endforeach; ?>
          </ul>
        <?php endif; ?>
      </section>
<?php
require __DIR__ . '/includes/pied.php';

La page affiche l’état du carnet, la version de PHP et deux contacts : Ada Lovelace et Alan Turing. L’en-tête, la navigation et le pied de page proviennent des fichiers inclus.

L’appel à l’en-tête se trouve après les données nécessaires à la page et avant son contenu HTML. Celui du pied de page vient après les sections : PHP émet les éléments dans l’ordre des instructions, ce qui reconstitue un document HTML complet.

Vérifier le résultat

Enregistrez les trois fichiers à leur emplacement prévu, puis rechargez index.php dans le navigateur. Vous devez retrouver le même contenu qu’avant le découpage, avec les contacts affichés une seule fois et la structure commune produite par les deux inclusions.

La boucle foreach, le compteur et l’échappement des valeurs restent ceux des leçons précédentes ; vous n’avez pas besoin de les réécrire pour comprendre les inclusions. Pour une autre page du carnet, vous réutiliserez ces mêmes fichiers communs et ne garderez dans son fichier que le contenu propre à cette page.

À retenir

• Placez le HTML commun de début de page dans includes/entete.php et celui de fin dans includes/pied.php.
• Chargez les fichiers nécessaires avec require.
• Construisez les chemins depuis le fichier courant avec __DIR__.
• Appelez les inclusions dans l’ordre où leurs éléments doivent apparaître dans la page.

Dans la prochaine leçon, vous placerez les traitements réutilisables du carnet dans des fonctions.