Débuter avec Smarty

Dans la programmation web, on arrive toujours à un point où le code source HTML se mélange avec le JavaScript et le PHP, donnant comme résultat un gros charabia de code spaghetti. En suivant une approche MVC (model - view - controller), on peut facilement utiliser prototype ou jQuery pour extraire le code JavaScript afin qu'il ne s'entrecroise pas avec le HTML. Mais qu'en est-il du PHP ?

Il existe plusieurs engins de gabarits comme le populaire Smarty ou encore PHPTAL qui peuvent nous donner un coup de main. Souvent, le problème est qu'un intégrateur ou un designer doit apporter quelques ajustements et franchement, il n'en a rien à foutre du code PHP. Sa présence ne fait que complexifier sa compréhension du code source (et les programmeurs ne font pas exception...).

Afin de préserver une bonne ambiance de travail entre les départements, il est sage d'opter pour un engin de templates. Pour moi, ce n'est pas juste un mal nécessaire, c'est aussi une bonne façon de structurer son code et conserver une clareté pour les modifications futures.

J'ai choisi aujourd'hui de vous présenter Smarty. Voici quelques lignes directrices :

• Après avoir téléchargé le package Smarty, déposez-le sur le serveur (de développement et/ou de production) ou dans votre projet.
• Localisez le répertoire "libs". Il contient le fichier Smarty.class.php que vous devrez attacher à votre projet.
• Pour votre première page, vous aurez besoin d'un script php et d'une page .tpl (template). Mon exemple illustrera comment construire l'affichage d'une fiche de musicien avec sa discographie.
  

demo.tpl

Bien qu'on fasse référence à des variables qui ressemblent à celles du PHP, ce fichier ne contiendra aucun code PHP à exécuter. Il utilisera une syntaxe propre à Smarty qui définit des placeholders, des conditions, des boucles, etc., qu'on reconnaîtra à l'utilisation des accolades.

Par exemple, pour faire apparaître le nom de l'artiste dans une balise HTML, on utilisera la syntaxe suivante. Il est aussi possible d'appliquer un traitement à l'aide d'une des fonctions prédéfinies de Smarty (ici capitalize).

<h3>{$artist}</h3>
<h3>{$artist|capitalize}</h3>

À partir d'une liste d'albums, on effectuera une boucle pour afficher un tableau qui contient sa discographie. On bouclera à partir de l'array associatif $albums qui contiendra les propriétés "title" et "year".

Remarquez l'instruction Smarty "cycle" qui permet de créer l'alternance des couleurs automatiquement.

<table>
<tr>
 <td>Album</td>
 <td>Année</td>
</tr>
{section name=albums_list loop=$albums}
{strip}
<tr style="background-color:{cycle values="#cecece,#ffffff"}">
 <td>{$albums[albums_list].title}</td>
 <td>{$albums[albums_list].year}</td>
</tr>
{/strip}
{/section}
</table>

On peut insérer une liste déroulante qui offrira au visiteur de noter son appréciation de l'artiste (de 1 à 5 étoiles). Plutôt que d'utiliser la boucle décrite ci-dessus, Smarty offre la possibilité d'utiliser "html_options", une fonction qui crée dynamiquement les balises "option" pour nous selon les paramètres passés. Nul besoin de faire d'itération. Question de rendre le code plus simple à suivre, j'omets volontairement le code HTML et le formulaire.

<label for="iScore">Score:</label>
<select id="iScore" name="iScore">
{html_options options=$optionsScore selected=$selectedScore}
</select>

Une syntaxe alternative permet de remplir la liste autrement. Notez la différence, d'autant plus que je ne veux pas l'utiliser en même temps que l'autre, je l'ai placée en commentaire.

{*
ce code est en commentaire, il n'apparaîtra pas dans le résultat final
<select id="iScore" name="iScore">
{html_options values=$score_value output=$score_label selected=$selectedScore}
</select>
*}

Selon la moyenne des notes attribuées, on peut faire afficher une mention spéciale :

{if $avgScore >= 4}    
<div>
Cet artiste est très apprécié des auditeurs (moyenne: {$avgScore} / 5)        
</div>
{/if}

Finalement, Smarty offre plusieurs fonctions built-in qu'on peut utiliser au sein des gabarits. Affichons la date à laquelle la fiche a été générée (date du jour).

<div>
Généré le {$smarty.now|date_format:"%Y-%m-%d"}
</div>

Comme vous pouvez le constater, le code est très simple et on note l'absence de toute trace de PHP. Maintenant, attaquons nous au PHP qui remplira et affichera le gabarit.

Après avoir instancié un objet Smarty, initialisez-le en assignant les répertoires nécessaires pour exécuter le travail. Pour le moment, j'utiliserai seulement template_dir (là où les gabarits seront stockés).

Fichier PHP

require_once('librairies/Smarty/2.6.22/libs/Smarty.class.php');

$smarty = new Smarty();
$smarty->template_dir='smarty/templates';
$smarty->compile_dir='smarty/compile';
$smarty->cache_dir='smarty/cache';

// assigner une valeur statique au placeholder "artist"
// ($artist dans le fichier .tpl)
$smarty->assign('artist', 'Kaki King');

// alternative 1 pour remplir le select box
$scores = array(1=>'*', 2=>'**', 3=>'***', 4=>'****', 5=>'*****');
$smarty->assign("optionsScore", $scores );
$smarty->assign("selectedScore", 3);

// alternative 2 (commentée)
$smarty->assign("score_value", array(1,2,3,4,5));
$smarty->assign("score_label", array("*", "**", "***", "****", "*****"));
$smarty->assign("selectedScore", 3);

// après avoir calculé la moyenne d'appréciation
// (par exemple à partir d'une base de données),
// assigner la valeur à une variable PHP
$avgScore = 4.27;

// il faut ensuite faire l'association entre la variable PHP
// et la variable Smarty.
// ce n'est pas obligatoire qu'elles portent le même nom
$smarty->assign('avgScore', $avgScore);

// liste des albums (imaginez qu'elle provient de la base de données)
$albums = array(
 array('title' => 'Everybody Loves You', 'year' => '2003'),
 array('title' => 'Legs to Make Us Longer', 'year' => '2004'),
 array('title' => 'Until We Felt Red', 'year' => '2006'),
 array('title' => 'Dreaming Of Revenge', 'year' => '2008')
);

// assigner les albums. Smarty s'occupera de boucler!
$smarty->assign('albums', $albums);

// afficher le tout
$smarty->display('demo.tpl');

Mon exemple est relativement simple, l'objectif étant de faire une introduction rapide à Smarty, mais ce qu'on peut en tirer est évidemment beaucoup plus vaste. Même si on ajoute un niveau de complexité, on devra avouer que le code est plus propre, plus simple à lire et à maintenir et qu'en bout de ligne, ça ne demande pas beaucoup d'efforts supplémentaires, juste un peu de rigueur. Si j'ai réussi à piquer votre curiosité et que vous souhaitez continuer à expérimenter Smarty, vous pourrez suivre la trace de ce qui se passe en activant la propriété de déboggage suite à l'instanciation de l'objet : $smarty->debugging = true;