Tutoriel – Initiation aux templates en php

Voici un petit tutoriel, sans prétention pour vous initier au développement de templates en php. C’est une petite contribution, qui permet de visualiser quelques points de la programmation en php et afin d’en comprendre quelques mécanismes.

Pour cet exercice, je vais considérer que vous avez des bases en programmation php et que vous avez votre environnement de travail (exemple WAMP).

Dans un premier temps vous allez créer deux dossiers à la racine de votre site, un dossier nommé templates et l’autre zones.

Ensuite nous allons créer des fonctions, au nombre de 4. Bien entendu, on pourrait faire cela sous forme de classe, mais c’est juste pour vous faire découvrir quelques principes de base.

Alors appelons notre fichier qui contiendra ces fonctions template.php, que nous mettrons à la racine.

Première fonction, getContent() est la fonction principale, celle qui va faire l’appel du template et le gérer, elle va appeler d’autres fonctions :

// Appel et affichage du template
// $require = chemin vers le template
function getContent($require){

// démarrage du buffer
ob_start();

// Verification si le fichier existe
if(file_exists($require))
require($require);
else
echo 'ERROR : TEMPLATE INTROUVABLE !!!';

// copie du contenu du tampon dans une variable
$out = ob_get_contents();

// effacement du contenu du tampon et arret de son fonctionnement
ob_end_clean();

// Recherche d'élément a remplacer
$out = preg_replace_callback('#\{(.*)~(.*)\}#U', 'callbackBuff', $out);

// Retour
echo $out;

}

 

Que peut on remarquer ? la mise en mémoire des éléments et le tout est inséré dans une variable $out. Après, on va passer les éléments à la moulinette via la fonction preg_replace_callback et nous allons récupérer tous les éléments composés ainsi : {VALEUR1~VALEUR2}, puis à chaque fois appeler une fonction nommée callbackBuff().

Retrouvons cette dernière :

// Le callback
function callbackBuff($matches){

// ELEMENTS : $matches[0](tout) - $matches[1](premiere partie) $matches[2](deuxieme partie)

// Pour l'instant seules les zones et les contenus sont traitées
if($matches[1] == 'ZONE')
return buffZone($matches[2]);
if($matches[1] == 'VAR')
return buffVar($matches[2]);
else
return $matches[0];

}

C’est simple, on vérifie la première valeur, en résumé VALEUR1 de notre exemple {VALEUR1~VALEUR2}. Si cette valeur est ZONE on appelle la fonction buffZone() avec la deuxième valeur (VALEUR2) comme argument, si la valeur est VAR alors on appelle buffVar() pareils avec pour argument VALEUR2 et sinon on retourne l’élément inchangé.

Voyons donc nos deux autres fonctions buffZone() et buffVar() :

// Affichage d'une zone
function buffZone($zone){

// Le chemin vars le fichier
$file_zone = 'zones/'.strtolower($zone).'.php';

// démarrage du buffer
ob_start();

// Chargement de la zone
if(file_exists($file_zone))
require($file_zone);
else
echo '';

// copie du contenu du tampon dans une variable
$out = ob_get_contents();

// effacement du contenu du tampon et arret de son fonctionnement
ob_end_clean();

// traitement de la chaine obtenue
$out = preg_replace_callback('#\{(.*)~(.*)\}#U', 'callbackBuff', $out);

// Sortie
return $out;

}

// Affichage d'une variable
function buffVar($var){

require('var.php');

// démarrage du buffer
ob_start();

// Chargement de la zone
if(isset($$var))
echo $$var;
else
echo '';

// copie du contenu du tampon dans une variable
$out = ob_get_contents();

// effacement du contenu du tampon et arret de son fonctionnement
ob_end_clean();

// traitement de la chaine obtenue
$out = preg_replace_callback('#\{(.*)~(.*)\}#U', 'callbackBuff', $out);

// Sortie
return $out;

}

Que peut on observer ? Qu’on aurait pu faire plus simple et fusionner ces deux fonctions qui se ressemblent grandement, mais ainsi vous pouvez mieux observer les éléments, les différences et le comportement.

Donc, que se passe t il ? C’est que chacune des fonctions va réagir selon l’argument passé, par exemple buffZone() appellera un fichier php s’il existe dans le dossier zone et buffVar() appellera une variable contenu dans le fichier var.php qui est à la racine.

Ce que l’on peut observer aussi, c’est la possibilité de rappeler encore des éléments {VALEUR1~VALEUR2} grâce à la fonction preg_replace_callback().

Donc certes, c’est un petit tutoriel, mais les possibilités sont tout de même nombreuses.

Exemple d’utilisation le plus simple, créez un fichier index.php à la racine avec comme contenu :

<?php require('template.php'); getContent('templates/default.tpl.php'); ?>

 

Créez votre fichier var.php à la racine, avec comme contenu :

<?php 
$title = 'TITRE DU SITE'; 
$h1 = 'LE H1 DU SITE'; 
$p = 'BALISE P DU SITE'; 
?>

 

Maintenant créez un fichier zone1.php dans le dossier zones :

<div>

ZONE 1

</div>

 

Et pour terminer un fichier default.tpl.php dans le dossier templates :

{VAR~title}

<h1>{VAR~h1}</h1>
{VAR~p}

{ZONE~zone1}

{AFFICHE~OK}

 

Si vous avez bien suivi ce tuto vous avez une racine qui ressemble à ça :

Racine tuto 1

Racine tuto 1

Et en lançant le fichier index.php vous obtiendrez ceci :

Visu Tuto 1

Visu Tuto 1

Que voit on ? Que les éléments ont bien été traité, que ce qu’il y avait dans le fichier zone1.php s’affiche, que nos variables ont bien été récupérées. Et que l’élément entre crochet qui n’appelle ni une zone, ni une variable s’affiche normalement.

A savoir que vous pouvez appeler une zone dans une zone (attention aux boucles infinies) :

Dans zone1.php

<div>

Affiche une zone 2
{ZONE~zone2}

</div>

 

Créez un fichier zone2.php dans le dossier zones avec :


ZONE 2 : {VAR~title}

 

Relancez l’index.php et voyez le résultat.

A savoir que vous pouvez aussi appeler des zones et des variables depuis les variables du fichier var.php, exemple :

<?php 
$title = 'TITRE DU SITE'; 
$h1 = 'LE H1 DU SITE'; 
$p = '{ZONE~zone2}'; 
?>

 

Faites plusieurs essais avec différentes possibilités.

Pour télécharger les fichiers :
tuto_template.zip

N’hésitez pas à apporter vos remarques et contributions.

Ce tutoriel était une petite initiation, mais qui devrait amener les novices à poser ou se poser des questions et à entrevoir des possibilités envisageables.

Bon code à tous 🙂

Author: Franck Pertegas

Share This Post On

6 Comments

  1. Cool, ce petit tuto. Ça va me permettre d’évoluer dans ma logique dev

    Post a Reply
  2. Merci pour le commentaire.

    J’espère que ça va pouvoir t’aider. Si tu as des questions n’hésite pas Willzgui. Bientôt je mettrais en ligne un petit forum afin d’échanger plus facilement autours du dev.

    ++ l’ami 😉

    Post a Reply
  3. Bonjour
    J’arrive sur cette page !! Extra, va t’il y avoir une petite suite …?

    Merci pour l’échange 😉

    Post a Reply
  4. Salut Fantoche,

    Bah écoute, je n’allais pas forcément le faire, mais vu ton enthousiasme et tes encouragements, je vais te répondre pourquoi pas.

    Je prépare tout ça dans la semaine.

    Je t’enverrais un mail pour te tenir informé 😉

    Merci pour le commentaire

    @+

    Post a Reply
  5. Que dire !!?

    Merci beaucoup, bon esprit 😉
    A bientot, je lis aussi l’article concernant l’éditeur TinyMCE que je découvre plus facilement a présent.

    Bon fin de WE

    A biental

    Post a Reply
  6. Tiens en parlant de TinyMCE, un article plus complet et approfondi arrivera vers la mi-Mai je pense.

    Bonne fin de WE également 😉

    Post a Reply

Submit a Comment

Votre adresse e-mail ne sera pas publiée.