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.
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.
Sauf mention contraire*, l'article Template avec include( ) en PHP et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons
Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.