Structuration d'un site avec include()

La fonction include() permet d'inclure une portion de code située dans un fichier externe à l'intérieur d'une page. Cette instruction permet d'éviter de réécrire les parties répétitives d'un site comme on doit le faire dans un site statique réalisé en HTML et CSS.

Fonctionnement

Le paramètre de la fonction include() indique le chemin de la portion de code à insérer :

<?php
include('page_ou_code.php');
?>

Exemple avec la construction d'un site simple

Ce petit site simple, constitué de 3 pages, va profiter des bienfaits de la fonction include(). Inutile de répéter les entêtes et pied de page, seul les sections varient.

Page index.php

Le code de démarrage index.php intégrera la bonne section selon les liens cliqués grâce à la variable $_GET['page']. Lors du premier chargement, c'est la section accueil qui sera intégrée faute d'existence de la variable $_GET['page'].

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Mon superbe site</title>
    </head>
    <body>
        <nav>
            <a href="?page=accueil">Accueil</a>
            <a href="?page=services">Services</a>
            <a href="?page=contact">Contact</a>
        </nav>
        <?php
        if(isset($_GET['page']))
            include($_GET['page'].'.html');
        else
            include('accueil.html');
        ?>
        <footer>
            <p>© La Boite 2017 - Tous droits réservés</p>
        </footer>
    </body>
</html>

Le lien :

<a href="?page=accueil">Accueil</a>

est équivalent à :

<a href="index.php?page=accueil">Accueil</a>

Ce lien recharge la page actuelle et donne naissance à la variable page affectée de la valeur accueil. On pourra alors récupérer la valeur de la variable page avec la méthode $_GET.

Pour charger la bonne page, le code concatène la variable $_GET['page'] avec l'extension .html

Section accueil.html

Les pages à inclure n'ont pas besoin des balises structurelles HTML car elles utiliseront celles de la page hôte index.php.

Nommez cette page accueil.html

<section>
    <h1>Mon superbe site</h1>
    <p>Bienvenue sur notre site génial.</p>
</section>

Section services.html

Nommez cette page services.html

<section>
    <h1>Nos services</h1>
    <p>Voici les services que nous proposons.</p>
</section>

Section contact.html

Nommez cette page contact.html

<section>
    <h1>Contact</h1>
    <p>Contactez-nous et envoyez-nous de l'argent.</p>
</section>

Articles connexes