Scribd
Upload
11 views8 pages

TD Javascript Ajax

Web

Uploaded by

Mouha Sylla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views8 pages

TD Javascript Ajax

Web

Uploaded by

Mouha Sylla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Web avancé TD JavaScript & Ajax M1SIC/GL

Exercice 1 :

Ecrivez un code HTML, CSS et Javascript qui permet à un utilisateur de saisir une commande de 3
produits en mentionnant le nom du produit, son prix unitaire et sa quantité. Les champs prix total et
total doivent être remplis automatiquement. Les produits vendus sont les suivant : « PC de bureau »,
« PC portable », « Souris », « Clavier » ;

Exercice 2 :

Soit la base de données « note_etudiant » dont le modèle logique est donné ci-dessous :

ETUDIANT (NumEtu, Nom, Prenom, DateNais, # NumOption)

MATIERE (NumMat, Libelle)

NOTATION (#NumEtu, # NumMat, NoteControl, NoteExamen)

OPTION (NumOption, Intitule)

1. Ecrivez un code php qui permet d’afficher la page ci-dessous. Cette dernière offre à
l’utilisateur la possibilité de sélectionner une option et une plage de date de naissances. La
liste des options doit être prise à partir de la base de données.

2. Une fois que l’utilisateur clique sur « Ok », une page s’affiche, contenant les critères de
recherches choisies et la liste des étudiants respectant ces critères de recherche. Lorsque
l’utilisateur clique sur le lien « détails » associé à un étudiant, ses informations et ses notes
s’affichent sur la partie droite de la page sans rafraichir la page. Pour cette dernière

1
Département d’informatique Université de Tlemcen
Web avancé TD JavaScript & Ajax M1SIC/GL

fonctionnalité il faut utiliser Ajax. Vu que les moyennes ne sont pas stockées dans la base de
données il faut les calculer. Suivez le modèle ci-dessous pour l’affichage.

Option : Sciences
Date de naissance comprise entre : 04/05/1980 et 04/05/2010
Benmhidi Larbi Nom : Benmhidi
Détails>> Prénom : Larbi
Date de naissance : 28/05/2000
Abbane Remdane
Détails>> Notes :

Benbouali Hassiba Module Contrôle Examen Moyenne


Détails>> XML 13 17 15.66
Web 16 15 15.33
Didouche Mourad BDD 15 18 17
Détails>> Moyenne gle. 16

2
Département d’informatique Université de Tlemcen
Web avancé TD JavaScript & Ajax M1SIC/GL

Solutions
Exercice 1 :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<style>
.total {font-weight: bold;}
</style>
<script>
function calcul(facture) {
var total = 0;
if ((facture.Prix1.value != "") &&
(facture.Quantite1.value != "")){
document.getElementById("prixTotal1").innerHTML =
parseFloat(facture.Prix1.value) *
parseFloat(facture.Quantite1.value);
total = total + parseFloat(facture.Prix1.value) *
parseFloat(facture.Quantite1.value);
}
if ((facture.Prix2.value != "") &&
(facture.Quantite2.value != "")){
document.getElementById("prixTotal2").innerHTML =
parseFloat(facture.Prix2.value) *
parseFloat(facture.Quantite2.value);
total = total + parseFloat(facture.Prix2.value) *
parseFloat(facture.Quantite2.value);
}
if ((facture.Prix3.value != "") &&
(facture.Quantite3.value != "")){
document.getElementById("prixTotal3").innerHTML =
parseFloat(facture.Prix3.value) *
parseFloat(facture.Quantite3.value);
total = total + parseFloat(facture.Prix3.value) *
parseFloat(facture.Quantite3.value);
}
document.getElementById("total").innerHTML = total;
}
</script>
</head>
<body>
<table width="560" border="0">
<form id="facture" name="facture" method="post" action="">
<tr>
<th>Produit</th>
<th>Prix unitaire (DA)</th>
<th>Quantité</th>
<th>Prix total</th>
</tr>

3
Département d’informatique Université de Tlemcen
Web avancé TD JavaScript & Ajax M1SIC/GL

<tr>
<td>
<select name="produit1">
<option value="Clavier">Clavier</option>
<option value="Souris">Souris</option>
<option value="PC de bureau">PC de bureau</option>
<option value="PC Portable">PC portable</option>
</select>
</td>
<td><input name="Prix1" type="text"
OnBlur="calcul(this.form)"/></td>
<td><input name="Quantite1" type="text"
OnBlur="calcul(this.form)"/></td>
<td id="prixTotal1">0</td>
</tr>
<tr>
<td>
<select name="produit2">
<option value="Clavier">Clavier</option>
<option value="Souris">Souris</option>
<option value="PC de bureau">PC de bureau</option>
<option value="PC Portable">PC portable</option>
</select>
</td>
<td><input name="Prix2" type="text"
OnBlur="calcul(this.form)"/></td>
<td><input name="Quantite2" type="text"
OnBlur="calcul(this.form)"/></td>
<td id="prixTotal2">0</td>
</tr>
<tr>
<td>
<select name="produit3">
<option value="Clavier">Clavier</option>
<option value="Souris">Souris</option>
<option value="PC de bureau">PC de bureau</option>
<option value="PC Portable">PC portable</option>
</select>
</td>
<td><input name="Prix3" type="text"
OnBlur="calcul(this.form)"/></td>
<td><input name="Quantite3" type="text"
OnBlur="calcul(this.form)"/></td>
<td id="prixTotal3">0</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="total">Total</td>
<td id="total">0</td>
</tr>

4
Département d’informatique Université de Tlemcen
Web avancé TD JavaScript & Ajax M1SIC/GL

</form>
</table>
</body>
</html>

Exercice 2 :

//Recherche.php
<html>
<form method="POST" action="affichage.php">
Option :
<select name="option">
<?php
try{
$bdd = new
PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root',
'');
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
$reponse = $bdd->query('select * from optio');
while ($donnees = $reponse->fetch()) {
echo "<option>".$donnees['Intitule']."</option>";
}
?>
</select> <br>
Date de naissance : <br>
<input type="date" name="datedebut"><br>
<input type="date" name="datefin"><br>
<input type="submit" name="Ok">
</form>
</html>

5
Département d’informatique Université de Tlemcen
Web avancé TD JavaScript & Ajax M1SIC/GL

//affichage.php
<?php
$option = $_POST['option'];
$datedebut = $_POST['datedebut'];
$datefin = $_POST['datefin'];
?>
<html>
<head>
<SCRIPT language="Javascript">
function affichage(id){
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (req.readyState==4 && req.status==200)
{

document.getElementById("details").innerHTML=req.responseText;
}
};
req.open("GET","note.php?id="+id,true);
req.send();
}
</SCRIPT>
</head>
<table border="1">
<tr><td align="center" colspan="2">
Option : <?php echo($option); ?><br>
Date de naissance comprise entre : <?php
echo($datedebut . " et " . $datefin); ?>
</td></tr>
<?php
try{
$bdd = new
PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root',
'');
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
$reponse = $bdd->query("select * from etudiant, optio
where
etudiant.NumOption = optio.NumOption and
Intitule='".$option."' and
DateNais >'".$datedebut."' and
DateNais < '".$datefin."'");
$i=0;
while ($donnees = $reponse->fetch()) {
echo"<tr>";
echo" <td>".$donnees['Nom']."
".$donnees['Prenom']."<br>";

6
Département d’informatique Université de Tlemcen
Web avancé TD JavaScript & Ajax M1SIC/GL

echo" <a href=#


onclick='affichage(".$donnees['NumEtu'].")'>Détails>></a></td>
";
if ($i==0){
echo" <td id='details' rowspan='".$reponse-
>rowCount()."'></td>";
$i = 1;
}
echo"</tr>";
}
?></table></html>

//note.php
<?php
$numetu = $_GET['id'];
try{
$bdd = new
PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root',
'');
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
$reponse = $bdd->query("select * from etudiant where
NumEtu=".$numetu);
$donnees = $reponse->fetch();
echo "Nom : ".$donnees['Nom'];
echo "<br>Prénom : ".$donnees['Prenom'];
echo "<br>Date de naissance : ".$donnees['DateNais'];
echo "<br> <br> Notes :";

$reponse = $bdd->query("select * from matiere, notation


where
matiere.NumMat=notation.NumMat and
NumEtu=".$numetu);
echo "<table
border=1><tr><th>Module</th><th>Contrôle</th><th>Examen</th><t
h>Moyenne</th></tr>";

$sommeMoyenne = 0;
$nbrMat = 0;
while ($donnees = $reponse->fetch()) {
echo "<tr>";
echo "<td>".$donnees['Libelle']."</td>";
echo "<td>".$donnees['NoteControl']."</td>";
echo "<td>".$donnees['NoteExamen']."</td>";
$moyenne = ($donnees['NoteControl'] + (2 *
$donnees['NoteExamen']))/3;
$sommeMoyenne = $sommeMoyenne + $moyenne;
echo "<td>$moyenne</td>";

7
Département d’informatique Université de Tlemcen
Web avancé TD JavaScript & Ajax M1SIC/GL

echo"</tr>";
$nbrMat++;
}
if ($nbrMat!=0) $moyGle=$sommeMoyenne/$nbrMat; else
$moyGle=0;
echo "<tr><td></td><td></td><td>Moyenne
gle.</td><td>$moyGle</td></tr></table>";
?>

8
Département d’informatique Université de Tlemcen

You might also like