You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
3.7 KiB
86 lines
3.7 KiB
# 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`.
|
|
- **<span style="color:red">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.</span>**
|
|
|
|
## 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 `<head>` et
|
|
`<body>` 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.
|