📘

Vues et Twig

Equivalent en Java à l’expression language et JSTL mais en plus simple.

Twig est un moteur de templates minimaliste, lisible et performant qui permet de compiler en PHP un fichier Twig et de créer une page HTML.

Symfany ajoute des fonctionnalités à Twig.

â„č
Moteur de templates semblables : - Nunjucks sous JavaScript - Jinja sous Python - DTL de Django - Jtwig sous Java
📌
Pour aller plus loin : https://twig.symfony.com/doc/ Référentiel des BP en PHP : https://www.php-fig.org/psr/

DĂ©limiteurs

Twig propose trois délimiteurs pour exécuter du code :

  1. {# 
 #} pour les commentaires (que pour le dev, le client dans le navigateur ne les voit pas)
  1. {{ 
 }} (double moustache) pour afficher une variable ou une fonction qui retourne une chaine de caractùres (on ne met pas le dollar de la variable)
  1. {% 
 %} pour exécuter du code PHP et pour les balises Twig

Balises Twig (tags)

Les balises Twig sont nombreuses, parmi les plus utilisées on trouve :

Il est possible de faire de l’hĂ©ritage entre Twigs avec extends, block et include.

La balise if finit par un endif et on utilise les mots-clé and, or, not au lieu des opérateurs habituels.

Il n’y a pas de switch mais un Ă©quivalent existe.

La balise set permet de crĂ©er une variable directement dans la vue. Elle est peu utilisĂ©e sauf quand on veut la rĂ©cupĂ©rer d’ailleurs (ex : afficher la date du jour).

La balise for finit par un endfor et permet de rĂ©cupĂ©rer des informations, comme le dernier Ă©lĂ©ment, le premier, l’actuel, l’index


On peut faire un ‘for 
 else’ si jamais la variable est vide.

{% set fleurs = ["rose", "tulipe", "marguerite"] %}
<h2>Exemple d'un if : </h2>
    {% if fleurs[0] == "rose" %}
        <p>La fleur est une rose.</p>
    {% else %}
        <p>Eh bien non, ce n'est pas une rose.</p>
    {% endif %}
<h2>Exemple d'une boucle for : </h2>
    <ul>
        {% for fleur in fleurs %}
            <li>{{ fleur }}</li>
        {% else %}
            <li>Pas de fleurs.</li>
        {% endfor %}
    </ul>
â„č
Les getters sont utilisĂ©s de maniĂšre automatique, sans qu’on le voit.

Filtres Twig

Un filtre sert à modifier l’affichage d’une variable sans la modifier, avec un pipe |.

{% set fleurs = ["rose", "tulipe", "marguerite"] %}
<h2>Exemple d'un filtre : </h2>
<p>J'affiche {{ fleurs[1] }} en majuscules : {{ fleurs[1] | upper }}</p>

Les filtres sont nombreux, parmi les plus utilisĂ©es on trouve : ‱abs

‱batch

‱capitalize

‱convert_encoding

‱date

‱date_modify

‱default

‱escape

‱first

‱format

‱join

‱json_encode

‱keys

‱last

‱length

‱lower

‱markdown_to_html

‱merge

‱nl2br (pour convertir les sauts de ligne en balise <br>)

‱number_format

‱raw

‱replace

‱reverse

‱round

‱slice

‱sort

‱split

‱striptags

‱title

‱trim

‱upper‱url_encode

Blocs et héritage

Afin de limiter les rĂ©pĂ©titions, il est possible de crĂ©er des gabarits rĂ©utilisables avec des blocs et de l’hĂ©ritage entre Twigs.

Une page principale contient la trame gĂ©nĂ©rale : base.html.twig, ce fichier est d’ailleurs crĂ©Ă© automatiquement. Des blocs sont dĂ©finis pour les parties Ă  modifier selon le Twig (ex : un block title, un block body
) avec {% block title %}{% endblock %}.

Les autres Twigs hĂ©ritent de cette page avec {% extends ‘base.html.twig’ %} et les blocs sont remplis Ă  façon :

{% extends ‘base.html.twig’ %}

{% block body %}
	<p>Un contenu de body</p>
{% endblock %}

{% block title %}Un titre de Twig{% endblock %}

Un autre possibilitĂ© est d’utiliser l’inclusion avec include() comme en PHP mais on l’utilise rarement : {% include('fichier.html.twig') %}.

Gestion des assets

Avec l’hĂ©ritage, on ne peut pas appeler de fichiers (css, javascripts, images
) puisque le chemin est diffĂ©rent selon le Twig dans lequel on se trouve.

On met tous ces fichiers dans le rĂ©pertoire public (chacun bien rangĂ© dans des rĂ©pertoires, bien sĂ»r) et on utilise des assets qui permettent d’y accĂ©der dynamiquement.

Par exemple pour un fichier de style : 

<link rel="stylesheet" href="{{ asset('css/style.css') }}">

De mĂȘme pour les liens Ă  des URLs internes, on utilise soit {{ path('home') }} qui trouve par le nom de la route, soit {{ url('home') }} qui trouve par l’URL.

BP : Il est recommandĂ© d’utiliser path parce qu’il y a trĂšs peu de raisons de changer le nom unique d’une route alors qu’il est possible que son URL Ă©volue.

Il faut installer le paquet asset : composer require symfony/asset

Passer des variables Ă  la vue

Dans le contrĂŽleur :

On utilise la mĂ©thode render() dans laquelle on passe un deuxiĂšme paramĂštre qui est un tableau avec la liste des variables qu’on veut envoyer Ă  la vue, sous la forme de clĂ©=>valeur.

Il est possible de déclarer le tableau avec les crochets ou bien avec la méthode compact() :

// avec les crochets
#[Route('/', name: 'home_index')]
    public function index(): Response
    {
        $uneVar = "bonjour";
        $uneAutre = 42;
        return $this->render('home/index.html.twig', [
            "uneVar" => $uneVar,
            "uneAutre" => $uneAutre
        ]);
    }

// avec compact()
#[Route('/', name: 'home_index')]
    public function index(): Response
    {
        $uneVar = "bonjour";
        $uneAutre = 42;
        return $this->render('home/index.html.twig',
            compact('uneVar', 'uneAutre')
        );
    }
BP : Souvent, on met le mĂȘme nom pour la clĂ© et la variable si on utilise les crochets.

Dans le Twig :

On utilise les double moustaches dans lesquelles on appelle la clé.

<p>J'affiche les variables : {{ uneVar }} et {{ uneAutre }}.</p>

En vrac

{% block title %} {{ parent() }} - Accueil {% endblock %}
@font-face {
	src: url("../fonts/Luciole-Regular.ttf");
	font-family: "Luciole-Regular";
}

body {
	font-family: Luciole-Regular, sans-serif;
}