Twig
Présentation de la bibliothèque
Twig est un moteur de templates pour PHP, qui permet de séparer la logique de votre code de sa présentation. C'est une pratique courante en développement Web pour rendre le code plus lisible et maintenable.
Dans une architecture MVC (Modèle-Vue-Contrôleur), Twig serait utilisé pour la partie "Vue". Il permet d'afficher des variables, de faire des boucles, des conditions, et même d'hériter d'autres templates.
Pour installer la bibliothèque Twig, nous ferons appel à Composer (que nous avons étudié dans le tutoriel sur Composer).
Voici la commande pour installer Twig avec Composer :
composer require twig/twig
Ensuite, vous pouvez créer une instance de Twig et afficher un template :
$loader = new \Twig\Loader\FilesystemLoader('/path/to/templates');
$twig = new \Twig\Environment($loader);
echo $twig->render('index.html', ['name' => 'Miss Fortune']);
Dans cet exemple, index.html
est un fichier de template Twig qui pourrait ressembler à ceci :
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1>Welcome, {{ name }}!</h1>
</body>
</html>
Il existe deux types de délimiteurs : {{ ... }}
et {% ... %}
:
- le délimiteur
{{ ... }}
affiche le résultat d'une variable ou d'une expression. - le délimiteur
{% ... %}
exécute des instructions telles que les boucles "for"
Variables
Le contrôleur transmet des variables au template.
Avec Twig, il suffit d'utiliser un point (.) pour accéder aux attributs d'une variable (propriétés ou méthodes d'un objet PHP, ou éléments d'un tableau PHP) :
{{ user.name }}
Les filtres
Les variables peuvent être modifiées par des filtres.
Les filtres sont séparés de la variable par un symbole de pipe (|
).
L'exemple suivant supprime toutes les balises HTML du nom et met le texte en majuscules :
{{ name|striptags|title }}
Consultez la documentation sur les filtres Twig pour en savoir plus : https://twig.symfony.com/doc/filters/index.html
Structure de contrôle
Une structure de contrôle contrôlent le flux d'un programme.
Exemples de structure de contrôle :
- les conditions (c'est-à-dire
if
/elseif
/else
), - les boucles
for
, - ainsi que des éléments tels que les blocs.
Avec Twig, les structures de contrôle apparaissent à l'intérieur des blocs
{% ... %}
.
Par exemple, pour afficher une liste d'utilisateurs fournie dans une variable appelée utilisateurs,
utilisez la balise for
:
<h1>Members</h1>
<ul>
{% for user in users %}
<li>{{ user.username }}</li>
{% endfor %}
</ul>
La balise if
peut être utilisée pour tester une expression :
{% if users|length > 0 %}
<ul>
{% for user in users %}
<li>{{ user.username|e }}</li>
{% endfor %}
</ul>
{% endif %}
Consultez la documentation sur les balises Twig (des structures de contrôle) pour en savoir plus : https://twig.symfony.com/doc/tags/index.html
Exemple pratique
Prenons l'exemple d'un jeu de combat.
Vous avez un tableau de personnages avec leurs noms et points de vie.
Vous voulez les afficher dans une page HTML avec Twig.
$characters = [
['name' => 'Mario', 'hp' => 100],
['name' => 'Luigi', 'hp' => 120],
['name' => 'Peach', 'hp' => 90],
];
echo $twig->render('characters.html.twig', ['characters' => $characters]);
Et dans characters.html.twig
:
<!DOCTYPE html>
<html>
<head>
<title>Characters</title>
</head>
<body>
<ul>
{% for character in characters %}
<li>{{ character.name }}: {{ character.hp }} HP</li>
{% endfor %}
</ul>
</body>
</html>