Académique Documents
Professionnel Documents
Culture Documents
1
• 2ème élément : Le code HTML incomplète de cette page :
Code HTML
<html>
<head>
<title>Ajouter</title>
<link rel="stylesheet" ……………="monstyle.css"
1 />
<script ……………….="controle.js"></script>
2
</head>
<body>
<………………><h1>Le
3 club Corail</h1></……………>
3
<main>
<form action="AjoutParticipant.php" method="post" ……………….="return
4 verif()">
<fieldset>
<legend>Ajout d'un participant :</legend>
5
<p><label>CinPart : </label><input type="……………." name="cp" id="cp" …………..="te"/></p>
6
<input type="…………………"
15 value="Ajouter" ……………………...="bt"/></p>
6
</fieldset></form></main>
<……………….><p
16 id="fo"><……………………
17 src="photo.jpg" alt="" /></p></…………………>
16
</body></html>
1) En se référant au code HTML, l’aperçu de la page et la description des colonnes de la base de
données, compléter chaque ligne du tableau par le nom de la balise ou la valeur de l’attribut
Nom de la balise
Numéro Remarque
ou Valeur de l’attribut
Lier une feuille de style CSS nommée « monstyle.css » à la
1 ……………………………………..
page « AjouParticipant.html »
Lier le fichier externe JavaScript nommé « controle.js » à la
2 ……………………………………..
page « AjouParticipant.html »
3 …………………………………….. Représente l’en-tête de la page « AjouParticipant.html »
Evénement se déclenche lorsque le formulaire est soumis,
4 ……………………………………..
permet d’exécuter la fonction JavaScript « verif() »
5 …………………………………….. Le type d'un champ de formulaire
6 …………………………………….. Le sélecteur qui permet de cibler plusieurs éléments HTML
2
7 …………………………………….. Le type d'un champ de formulaire
8 …………………………………….. Le type d'un champ de formulaire
Evénement se déclenche lorsque l’élément perd le focus,
9 ……………………………………..
permet d’exécuter la fonction JavaScript « CalculerAge()»
10 …………………………………….. Le type d'un champ de formulaire
11 …………………………………….. Rendre le champ du formulaire désactivé
12 …………………………………….. Le type d'un champ de formulaire
13 …………………………………….. Le type d'un champ de formulaire
14 …………………………………….. Le type d'un champ de formulaire
15 …………………………………….. Le type d'un champ de formulaire
16 …………………………………….. Représente le pied de la page « AjouParticipant.html »
17 …………………………………….. Balise utilisée pour insérer une image dans la page Web.
2) En se référant au code HTML et l’aperçu de la page « AjouParticipant.html », compléter le
contenu de la feuille « monstyle.css ».
Mise en forme Code CSS
……………………………………………..…………………………………
Mettre l’arrière-plan des champs de type
………………………………………………………………………………..
texte avec la couleur gold.
……………………………………………..…………………………………
……………………………………………..…………………………………
Les boutons Valider et Annuler doivent
………………………………………………………………………………..
avoir des bordures en double traits, avec
……………………………………………..…………………………………
des coins arrondis de 5 pixels.
………………………………………………………………………………..
Les libellés des champs du formulaire ……………………………………………..…………………………………
doivent être soulignés, en gras et ………………………………………………………………………………..
convertit en majuscule. ……………………………………………..……………………………….
Appliquer un effet de transformation de
votre choix (rotate( ), skew( ), scale( ), ……………………………………………..…………………………………
translate( )) sur le titre de niveau 1 ………………………………………………………………………………..
lorsqu’il est survolé par le pointeur de la ……………………………………………..…………………………………
souris.
3) Développer la fonction CalculerAge() qui permet de calculer et affecter l’âge à la zone de saisie
AGEPART. Sachant que AGE=l’année courante - l’année de la date de naissance
function CalculerAge() {
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………….
document.getElementById ("ap")………………….………=……………………………………………………………….… ;}
4) Développer la fonction verif() permettant de s’assurer de la validité des champs du formulaire
tout en respectant les contrôles suivants :
Champ Contrôle
CinPart Une chaîne de 8 caractères
NomPart Une chaîne non vide
Genre Obligatoire
3
function Verif () {
……………………………………………………………………………………………………………………………………………………….
……………………………………………………………………………………………………………………………………………………….
……………………………………………………………………………………………………………………………………………………….
……………………………………………………………………………………………………………………………………………………….
……………………………………………………………………………………………………………………………………………………….
……………………………………………………………………………………………………………………………………………………….
……………………………………………………………………………………………………………………………………………………….
……………………………………………………………………………………………………………………………………………………….
……………………………………………………………………………………………………………………………………………………….
……………………………………………………………………………………………………………………………………………………….
……………………………………………………………………………………………………………………………………………………….
……………………………………………………………………………………………………………………………………………………….
……………………………………………………………………………………………………………………………………………………….
……………………………………………………………………………………………………………………………………………………….
……………………………………………………………………………………………………………………………………………………….
}
Partie B : Manipulation de la base de données
En se référant à la représentation textuelle et à la description des colonnes de la base de données
GestionPlongée.
1) Identifier le type de contrainte d’intégrité qui peut être définie sur la structure de la base de
données GestionPlongée :
Le salaire d’un maitre plongeur doit être supérieur à 1000 dinars …………………..
Les colonnes IdSite, CinMait, CinPart et DateHeurePlong constituent la clé Primaire de la
…………………..
table PLONGEE.
Un maitre qui guide les participants lors d’une plongée doit être enregistré en tant que
…………………..
maitre plongeur.
Le genre d’un participant doit être "F" ou "H" …………………..
La suppression d'un participant entraine automatiquement la suppression de ses plongées. …………………..
Toutes les données de la base sont obligatoires. …………………..
2) Ecrire les requêtes SQL pour :
a) Diminuer de 10% les prix de plongée des sites ayant une ProfondeurMax <= 100
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
b) Supprimer toutes les plongées effectuées avant "2015-01-01 00 :00 :00"
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
c) Afficher les sites (IdSite, PrixPlong) dont les NomSite commencent par la lettre "D"
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
d) Afficher la liste des participants triée par AgePart selon l’ordre décroissant
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
4
e) Afficher les maitres plongeurs (CinMait, NomMait) qui ont un Salaire >= 1200
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
f) Afficher la moyenne des salaires des maitres plongeurs selon le format suivant
MoyenneSalaire
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
g) Afficher les participants âgés de moins de 15 ans (CinPart, NomPart) qui ont fait des plongées
à une profondeur supérieur à 200 mètres.
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
h) Afficher, pour chaque participant, les informations (NomPart, le nombre de plongée)
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
i) Afficher, pour chaque participant, les informations (NomPart, le nombre de plongée) dont
le nombre de plongée >= 3
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
3) Après analyse de la base de données, il s’avère nécessaire de recourir à la création d’une
nouvelle table décrite par la représentation textuelle suivante :
REGION (IdRegion, NomRegion)
Et ayant la description suivante :
Champ Type et taille Contrainte
IdRegion Numérique Clé primaire
NomRegion Chaine de 20 caractères Obligatoire
5
Exercice 2 : Compléter le tableau ci-dessous tout en précisant la fonction prédéfinie et /ou le langage
utilisé et/ou le rôle de la fonction :
Langage
Fonction Rôle
(SQL ou JavaScript)
Permet de vérifier si le contenu d’une variable donnée
……………………… ……………………….
en paramètre est numérique ou non.
…………………………………………………………………………………
Ch.toLowerCase() ………………………. …………………………………………………………………………………
…………………………………………………………
Permet de calculer la somme des valeurs d'une
……………………… ……………………….
colonne spécifiée.
…………………………………………………………………………………
Ch1.indexOf(Ch2) ………………………. …………………………………………………………………………………
…………………………………………………………..
Permet de compter le nombre de lignes dans un
……………………… ……………………….
ensemble de résultats.
Permet de convertir une chaine de caractère en valeur
……………………… ……………………….
numérique si c’est possible
Barème
Ex1.A.1 Ex1.A.2 Ex1.A.3 Ex1.A.4 Ex1.B.1 Ex1.B.2 Ex1.B.3.a Ex1.B.3.b1 Ex1.B.3.b2 Ex2 Ex3 Total
4,25 4 4 3 1,5 11,25 1 1 4 3 3 40