Semaine 11

2026-07-11 21:38:00 +02:00
parent d3d2416dea
commit 0d071d2843
281 changed files with 54412 additions and 0 deletions
@@ -0,0 +1,180 @@
+# Exercice 3.3 - Jinja2 multi-pages
+
+## Navigation + templates dynamiques (sans base de données)
+
+---
+
+## Objectifs pédagogiques
+
+* structurer une application Flask avec plusieurs routes ;
+* générer plusieurs pages HTML avec Jinja2 ;
+* utiliser des templates réutilisables ;
+* exploiter des données simulées côté serveur (Python) ;
+* manipuler boucles et conditions dans Jinja2 ;
+* construire une navigation entre pages ;
+* séparer clairement logique serveur et affichage.
+
+---
+
+# Contexte
+
+Vous développez une mini application de type **tableau de bord de gestion de parc informatique**.
+
+Les données sont **simulées en mémoire (liste Python)**.
+
+L’application doit permettre :
+
+* d’afficher une liste globale des équipements ;
+* de voir uniquement les équipements actifs ;
+* de consulter une page de détail par équipement ;
+* de naviguer entre les pages via des liens HTML.
+
+---
+
+# Structure proposée
+
+```
+app.py
+/templates
+    base.html
+    index.html
+    actifs.html
+    detail.html
+```
+
+---
+
+# Travail demandé
+
+---
+
+## Étape 1 - Initialiser l’application Flask
+
+Créer une application Flask fonctionnelle.
+L’application doit pouvoir afficher une page d’accueil.
+
+---
+
+## Étape 2 - Créer les données simulées
+
+Définir côté serveur une liste Python représentant des équipements.
+Chaque équipement contient :
+
+* un identifiant ;
+* un nom ;
+* un statut (actif / inactif) ;
+* une catégorie (serveur, poste, réseau, etc.).
+
+Ces données sont **fixes et non modifiables**.
+
+---
+
+## Étape 3 - Créer une structure de templates
+
+Mettre en place :
+
+* un template principal servant de base commune ;
+* une structure avec bloc de contenu réutilisable ;
+* un menu de navigation commun à toutes les pages.
+
+Le menu doit permettre de naviguer entre les pages principales.
+
+---
+
+## Étape 4 - Page d’accueil (liste complète)
+
+Créer une route et une page affichant :
+
+* la liste complète des équipements ;
+* toutes leurs informations.
+
+Dans le template :
+
+* utiliser une boucle Jinja2 ;
+* afficher chaque équipement dans un bloc structuré ;
+* distinguer visuellement les équipements actifs et inactifs avec une condition.
+
+---
+
+## Étape 5 - Page “équipements actifs”
+
+Créer une page dédiée affichant uniquement :
+* les équipements actifs.
+
+La logique de filtrage doit être réalisée côté serveur (Python), pas dans le template.
+
+Dans le template :
+* afficher uniquement les éléments fournis par la vue ;
+* utiliser une boucle simple sans logique complexe.
+
+---
+
+## Étape 6 - Page de détail d’un équipement
+
+Créer une route dynamique permettant d’afficher :
+* un équipement spécifique selon son identifiant.
+
+La page doit afficher :
+* toutes les informations de l’équipement ;
+* un message d’erreur si l’identifiant n’existe pas.
+
+Dans le template :
+* utiliser des variables Jinja2 ;
+* utiliser une condition pour gérer le cas “non trouvé”.
+
+---
+
+## Étape 7 - Navigation entre pages
+
+Dans le template principal :
+* ajouter un menu de navigation commun ;
+* permettre d’accéder à toutes les pages ;
+* assurer une cohérence visuelle sur toutes les vues.
+
+---
+
+## Étape 8 - Mise en forme Jinja2 obligatoire
+
+Dans les templates, vous devez utiliser :
+* des boucles `{% for %}` ;
+* des conditions `{% if %}` ;
+* des variables `{{ }}` ;
+* au moins un bloc réutilisable (`block`) ;
+* une logique de filtrage côté Python (obligatoire).
+
+---
+
+## Étape 9
+
+Ajouter :
+* une page “statistiques” affichant :
+
+  * nombre total d’équipements ;
+  * nombre d’actifs ;
+  * nombre d’inactifs ;
+* un message conditionnel si la liste est vide dans une page.
+
+---
+
+# Livrables attendus
+
+* application Flask fonctionnelle ;
+* plusieurs routes Python ;
+* 3 à 4 templates Jinja2 ;
+* aucune base de données ;
+* aucune méthode POST ;
+* aucune modification de données.
+
+---
+
+# Compétences évaluées
+
+| Compétence             | Niveau attendu                  |
+| ---------------------- | ------------------------------- |
+| Flask routing          | Plusieurs routes fonctionnelles |
+| Jinja2                 | Boucles + conditions maîtrisées |
+| Architecture templates | base.html + héritage            |
+| Séparation logique/vue | filtrage côté Python            |
+| Navigation web         | cohérence UX simple             |
+| Lecture de données     | affichage structuré             |
+