SMARTY, le moteur et compilateur de templates PHP. Ce tutoriel a pour but de vous présenter brièvement les nombreux avantages que vous pourriez trouver à utiliser le moteur de templates Smarty. Mes principales sources de rédaction sont celles du manuel officiel de Smarty, ainsi que divers articles que j’ai parcouru sur le net.

1- Qu’est-ce qu’un système de templates ?

Un système de templates permet de rendre les scripts PHP indépendants de la présentation. En d’autres termes, les templates permettent de séparer la logique applicative de la logique d’affichage. Trop souvent, PHP est dénigré car on pense – à défaut – qu’il n’existe pas de solutions permettant de mettre en œuvre ce type de modularisation.

Les intérêts d’une telle approche sont multiples :

  • designers et programmeurs peuvent travailler indépendamment : le designer ne s’occupe que du design, le programmeur uniquement du programme. Cette description peut paraître triviale, mais sans templates, design et code seront systématiquement mélangés, nuisant à la fluidité du processus de réalisation ;
  • il devient extrêmement aisé de changer de langage de présentation sans perturber la logique de l’application (passer de HTML à XHTML ou XML par exemple) ;
  • les changements dans la charte graphique seront grandement simplifiés, les modifications se résumant uniquement à la couche de présentation (aux squelettes, modèles ou gabarits) ;
  • on a la possibilité de compiler les templates pour une rapidité d’exécution accrue, ainsi que l’implémentation d’un système de gestion du cache.

Au-delà des avantages de l’utilisation d’un système de templates, les avantages propres à Smarty (il existe en effet d'autres systèmes de templates) sont les suivants :

  • pérennité et évolutions assurées (projet du PhpGroup)
  • il est très rapide
  • il sait ne recompiler que les fichiers de templates qui ont été modifiés
  • il est possible de créer ses propres fonctions utilisateur et ses propres modificateurs de variables
  • imbrications illimitées de boucles
  • support de cache
  • etc.

Vous trouverez un schéma vulgarisant le concept suivant en cliquant sur ce lien : Schéma

2- La procédure d'installation sur le serveur

Rendez-vous sur http://smarty.php.net/download.php, téléchargez-y la dernière version stable. Ensuite, décompressez l’archive et copiez le dossier libs. La configuration que je vous propose est celle de base (pour plus de détails, référez-vous au manuel Smarty, car cela n’est pas l’objet de ce tutoriel). Pour notre exemple on suppose que nous sommes à la racine de notre serveur et que nous y avons créé un dossier smarty_test/. Dans le dossier smarty_test/, nous allons coller notre dossier libs copié précédemment. Ensuite, toujours dans le dossier smarty_test/, on va créer 4 nouveaux dossiers, pour finalement obtenir l’arborescence suivante :
smarty_test
     cache (à créer)
     configs (à créer)
     libs (à coller)
     templates (à créer)
     templates_c (à créer)

Quelques explications rapides : smarty_test est notre dossier racine, cache pourra vous servir si vous approfondissez, configs également. S’en suivent les 3 dossiers absolument indispensables : libs qui contient les librairies, templates qui contiendra nos gabarits, templates_c qui contiendra nos templates compilées. Vous voila fin prêts pour commencer votre premier fichier Smarty !

3- Une première approche avec un exemple simple

Version PHP et HTML mélangés

Comparons un simple affichage avec et sans système de templates. Ces deux exemples absolument identiques d’un point de vue fonctionnel ont pour seul but de vous montrer que la maintenance et la lisibilité du code est grandement facilitée avec l'utilisation de templates :

Fichier index_sans_smarty.php

  1. <?
  2. /*
  3. NOUS VOICI DANS LA VERSION
  4. PHP CLASSIQUE
  5. */
  6.  
  7. /*
  8. * @var string titre pour le tag <title>
  9. */
  10. $title = "Exemple";
  11.  
  12. /*
  13. * @var string la phrase classique de test...
  14. */
  15. $words = "Hello World !";
  16.  
  17. /*
  18. * @var array un tableau pour exemple
  19. */
  20. $tokens = Array("Un", "petit", "tutoriel", "à", "propos", "de", "smarty");
  21.  
  22. /*
  23. * @var array un tableau à 2d numérique et associatif pour exemple
  24. */
  25. $array2d = Array(
  26. "Benjamin",
  27. "SCHNEIDER",
  28. "23"),
  29. "Esther",
  30. "JAVIER",
  31. "21"),
  32. "Kröl",
  33. "LEHAMSTER",
  34. "1")
  35. );
  36. ?>
  37.  
  38. <html>
  39. <head>
  40. <title><?php echo $title; ?></title>
  41. </head>
  42. <body>
  43. <h1><?php echo $words; ?></h1>
  44. <p>
  45. <?php
  46. foreach($tokens as $token)
  47. {
  48. ?>
  49. <div><?php print $token ?></div>
  50. <?php
  51. }
  52. ?>
  53. </p>
  54. <table border="1" cellpadding="5">
  55. <tr>
  56. <td>Pr&eacute;nom</td>
  57. <td>Nom</td>
  58. <td>Age</td>
  59. </tr>
  60. <?php
  61. $i = 0;
  62. foreach($array2d as $v1)
  63. {
  64. if($i % 2 == 0)
  65. $color = "#eee";
  66. else
  67. $color = "#ccc";
  68. ?>
  69. <tr style="background: <?php print $color; ?>;">
  70. <?php
  71. foreach($v1 as $v2)
  72. {
  73. ?>
  74. <td><?php print $v2 ?></td>
  75. <?php
  76. }
  77. ?>
  78. </tr>
  79. <?php
  80. $i++;
  81. }
  82. ?>
  83. </table>
  84. </body>
  85. </html>

Version SMARTY

Fichier index_smarty.php

  1. <?php
  2.  
  3. /*
  4. * @description : inclusion de la classe smarty
  5. */
  6. require './libs/Smarty.class.php';
  7.  
  8. /*
  9. * @description : création d'une instance de smarty
  10. */
  11. $smarty = new Smarty();
  12.  
  13. /*
  14. * @var string titre pour le tag <title>
  15. */
  16. $title = "Exemple";
  17.  
  18. /*
  19. * @var string la phrase classique de test...
  20. */
  21. $words = "Hello World !";
  22.  
  23. /*
  24. * @var array un tableau pour exemple
  25. */
  26. $tokens = Array("Un", "petit", "tutoriel", "à", "propos", "de", "smarty");
  27.  
  28. /*
  29. * @var array un tableau à 2d numérique et associatif pour exemple
  30. */
  31. $array2d = Array(
  32. "Benjamin", "prenom" => "Benjamin",
  33. "SCHNEIDER", "nom" => "SCHNEIDER",
  34. "23", "age" => "23"),
  35. "Esther", "prenom" => "Esther",
  36. "JAVIER", "nom" => "JAVIER",
  37. "21", "age" => "21"),
  38. "Kröl", "prenom" => "Kröl",
  39. "LEHAMSTER", "nom" => "LEHAMSTER",
  40. "1", "age" => "1"),
  41. );
  42.  
  43. /*
  44. * @description assigne la variable $title à la template
  45. */
  46. $smarty->assign('title', $title);
  47.  
  48. /*
  49. * @description assigne la variable $words à la template
  50. */
  51. $smarty->assign('words', $words);
  52.  
  53. /*
  54. * @description assigne le tableau $tokens à la template
  55. */
  56. $smarty->assign('tokens', $tokens);
  57.  
  58. /*
  59. * @description assigne le tableau à 2d à la template
  60. */
  61. $smarty->assign('array2d', $array2d);
  62.  
  63. /*
  64. * @description nom de la template
  65. */
  66. $smarty->display('example.tpl');
  67. ?>

Fichier templates/example.tpl

  1. {*
  2. SMARTY
  3. CECI EST UN COMMENTAIRE, TOUT CE QUI FIGURE ICI NE SERA VISIBLE
  4. QUE DANS VOTRE IDE.
  5. *}
  6. <html>
  7. <head>
  8. <title>{ $title }</title>
  9. </head>
  10. <body>
  11. <h1>{ $words }</h1>
  12. <p>
  13. { foreach">foreach from=$tokens item=token }
  14. <div>{ $token }</div>
  15. { /foreach">foreach }
  16. </p>
  17. <table border="1" cellpadding="5">
  18. <tr>
  19. <td>Pr&eacute;nom</td>
  20. <td>Nom</td>
  21. <td>Age</td>
  22. </tr>
  23. { section name=i loop=$array2d }
  24. <tr style="background: { cycle values='#eee, #ccc' }">
  25. <td>{ $array2d[i].0 } {* OU ON AURAIT PU ECRIRE : $array2d[i].prenom *}</td>
  26. <td>{ $array2d[i].1 } {* OU ON AURAIT PU ECRIRE : $array2d[i].nom *}</td>
  27. <td>{ $array2d[i].2 } {* OU ON AURAIT PU ECRIRE : $array2d[i].age *}</td>
  28. </tr>
  29. { /section }
  30. </table>
  31. </body>
  32. </html>

Cet exemple a certes peu d’utilité, mais il vous montrera, je l’espère, les immenses capacités de Smarty : je pense que vous serez d’accord pour constater que la méthode mélangeant le HTML et le PHP est peu lisible et mélange code et présentation. Cela passe peut-être sur une page, mais qu’en sera-t-il pour un site de plusieurs centaines de pages ? Toute la présentation sera « bloquée » par le fait qu'elle est dépendante de votre code ! Les templates constituent donc des outils surpuissants qui, couplés à l'utilisation de classes en PHP et de feuilles de style CSS, vous permettront des gains de temps considérables lors de vos cycles de développement.

Bien que cette méthode puisse paraître difficile au premier abord, les templates méritent vraiment qu'on s'intéresse à leur fonctionnement. Je vous rappelle d'ailleurs que Smarty propose un nombre énorme de fonctionnalités et de qualités qui n'ont pas été citées dans ce tutoriel qui a pour vocation de ne présenter que les bases du système.

J'espère que ce sujet vous aura intéressé, amicalement, Ben.