Framework Symfony

Twig - Notions de base

La particularité́ d’un moteur de Template c’est qu’il permet un affichage dynamique d’une page web par le biais de ses fonctionnalités.

Ainsi, il peut afficher des variables sur lesquelles il peut appliquer des filtres. Il peut aussi faire des boucles afin d’afficher un ensemble d’informations ou de variables. Tout cela sans PHP et uniquement en HTML, CSS et langage Twig.

Syntaxe :

Chacune des variables que l’on va afficher ou auxquelles on va appliquer des filtres ou sur lesquelles on va effectuer un traitement devra impérativement, au préalable, avoir été́ récupérée dans le contrôleur et envoyée à la vue sous forme d’un tableau. 

On ne va pas lui envoyer les variables telles quelles mais des instances d’objet (par exemple un étudiant ou une liste des etudiants et non pas juste le nom de l'etudiant). 

L’affichage d’une variable se fait relativement aisément. On écrit le nom de la variable que l’on souhaite afficher entre deux accolades.  par exemple pour le nom d’etudiant on écrira : {{ etudiant.nom }}

Un traitement comme une boucle par exemples’effectue en écrivant la structure de contrôle entre deux % eux même entre deux accolades. 

{% for etd in etudiants %}
 {{ etd.nom }}
{% endfor %}

En général :

- {% %}: pour faire une action : un set de variable, une condition if, une boucle for ;

- {{ }}: pour afficher quelque chose.

langage Twig:

1- les variables

Pour déclarerune variable en Twig il faut utiliser la fonction set. Par exemple pour déclarer une variable pi on écrira :

{% set pi=3.14 %}


un autre exemple :

{% set nom='mostafa' %}


pour afficher le contenu du variable nom on écrira :

{{ nom }}


2- Tests (if)

L'instruction if dans Twig est utiliser pour tester si une expression est évaluée à true ou false (vrai,faux)

Exemple :

Pour vérifier est ce que l’âge d'un étudiant et supérieur à 18ans on écrira :

{% if etudiant.age>18 %}
  l'age de l'etudiant {{ etudiant.nom }} est supérieur à 18ans
{% endif %}


Vous pouvez également tester si un tableau d'etudiants par exemple n'est pas vide:

{% if etudiants %}
   le tableau n'est pas vide
{% endif %}


Pour des conditions multiples, les fonctions and (et) et or(ou) peuvent être utilisées

{% if temperature > 18 and temperature < 27 %}
   beau jour pour une promenade.
{% endif %}


Pour de multiples branches, elseif et else peuvent être utilisés comme en PHP

{% if note<10 %}
    non admis.
{% elseif note<12 %}
    passable
{% elseif note<14 %}
    assez bien
{% elseif note<16 %}
    bien
{% else %}
    très bien
{% endif %}


3- Boucle for

Boucler sur chaque élément dans une séquence. Par exemple, pour afficher une liste d'étudiants prévus dans une variable appelée etudiants:

{% for etd in etudiants %}
   {{ etd.nom }}
{% endfor %}


4- filtres

Les filtres von@t permettre la modificationrapide du contenu d’une variable.

On peutappliquer des filtres sur une variable à afficher, sur une variable d'unecondition IF ou d'une boucle FOR…


a-length

le filtre length permet d'afficher la taille d'un tableau

{{ etudiants|length }}


b- upper

pour rendre le contenu d'une variable en majuscule

{{ etudiant.nom|upper }}


c- lower

convertir le contenu d'un variable en minuscule

{{ etudiant.nom|lower }}


d- capitalize

convertir la première lettre en majuscule

{{ etudiant.nom|capitalize }}


5- heritage

Dans la plupart des cas, vous avez une charte définie pour votre site et à part le contenu,peu de choses changent dans la présentation de votre page. Avec Twig, vous pouvez définir un template avec votre header, votre footer  et faire un héritage entre les deux templates (celui qui affiche le contenu et celui contenant le header et le footer) pour que vous n'ayez qu'à modifier un seul fichier si vous voulez changer la structure de votre site.

Le principe est simple : vous avez un template père qui contient le design de votre site ainsi que quelques trous (appelés « blocks » en anglais, que nous nommerons « blocs » en français) et des templates fils qui vont remplir ces blocs. Les fils vont donc venir hériter dupère en remplaçant certains éléments par leur propre contenu.

Les blocs classiques sont le centre de la page et le titre. Mais en fait, c'est à vous de lesdéfinir ; vous en ajouterez donc autant que vous voudrez.

Prenons l’exemple d’un Template pèrecontenu dans le projet symfony2 

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8" />
 <title> {% block title %}Welcome!{% endblock %} </title>
     {% block stylesheets %}{% endblock %}
 <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
 </head>
 <body>
     {% block body %}{% endblock %}
     {% block javascripts %}{% endblock %}
 </body>
</html>

dans l'exemple précédent on a 4 blocs

-bloc title pour changer le titre de chaque page

-bloc stylescheets pour mettre les fichiers css

-block body pour changer le contenu d'une page à l'autre

-block javascripts pour ajouter des fichiers javascript

Ce sont ces parties-là qui seront remplies par le template fils.

{% extends 'base.html.twig' %}
{% block stylescheet %}
    <link href="css/style.css') }}" rel="stylesheet" type="text/css">
{% endblock css %}

{% block title %} Twig : Notions de base {% endblock %}

{% block body %}
   bienvenue dans la formation Twig 
{% endblock %}

{% block javascript %}
   <script type="text/javascript" src="js/code.js"></script>
{% endblock %}

la fonction extends utilisé pour étendre un modèle à partir d'un autre. Ici on voit que le template fils hérite de template père base.html.twig se trouve dans /app/Ressources/views

La balise {% block %} côté père :

Pour définir un « trou » (dit bloc) dans le template père, nous avons utilisé la balise {% block%}. Un bloc doit avoir un nom afin que le template fils puisse modifier tel ou tel bloc defaçon nominative. La base, c'est juste de faire {% block nom_du_block %}{% endblock %} et c'est ce que nous avons fait pour le body. Mais vous pouvez insérer un texte par défaut dans les blocs. C'est utile pour deux cas de figure :

  • Lorsque le template fils ne redéfinit pas ce bloc. Plutôt que de n'avoir rien d'écrit,vous aurez cette valeur par défaut.

  • Lorsque les templates fils veulent réutiliser une valeur commune. Par exemple, si vous souhaitez que le titre de toutes les pages de votre site commence par « Monsite », alors depuis les templates fils, vous pouvez utiliser {{ parent() }} qui permet d'utiliser le contenu par défaut du bloc côté père. 

La balise {% block %} côté fils :

Elle se définit exactement comme dans le template père, sauf que cette fois-ci on y met notre contenu. Mais étant donné que les blocs se définissent et se remplissent de la même façon, vous avez pu deviner qu'on peut hériter en cascade ! En effet, si l'on crée un troisième template petit-fils qui hérite de fils, on pourra faire beaucoup de choses.


Partager ce cours avec tes amis :
 
Rédigé par Mostafa Sedoki
Professeur d'Informatique dans les CPGE

Cours Similaires :