Rapport: 2024-2025
Projet: Site de E-commerce
Binôme : Moujtahid Adam
Aaquil El Mehdi
Remerciment :
Nous tenons à exprimer notre profonde gratitude à toutes les
personnes qui ont contribué de près ou de loin à la réalisation de
ce projet de E-commerce.
Nous remercions tout particulièrement notre encadrante
Nouhaila Moussammi pour ses conseils précieux, sa
disponibilité et son accompagnement tout au long du projet. Son
expertise nous a permis de mieux comprendre les enjeux
techniques et fonctionnels liés à la mise en place d’une
plateforme de commerce en ligne.
Nous adressons également nos remerciements à l’ensemble du
corps enseignant et à nos camarades pour leurs retours
constructifs et leur soutien moral.
Enfin, un grand merci à nos familles et proches pour leur
encouragement et leur patience durant cette période de travail
intensif.
Objectif :
L’objectif principal de ce projet est de concevoir et
développer un site e-commerce fonctionnel permettant
aux utilisateurs de :
Consulter un catalogue de produits organisé par
catégories,
Ajouter des articles,
Passer une commande de manière sécurisée,
Gérer leur compte client (inscription, connexion),
Et pour l’administrateur : gérer les produits, les
utilisateurs et les commandes.
Ce projet vise à simuler le fonctionnement d’une boutique
en ligne réelle, tout en appliquant les connaissances en
développement web, gestion de base de données et
logique métier.
Partie : HTML
Structure HTML ([Link]):
1. En-tête HTML (<head>)
o Déclaration du charset UTF-8 et configuration responsive.
o Titre de la page : Shopify
o Inclusion d’une feuille de style CSS ([Link]) pour la mise
en forme.
o Ajout de la bibliothèque Font Awesome pour intégrer des
icônes (panier, utilisateur, réseaux sociaux…).
o
2. Barre de navigation (<nav class="navbar">)
o Logo et lien vers l’accueil.
o Menu de navigation avec liens vers différentes pages :
Accueil, Nouveauté, Périphériques, Soldes, Connexion et
Panier.
o Utilisation d’icônes Font Awesome pour les liens utilisateur
et panier.
o
3. Section de contenu principal (<section class="content">)
o Mise en avant de la section Nouveautés avec un bouton de
redirection.
o
4. Produits phares (<section class="section_produits">)
o Affichage de plusieurs cartes de produits contenant :
Image du produit,
Description technique (CPU, GPU, stockage, RAM),
Nom du produit,
Prix (en dirhams),
Bouton d’achat.
5. Pied de page (<footer>)
o Informations de contact et mentions.
o Icônes de réseaux sociaux pour inviter à suivre la boutique en
ligne.
Fichier (1) : [Link]
Cette page sert à :
Présenter les meilleures ventes de manière
attractive.
Orienter l’utilisateur vers les nouveautés, les
soldes, les catégories périphériques.
Donner un accès rapide au panier et à la connexion
client.
Valoriser l’image de marque par un footer soigné et
des liens vers les réseaux sociaux.
Voici son Code:
Structure HTML (Nouveaté.HTML):
1. En-tête HTML (<head>)
o Déclaration du charset (UTF-8) et paramètre pour l’affichage
responsive.
o Titre : Shopify
o Inclusion de la feuille de style [Link] pour la mise en forme.
o Intégration de la bibliothèque Font Awesome pour les icônes
(utilisateur, panier, réseaux sociaux…).
2. Barre de navigation (<nav class="navbar">)
o Logo avec un lien vers la page d’accueil.
o Menu de navigation avec liens vers : Accueil, Nouveautés,
Périphériques, Soldes, Connexion, Panier.
3. Bannière d’introduction (<section class="content">)
o Titre : Nouveauté
o Message promotionnel sur les dernières technologies.
o Lien “Découvrir” pour explorer les produits.
4. Affichage des nouveaux produits (<section class="section_produits">)
o Utilisation de cartes (<div class="carte">) pour chaque produit.
o Chaque carte contient :
Une image du produit,
Une description (spécifications techniques),
Le nom de la marque ou du modèle,
Le prix affiché en dirhams (MAD),
Un bouton “acheter”.
o Produits présentés :
Casque Sony XM5,
Clavier gaming Mars,
PC Dell XPS,
PC Gamer haut de gamme (i7/RTX 4080),
Souris Razer,
Plusieurs PC gamers récents,
Écran MSI 144 Hz.
5. Pied de page (<footer>)
o Texte de clôture symbolique (Visca Barça),
o Liens vers les réseaux sociaux via icônes (LinkedIn, Facebook,
Instagram, Twitter),
o Mentions légales.
Fichier (2) : Nouveaté.HTML
Cette page sert à :
Promouvoir les nouveaux produits de manière
claire et dynamique.
Attirer l’attention des visiteurs sur les articles
récemment intégrés à la boutique.
Inciter à l’achat via une interface intuitive, visuelle
et rapide.
Fournir un accès continu à la navigation globale du
site (panier, connexion, etc.).
Voici son Code:
Structure HTML ([Link]):
1. <head> – En-tête
Définition du charset et du viewport pour l’affichage responsive.
Titre de la page : Shopify
Lien vers :
o Fichier CSS local : [Link]
o Bibliothèque Font Awesome (icônes)
2. <body> – Corps de la page
a. <nav class="navbar"> – Barre de navigation
Logo : lien vers [Link] avec icône fa-shop
Menu de navigation (<ul class="menu">) :
o Accueil
o Nouveauté
o Peripherique (page active)
o Solde
o Connexion (icône utilisateur)
o Panier (icône panier)
b. <section class="content"> – Bandeau promotionnel
Titre : Nouveauté
Texte descriptif du catalogue
Bouton/lien vers la page [Link]
c. <h1 class="produits_text"> – Titre des produits
Titre principal : Nos meilleures Peripherique
d. <section class="section_produits"> – Conteneur de produits
<div class="produits"> : ensemble de cartes produits
o Chaque produit est dans une <div class="carte"> :
Image (<div class="img">) : produit illustré
Description (<div class="desc">) : caractéristiques techniques
Titre (<div class="titre">) : nom de la marque ou modèle
Boîte de prix/achat (<div class="box">) :
Prix (<div class="prix">)
Bouton acheter
e. <footer> – Pied de page
Ligne de séparation visuelle
Message personnalisé : Visca Barça
Appel à rejoindre les réseaux sociaux (liste d’icônes)
Mention légale : Company SHOPY © 2020
Fichier (3) : [Link]
La page [Link] du site Shopify est dédiée à la
présentation des périphériques informatiques disponibles dans la
boutique. Elle suit une structure HTML bien organisée et
cohérente avec le reste du site, tout en mettant en valeur des
produits technologiques modernes et performants.
Voici le code:
Structure HTML ([Link]):
1. <head> – En-tête de la page
Définition :
o Encodage (charset="UTF-8")
o Affichage responsive (viewport)
Titre : Shopify
Liens vers :
o Fichier CSS ([Link])
o Font Awesome (icônes sociales et décoratives)
2. <body> – Corps de la page
a. <nav class="navbar"> – Barre de navigation principale
Logo : lien vers [Link] avec icône fa-shop
Menu (<ul class="menu">) :
o Accueil
o Nouveauté
o Périphérique
o Solde (page actuelle)
o Connexion (icône utilisateur)
o Panier (icône)
b. <section class="content"> – Bannière d’introduction
Titre : Nouveauté
Paragraphe descriptif : “Notre nouveau catalogue avec les
technologies les plus avancées”
Bouton : lien vers [Link]
c. <h1 class="produits_text"> – Titre principal
Intitulé : Nos Meilleures Offres
d. <section class="section_produits"> – Section des produits en solde
Conteneur global : <div class="produits">
Chaque produit est structuré comme suit :
o <div class="carte">
Image : <div class="img"> avec <img src="...">
Description : <div class="desc"> (détails techniques)
Titre du produit : <div class="titre"> (marque ou
modèle)
Prix + bouton d’achat :
<div class="prix"> : prix du produit
<button class="achat"> : bouton “acheter”
e. <footer> – Pied de page
Ligne de séparation (<p>---------------------------------------</p>)
Bloc réseaux sociaux :
o Message personnel : Visca Barça
o Invitation à rejoindre les réseaux sociaux
o Liste d’icônes : LinkedIn, Facebook, Instagram, Twitter
Mentions légales :
o Mention Egale | Company SHOPY © 2020
Fichier (4) : [Link]
La page [Link] du site Shopify a pour objectif
principal de présenter les produits en promotion ou
bénéficiant de réductions temporaires. Elle permet aux
visiteurs d’accéder rapidement aux meilleures offres
disponibles dans la boutique, en mettant en avant des
articles technologiques à prix réduits.
Voici Le code:
Fichier (5) : [Link]
La page [Link] du site Shopify a pour objectif
de permettre aux nouveaux utilisateurs de créer un
compte personnel sur la plateforme. Elle recueille des
informations essentielles telles que le nom, prénom,
email, numéro de téléphone, mot de passe, date de
naissance et le genre de l’utilisateur.
Fichier (6) : [Link]
L’objectif de la page [Link] est de permettre à un
nouvel utilisateur de créer un compte sur le site Shopify. Elle
propose un formulaire d’inscription complet, incluant les
champs de saisie pour le nom, prénom, numéro de téléphone,
adresse e-mail, date de naissance, genre, et mot de passe. Cette
page facilite l’accès personnalisé aux services du site, tout en
intégrant une option de retour à l’accueil et un lien vers la
connexion pour les utilisateurs déjà inscrits.
Partie : CSS
Fichier : [Link]
L’objectif principal du fichier [Link] est de définir le style visuel et la
mise en page d’un site web e-commerce. Il permet de personnaliser
l’apparence des éléments HTML afin d’offrir une interface utilisateur
attrayante, moderne et cohérente. Ce fichier CSS gère notamment :
La barre de navigation avec un positionnement fixe et un style
épuré.
La section d’accueil avec une image de fond en plein écran et du
contenu centré.
La présentation des produits sous forme de cartes avec titres,
images, prix et boutons d’achat.
Le pied de page contenant des icônes de réseaux sociaux et des
messages de fin.
La mise en forme générale du site (polices, couleurs, marges,
alignements, effets au survol, etc.).
Ce fichier contribue donc à l’ergonomie, l’esthétique et l’identité
visuelle du site, tout en garantissant une meilleure expérience utilisateur.
Fichier: [Link]
L’objectif de ce fichier [Link] est de définir le style graphique
d’un formulaire de connexion et d’inscription au sein d’un
site web. Il permet de créer une interface utilisateur claire,
moderne et centrée à l’écran, en utilisant une mise en page
soignée et une palette de couleurs contrastée (fond noir,
formulaire blanc, boutons rouges).
Ce fichier gère les éléments suivants :
Centrage du formulaire dans la page grâce à Flexbox.
Stylisation du formulaire (bordures, arrondis, espacement,
fond).
Utilisation d’une police personnalisée via Google Fonts
(Tagesschrift) pour une touche d'identité visuelle.
Affichage des champs de saisie (email, mot de passe,
nom, prénom, téléphone, date).
Ajout d’éléments sociaux stylisés (icônes dans .Reseaux-
media).
Mise en forme des boutons pour la connexion et les liens
d’inscription, avec effets de contraste et accessibilité
visuelle.
Conclusion:
Ce projet de création d’un site e-commerce a permis de
mettre en œuvre les compétences acquises en
développement web, tant sur le plan du design que de la
structure fonctionnelle. À travers la mise en place d’un
site vitrine contenant une page d’accueil dynamique, une
section de produits, un formulaire de
connexion/inscription, et un pied de page interactif, nous
avons pu aborder des aspects essentiels du développement
front-end (HTML/CSS), ainsi que la gestion de
l’expérience utilisateur.
Les sources pour mon projet:
-Les forme:
[Link]
-L’ecriture: [Link]
