skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

samedi 28 février 2009

Débuter avec Smarty

Publié par Infinite Loop, à 11 h 23 1 commentaire

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;


Tags: PHP

1 réponse à "Débuter avec Smarty"

  1. Ariden a dit...
    7 septembre 2010 à 09 h 04

    Je n’arrive pas à faire appel à des fonctions, même simples dans la vue telles que {$this->headStyle()},
    par contre, j’arrive bien à afficher la valeur de mes variables telles que {$book|upper} ou à en créer de nouvelles directement dans ma vue.

    si qql voit pourquoi ?


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ▼  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ▼  février 2009 (32)
        • Débuter avec Smarty
        • Excuses de programmeurs
        • Ajouter les numéros de lignes dans du code source
        • 12 étapes vers un meilleur code ?
        • Décompiler un fichier d'aide CHM
        • Équivalences prototype vs jQuery
        • Afficher une date en français avec PHP
        • Citation no. 18 sur la relation de couple
        • Comparer des versions de fichiers
        • Apprendre le Zend Framework
        • The Pragmatic Programmer
        • Lecture un fichier séquentiel avec Perl
        • Variables de Perl et de PHP
        • Redimensionner une image avec GD
        • Output buffering de PHP
        • Citation no. 17 sur Linux et Windows
        • Convertir des m4a en mp3
        • Configuration de base de TinyMCE
        • RTE gratuits à découvrir
        • Manipuler des mesures avec Zend_Measure
        • Monty Python influence l'informatique
        • Refuser l'accès à certains fichiers avec .htaccess
        • Citation no. 16 sur le travail
        • Jukebox touchscreen
        • Débuter avec SQLite et PHP
        • Regular Expressions (Regexp)
        • Compteur de caractères facile avec Prototype
        • Renommer la corbeille de Windows XP
        • Quota d'espace sur PostgreSQL
        • Fonction pgSQL avec %rowtype
        • Vider une table dans PostgreSQL
        • Citation no. 15 sur les étudiants
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft