Cet article propose une méthode pour la gestion du template d’un site web en utilisant un système d’enregistrement dans un tampon avec la fonction ob_start() en PHP tout en limitant le nombre de fichiers
Si vous avez consulté les tutoriels Template avec include( ) en PHP et Template avec ob_start() en PHP, vous avez du commencé à comprendre l’intérêt de la séparation entre la forme et le fond pour la création de vos pages. Mais vous avez peut-être remarqué que ces deux méthodes génèrent de nombreux fichiers. Nous allons donc voir une autre méthode plus complète permettant de limiter le nombre de fichiers.
Création de l’arborescence de notre site
Avant de commencer, nous allons préparer le terrain en créant l’arborescence que l’on souhaite utiliser pour ranger nos fichiers. Je vous propose donc l’organisation suivante :
- Dossier css : contiendra les feuilles de styles ;
- Dossier img : contiendra les images du site ;
- Dossier pages : contiendra un fichier php pour chaque page du site ;
- Dossier template : contiendra le.s élément.s d’interface ;
- Fichier index.php : sera la page d’accueil du site (ce fichier est vide pour le moment).
Identifier et distinguer le contenu et l’interface
Avant de commencer à coder en PHP, il faut déjà être capable d’identifier dans une page HTML :
- les éléments d’interface qui sont identiques à toutes les pages ;
- les éléments de contenu qui varient entre les pages.
Dans la page ci-dessous, que nous allons utiliser comme exemple, les éléments identifiés en surbrillance sont les éléments qui vont varier, tout le reste va donc être commun aux différentes pages.
<!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>
<h1>Titre du site</h1>
<p>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>Création d’une page de contenu
Nous allons maintenant préparer la première page de contenu de note site. Il va falloir isoler le contenu de la page dans un fichier distinct. Nous allons donc créer le fichier pages/accueil.php. C’est à dire le fichier accueil.php dans le dossier pages.
Dans ce fichier, nous allons maintenant coller le contenu spécifique à la page d’accueil en fonction du repérage que nous avons effectué au point précédent.
Nous avons donc le fichier suivant :
<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>Dans l’arborescence suivante :
Création du template
Le template ou le thème, correspond donc aux éléments communs de l’interface. Nous allons donc créer une nouvelle page template/template.php avec tout le code restant dans notre page d’exemple. A l’emplacement prévu pour le contenu, nous allons insérer le code PHP suivant demandant à écrire le contenu de la variable $contenu.
<?php echo $contenu ; ?>
Cette variable n’existe pas encore, mais nous allons la générer au point suivant…
Nous avons donc le fichier suivant :
<!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>
<h1>Titre du site</h1>
<p>Slogan du site Internet</p>
</header>
<article>
<?php echo $contenu ; ?>
</article>
<footer>
Designed by me
</footer>
</body>
</html>Dans l’arborescence suivante :
Déplacement du fichier .css
Nous avons choisit de modifier arborescence des fichiers, il faut donc placer le fichier styles.css dans son dossier de destination et modifier en conséquence le lien dans le fichier template/template.php.
Il faut donc modifier la ligne d’appel à la feuille de style comme ceci :
<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
Nous avons maintenant l’arborescence suivante :
Construction de la page d’accueil
Tout est prêt, nous pouvons maintenant passer à la reconstruction de notre page HTML d’exemple. Nous allons donc modifier le fichier index.php qui sera la page d’accueil de notre site.
Récupération du contenu
La méthode que nous allons voir consiste donc à stocker le code HTML correspondant au contenu dans une variable que nous avons appelé $contenu. Celle-ci étant déjà utilisée (avant même d’avoir été créée) dans le fichier template/template.php. Une fois que la variable a été créée, il suffit d’intégrer le fichier du template.
<?php // Demarrage de la tamporisation (rien de s'affichera) ob_start() ; // On integre le contenu de la page include 'pages/accueil.php' ; // On recupere dans une variable le contenu du tampon $contenu = ob_get_clean() ; // On intégre le template qui utilise la variable $contenu include 'template/template.php' ;
À ce stade, nous ne pouvons pas encore gérer plusieurs contenus…
Utilisation d’une option dans l’URL
Nous allons donc travailler avec des variables GET, c’est à dire des variables qui sont transmises via le champ adresse de notre page.
Pour le moment, nous ouvrons notre page en utilisant index.php. Pour ajouter des options, nous allons utiliser la syntaxe suivante où page est le nom de notre variable est accueil est le nom de la page à charger.
http://www.site.com/index.php?page=accueil
Nous allons donc modifier notre fichier index.php pour récupérer la valeur envoyée en GET et l’intégrer dans un switch() en PHP. Regardez le code ci-dessous pour bien comprendre chacune des étapes
<?php // Demarrage de la tamporisation (rien de s'affichera) ob_start() ; // On récupérer le paramètre indiqué dans l'URL $page = $_GET['page'] ; // Switch va tester la valeur de $page et le code correspondand au "cas" switch($page) : // Si $page est égal à "accueil" case 'accueil' : // On integre le contenu de la page include 'pages/accueil.php' ; break; endswitch ; // On recupere dans une variable le contenu du tampon $contenu = ob_get_clean() ; // On intégre le template qui utilise la variable $contenu include 'template/template.php' ;
Nous avons maintenant deux problèmes à régler :
- Que se passe-t’il si il n’y a pas de paramètres dans l’URL ?
- Que se passe-t’il si le paramètres présent dans l’URL est incorrect ?
Problème 1 : pas de paramètres dans l’URL
<?php
// Demarrage de la tamporisation (rien de s'affichera)
ob_start() ;
// On teste si un paramètre qui s'appelle "page" est présent dans l'URL
if(isset($_GET['page']){
// Si cela existe on recupere sa valeur
$page = $_GET['page'] ;
}
// Si le parametre n'existe pas
else {
// On donne une valeur par defaut à $page
$page = 'accueil';
}
// Switch va tester la valeur de $page et le code correspondand au "cas"
switch($page) :
// Si $page est égal à "accueil"
case 'accueil' :
// On integre le contenu de la page
include 'pages/accueil.php' ;
break;
endswitch ;
// On recupere dans une variable le contenu du tampon
$contenu = ob_get_clean() ;
// On intégre le template qui utilise la variable $contenu
include 'template/template.php' ;Problème 2 : le paramètres est incorrect
<?php
// Demarrage de la tamporisation (rien de s'affichera)
ob_start() ;
// On teste si un paramètre qui s'appelle "page" est présent dans l'URL
if(isset($_GET['page']){
// Si cela existe on recupere sa valeur
$page = $_GET['page'] ;
}
// Si le parametre n'existe pas
else {
// On donne une valeur par defaut à $page
$page = 'accueil';
}
// Switch va tester la valeur de $page et le code correspondand au "cas"
switch($page) :
// Si $page est égal à "accueil"
case 'accueil' :
// On integre le contenu de la page
include 'pages/accueil.php' ;
break;
// Si aucun "cas" ne correspond à la valeur de $page
default :
// On intégrer une page par defaut...
// Nous pouvons integrer la page d'accueil ou bien creer une page d'erreur specifique
include 'pages/accueil.php' ;
break;
endswitch ;
// On recupere dans une variable le contenu du tampon
$contenu = ob_get_clean() ;
// On intégre le template qui utilise la variable $contenu
include 'template/template.php' ;Création de pages de contenu
Pour chaque page que l’on souhaite créer, il suffit maintenant de créer un fichier dans le dossier pages. Par exemple, le fichier pages/test.php qui contient le code HTML de la nouvelle page.
On ajoute ensuite la gestion de la nouvelle page dans le fichier index.php.
<?php
// Demarrage de la tamporisation (rien de s'affichera)
ob_start() ;
// On teste si un paramètre qui s'appelle "page" est présent dans l'URL
if(isset($_GET['page']){
// Si cela existe on recupere sa valeur
$page = $_GET['page'] ;
}
// Si le parametre n'existe pas
else {
// On donne une valeur par defaut à $page
$page = 'accueil';
}
// Switch va tester la valeur de $page et le code correspondand au "cas"
switch($page) :
// Si $page est égal à "accueil"
case 'accueil' :
// On integre le contenu de la page
include 'pages/accueil.php' ;
break;
// On ajoute le code nécessaire pour la nouvelle page
// Si $page est égal à "test"
case 'test' :
include 'pages/test.php' ;
break;
// Si aucun "cas" ne correspond à la valeur de $page
default :
// On intégrer une page par defaut...
// Nous pouvons integrer la page d'accueil ou bien creer une page d'erreur specifique
include 'pages/accueil.php' ;
break;
endswitch ;
// On recupere dans une variable le contenu du tampon
$contenu = ob_get_clean() ;
// On intégre le template qui utilise la variable $contenu
include 'template/template.php' ;Ajout d’une variable pour le titre de la page
Nous pouvons désormais créer d’autres variables… Nous allons en créer une pour avoir un titre différent pour chaque page.
Nous commençons par modifier le fichier index.php pour créer la variable.
<?php
ob_start() ;
if(isset($_GET['page']){
$page = $_GET['page'] ;
} else {
$page = 'accueil';
}
switch($page) :
case 'accueil' :
// On ajoute une variable pour le tite de la page accueil
$title = "Site perso :: Accueil" ;
include 'pages/accueil.php' ;
break;
case 'test' :
// On ajoute une variable pour le tite de la page test
$title = "Site perso :: Page de test" ;
include 'pages/test.php' ;
break;
default :
// On ajoute une variable pour le tite de la page par defaut
$title = "Site perso :: Accueil" ;
include 'pages/accueil.php' ;
break;
endswitch ;
$contenu = ob_get_clean() ;
include 'template/template.php' ;Nous pouvons maintenant utiliser la nouvelle variable $title dans le fichier template/template.php.
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title ; ?></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="css/styles.css" />
</head>
<body>
<header>
<h1>Titre du site</h1>
<p>Slogan du site Internet</p>
</header>
<article>
<?php echo $contenu ; ?>
</article>
<footer>
Designed by me
</footer>
</body>
</html>Téléchargement des fichiers
Vous pouvez récupérer tous les fichiers en cliquant ci-dessous :
Merci!
Pour le code suivant:
if(isset($_GET['page']){ $page = $_GET['page'] ; } else { $page = 'accueil'; }Vous pouvez faire directement:
$page = 'accueil'; if(isset($_GET['page']) $page = $_GET['page'] ;Ou même:
Bonjour Steve,
Merci pour votre remarque, vous avez tout à fait raison pour vos propositions. Mais dans la mesure où cet article est destiné aux débutants, je préfère écrire un plus de code que d’utiliser votre version sans accolades (avec les limitations que ça implique) ou avec l’utilisation de l’opérateur ternaire
? :qui est pourtant très utile.