Sujet De Révision

STI
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 du serveur web local (c:\wamp\www), un dossier de travail en le nommant « SW< votre
nom> » où seront enregistrés tous les documents à réaliser.
 copier, dans le dossier de travail, le contenu du dossier « STI2025.rar » situé dans C:/Resources, puis extraire
son contenu dans le même dossier de travail, en utilisant le mot de passe "7yat52".
 s’assurer que le contenu est formé des fichiers : « diving_club.sql», «mesContrôles.js », «participation.html »,
«mesStyle.css », «carte.jpg », «plonge.jpg », « plongee.mp3 »
 vérifier à la fin de l’épreuve que tous les fichiers créés sont stockés dans le dossier de travail

Le club "Diving Club" est un club de plongées sous-marines. Chaque année, plusieurs plongeurs choisissent
cette destination pour découvrir et explorer sa beauté sous-marine. Le club offre à ses participants de choisir
le site de plongée. Pour ce faire, on demande de créer la partie du site Web permettant de réaliser les
opérations suivantes :
• Inscription d’un participant
• Participation à une plongée
Travail demandé
Partie A : Création de la base de données
Le concepteur de site utilise une base de données simplifiée décrite par la représentation textuelle suivante :
Maitre_plongeur (CinMait, NomMait, Experience)
Participant (CinPart, NomPart, Genre, AgePart)
Site (IdSite, NomSite, ProfondeurMax, PrixPlong)
Plongee (IdSite#, CinMait#, CinPart#, DateHeurePlong, Profondeur)
La description des différents champs est présentée dans le tableau suivant :
Champ Type et propriété Observation
CinMait Chaine de 8 caractères N° de la carte d’identité nationale d’un maître plongeur
NomMait Chaine de 50 caractères Nom et prénom d’un maître plongeur
Genre Caractère Genre d’un maître plongeur 'F' ou 'H'
CinPart Chaine de 8 caractères N° de la carte d’identité nationale d’un participant
NomPart Chaine de 50 caractères Nom et prénom d’un participant
AgePart Entier Age d’un participant
IdSite Entier (auto-incrémenté dans la Identifiant d’un site
table site)
NomSite Chaine de 50 caractères Nom d’un site
ProfondeurMax Décimal Profondeur maximale d’un site
PrixPlong Décimal Prix d’une plongée dans un site
DateHeurePlong DateHeure Date et Heure d’une plongée
Profondeur Décimal Profondeur de la plongée par défaut 1000
1) Créer cette base de données en lui attribuant le nom "BD<cotre nom>"
2) Importer le fichier "diving_club.sql"
3) En se référant à la représentation textuelle fournie, réaliser les tâches suivantes :
a- Créer les tables Participant et Plongee.
b- Etablir les relations entre les différentes tables.
4) Exporter cette base de données au format sql sous le nom "BD<cotre nom>"
Page1|5
Partie B : Création des documents Web
Consignes :
 Toutes les fonctions JavaScript doivent être enregistrées dans un fichier nommé
"mesControles.js"
 Toutes les règles CSS doivent être enregistrées dans le fichier "mesStyle.css"
 Toutes les pages HTML doivent être reliées au fichier " mesStyle.css "
 Les pages "inscription.html" et "participation.html" doivent être reliées au fichier
"mesControles.js"  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 "index.html" tout en la reliant au fichier "mesStyle.css" afin de respecter la disposition
ci-contre Sachant que :
 L’élément <h1> contient le texte : "Diving Club"
 L’élément <nav> représente le volet de navigation <header>
et contient la liste des liens hypertextes suivants : <h1>
• Inscription (servira de lien vers la page <nav>
"inscription.html")
• Participation (servira de lien vers la page
"participation.html") <main>
• Liste Participation (servira de lien vers la
page "ListePartcipation.php") <section> <aside>
 L’élément <section> représente la zone d’affichage
des différentes pages web et contient par défaut la
page "inscription.html" <footer>
 L’élément <aside> contient l’image "plonge.jpg"
situé dans votre dossier de travail ayant comme nom de class "pl".
 L’élément <footer> représente le pied de page et contient la liste à puces suivante :
 Téléphone : +216 73 333 333
 Email : [email protected]

b) Ajouter au fichier "mesStyle.css", 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
header Arriere-plan : dégradé linéaire du bleu vers blanc
h1 Police : Segeo UI
Taille : 80px
Couleur : sandybrown
Image de class pl Animation de transition de 3s
Bordure arrondis de 2%
au survol de souris Filtre : niveau de gris de 2
c) Insérer le fichier audio « plongee.mp3 ». Développer dans le fichier "mesControles.js" la fonction
JavaScript « soundPlay » qui permet de lancer la lecture du fichier audio « plongee.mp3 ». Cette
fonction est appelée lorsque la souris survole l’image "plonge.jpg".

Page2|5
 2) Inscription d’un participant
a) Créer la page "Inscription.html" qui permet la saisie des données relatives à un nouveau participant
via le formulaire suivant :

Sachant que :
 Les attributs "value" des boutons radio (Femme et Homme) relatifs au genre respectivement les
valeurs 'F' et 'H' at aucun bouton n’est sélectionné par défaut.
 Le champ de saisie relatif au libellé "Age" est de type number.
 Le clic sur le bouton "S’inscrire" fait appel à :
• une fonction JavaScript nommé "verifier".
• un fichier intitulé "inscription.php"
b) Ajouter au fichier "mesStyle.css", 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
label Style de police : italique
Affichage : inline-block
Largeur : 90px
Hauteur : 30px
c) Développer, dans le fichier "mesControles.js" la fonction verifier afin de s’assurer de la validité des
champs du formulaire tout en respectant les contrôles suivants :
Champ Contrôle
Tous les champs Obligatoires
Cin Une chaine formée de 8 chiffres
Age L’âge est compris entre 18 et 70
d) Créer le fichier "inscription.php" permettant :
 d’afficher le message "Participant déjà inscrit" dans le cas où la cin saisie existe déjà dans la base
de données.
ou bien
 d’insérer dans la table appropriée, les données relatives au nouveau participant, puis afficher le
message "Inscription réussie".
3) Participation à une plongée
a) Ouvrir la page "participation.html" et compléter les attributs de la balise <form> sachant que le clic
sur le bouton "Participer" fait appel à :
 une fonction JavaScript nommé "valider"

Page3|5
  un fichier intitulé "participation.php"
b) développer dans le fichier "mesControles.js", les fonctions suivantes :
 "choixSite(ch)"qui permet d’afficher dans le champ de saisie d’identifiant "site" la valeur du
paramètre ch qui représente le nom d’un site.
Cette fonction est appelée lors du clic sur l’un des éléments div d’identifiant s1, s2, s3 ou s4
comme le montre l’extrait suivant :
<div class ="sites" id="s1" onclick="choixSite('Bizerte')">Bizerte</div>
<div class ="sites" id="s2"
onclick="choixSite('Haouiria')">Haouiria</div>
<div class ="sites" id="s3" onclick="choixSite('Sousse')">Sousse</div>
<div class ="sites" id="s4" onclick="choixSite('Mahdia')">Mahdia</div>

 "valider" permettant de s’assurer de la validité des champs du formulaire tout en respectant les
contrôles suivants :
Champ Contrôle
Tous les champs Obligatoires
Cin Une chaine formée de 8 chiffres
Date Supérieure à la date courante du système
Heure A la valeur 6 ou 9
cinMait Reçoit une valeur aléatoire du tableau cinMaits
c) Créer le fichier "participation.php" permettant :
 d’afficher le message "Participant inexistant" dans le cas où le cin n’existe pas dans la base.
ou bien
 d’afficher le message "Participation déjà enregistrée" dans le cas où le trio formé par (cin, idSite,
date) existe dans la base de données.
ou bien
 d’insérer les données relatives à la participation à une plongée, puis d’afficher le message
"Participation ajouté avec succès". 4) Liste des Participations
Créer le fichier "listeParticipation.php" qui permet d’afficher dans un tableau (la cin et le nom du
Participant, la cin et le nom du Maitre Plongeur, Nom du site, Date de plongee) des plongee dont la date est
supérieure à la date courante du système, ordonnée par l’identifiant du site comme le montre la figure
suivante.

Grille d’évaluation
Partie A Partie B

Q 1 2 3 4 consignes 1 2 3 4

a b a b c a b c d a b c
P 0.25 0.25 1.5 0.75 0.25 0.5 1.25 0.75 1 2 0.5 1.5 2.5 0.5 2 2.5 2

Page4|5
Page5|5