Twig : introduction au système de template de Symfony2

Logo TwigTwig est un système de template pour PHP créé par Fabien Potencier.
Il est par défaut intégré au Framework MVC Symfony2, mais il est possible de l’utiliser à part, avec un autre framework, ou avec une simple page PHP.

Vous pouvez l’installer avec Composer ou le télécharger directement depuis le repository sur GitHub.

On va faire ici un exemple simple d’utilisation avec un fichier PHP vide.

Si vous n’utilisez pas Composer, déposer la librairie où vous voulez, et chargez la comme ceci :

require_once '/usr/share/php/Twig/Autoloader.php';
Twig_Autoloader::register();

Les classes sont maintenant chargées et utilisables, on va commencer par préciser un dossier de templates dans lequel seront stockés nos fichiers HTML, et un tableau d’options indiquant de ne pas échapper automatiquement les variables à l’affichage.

$loader = new Twig_Loader_Filesystem('/var/www/lab/twig/templates');
$twig = new Twig_Environment(
    $loader,
    array(
        'autoescape' => false
    )
);

Voici un exemple des quelques fonctionnalités de Twig illustrées avec ces 3 fichiers :

index.php

require_once '/usr/share/php/Twig/Autoloader.php';
Twig_Autoloader::register();

$loader = new Twig_Loader_Filesystem('/var/www/lab/twig/templates');
$twig = new Twig_Environment(
    $loader,
    array(
        'autoescape' => false
    )
);

$users = array(
    array(
        'name' => 'Statler',
        'age'  => 65
    ),
    array(
        'name' => 'Waldorf',
        'age'  => 68
    )
);

$comment = new stdClass();
$comment->content = 'Lorem ipsum';
$comment->date = '25/02/2014';

$template = $twig->loadTemplate('layout.html');
$data = array(
    'message' => 'Hello <strong>World</strong>!',
    'users'   => $users,
    'version' => 3.2,
    'comment' => $comment
);

echo $template->render($data);

On envoie au template layout.html différent types de variables et on affiche le rendu.

templates/layout.html

<h1>Home</h1>
Message : {{ message }}
Message : {{ message|e }}

{% for user in users %}
<div>
    <span class="name">{{ user.name }}</span>
    <span class="age">{{ user.age }}</span>
</div>
{% else %}
<div>No result</div>
{% endfor %}

<h2>Comment</h2>
{{ comment.content }}

{{ include('footer.html') }}

On affiche 2 fois la variable message, la deuxième est échappée très simplement avec la syntaxe |e et n’affichera donc pas « World » en gras.

Ensuite on boucle sur les utilisateurs pour afficher le nom et l’age de l’utilisateur.
Le else du for sert dans le cas d’un tableau vide, ce qui est très utile et évite d’englober le for d’un if/else qui teste le total du tableau.

Puis on affiche le contenu du commentaire. Notez ici que la syntaxe est la même avec un tableau ou un objet, on utilise le point pour accéder à une propriété ou à un index.

Pour finir on inclue le fichier footer.html

templates/footer.html

<footer>MySite v.{{ version }}</footer>

Ici on affiche simplement la version du site, le fichier footer.html hérite bien des variables envoyées au template layout.html.

Plus d’informations sur le site officiel.

Share Button

Laisser un commentaire.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.