Enseignant responsable Matière : Intégration Web Travaux dirigés
Dr. Riadh HARIZI N°2
Objectif : Développer une application web permettant d'afficher et de filtrer les produits d'un
magasin. Les données des produits seront stockées dans un fichier JSON et manipulées en
JavaScript pour créer une interface utilisateur interactive.
1. Contexte :
Vous êtes responsable de la création d'un système de gestion de produits pour un magasin.
Les produits doivent être affichés sur une page web, avec des informations détaillées telles
que le nom du produit, la catégorie, le prix, la quantité disponible, et une courte description.
Les utilisateurs de la page web doivent être en mesure de rechercher un produit par nom ou
par catégorie.
2. Travail demandé
Étape 1 : Préparation des données
1. Créez un fichier JSON nommé [Link] pour stocker les informations sur les
produits du magasin.
2. Le fichier JSON doit contenir une liste de produits avec les attributs suivants :
o id : Identifiant unique du produit.
o nom : Nom du produit.
o categorie : Catégorie du produit (par exemple, Électronique, Maison, Vêtements).
o prix : Prix du produit en euros.
o quantite : Quantité en stock.
o description : Brève description du produit.
Étape 2 : Création de la page web
1. Créez un fichier HTML [Link] pour la page principale de votre application.
2. Ajoutez un champ de recherche pour permettre à l'utilisateur de filtrer les produits par nom
ou catégorie.
3. Créez une section vide pour afficher dynamiquement les informations des produits.
NB :
Utilisez un champ de texte pour la recherche.
Créez un conteneur pour afficher les produits sous forme de "cartes".
Étape 3 : Écriture du script JavaScript
1. Créez un fichier [Link] pour gérer l'interaction entre les données JSON et la page web.
2. Chargez les données depuis [Link] et affichez chaque produit dans une carte.
3. Implémentez un filtre pour que l'utilisateur puisse rechercher des produits par nom ou
catégorie.
1
Exemple de fonctionnalités JavaScript :
Charger et afficher les produits depuis le fichier JSON.
Créer une carte pour chaque produit avec ses détails (nom, prix, quantite,
description).
Filtrer les produits en fonction de la recherche de l'utilisateur.
Étape 4 : Écriture du CSS
1. Style de Base :
o Utilisation d'une police Arial, sans-serif.
o Un background-color léger pour le fond de la page (#f9f9f9).
o Centrage du titre principal.
2. Barre de Recherche :
o Un style propre avec des coins arrondis, une ombre discrète pour donner un effet 3D
léger, et une taille adaptée pour que la barre soit visible et facile à utiliser.
3. Conteneur des Produits :
o Utilisation de grid-template-columns pour créer une grille flexible, avec des
colonnes qui s'ajustent automatiquement en fonction de la taille de l'écran.
o Un gap de 20px pour séparer les cartes des produits.
4. Cartes des Produits (.produit-card) :
o Arrière-plan blanc avec des coins arrondis et une bordure légère.
o Ombre subtile pour donner de la profondeur.
o Effet de transition pour que la carte "saute" légèrement lorsqu'on passe la souris
dessus.
5. Texte des Produits :
o Utilisation de couleurs différentes pour les éléments importants :
Le titre du produit est en couleur foncée pour le faire ressortir.
Le prix est en rouge pour attirer l'attention.
Personnalisation :
Vous pouvez ajuster les couleurs, les polices, les tailles de texte et l'espacement selon
vos préférences ou la charte graphique de votre projet.
Si vous préférez externaliser le CSS, créez un fichier [Link]
Ce TD permettra aux étudiants de comprendre comment gérer des données JSON, créer une
interface web dynamique et filtrer des données en utilisant JavaScript.
2
La structure des fichiers
Page écran de la page [Link]
Utiliser un serveur local simple
Pour contourner les problèmes de sécurité avec fetch, il est préférable d'utiliser un serveur
web local :
Utiliser VS Code avec l'extension "Live Server"
1. Installez Visual Studio Code (VS Code) si vous ne l'avez pas déjà.
2. Ouvrez le dossier de votre projet dans VS Code.
3. Installez l'extension "Live Server" en allant dans l'onglet des extensions (icône de carré sur la
barre latérale) et en cherchant "Live Server".
4. Faites un clic droit sur [Link] et sélectionnez "Open with Live Server".
