Mettre en place Twig

Dans ce tutoriel, nous allons partir d'une page classique, faite en PHP et mélangeant du HTML dedans. Puis nous allons voir comment faire pour la découper, afin de disposer d'un côté de l'HTML et de l'autre le PHP. La mise en place de Twig permettra cette séparation.

Twig c'est quoi ?

Twig est un moteur de template, c'est à dire qu'il permet d'utiliser des documents HTML avec une syntaxe particulière qui y est ajoutée. Cette syntaxe, comprise par Twig, permet d'ajouter des fonctionnalités, par exemple l'hérité d'un autre document HTML, faire une boucle, conditionner une partie du document etc. Les moteurs de template comme Twig, permettent donc de réaliser une séparation réelle entre le code et le document HTML. On s'y retrouve plus facilement, le designer peut travailler de son côté, le développeur du sien et la liaison est faite par le moteur et les paramètres qui lui sont donnés par le développeur.

Installation de Twig

Pour installer twig c'est simple, vous devez commencer par créer un nouveau projet composer, puis dans la console, vous tapez :

composer require twig/twig

Avec cette ligne, composer comprends qu'il doit installer un package qui s'appel twig provenant de l'utilisateur twig.

La syntaxe

Avant de poursuivre, il est important de connaître la syntaxe HTML nécessaire au fonctionnement de Twig.

Les variables

Les variables sont annotées entre double accolades.

{{ array.element.value }}

Dans cet exemple, nous indiquons au moteur que nous voulons afficher une variable array.element.value. Cette variable ici est découpée grâce aux points qui permettent la séparation. Nous sommes en présence d'un tableau nommé array qui contient un autre tableau appelé element, qui contient une variable du nom de value contenant une valeur.

Twig à l'avantage de savoir travailler avec presque tous les types de variables possible, y compris les objets. La séparation se fait avec un point, qui lui permet de savoir qu'on est sur un tableau ou un objet ou tout autre élément itérable. Nous aurions très bien pu être en présence d'un objet, contenant une propriété publique qui est un tableau, contenant la clé value, ou même un objet contenant en propriété publique, un autre objet, contenant lui même une propriété.

Les structures

Les structures de contrôles sont définit entre une accolade et un symbole pourcentage.

{%  %}

Plusieurs structures existent comme les if pour tester une égalité par exemple. On a aussi les boucles for et pleins d'autres structures utilisable.

Les blocs

Le moteur repose sur un système de blocs, qui permet en particulier, de modifier un bloc suite à un héritage. Dans un système avancé, on peut aussi afficher ou non un bloc suivant une information, mais nous le verrons avec les extensions Twig.

{% block test %}
    Voici un texte
{% endblock %}

Ici, on définit un bloc ayant pour nom test, avec son contenu.

Mise en place

En premier lieu, il faut comme avec tout projet utilisant composer, ajouter cette ligne :

require_once 'vendor/autoload.php';

Cela permet de charger composer et son système d'autoloading.

Ensuite, nous devons créer une nouvelle instance du lecteur de template de twig :

$loader = new Twig\Loader\FilesystemLoader('templates');

On indique à Twig, l'endroit où se situe les templates (documents HTML). Ici c'est le répertoire templates. Puis on peut créer l'instance de l'environnement de Twig :

$twig = new Twig\Environment($loader, ['cache' => false,]);

Cette ligne, crée une instance de l'environnement en lui indiquant où se trouve les templates et une liste de paramètres. Le paramètre cache doit obligatoirement être indiqué, mais mis à false, cela indique qu'on ne souhaite pas en bénéficier.

Rendu du template

Le rendu de template, c'est à dire son interprétation et le renvoi par le moteur, se fait au travers d'une ligne très simple :

echo $twig->render('htmlfile.html', []);

Ici, on indique à Twig, qu'on veut qu'il aille chercher le fichier htmlfile.html dans le répertoire indiquée plus haut et qu'on lui fournit un tableau de paramètres. La liste des paramètres, est un tableau avec en clé le nom qui sera utilisé dans le template et en valeur, la variable ou la valeur en question. On peut fournir des objets comme valeur, ce qui permet d'éviter de les traiter pour afficher ensuite une information de ces derniers.

Si vous faites de l'héritage de template, ce qui est assez courant pour éviter de remettre les en-têtes HTML par exemple, le moteur sera capable de s'en occuper tout seul du moment que le template précise son héritage.

Conclusion

Nous avons vu aujourd'hui, comment on peut utiliser Twig très simplement. La documentation officielle se trouve ici. Vous pouvez y retrouver toutes les informations pour l'usage du moteur.