Lycée Secondaire Mahmoud el Devoir de contrôle N°5

Messaâdi, Ettadhamen, ARIANA

*********************
**************** CLASSE : 4ème Sciences Informatique
********* EPREUVE : Systèmes et technologies de l’informatique (STI)
ENSEIGNANTE : Merevet Hakiri
Date : ……/04/ 2025 Durée : 2H
Nom et Prénom :……………………………………………………………….. Note :……………./20

Important :
 Toutes les ressources à utiliser se trouvent dans le répertoire "Ressources" situé sur la racine du disque C.
 Il est demandé au candidat :
✓ de créer, dans le répertoire "htdocs", un dossier de travail en le nommant "SW<nomprénom>" où
seront enregistrés tous les documents à réaliser.
✓ de copier, dans son dossier de travail, le fichier "[Link]" situé dans "C:\Ressources",
puis d’extraire son contenu dans ce même dossier de travail, en utilisant le mot de passe "123456".
✓ de vérifier à la fin de l’épreuve que tous les fichiers créés sont dans son dossier de travail.
_______________________________________________________________________________
Mise en situation :
Pour optimiser la gestion des places de parking en ville, on propose de développer une application web permettant aux
utilisateurs de réserver des places de parking en temps réel et aux gestionnaires de suivre l’occupation des parkings.
Partie A : Création de la base de données
Utilisateur (idU, nomU, mailU, mdpU, telU)
Voiture (immat, marque, modele, idU#)
Parking (idP, nomP, adresseP, nbPlacesTot, nbPlacesDispo, tarifHoraire)
Reservation (idR, dateR, heureArrivee, heureDepart, idU#, idP#, immat#)
La description des champs est présentée dans le tableau suivant :
Champ Type et propriétés Description
idU Chaine de 8 caractères Identifiant de l’utilisateur
nomU Chaîne de 30 caractères Nom complet de l’utilisateur
mailU Chaîne de 50 caractères Email de l’utilisateur qui est unique
mdpU Chaîne de 6 caractères Mot de passe de l’utilisateur
telU Chaine de 12 caractères Numéro de téléphone de l’utilisateur
immat Chaîne de 20 caractères Numéro de l’immatriculation de la voiture
marque Chaîne de 20 caractères Marque de la voiture
modele Chaîne de 10 caractères Modèle de la voiture
idP Entier (auto-incrémenté) Identifiant du parking
nomP Chaîne de 30 caractères Nom du parking
adresseP Chaîne de 50 caractères Adresse du parking
nbPlacesTot Entier Nombre total de places du parking
nbPlacesDispo Entier Nombre de places disponible dans le parking
tarifHoraire Décimal (5,3) Tarif horaire en DT
idR Entier (auto-incrémenté) Identifiant de la réservation
dateR Date Date de réservation de la place disponible dans le parking
heureArrivee Heure Heure d’arrivée de la voiture au parking
heureDepart Heure Heure du départ de la voiture du parking
1) Créer cette base de données en lui attribuant le nom "BD<nom & prenom>".
2) En se référant à la représentation textuelle fournie, réaliser les tâches suivantes :
a) Créer les tables de cette base de données.
b) Etablir les relations entre les différentes tables.

Page 1 sur 5
3) Insérer les lignes suivantes dans les tables Utilisateur, Voiture et Parking
Table Utilisateur
idU nomU mailU mdpU telU
0822334 Ben Ali Mohamed [Link]@hotmail.f med12? +21655678987
4 r
B123456 Essid Leila [Link]@[Link] 12345* 23659874
Table Voiture
immat marque modele idU
240TU1234 clio KWID B123456
Table Parking
idP nomP adresseP nbPlacesTot NbPlacesDispo tarifHoraire
1 Parking El kasbah 47 El kasbah, Tunis 200 150 2.250
2 Parking rue de Paris 51 rue de Paris, Tunis 350 229 3.000
3 Parking Palmarium 71 rue palmarium, Tunis 150 12 2.000
4) Exporter cette base de données au format CSV sous le nom "BD<nom & prenom>".
Partie B : Création des documents web
Consignes : a. Toutes les fonctions JavaScript doivent être enregistrées dans un fichier nommé "[Link]".
b. Toutes les règles CSS doivent être enregistrées dans le fichier "[Link]".
c. Toutes les pages HTML doivent être reliées au fichier "[Link]".
d. Toutes les pages "html" doivent être reliées au fichier "[Link]".
e. Le clic sur le bouton "Annuler" de chaque formulaire à créer, permet d’initialiser les champs.
1) Création de la page index du site
a) Créer la page "[Link]" tout en la reliant au fichier "[Link]" afin de respecter la disposition ci-contre.
 Zone 1 : un element <header> qui contient un titre de niveau 1 qui
contient le texte : « SmartPark, Réservez votre place en un clic ! ».
 Zone 2 : un élément <nav> représente le volet de navigation et
contient les liens hypertextes suivants :
- Ajout d’un utilisateur (servira de lien vers "[Link]").
- Réserver une place (servira de lien vers "[Link]").
 Zone 3 : un élément <section> qui fait partie du <main> représente
la zone d’affichage des différentes pages web et contient par défaut la
page "[Link]".
 Zone 4 : un élément <aside> qui fait partie du <main> et affiche par défaut une vidéo "samrtpark.mp4" située
dans votre dossier de travail, un output pour afficher l’état de la vidéo et un bouton « play ».
 Zone 5 : un élément <footer> représente le pied de page du site et contient l’adresse email suivante :
"contact@[Link]".
b) Ajouter au fichier "[Link]", les règles permettant d’appliquer aux éléments de cette page, les mises en
forme spécifiées dans le tableau suivant :
Elément Mise en forme
Le titre Centré, avec une transition qui se déclenche au survol de la souris permettant d’augmenter la taille
en 36px et changer la couleur en rouge. La transition démarre après 1 seconde et dure 4 secondes.
Les liens du Afficher les liens centrés sur une même ligne avec une marge intérieure à droite et à gauche de 20px.
nav Couleur des liens actifs : #A9A9A9
Ombre sur les textes des liens avec les valeurs suivantes : 2px 2px 4px red
Supprimer le soulignement des liens
Transformer les premières lettres des mots qui composent chaque lien en majuscule
Page 2 sur 5
 Pied de page Alignement du texte : centré
c) Développer, dans le fichier "[Link]" les 4 fonctions suivantes afin d’effectuer les traitements ci-dessous :
Elément Evènement déclencheur Fonction JS Traitement
- Désactiver le bouton « play »
Vidéo en lecture "act1" - Activer le bouton « pause »
- Affiche le message « Vidéo en lecture » en vert
Vidéo
- Désactiver le bouton « pause »
Vidéo en pause "act2" - Activer le bouton « play »
- Affiche le message « Vidéo en pause » en rouge
Bouton play Lors du clic "vidplay" Mettre la vidéo en play
Bouton "vidpause"
Lors du clic Mettre la vidéo en pause
pause

2) Ajout d’un utilisateur

a) Créer la page "[Link]" qui permet la saisie des données relatives à un nouveau membre via le formulaire
suivant :

Sachant que :
 Les attributs "value" des boutons radio (N°CIN et N°Passeport) ont respectivement les valeur "cin" et "pass"
et aucun bouton n’est sélectionné par défaut.
 Les champs de saisi relatif aux libellé « Identifiant », « Nom », « Email » et « Téléphone » sont de type texte.
 Le champ de saisi relatif au libellé « Mot de passe » est de type password.
 Le clic sur le bouton "Ajouter" fait appel à :
o Une fonction JavaScript nommée "verif".
o Un fichier nommé "[Link]".
b) Ajouter au fichier "[Link]", les règles permettant d’appliquer aux éléments de cette page, les mises en forme
spécifiées dans le tableau suivant :
Elément Mise en forme
Tous les champs du formulaire Interligne : 2
Style : Gras
Tous les boutons du formulaire Largeur : 100px
Arrondissement des coins : 10px
c) Développer, dans le fichier "[Link]", la fonction "verif" afin de s’assurer de la validité des champs
du formulaire tout en respectant les contrôles suivants :
Champ Contrôle
Un moyen d’identification doit être sélectionné (CIN ou Passeport).
 Si "CIN" est choisi la valeur saisie dans la zone de texte doit être une chaine numérique
Identifiant utilisateur de taille 8 et commence obligatoirement par "0".
 Si "Passeport" est choisi la valeur saisie dans la zone de texte doit être une chaine qui
commence par une lettre majuscule suivi de 6 chiffres.
Lorsque le champ perd le focus une fonction nommée « correction » s’exécute permettant
Nom et prénom
de supprimer les espaces au début et à la fin ainsi que les espaces superflus.
Page 3 sur 5
 Email Une chaine qui contient obligatoirement un seul caractère "@".
Mot de passe Une chaine de 6 caractères et qui se termine par l’un des caractères spéciaux suivants :
"*", " ?" et "/"

d) Créer le fichier "[Link]" permettant :

 d’afficher le message « Utilisateur déjà existant » dans le cas où l’email saisi existe déjà dans la base,
ou bien
 d’insérer dans la table appropriée, les données relatives au nouvel utilisateur, puis d’afficher le message
« L’utilisateur <nom> est ajouté avec succès » dans le cas où l’ajout est effectué sinon afficher le message
« Echec d’ajout ».

3) Réserver une place

a) Créer la page "[Link]" qui permet la saisie des données relatives à une réservation d’une place de
parking via le formulaire suivant :

Champ (A)

Sachant que :
 Les éléments de la liste déroulante relatifs aux parkings ont les propriétés suivantes :
Elément L’attribut "value"
Parking El kasbah 1
Parking rue de Paris 2
Parking Palmarium 3
 Le champ de saisi relatif aux libellés « Email » et « Numéro d’immatriculation » sont de type texte.
 Le champ de saisi relatif au libellé « Mot de passe » est de type password.
 Le champ de saisi relatif au libellé « Date réservation » est de type date.
 Le champ de saisi relatif au libellé « Heure » est de type time.
 Le champ de saisi relatif au libellé « Durée » est de type range avec des valeurs varient entre 1 et 12.
 Le champ (A) est un champ de saisie de type texte en lecture seule permettant d’afficher la valeur
sélectionnée du range.
 Le clic sur le bouton "Réserver" fait appel à :
o Une fonction JavaScript nommée "verif2".
o Un fichier nommé "[Link]".
b) Appliquer les mêmes styles CSS définis dans la question 2-b (Partie B).

c) Développer, dans le fichier "[Link]", les fonctions suivantes :

 "affiche" permettant d’afficher la valeur sélectionnée du champ range, dans le champ (A), dès qu’elle change.

Page 4 sur 5
  "verif2" afin de s’assurer de la validité des champs du formulaire tout en respectant les contrôles suivants :
Champ Contrôle
Choisir un parking Sélection obligatoire d’un parking.
Email Même contrôle défini dans la question 2-c (Partie B).
Mot de passe Même contrôle défini dans la question 2-c (Partie B).
Date réservation
Heure Non vide.
Champ (A)
Une chaine de caractères ayant le format suivant : « aTUb » avec :
Numéro
 a est une chaine de 3 chiffres
d’immatriculation
 b est un nombre entre 1 et 9999

d) Créer le fichier "[Link]" permettant :

 d’afficher le message « Pas de places disponibles dans ce parking » dans le cas où le nombre de places
disponibles dans le parking sélectionné est égal à 0,
ou bien
 d’afficher le message « Utilisateur inexistant » dans le cas où l’email et le mot de passe saisis n’existent pas
dans la base,
ou bien
 d’afficher le message « Voiture inexistante » dans le cas où l’immatriculation saisie n’existe pas dans la base,
ou bien
 d’insérer dans la table appropriée, les données relatives à la nouvelle réservation et mettre à jour le nombre de
places disponibles dans la table « Parking », puis d’afficher le message « Ajout et mise à jour effectués avec
succès » si l’ajout et la mise à jour sont effectués sinon le message « Echec de mise à jour » ou le message
« Echec de réservation ».
N.B : le champ « heureDepart » dans la table « Réservation » sera calculé à partir de l’heure d’arrivée et la
durée.

Bon travail

Page 5 sur 5