IHM, événements et démarche de projet · NSI Première (spé maths)

Composants et événements

Une interface homme-machine (IHM) permet à un utilisateur de dialoguer avec un programme. Elle est construite avec des composants graphiques (on dit aussi widgets) :

le bouton (<button>, Button) ;
la zone de saisie (<input type="text">, Entry) ;
la case à cocher et le bouton radio ;
la liste déroulante (<select>) ;
l'étiquette (Label), qui affiche du texte.

Quand l'utilisateur agit sur un composant, il déclenche un événement : clic, appui sur une touche, survol, saisie, envoi d'un formulaire. Le programme ne fonctionne donc pas de façon linéaire : il attend les événements et réagit. C'est la programmation événementielle.

En HTML, la description de la page (les balises) est séparée du comportement (le code, souvent en JavaScript) :

Prenons un bouton « Calculer » suivi d'un paragraphe vide pour le résultat. Dans la balise du bouton, l'attribut onclick relie l'événement « clic » à la fonction calculer. Le HTML dit ce qu'il y a dans la page, le JavaScript dit ce qui se passe quand on agit.

Voici le même principe en Python avec tkinter.

Conversion de kilomètres en milles

Objectif : une fenêtre avec une saisie, un bouton et une étiquette de résultat.

Composants : Entry (saisie), Button, Label.

Événement : le clic sur le bouton. On le relie à la fonction convertir avec command=.

Fonction de rappel :

import tkinter as tk

def convertir():

    try:

        km = float(saisie.get())

        milles = round(km * 0.621, 2)

        etiquette.config(text=f"{milles} milles")

    except ValueError:

        etiquette.config(text="Saisie invalide")

fenetre = tk.Tk()

saisie = tk.Entry(fenetre)

bouton = tk.Button(fenetre, text="Convertir", command=convertir)

etiquette = tk.Label(fenetre, text="")

saisie.pack(); bouton.pack(); etiquette.pack()

fenetre.mainloop()

mainloop() lance la boucle qui attend les événements. Le try/except traite le cas où l'utilisateur tape du texte au lieu d'un nombre.

Entraîne-toi★☆☆

Dans une interface graphique, on distingue des composants (widgets) et des événements. a) Citer trois composants graphiques usuels (par exemple : bouton, zone de saisie,…

Dans une interface graphique, on distingue des composants (widgets) et des événements.

a) Citer trois composants graphiques usuels (par exemple : bouton, zone de saisie, case à cocher).

b) Citer trois événements qu'un utilisateur peut déclencher.

c) Expliquer en une phrase le rôle d'une fonction de rappel (callback) associée à un bouton.

Résoudre

Entraîne-toi★★☆

On souhaite réaliser avec tkinter une petite IHM de conversion d'euros en dollars (taux : 1 € = 1,08…

On souhaite réaliser avec tkinter une petite IHM de conversion d'euros en dollars (taux : 1 € = 1,08 $).

a) Lister les composants nécessaires (étiquette, zone de saisie, bouton, zone d'affichage).

b) Décrire l'événement qui déclenche le calcul et la fonction de rappel associée.

c) Écrire la fonction de rappel qui lit la valeur saisie, calcule la conversion et gère le cas d'une saisie non numérique.

Résoudre

Entraîne-toi★★★

On modélise une IHM de jeu du morpion (grille 3 × 3) par un tableau de tableaux grille contenant "", "X" ou "O", et un bouton par case. a) Décrire les événements à gérer…

On modélise une IHM de jeu du morpion (grille 3 × 3) par un tableau de tableaux grille contenant "", "X" ou "O", et un bouton par case.

a) Décrire les événements à gérer et l'état à mémoriser (joueur courant, fin de partie).

b) Écrire une fonction gagnant(grille) qui renvoie "X", "O" ou None.

c) Écrire la fonction de rappel clic(i, j) qui joue un coup si la case est libre, en précisant les cas à traiter.

Résoudre

Formulaires et échanges client-serveur

Une page web fait intervenir deux machines :

le client (ton navigateur) affiche la page et exécute le JavaScript ;
le serveur reçoit une requête HTTP et renvoie une réponse.

Ce qui est exécuté dans le navigateur (affichage, contrôle rapide des champs) ne demande aucun aller-retour. Ce qui est exécuté sur le serveur (enregistrer une réservation, lire une base de données) se fait après l'envoi de la requête.

Un formulaire <form> envoie les valeurs des champs au serveur. L'attribut method choisit la méthode :

	GET	POST
Où sont les données ?	dans l'URL	dans le corps de la requête
Visible ?	oui (historique, favoris, journaux)	pas dans l'URL
Usage	recherche, filtre, page qu'on peut partager	connexion, inscription, envoi de données personnelles

Exemple de requête GET : /recherche?ville=Lyon&date=2025-06-14. Les paramètres suivent le ?, séparés par &, sous la forme nom=valeur.

La réponse du serveur contient un code de statut : 200 (succès), 404 (page introuvable), 500 (erreur du serveur), puis le contenu (souvent une page HTML).

Lire un formulaire

<form action="/connexion" method="post">

  <input type="text" name="login">

  <input type="password" name="mdp">

  <input type="submit" value="Entrer">

</form>

La méthode est post : la requête est POST /connexion, les données login=...&mdp=... sont dans le corps.

Avec get, l'URL deviendrait /connexion?login=Lea&mdp=1234 : le mot de passe serait écrit en clair dans la barre d'adresse et dans l'historique. On choisit donc POST.

Quelle serait l'URL avec method="get", login valant Hugo et mdp valant abc ? Écris-la dans ton cahier.

Réponse attendue : /connexion?login=Hugo&mdp=abc.

HTTPS est HTTP Sécurisé : les échanges sont chiffrés. Un attaquant qui écoute le Wi-Fi d'un café voit à quel serveur tu te connectes, mais pas le contenu des requêtes. HTTPS ne dit rien sur l'honnêteté du site, et il ne protège pas les données une fois arrivées sur le serveur.

Entraîne-toi★☆☆

Un formulaire web envoie des données à un serveur avec la méthode GET ou POST. a) Indiquer laquelle de ces deux méthodes place les données dans l'URL. b) Pour un…

Un formulaire web envoie des données à un serveur avec la méthode GET ou POST.

a) Indiquer laquelle de ces deux méthodes place les données dans l'URL.

b) Pour un formulaire de connexion avec mot de passe, quelle méthode choisir ? Justifier.

c) Que signifie le « S » de HTTPS et quel est son intérêt ?

Résoudre

Entraîne-toi★★☆

Une page web contient le formulaire suivant : a) Quelle requête HTTP est envoyée lors de la validation ? Où se trouvent les données ? b) Quelle serait l'URL de la…

Une page web contient le formulaire suivant :

<form action="/inscription" method="post">

  <input type="text" name="nom">

  <input type="email" name="mail">

  <input type="submit" value="Valider">

</form>

a) Quelle requête HTTP est envoyée lors de la validation ? Où se trouvent les données ?

b) Quelle serait l'URL de la requête si la méthode était get, avec nom valant Dupont et mail valant d@ex.fr ?

c) Expliquer ce que le serveur renvoie en réponse et le rôle du code de statut 200.

Résoudre

Entraîne-toi★★★

On étudie un site de réservation de billets de train de la région Occitanie. a) Expliquer pourquoi transmettre un numéro de carte bancaire par GET est dangereux, même en…

On étudie un site de réservation de billets de train de la région Occitanie.

a) Expliquer pourquoi transmettre un numéro de carte bancaire par GET est dangereux, même en HTTPS.

b) Expliquer ce que HTTPS protège effectivement contre un attaquant qui écoute le réseau d'un café, et ce qu'il ne protège pas.

c) Citer une vérification à faire côté serveur même si le formulaire contrôle déjà les champs côté navigateur, et justifier.

Résoudre

Démarche de projet

Le programme de NSI consacre au moins un quart du temps à des projets menés en équipe de 2 à 4 élèves. Un projet suit des étapes.

Cahier des charges : ce que le produit doit faire, pour qui, avec quelles limites.
Découpage en tâches et répartition dans l'équipe.
Planning avec des jalons (points d'étape) et des critères de validation.
Réalisation et tests.
Bilan : comparer le résultat au cahier des charges.

Un cahier des charges contient :

les utilisateurs visés (qui s'en sert ?) ;
les fonctionnalités attendues (ce que ça fait) ;
les contraintes (délai, langage, matériel, accessibilité).

Chaque exigence doit être vérifiable. « Une application agréable » ne l'est pas ; « on peut réserver une salle en trois clics au plus » l'est. Le nom du développeur ou la couleur d'un bouton choisie après les tests n'appartiennent pas au cahier des charges.

Pour le travail collaboratif : utiliser un gestionnaire de versions (par exemple Git) pour garder l'historique du code, se répartir des tâches indépendantes, et faire des revues où un autre membre relit et teste le code. À la fin, on dresse un tableau des exigences : remplie, partiellement remplie ou non remplie, puis on explique les écarts.

Entraîne-toi★☆☆

Une mairie de Strasbourg souhaite une application de réservation de salles. Parmi les éléments suivants, indiquer ceux qui relèvent du cahier des charges : (1) la liste…

Une mairie de Strasbourg souhaite une application de réservation de salles. Parmi les éléments suivants, indiquer ceux qui relèvent du cahier des charges : (1) la liste des fonctionnalités attendues, (2) le choix de la couleur d'un bouton après les tests, (3) les contraintes de délai, (4) le nom du développeur chargé de la page d'accueil, (5) les utilisateurs visés.

Résoudre

Entraîne-toi★★☆

Une équipe de trois élèves d'un lycée de Bordeaux conçoit un jeu de quiz en Python. a) Rédiger un court cahier des charges (quatre exigences au moins). b) Proposer un…

Une équipe de trois élèves d'un lycée de Bordeaux conçoit un jeu de quiz en Python.

a) Rédiger un court cahier des charges (quatre exigences au moins).

b) Proposer un découpage en tâches avec une répartition entre les trois élèves.

c) Décrire deux tests qui permettent de vérifier que le projet respecte le cahier des charges.

Résoudre

Entraîne-toi★★★

Un projet de calendrier partagé pour le club de théâtre d'un lycée de Nantes est confié à quatre élèves pendant huit semaines. a) Rédiger le cahier des charges…

Un projet de calendrier partagé pour le club de théâtre d'un lycée de Nantes est confié à quatre élèves pendant huit semaines.

a) Rédiger le cahier des charges fonctionnel (fonctionnalités, contraintes, utilisateurs).

b) Proposer un calendrier de projet avec jalons et critères de validation pour chaque jalon.

c) Expliquer comment organiser le travail collaboratif (versions du code, répartition, revues) et comment évaluer l'écart entre le résultat final et le cahier des charges.

Résoudre

Retour au début : en touchant le bouton, tu as déclenché un événement ; la fonction de rappel a envoyé une requête (en POST et en HTTPS pour tes données), le serveur a répondu avec un code 200 et une page. Une équipe organise tout cela grâce à un cahier des charges, des tâches et des jalons.

L'essentiel

Une IHM est faite de composants (bouton, saisie, case à cocher…) qui produisent des événements ; une fonction de rappel y réagit.
HTML décrit la page, le code (JavaScript, Python) définit le comportement.
Le client envoie une requête HTTP, le serveur renvoie une réponse avec un code de statut (200, 404…).
GET met les paramètres dans l'URL (visibles) ; POST les met dans le corps. HTTPS chiffre les échanges.
Le serveur doit revérifier toutes les données, même contrôlées côté navigateur.
Un projet s'organise autour d'un cahier des charges (utilisateurs, fonctionnalités, contraintes), de tâches, de jalons, de tests et d'un bilan.

À s'entraîner ! 9 exercices dans cette section

★☆☆ Dans une interface graphique, on distingue des composants (widgets) et des événements. a)…★☆☆ Un formulaire web envoie des données à un serveur avec la méthode GET ou POST. a)…★☆☆ Une mairie de Strasbourg souhaite une application de réservation de salles. Parmi les…