Matière : STI

Prototype STI Enseignant:

Aymen Nasri
Classe : 4ème SI Epreuve pratique 4 pages Note:
..........................
Date : 19 Mai 2023 Durée : 120 min
NOM & PRENOM: ..................................... ..................................... Numéro: ..............

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 "www", un dossier de travail en le nommant "SW<votre nom et prenom>"
où seront enregistrés tous les documents à réaliser.
 de copier, dans son dossier de travail, le fichier "StiRessources.rar" situé dans "C:\Ressources", puis
d’extraire son contenu, en utilisant le mot de passe "azerty", dans ce même dossier de travail.
 de vérifier à la fin de l’épreuve que tous les fichiers créés sont dans son dossier de travail.

Une agence de voyages organise des croisières (voyages effectués par bateau) pour découvrir les
splendeurs du bassin méditerranéen. Afin de faciliter l’organisation et la gestion de ces croisières, le
responsable informatique utilise un service de réservation en ligne sur un site web dynamique.
On demande de créer le site web requis, qui assure les tâches suivantes:
 Ajouter une nouvelle réservation
 Lister les croisières disponibles selon des critères bien déterminés.

PARTIE A: Manipulation de la base de données

Soit la base de donnée simplifiée "Gestion_Croisiere0" définie par le schéma textuel manquant
suivant :
BATEAU (CodeBat, TypeBat, NomBat, Capacite)
VOYAGEUR (IdVoy, Nom, Prenom, Nationalite)
PAYS (CodePays, NomPays)
CROISIERE (CodeCrois, Tarif, DateDep, Duree, CodePays#, CodeBat#)

Ci-dessous est la description des champs des tables:

Nom champ Description Remarque
Codebat Code du bateau
Typebat Type du bateau
Nombat Nom du bateau
Capacité Capacité du bateau Nombre de passagers maximal
Idvoy Identifiant du voyageur Auto incrémentation
Nom Nom du voyageur
Prenom Prenom du voyageur
Nationalité Nationalité du voyageur
Codepays Code du pays
Nompays Nom du pays
codeCrois Code de la croisière
Tarif Tarif de la croisière En dinars
Datedep Date du départ pour la croisière
Durée Durée de la croisière Nombre de jours à passer
1. Créer une base de données intitulée "BD_Croisiere".

1
 2. Importer dans cette base de données, le fichier bd.sql situé dans votre dossier de travail.
3. Apporter à cette base de données les modifications suivantes:
a) Insérer les lignes suivantes dans la table croisière :

b) Ajouter à la base la table RESERVATION qui relie la table VOYAGEUR à la table CROISIERE
(représente une relation plusieurs à plusieurs entre les deux tables mères). La réservation
consignera aussi sur la DateRéservation et le ModePaiement (champs à ajouter dans la
table également
Remarque Utiliser le type enum pour le champ ModePaiement de la table Réservation afin
de limiter la saisie à 1 ou 2 ou 3.
Explication: 1 désigne en espèce, 2 désigne par chèque et 3 par virement bancaire.
4. Exporter la base sous le nom BD_croisiere_Finale.

Partie B: Création des documents web

Attention 
 Toutes les fonctions JavaScript doivent être enregistrées dans le fichier "controles.js".
 Toutes les règles CSS définissant des styles de mises en forme doivent être enregistrées dans le
fichier "style.css".
 Pour tous les formulaires à créer, le clic sur le bouton "Annuler" permettra l’initialisation de leurs
champs.

1) Créer la page "index.html" en respectant la disposition suivante :

Sachant que :

 Zone 1: Représente l’entête du site. Elle contient l'image "home.jpg" de votre dossier de
travail et qui représente un lien vers la page index.html + le titre "Réservation croisière en
ligne.." de niveau 1.
 Zone 2: Représente la section où se fait l’affichage des pages web. Elle contient par défaut
l'image "bateau.jpg" situé sur votre dossier de travail.
 Zone 3: Représente le volet de navigation. Elle contient les liens hypertextes suivants :
 Réserver une croisière: servira de lien vers la page reserver.html
 Afficher les croisières: servira de lien vers la page afficher.html

2) Ouvrir le fichier style.css et compléter les instructions permettant de:

2
  La partie zone 3 aura une couleur d'arrière plan lightcyan
 Les liens une fois visités subissent une transition de couleur (de votre choix).
 Appliquer un filtre d'image de votre choix sur l'image "home.jpg" qui flotte à droite et fixer sa taille
à 100 x 100 pixels.
 Respecter la disposition des zones exposée ci-dessus

PS: Etablir une liaison entre le fichier CSS et toutes les pages html du site.
3) Enregistrement d'une réservation :

A. Compléter la page "reserver.html" de votre dossier de travail, qui permet d’ajouter une nouvelle
réservation à la base de données via le formulaire suivant :

Pays : FRANCE, ITALIE,

GRECE, TURQUIE, ESPAGNE

Modes : Espèces,
Chèque, Virement

Sachant que le clic sur le bouton "Ajouter" fait appel :

1. A la fonction "verifier1" du fichier controles.js
2. au fichier "reserver.php"
B. Compléter la fonction "verifier1" du fichier "controle.js" afin de s’assurer de la validité des
champs du formulaire tout en respectant les contrôles suivants :
Champ Contrôle
Nom , prénom Chaines alphabétiques qui peuvent contenir un seul espace chacune
(ni au début ni à la fin) et de longueur ≤ 50
Nationalité Chaine alphabétique
Pays destination , mode Obligatoirement sélectionnés
paiement
Date désirée Supérieure à la date système
PS: En cas d'erreur afficher en alerte un message "vous devez choisir
une date superieur au <date systeme>"

C. Créer le fichier "reserver.php" permettant :

 D'ajouter un nouveau voyageur à la base si l'identificateur tapé n'existe pas dans la table
voyageur et d'afficher un message adéquat, sinon de mettre à jour les informations du
voyageur dont l'id est saisi.
ENSUITE,

3
  D'afficher le message "Pas de croisières programmées à cette destination à partir de la
date requise" si le pays demandé ne s'affiche à aucune croisière dans la table appropriée
CAS 1
OU si aucune croisière à partir de la date demandée n'existe vers le pays sollicité.

Ou bien

 D'ajouter la réservation à la table appropriée si le voyageur est enregistré et si le pays

destination et la date désirée correspondent à une ligne de la table croisière.
Sachant que:
 La date de la réservation correspond à la date système.
CAS 2  Si plusieurs croisières sont disponibles au pays destination à partir de la date
demandée, on cherche et réserve la croisière ayant la date départ la plus proche à la
date demandée.
 Afficher le message "Votre réservation est enregistrée le <date> et voici votre code de
validation <code>. Notez le SVP.Merci"

Le code de validation est formé par: idvoyageur + "-" + lettres initiales du nom et prénom en
minuscule + longueur code croisière + code pays

4) Affichage des croisières:

A. Créer la page "afficher.html" permettant à un voyageur de chercher des croisières suivant des
critères bien déterminés , via le formulaire suivant:

Le clic sur le bouton "Afficher" fait appel :

1. à la fonction "verifier2" déjà créée dans le fichier "controles.js"
2. à un fichier intitulé "afficher.php" permettant d'afficher le tableau ci-dessous avec toutes
les informations requises.

Date de la Nombre de
Num Pays Bateau
croisière voyageurs
Numéro Date départ de la Nom du pays Nom du bateau Nombre de personnes qui
séquentiel croisière destination ont déjà réservé la
croisière