BRE03

Utiliser Twig dans un projet PHP

Installer Twig

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

composer require "twig/twig"

Il y a parfois des problèmes sur certains ordinateurs, vous pouvez essayer composer require "twig/twig:^3.0" si c’est le cas

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 `` :

<h1>{{ test }}</h1>

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

💡 Cette fonctionnalité de Twig peut paraitre compliquée à comprendre et c’est normal, elle deviendra beaucoup plus claire avec l’utilisation de la POO et du MVC et nous reviendrons dessus à ce moment-là. Vous n’avez donc pas forcément besoin de l’utiliser dès maintenant, mais sachez que cela existe.

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

Les exemples sont sous forme d’image parce que GitHub Pages n’arrive pas à interpréter le code Twig et ça fait crasher la mise en ligne.

exemple 1 Twig

et un template home.html.twig :

exemple 2 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>

Exercice pratique

Faites l’intégration de la maquette suivante dans un fichier teams.html.twig en utilisant Twig. Vous ferez un render du template depuis votre fichier index.php(et c’est donc index.php que vous runnerez).

Le lien de la maquette

Les liens des images de la maquette :

📘 Cette maquette fait partie d’un projet complet avec base de données que vous aurez à réaliser dans le cadre du module MVC, du coup en la faisant bien, vous gagnerez potentiellement du temps plus tard 😊