Template avec ob_start() en PHP (Avancé)

 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 :

  1. Que se passe-t’il si il n’y a pas de paramètres dans l’URL ?
  2. 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 :

Cela peut vous intéresser :