Lycée Menzah6 4STI

Projet 2 - 4 STI
Professeurs : Olfa Njeh
Kaouther Thabet

HTML5, CSS3, JS, BD et PHP

Le Projet consiste à développer une partie d’un site web pour un centre 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 des documents Web :

1) La page index du site

a) Créer la page "Index.html" en respectant la disposition suivante :

Sachant que :
 Zone1 : un élément <header> qui représente l’entête du site et contenant le texte "
Centres et Instituts de Formations en Tunisie" comme étant un titre de niveau 1 et un
logo du site.

 Zone2 : un élément <nav> qui représente le volet de navigation et contenant les liens
hypertextes suivants :
 Accueil (servira de lien vers la page "Accueil.html").
 Nos Formations (servira de lien vers la page "Formations.html").
 S’inscrire (servira de lien vers la page "Inscription.html").
 Zone3 : un élément <section> qui représente la zone d’affichage des différentes pages
web et contenant par défaut la page "Accueil.html".
 Zone4 : un élément <footer> qui représente le pied de page du site et contenant le texte
suivant "Contact :00216 33 100 100", une adresse mail "formationTunisie@yahoo.fr" et
trois icônes de réseaux sociaux.
1
Lycée Menzah6 4STI

b) Ajouter les règles de style CSS suivantes :

 Appliquer sur le logo du site une transition d’une seconde avec un effet de départ et
arrivée ralentis contenant toutes les modifications suivantes : un filtre d’inversion de
couleur totale, une translation horizontale vers la droite de 1000px et une bordure
de coins de
50px.

 Soulignés et transformer en majuscules

et les liens lors du survol de la souris.

 Appliquer sur les icônes des réseaux sociaux dans la zone 4 une transition de 0.8
seconde avec un effet de rotation de 360 degrés tout en changeant la couleur
d’arrière-plan de l’icône en corail.

2) a) Créer la page "Accueil.html" contenant un titre de niveau1, un paragraphe, une image et un

bouton d’inscription comme suit:

2
Lycée Menzah6 4STI

b) Ajouter les règles de style CSS afin d’appliquer la même mise en forme de la page d’accueil
et la mise en forme du bouton "Inscription" lorsqu’on passe la souris dessus.

3) a) Créer la page "Formations.html" contenant trois blocs ayant chacun une image, un titre de
niveau3, un paragraphe et un bouton comme illustré ci-dessous :

b) Ajouter les règles de style CSS afin d’appliquer la même mise en forme de la page
"Formations", le bouton "S’inscrire" a la même mise en forme que le bouton "Inscription" de
la page "Accueil.html"

4) a) Créer la page "Inscription.html" contenant le formulaire suivant :

b) Ajouter les règles de style CSS afin d’appliquer la même mise en forme du formulaire,

d’appliquer lors du survol de la souris l’interdiction du click sur le bouton "Envoyer" qui
est désactiver par défaut, et ne sera actif que lorsqu’on coche la case à cocher "J’accepte les
termes et conditions générales".
3
Lycée Menzah6 4STI

Partie II : Contrôle JavaScript :

 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 Contraintes
Tous les champs de Doivent être remplis sauf le champ « ajouter ville » qui
formulaire est facultatif
Civilité cv 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 bajout 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 générales"

 L’appui sur le bouton "Ajouter 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 " de couleur rouge-
orange.
4
Lycée Menzah6 4STI

Partie III : 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 doit être 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 IV. 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 :
 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 !!! ".