Les templates Twig : afficher dynamiquement vos données

Introduction à Twig : le moteur de templates de Symfony

Après que votre contrôleur a traité une requête et préparé les données nécessaires, il est temps de présenter ces informations à l'utilisateur. Dans Symfony, cette tâche est généralement confiée à Twig, un moteur de templates puissant, flexible et sécurisé, créé par Fabien Potencier, le fondateur de Symfony. Twig permet de séparer clairement la logique de présentation (le HTML, la mise en forme) de la logique applicative (le code PHP de vos contrôleurs et services).

L'utilisation d'un moteur de templates comme Twig offre de nombreux avantages :

• Clarté et lisibilité : Les templates Twig ont une syntaxe concise et expressive, conçue pour être facile à lire et à écrire, même pour les intégrateurs web qui ne sont pas des développeurs PHP.
• Sécurité : Twig intègre par défaut un système d'échappement automatique pour prévenir les attaques XSS (Cross-Site Scripting), une préoccupation majeure en développement web.
• Réutilisabilité : Grâce à des mécanismes comme l'héritage de templates, les macros et les inclusions, vous pouvez créer des composants d'interface utilisateur réutilisables et maintenir une structure cohérente à travers votre site.
• Performance : Les templates Twig sont compilés en code PHP optimisé lors de leur première utilisation, ce qui les rend très performants en production.

Ce chapitre vous introduira aux concepts fondamentaux de Twig, de sa syntaxe de base à des fonctionnalités plus avancées comme l'héritage, vous permettant de créer des vues dynamiques et bien structurées pour vos applications Symfony.

Principes de base et syntaxe de Twig

Twig utilise une syntaxe spécifique, distincte du PHP, qui est conçue pour être simple et non intrusive dans le HTML. Il existe principalement deux types de délimiteurs dans Twig :

• {{ ... }} : Utilisé pour afficher le contenu d'une variable ou le résultat d'une expression. C'est ce qu'on appelle une "expression d'affichage". Par exemple, {{ nom_utilisateur }} affichera la valeur de la variable nom_utilisateur.
• {% ... %} : Utilisé pour exécuter des instructions ou des structures de contrôle, comme les boucles for, les conditions if, la définition de blocs (block), l'héritage (extends), etc. C'est ce qu'on appelle une "instruction de tag". Par exemple, {% if utilisateur.estConnecte %} ... {% endif %}.

Il existe également un troisième délimiteur, moins fréquent mais utile :

• {# ... #} : Utilisé pour ajouter des commentaires dans vos templates Twig. Ces commentaires ne sont pas inclus dans le HTML généré. Exemple : {# Ceci est un commentaire Twig #}.

Les fichiers de template Twig ont généralement l'extension .html.twig (par exemple, mon_template.html.twig) pour indiquer qu'ils contiennent principalement du HTML mais sont traités par Twig. Ils sont stockés par défaut dans le répertoire templates/ de votre projet Symfony.

La force de Twig réside dans sa capacité à manipuler les variables passées par le contrôleur, à appliquer des filtres pour transformer leur affichage, à appeler des fonctions pour des opérations plus complexes, et à utiliser des structures logiques pour contrôler le flux de la présentation. Nous allons explorer ces aspects dans les sections suivantes.

Variables, filtres et fonctions : dynamiser vos templates

Les variables sont au coeur de la dynamisation des templates Twig. Elles sont passées depuis le contrôleur (via la méthode render()) et sont accessibles dans le template en utilisant leur nom. Par exemple, si votre contrôleur passe un tableau ['produit' => $objetProduit], vous pouvez accéder aux propriétés de $objetProduit dans Twig avec la notation "point" : {{ produit.nom }}, {{ produit.prix }}. Twig essaiera intelligemment d'appeler un getter (getNom()), d'accéder à une propriété publique (nom), ou même à une clé de tableau (['nom']).

Les filtres permettent de modifier les variables avant leur affichage. Ils s'appliquent avec le symbole pipe (|). Twig propose de nombreux filtres intégrés, et vous pouvez créer les vôtres. Exemples courants :

• {{ nom_utilisateur | upper }} : Affiche le nom d'utilisateur en majuscules.
• {{ description | slice(0, 100) ~ '...' }} : Affiche les 100 premiers caractères de la description, suivis de "...".
• {{ date_creation | date('d/m/Y H:i') }} : Formate un objet DateTime.
• {{ prix | number_format(2, ',', ' ') }} € : Formate un nombre comme un prix.
• {{ mon_html_brut | raw }} : Affiche du HTML sans l'échapper (à utiliser avec une extrême prudence et uniquement sur du contenu de confiance !). Par défaut, Twig échappe tout pour prévenir les attaques XSS.

Les fonctions sont similaires aux fonctions en PHP et s'appellent avec leur nom suivi de parenthèses. Elles peuvent prendre des arguments et sont utiles pour des opérations plus complexes ou pour générer du contenu. Exemples :

• {{ path('nom_de_la_route', { 'parametre': valeur }) }} : Génère une URL pour une route Symfony (très utilisé pour les liens).
• {{ random(['pomme', 'banane', 'orange']) }} : Affiche un élément aléatoire du tableau.
• {{ include('fragments/_menu.html.twig') }} : Inclut le contenu d'un autre template Twig.

La combinaison de variables, filtres et fonctions offre une grande flexibilité pour manipuler et afficher vos données exactement comme vous le souhaitez, tout en gardant vos templates propres et lisibles.

Structures de contrôle : logique dans vos templates

Twig fournit des structures de contrôle similaires à celles que l'on trouve dans les langages de programmation, vous permettant d'ajouter de la logique à vos templates. Les plus courantes sont les conditions if et les boucles for.

La structure if permet d'afficher du contenu conditionnellement :

{% if utilisateur.estConnecte %}
    <p>Bonjour {{ utilisateur.nom }} !</p>
    <a href="{{ path('app_logout') }}">Déconnexion</a>
{% elseif utilisateur.estVisiteur %}
    <p>Bienvenue Visiteur !</p>
    <a href="{{ path('app_login') }}">Connexion</a>
{% else %}
    <p>Statut inconnu.</p>
{% endif %}

Vous pouvez utiliser des opérateurs logiques comme and, or, not et des opérateurs de comparaison comme ==, !=, <, >, <=, >=. Il existe aussi des tests, par exemple pour vérifier si une variable est définie (is defined) ou nulle (is null) : {% if produit is defined and produit is not null %} ... {% endif %}.

La boucle for permet d'itérer sur les éléments d'un tableau ou d'un objet itérable :

{% if articles is not empty %}
    <ul>
        {% for article in articles %}
            <li>
                <h3><a href="{{ path('app_article_show', { 'slug': article.slug }) }}">{{ article.titre }}</a></h3>
                <p>Publié le {{ article.datePublication | date('d/m/Y') }}</p>
            </li>
        {% else %}
            <!-- Ce bloc est exécuté si 'articles' est vide ou n'existe pas -->
            <li>Aucun article à afficher pour le moment.</li>
        {% endfor %}
    </ul>
{% else %}
    <p>La variable 'articles' n'est pas disponible ou est vide.</p>
{% endif %}

A l'intérieur d'une boucle for, vous avez accès à des variables spéciales comme loop.index (index de l'itération, commence à 1), loop.index0 (commence à 0), loop.first (booléen, vrai pour la première itération), loop.last (booléen, vrai pour la dernière itération), etc. Ces variables sont très utiles pour ajouter des classes CSS spécifiques ou un comportement différent pour certains éléments de la boucle.

D'autres structures existent, comme set pour définir des variables directement dans le template ({% set ma_variable = 'valeur' %}), ou embed pour combiner l'inclusion et la surcharge de blocs, mais if et for sont celles que vous utiliserez le plus fréquemment.