Cours : Twig

Installer Twig

Tapez cette commande dans le terminal puis appuyez sur Entrée :

composer require "twig/twig"

Charger Twig dans un fichier

require_once __DIR__ . '/vendor/autoload.php';

$loader = new \Twig\Loader\FilesystemLoader('templates');
        $twig = new \Twig\Environment($loader,[
            'debug' => true,
]);

echo $twig->render("mon-template.html.twig", []);

vous permettra d'afficher un template Twig, cela remplacerait donc un require "mon-template.phtml".

echo $twig->render("mon-template.html.twig", []);

Dans le tableau qui est le second paramètre de render, vous devez passer un tableau associatif qui contient toutes les données que vous voulez faire afficher au template.

Par exemple si je veux lui faire afficher le titre de la page et une liste d'animaux :

$data = [
    "pageTitle" = "Le titre de la page",
    "animals" = ["Chien", "Chat", "Goëland", "Chèvre"]
];

echo $twig->render("mon-template.html.twig", $data);

Afficher une variable avec Twig

Twig utilise une syntaxe que vous vous connaissez déjà : celle des {{ }}.

Habituellement quand vous voulez afficher une variable, vous faites :

<?php 
    $test = "Test";
?>

<h1><?php echo $test?></h1>

En Twig <?php echo $test?> est remplacé par {{ }}:

Les conditions dans Twig

Une condition dans un fichier .phtml:

<?php if($name)
{
?>
    <h1>Hello <?= $name; ?></h1>
<?php
}
else
{
    ?>
    <h1>Hello you</h1>
    <?php
}

en Twig :

{% if name %}
   <h1>Hello {{ name }}</h1>
{% else %}
   <h1>Hello you</h1>
{% endif %}

Les boucles dans Twig

Pour faire une boucle habituellement vous faites :

<?php foreach($users as $user)
{
    ?>
    <li><?= $user; ?></li>
    <?php
}

en Twig :

{% for user in users %}
        <li>{{ user }}</li>
{% endfor %}

L'héritage

Dans Twig les templates peuvent hériter les uns des autres. Imaginons que vous avez un template layout.html.twig:

et un template home.html.twig:

home hérite de layout et complète son bloc title mais remplace son block content.

Le HTML généré ressemblera donc à :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title> Ma page | Le nom de mon site </title>
    </head>
    <body>
        <h1>Accueil</h1>
    </body>
</html>

Session BRE04 Help