Institut des Hautes Études Commerciales.

Carthage
Filière : 3BI
Matière : Framework de développement web avancé
Enseignante : Ilhem Baroud
Examen principal – janvier 2024 Durée : 4 heures

1- Créez une application angular nommée prenom-nom-app qui permet la gestion des articles d’une enseigne de
vente d’articles de sport de randonnée.
2- Sur la racine de l’application, installez json-server, Bootstrap et font-awesome
3- Téléchargez le fichier db.json à partir de Classroom et enregistrez-le sous la racine de l’application. Ce fichier
contient la liste des articles.
4- Seront fournies également, les fichiers de styles correspondant à chaque composant. Téléchargez-les et appli-
quez les classes css qui y sont définies dans les templates des composants.
5- Téléchargez les images fournies sur classroom dans le dossier assets/images.
6- Créez l’interface nommée product qui définit un produit (id, name, model, brand, description, price, quantity,
image).
7- Créez un service nommé product qui contiendra toutes les fonctions communes aux différents composants de
l’application, à savoir :
- getProductsList():Observable<Product[]> qui renvoie la liste des produits contenus dans le fichier db.json
- getProductsByName(searchText:string):Observable<Product[]> qui renvoie la liste des articles dans le fichier
db.json dont le libellé contient une chaîne de caractère donnée.
- getProductById(id:number):Observable<Product|undefined> qui renvoie l’article dans le fichier db.json
dont l’identifiant est égal à un identifiant donnée.
- addProduct(product:Product):Observable<Product[]> qui ajoute un article dans le fichier db.json
- deleteProduct(product:Product):Observable<Product[]> qui supprime un article du fichier db.json
- updateProduct(product:Product):Observable<Product> qui permet de mettre à jour un article
8- L’application doit afficher initialement, un composant head-bar comme entête et un composant product-list en
dessous.
9- Définissez le routage de l’application dans le fichier app.module.ts
10- Créez le composant head-bar qui affiche le logo de l’enseigne (assets/images/logo.png) et un titre de style h1
« Liste des produits ». Ce dernier est un lien qui permet de charger le composant product-list (figure.1).

Figure.1

11- Créer le composant product-list qui permet d’afficher la liste des produits du fichier db.json selon la figure (Fi-
gure.2)

Framework de développement web avancé Page 1

Examen principal Sur 3
 Figure.2

Dans cette liste, chaque article est représenté par une carte qui correspond à la figure (Figure.3)

brand

image

Name

quantity
price

faTrash icon pour supprimer un

Barre horizontale <hr> produit

faPen icon pour modifier un

produit
Figure.3

- La zone de texte permet la recherche d’un article par son libellé en rafraîchissant la liste des produits au fur
et à mesure de la saisie du nom du produit par l’utilisateur.
- Le bouton « Ajouter un produit » permet de charger le composant add-product qui permet d’ajouter un
article (Figure.4)
- L’icône « faTrush » permet de supprimer un article. Après la suppression, un message d’alerte ‘’Article retiré
de la liste des produits » sera affiché qui s’en suit une actualisation de la liste des produits.
- L’icône « faPen » permet d’afficher le composant update-product qui permet la mise à jour d’un article.
- En cliquant sur le nom de l’article, le composant product-detail sera chargé.
12- Créez le composant add-product qui affiche un formulaire de type template-driven-form permettant l’ajout d’un
nouvel article. L’utilisateur ne choisira pas l’image du produit, mais chaque nouveau produit contiendra, par
défaut, l’image « new-product.jpg » qui se trouve dans le dossier assets/images.
Si le produit est ajouté avec succès, une fenêtre d’alerte s’affiche avec le message ‘’Article ajouté à la liste des
produits’’.

Framework de développement web avancé Page 2

Examen principal Sur 3
 Figure.4
13- Créez le composant update-product qui contient un formulaire de type template-driven-form (même formulaire
que le composant add-product), affichant initialement les propriétés du produit choisi. Tous les champs sont
modifiables sauf l’identifiant et l’image du produit. La figure Figure.5, représente le composant update-product
lors de son chargement après la sélection de l’article « SAC A DOS DE RONDONNEE ».
Après la confirmation des modifications, une fenêtre d’alerte affichera le message ‘’Le produit a été mis à jour’’.

Figure.5
14- Créez le composant product-detail qui affiche toutes les informations sur le produit choisi dans la liste des pro-
duits comme le montre la figure Figure.6 après que l’utilisateur ait cliqué sur le nom de l’article « DOUDOUNE
EN DUVET DE TREK MONTAGNE »

Figure.6
Framework de développement web avancé Page 3
Examen principal Sur 3