Name: Apprendre à développer des applications web avec PHP et Symfony (2e édition)
Rating: 5 (2 reviews)

La syntaxe

Toutes les vues de notre application utiliseront le moteur de template Twig.

Twig est un langage qui vient s’ajouter au code HTML dans les vues (comme on le faisait avec PHP).

Il est possible d’installer Twig sur un projet PHP sans avoir à installer Symfony.

La documentation complète de Twig se trouve sur : https://twig.symfony.com/doc/3.x/

Prenez la documentation Twig for template designers pour avoir la syntaxe du langage.

Examinons la syntaxe des instructions Twig. La syntaxe est séparée en trois parties :

{{ ...}} : utilisé pour afficher le contenu d’une variable ou le résultat de l’évaluation d’une expression.
{% ... %} : utilisé pour exécuter une structure de contrôle (if, foreach…).
{# ... #} : utilisé pour ajouter des commentaires (ces commentaires ne seront pas visibles sur la page HTML générée).

Prenons un exemple. Nous allons créer la vue hello.html.twig dans le dossier templates/test.

Insérons juste cette instruction :

<h2>Bienvenue à {{ nom }} {{ prenom }}</h2>

Les {{ }} vont interpréter l’expression. Ici, nous allons afficher la valeur des paramètres nom et prenom. Ces paramètres seront transmis à la vue dans...

L’héritage

Il arrive souvent que les pages d’un site ou d’une application regroupent des parties communes.

Par exemple, l’en-tête du site, la barre de navigation, le pied de page, les menus sont communs à l’ensemble de toutes les pages. Au lieu de copier-coller ces éléments, il est plus judicieux de définir une vue squelette dont vont hériter toutes les autres vues.

On appelle souvent cette vue un layout (une disposition).

Nous avons précédemment déjà abordé un layout qui existe par défaut, à la racine du dossier templates : templates/base.html.twig.

Ouvrons ce layout :

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>{% block title %}Welcome!{% endblock %}</title> 
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=
%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22>
<text y=%221.2em%22 font-size=%2296%22>●</text></svg>"> 
        {# Run `composer require symfony/webpack-encore-bundle` 
to start using Symfony UX #} 
        {% block stylesheets %} 
            {{ encore_entry_link_tags('app') }} 
        {% endblock %} 
 
        {% block...

L’inclusion de vue

Nous avons vu comment une vue pouvait hériter d’une autre vue. L’inclusion de vue, c’est l’inverse. Il est possible d’inclure une vue dans une autre (comme un include en PHP).

Syntaxe :

{% include 'nomDelaVueAInclure' %}

Nous allons par exemple créer deux vues, une pour le header (l’en-tête de la page) et une pour le footer (le pied de page).

Créons header.html.twig à la racine du dossier templates. À l’intérieur, écrivons le code :

<h1>{{ 'Bienvenue sur notre plateforme' }}</h1>

Créons footer.html.twig à la racine du dossier templates. À l’intérieur, écrivons le code :

 <p>Posté par Yves, le  
      <time datetime="2023-04-02">2 Avril 2023</time> 
</p>

Incluons ces deux vues dans base.html.twig pour qu’elles soient visibles dans toutes les pages :

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>{% block title %}Welcome!{% endblock %}</title> 
        <link rel="icon"...

L’utilisation des variables d’environnement

Dans le chapitre précédent, nous avions créé une variable d’environnement :

APP_AUTHOR=Yves

dans le fichier .env.

Nous pouvons afficher cette variable dans le contrôleur grâce à une variable $_ENV. Voyons comment procéder.

Dans l’action hello() du contrôleur TestController, vous pouvez tester ce code :

public function hello(Request $request, int $age, $nom, $prenom='') 
    { 
        echo $_ENV['APP_AUTHOR']; 
        return $this->render('test/hello.html.twig', [ 
            'nom' => $nom, 
            'prenom' => $prenom, 
            'age' => $age 
        ]); 
}

Il serait plus pratique d’utiliser notre variable d’environnement dans la vue.

C’est possible en la mettant en variable globale pour Twig.

Pour définir des variables globales de Twig, il faut se rendre dans le fichier config/packages/twig.yaml et définir la variable auteur comme ceci :

twig: 
    default_path:...

Les sessions et les Flash Bags dans Twig

Nous avons vu dans le chapitre Une première application, section Les variables de session comment créer et récupérer des variables de session et des Flash Bags.

Twig permet de récupérer directement ces variables et de les afficher dans la vue.

1. Les variables de session

Les variables de session peuvent être appelée via le service app (nous reviendrons sur ce service ultérieurement).

Syntaxe :

{{ app.session.get('nom_de_la_variable_de_session') }}

Si la variable n’existe pas, la vue n’affiche rien, mais vous n’avez pas de message d’erreur.

2. Les Flash Bags

Les Flash Bags sont des tableaux, donc pour les afficher, il faut les parcourir avec l’instruction for :

 {% for message in app.session.flashbag.get('ma_variable_flashbag') %} 
 
{{ message  }} 
 
{% endfor %}

Prenons un exemple.

Comme nous l’avons dit, nous allons utiliser les Flash Bags pour les messages venant des formulaires (voir plus loin, chapitre Les formulaires).

Nous utiliserons deux variables Flash Bags pour l’affichage des messages :

message : contient le texte du message
statut : contient l’état du message. Nous allons effectivement créer un composant Bootstrap de type « alert ».

Bootstrap est un framework CSS et JavaScript qui met à votre disposition un certain nombre...

L’inclusion du CSS et du JavaScript dans une vue

Comme nous l’avons dit précédemment, les fichiers CSS et JavaScript, ainsi que les images et les vidéos, doivent obligatoirement être sous le dossier public.

Créons un sous-dossier public/css et un sous-dossier public/js. À l’intérieur, créons respectivement les fichiers app.css et app.js.

Nous pouvons y mettre un peu de style, par exemple, dans app.css :

h1 { 
    color:blue; 
} 
h2 { 
    color:purple; 
}

Il faut bien sûr avoir une balise <link> dans la vue qui utilise ce style. Mais comment accéder depuis la vue à un élément du dossier public ?

Pour accéder à un élément du dossier public, il existe en Twig un helper : asset().

Syntaxe :

{{ asset('sousDossier/monFichier') }}

En réalité, asset() est une fonction qui génère l’URL de base. Elle vous permet d’avoir des applications portables d’une URL à l’autre.

Faisons le lien vers notre CSS et le lien vers notre JavaScript dans le layout base.html.twig.

Nous allons utiliser respectivement les blocks stylesheets et javascripts, prévus à cet effet :

<!DOCTYPE html> 
<html> 
    <head> ...

L’utilisation des routes dans la vue

Les routes peuvent être utilisées dans les vues, notamment pour les liens des boutons vers d’autres pages. Nous pouvons utiliser l’URL de la route, mais aussi son nom.

Rappelez-vous, dans l’attribut de l’action, nous avons donné un nom à la route avec l’option name.

Par exemple, dans l’attribut de l’action hello dans TestController :

#[Route('/hello/{age}/{nom}/{prenom}', name: 'hello', 
requirements: ["nom"=>"[a-z]{2,50}"])] 
public function hello(Request $request, int $age, $nom, $prenom='') 
{ 
 ... 
}

name="hello" indique que le nom de la route est « hello ».

Nous pouvons utiliser ce nom pour faire un lien vers cette route.

Syntaxe :

{{ path('nomDeLaRoute') }}

Prenons un exemple. Faisons un bouton « vers Test » dans la route hello qui nous dirige vers la route test, et réciproquement.

Modifions notre TestController, pour le simplifier, comme suit :

class TestController extends AbstractController 
{ 
    #[Route('/test', name: 'app_test',methods: ['GET', 'HEAD'] )] 
    public function index(Request $request): Response 
    { ...

Les filtres et les fonctions

Les filtres et les fonctions permettent de transformer directement le résultat d’une expression Twig.

1. Les filtres

Syntaxe :

{{ expression | filtre }}

Le pipe (|) se fait sous Windows avec les touches [Alt][Gr] 6 (sous Mac : [Alt][Shift] L). Nous l’avons déjà utilisé précédemment pour afficher la date du jour avec un format standard :

{{"now" | date('d-m-Y H:i:s')}}

Il est possible d’associer plusieurs filtres à une même expression :

{{ expression | filtre | filtre … }}

Vous trouverez la liste des filtres disponibles sur la page : https://twig.symfony.com/doc/3.x/filters/index.html

Prenons un exemple.

Dans la vue hello.html.twig, nous voulons mettre le nom en majuscule, nous utilisons pour cela le filtre upper :

<h2>Bienvenue à {{ nom | upper }} {{ prenom }}</h2>

Nous n’allons pas détailler tous les filtres. Nous allons juste voir deux filtres importants. Le premier s’applique sur les dates.

Nous n’avons pas parlé des dates en PHP.

Sachez juste qu’une date en PHP est un entier contenant le nombre de secondes depuis le 1er janvier 1970, à minuit.

Nous appelons cette valeur le timestamp UNIX, car c’est le nombre de secondes écoulées depuis la mise en service du système Unix.

Ce timestamp peut être généré par plusieurs fonctions en PHP, comme time() qui retourne le timestamp de l’instant courant.

Vous avez également mktime(), qui retourne, pour une date donnée, le timestamp correspondant.

Syntaxe :

mktime ( int heure, int minute, int seconde, int mois, int jour, int annee )

Exemple :

echo mktime(11, 30, 0, 4, 2, 2023);

affiche : 1680435000

Lorsque ce timestamp est envoyé dans une vue, nous souhaitons retrouver la date initiale avec un format désiré.

C’est là qu’intervient le filtre date.

En reprenant le timestamp précédent, nous pouvons l’afficher dans la vue au format jour-mois-annee heure:minute:secondes par exemple.

Nous allons utiliser le format :

d-m-Y H:i:s

Testons dans la vue hello.html.twig :

{% extends 'base.html.twig' %} 
 
{% block title %}{{ parent() }} Page de bienvenue{% endblock %} 
 
{% block body %} 
<h2>Bienvenue à {{ nom | upper }} {{...

Le moteur de template Twig

La syntaxe

L’héritage

L’inclusion de vue

L’utilisation des variables d’environnement

Les sessions et les Flash Bags dans Twig

1. Les variables de session

2. Les Flash Bags

L’inclusion du CSS et du JavaScript dans une vue

L’utilisation des routes dans la vue

Les filtres et les fonctions

1. Les filtres

Pour aller plus loin