Aller au contenu principal

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.

astuce

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.

remarque

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|e }}</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', ['characters' => $characters]);

Et dans characters.html :

<!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>

Test de mémorisation/compréhension​


Qu'est-ce que Twig ?


Dans une architecture MVC, où utiliseriez-vous Twig ?


Comment affichez-vous une variable dans un template Twig ?


Comment faites-vous une boucle dans Twig ?


Comment installez-vous Twig ?


TP pour réfléchir et résoudre des problèmes​

Dans ce TP, vous allez créer une page de combat entre deux personnages.

Vous aurez besoin de deux templates Twig :

  • combat.html pour afficher le combat,
  • et result.html pour afficher le résultat du combat.

Chaque personnage a un nom, des points de vie (hp) et des points d'attaque (attack). Un personnage attaque un autre en lui enlevant ses points d'attaque de ses points de vie.

Le combat se déroule en plusieurs tours jusqu'à ce qu'un personnage n'ait plus de points de vie.

À chaque tour, un personnage attaque l'autre.

Voici les étapes détaillées pour réaliser le TP :

  1. Initialisation des personnages :

Vous créez 2 personnages, Mario et Lara.

remarque

Pour simplifier le TP, nous n'allons pas créer de classes. Il s'agit uniquement de comprendre le fonctionnement de Twig.

Plus tard nous utiliserons Twig avec des classes PHP.

Chaque personnage a un nom, des points de vie (hp) et des points d'attaque (attack).

$mario = ['name' => 'Mario', 'hp' => 100, 'attack' => 20];
$lara = ['name' => 'Lara', 'hp' => 150, 'attack' => 15];
  1. Déroulement du combat :

  • Mario et Lara se battent en plusieurs tours.

  • À chaque tour, Mario attaque Lara, puis Lara attaque Mario.

  • Le combat continue jusqu'à ce qu'un des personnages n'ait plus de points de vie.

    $combatLog = [];
    while ($mario['hp'] > 0 && $lara['hp'] > 0) {
        // Mario attaque Lara
        $lara['hp'] -= $mario['attack'];
        $combatLog[] = "Mario attaque Lara. Il reste {$lara['hp']} HP à Lara.";

        // Si Lara est encore en vie, il attaque Mario
        if ($lara['hp'] > 0) {
            $mario['hp'] -= $lara['attack'];
            $combatLog[] = "Lara attaque Mario. Il reste {$mario['hp']} HP à Mario.";
        }
    }
  1. Qui a gagné ? :

À la fin du combat, le personnage qui a encore des points de vie est le vainqueur.

$vainqueur = $mario['hp'] > 0 ? 'Mario' : 'Lara';
  1. Affichage du combat :

Vous utilisez Twig pour afficher le déroulement du combat dans une page Web. Pour cela, vous créez un template combat.html.

echo $twig->render('combat.html', ['combatLog' => $combatLog]);
  1. Affichage du résultat :

De la même façon, vous utilisez Twig pour afficher le vainqueur du combat dans une autre page Web.

Vous créez un template result.html.

echo $twig->render('result.html', ['vainqueur' => $vainqueur]);
  1. Création des templates Twig :

Dans vos templates Twig, vous utilisez la syntaxe de Twig pour afficher les variables et faire des boucles.

Par exemple, dans combat.html, vous pouvez faire une boucle sur combatLog pour afficher le déroulement du combat :

<ul>
    {% for log in combatLog %}
        <li>{{ log }}</li>
    {% endfor %}
</ul>

Et dans result.html, vous pouvez afficher le vainqueur du combat :

<h1>Le vainqueur est {{ vainqueur }} !</h1>

C'est tout ! Si vous suivez ces étapes, vous devriez pouvoir créer une simulation de combat entre 2 personnages en PHP avec Twig.

Une solution