diff --git a/labs/1/lab1.md b/labs/1/lab1.md index 319ed23..ca286ea 100644 --- a/labs/1/lab1.md +++ b/labs/1/lab1.md @@ -1,4 +1,4 @@ -# TP1 - Installation et découverte de `Symfony` +# TPn - Installation et découverte de `Symfony` ## Objectif @@ -15,7 +15,7 @@ Les objectifs de ce TP sont : - Durée : 2 heures - Tous vos projets `Symfony` sont à placer votre dossier `~/public_html`. -- Utilisez le serveur `londres.iut.local` pour tester vos pages et non la +- Utilisez le serveur `londres.uca.local` pour tester vos pages et non la commande `symfony server:start`. ## Installation de Composer et `Symfony` @@ -57,7 +57,7 @@ symfony new --webapp tp1 ``` 1. Rendez-vous sur la page - `http://londres.iut.local/~VOTRE_USERNAME/tp1/public/index.php`. Que + `http://londres.uca.local/~VOTRE_USERNAME/tp1/public/index.php`. Que constatez-vous ? - L'utilisateur UNIX `www-data` qui fait tourner le serveur Apache sur le @@ -73,7 +73,7 @@ symfony new --webapp tp1 cache et logs. - Rendez-vous dans `~/public_html/tp1` et ouvrez le fichier `src/Kernel.php`. - Ajouter les deux méthodes suivantes : + Ajouter les deux méthodes suivantes à la classe Kernel : ```php public function getCacheDir(): string @@ -88,7 +88,7 @@ public function getLogDir(): string ``` 3. Rendez-vous sur la page - `http://londres.iut.local/~VOTRE_USERNAME/tp1/public/index.php`. Que + `http://londres.uca.local/~VOTRE_USERNAME/tp1/public/index.php`. Que constatez-vous ? ## Découverte de la console `Symfony` diff --git a/labs/2/lab2.md b/labs/2/lab2.md index 41027d7..767a146 100644 --- a/labs/2/lab2.md +++ b/labs/2/lab2.md @@ -13,16 +13,16 @@ Les objectifs de ce TP sont : - Durée : 2 heures - Tous vos projets `Symfony` sont à placer votre dossier `~/public_html`. -- Utilisez le serveur `londres.iut.local` pour tester vos pages et non la +- Utilisez le serveur `londres.uca.local` pour tester vos pages et non la commande `symfony server:start`. +- Nous allons créer un réseau social nommé `TweetTok` où les messages sont nommés des `Twok`. +- Pour le moment, les `Twoks` seront stockés en dur dans un fichier JSON. ## Ressources - Documentation de Symfony sur les services : [https://symfony.com/doc/5.x/service_container.html](https://symfony.com/doc/5.x/service_container.html) - Documentation de Symfony sur les routes : [https://symfony.com/doc/5.x/routing.html](https://symfony.com/doc/5.x/routing.html) -- Nous allons créer un réseau social nommé `TweetTok` où les messages sont nommés des `Twok`. -- Pour le moment, les `Twoks` seront stockés en dur dans un fichier JSON. ```json [ diff --git a/labs/3/lab3.md b/labs/3/lab3.md index eccd585..635b5e2 100644 --- a/labs/3/lab3.md +++ b/labs/3/lab3.md @@ -7,25 +7,27 @@ Les objectifs de ce TP sont : - Comprendre et mettre en œuvre les opérations CRUD (Create, Read, Update, Delete) avec Doctrine dans une application Symfony. - Avancer vers des fonctionnalités de recherche avancées. -- +- Ajouter plus de fonctionnalités de stockage en BDD et d'interactions entre les tables. ## Consignes - Durée : 2 heures - Tous vos projets `Symfony` sont à placer votre dossier `~/public_html`. -- Utilisez le serveur `londres.iut.local` pour tester vos pages et non la +- 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, les `Twoks` étaient stockés en dur dans un fichier JSON. +- Nous allons maintenant les stocker en BDD. +- 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 les services : +- Documentation de Symfony sur Doctrine : [https://symfony.com/doc/5.x/doctrine.html](https://symfony.com/doc/5.x/doctrine.html) -- Nous allons continuer notre réseau social nommé `TweetTok` où les messages sont nommés des `Twok`. -- Lors du précédent TP, les `Twoks` étaient stockés en dur dans un fichier JSON. -- Nous allons maintenant les stocker en BDD. -- Repartez donc de votre précédent projet `TweetTok`. -- **Attention! L'utilisation de la commande - `symfony console make:crud` est interdite pour le moment !** ## Partie 1: Import des Twoks existants avec Doctrine (30 min) @@ -94,7 +96,7 @@ Les objectifs de ce TP sont : - Empêchez un 4. **Compteur d'impression des `Twoks` :** - - Ajouter un champ `nm_prints` dans la table `Twok` et incrémentez sa valeur + - Ajouter un champ `nb_prints` dans la table `Twok` et incrémentez sa valeur à chaque fois que le `Twok` est affiché. ## Pour aller plus loin diff --git a/labs/4/lab4.md b/labs/4/lab4.md new file mode 100644 index 0000000..d2bab24 --- /dev/null +++ b/labs/4/lab4.md @@ -0,0 +1,168 @@ +# 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](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. + + +### 1.2 Filtres personnalisés +Créez un filtre Twig personnalisé pour résumer les Twoks qui sont trop longs. Nommez ce filtre `summarize`. + +```php +// 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. + +```twig +{{ 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. + +```twig +{% if twok.createdAt|date('Y-m-d') == "now"|date('Y-m-d') %} +

Nouveau Twok!

+{% 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. + +```twig +// twok_detail.html.twig +
+

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

+

Posté le: {{ twok.createdAt|date('d/m/Y H:i') }}

+
+``` + +```twig +{% 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. + +```twig +{% macro action_buttons(twokId) %} +
+ + +
+{% endmacro %} + +{% import _self as macros %} +``` + +Utilisez cette macro dans le template de détail du Twok. + +```twig +{{ 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`. + +```twig +{% for twok in twoks %} +
+ {% include 'twok_detail.html.twig' %} +
+{% endfor %} + + +``` + +### 3.2 Gestion des Assets +Utilisez la fonction `asset` pour inclure des images ou des styles CSS spécifiques aux Twoks. + +```twig + +``` + +### 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". + +```twig +{% if twok.content contains 'Symfony' %} +

Ce Twok mentionne Symfony!

+{% 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.