Twig est un moteur de template très utilisé dans le monde php notamment par le framework symfony

Mise en place du projet

utiliser composer init et composer dump-autoload comme indiqué dans le chapitre sur l'autoload

Arborescence

Pour des raisons de sécurité, il est préférable de ne placer que le fichier index dans la partie publique.

Le reste, les templates, le contrôleur (routing), les applications tierces se trouvent en dehors de la zone directement accessible par le navigateur.

twig

 

Installation de twig

composer require "twig/twig:^3.0"

Lancer le serveur

php -S localhost:8000 -t public

Appel des fichiers twig

Une première façon d'opérer est d'appeler les fichiers twig de la manière suivante :

<?php
require '../vendor/autoload.php';
//on indique ici où se trouvent les fichiers twig
$loader = new \Twig\Loader\FilesystemLoader(__DIR__ . '/../templates/');

// création de l'objet $twig
$twig = new \Twig\Environment($loader, [
    //'cache' => __DIR__ . '/../tmp',
]);

// Appel des templates twig avec un paramètre name
echo $twig->render('header.twig', ['name' => 'a']);
echo $twig->render('main.twig', ['name' => 'b']);
echo $twig->render('footer.twig', ['name' => 'c']);

Variables et boucles

Syntaxe pour récupérer une variable dans un fichier twig :

{{ name }}

Syntaxe pour parcourir une variable de type tableau

{% for card in cards %}
      <section>
        <h2><a href="/cards/{{ card.c_id }}">{{ card.c_question }}</a></h2>
        <p>{{ card.c_answer }}</p>
      </section>
{% endfor %}

Exemple simple de fichier twig

header.twig

<!DOCTYPE html>
<html>
    <head>
        <title>{{ name }}</title>
    </head>

main.twig

<body>
<main>
main {{ name }}
</main>

footer.twig

 <footer>
  footer {{ name }}
  </footer>
</body>
</html>

Héritage de template

Le mécanisme d'héritage de twig permet de créer un template squelette qui comprend tous les éléments communs et qui définit les "blocks" que les templates enfants pourront surcharger (overriding). Exemple :

base.twig

<!DOCTYPE html>
<html>
    <head>
        {% block head %}
            <link rel="stylesheet" href="style.css" />
            <title>{% block title %}{% endblock %} - Memo</title>
        {% endblock %}
    </head>
    <body>
        <div id="content">{% block content %}{% endblock %}</div>
        <div id="footer">
            {% block footer %}
                &copy; Copyright 2020 by <a href="https://coopernet.fr/">coopernet</a>.
            {% endblock %}
        </div>
    </body>
</html>

home.twig
Repérez bien le tag "extends" qui permet la réécriture du fichier base.twig
Notez qu'une fois que l'on "étend" un template twig, il n'est pas possible décrire du code en dehors de "blocks" prédéfinis.

{% extends "base.twig" %}

{% block title %}{{ title }}{% endblock %}
{% block content %}
  <h2>Bienvenue sur Memo, le système de répétition espacée</h2>
{% endblock %}