Le développement du PHP passe par plusieurs outils. Si vous sortez tout fraîchement d'autres tutoriels sur le PHP, vous avez sûrement entendu parler des frameworks ou des moteurs de template. Nous allons ici nous intéresser à un moteur de template. Qu'est-ce que c'est ? Á quoi cela sert-il ? Et comment l'utiliser, que ce soit simplement ou pour une utilisation plus poussée ?
Pour vous permettre de suivre au mieux ce tutoriel, il est conseillé d'avoir des bases en PHP, comme par exemple grâce au tutoriel de M@teo21 sur le PHP.
C'est une question que vous devez vous poser si vous ne connaissez pas déjà la réponse. Si c'est déjà le cas, je vous invite à sauter cette sous-partie du cours et à vous diriger directement vers la suivante. Pour ceux qui ne savent pas ce qu'est un moteur de template, je vous conseille vivement de lire ce qui suit.
Tout d'abord, je vais vous présenter ce qu'est un moteur de template. Je vous parlerai ensuite de Smarty, qui est le moteur de template que nous allons étudier.
Un moteur de template PHP est écrit en PHP (logique :p ) ; son rôle est principalement de vous aider dans la lisibilité et la logique de votre projet en général, de son code en particulier. Également couplé d'une structure MVC, ce système donne d'excellentes performances. Ce que fait précisément un moteur de template, c'est rassembler le code de présentation (tout ce qui est (x)HTML et CSS) et le code d'application (votre requête en PHP et autres). Ainsi, plus besoin de se casser la tête à retrouver la requête dans la structure HTML du site ou encore à rechercher la variable dans un monticule de texte.
Le rouage d'un moteur de template est bien huilé. En effet, prenons une page d'index contenant une série de news. Le fichier PHP va se charger de rechercher les informations dans la base de données : titre, contenu, créateur… Ce fichier ne contient aucune balise (x)HTML ayant une influence sur l'affichage. Et d'un autre côté, on trouve un fichier de template (.html ou .tpl) qui contient la structure (x)HTML de la page web. Grâce au moteur de template, les informations contenues dans le fichier PHP lui seront transmises et le moteur regroupera les deux fichiers en un seul par une compilation.
Voici comment fonctionne la compilation complète des deux fichiers :
lecture du fichier PHP ;
lecture du template ;
compilation ;
création du script PHP à partir des deux autres ;
exécution du code généré.
Bien sûr, un tel système comprend son lot d'avantages, mais aussi d'inconvénients.
Avantages
La séparation des deux codes permet une meilleure visibilité dans le code. Idéal pour le travail d'équipe.
On peut alors toucher ou modifier un des deux fichiers sans que cela ait un impact sur l'autre.
La mise en cache est proposée et permet ainsi d'économiser les ressources des serveurs avec la possibilité de configurer le tout.
Inconvénients
Son utilisation va retarder le chargement de votre page, mais il sera compensé en partie par Smarty, un moteur de template assez rapide.
Il faut étudier le langage de template.
La lecture des erreurs est assez compliquée.
Smarty, moteur de template, est donc celui que j'ai décidé de vous présenter pour ses capacités très puissantes et son utilisation très facile pour les débutants. Il a l'avantage d'être très rapide : Smarty recompile les fichiers uniquement si des changements sont apportés dans le fichier de template. Nous verrons donc ensemble au cours des autres sous-parties comment afficher une variable d'un fichier à l'autre, modifier des variables grâce à des modificateurs et créer une fonction utilisateur dans Smarty pour les plus valeureux, ce que nous verrons au fur et à mesure.
Pour télécharger la bête, rien de plus facile ; de plus, son installation est vraiment aisée. Rendez-vous sur la page Download où se trouvent les versions bêta et release de Smarty, et faites votre choix (téléchargez bien sûr la dernière version stable).
Le téléchargement est très rapide. Décompressez les fichiers et ouvrez le dossier libs, qui contient le cœur du moteur et les principaux fichiers qui nous serviront tout au long de ce tutoriel. Copiez-les dans un dossier à la base de votre projet que nous appellerons ici tpl.
Première utilisation
Pour commencer, nous allons réaliser la plus simple action du moteur de template et découvrir peu à peu les bases de Smarty, comme par exemple afficher une page. Créez un fichier PHP index.php à la racine de votre projet et commencez par y ouvrir les balises PHP. Nous allons débuter par l'inclusion de la classe qui permet à Smarty de fonctionner.
<?php
require("tpl/smarty.class.php"); // On inclut la classe Smarty
?>
Voilà qui est fait. Et maintenant ? Smarty est codé en POO (programmation orientée objet) ; si vous souhaitez obtenir plus d'informations sur la programmation orientée objet, je vous conseille le tutoriel de vyk12. Si vous avez du temps, n'hésitez pas à le lire, il vous permettra de mieux comprendre comment fonctionne Smarty et pourquoi vous faites telle ou telle action dans votre code. Si vous avez lu le tutoriel conseillé, je pense que vous savez déjà ce qu'il faut faire : j'ai nommé la création de l'objet Smarty.
<?php
$smarty = new Smarty();
?>
Comme nous commençons très doucement, la prochaine ligne servira à l'affichage d'une page .html ou .tpl suivant votre envie. Pour cela, il suffit d'utiliser la fonction display qui permet de charger une page.
<?php
$smarty->display("mapage.html");
?>
Voici le strict minimum pour afficher une page ; cela doit être la base de chaque page liée à Smarty. Ah, oui ! j'oubliais : si vous voulez que tout marche, pensez à créer la page .tpl ou .html, et d'y ajouter le contenu que vous souhaitez : la structure HTML, le design…
Hello World!
Lancez la page PHP depuis votre navigateur et il vous affichera un joli « Hello World! ».
Nous allons voir dans cette sous-partie tout ce qu'il faut savoir pour bien commencer l'apprentissage de Smarty.
Le merveilleux monde des variables
Pour passer des informations du fichier PHP au fichier de template, Smarty met à disposition une fonction. Cette fonction est très importante : elle permet « d'envoyer » les informations récoltées vers le fichier de template. C'est par ce moyen que nous allons prochainement faire passer les informations des news dans le fichier news.html.
<?php
require("tpl/smarty.class.php");
$tpl = new Smarty();
$tpl->assign("ma_variable","Je suis une variable");
$tpl->assign(array(
"une_variable" => "Je suis une variable",
"une_autre_variable" => "Je suis une belle variable"
// ...
));
$tpl->display("index.html");
?>
Passons maintenant à index.html. Smarty utilise dans les templates des délimitations, les accolades {}, autour d'une variable, d'une condition, etc. Pour afficher les variables « envoyées » par le fichier PHP, il suffit alors d'écrire le nom de la variable et de la délimiter par des accolades, ce qui donne par exemple :
Pour aller encore plus loin avec les variables, sachez qu'il est possible d'utiliser des modificateurs qui permettent de modifier une variable. Il en existe une grande quantité et il est même possible d'en créer (c'est ce que nous allons apprendre à faire dans la partie « Mode avancé » de ce tutoriel). Ces modificateurs permettent d'éviter des manipulations compliquées dans la partie PHP. N'oubliez jamais que là où vous bloquez pour un affichage spécial d'une variable, Smarty a toujours un modificateur à vous proposer.
Prenons par exemple capitalize : du même nom que son homologue CSS, ce modificateur permet de mettre la première lettre de chaque mot en majuscule.
p, div{
text-transform: capitalize;
}
Pour mettre en place les modificateurs, rien de plus simple : il suffit de placer une barre verticale | (Alt Gr + 6) derrière le nom de la variable. Ensuite, il suffit de placer le nom du modificateur et s'il le faut un statut (un bool ou un nombre).
- {$une_variable|capitalize:true} <br />
Smarty possède également des modificateurs assez pratiques pour tronquer la variable, la mettre en minuscules, ajouter un texte à la fin et bien d'autres choses. Je vous propose un petit tableau dans lequel vous trouverez tous les modificateurs les plus utiles. Si cela ne fait pas votre bonheur, je vous conseille de vous diriger vers la documentation de Smarty. Les modificateurs peuvent bien sûr être utilisés autant de fois que vous le voulez sur une variable, il suffit juste de les ajouter comme s'il n'y avait rien devant.
Pour finir dans le monde des variables, je vais vous donner une dernière information qui va vous simplifier grandement la vie. Les variables Smarty sont l'équivalent des $_GET, $_POST et autres dans le code PHP. Pour les utiliser, il suffit d'écrire {$smarty suivi de la méthode (.get) et de l'élément que l'on veut afficher ou utiliser (.id}), comme ceci :
Les fonctions natives sont des fonctions utilisées dans le fichier de template. Elles sont par défaut à l'intérieur de Smarty et sont simples d'utilisation. À l'image des variables, elles sont délimitées par des accolades. Au niveau des noms, ce sont les mêmes qu'en PHP. Nous avons alors {if} {elseif} {foreach}.
Comme en PHP, la fonction {foreach} peut « redistribuer » la key et la value de l'array. Ce qui donne :
Nous avons à ce stade assez de connaissances pour réaliser un petit système de news à l'aide du moteur de template Smarty. Celui-là nous servira de fil conducteur pour cette sous-partie du tutoriel. Pour commencer, nous allons créer deux fichiers : news.php et news.html.
Du côté du PHP
Tout d'abord, nous nous occuperons de la partie PHP : créer une simple table SQL et quelques news dans notre base de données marquera le premier pas de cette belle épopée. :D Bon, rien de bien spécial, une table simple avec l'ID en auto-incrémentation, le titre, le contenu et la date de la news.
CREATE TABLE IF NOT EXISTS `news` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`titre` varchar(100) NOT NULL,
`contenu` text NOT NULL,
`date` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
;
Puis on ajoute des petites news pour remplir un peu cette table.
INSERT INTO `news` (`id`, `titre`, `contenu`, `date`) VALUES
(1, 'Ouverture', 'Voici la news d ouverture du site réalisée grâce à Smarty.', '2011-02-02 17:22:18'),
(2, 'Titre', 'Il est pas beau mon site ?', '2011-02-22 17:22:18'),
(3, 'Fermeture', 'Tout compte fait, il est nul mon site, Smarty est trop fort pour moi, je renonce.', '2011-02-28 17:23:00');
Bon, une bonne chose de faite. Maintenant, comme vous le savez déjà, nous allons nous connecter à la base de données en PDO. Si vous ne connaissez pas cette technique d'extraction des données d'une base, pensez à regarder du côté du tutoriel officiel sur le PHP et MySQL de M@teo21. Je vous laisse le soin de coder cette partie, sachez juste que dans cette sous-partie, l'indicateur pour la base de données sera $connexion. Occupons-nous maintenant de l'extraction des informations sur les news depuis la base de données grâce à une requête. Je pense que tout cela est très simple pour vous, sinon je me demande ce que vous faites ici. :-°
<?php
// Extraction des informations
$query = $connexion->prepare("SELECT * FROM news ORDER BY id DESC");
$query->execute();
$list_news = array();
$i = 0;
while($data = $query->fetch()){
$list_news[$i]['id'] = $data['id'];
$list_news[$i]['titre'] = $data['titre'];
$list_news[$i]['date'] = $data['date'];
$list_news[$i]['content'] = $data['contenu'];
$i++;
}
?>
Après le passage d'extraction des données, nous allons initialiser Smarty comme nous l'avons vu au-dessus, puis assigner la variable $list_news vers list_news pour permettre à Smarty de récupérer la variable du côté du fichier de template. Enfin, on charge la page news.html actuellement vide. Voici en gros ce que devrait contenir le fichier news.php que nous venons de réaliser : la connexion à la BDD, la mise en place de Smarty, l'extraction des informations, l'assignation de la variable et l'appel du fichier news.html.
<?php
// Extraction des informations
$query = $connexion->prepare("SELECT * FROM news ORDER BY id DESC");
$query->execute();
$list_news = array();
$i = 0;
while($data = $query->fetch()){
$list_news[$i]['id'] = $data['id'];
$list_news[$i]['titre'] = $data['titre'];
$list_news[$i]['date'] = $data['date'];
$list_news[$i]['content'] = $data['contenu'];
$i++;
}
// On lance Smarty
require("tpl/smarty.class.php");
$tpl = new Smarty();
$tpl->assign('list_news', $list_news);
$tpl->display("news.html");
?>
Du côté du template
Passons maintenant du côté de news.html, notre fichier de template qui va contenir tout ce qui est en rapport avec l'affichage de la news. Pour extraire les informations, nous allons utiliser un {foreach} dont l'utilisation a été apprise précédemment (à la fin de la dernière partie).
{foreach from=$list_news item=news}
{/foreach}
Puis, comme nous l'avons vu, on définit l'affichage des différentes variables : le titre en gras, le contenu et la date dans un format spécial comme jj/mm/aaaa. Ce qui donne le code suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1> Mon super système de news </h1>
{foreach from=$list_news item=news}
<strong>{$news.titre}</strong> écrit le {$news.date|date_format:"%d/%m/%Y"}<br />
{$news.content}<br /><br />
{/foreach}
</body>
</html>
Et voilà, nous avons réalisé un système de news fonctionnel.
Et après ?
Je vous invite à l'embellir. Voici quelques idées d'améliorations :
réaliser une partie qui regroupera la création, l'édition et la suppression d'une news ;
réaliser un affichage pour chaque news ;
réaliser un système d'inclusion avec un haut.html et un bas.html grâce à {include}, comme ceci :
{include file="haut.html"}
<h1> Mon super système de news </h1>
{foreach from=$list_news item=news}
<strong>{$news.titre}</strong> écrit le {$news.date|date_format:"%d/%m/%Y"}<br />
{$news.content}<br /><br />
{/foreach}
{include file="bas.html"}
Dans cette partie, je vous propose d'entrer un peu plus dans le monde merveilleux de Smarty. Nous allons voir comment réaliser des fonctions utilisateur (vous savez, celles qui sont entourées par des accolades dans le fichier de template) — qui, à la différence des fonctions natives vues plus haut, sont écrites par des utilisateurs comme vous et moi —, ou encore des modificateurs de variable.
Créer sa fonction utilisateur
Tout d'abord, je vous invite à regarder l'arborescence de votre projet. Dirigez-vous dans le dossier tpl puis dans le dossier plugins où se trouve la majorité des modificateurs de variable et des fonctions natives de Smarty. Si vous avez la curiosité d'observer comment elles sont écrites, vous remarquerez qu'elles ont le même modèle.
<?php
function smarty_function_nomdelafonction($params, &$smarty)
{
if (empty($params['nomdunparametre'])) {
$smarty->_trigger_fatal_error("[plugin] le paramètre 'nomdunparametre' est vide");
return;
}
/***/
}
?>
La création d'une telle fonction utilisateur est très facile ; on procède de la même manière que pour une fonction native, la seule différence étant qu'il est interdit de donner comme nom à la fonction utilisateur le nom d'une fonction native. Je vais donc prendre comme exemple quelque chose de très simple, qui se base sur le QCM, à l'image de l'exemple qu'en donne M@teo21 dans son tutoriel à propos des conditions.
De notre côté, la fonction utilisateur s'appellera note_qcm. Créez alors un fichier nommé function.note_qcm.php dans lequel vous écrirez ceci :
<?php
function smarty_function_note_qcm($params, &$smarty)
{
}
?>
Puisque notre fonction va contenir un paramètre, la note, il faut définir le paramètre qui passe par la variable $params ; si vous n'avez pas besoin de paramètre, cela ne sert à rien de le mettre. Il ne faut pas oublier aussi de vérifier si le paramètre n'est pas vide. Ce qui donne :
<?php
function smarty_function_note_qcm($params, &$smarty)
{
if (empty($params['note'])) {
$smarty->_trigger_fatal_error("[plugin] le paramètre 'note' est vide");
return;
}
}
?>
Nous allons nous baser sur ce code pour réaliser la fonction utilisateur.
Ce qui donne pour notre fonction utilisateur le code suivant :
<?php
function smarty_function_note_qcm($params, &$smarty){
if (empty($params['note'])) {
$smarty->_trigger_fatal_error("[plugin] le paramètre 'note' est vide");
return;
}
switch ($params['note']) // On indique sur quelle variable on travaille
{
case 0: // Dans le cas où $note vaut 0
return "Tu es vraiment un gros Zéro !";
break;
case 5: // Dans le cas où $note vaut 5
return "Tu es très mauvais.";
break;
case 7: // Dans le cas où $note vaut 7
return "Tu es mauvais.";
break;
case 10: // Etc.
return "Tu as pile poil la moyenne, c'est un peu juste...";
break;
case 12:
return "Tu es assez bon.";
break;
case 16:
return "Tu te débrouilles très bien !";
break;
case 20:
return "Excellent travail, c'est parfait !";
break;
default:
return "Désolé, je n'ai pas de message à afficher pour cette note.";
}
}
?>
Maintenant, pour utiliser cette fonction utilisateur, il suffit d'écrire ceci dans notre fichier :
{note_qcm note="10"}
Créer son propre modificateur de variable
Rien de bien compliqué, j'ose dire que c'est encore plus facile qu'une fonction utilisateur. :D Tout d'abord, il faut savoir qu'il n'y a qu'un seul paramètre et que celui-ci est la chaîne de caractères contenue dans la variable que vous voulez modifier. Vous connaissez sûrement la fonction htmlspecialchars qui permet de transcrire des caractères spéciaux en écriture HTML et d'éviter ainsi des problèmes de sécurité. Comme pour la fonction utilisateur, il faut utiliser un nom spécial pour les modificateurs de variable : « smarty_modifier_ » suivi du nom du modificateur. Et pour le fichier qui le contient : « modifier. » puis le nom du modificateur.
<?php
function smarty_modifier_htmlspecialchars($string) {
}
?>
Il suffit ensuite de retourner le contenu « htmlspecialcharsé » vers le fichier de template :
<?php
function smarty_modifier_htmlspecialchars($string) {
return htmlspecialchars($string);
}
?>
Voilà ! Bien sûr, il existe des modificateurs beaucoup plus compliqués qui vous simplifieront grandement la vie.
{foreach}
N'avez vous jamais voulu faire une liste de membre sans omettre les virgules et le « et » du dernier argument. Grâce à Smarty il est possible de configurer tout cela avec facilité. Tout d'abord il faut donner un nom à notre {foreach} grâce à l'attribut name. Pour notre listage de membre cela va donc donner ceci: {foreach from=$liste_membre item=$pseudo name=liste_membre}. Puis entre en jeu deux nouveaux arguments :
.first qui renvoie true si la valeur est la première de l'array.
.last qui a l'opposé de .first renvoie true si la valeur est la dernière de l'array.
Pour notre cas, grâce à ces deux arguments donnent :
{foreach from=$liste_membre item=$pseudo name=liste_membre}
{if !$smarty.foreach.liste_membre.first}{* Si le pseudo n'est pas le premier *}
{if !$smarty.foreach.reader.last}{* Si le pseudo n'est pas le dernier on met une virgule*}
,
{else}{* Si le pseudo est le dernier on met un « et »*}
et
{/if}
{/if}
{$pseudo}{* On finit par afficher le pseudo*}
{/foreach}
Cette méthode vous permet d'avoir un affichage de vos liste plus recherché.
L'héritage des templates
Recopier sa structure (x)HTML sur chaque page, vous connaissez ? Grâce à la nouvelle version de Smarty il est possible de réaliser un héritage de template. Ce qu'il vous faut, une page dite mère — qui elle contient la structure des pages de votre site (titre, menu ...) — et une page dite fille — qui contient le contenu de la page (news, texte ...). Tout d'abord votre page trame.html va contenir une structure tout simple (x)HTML avec un menu, un titre de page et une place pour le contenu.
<html>
<head>
<title>Titre par defaut</title>
</head>
<body>
<!-- Place pour le contenu exemple:«Cette page ne contient rien» -->
</body>
</html>
On va y mettre un fonction native de faire de placer le contenu de la page index.html dans notre fichier actuel. On utilise pour ceci la fonction {block name=titre} (fonction qui bien sûr se ferme à l'aide de {/block}). Il suffit juste de mettre le nom du block concerné et de mettre entre l'ouverture et la fermeture de cette fonction native le contenu par defaut.
<html>
<head>
<title>{block name=titre}Titre par defaut{/block}</title>
</head>
<body>
{block name=contenu}Cette page ne contient rien{/block}
</body>
</html>
Ainsi vous pouvez ajouter dans le fichier que sur lequel vous travaillez (nous ici index.html) les balises {block} avec le contenu que vous souhaitez afficher. Pour permettre l'import du fichier trame il suffit d'utiliser la fonction extends et de mettre pour le paramètre file le chemin qui mène au fichier de trame ce qui donne ici : {extends file="trame.html"}.
{extends file="trame.html"}
{block name=titre}Le titre de ma page{/block}
{block name=contenu}"Contenu" est un mot.{/block}
Vous avez sûrement entendu parler des systèmes de caches. Ils permettent de « soulager » le serveur en lui évitant l'utilisation de trop de requêtes. Faire un tel système pour votre site peut être extrêmement bénéfique.
Bien commencer
Le système de cache fonctionne ainsi. Si le fichier n'est pas en cache on le crée puis on affiche ce cache. Maintenant si notre fichier est en cache mais que ce cache est trop vieux, on le met à jour puis on l'affiche. Enfin si notre fichier a un cache mise à jour on l'affiche directement. Simple, non ?
La première chose à faire avec Smarty c'est d'activer la mise en cache grâce à une variable, $caching. La valeur par défaut du cache est de 3600 secondes soit une heure. Maintenant il faut détecter que le fichier soit en cache, sinon comment pouvons nous savoir si oui ou non nous devons faire des requêtes. Pour cela Smarty nous met à disposition la fonction is_cached() qui doit contenir le nom de fichier de template concerné. Tout ceci nous donne :
<?php
require("tpl/smarty.class.php");
$tpl = new Smarty()
$tpl->caching = 1;
if(!$tpl->isCached("index.html")) {
//Le fichier n'est pas en cache
/***REQUÊTE***/
}
$tpl->display("index.html");
?>
Il est possible de configurer la durée du cache grâce à la variable $cache_lifetime. La valeur indiquée doit être en seconde et la valeur de la variable caching doit être égale à 2.
<?php
$tpl = new Smarty()
$tpl->caching = 2;
$tpl->cache_lifetime = 600; //La durée du cache est de 10 minutes.
$tpl->display("index.html");
?>
Aller un peu plus loin
Faire un cache pour chaque id
Vous êtes souvent amenés à avoir pour une même page plusieurs résultats. Par exemple si vous souhaitez afficher une news vous utilisez un id pour symboliser cette news et donc l'afficher. Smarty vous permet de configurer chaque affichage pour éviter de remettre à jour le cache de chacune de vos news. Il faut donc mettre l'id de la news en second paramètre de la fonction display().
Ce paramètre peut être également utiliser pour la fonction is_cached() pour permettre de vérifier si le fichier de cache de cette news existe.
Empêcher la mise en cache d'une partie de la page
Certaines parties de votre cache ne peuvent pas être mise en cache. Par exemple, il y a un indicateur de temps sur votre page, le temps avance et ne peut pas être mis en cache. Ainsi grâce à la version Smarty 3, le système est plus simple. Il suffit maintenant de mettre le contenu de votre fichier de template à mettre en cache entre les balises {nocache}{/nocache}.
Ce tutoriel touche maintenant à sa fin ; j'espère que vous avez appris quelque chose d'utile. Smarty est un moteur de template très puissant et surtout très complet, j'espère donc qu'il vous aura plu. N'hésitez pas non plus à voir d'autres moteurs de template sûrement moins puissants que Smarty mais qui vous conviendront peut-être mieux.
Si vous avez des questions à me poser à propos du tutoriel, c'est par ici ; si vous avez besoin d'aide pour le débogage d'un code, je vous invite à poster sur le forum dédié au PHP.
