Correction Prototype2023

Correction prototype STI 2023
Code HTML : « index.html »

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mesStyles.css">
</head>
<body>
<header><h1>Test drive</h1></header>
<nav>
<p> <a href="enregistrement.html" target="x">Enregistrement d'un testeur </a> </p>
<p> <a href="evaluation.html" target="x">Evaluation d'un modèle </a> </p>
<p> <a href="bilan.php" target="x">Bilan des evaluations </a> </p>
</nav>
<section>
<iframe src="enregistrement.html" name="x"></iframe>
</section>
</body>
</html>
Important :
 Les propriétés colorées en bleu sont nécessaires pour le code CSS
Code HTML : « enregistrement.html »

<!DOCTYPE html>
<html> <head>
<script type="text/javascript" src="controles.js"></script>
</head>
<body>
<form method="POST" action="enregistrement.php" onsubmit="return verif1()">
<fieldset>
<legend>Enregistrement d'un testeur</legend>
<table>
<tr> <td> N° Permis </td>
<td> <input type="text" class="y" name="np" id="numPermis"> </td>
</tr>
<tr>
<td>Nom </td>
<td><input type="text" class="y" name="n" id="nomPilote"></td>
</tr>
<tr>
<td>Prénom</td>
<td><input type="text" class="y" name="p" id="prenomPilote"></td>
</tr>
<tr>
<td>Genre</td>
<td><input type="radio" name="r" id="radF" value="F"> Féminin
<input type="radio" name="r" id="radM" value="M"> Masculin </td>
</tr>
<tr>
<td>Ville <br>
Prof : HAMMAMI Fatima Page 1

<br><br> <br></td>
<td>
<select name="ville" id="ville">
<option>choisir une ville</option>
<option value="1">Gafsa</option>
<option value="2">Kef</option>
<option value="3">Sousse</option>
<option value="4">Tunis</option>
</select>
<br><br><br> <br>
</td>
</tr>
<tr>
<td> </td>
<td> <input type="reset" value="Annuler" class="b">
<input type="submit" value="Ajouter" class="b"> </td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Important :
 Les propriétés colorées en rouge sont nécessaires pour le programme JavaScript
 Les propriétés colorées en vert sont nécessaires pour le programme PHP
Code PHP : « enregistrement.php »

<?php
mysql_connect("localhost","root","") or die ("problème de connexion au serveur");
mysql_select_db("bd123456") or die (" problème de connexion a la BD");
$np=$_POST["np"];
$n=$_POST["n"];
$p=$_POST["p"];
$r=$_POST["r"];
$v=$_POST["ville"];
$req="SELECT * from testeur where numPermis='$np' ";
$res=mysql_query($req) or die("problème req1");
if (mysql_num_rows($res)==1) {
echo "<h1>numero de permis déja existant</h1>"; }
else{
$req="INSERT into testeur values('$np' , '$n' , '$p' , '$r' , '$v')";
$res=mysql_query($req) or die("problème req2");
echo "<h1>enregistrement fait avec succes</h1>"; }
mysql_close();
?>

Code HTML : « evaluation.html »
<!DOCTYPE html>
<html> <head>
<script type="text/javascript" src="controles.js"></script>
</head>
<body>
<form method="POST" action="evaluation.php" onsubmit="return verif2()">
<fieldset>
<legend><h2>evaluation d'un modèle</h2></legend>
<p>N° Permis <input type="text" id="numPermis" class="y" name="np">
Modèle testé <select name="mod" id="mod">
<option>choisir un modèle</option>
<option value="15">WALLIS IRIS</option>
<option value="26">WALLIS 619</option>
<option value="38">WALLIS 216</option>
</select></p>
<br><br><br><br>
<p>Notes attribués :</p>
<p>sécurité :<input type="number" class="y" id="s" name="sec">
conduite : <input type="number" id="c" class="y" name="cond">
confort : <input type="number" id="cf" class="y" name="conf"></p>
<p>je ne suis pas un robot <input type="checkbox" id="robot"></p>
<div><input type="reset" class="b1" value="Annuler"> <input type="submit" class="b1" value="Valider"> </div>
</fieldset>
</form>
</body> </html>
Code PHP : « evaluation.php »

<?php
mysql_connect("localhost","root","");
mysql_select_db("bd123");
$np=$_POST["np"];
$mod=$_POST["mod"];
$sec=$_POST['sec'];
$cond=$_POST['cond'];
$conf=$_POST['conf'];
$req="SELECT * from testeur where numPermis='$np'";

$res=mysql_query($req) or die("pb req1");
if(mysql_num_rows($res)==0) {
echo "<h1>testeur non inscrit</h1>"; }
else {
$req="SELECT * from evaluation where numPermis='$np' and idModele='$mod' ";
$res=mysql_query($req) or die("pb req2");
if (mysql_num_rows($res)==1) {
echo("<h1>Vous avez déjà testé ce modèle</h1>"); }
else {
$ds=date("Y-m-d H:i:s");
$req="INSERT INTO evaluation VALUES('$np','$mod','$ds','$sec','$cond','$conf')";
$res=mysql_query($req) or die("pb req3") ;
echo("<h1>Insertion effectuée avec succès</h1>"); }
}
mysql_close();
?>

Code PHP : « bilan.php »
<?php
mysql_connect("localhost","root","");
mysql_select_db("bd123");
$req="select libelle , AVG(securite) , AVG(conduite) , AVG(confort) , COUNT(*)
From evaluation e , modelevoiture v
Where e.idModele = v.idmodele
group by libelle";
$res=mysql_query($req);
echo "<table border=1>

<tr>
<td width='200'>Modèle</td>
<td width='200'>Sécurité</td>
<td width='200'>Conduite</td>
<td width='200'>Confort</td>
<td width='200'>Nbr tests</td>
</tr>";
while($t=mysql_fetch_array($res)){
echo "<tr>
<td width='200'>". $t[0]."</td>
<td width='200'>".$t[1]."</td>
<td width='200'>".$t[2]."</td>
<td width='200'>".$t[3]."</td>
<td width='200'>".$t[4]."</td>
</tr>";
}
echo "</table>" ;
mysql_close();
?>
Code JavaScript dans le fichier « controles.js »
// Cette fonction permet de vérifier si le paramètre x est composé uniquement par des lettres
alphabétiques
function uniquementLettres(x)
{
x=x.toUpperCase()
var i=0
while (x.charAt(i)>="A" && x.charAt(i)<="Z" && i<x.length)
i++
return i == x.length
}
function verif1()
{
var resultat= true

var numPermis = document.getElementById("numPermis").value // pour récupérer la valeur du
numéro du permis
var nom = document.getElementById("nomPilote").value // pour récupérer la valeur du nom
du pilote
var prenom = document.getElementById("prenomPilote").value // pour récupérer la valeur du
prenom du pilote
// compléter la suite de cette fonction ....
var nb1=numPermis.substr(0,2)

var nb2=numPermis.substr(3)
if(numPermis.indexOf('/')!=2 || isNaN(nb1) || isNaN(nb2) || nb1.length!=2 || nb2.length!=5)

{
resultat = false
alert("Le numéro du permis n'est pas conforme")
}
else if ( nom.length <3 || nom.length>20 || !uniquementLettres(nom))
{
resultat = false
alert("Le nom doit avoir de 3 à 20 lettres")
}
else if ( prenom.length <3 || prenom.length>20 || !uniquementLettres(prenom))

{
resultat = false
alert("Le prénom doit avoir de 3 à 20 lettres")
}
else if(!(document.getElementById("radF").checked || document.getElementById("radM").checked))
{
resultat = false
alert("Spécifier le genre du pilote!")
}
else if (document.getElementById("ville").selectedIndex==false) {
resultat = false
alert("Spécifier la ville du pilote!")
}
return resultat
}
function verif2() {
var resultat= true
var numPermis = document.getElementById("numPermis").value
var nb1=numPermis.substr(0,2)
var nb2=numPermis.substr(3)
s=document.getElementById("s").value
c=document.getElementById("c").value
cf=document.getElementById("cf").value
if(numPermis.indexOf('/')!=2 || isNaN(nb1) || isNaN(nb2) || nb1.length!=2 || nb2.length!=5)
{
resultat = false
alert("Le numéro du permis n'est pas conforme")
}
else if (document.getElementById("mod").selectedIndex==false){
resultat = false
alert("La selection du modele est obligatoire")
}
else if (s<1 || s>5) {

resultat = false
alert("note de securité invalide")
}
else if (c<1 || c>5) {
resultat = false
alert("note de conduite invalide")
}
else if (cf<1 || cf>5) {
resultat = false
alert("note de confort invalide")
}
else if (document.getElementById("robot").checked==false) {
resultat = false
alert("verifier que vou n'etes pas un robot")
}
return resultat
}

Code CSS dans le fichier « mesStyles.css »
header{
background-color: #11abf33f;
}
nav {
background-color: #d9f0f5;
width: 30%;
height: 480px;
float: left;
}
section {
background-color: #eafafa;
width: 70%;
height: 480px;
float: left;
}
iframe {
width: 99%;
height: 470px;
}
h1{
text-align: center;
}
h1:hover{
transition: color 2s;
color: aqua;
}
.y{
background-color: yellow;
font-size: 16px;
}
.b{
margin-left: 10%;
}
.b1{
margin-left: 7%;
}
div{
margin-left: 20%;
}
NB : - les parties JavaScript et CSS qui sont mises en surbrillance jaune sont données avec le
prototype dans le dossier « StiRessources ».
- Importation d’une BD :
1) Créer une BD
2) Cliquer sur « importer »
3) Choisir un fichier (accéder au dossier qui contient le fichier SQL)
4) Exécuter
- Exportation d’une BD :
1) Cliquer sur le nom de la BD à exporter
2) Cliquer sur « exporter »
3) Exécuter
4) Copier le fichier SQL de la BD dans ton dossier de travail (la base est par défaut
téléchargée dans le dossier « téléchargement »).

Correction Prototype2023

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Correction Prototype2023

Transféré par

Droits d'auteur :

Formats disponibles

Correction prototype STI 2023

Code HTML : « index.html »

Code HTML : « enregistrement.html »

Prof : HAMMAMI Fatima Page 1

Code PHP : « enregistrement.php »

Prof : HAMMAMI Fatima Page 2

Code PHP : « evaluation.php »

$req="SELECT * from testeur where numPermis='$np'";

Prof : HAMMAMI Fatima Page 3

echo "<table border=1>

Code JavaScript dans le fichier « controles.js »

var resultat= true

Prof : HAMMAMI Fatima Page 4

if(numPermis.indexOf('/')!=2 || isNaN(nb1) || isNaN(nb2) || nb1.length!=2 || nb2.length!=5)

else if ( prenom.length <3 || prenom.length>20 || !uniquementLettres(prenom))

else if (s<1 || s>5) {

Prof : HAMMAMI Fatima Page 5

Prof : HAMMAMI Fatima Page 6

Vous aimerez peut-être aussi