R5.A.05-Symfony

ressources-etu

5.2 KiB

Raw Blame History

TP4: Templating avec Twig

Objectifs

Les objectifs de ce TP sont :

Comprendre et mettre en œuvre les opérations CRUD (Create, Read, Update, Delete) avec Twig dans une application Symfony.
S'approprier les structures de contrôle de Twig (if/for/etc).
Comprendre les méchanismes d'héritage et d'extension de templates.

Consignes

Durée : 2 heures
Tous vos projets Symfony sont à placer votre dossier ~/public_html.
Utilisez le serveur londres.uca.local pour tester vos pages et non la commande symfony server:start.
Nous allons continuer notre réseau social nommé TweetTok où les messages sont nommés des Twok.
Lors du précédent TP, nous avons stocké les Twoks en BDD, mais avec un CRUD très rudimentaire.
Nous allons maintenant améliorer les vues avec Twig.
Repartez donc de votre précédent projet TweetTok.
Attention! L'utilisation des commandes symfony console make:crud et symfony console make:form sont interdites pour le moment ! L'objectif est de comprendre ce qu'elles font.

Ressources

Documentation de Symfony sur Twig : https://symfony.com/doc/5.x/templates.html
Documentation de Twig : https://twig.symfony.com/doc/2.x/templates.html

Partie 1 : Affichage des Twoks (30 min)

Template de base :
- Créez un fichier base.html.twig qui contient les balises <head> et <body> de votre page web.
- Créez un block body vide qui sera rempli par les autres templates.
Liste des Twoks :
- Créez un template index.html.twig pour afficher la liste des Twoks. Utilisez une boucle for pour itérer sur chaque Twok. Affichez le contenu du Twok, son auteur et sa date de création formatée.
- Faites en sorte que le votre template index.html.twig étende le template base.html.twig pour ne pas avoir à dupliquer de code HTML.

1.2 Filtres personnalisés

Créez un filtre Twig personnalisé pour résumer les Twoks qui sont trop longs. Nommez ce filtre summarize.

// src/Twig/AppExtension.php

namespace App\Twig;

use Twig\Extension\AbstractExtension;
use Twig\TwigFilter;

class AppExtension extends AbstractExtension
{
    public function getFilters()
    {
        return [
            new TwigFilter('summarize', [$this, 'summarizeText']),
        ];
    }

    public function summarizeText($text, $max = 50)
    {
        if (strlen($text) > $max) {
            return substr($text, 0, $max) . '...';
        }

        return $text;
    }
}

Utilisez ce filtre dans votre template pour afficher un résumé des Twoks.

{{ twok.content|summarize(100) }}

Partie 2 : Interaction avec les Twoks (45 min)

2.1 Affichage conditionnel

Ajoutez un affichage conditionnel pour montrer un message spécial si un Twok a été créé le jour même.

{% if twok.createdAt|date('Y-m-d') == "now"|date('Y-m-d') %}
<p>Nouveau Twok!</p>
{% endif %}

2.2 Inclusion de Templates

Créez un template séparé pour afficher les détails d'un Twok (twok_detail.html.twig) et incluez-le dans votre liste de Twoks.

// twok_detail.html.twig
<div>
    <p>{{ twok.content|summarize(100) }}</p>
    <p>Posté le: {{ twok.createdAt|date('d/m/Y H:i') }}</p>
</div>

{% for twok in twoks %}
    {% include 'twok_detail.html.twig' %}
{% endfor %}

2.3 Macros Twig pour les boutons

Définissez une macro Twig pour générer des boutons de like et de partage pour chaque Twok.

{% macro action_buttons(twokId) %}
<div class="actions">
    <button type="button">Like</button>
    <button type="button">Share</button>
</div>
{% endmacro %}

{% import _self as macros %}

Utilisez cette macro dans le template de détail du Twok.

{{ macros.action_buttons(twok.id) }}

Partie 3 : Fonctionnalités Avancées (45 min)

3.1 Structures de Contrôle

Expérimentez avec des structures de contrôle avancées en affichant les Twoks en alternance : un Twok sur fond clair, l'autre sur fond sombre, en utilisant la fonction cycle.

{% for twok in twoks %}
<div style="background-color: {{ cycle(['#fff', '#eee'], loop.index0) }}">
    {% include 'twok_detail.html.twig' %}
</div>
{% endfor %}

3.2 Gestion des Assets

Utilisez la fonction asset pour inclure des images ou des styles CSS spécifiques aux Twoks.

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

3.3 Tests Twig

Utilisez des tests Twig pour afficher des informations spécifiques, par exemple, tester si le contenu du Twok contient le mot "Symfony".

{% if twok.content contains 'Symfony' %}
<p>Ce Twok mentionne Symfony!</p>
{% endif %}

Conclusion

Cette session vous a permis de plonger dans les fonctionnalités avancées de Twig pour améliorer l'affichage et l'interaction avec les données dans une application Symfony. Vous avez travaillé sur l'affichage conditionnel, l'inclusion de templates, la création de filtres et de macros personnalisés, et bien plus. Ces compétences vous aideront à créer des interfaces utilisateur riches et interactives dans vos futurs projets Symfony.

5.2 KiB Raw Blame History