Scribd Logo
Importer

Bienvenue sur Scribd !

  • tp2 Template Twig

    Transféré par

    Hajri Azza
    8 vues6 pages

    Titre original

    tp2_template_twig

    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é
    8 vues6 pages

    tp2 Template Twig

    Transféré par

    Hajri Azza

    Droits d'auteur :

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

    Polytech 2022

    Atelier 2 Symfony 5 : TWIG

    Le moteur de templates Twig : C'est un script qui permet d'utiliser des templates,
    c'est-à-dire des fichiers qui ont pour but d'afficher le contenu de votre page HTML de
    façon dynamique, mais sans PHP.
    Le but des templates, ou vues, est de séparer le code PHP du code HTML.
    Afficher une variable se fait avec les doubles accolades : {{ monvariable }}
    Ajouter un commentaire : {# Je suis un commentaire #}

    Chouchane M.H Page 1


    Polytech 2022

    Pour voire la liste des filtres tapez dans le terminal:

    php bin/console debug:twig

    1) Notion de base Twig :


    Ouvrez le fichier « accueil.html.twig » contenant le code ci-dessous :

    {# templates/Inscription/accueil.html.twig #}

    <h1><span style="color:red">Bienvenue à notre page d'accueil </span> </h1>


    <h1>Your lucky number is {{ number }}</h1>

    Pour apporter des mises en forme (css et JS) on va opter pour le moment
    pour l’utilisation de bootstrap via « cdn » c'est-à-dire en se connectant
    au serveur sans téléchargement de ressources bootstrap.

    Chouchane M.H Page 2


    Polytech 2022

    L’importation des ressources css et js se fait de préférence dans le


    fichier “base.html.twig “

    Dans la balise <head> Mettez la ligne suivante

    <link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-
    BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous"/>

    Il faut d’abord faire l’héritage du fichier de base dans “accueil.html.twig”

    {% extends "base.html.twig" %}

    Puis modifier l’affichage « Bienvenu à notre page d’accueil comme suit » et mettez le contenu dans
    un block “body”

    {% extends "base.html.twig" %}
    {% block body %}
    <h1><span class='text-success'> Bienvenue à notre page d'accueil</span>
    </h1>
    <h1>Your lucky number is {{ number }}</h1>
    {% endblock %}
    Actualisez la page dans votre navigateur

    2) Héritage dans Twig :

    ➢ Préparer le template père


    Accédez au fichier « templates/base.html.twig »
    Modifiez le comme suit ; vous remarquez qu’on a ajouté les block : « title » dans le <head>
    et « titre » dans le <body>

    ➢ Préparer le template fils


    Structurer la page sous forme de block (pareil au principe de publipostage dans Word si vous le
    connaissez déjà évidemment ) c'est-à-dire les blocks délimite le contenu de chaque zone et
    remplacés par le contenu approprié de chaque page

    Chouchane M.H Page 3


    Polytech 2022

    Modifier la page ”accueil.html/twig” comme suit :

    La notion de « parent » est similaire à « super » dans java

    {# templates/Inscription/accueil.html.twig #}

    {% extends "base.html.twig" %}

    {% block title %}{{parent()}} - Accueil{% endblock %}

    {% block titre %}{{parent()|upper}} - Session ISETso{% endblock %}

    {% block body %}

    {{ include('layout.html.twig') }}

    <h1><span class='text-success'> Bienvenue à notre page d'accueil</span> </h1>

    <h1>Your lucky number is {{ number }}</h1>

    {% endblock %}

    Le filtre |upper permet d’afficher le contenu en majuscule, en actualisant la page vous aller
    remarquer que le title contient la concaténation de l’expression “EPIJOB” (héritée) et “-Accueil” de
    même pour le titre qui s’affiche dans le corps de la page en Majuscule

    3) Include :
    Créez la page « layout.html.twig » dans le répertoire « templates » au même niveau que
    base.html.twig

    Intégrer le template « layout » dans « accueil.html.twig » (au début du block body)

    {{ include('layout.html.twig') }}

    4) Intégrer css
    Vous pouvez utiliser la technique « Assets », vous devez l’installer d’abord, vous pouvez lire encore
    plus sur cette méthode dans la documentation symfony

    composer require symfony/asset


    Ou intégrer un fichier css (même principe pour intégrer un JS ou image) manuellement comme suit :

    Chouchane M.H Page 4


    Polytech 2022

    Créer le dossier « css » sous le dossier « public »

    Créer le fichier « app.css »

    body {
    background-color: lightgray;
    }
    h1{
    color:red;
    }
    Ouvrez la page « base.html.twig »

    Ajouter le lien vers le nouveau fichier css dans le block stylesheet :

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

    Actualiser la page Accueil

    5) Insérer une image


    - Télécharger le logo de symfony 5 à partir de google images, modifier le nom de l’image
    “pic.jpg”

    - Créez le dossier “images” sous “public” et mettez la photo dans ce dossier


    - Insérez l’image dans le fichier “accueil.html.twig” comme suit

    Chouchane M.H Page 5


    Polytech 2022

    <img src="{{asset('images/pic.jpg')}}" title="my image" alt="My image"


    width="150" height="150">

    Actualisez

    6) JavaScript
    Essayer de faire la même chose c’est à dire créez un dossier “JS” sous “public” pour appliquer une
    fonction JavaScript dans votre fichier twig

    Bon Travail ☺

    Chouchane M.H Page 6

    Vous aimerez peut-être aussi