# TP4: Templating avec Twig > This work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](https://creativecommons.org/licenses/by-nc-sa/4.0/). > Permission is explicitly granted to copy, distribute and/or modify this document for educational purposes under the terms of the CC BY-NC-SA license. ## 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](https://symfony.com/doc/5.x/templates.html) - Documentation de Twig : [https://twig.symfony.com/doc/2.x/templates.html](https://twig.symfony.com/doc/2.x/templates.html) ## Partie 1 : Affichage des Twoks (30 min) 1. **Template de base :** - Créez un fichier `base.html.twig` qui contient les balises `` et `` de votre page web. - Créez un block `body` vide qui sera rempli par les autres templates. 2. **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. 3. **Filtres personnalisés :** - Créez un filtre Twig personnalisé pour résumer les `Twoks` qui sont trop longs. Implémentez le filtre dans le fichier `src/Twig/AppExtension.php` et nommez ce filtre `summarize`. Voir [doc sur les extension Twig](https://symfony.com/doc/current/templates.html#writing-a-twig-extension). - Utilisez ce filtre dans votre template pour afficher un résumé des `Twoks`. ```twig {{ twok.content|summarize(100) }} ``` ## Partie 2 : Interaction avec les Twoks (45 min) 1. **Affichage conditionnel :** - Ajoutez un affichage conditionnel pour montrer un message spécial (ex: "Nouveau Twok !") si un `Twok` a été créé le jour même. 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`. 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`. Utilisez cette macro dans le template de détail du `Twok`. ## Partie 3 : Fonctionnalités Avancées (45 min) 1. **Affichage alterné :** - 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. 2. **`Twoks` par utilisateur :** - Créez un nouveau template `twok_by_user.html.twig` qui permettra de lister l'ensemble des utilisateurs avec pour chaqun une liste de ses `Twoks`. 3. **Ordre des `Twoks` :** - Dans votre template `index.html.twig`, faites en sorte qu'il soit possible de lister les `Twoks` du plus ancien au plus récent et l'inverse.