gauvainboiche
4.3 KiB
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é |