Lycée Khaireddine Ariana

Professeur : Hanen Kassas Ghandri

Classe : 4 SI 2
Projet 1
Matière : STI
Année Scolaire : 2022/2023
STI
Le Projet consiste à développer une partie d’un site web pour un cabinet de formation qui met en ligne
une liste de formations proposées avec des descriptions des contenus, et un formulaire d’inscription.
Le visiteur du site pourra s’inscrire après avoir rempli le formulaire y afférent.
Partie I : Création d’un site Web Interactif :
1) Le site web doit avoir la structure suivante :

LOGO Titre
Menu de navigation

Présentation du cabinet

Liste des Formations

Liens de Contact

 Utiliser la structure d’un document HTML5 et les feuilles de style en cascade (CSS3) pour
appliquer un style au choix sur le site web tout en respectant le cahier de charge suivant :

Cahier de charge :

1) Page index :
La partie 1 : doit contenir :
• Le logo du cabinet.
• Un menu de navigation vers les sections : "Présentation" et "liste des formations".
• Un lien vers la partie liens de contact
• Un lien vers la page "Inscription".
Section 1 : "Présentation"
• Une présentation du cabinet et une Image (avec animation)
• Un bouton Inscrivez-vous (lien vers la page Inscription)
Section 2 : "Liste des formations"
Pour chaque formation disponible :
• Une image significative.
• Un résumé du contenu de la formation.
• Un bouton vers la page inscription.
Partie2 : contient des liens de contact : adresse électronique, profil Facebook, LinkdIn,
tweeter….
2) Page Inscription :
• Contient la partie1 et la partie 2 décrites préalablement.
• Le formulaire d’inscription.

1
 2) La Page "Inscription" avec le formulaire suivant

 L’appui sur le bouton "Envoyer" permet de valider le remplissage du formulaire sachant

que :
Le formulaire doit répondre aux contraintes suivantes :
Champs Id Contrainte
Tous les champs de Doivent être remplis sauf le champ « ajouter ville » qui
formulaire est facultatif
Civilité civ De type Bouton radio, un choix est obligatoire
Nom et prénom np De taille < 30 caractères.
Numéro de téléphone ntel Est composé de 8 chiffres et commence obligatoirement
par un des chiffres suivants : 9,7,5,2
Adresse email mail Est valide seulement si elle est de la forme "ch1@ch2.fr"
ou "ch1@ch2.com"
Email confirmation Mailconf Doit avoir obligatoirement le même contenu que le
champ email
Adresse adr Valide si elle contient une chaine de 2 mots (deux mots
séparés par un espace)
Ville ville Liste de sélection : le choix d’une ville est obligatoire
Code Postal cp Un nombre composé de 4 chiffres
Zone texte ajville Facultatif : permet à l’utilisateur de saisir le nom de sa
Ajout ville ville si elle n’existe pas dans la liste des villes.
bouton bajville Permet l’ajout du nom de la ville à partir du champ
« Ajouter votre ville » Ajout ville
Remarques rq Non vide et au plus 100 caractères
Le champ « reste » reste Affiche dynamiquement le nombre de caractères
(disabled) restants à taper dans la zone remarque
Case à cocher termes Lorsqu’elle est cochée, le bouton envoyé passe à l’état
actif
Le bouton « Envoyer » envoyer N’est actif que si l’utilisateur coche la case « j’accepte les
(disabled) termes et conditions
2
  L’appui sur le bouton "Ajouter votre ville " permet d’ajouter la ville saisie (dans la zone
"ajout ville") dans la liste des villes si elle n’existe pas, sinon affiche un
message d’alerte "Ville existe déjà !"
 Dans la zone "Remarque" on a un nombre limité de caractères mentionné dans la zone
"reste" qui se décrémente à chaque fois qu’on tape un nouveau caractère,
Lorsque on atteint le nombre maximal, la zone remarque sera désactivée.
 Le bouton "Envoyer" est désactivé par défaut, et il ne sera actif que si on coche la case
" j’accepte les termes et les conditions générales"
 Le message d’erreur doit être affiché en bas dans "la zone message d’erreur " en rouge.

Partie II : Gestion des données :

1. Créer une structure de données qui permet de sauvegarder les données relatives à chaque
inscription pour une formation de telle façon que :
 Chaque inscription soit identifiée d’une façon unique et non redondante.
 Toutes les données soient structurées et cohérentes.
 Chaque donnée respecte des règles de validité : type, taille, domaine…
 La persistance des données soit assurée.
 Elle facilite la mise à jour et assure la cohérence.
2. Si on veut enregistrer aussi dans cette structure les données relatives aux différents types de
formations disponibles dans le cabinet (libellé, durée en nombre d’heures, prix par heure…).
 Proposer des solutions pour structurer ces nouvelles informations et établir une
relation avec les inscriptions par type de formation.
3. Etablir une relation entre les inscriptions et les formations disponibles sachant qu’un visiteur
peut s’inscrire à plusieurs formations et qu’une formation est disponible pour plusieurs
visiteurs.

Partie III. Connexion entre la source de données et les pages web :

En utilisant un script côté serveur, établir la relation entre la source de données et les pages
web :
1. Dans la page "Inscription" :
 Après la validation du formulaire et l’appui sur le bouton Envoyer permet :
o L’ajout des informations envoyées dans la structure de données, et l’affichage d’un
message de la forme :
"Mr/ Mme "Nom Prénom" votre adresse : "Adresse" et tel : "Tel" votre inscription est bien
reçue !!! ".