Sujet type bac pratique STI n°4 : la location de vélos à Djerba

Partie A : création de la base de données (6 pts)

Le site utilise une base de données décrite par la représentation textuelle suivante :

• client (cin, nom, tel)
• velo (idVelo, modele, prixJour, dispo)
• location (idLoc, #cin, #idVelo, dateDeb, nbJours)

Description des champs :

• cin : chaîne de 8 caractères, numéro de la carte d'identité qui identifie un client ; idVelo : chaîne de 4 caractères, identifiant d'un vélo ; idLoc : entier auto-incrémenté ; tous les autres champs sont obligatoires.
• nom : chaîne de 40 caractères ; tel : chaîne de 8 caractères ; modele : chaîne de 30 caractères ; prixJour : entier, prix d'un jour en dinars, strictement positif ; dispo : entier, 1 si le vélo est disponible et 0 s'il est loué.
• dateDeb : date du début de la location ; nbJours : entier strictement positif, nombre de jours.

Lignes à insérer :

• client : (07111222, Rim Trabelsi, 22333444), (08999000, Omar Jaziri, 55666777) ;
• velo : (V001, VTT, 15, 0), (V002, Vélo de ville, 10, 1), (V003, Vélo électrique, 30, 1), (V004, VTT, 15, 1) ;
• location : (07111222, V001, 2026-07-02, 3), (08999000, V003, 2026-06-20, 2), (07111222, V002, 2026-06-10, 1).

• 1) Créer la base de données velos, ses tables et leurs relations, puis insérer les lignes données (4 pts).
• 2) Écrire la requête qui affiche, pour chaque client qui a loué, son nom et le montant total de ses locations (nombre de jours multiplié par le prix d'un jour), du plus grand montant au plus petit (2 pts).

Partie B : création des documents web (14 pts)

Consignes : toutes les fonctions JavaScript sont enregistrées dans mesControles.js ; toutes les règles CSS sont dans le fichier mesStyles.css, donné ci-dessous ; toutes les pages HTML sont reliées à mesStyles.css, et location.html est aussi reliée à mesControles.js. Le bouton « Annuler » d'un formulaire efface ses champs.

body { font-family: Georgia, serif; margin: 0; background-color: #fef9e7; }
header { background-color: #1f618d; color: #fdfefe; padding: 10px; }
nav { width: 19%; display: inline-block; }
section { width: 54%; display: inline-block; }
aside { width: 24%; display: inline-block; }
table { border-collapse: collapse; }
td, th { border: 1px solid #1f618d; padding: 4px; }
footer { text-align: center; }
iframe { width: 100%; height: 420px; border: none; }

• 1) Créer la page index.html reliée à mesStyles.css : un élément <header> contient le titre de niveau 1 « Vélos de Djerba » ; un élément <nav> contient deux liens, « Louer un vélo » vers location.html et « Nos vélos » vers velos.html, qui s'ouvrent dans le cadre fenetre ; un élément <section> contient le cadre (iframe) de nom fenetre, qui affiche par défaut location.html ; un élément <aside> contient un tableau de titre « Tarifs par jour », avec une ligne d'en-tête Modèle, Prix puis les lignes VTT 15 DT, Vélo de ville 10 DT et Vélo électrique 30 DT ; un élément <footer> contient « Houmt Souk, Djerba » (3 pts).
• 2) Créer la page location.html, reliée à mesStyles.css et à mesControles.js, avec un formulaire qui envoie ses champs à louer.php par la méthode POST et appelle verifier() avant l'envoi : numéro de carte d'identité (cin), vélo (liste idVelo dont les options ont pour valeurs V002, V003 et V004), date de début (dateDeb, de type date), nombre de jours (nbJours, nombre de 1 à 14), une case à cocher casque « Je veux un casque », et les boutons « Louer » et « Annuler » (3 pts).
• 3) Écrire dans mesControles.js la fonction nbJoursValide(n), qui reçoit le texte saisi et est vraie si c'est un entier de 1 à 14, et la fonction prixLocation(prixJour, nbJours) qui renvoie le prix à payer : le prix d'un jour multiplié par le nombre de jours, moins 10 % à partir de 7 jours, arrondi au dinar (Math.round) ; puis la fonction verifier() qui affiche un message (alert) et renvoie false si le nombre de jours n'est pas valide (4 pts).
• 4) Écrire la page louer.php, qui travaille sur la base de la partie A (connexion dans connexion.php, donné) : si aucun client n'a la carte reçue, elle affiche « Client inconnu » ; sinon, si aucun vélo n'a l'identifiant reçu, « Vélo inconnu » ; sinon, si le vélo n'est pas disponible, « Vélo déjà loué » ; sinon elle ajoute la location, rend le vélo indisponible (dispo = 0) et affiche « Location enregistrée : 3 jour(s), 45 DT » avec le nombre de jours et le prix calculé comme à la question 3 (round en PHP) (4 pts).

<?php
$cnx = mysqli_connect("localhost", "root", "", "velos");
?>

Pour essayer la page PHP sans la partie A, voici la base sur laquelle elle est vérifiée (les colonnes des tables, sans leurs contraintes) :

CREATE DATABASE velos;
USE velos;
CREATE TABLE client (cin CHAR(8) PRIMARY KEY, nom VARCHAR(40), tel CHAR(8));
CREATE TABLE velo (idVelo CHAR(4) PRIMARY KEY, modele VARCHAR(30), prixJour INT, dispo INT);
CREATE TABLE location (idLoc INT AUTO_INCREMENT PRIMARY KEY, cin CHAR(8), idVelo CHAR(4), dateDeb DATE, nbJours INT);
INSERT INTO client VALUES ('07111222', 'Rim Trabelsi', '22333444'), ('08999000', 'Omar Jaziri', '55666777');
INSERT INTO velo VALUES ('V001', 'VTT', 15, 0), ('V002', 'Vélo de ville', 10, 1), ('V003', 'Vélo électrique', 30, 1), ('V004', 'VTT', 15, 1);
INSERT INTO location (cin, idVelo, dateDeb, nbJours) VALUES ('07111222', 'V001', '2026-07-02', 3), ('08999000', 'V003', '2026-06-20', 2), ('07111222', 'V002', '2026-06-10', 1);