Template avec include( ) en PHP

Cet article propose une méthode pour la gestion du template d’un site web en utilisant exclusivement la fonction include de PHP.

Cette solution est loin d’être idéale, mais elle a l’avantage d’être simplissime.

Je profite de cet article pour définir cette notion de template.

Un gabarit, souvent nommé avec les anglicismes template ou layout, est un patron de mise en page où l’on place images et textes. Aussi, il est souvent utilisé de manière répétitive pour créer des documents présentant une même structure. On parle aussi de patron comme en couture ou bien, parfois, de grille.

Source : Article Gabarit (mise en page) de Wikipédia en français (auteurs).
Contenu soumis à la licence CC-BY-SA

Identifier et distinguer le contenu et l’interface

L’idée présentée dans ce tutoriel est de découper l’interface graphique d’un site internet en morceau et de la reconstituer autour du contenu spécifique de chaque page. Il s’agit donc d’isoler les éléments d’interface communs à l’ensemble des pages du site.

Voici ci-dessous une page de base contenant l’interface graphique (éléments communs à toutes les pages) et du contenu (contenu spécifique à la page).

<!DOCTYPE html>
<html>
    <head>
        <title>Gestion template : ob_start()</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
    </head>
    <body>
        <header>
            <p class="site-title">Titre du site</p>
            <p class="site-slogan">Slogan du site Internet</p>
        </header>
        <article>
            <h1>Titre de l'article</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id 
                placerat odio. Aliquam in eros id sem ultricies pharetra at eu 
                tortor. Etiam viverra, erat vel imperdiet sollicitudin, dui 
                justo ornare libero, id blandit velit neque id arcu. Donec 
                consequat nisi vestibulum ultricies malesuada. Ut vehicula 
                consequat enim, quis accumsan massa luctus vel. In hac habitasse 
                platea dictumst. Mauris accumsan nibh mi, et condimentum enim 
                facilisis sed. Sed cursus erat leo, nec adipiscing eros at. 
            </p>
        </article>
        <footer>
            Designed by me
        </footer>
    </body>
</html>

En observant ce fichier je peux donc isoler le contenu spécifique de la page, c’est à dire ce qui va changer entre les différentes pages du site :

<h1>Titre de l'article</h1>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id 
    placerat odio. Aliquam in eros id sem ultricies pharetra at eu 
    tortor. Etiam viverra, erat vel imperdiet sollicitudin, dui 
    justo ornare libero, id blandit velit neque id arcu. Donec 
    consequat nisi vestibulum ultricies malesuada. Ut vehicula 
    consequat enim, quis accumsan massa luctus vel. In hac habitasse 
    platea dictumst. Mauris accumsan nibh mi, et condimentum enim 
    facilisis sed. Sed cursus erat leo, nec adipiscing eros at. 
</p>

Si j’isole le contenu, il me reste donc les éléments d’interface qui seront communs à l’ensemble des pages du site :

<!DOCTYPE html>
<html>
    <head>
        <title>Gestion template : ob_start()</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
    </head>
    <body>
        <header>
            <p class="site-title">Titre du site</p>
            <p class="site-slogan">Slogan du site Internet</p>
        </header>
        <article>
            

        </article>
        <footer>
            Designed by me
        </footer>
    </body>
</html>

Fragmentation de la page

Nous allons maintenant isoler nos éléments d’interface dans deux fichiers distincts pour pouvoir les insérer à volonté. Pour pouvoir exploiter les fichiers que l’on crée, il faut bien veiller à les mettre au format PHP.

Nous créons donc deux fichiers que l’on peut appeler tmpl_top.php et tmpl_bottom.php. Le premier fichier contiendra la partie haute de l’interface et le second fichier la partie basse.

<!DOCTYPE html>
<html>
    <head>
        <title>Gestion template : ob_start()</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
    </head>
    <body>
        <header>
            <p class="site-title">Titre du site</p>
            <p class="site-slogan">Slogan du site Internet</p>
        </header>
        <article>
        </article>
        <footer>
            Designed by me
        </footer>
    </body>
</html>

Créer des pages

Maintenant il faut recréer la page originale. Cette méthode sera la même à utiliser dès que l’on souhaite créer une nouvelle page.

Nous créons un fichier que nous allons appeler page.php et dans lequel nous allons mettre le contenant spécifique de la page. Nous allons ensuite reconstruire l’intégralité de la page en faisant appel aux éléments de l’interface et en les rajoutant avec l’instruction de langage include.

<?php 
// Le haut de l'interface est ajouté avant le contenu
include 'tmpl_top.php'; ?>

<h1>Titre de l'article</h1>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id 
    placerat odio. Aliquam in eros id sem ultricies pharetra at eu 
    tortor. Etiam viverra, erat vel imperdiet sollicitudin, dui 
    justo ornare libero, id blandit velit neque id arcu. Donec 
    consequat nisi vestibulum ultricies malesuada. Ut vehicula 
    consequat enim, quis accumsan massa luctus vel. In hac habitasse 
    platea dictumst. Mauris accumsan nibh mi, et condimentum enim 
    facilisis sed. Sed cursus erat leo, nec adipiscing eros at. 
</p>

<?php 
// Le bas de l'interface est ajouté après le contenu
include 'tmpl_bottom.php'; ?>

Nous pouvons maintenant créer autant de page que l’on souhaite sur ce principe.

Il est également possible de regrouper les fichiers PHP de l’interface dans un dossier distinct. Il faudra alors veiller à adapter les liens vers les images et/ou les feuilles de style.


1 réaction sur “ Template avec include( ) en PHP ”

  1. Ping Template avec ob_start() en PHP (Avancé) – Web Formation