Scribd Logo
Importer

Bienvenue sur Scribd !

  • Symfony5 - Chap 4 - Les TWIGs

    Transféré par

    Mou Mi
    29 vues27 pages

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    29 vues27 pages

    Symfony5 - Chap 4 - Les TWIGs

    Transféré par

    Mou Mi

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 27

    TEK-UP Ecole Supérieure Privée Technologie &

    Ingénierie

    Développement Web
    (PHP Symfony 5)

    Wissem ELJAOUED A.U. 2021-2022


    wissem.eljaoued@ensi-uma.tn
    Plan du cours

    I. Introduction Symfony TP1: Création d’un projet

    II. Routing (Routeur de Symfony)


    TP2: Router + Controller
    III. Les contrôleurs
    IV. Les Twigs TP3: Twig

    V. ORM Doctrine TP4: Doctrine TP5: DQL

    VI. Les Formulaires TP6: Forms


    2
    Ch. IV
    Les TWIGs
    3
    Ch. IV: Les TWIGs

    IV.1. Introduction

    IV.2. Le Moteur TWIG

    4
    IV.1. Introduction Définitions

    ❖ Template:

    • Le type de Template le plus connu est le Template PHP: un fichier texte interprété
    par PHP qui contient du Text et du code PHP.

    • Son objectif est de séparer le code PHP du code Html/xml/text,etc.

    ❖ Moteur de Template:
    Un Moteur de Template est un script qui permet d’intégrer des templates, c’est-à-dire
    des fichiers qui ont pour but d’afficher le contenu de votre page HTML de façon
    dynamique (faire une boucle pour afficher toutes les annonces d’un plateforme, etc)

    5
    IV.1. Introduction

    • Symfony 3 utilise un moteur de Template encore plus puissant appelé TWIG

    • Le dossier /Templates représente le répertoire des Templates Twig

    6
    IV.1. Introduction

    Afin d’accéder aux Template une convention de nommage est définit :


    DossierFichier/pagetwig

    Exemples
    • /index.html.twig // ce fichier se trouve directement dans /templates

    • DossierFichier/index.html.twig // ce fichier se trouve dans


    /templates/DossierFichier

    7
    IV.1. Introduction

    ❖ Plan de ce chapitre:

    • Les outils pour afficher des variables : variables simples, tableaux, objets, appliquer
    des filtres, etc. ;

    • Les outils pour construire un vrai code dynamique : faire des boucles, des conditions,
    etc. ;

    • Les outils pour organiser vos templates grâce à l'héritage et à l'inclusion de templates.
    Ainsi vous aurez un template maître qui contiendra votre design (avec les balises
    <html>, <head>, etc.) et vos autres templates ne contiendront que le contenu de la page
    (liste des news, etc.).

    8
    Ch. IV: Les TWIGs

    IV.1. Introduction

    IV.2. Le Moteur TWIG

    9
    IV.2. Le Moteur TWIG Syntaxe de base

    • {{ maVar }} : Les doubles accolades (équivalent de l’echo dans php ou


    du <%= %> pour les jsp) permettent d'imprimer une valeur, le résultat
    d'une fonction...

    • {% code %}: Les accolades pourcentage permettent d'exécuter une


    fonction, définir un bloc...

    • {# Les commentaires #} : Les commentaires

    10
    IV.2. Le Moteur TWIG Affichage des variables (1/2)

    11
    IV.2. Le Moteur TWIG Affichage des variables (2/2)

    12
    IV.2. Le Moteur TWIG Affichage d’un Attribut

    Lorsqu’on veut accéder à un attribut d’un objet avec twig on a le fonctionnement suivant pour
    l’exemple {{objet.attribut}} :

    • Vérification si l’objet est un tableau si oui vérifier que nous avons un index valide dans ce
    cas elle affiche le contenu de objet[‘attribut’]
    • Sinon, si objet est un objet, elle vérifie si attribut est un attribut valide public. Si c'est le cas,
    elle affiche objet->attribut.
    • Sinon, si objet est un objet, elle vérifie si attribut() est une méthode valide publique. Si c'est
    le cas, elle affiche objet->attribut().
    • Sinon, si objet est un objet, elle vérifie si getAttribut() est une méthode valide. Si c'est le
    cas, elle affiche objet->getAttribut().
    • Sinon, et si objet est un objet, elle vérifie si isAttribut() est une méthode valide. Si c'est le
    cas, elle affiche objet->isAttribut().
    • Sinon, elle n'affiche rien et retourne null.
    13
    IV.2. Le Moteur TWIG Les Filtres

    Pour plus de filtres consulter l’url suivante:


    14
    http://twig.sensiolabs.org/doc/filters/index.html
    IV.2. Le Moteur TWIG Variables Globales

    15
    IV.2. Le Moteur TWIG Les structures de contrôle

    ❖ Condition: {% if %}

    IF
    Syntaxe : Exemple
    {% if employee.salaire < 250 %}
    {% if cnd %} ce salaire est inférieur au smig
    Block de traitement {%endif%}
    {%endif%}

    16
    IV.2. Le Moteur TWIG Les structures de contrôle

    ❖ Condition: {% if %}

    IF elseif else Exemple


    Syntaxe : {% if maison.tempertature <0%}
    Très Froid
    {% if cnd %} {% elseif maison.tempertature
    block traitement <10 %}
    {% elseif cnd2 %} Froid
    block traitement {% else %}
    {% else %} Bonne température
    block traitement {% endif %}
    {% endif %}

    17
    IV.2. Le Moteur TWIG Les structures de contrôle

    ❖ Boucle: {% for %}

    {% for valeur in valeurs %} Exemple


    block à répéter La formation de l’équipe A est : <br>
    {% else %} <ol>
    Traitements à faire si il n’y {% for joueur in joueurs %}
    a aucune valeur <li> {{joueur.nom}} </li>
    {% endfor %} {% else %}
    La liste n’a pas encore été
    renseignée
    {% endfor %}
    </ol>

    18
    IV.2. Le Moteur TWIG Les structures de contrôle

    ❖ Boucle: {% for %}: définit une variable {{ loop }} au sein de la boucle

    19
    IV.2. Le Moteur TWIG Lien vers des fichiers

    • Pour générer le path d’un fichier (img, css, js,…) nous utilisons la fonction asset.
    • Cette fonction permet la portabilité de l’application en permettant une génération
    automatique du path du fichier indépendamment de l’emplacement de l’application.

    ❖ Fichier css

    ❖ Image

    20
    IV.2. Le Moteur TWIG Héritage de Template

    21
    IV.2. Le Moteur TWIG Héritage de Template

    Exemple (1/2):
    Un template Père dans: templates/layout.html.twig

    22
    IV.2. Le Moteur TWIG Héritage de Template

    Exemple (2/2):
    Un template fils dans: templates/Advert/index.html.twig

    23
    IV.2. Le Moteur TWIG Héritage de Template

    ❖ Bloc: {% block nomBloc %} contenu du bloc {%endblock%}

    24
    IV.2. Le Moteur TWIG Héritage de Template

    ❖ Récupération du contenu d’un bloc père


    Pour récupérer le contenu d’un bloc père il suffit d’utiliser la méthode parent()

    25
    IV.2. Le Moteur TWIG Inclusion de Template/Contrôleur

    ❖ Inclusion de Template
    Afin d’inclure un Template ou un fragment de code dans un autre template on
    utilise la syntaxe suivante :

    {{ include('NomBundle:Dossier:nomTemplate', {'labelParam1':param1,'labelParam2':
    param2,... }) }}

    ❖ Inclusion de Contrôleur
    Inclure un contrôleur sans ou avec des paramètres:

    {{ render(controller('NomBundle:NomController:NomAction', {'labelParam1':param1,
    'labelParam2': param2,... }) }}
    26
    IV.2. Le Moteur TWIG Inclusion de Template/Contrôleur

    27

    Vous aimerez peut-être aussi