L’HTML est un langage de structuration de l’information et non un langage de programmation comme le PHP. L’idée des modèles HTML (Template, Gabarits, Canevas) est de séparer ces deux parties afin de bénéficier de tout les avantages d’un découplage fort. Le but de cet article est d’illustrer comment fonctionne un système de Gabarit simple.
Il existe maintenant une nouvelle classe plus puissante.
Alors que les feuilles de styles (CSS) permettent de séparer la structure du document et la présentation de ce même document. Les canevas permettent de séparer clairement la logique de programmation de la structure HTML.
Les canevas HTML servent à éviter le mélange sauvage de code HTML et de code applicatif. L’utilisation appropriée des gabarits dans votre application garanti un découplage total entre HTML et le langage de programmation.
Cette façon de procéder permet d’acheminer son application vers le modèle de type "Modèle, Vue, Contrôle". Il convient particulierement bien aux applications Web car la couche de présentation (Vue) se fait dans un langage différent de celui dévoué à la programmation (Contrôle et Modèle).
La modification de la présentation ne touche pas l’application, et inversement. Comme on peut se concentrer sur une plus petite partie du problème, on évite des erreurs.
Le graphiste et le programmeur peuvent travailler ensemble sur l’application de manière non concurrente.
La séparation fonctionnelle des langages facilite les modifications ultérieurs.
Durant la réalisation d’un projet il est apparu différents besoins que j’ai pu couvrir avec quatres fonctions primitives.
Imaginez que votre fichier de template se nomme standard.template.html et qu’il contienne cette ligne :
...
<title><!--%titrePage%---></title>
...
Aillant programmé le système de template en PHP le code associé serait :
// construction de l’objet Template $standardTemplate = new Template('standard.template.html'); // remplacement $standardTemplate->replace('titrePage','ma belle page'); // affichage echo $standardTemplate->toString();
Ce qui donnerait ceci :
... <title>ma belle page</title> ...
Imaginez que votre fichier contienne :
... <select> <!--%loop:options%--> <option value="<!--%valeur%-->"><!--%texte%--></option> <!--%endLoop:options%--> </select> ...
Le code associé serait :
// construction de l’objet Template $standardTemplate = new Template('standard.template.html'); // construction du tableau de valeurs $optionsArray = array( array('valeur'=>1,'texte'=>'hello'), array('valeur'=>2,'texte'=>'world') ); // remplacement par boucle $standardTemplate->iterateReplace('options',$optionsArray ); // affichage echo $standardTemplate->toString();
Ce qui vous donnerait quelque chose dans le genre :
...
<select>
<option value="1">hello</option>
<option value="2">world</option>
</select>
...
Reprenons le code HTML ci-dessus et ajoutons lui une condition. Les conditions peuvent être evaluées sur des variables passées dans le tableau destiné à une boucle ou à la récursion :
... <select> <!--%loop:options%--> <option <!--%if:isset($['selected'])%-->selected="selected"<!--%endIf%--> value="<!--%valeur%-->"><!--%texte%--></option> <!--%endLoop:options%--> </select> ...
Avec le code suivant :
// construction de l’objet Template $standardTemplate = new Template('standard.template.html'); // construction du tableau de valeurs $optionsArray = array( array('valeur'=>1,'texte'=>'hello'), array('valeur'=>2,'texte'=>'world', 'selected'=>true ) ); // remplacement par boucle $standardTemplate->iterateReplace('options',$optionsArray ); // affichage echo $standardTemplate->toString();
Vous donnerais au final :
...
<select>
<option value="1">hello</option>
<option selected="selected" value="2">world</option>
</select>
...
Ou plus exactement ceci :
... <!--%if:1==0%--> <p>1 est égal à 0.</p> <!--%elseif:1==2%--> <p>1 est égal à 2.</p> <!--%else%--> <p>0 n’est ni égal à 1, ni égal à 2.</p> <!--%endIf%--> ...
Ce qui donnerait evidemment :
... <p>0 n’est ni égal à 1, ni égal à 2.</p> ...
Voici à quoi ressemblerait un code HTML taillé pour la récursion :
... <!--%recursion:listeImbriquee%--> <ul> <!--%loop%--> <li><!--%texte%--><!--%recursion%--></li> <!--%endLoop%--> </ul> <!--%endRecursion:listeImbriquee%--> ...
Si le code PHP associé était comme ceci :
// construction de l’objet Template $standardTemplate = new Template('standard.template.html'); // construction du tableau de valeurs $listesArray = array( array('texte'=>'une'), array('texte'=>'belle', array( array('texte'=>'liste', array( array('texte'=>'récursive')))))); // remplacement par boucle $standardTemplate->recursiveReplace('listeImbriquee',$listesArray ); // affichage echo $standardTemplate->toString();
La structure de la variable listesArray serait alors :
Array
(
[0] => Array
(
[texte] => une
)
[1] => Array
(
[texte] => belle
[0] => Array
(
[0] => Array
(
[texte] => liste
[0] => Array
(
[0] => Array
(
[texte] => récursive
)
)
)
)
)
)
Et vous en obtiendriez le code HTML suivant :
<ul> <li>une</li> <li>belle <ul> <li>liste <ul> <li>récursive</li> </ul> </li> </ul> </li> </ul>
C’est à dire ceci :
Avec l’implémentation fournie, il est possible de combiner les différentes façons de faire ormis que l’on ne peut emboiter plusieurs niveaux de conditions. La classe n’est de loin pas parfaite mais suffit pour des besoins limités. Il existe de nombreuses autres implémentations plus évoluées. Je vous laisse les découvrir par vous même.