Institut Supérieur d'Administration
Projet HTML et CSS (DS1)
des Affaires de Sfax
AU : 2024 - 2025
Programmation Web 1 2 LIG
La société "[Link]" est une société spécialisée dans la vente du matériel informatique. Elle souhaite
créer un site web de vente en ligne. On vous demande de réaliser la partie front-end de ce site tout en
respectant les exigences suivantes :
✓ Le site web à réaliser comporte six interfaces : (Accueil, Catalogue des produits, Fiche produit,
Authentification, Formulaire d’inscription et Panier client)
✓ Toutes les interfaces doivent avoir les mêmes en-têtes et pieds de page.
✓ En-tête de page contient le logo de la société, des liens hypertextes pour les différentes catégories
de produit sous forme d’un menu (regarder le tableau ci-dessous), une zone de texte pour faire une
recherche et deux liens hypertextes sous forme d’icônes le premier pour connecter un client et le
deuxième pour consulter le panier d’un client.
✓ Pied de page contient les différents moyens pour contacter la société (adresse postale, adresse e-
mail, page Facebook, etc...)
✓ Le logo, les icônes ainsi que les images sont disponibles dans le répertoire "Images"
téléchargeable via l’espace de cours "Programmation Web1".
Tableau : (Menu à mettre dans l’en-tête de page)
Informatique Impression Accessoires Smart Phone
PCs Portables Imprimantes Laser Claviers
PCs de bureau Imprimantes Jet d’encre Souris
PCs Gaming Photocopieurs Son
Ecrans Consommables Disques de Stockages
Logiciels Divers
Tablettes
✓ Les interfaces :
1. Accueil : permet de lister les produits en promotion (image du produit, une petite description, un lien
hypertexte pour afficher la fiche du produit, une zone de texte pour préciser la quantité à commander et
un bouton pour valider la commande). Aussi, il faut mettre dans cette interface une animation défilant les
5 produits les plus vendus chaque 5 secondes (les images des produits en promotion sont disponibles dans
le répertoire "Promotions" sous le répertoire "Images". Le nom des images désigne la référence du
produit. La description des produits en promotion se trouve dans le fichier
"Descriptions_promotions.txt" sous le répertoire "Supports". Les 5 produits les plus vendus se trouvent
dans le répertoire "Animation" sous le répertoire "Images").
2. Catalogue des produits : s’affiche quand l’internaute choisit une catégorie de produit qui se trouve
dans le menu proposé. Elle permet de lister tous les produits de cette catégorie (image du produit, une
petite description, un lien hypertexte pour afficher la fiche du produit, le prix, une zone de texte pour
préciser la quantité à commander et un bouton pour valider la commande). A droite de cette interface il
faut mettre différents filtres pour affiner la rechercher des produits selon différents critères.
N.B : Dans ce projet il suffit de faire une seule catégorie "PCs portables". (Les images de cette catégorie
se trouvent dans le répertoire "Pcs_portables" sous le répertoire "Images". Le nom des images désigne la
référence du produit. Aussi, la description des articles se trouve dans le fichier "[Link]" sous le
répertoire "Supports".)
3. Fiche produit : s’affiche quand l’internaute décide de voir le détail d’un produit en cliquant sur son
image ou sur sa description. Elle affiche une image plus grande avec une description des différents détails
techniques du produit. L’internaute peut à travers cette interface commander ce produit en précisant la
quantité.
N.B : Dans ce projet il suffit de faire la fiche d’un seul produit dont sa référence est "LENOVO-2Y-
820WQ0ABF0G ". La fiche technique de se produit se trouve dans le fichier "LENOVO-2Y-
[Link]" sous le répertoire "Supports".
4. Authentification : s’affiche quand l’internaute clique sur "se connecter" qui se trouve dans l’en-tête de
page. Elle offre la possibilité d’introduire un login et un mot de passe. Pour les clients qui n’ont pas un
compte cette interface lui permet d’en créer un à travers un lien hypertexte affichant un formulaire.
5. Formulaire d’inscription : s’affiche quand l’internaute clique sur le lien "créer un compte" qui se
trouve déjà dans l’interface authentification. Cette interface permet de saisir différentes informations sur
un internaute permettant à la fin de créer un compte sur le site.
6. Panier Client : s’affiche quand l’internaute clique sur l’icône d’un panier qui se trouve dans l’en-tête
de page. Cette interface permet de visualiser les différents produits que l’internaute à commander au
cours de sa visite. Elle donne la main de modifier la quantité commandée d’un produit ou de supprimer
toute une ligne. Il faut aussi permettre à l’internaute de valider son panier et d’envoyer la commande.
N.B : Dans ce projet cette interface doit contenir au moins 5 produits commandés avec des quantités
différentes.
Ce projet doit être fait par un binôme appartenant au même groupe de TP. Dans
l’espace de cours "Programmation web1", vous trouverez un espace de dépôt dans
lequel vous devez déposer votre projet (code souce)+un rapport au format PDF.
(Date limite 30/11/2024 à 23h:59)
Le jour de la soutenance vous devez remettre un rapport (version papier).
Les soutenances auront lieu lors des séances de TP du 02/12/2024 au 07/12/2024.
