Cet article a pour but de vous faire découvrir Twig, un moteur de templates PHP. Nous verrons également comment l'installer ainsi que le configurer, sans pour autant devoir utiliser le framework Symfony.
Utiliser un moteur de templates permet de rendre votre code plus propre, puisqu'il permet de séparer le code PHP du code HTML. En effet, pour lister les articles de votre site, après avoir fait une requête SQL, vous parcourez l'ensemble de vos résultats, et vous affichez (ou générez) au fur et à mesure les liens, les images des articles, ...
En utilisant un moteur de templates, les parties de traitements des informations et l'affichage des résultats sont séparées : une fois que vous avez récupéré vos informations, vous envoyez des tableaux et/ou variables à Twig qui se chargera ensuite de la mise en page. Si un jour vous souhaitez changer l'affichage des articles, vous saurez directement où chercher.
Twig peut aussi vous aider à mieux sécuriser votre site internet, puisqu'il exécute par défaut htmlspecialchars sur chaque variable, vous aidant donc à vous protéger contre les failles XSS.
Vous pourrez télécharger Twig sur le site officiel : http://twig.sensiolabs.org. Seul le dossier lib est important.
Voici le code de base à ajouter en haut de chaque fichier où vous comptez utiliser Twig (ou faites une include) :
1 require_once("twig/lib/Twig/Autoloader.php"); 2 Twig_Autoloader::register(); 3 $loader = new Twig_Loader_Filesystem("templates"); 4 $twig = new Twig_Environment($loader, array( 5 "cache" => false 6 ));
Ce code inclut la librairie de Twig, et permet de l'initialiser (templates étant le dossier où se trouveront vos templates).
J'ai mis ici l'option cache à false (c'est mieux pour la phase de développement) ; si vous souhaitez l'activer ultérieurement, vous devrez alors lui transmettre le chemin vers un dossier où il stockera les caches de vos templates (pensez aux droits d'écriture).
D'autres options sont possibles (désactiver l'échappement automatique avec autoescape, ...) : http://twig.sensiolabs.org/doc/api.html#environment-options.
Créez un nouveau fichier templates/demo.html :
1 Démonstration de l'utilisation de {{ moteur_templates }}.
Maintenant, dans votre fichier PHP, il vous suffira d'ajouter sous l'initialisation de Twig :
1 echo $twig->render("demo.html", array( 2 "moteur_templates" => "Twig" 3 ));
Twig va alors remplacer votre variable moteur_templates, et nous aurons donc :
1 Démonstration de l'utilisation de Twig.
Twig inclut par défaut quelques filtres, vous permettant de modifier un peu l'affichage de vos valeurs :
1 {{ ma_variable|le_filtre }} 2 3 Ou 4 5 {% filter le_filtre %} 6 Mon texte ... {{ ma_variable }} 7 {% endfilter %}
Voici quelques filtres (vous pourrez trouver la liste complète sur http://twig.sensiolabs.org/doc/filters/index.html) :
capitalize : Met la première lettre de la chaîne de caractères en majuscule.date : Permet de modifier le format de la date.length : Permet de récupérer la nombre de caractères de la chaîne.upper : Met la chaîne de caractères en majuscule.lower : Met la chaîne de caractères en minuscule.nl2br : Remplace les retours à la ligne par des <br>.trim : Supprime les espaces en début et fin de ligne. Il peut aussi prendre un paramètre qui permettra de supprimer une autre lettre que l'espace.qwertyTwig est un peu plus puissant que ça. Il sait faire bien d'autres choses que de n'afficher de simples variables.
1 {% if nb_articles >= 2 %} 2 Il y a {{ nb_articles }} articles sur le blog. 3 {% elseif nb_articles == 1 %} 4 Il n'y a pour l'instant qu'un seul article sur le blog. 5 {% else %} 6 Il n'y a encore aucun article sur ce blog. Reviens plus tard. 7 {% endif %} 8 9 {% if pseudo is defined %} 10 Vous êtes connecté. 11 {% endif %} 12 13 {% if pseudo is defined and pseudo is not empty%} 14 Bonjour {{ pseudo }}. 15 {% endif %}
Maintenant, ce qui pourrait être utile, ce serait de répéter du code plusieurs fois de suite. Si nous souhaitons lister les articles d'un blog par exemple :
Côté PHP :
1 echo $twig->render("articles.html", array( 2 "articles" => array( 3 array( 4 "titre" => "Titre 1", 5 "url" => "titre-1", 6 "img" => "http://abc.fr/image1.jpg", 7 "tags" => array("Tag 1", "Tag 2", "Tag 3") 8 ), 9 array( 10 "titre" => "Titre 2", 11 "url" => "titre-2", 12 "img" => "http://abc.fr/image2.jpg", 13 "tags" => array("Tag 4", "Tag 5") 14 ), 15 array( 16 "titre" => "Titre 3", 17 "url" => "titre-3", 18 "img" => "http://abc.fr/image3.jpg", 19 "tags" => array("Tag 6", "Tag 7", "Tag 8") 20 ) 21 ) 22 ));
Et côté TWIG, on fait la mise en page, à l'aide de boucle for :
1 {% if articles|length > 0 %} 2 {% for each in articles %} 3 <article class="article"> 4 <div class="icone"> 5 <img src="{{ each.img }}" alt="{{ each.img }}"/> 6 </div> 7 <div class="content"> 8 <header> 9 <h2><a href="{{ each.url }}">{{ each.titre }}</a></h2> 10 </header> 11 <p> 12 {% for tag in each.tags %} 13 <strong>{{ tag }}</strong> 14 {% endfor %} 15 </p> 16 </div> 17 </article> 18 {% endfor %} 19 {% else %} 20 <b>Aucun article pour l'instant.</b> 21 {% endif %}
Je ne pense pas qu'il y ait besoin d'expliquer ce code, c'est compréhensible à sa simple lecture.
Pour accéder à une ligne d'un tableau, il existe deux méthodes :
1 {{ array.line }} 2 {{ array["line"] }}
Il est bien entendu possible d'inclure d'autres templates à l'intérieur (si vous ne voulez pas copier-coller votre menu sur chaque page par exemple) :
1 {% include "menu.html" %}
Les variables seront bien entendu aussi remplacées.
Cependant, je ne trouve pas cette méthode très pratique, puisque sur chacune de vos pages, vous allez devoir inclure votre header, votre menu, votre footer, ... beaucoup d'inclusions.
Il existe avec Twig une autre méthode, les extends. Ils consistent non pas à inclure d'autres templates dans celui actuel, mais à envoyer notre template au milieu d'un autre.
Nous créons alors un fichier base.html où se trouvera notre header, notre menu, ... et à l'emplacement du contenu dynamique de la page, nous mettons :
1 {% block contenu %}Erreur : Aucun contenu{% endblock %}
Et en haut de notre fichier template, au lieu d'inclure d'autres fichiers, nous précisons que nous voulons inclure du contenu de ce fichier :
1 {% extends "base.html" %}
Pour ajouter du contenu dans le block contenu, il faut ensuite englober le html avec :
1 {% block contenu %} 2 3 <b>Le HTML ...</b> 4 5 {% endblock %}
Pour cet exemple, nous n'avons remplacé que le block contenu, mais il est tout à fait possible de remplacer plus d'un block pour une extends.
Si aucun contenu n'a été définie pour un block, il prendra la valeur par défaut, le contenu que l'on lui a fourni au départ : Erreur : Aucun contenu.
Je vous ai présenté les fonctionnalités de Twig que j'utilise régulièrement, mais il en existe plein d'autres (les macros, embed, ...).
Vous trouverez toutes ces informations sur la documentation officielle : http://twig.sensiolabs.org/documentation.