Université Abdelmalek Essaadi

Faculté ses Sciences et techniques de Tanger

Département Génie Informatique
Cycle Licence : S5
PHP/JQUERY/AJAX

Atelier 3-3 : Développement Web (AJAX, JQuery)

Exercice 1 :

• Nous désirons implémenter l’architecture web suivante :

• Créer une base de données en Mysql nommée : « db_cat_dwm »

• Créer deux tables produits et categories.

• Créer la table produit.

 Université Abdelmalek Essaadi
Faculté ses Sciences et techniques de Tanger
Département Génie Informatique
Cycle Licence : S5
PHP/JQUERY/AJAX

• Alimenter la table produit par les valeurs suivantes.

• Créer la table catégorie.

• Alimenter la table catégorie par les valeurs suivantes.

• Créer le fichier de connexion à la base de données conn.php

• Créer le fichier produits.php pour afficher les produits par catégorie

 Université Abdelmalek Essaadi
Faculté ses Sciences et techniques de Tanger
Département Génie Informatique
Cycle Licence : S5
PHP/JQUERY/AJAX

• produit par id de leur catégorie : produits.php?idCat=1

Faire un appel à la liste des produits
• Vous obtenez le résultat suivant :

• Créer le fichier categories.php pour afficher les catégories dans un menu select
 Université Abdelmalek Essaadi
Faculté ses Sciences et techniques de Tanger
Département Génie Informatique
Cycle Licence : S5
PHP/JQUERY/AJAX

• Pour activer l’appel AJAX nous devons créer

c le fichier catalogue.html avec deux <div>
calques:

• En utilisant la bibliothèque , créer le fichier catalogue.js avec deux

fonctions :
 Université Abdelmalek Essaadi
Faculté ses Sciences et techniques de Tanger
Département Génie Informatique
Cycle Licence : S5
PHP/JQUERY/AJAX

• Créer le fichier style.css :

 Université Abdelmalek Essaadi
Faculté ses Sciences et techniques de Tanger
Département Génie Informatique
Cycle Licence : S5
PHP/JQUERY/AJAX

• Résultat de l’appel AJAX :