Un mini-site à trois pages

LABO-U6-S2-05

Contexte — Vous travaillez pour la société qui reprend l'informatique de TechnoVert. Karim Benali, le responsable d'atelier, veut que ses techniciens saisissent leurs interventions sur une page web, et plus sur un tableur.

Un collègue a préparé le squelette du site : les adresses, les pages HTML et la feuille de style. Il reste à écrire le code Python qui fait tourner chaque page.

À la fin de ce labo, vous saurez écrire les vues d'un site Flask. Elles affichent une liste, traitent un formulaire et protègent une page. Vous saurez aussi lire une erreur serveur.

Comment ça se valide — à chaque point de contrôle, vous montrez votre résultat au formateur. Il valide, puis vous passez à la suite.

Les mots de la séance

Ce dont vous avez besoin

• Votre poste Windows, avec Python, Flask, VS Code et un navigateur.
• Annexe A1 : le mini-site de départ et son mode d'emploi. Le dossier se télécharge depuis l'annexe A1, dans le fichier A1_mini_site.zip.
• Annexe A2 : les gabarits du mini-site.
• Annexe A3 : les données de TechnoVert et les comptes de test.
• Annexe A4 : un extrait de la documentation de Flask, avec les conditions dans les gabarits.
• Annexe A2 : des gabarits complets, à prendre comme modèles.

En binôme — le pilote tape, le lecteur lit les consignes et les annexes à voix haute, et vérifie chaque résultat. On inverse à la partie C.

Le plan du labo

PARTIE A — Afficher la liste

Étapes 1 à 6, environ 25 min. À la fin, la page /chantiers affiche les six chantiers de TechnoVert.

Besoin d'un rappel ? Revoir le cours : « Route, vue, gabarit : le chemin d'une page ».

• Téléchargez A1_mini_site.zip depuis l'annexe A1.
• Faites un clic droit sur le fichier, puis « Extraire tout ». Avec « Parcourir », choisissez votre dossier « Documents ».

Vous devez voir : un dossier mini-site dans « Documents ». Il contient app.py, chantiers.json, donnees.py, et les dossiers static et templates.

VS Code sert à la fois à modifier le code et à lancer le serveur.

• Ouvrez VS Code. Menu « Fichier », puis « Ouvrir le dossier ». Choisissez Documents\mini-site.
• Ouvrez un terminal : menu « Terminal », puis « Nouveau terminal ». Tapez :

ls

Vous devez voir : la liste des fichiers du dossier, dont app.py et templates.

• Dans le terminal, tapez :

python -m flask --app app run --debug

Les options de cette commande sont expliquées dans l'annexe A1.

Vous devez voir : entre autres ces lignes.

 * Running on http://127.0.0.1:5000
 * Debugger is active!

• Dans votre navigateur, ouvrez http://127.0.0.1:5000/chantiers.

Vous devez voir : le texte « Page des chantiers : à écrire ». La route existe, mais sa vue n'est pas écrite.

Ce terminal reste ouvert jusqu'à la partie D. En mode développement, le serveur recharge seul le code à chaque enregistrement.

Un gabarit a des trous. La vue doit lui donner les bonnes données, sous le bon nom.

• Ouvrez l'annexe A2 et lisez le gabarit chantiers.html.
• Notez le nom de la liste que le gabarit parcourt dans sa boucle for :
• Notez les cinq clés que le gabarit lit pour chaque chantier :

Vous devez avoir : un nom de liste, et cinq clés. Vous les retrouverez dans le code de l'étape 5.

Voici la vue complète. Elle lit les chantiers, puis les passe au gabarit sous le nom attendu.

• Dans VS Code, ouvrez app.py depuis la liste des fichiers, à gauche.
• Remplacez le corps de liste_chantiers() par ces deux lignes, avec quatre espaces devant chacune :

    chantiers = donnees.lire_chantiers()
    return render_template("chantiers.html", chantiers=chantiers)

• Enregistrez avec Ctrl+S. Rechargez la page dans le navigateur.

Vous devez voir : le titre « Les chantiers », la phrase « 6 chantier(s). » et un tableau de six lignes. La première est « Arrosage du parc de la mairie ».

• Dans le navigateur, affichez le code source de la page : Ctrl+U.
• Cherchez le mot lire_chantiers dans le code source avec Ctrl+F.

Vous devez voir : aucun résultat. Le code source contient seulement du HTML, avec une balise <tr> par chantier.

PARTIE B — Recevoir un formulaire

Étapes 7 à 12, environ 30 min. À la fin, une intervention saisie dans la page est enregistrée par le serveur.

Besoin d'un rappel ? Revoir le cours : « Recevoir une saisie et la vérifier ».

La page /saisir reçoit deux sortes de requêtes. En GET, on affiche le formulaire vide. En POST, on reçoit la saisie.

• Ouvrez l'annexe A2 et lisez la liste des données qu'attend le gabarit saisir.html.
• Dans app.py, remplacez le corps de saisir() par :

    chantiers = donnees.lire_chantiers()
    if request.method == "GET":
        return render_template("saisir.html", chantiers=chantiers, services=donnees.SERVICES,
                               erreurs=[], saisie={}, message=None)

• Enregistrez, puis ouvrez /saisir dans le navigateur.

Vous devez voir : le formulaire, avec six chantiers dans le premier menu et trois services dans le second.

Il faut maintenant lire ce que le technicien a tapé. La méthode est dans la documentation.

• Ouvrez l'annexe A4.
• Trouvez l'objet qui contient les champs envoyés dans le corps d'une requête POST. Notez son nom :
• Trouvez l'objet qui contient les données envoyées dans l'adresse. Notez son nom :

Vous devez avoir : deux noms qui commencent par request.. Le premier sert à l'étape 9.

Pour l'instant, il n'y a pas de connexion. Le technicien s'appelle donc « test ». La partie C remplacera ce nom par le vrai.

• Ajoutez ces lignes à la fin de saisir(), sous le bloc if de l'étape 7 :

    saisie = request.form
    numero = donnees.ajouter_intervention(int(saisie["chantier"]), "test", saisie["service"],
                                          saisie["date"], float(saisie["duree"]),
                                          saisie["description"], saisie["blocage"])
    return render_template("saisir.html", chantiers=chantiers, services=donnees.SERVICES,
                           erreurs=[], saisie={}, message=f"Intervention n° {numero} enregistrée.")

• Enregistrez le fichier.

Vous devez voir : la page /saisir s'affiche toujours. Aucune trace d'erreur dans le premier terminal.

• Dans le formulaire, choisissez le chantier 3, le service « atelier », la date 2026-09-29, la durée 2.5 et la description « Contrôle des bornes ». Laissez le blocage vide. Cliquez sur « Enregistrer ».

Vous devez voir : le message vert « Intervention n° 13 enregistrée. ».

• Ouvrez un second terminal avec le bouton « + » du panneau Terminal. Le premier fait toujours tourner le serveur.
• Vérifiez que le fichier de données a changé :

Select-String "Contrôle des bornes" chantiers.json

Vous devez voir : une ligne qui contient "description": "Contrôle des bornes", précédée du nom du fichier et du numéro de la ligne.

• Regardez la barre d'adresse du navigateur, juste après votre envoi. Notez l'adresse affichée :
• Ouvrez maintenant /chantiers?service=atelier.
• Dans le premier terminal, cherchez dans le journal du serveur la ligne POST /saisir et la ligne GET /chantiers?service=atelier. Ignorez les lignes /static/style.css et /favicon.ico. Elles ressemblent à :

127.0.0.1 - - [29/Sep/2026 14:02:11] "POST /saisir HTTP/1.1" 200 -
127.0.0.1 - - [29/Sep/2026 14:03:40] "GET /chantiers?service=atelier HTTP/1.1" 200 -

Vous devez voir : la saisie n'apparaît nulle part dans l'adresse ni dans le journal. Le mot atelier, lui, apparaît dans les deux.

• Remplissez le formulaire avec le chantier 3, le service « atelier », la date 2026-09-29 et la durée deux heures. Cliquez sur « Enregistrer ».

Vous devez voir : une page d'erreur de Flask. Tout en bas, la ligne ValueError: could not convert string to float: 'deux heures'.

• Notez la ligne de app.py indiquée juste au-dessus de cette dernière ligne :

PARTIE C — Vérifier et protéger

Étapes 13 à 18, environ 40 min. À la fin, les saisies fausses sont refusées avec un message, et seuls les salariés connectés peuvent saisir.

Besoin d'un rappel ? Revoir le cours : « Se souvenir de l'utilisateur : la session ».

Changez de rôle : le lecteur devient pilote.

On vérifie chaque champ avant d'enregistrer. Chaque erreur trouvée va dans une liste. Voici les deux premières vérifications, écrites en entier.

• Dans saisir(), remplacez les lignes de l'étape 9, de saisie = request.form jusqu'à la fin, par :

    saisie = request.form
    erreurs = []

    chantier = None
    if saisie["chantier"].isdigit():
        chantier = donnees.lire_chantier(int(saisie["chantier"]))
    if chantier is None:
        erreurs.append("Choisissez un chantier.")
    elif chantier["statut"] == "cloture":
        erreurs.append("Ce chantier est clôturé : saisie refusée.")

    duree = 0
    try:
        duree = float(saisie["duree"])
        if duree <= 0 or duree > 12:
            erreurs.append("La durée doit être entre 0 et 12 heures.")
    except ValueError:
        erreurs.append("La durée doit être un nombre, par exemple 2.5.")

    # étape 14 : vos trois vérifications ici

    if erreurs:
        return render_template("saisir.html", chantiers=chantiers, services=donnees.SERVICES,
                               erreurs=erreurs, saisie=saisie, message=None)

    numero = donnees.ajouter_intervention(chantier["id"], "test", saisie["service"],
                                          saisie["date"], duree,
                                          saisie["description"], saisie["blocage"])
    return render_template("saisir.html", chantiers=chantiers, services=donnees.SERVICES,
                           erreurs=[], saisie={}, message=f"Intervention n° {numero} enregistrée.")

• Enregistrez, puis renvoyez la saisie fausse de l'étape 12.

Vous devez voir : le formulaire revient, avec le message rouge « La durée doit être un nombre, par exemple 2.5. ». Les champs déjà remplis sont gardés.

Chaque vérification tient en deux lignes : un if, puis erreurs.append(...). Voici la première, écrite en entier. Elle refuse un service qui n'est pas dans la liste.

    if saisie["service"] not in donnees.SERVICES:
        erreurs.append("Choisissez un service dans la liste.")

• Sur ce modèle, écrivez les deux autres. Aidez-vous du tableau « Quelques outils Python du labo » des RAPPELS : len(x) donne la longueur d'un texte, x.strip() enlève les espaces.

• Écrivez vos trois vérifications dans app.py, à la place du commentaire # étape 14, puis enregistrez.

Vous devez voir : la page /saisir s'affiche toujours, sans trace d'erreur.

• Envoyez chaque saisie du tableau. Pour chacune, notez ce que la page affiche.

Vous devez voir : exactement le résultat attendu sur chaque ligne. La dernière affiche un numéro d'intervention.

La connexion vérifie le compte, puis écrit le login dans la session. La fonction verifier_compte() est fournie : l'annexe A1 la décrit.

• Remplacez le corps de connexion() par :

    if request.method == "POST":
        login = request.form["login"]
        if donnees.verifier_compte(login, request.form["mot_de_passe"]):
            session["login"] = login
            return redirect(url_for("liste_chantiers"))
        return render_template("connexion.html", erreur="Identifiant ou mot de passe incorrect.")
    return render_template("connexion.html", erreur=None)

• Remplacez le corps de deconnexion() par ces deux lignes :

    session.clear()
    return redirect(url_for("connexion"))

• Ouvrez /connexion et connectez-vous avec un compte de l'annexe A3.

Vous devez voir : vous arrivez sur la liste des chantiers. Le bandeau affiche « Connecté : » suivi de votre identifiant.

Une page protégée regarde la session avant tout le reste.

• Ajoutez ces deux lignes au tout début de liste_chantiers() et au tout début de saisir(), avant toute autre ligne du corps :

    if "login" not in session:
        return redirect(url_for("connexion"))

• Dans saisir(), dans l'appel à ajouter_intervention, remplacez "test" par session["login"]. Enregistrez.

Vous devez voir : tant que vous êtes connecté, les deux pages s'affichent comme avant.

• Faites chaque essai du tableau, dans l'ordre. Après chaque essai, cherchez dans le journal du premier terminal la ligne de la requête que vous venez de faire : GET /saisir ou POST /connexion. Relevez le code de trois chiffres à la fin de cette ligne. Les lignes qui suivent viennent du navigateur, qui charge la page suivante, style.css et favicon.ico : ignorez-les. Attention : une connexion ratée renvoie 200, car la page est réaffichée avec le message.

• Ouvrez les outils du navigateur avec F12. Dans l'onglet « Application » ou « Stockage », ouvrez « Cookies ».

Vous devez voir : un cookie nommé session, avec une valeur en trois morceaux séparés par des points.

PARTIE D — Lire une erreur serveur

Étapes 19 à 22, environ 20 min. À la fin, vous savez où lire une erreur, et ce que voit l'utilisateur en production.

Besoin d'un rappel ? Revoir le cours : « Quand le serveur plante ».

Un collègue a écrit une page /bilan qui additionne les heures. Elle plante.

• Ouvrez /bilan dans le navigateur.
• Lisez la trace par le bas. Notez le type d'erreur et la valeur entre guillemets :
• Notez le numéro de la ligne de app.py qui plante :

Vous devez voir : une page d'erreur de Flask, avec des morceaux du code de app.py.

• Regardez le premier terminal, celui du serveur.

Vous devez voir : la même trace, et une ligne qui se termine par "GET /bilan HTTP/1.1" 500 -.

• Notez le code de réponse de cette ligne :

• Dans le premier terminal, arrêtez le serveur avec Ctrl+C.
• Relancez-le sans le mode développement :

python -m flask --app app run

• Rechargez /bilan dans le navigateur.

Vous devez voir : seulement « Internal Server Error », et une phrase en anglais. Aucune ligne de code. La trace complète est toujours dans le terminal.

La ligne fautive lit une clé qui n'existe pas. Le nom juste est dans la description des données.

• Ouvrez l'annexe A3. Trouvez le nom exact de la clé qui contient la durée d'une intervention. Notez-le :
• Corrigez la ligne de bilan() avec ce nom. Enregistrez.
• En mode production, le serveur ne recharge pas le code seul. Arrêtez-le avec Ctrl+C, relancez-le, puis rechargez /bilan.

Vous devez voir : la phrase « Total des heures saisies : » suivie d'un nombre d'heures.

POUR ALLER PLUS LOIN

10 à 15 min, si vous avez fini avant la fin de la séance.

Un collègue a demandé à une IA d'écrire une page de connexion. Voici ce qu'elle a produit. Le code marche, mais il contient trois erreurs dangereuses.

@app.route("/connexion")
def connexion():
    login = request.args.get("login")
    mot_de_passe = request.args.get("mot_de_passe")
    if login and donnees.verifier_compte(login, mot_de_passe):
        session["login"] = login
        session["mot_de_passe"] = mot_de_passe
        return redirect(url_for("liste_chantiers"))
    return render_template("connexion.html", erreur=None)

if __name__ == "__main__":
    app.run(host="0.0.0.0", debug=True)

• Trouvez les trois erreurs avant la mise en production. Pour chacune, notez la ligne et le danger.

CE QU'IL FAUT RETENIR

1. La vue passe les données au gabarit sous le nom exact que le gabarit attend.
2. Chaque champ reçu est du texte : on le vérifie, on le convertit, et on prévoit l'échec.
3. Une page protégée vérifie la session en premier. En production, pas de --debug : la trace reste dans le journal.