Université Mohammed 1er

École Supérieure de Technologie de Nador

ESTN

PROJET DE FIN D’ÉTUDES

Présenté en vue de l’obtention du
Diplôme de technicien supérieur en informatique
Filière : Développement d’applications Web & Mobile

Réalisation d’un site

e-commerce
Réalisé par : Sous la direction de:
Abdelali SADIK Mr. EL FISSAOUI Mohamed

Soutenu le 02/04/2024 devant le jury composé de :

-Pr. EL FISSAOUI Mohamed (Encadrant et examinateur)
-Pr. ANSARI Anass (Examinateur)

Année universitaire : 2023/2024

 Dédicace
Grâce à Dieu et sa grâce, On dédie la totalité de notre travail :

À nos chers pères

Qui nous ont mis sur le bon chemin et nous ont appris que le secret de la
réussite est d'avoir l'esprit de persévérance.

À nos chères mères

Qui ont été toujours notre espoir de succès.

À nos sœurs et frères

Pour leurs soutiens moraux et surtout pendant les moments les plus
difficiles.

À tous nos amis, nous

enseignants
On vous dédie ce travail qui, sans vous, ne serait peut-être jamais
achevé…

Merci beaucoup ...

2
 Remerciements
Tout d'abord, nous souhaitons adresser nos sincères remerciements à
notre encadrant, M. Mohammed El Fissaoui, pour son encadrement
attentif, sa disponibilité et ses conseils avisés tout au long de ce projet.
Sa expertise et son soutien constant ont été des éléments essentiels dans
la réalisation de ce travail, et nous lui en sommes très reconnaissants.

Nos remerciements vont également à tous les enseignants de la

Faculté des Sciences et Techniques de Nador pour la qualité
exceptionnelle de la formation qu'ils nous ont dispensée. Leur
dévouement à notre éducation a été une source d'inspiration tout au long
de notre parcours académique.

Nous tenons également à exprimer notre reconnaissance envers tous

les membres du jury pour l'honneur qu'ils nous ont accordé en évaluant
notre travail. Leur expertise et leurs commentaires constructifs ont
grandement enrichi notre compréhension du sujet et ont contribué à
l'amélioration de ce rapport.

Enfin, nous exprimons notre gratitude envers nos familles et amis

pour leur soutien indéfectible et leurs encouragements tout au long de
cette aventure académique.

3
 Résumé
Ce projet vise à développer un site de commerce électronique
complet avec une interface client conviviale et une interface
administrateur robuste. L'objectif principal est de fournir une plateforme
interactive permettant aux utilisateurs de parcourir une gamme
diversifiée de produits, de passer des commandes en ligne en toute
sécurité, et d'offrir aux administrateurs les outils nécessaires pour gérer
efficacement les produits, les commandes et les utilisateurs.

Une analyse détaillée des exigences et des fonctionnalités clés a été

effectuée pour définir les besoins des utilisateurs finaux et des
administrateurs. L'accent a été mis sur la conception d'une interface
utilisateur intuitive et esthétique, mettant en valeur les produits et
facilitant la navigation pour les clients.

Du côté de l'administration, des fonctionnalités avancées ont été

développées pour permettre la gestion complète du catalogue de
produits, la gestion des commandes et des clients, ainsi que la géné

La sécurité a été une priorité tout au long du processus de

développement, avec la mise en place de mécanismes d'authentification
robustes et de protocoles de cryptage des données pour assurer la
confidentialité des informations des utilisateurs et la sécurité des
transactions en ligne.

En conclusion, ce projet a abouti à la création d'une plateforme de

commerce électronique sophistiquée offrant une expérience utilisateur
optimale pour les clients et des fonctionnalités de gestion complètes
pour les administrateurs. Cette expérience a permis d'explorer en
profondeur les défis et les opportunités du commerce en ligne, tout en
développant des compétences avancées en conception web et en
programmation.

4
 Abstract
This project aims to develop a comprehensive e-commerce website
with a user-friendly client interface and a robust administrative
interface. The main objective is to provide an interactive platform
allowing users to browse a diverse range of products, securely place
orders online, and offer administrators the necessary tools to effectively
manage products, orders, and users.

A detailed analysis of requirements and key features has been

conducted to define the needs of end-users and administrators. Emphasis
has been placed on designing an intuitive and aesthetically pleasing user
interface, showcasing products and facilitating navigation for
customers.

On the administrative side, advanced features have been developed

to enable complete management of the product catalog, order
management, and customer management, as well as the generation of
reports.

Security has been a priority throughout the development process,

with the implementation of robust authentication mechanisms and data
encryption protocols to ensure the confidentiality of user information
and the security of online transactions.

In conclusion, this project has resulted in the creation of a

sophisticated e-commerce platform offering an optimal user experience
for customers and comprehensive management features for
administrators. This experience has allowed for an in-depth exploration
of the challenges and opportunities of online commerce while
developing advanced skills in web design and programming.

5
 ‫الملخص‬
‫يهدف هذا المشروع إلى تطوير موقع شامل للتجارة اإللكترونية مع واجهة عميل سهلة‬
‫االستخدام وواجهة إدارية قوية‪ .‬الهدف الرئيسي هو توفير منصة تفاعلية تسمح‬
‫للمستخدمين بتصفح مجموعة متنوعة من المنتجات‪ ،‬وتقديم الطلبات بشكل آمن عبر‬
‫اإلنترنت‪ ،‬وتزويد المسؤولين باألدوات الالزمة إلدارة المنتجات والطلبات والمستخدمين‬
‫‪.‬بشكل فعال‬

‫تم إجراء تحليل مفصل للمتطلبات والميزات الرئيسية لتحديد احتياجات المستخدمين‬
‫النهائيين والمسؤولين‪ .‬وقد تم التركيز على تصميم واجهة مستخدم بديهية وممتعة من‬
‫‪.‬الناحية الجمالية‪ ،‬وعرض المنتجات وتسهيل التنقل للعمالء‬

‫على الجانب اإلداري‪ ،‬تم تطوير ميزات متقدمة لتمكين اإلدارة الكاملة لكتالوج‬
‫‪.‬المنتجات‪ ،‬وإدارة الطلبات‪ ،‬وإدارة العمالء‪ ،‬باإلضافة إلى إنشاء التقارير‬

‫لقد كان األمن أولوية طوال عملية التطوير‪ ،‬مع تنفيذ آليات مصادقة قوية‬
‫وبروتوكوالت تشفير البيانات لضمان سرية معلومات المستخدم وأمن المعامالت عبر‬
‫‪.‬اإلنترنت‬

‫وفي الختام‪ ،‬أدى هذا المشروع إلى إنشاء منصة تجارة إلكترونية متطورة توفر تجربة‬
‫مستخدم مثالية للعمالء وميزات إدارة شاملة للمسؤولين‪ .‬وقد أتاحت هذه التجربة‬
‫استكشافًا متعمقًا لتحديات وفرص التجارة عبر اإلنترنت مع تطوير المهارات المتقدمة‬
‫‪.‬في تصميم وبرمجة الويب‬

‫‪6‬‬
 Table des matières
Dédicace ........................................................................................................................................2
Remerciements ..............................................................................................................................3
Résumé ..........................................................................................................................................4
Abstract ..........................................................................................................................................5
‫ الملخص‬.............................................................................................................................................6
Liste des Acronymes....................................................................................................................10
Introduction..................................................................................................................................11
Chapitre 1: ...................................................................................................................................12
Contexte général du projet ...........................................................................................................12
I. Problématique ....................................................................................................................13
II. Description du projet .........................................................................................................13
III. Etude des besoins:..............................................................................................................14
1. Besoins fonctionnels ......................................................................................................14
2. Besoins non fonctionnels: ..............................................................................................15
IV. Architecture technique de notre site: .................................................................................17
V. Les objectifs du projet .......................................................................................................18
Chapitre 2: ...................................................................................................................................20
Analyse et conception ..................................................................................................................20
VI. Conception détaillée de notre Application ........................................................................21
1. Les diagrammes des cas d'utilisation .............................................................................21
2. Les diagrammes d’activités ...........................................................................................26
3. Les diagrammes des séquences: ....................................................................................30
4. Diagramme de classe .....................................................................................................37
5. Modèle logique des données ..........................................................................................39
6. Structure de notre Site. ..................................................................................................40
Chapitre 3 : ..................................................................................................................................41
Réalisation ...................................................................................................................................41
I. Les langages et les outiles de développement ...................................................................42
1. Les langages de programmation ....................................................................................42
2. Outils de Développement : ............................................................................................44
II. Interfaces de l’application réalisée ....................................................................................46
1. Côté client ......................................................................................................................46
3. Côté admin .....................................................................................................................62
Conclusion ...................................................................................................................................75
Bibliographie ...............................................................................................................................76

7
 Tableau des figures

Figure 1: Architecture technique ................................................................................17

Figure 2: Acteur ............................................................................................................21
Figure 3: Cas d'utilisation............................................................................................22
Figure 4: Diagramme de cas d’utilisation de Visiteur ..............................................23
Figure 5: Diagramme de cas d’utilisation de Visiteur ..............................................24
Figure 6:Diagramme de cas d’utilisation_Administrateur .......................................25
Figure 7:Diagramme d’activité inscription ................................................................27
Figure 8:Diagramme d’activité d’authentification....................................................28
Figure 9:Diagramme d’activité gestion d’article .......................................................29
Figure 10:présentation du modèle MVC ....................................................................30
Figure 11:Diagramme de séquences d’authentification du visiteur ........................31
Figure 12:Diagramme de séquences d’authentification du Client ...........................32
Figure 13:Diagramme de séquences d’achats d’un produits ...................................34
Figure 14:Diagramme de séquences d’authentification d’administrateur .............35
Figure 15:Diagramme de séquence suppression d’article ........................................36
Figure 16:Diagramme de classe de notre site.............................................................37
Figure 17:Structure de notre site ................................................................................40
Figure 18: page d'inscription .......................................................................................46
Figure 19:page de connexion .......................................................................................47
Figure 20: Page d'accueil .............................................................................................48
Figure 21:Header section .............................................................................................48
Figure 22:Hero section .................................................................................................49
Figure 23 : Products section ........................................................................................50
Figure 24: Newsletter section ......................................................................................50
Figure 25: Footer ..........................................................................................................51
Figure 26: Détails du produit\ .....................................................................................52
Figure 27:Commentaire Section .................................................................................52
Figure 28: Page des blogs .............................................................................................53
Figure 29: la page "À propos" ....................................................................................54
Figure 30: Panier lateral ..............................................................................................55
Figure 31:Panier ...........................................................................................................56
Figure 32: Le menu déroulant du profil si l'utilisateur n'est pas connecté .............57
Figure 33: Le menu déroulant du profil si l'utilisateur est connecté .......................57
Figure 34:lien "modifier le profil" ..............................................................................58
Figure 35: General Section ..........................................................................................58
Figure 36: Modifier le mot de passe ............................................................................59
Figure 37: Informations de livraison ..........................................................................60
Figure 38: "Support" link ...........................................................................................60
Figure 39: Informations de support ............................................................................61
Figure 40: formulaire de contact.................................................................................62
Figure 41: Page de connexion administrateur ...........................................................63
Figure 42:Dashboard....................................................................................................64
Figure 43:Side Bar ........................................................................................................64
Figure 44:All categories ...............................................................................................65
Figure 45: Edit categories ............................................................................................66

8
Figure 46: Add category ..............................................................................................67
Figure 47: All products ................................................................................................67
Figure 48 : Edit product...............................................................................................68
Figure 49: Add product................................................................................................69
Figure 50: All Blogs ......................................................................................................70
Figure 51: Add blogs ....................................................................................................71
Figure 52: All users ......................................................................................................72
Figure 53: Support Messages ......................................................................................72
Figure 54: Orders page ................................................................................................73
Figure 55:View order details .......................................................................................74
Figure 56: Order history ..............................................................................................74

Tableau des tableaux

Table 1: la liste des acronyms ......................................................................................10

9
Liste des Acronymes
Abréviation Description
HTML Hypertext Markup
Language
CSS Cascading Style Sheets
PHP Hypertext Preprocessor
JS JavaScript
jQuery JavaScript Library
AJAX Asynchronous JavaScript
and XML
Bootstrap Front-end Framework
MySQL Structured Query
Language
WAMP SERVER Windows, Apache,
MySQL, PHP
UML Unified Modeling
Language

Table 1: la liste des acronymes

10
 Introduction
Au terme de notre formation en développement des Applications web et
mobile au sein de l’École Supérieure de Technologie de Nador, tous les
étudiants de licence ont été invités à mener à bien un projet individuel,
dans le but de découvrir et de se familiariser avec les tenants et
aboutissants du développement web et mobile.

Aujourd’hui, le commerce électronique occupe une place de choix dans

de nombreuses organisations internationales, et c'est dans ce contexte
que j'ai choisi de me consacrer à la création d'un site e-commerce.
L’objectif de notre projet est de développer une plateforme permettant
de faciliter l’achat des produits en ligne, offrant ainsi aux utilisateurs une
expérience pratique et sans contraintes de déplacement physique.

Dans le cadre de ce rapport, nous présentons le projet "AS", une

plateforme de commerce en ligne développée dans le but de fournir une
expérience d'achat exceptionnelle pour les utilisateurs, tout en offrant
une vitrine exclusive pour le vendeur. En tant qu'étudiant de l'École
Supérieure de Technologie de Nador, ce projet représente une
opportunité unique d'explorer les subtilités du commerce électronique,
tout en mettant en pratique les compétences acquises au cours de notre
formation.

Ce rapport documente le processus de conception et de développement

de la plateforme "AS", en mettant en lumière les défis rencontrés, les
solutions mises en œuvre et les leçons apprises tout au long du projet.
Nous commençons par une analyse approfondie du contexte du
commerce électronique, mettant en évidence les tendances actuelles et
les meilleures pratiques de l'industrie. Ensuite, nous détaillons les
différentes étapes du développement, en mettant l'accent sur des aspects
clés tels que la conception de l'interface utilisateur, la sécurité des
données et l'intégration des fonctionnalités essentielles.

11
 Chapitre 1:
Contexte général du
projet

12
I. Problématique
La transition des ventes traditionnelles en personne vers les ventes virtuelles a
considérablement modifié les priorités des opérations commerciales, mettant ainsi
en lumière l'importance croissante du commerce électronique. Les boutiques en
ligne sont devenues des incontournables pour les entreprises qui souhaitent
commercialiser efficacement leurs produits et services. Ces plateformes offrent un
guichet unique pour les clients, où ils peuvent accéder à une gamme complète
d'informations, de produits et de services en rapport avec l'activité de l'entreprise.

Les sites de vente en ligne offrent aux clients l'avantage d'un marché virtuel
constamment mis à jour, sans contrainte de temps ou de lieu. Cette accessibilité
garantit aux clients de ne jamais manquer une opportunité d'achat, tout en éliminant
les obstacles liés à la distance géographique, aux contraintes horaires ou aux
problèmes de transport. Parallèlement, ces plateformes permettent aux entreprises
d'atteindre une audience plus large et diversifiée, en exposant leurs produits à un
public potentiellement mondial.

Notre projet est réalisé dans le cadre de notre formation en développement des
Applications web et mobile , où nous avons pu mettre en pratique nos compétences
techniques et notre compréhension des besoins du marché dans le domaine du
commerce électronique.

II. Description du projet

• Descriptifs de sites web à développer:

Le site que nous avons développé est un site de vente en ligne, le choix de ce
type de site réside de la multitude d’interactions possible, le besoin d’accessibilité et
de satisfaction des internautes du site.

• Le contenu de notre site:

Notre application contient principalement des vêtements, des cosmétiques et

des articles électroniques (chemises, manteaux, téléphones, ordinateurs, parfums,
crèmes pour la peau, crèmes pour la tête, etc.).

13
III. Etude des besoins:
Dans cette section du chapitre, nous nous intéressons aux besoins des utilisateurs
traités dans notre projet c’est à dire ce que nous comptons implémenter pour tester
et valider notre site, ces besoins sont :
1) l’inscription du client
2) le choix des produits,
3) le lancement des commandes,
4) la confirmation et donc le payement en ligne à travers les spécifications
fonctionnelles et non fonctionnelles pour aboutir à un site de qualité qui répond aux
besoins des clients.

1. Besoins fonctionnels
Les besoins fonctionnels se présentent en huit grandes parties

▪ Exposition des produits ainsi que leurs prix et caractéristiques.

▪ Inscription des clients.
▪ Ajout des produits choisis au panier.
▪ Choix du mode de livraison.
▪ Choix de la boutique de livraison
▪ Confirmation de la commande.
▪ Le payement en ligne.
▪ Confirmation de l’opération d’achat et la réception de la facture

a) Explication détaillé des différentes fonctions

➢ L’exposition des produits:

Notre site doit disposer d’une vitrine virtuelle à travers laquelle le client peut
consulter une grande variété des produits il sera donc indispensable d’y présenter les
prix et les caractéristiques techniques de chaque produit pour faciliter la sélection du
produit à acheter.

➢ L’inscription du client:
Jusqu’à ce stade, le client est toujours anonyme mais pour pouvoir passer à un
stade plus rigoureux, il faut qu’il s’inscrive, cela se fait uniquement pour la première
commande mais après, notre client peut s’authentifier avec son E-mail et son mot de
passe pour passe d’autres commandes.

➢ Ajout des produits au panier :

14
 Après le choix d’un produit le client doit mentionner la quantité qui s’ajoute
automatiquement à son panier avec le prix unitaire et le prix total.

➢ Mode de livraison:
Un client qui a déjà confirmé sa commande il est libre de choisir le mode de
livraison de sa marchandise soit à domicile ou chez une boutique selon une liste de
chois mentionnée sur notre site web.

➢ Boutique de livraison:
Si le mode de livraison choisi est la boutique il faut que le client indique cette
boutique avec une précision qui permet aux livreurs d’être sûrs que la marchandise
sera dans le bon lieu et dans les rendez-vous, ayant une panoplie de boutiques réelles,
le client pourra choisir la plus proche.

➢ la livraison à domicile:
En choisissant cette option comme mode de livraison, le client devrait remplir
soigneusement un formulaire contenant les informations nécessaires telles que:
• Le nom du destinataire qui peut être le client même ou une autre personne.
• L’adresse précise de livraison.
• Le numéro de la pièce d’identité du destinataire.
• Le jour et l’heur de la livraison estimés.

➢ La confirmation de la commande:
Jusqu’à cette phase on a un client, une commande et une adresse de livraison le
chemin maintenant est plus clair la commande ne passera qu’après la validation de
toutes les informations qui sont affichées dans une seule interface avant de passer à
la phase de payement.

➢ Le payement:
C’est une phase très sensible pour cela il faut qu’elle soit très sécurisée, pour
terminer la procédure de payement avec succès le client doit choisir un type de carte
dans une liste de choix des cartes proposées sur notre site web, indiquer le numéro
de sa carte et sa valeur de vérification dite CVV.

➢ La fin de l’opération d’achat:

La page finale représente un petit message de remerciement à nos clients avec
une idée sur l’adresse, la date, le temps de la livraison en question et bien sur la
possibilité d’imprimer la facture du client.

2. Besoins non fonctionnels:

15
 Les besoins non fonctionnels sont importants car ils agissent non seulement de
façon indirecte sur le résultat et sur le rendement de l’utilisateur, mais aussi
correspondent aux critères d’évaluation communs de l’accessibilité et de user
Expérience que nous avons retenus après notre littérature. Ce qui fait qu’ils ne
doivent pas être négligés, et doivent être prise en compte à chaque niveau de
développement. Ces critères sont les suivants :

a. Fiabilité: L’application doit fonctionner de façon cohérente sans erreurs et doit

être satisfaisante.

b. Les erreurs : Les ambigüités doivent être signalées par des messages d’erreurs
bien organisés pour bien guider l’utilisateur et le familiariser avec notre site web.

c. Ergonomie et bon Interface: L’application doit être adaptée à l’utilisateur sans

qu’il ne fournisse aucun effort (utilisation claire et facile) de point de vue navigation
entre les différentes pages, couleurs et mise en textes utilisés.

d. Sécurité: Notre solution doit respecter surtout la confidentialité des données

personnelles des clients qui reste l’une des contraintes les plus importantes dans les
sites web.

e. Aptitude à la maintenance et la réutilisation: Le système doit être conforme à

une architecture standard et claire permettant sa maintenance et sa réutilisation.

f. Compatibilité et portabilité: Un site web quel que soit son domaine, son éditeur
et son langage de programmation ne peut être fiable qu’avec une compatibilité avec
tous les navigateurs web et tous les moyens que ce soit PC, IPAD ou Mobiles.

g. Trouvabilité : C’est la facilité de trouver l’information sur le site ou sur

l’application.

h. Crédibilité : Correspond à la crédibilité de l’information afficher sur le site,

autrement dit c’est aussi l’assurance qu’à l’utilisateur sur ce qu’il trouve sur notre
site.

i. Lignes éditoriales: L'information présentée est fiable, précise, suffisamment

détaillée et compréhensible. Le format de son affichage facilite son utilisation.

j. Temps d’attente: C’est le temps d’affichage de l’information une fois que

l’internaute lance sa requête. C’est un point important pour l’UX.

k. Plaisir: C’est le ressenti positif qu’a l’internaute pendent et après l’interaction

avec le site.

16
 l. Groupement items: C’est la faciliter de trouver les items (icones) du fait d’être
classifier par leur catégorie

m. Lisibilité: C’est la facilite de lire les contenu de votre site ou application par ces
visiteurs.

n. Conformité: Elle doit être adéquate pour permettre l'accomplissement de la

tâche.

o. Feedback: C’est le retour du système à l’utilisateur par des messages ou tout

autre moyen lui permettant de voir le résultat de ces actions.

p. Incitation: L’Incitation permet de préciser aux utilisateurs de manière directe les

actions possible.

IV. Architecture technique de notre site:

Figure 1: Architecture technique

17
➢ Éléments:
• Page d'accueil: page principale du site web.
• Catalogue: page regroupant tous les produits disponibles.
• Fiche produit: page détaillée d'un produit.
• Panier: page regroupant les produits sélectionnés par le client.
• Formulaire de commande: page où le client saisit ses informations de livraison et
de paiement.
• Confirmation de commande: page indiquant que la commande a été validée.

➢ Navigation
✓ Le client peut naviguer entre les différentes pages du site web en utilisant les menus,
les liens et les boutons.
✓ Le client peut accéder au catalogue depuis la page d'accueil.
✓ Le client peut consulter la fiche produit d'un produit en cliquant sur son image ou son
nom.
✓ Le client peut ajouter un produit au panier depuis la fiche produit.
✓ Le client peut accéder au panier depuis n'importe quelle page du site web.
✓ Le client peut valider sa commande depuis le panier.
✓ Le client est redirigé vers la page de confirmation de commande après avoir validé
sa commande.

V. Les objectifs du projet

a. Analyser les plateformes de commerce électronique réussies pour identifier les

exigences et les fonctionnalités clés.

b. Concevoir une interface conviviale pour les clients avec un accent sur l'esthétique
et la facilité d'utilisation.

c. Concevoir une interface administrateur intuitive et fonctionnelle pour une gestion

efficace du site.

d. Mettre en œuvre des mécanismes d'authentification et d'autorisation sécurisés

pour protéger les données des utilisateurs.

e. Développer un catalogue de produits robuste avec des fonctionnalités de

recherche avancée et de filtrage.

18
f. Développer un système de panier d'achat intuitif et facile à utiliser pour les
clients.

g. Intégrer des passerelles de paiement sécurisées pour faciliter les transactions en

ligne.

h. Mettre en œuvre des fonctionnalités de gestion des commandes pour permettre

aux administrateurs de suivre et de gérer les commandes efficacement.

i. Effectuer des tests complets pour garantir la fiabilité, la sécurité et les

performances du site web, tant du côté client que du côté administrateur.

j. Documenter de manière exhaustive le processus de développement, y compris les

défis rencontrés et les solutions mises en œuvre, pour assurer une traçabilité
complète du projet et faciliter la maintenance future.

19
 Chapitre 2:
Analyse et conception

20
VI. Conception détaillée de notre Application
1. Les diagrammes des cas d'utilisation
a) Définition :
Les diagrammes des cas d'utilisation servent à recueillir, analyser et organiser
les besoins d'un système, ainsi qu'à identifier ses principales fonctionnalités. Ils
représentent la première étape UML dans la conception d'un système. Un diagramme
de cas d'utilisation décrit le comportement d'un système, d'un sous-système, d'une
classe ou d'un composant du point de vue d'un utilisateur externe. Il découpe la
fonctionnalité du système en unités cohérentes appelées cas d'utilisation, qui ont un
sens pour les acteurs du système. Ces cas d'utilisation expriment les besoins des
utilisateurs du système, offrant ainsi une perspective orientée utilisateur plutôt
qu'informatique.

b) Composition du diagramme de cas :

Notre diagramme de cas d'utilisation se compose de trois éléments principaux :

➢ Acteur :
Représente l'idéalisation d'un rôle joué par une personne externe, un processus ou
un élément qui interagit avec le système.

Figure 2: Acteur

➢ Un cas d’utilisation:
C’est une unité cohérente représentant une fonctionnalité visible de l’extérieur.
Il réalise un service de bout en bout, avec un déclenchement, un déroulement et une

21
fin, pour l’acteur qui l’initie. Un cas d’utilisation modélise donc un service rendu
par le système, sans imposer le mode de réalisation de ce service.

Figure 3: Cas d'utilisation

➢ Les relations:
Trois types de relations sont pris en charge par la norme UML et sont
graphiquement représentées par des types particuliers de ces relations.

c) Les acteurs de notre projet:

Notre projet se compose principalement de trois acteurs

➢ Le visiteur:
C’est un individu qui est entrain de fouiller sur le net, cherchant un produit pour
l’acheter ou pour avoir une idée sur les modèles et les prix. Jusqu’à ce stade c’est un
utilisateur inconnu donc il n’est pas encore un client. Avant de devenir client, un
internaute ne possède que la possibilité de consulter le catalogue des produits
disponibles dans le stock du fournisseur et la possibilité de s’inscrire pour devenir
client sur notre site web. Son diagramme de cas d’utilisation se présente comme suit:

22
 Figure 4: Diagramme de cas d’utilisation de Visiteur

➢ Eléments

o Visiteur: personne qui souhaite créer un compte sur le site web.

o Création de compte: page où le visiteur saisit ses informations personnelles.
o navigation et consultation catalogueExplorez et parcourez les produits sans
pouvoir les acheter

d) Le Client:
Cette acteur est un visiteur ayant déjà créer un compte sur notre site, il peut donc
suivre le processus d’achat des produits en toute sécurité sachant que notre système
doit être l’unique responsable de la confidentialité des données personnelles de ses
clients. Voici comment nous présentons son diagramme de cas d’utilisation.

23
 Figure 5: Diagramme de cas d’utilisation de Visiteur

➢ Eléments

o Client : un visiteur ayant déjà créer un compte

o Consulter les produits: permet au client de naviguer sur le site web et de consulter
les différents produits disponibles.
o Gérer le panier: permet au client de gérer son panier. Il peut ajouter des produits
au panier, les supprimer du panier, modifier la quantité des produits, etc.
o Passer commande: permet au client de passer commande. Il doit saisir ses
informations de livraison et de paiement.
o Gérer le compte: permet au client de gérer son compte. Il peut modifier ses
informations personnelles, consulter ses commandes passées, etc.
o Envoyer un message: permet au client d'envoyer un message au service client.
o Payment: permet au client de payer sa commande. Il peut utiliser différents
moyens de paiement,comme paypal etc.

24
e) L’administrateur:
Pour les sites web on l’appelle généralement «le webmaster». C’est celui qui
assure le dynamisme du site et veille sur les mises à jour des produits, de leurs prix,
de leurs disponibilités, de la gestion des payements et la gestion des livraisons.

Figure 6:Diagramme de cas d’utilisation_Administrateur

o Administrateur: responsable de la gestion du système et de ses données.

o Gestion du compte administrateur:
▪ Authentifier administrateur: l'administrateur se connecte au système en
saisissant son identifiant et son mot de passe.
▪ Gérer les utilisateurs: l'administrateur peut ajouter, modifier et supprimer
des utilisateurs du système.
o Gérer les catégories: l'administrateur peut ajouter, modifier et supprimer des
catégories de produits.
o Gérer les produits: l'administrateur peut ajouter, modifier et supprimer des
produits.
o Gérer les commandes: l'administrateur peut consulter, modifier et supprimer
les commandes.
o Gérer les actualités: l'administrateur peut ajouter, modifier et supprimer des
actualités.
o Gérer les offres: l'administrateur peut ajouter, modifier et supprimer des offres
promotionnelles.

25
2. Les diagrammes d’activités
a) Définition :
Un diagramme d'activités est associé à un objet particulier ou à un ensemble
d'objets, et illustre les flux entre les différentes activités et actions. Il permet de
représenter graphiquement le déroulement d'un cas d'utilisation.

b) Activités de notre site web :

• L’inscription : Après avoir consulté les produits, un visiteur désirant passer à
l'achat doit s'inscrire en tant que client pour pouvoir procéder à l'achat.
• L’authentification : Cette étape est essentielle dans tout site de commerce
électronique. Elle permet d'identifier le client qui effectue des actions telles que
charger son panier, payer sa facture et attendre la livraison.
• La gestion des article : Cette activité est réservée à l'administrateur du site web.
Elle consiste à gérer les informations relatives aux articles en stock, notamment la
marque, la quantité et le prix.
• La consultation : Il s'agit de la première étape où les visiteurs peuvent parcourir
le catalogue virtuel des produits. Cette fonctionnalité doit être accessible à tous les
visiteurs du site.
• La gestion du panier : Une fois authentifié, le visiteur devient un client et peut
librement ajouter ou supprimer des produits de son panier, tout en ayant la possibilité
de mettre à jour la quantité des articles commandés.

c) Les diagrammes d’activité de notre site web:

➢ Diagramme d’inscription
La phase d’inscription est indispensable pour passer d’un simple visiteur du site
qui n’a le droit que de consulter les produits et leurs prix à un client qui peut acheter
ses articles désirés et payer sa facture en ligne et donc attendre la livraison de sa
commande à domicile. Nous présentons son diagramme d’activité comme suit:

26
 Figure 7:Diagramme d’activité inscription

• Le visiteur initie une demande d'inscription.

• Le formulaire d'inscription s'affiche à l'écran.
• Le visiteur remplit les champs requis dans le formulaire.
• Le système vérifie les données entrées par l'utilisateur.
• Si les données sont valides, le système les transmet à la base de données. Sinon,
il revient à l'étape précédente pour permettre à l'utilisateur de corriger les
informations incorrectes.
• Le serveur vérifie si le client existe déjà dans la base de données.
• Si le client existe déjà, un message d'erreur est renvoyé, signalant que l'inscription
ne peut pas être complétée.
• Si le client n'existe pas, l'inscription se termine avec succès, et un feedback est
envoyé à l'utilisateur pour confirmer que son inscription a été effectuée avec succès.

27
➢ Diagramme d’authentification
L'authentification est la procédure qui consiste, pour un système informatique,
à vérifier l'identité d'une entité (personne, ordinateur ...), afin d'autoriser son accès
aux systèmes, réseaux, applications... Elle permet donc de valider l'authenticité de
l'entité en question, comme le montre le diagramme suivant:

Figure 8:Diagramme d’activité d’authentification

Notre diagramme s’interprète comme suit:

• Le client demande l’authentification en cliquant sur le bouton login.
• Le formulaire d’authentification s’affiche sur l’écran.
• Le client entre son nom d’utilisateur et son mot de passe.
• Le système vérifie les coordonnés du client sur la base.
• La confirmation du succès ou échec est envoyée au client

28
➢ Diagramme de gestion des articles
Un webmaster est dit également l'administrateur du site. Il a pour but de s'assurer
de la fiabilité de ses services proposés, ainsi que leur audimat et rentabilité. Parmi
ces services nous pouvons citer
o La gestion des produits.
o La gestion des comptes utilisateurs.
o La gestion de la liste des catégories
o La gestion des listes des marques, des produits et beaucoup d’autres activités

Figure 9:Diagramme d’activité gestion d’article

• Le processus s’interprète comme suit:

• L’administrateur précise l’opération à appliquer sur l’article.
• S’il s’agit d’une opération d’ajout, l’administrateur demande le formulaire
d’ajout des nouveaux articles.

29
• Ce formulaire s’affiche.
• L’administrateur saisit les données relatives à l’article concerné.
• Vérification de la validité des données saisies.
• En cas de validité, les données prennent chemin vers la base de données.
• Une deuxième vérification, en ce qui concerne l’existence de l’article dans notre
base.
• Si non les données seront validées.
• Maintenant, si l’opération désirée est de gérer un article déjà existant dans la
base, la sélection de cette article est la première étape.
• Choix du type de gestion qui peut être consultation, modification ou bien
suppression.
• Et en fin la validation de l’opération.

3. Les diagrammes des séquences:

a) Définition
Un diagramme de séquences est un diagramme d'interaction qui expose en détail
la façon dont les opérations sont effectuées : quels messages sont envoyés et quand
ils le sont. En ce qui suit, nous présenterons quelques diagrammes de séquences
relatifs aux cas d’utilisations présentés. Les diagrammes de séquences sont basées
sur le model MVC :

Figure 10:présentation du modèle MVC

30
b) Diagrammes de séquences de notre site web

➢ le visiteur:

Figure 11:Diagramme de séquences d’authentification du visiteur

- Le visiteur demande le formulaire d’inscription.

- Le formulaire s’affiche
- Le visiteur rempli le formulaire.
- Une vérification de l’existence du client dans la base se lance.
- Si le client existe déjà un message d’erreur s’affiche.
- Si c’est un nouveau client confirmation de l’inscription s’affiche.

31
➢ Le client:

i. Diagramme de séquence d’authentification

Figure 12:Diagramme de séquences d’authentification du Client

- Le client entre son login et son mot de passe.

- Une vérification se lance dans la base de données.
- Après un temps de réponse ou l’authentification se valide ou ne message d’erreur
s’affiche

32
ii. Diagramme de séquence d'achat de produit

33
 Figure 13:Diagramme de séquences d’achats d’un produits

- le client choisit les produits

- il lance une procédure de la commande
- une vérification se lance dans la base de données
- si le client est déjà authentifié ,il doit choisir seulement le mode de paiements,
après la commande se valide
- sinon le client doit s’authentifier s'il a déjà un compte,ou bien remplir le
formulaire de commande après il choisit le mode de paiements dans les deux cas
et la commande se valide

34
➢ L’administrateur

i. Diagramme de sequences d’authentification d’administrateur

Figure 14:Diagramme de séquences d’authentification d’administrateur

- L’administrateur entre son login et son mot de passe.

- Une vérification se lance dans la base de données.
- Après un temps de réponse ou l’authentification se valide ou ne message d’erreur
s’affiche

35
 ii. Diagramme de séquences d’article:

Parmi les scénarios dont l’administrateur est en charge nous pouvons mentionner
la gestion des produits exposés sur notre site web telles que la consultation, l’ajout,
la modification et la suppression que nous allons montrer dans le diagramme de
séquence suivant.

Figure 15:Diagramme de séquence suppression d’article

Ce diagramme s’explique comme suit:

- L’administrateur choisit l’interface de suppression.
- Le menu de suppression s’affiche.
- L’administrateur doit sélectionner le produit qu’il désire supprimer.
- Le système averti l’administrateur de l’opération de suppression.
- L’administrateur confirme la suppression.
- L’opération de suppression se termine avec succès.
- Le produit en question se disparait définitivement de la base de données.

36
4. Diagramme de classe
a) Définition
Un diagramme de classes UML décrit les structures d'objets et d'informations
utilisées sur notre site web, à la fois en interne et en communication avec ses
utilisateurs. Il décrit les informations sans faire référence à une implémentation
particulière. Ses classes et relations peuvent être implémentées de nombreuses
manières, comme les tables de bases de données

b) Diagramme de classe de notre site

Figure 16:Diagramme de classe de notre site

37
➢ Acteurs principaux:
• Client: utilise le système pour naviguer, rechercher et acheter des produits.
• Administrateur: responsable de la gestion du système et de ses données.

➢ Explication:
Gestion du compte client:
• Créer un compte: le client crée un compte en saisissant ses informations
personnelles.
• Se connecter: le client se connecte au système en saisissant son identifiant et son
mot de passe.
• Modifier le profil: le client peut modifier ses informations personnelles.
• Mot de passe oublié: le client peut réinitialiser son mot de passe en cas d'oubli.

Gestion du catalogue produits:

• Parcourir le catalogue: le client peut naviguer dans le catalogue pour découvrir
les produits disponibles.
• Rechercher un produit: le client peut rechercher un produit par son nom, sa
catégorie ou d'autres critères.
• Consulter la fiche produit: le client peut consulter les détails d'un produit, tels
que sa description, ses photos, son prix et ses avis.

Gestion du panier:
• Ajouter un produit au panier: le client sélectionne un produit et la quantité
souhaitée et l'ajoute au panier.
• Modifier la quantité d'un produit: le client peut modifier la quantité d'un
produit dans le panier.
• Supprimer un produit du panier: le client peut supprimer un produit du panier.
• Valider le panier: le client valide le panier et passe à la commande.

Gestion de la commande:
• Passer commande: le client choisit son mode de livraison et de paiement et
valide sa commande.
• Suivre la commande: le client peut suivre l'état de sa commande.
• Annuler la commande: le client peut annuler sa commande avant son
expédition.

Gestion du paiement:
• Choisir un mode de paiement: le client choisit un mode de paiement parmi les
options disponibles.
• Effectuer le paiement: le client effectue le paiement en ligne.

38
 Gestion des avis:
• Déposer un avis: le client peut déposer un avis sur un produit qu'il a acheté.
• Consulter les avis: le client peut consulter les avis des autres clients sur un
produit..

Gestion du système:
• Gérer les utilisateurs: l'administrateur peut ajouter, modifier et supprimer des
utilisateurs du système.
• Gérer les catégories: l'administrateur peut ajouter, modifier et supprimer des
catégories de produits.
• Gérer les promotions: l'administrateur peut créer et gérer des promotions sur les
produits.
• Gérer les statistiques: l'administrateur peut consulter les statistiques du système.

5. Modèle logique des données

Un modèle logique de données (MLD) est la représentation des données d'un
système d'information. En utilisant les règles de passages d’un diagramme de classe
vers le MLD, nous avons obtenu le MLD ci-dessous :

CompteUtilisateur : (idUtilisateur, email, motDePasse, estAdmin)

Client : (idClient, nom, prenom, adresse, email, motDePasse, #idUtilisateur)
Produit : (idProduit, #idCategorie, nom, description, prix, quantiteEnStock)
CategorieProduit : (idCategorie, nom)
Commande : (idCommande, dateCommande, #idClient, montantTotal)
LigneCommande : (idLigneCommande, #idCommande, #idProduit, quantite,
prixUnitaire)
ModePaiement : (idModePaiement, nom)
Paiement : (idPaiement, #idCommande, #idModePaiement, montant,
datePaiement)
Commentaire : (idCommentaire, #idProduit, #idClient, commentaire, note)
Promotion : (idPromotion, codePromo, reduction)
UtilisateurPromotion : (#idUtilisateur, #idPromotion)
Panier : (idPanier, #idClient)
ContenuPanier : (idContenuPanier, #idPanier, #idProduit, quantite)
Transaction : (idTransaction, #idClient, montant, dateTransaction)

39
6. Structure de notre Site.
Dans un site web commercial, la navigation et obligatoirement évolutive car le
passage à une phase d’achat nécessite la confirmation de la phase précédente, de
plus le faite maintenir une hiérarchisation équilibrée qui permet l'accès rapide à
l'information et une compréhension intuitive de la façon dont les pages sont
organisées tout en donnant la possibilité d’évoluer est un objectif préalable.
Pour cela nous avons choisis la structure en évolution.

Figure 17:Structure de notre site

40
Chapitre 3 :
Réalisation

41
I. Les langages et les outiles de développement
1. Les langages de programmation
a) PHP :

PHP: Hypertext Preprocessor, plus connu

sous son sigle PHP(acronyme récursif), est
un langage de programmation
principalement utilisé pour produire des
pages Web dynamiques via un serveur
HTTP, mais pouvant également fonctionner
comme n'importe quel langage interprété de
façon locale. PHP est un langage impératif
orienté objet. PHP a permis de créer un
grand nombre de sites web célèbres, comme
Facebook, Wikipédia, etc. Il est considéré
comme la base de la création des sites
Internet dits dynamiques

b) HTML:

L’HypertextMarkupLanguage, généralement
abrégé HTML, est le format de données conçu
pour représenter les pages web. C’est un langage
de balisage permettant d’écrire de l’hypertexte,
d’où son nom. HTML permet également de
structurer sémantiquement et de mettre en forme le
contenu des pages, d’inclure des ressources
multimédias dont des images, des formulaires de
saisie, et des programmes informatiques. Il est
souvent utilisé conjointement avec des langages de
programmation (PHP, JavaScript…) et des
formats de présentation (feuilles de style en cascade).

42
c) CSS :

Cascading Style Sheets, forment un Les feuilles

de style en cascade, généralement appelées CSS
de langage informatique qui décrit la
présentation des documents HTML et XML Les
standards définissant CSS sont publiés par le
World Wide Web Consortium (W3C). Introduit
au milieu des années 1990, CSS Devient
couramment utilisé dans la conception des sites
web et bien pris en charge par les navigateurs
web dans les années 2000.

d) JavaScript:

JavaScript est un langage de script orienté

objet principalement utilisé dans les pages
HTML. À l’opposé des langages serveur (qui
s’exécutent sur le site), JavaScript est
exécuté sur l’ordinateur de l’internaute par le
navigateur lui même. Ainsi, ce langage
permet une interaction avec l’utilisateur en
fonction de ses actions (lors du passage de la
souris au dessus d’un élément, du
redimensionnement de la page…).

43
2. Outils de Développement :

a) WampServer

Wampserver est un ensemble de

logiciels permettant de mettre en place
facilement un serveur Web local, un
serveur FTP et un serveur de
messagerie électronique. Il s'agit d'une
distribution de logiciels libres (X
(cross) Apache MariaDB Perl PHP)
offrant une bonne souplesse
d'utilisation, réputée pour son
installation simple et rapide .

b) MySQL

MySQL est un système de gestion de bases

de données relationnelles (SGBDR). Il est
distribué sous une double licence GPL et
propriétaire Il fait partie des logiciels de
gestion de base de données les plus utilisés
au monde, autant par le grand public
(applications web principalement) que par
des professionnels, en concurrence avec
Oracle, Informix et Microsoft SQL Server.

44
c) BootStrap

Bootstrap est un Framework destiné aux applications

web. C'est un outil à considérer lors du
développement rapide d'applications web.
L'utilisation combinée du HTML, du CSS, et du
JavaScript propose Bootstrap dépasse les Framework
CSS classiques et propose carrément des éléments
graphiques complets avec une garantie maximale de
compatibilité entre les divers navigateurs.

d) jQuery
JQuery est une bibliothèque JavaScript open-source et
cross-browser qui permet de traverser et manipuler très
facilement l’arbre DOM de vous pages JQuery est une
bibliothèque JavaScript open-source et cross-browser
qui permet de traverser et manipuler très facilement
l’arbre DOM de vous pages.

e) Visual Studio Code

Visual Studio Code, un éditeur de code léger, a été

utilisé pour écrire et éditer efficacement le code
source, offrant des fonctionnalités de débogage et
de gestion de projet.

f) StarUML

StarUML est un logiciel de modélisation UML, qui

a été "cédé comme open source" par son éditeur, à
la fin de son exploitation commerciale (qui
visiblement continue ...), sous une licence modifiée
de GNU GPL

45
II. Interfaces de l’application réalisée
1. Côté client
Le côté client d'un site Web de commerce électronique est l'interface visuelle et
interactive avec laquelle les utilisateurs interagissent lorsqu'ils visitent la plateforme
en ligne pour effectuer des achats. Voici une description générale des principaux
aspects du côté client de mon site e-commerce :

a) Page d’Authentification
La page de connexion présente un formulaire permettant aux utilisateurs
enregistrés d'accéder à leur compte en saisissant leurs informations d'identification.
Les champs usuels, tels que le nom d'utilisateur ou l'adresse e-mail et le mot de passe,
sont inclus pour garantir une connexion sécurisée. De plus, un lien vers la page de
réinitialisation du mot de passe est proposé, offrant une solution aux utilisateurs qui
auraient oublié leurs identifiants.

En outre, pour les nouveaux utilisateurs qui n'ont pas encore de compte, un lien
d'inscription est clairement affiché à côté du formulaire de connexion. Ce lien
redirige vers la page d'inscription où les utilisateurs peuvent fournir les informations
nécessaires pour créer un nouveau compte sur la plateforme. Cela offre une solution
complète pour les utilisateurs existants et potentiels, garantissant une expérience
fluide et accessible à tous.

Figure 18: page d'inscription

46
 Figure 19:page de connexion

b)Page d’Accueil
La page d'accueil d'un site e-commerce est la première interface que rencontrent
les visiteurs lorsqu'ils accèdent au site. Elle est conçue pour attirer l'attention des
utilisateurs, leur fournir des informations pertinentes sur les produits et services
proposés, et les inciter à explorer davantage le site. Elle se compose de plusieurs
éléments, dont nous discuterons ci-dessous :

47
 Figure 20: Page d'accueil

➢ En-tête (Header) :

L'en-tête contient le logo de la marque ou du site, le menu de navigation

principal avec des liens vers les différentes catégories de produits ou sections du
site, et des liens vers des pages importantes telles que la page de connexion, le
panier d'achat et la page de compte utilisateur. Il peut également inclure des
éléments interactifs tels qu'un champ de recherche pour permettre aux utilisateurs
de trouver rapidement des produits spécifiques. La barre de recherche constitue
un outil essentiel pour une navigation fluide, permettant aux utilisateurs de saisir
des mots-clés et de trouver rapidement les produits qu'ils recherchent sans avoir
à parcourir l'ensemble du site.

Figure 21:Header section

48
➢ Section Héro (Hero) :
La section héro est souvent placée en haut de la page d'accueil et est conçue
pour capturer l'attention des visiteurs dès leur arrivée sur le site. Elle peut
comporter un grand visuel attrayant mettant en valeur les produits phares, des
promotions spéciales, ou simplement une image reflétant l'identité de la marque.
Un appel à l'action (CTA) clair peut être intégré pour encourager les utilisateurs
à explorer davantage le site ou à effectuer un achat.

Figure 22:Hero section

➢ Produits en Vedette (Featured Products) :

Cette section présente une sélection de produits populaires, en promotion, ou

nouvellement ajoutés au catalogue. Chaque produit est généralement accompagné
d'une image, d'un titre, d'une brève description et du prix. Les utilisateurs peuvent
cliquer sur les produits pour accéder à leur page détaillée et en savoir plus avant de
faire un achat, ou cliquer sur "Ajouter au panier" pour ajouter le produit au panier
directement depuis la page d'accueil.

49
 Figure 23 : Products section

➢ Newsletter :

La section newsletter permet aux utilisateurs de s'abonner à la newsletter du

site pour recevoir des mises à jour sur les nouveaux produits, les promotions, les
événements à venir, etc. Un formulaire simple avec des champs pour saisir
l'adresse e-mail et éventuellement d'autres informations peut être inclus, ainsi
qu'un bouton d'inscription.

Figure 24: Newsletter section

50
➢ Pied de page (Footer) :

Le pied de page contient des liens vers des informations importantes telles que
les conditions d'utilisation, la politique de confidentialité, les coordonnées de
contact, les questions fréquemment posées (FAQ), etc. Il peut également comporter
des liens vers les pages de réseaux sociaux de la marque, des badges de paiement
sécurisé, et d'autres éléments visant à renforcer la confiance des utilisateurs dans
le site.

Figure 25: Footer

c) Page produit unique

➢ La page des détails du produit

La page de détail du produit offre aux utilisateurs une vue approfondie et
détaillée d'un produit particulier disponible sur le site. Il fournit des informations
complètes sur le produit, telles que le nom, la description, les caractéristiques, le
prix et les options de couleur ou de taille. En plus des détails de base, cette page
comprend des images haute résolution du produit sous différents angles pour
permettre aux utilisateurs de mieux voir le produit.

De plus, la page de détails du produit contient des sections supplémentaires

telles que les avis et évaluations des clients.

Pour faciliter votre achat, la page de détail du produit comprend également un

bouton Ajouter au panier ou Acheter maintenant, permettant aux utilisateurs
d'ajouter facilement le produit à leur panier et de procéder au paiement.

51
 Figure 26: Détails du produit\

➢ Les commentaires

La section de commentaires permet aux utilisateurs de partager leurs opinions,

expériences et critiques sur le produit. Elle offre un espace interactif où les clients
peuvent interagir avec le contenu du site et fournir des retours qui peuvent être
utiles à d'autres utilisateurs potentiels.

Figure 27:Commentaire Section

52
d)Blogs
La page des blogs sur un site web de commerce électronique est une
ressource précieuse qui offre aux visiteurs bien plus que des produits à acheter.
C'est un espace dynamique où les utilisateurs peuvent découvrir des informations
utiles, des conseils, des astuces et des guides pertinents liés aux produits et
services proposés par la marque. Cette page présente une variété d'articles
engageants couvrant un large éventail de sujets, tels que des tutoriels sur
l'utilisation des produits, des avis d'experts, des tendances de l'industrie, des
conseils d'entretien, des idées de cadeaux, des actualités sur les produits et bien
plus encore.

Figure 28: Page des blogs

53
e) A propos ( About )
La page "À propos" d'un site web de commerce électronique joue un rôle crucial
dans la création de liens significatifs entre la marque et ses clients. Cette page fournit
une plateforme pour présenter l'identité, la mission, l'histoire et les valeurs de
l'entreprise, permettant aux visiteurs de mieux comprendre qui se cache derrière les
produits et services proposés.

Elle offre également l'occasion de mettre en avant les compétences et l'expertise

de l'équipe, ainsi que les efforts déployés pour garantir la qualité des produits, le
respect de l'éthique et de la durabilité, et l'engagement envers la satisfaction client.

Figure 29: la page "À propos"

f) Panier (Cart)
Lorsque l'utilisateur clique sur l'icône du panier dans l'en-tête du site, un
panier latéral s'affiche sur le côté droit de l'écran. Ce panier latéral offre une vue
rapide des articles que l'utilisateur a ajoutés au panier, leur permettant ainsi de
consulter rapidement le contenu de leur panier sans quitter la page principale de
navigation.
Dans ce panier latéral, les utilisateurs peuvent visualiser un récapitulatif des articles
sélectionnés, comprenant des informations telles que la quantité de chaque article,
le prix unitaire et le montant total. Cette présentation concise permet aux
utilisateurs de vérifier rapidement leur sélection et de prendre des décisions quant
aux produits à acheter.

54
De plus, deux boutons d'action sont inclus dans le panier latéral :”View Cart” &
“Checkout”

Figure 30: Panier lateral

55
➢ Voir le panier

Voir le panier(View Cart) : Ce bouton permet aux utilisateurs d'accéder à une

page détaillée du panier, où ils peuvent examiner en détail tous les articles ajoutés,
ainsi que les options de livraison et de paiement disponibles. Cela leur donne la
possibilité de modifier leur commande ou de poursuivre leurs achats si nécessaire.

Passer à la caisse(Checkout): En cliquant sur ce bouton, les utilisateurs sont

redirigés vers le processus de paiement sécurisé, où ils peuvent saisir leurs
informations de livraison et de paiement pour finaliser leur commande. C'est
l'étape finale avant la confirmation de la commande et le traitement du paiement.

Figure 31:Panier

g) Le menu déroulant du profil

Le menu déroulant du profil est une fonctionnalité pratique et facile d'accès . Ils
fournissent généralement aux utilisateurs un accès rapide aux actions et options liées au
compte, telles que la modification du profil, l'assistance et la déconnexion.

56
 Figure 33: Le menu déroulant du profil
si l'utilisateur est connecté

Figure 32: Le menu déroulant du

profil si l'utilisateur n'est pas
connecté

h) Page de profil
La page de profil constitue un point central pour chaque utilisateur, offrant une
plateforme où ils peuvent gérer et personnaliser leurs informations personnelles,
garantissant ainsi une expérience utilisateur optimale. Structurée en trois sections
principales, cette page permet à l'utilisateur de visualiser et de mettre à jour ses
données essentielles.

57
 Figure 34:lien "modifier le profil"

i) “General” section
La première section, intitulée "Général", présente une vue d'ensemble des
détails de l'utilisateur, tels que sa photo de profil, son nom d'utilisateur, son nom
complet et son adresse e-mail. Ces informations sont cruciales pour l'identification
et la personnalisation de l'expérience utilisateur

Figure 35: General Section

58
j) Modifier le mot de passe
La deuxième section, "Modifier le mot de passe", offre à l'utilisateur la possibilité
de renforcer la sécurité de son compte en changeant son mot de passe. À travers
cette fonctionnalité, l'utilisateur peut saisir un nouveau mot de passe et le
confirmer, garantissant ainsi la confidentialité et la sécurité de ses données.

Figure 36: Modifier le mot de passe

k) Informations de livraison
Enfin, la troisième section, "Informations de livraison", permet à l'utilisateur de
spécifier ses coordonnées de livraison, incluant son adresse, son numéro de
téléphone, sa ville, son état et son code postal. Ces détails sont cruciaux pour la
bonne gestion des commandes et des expéditions.

59
 Figure 37: Informations de livraison

l) Help & Support

La page d'aide et de support est une ressource essentielle pour les utilisateurs
qui ont besoin d'assistance ou de résolution de problèmes liés à un produit ou à un
service. Voici une description détaillée de ce à quoi pourrait ressembler cette page
:

Figure 38: "Support" link

60
➢ Coordonnées de contact :
Les coordonnées du support client sont clairement affichées, y compris l'adresse e-
mail, le numéro de téléphone et les heures de disponibilité du service client.

➢ Carte d'emplacement :
- Une carte interactive avec l'emplacement physique de l'entreprise ou du siège social est
intégrée à la page pour permettre aux utilisateurs de visualiser facilement
l'emplacement géographique.
- La carte est interactive, permettant aux utilisateurs de zoomer, de faire glisser et de
trouver des indications pour se rendre à l'emplacement.

Figure 39: Informations de support

61
 ➢ Formulaire de contact :

Un formulaire de contact bien visible et facile à remplir est présenté aux

utilisateurs, leur permettant de soumettre leurs questions, préoccupations ou
demandes d'assistance.
Le formulaire de contact comprend des champs pour les informations
essentielles telles que le nom, l'adresse e-mail et le message détaillé du demandeur.

Figure 40: formulaire de contact

3. Côté admin
La côte admin d'un site web d'e-commerce représente l'interface et l'ensemble des
fonctionnalités accessibles exclusivement aux administrateurs ou gestionnaires du
site.

voici une description générale des principales composantes de l'aspect administratif:

a) Sign in page
La page de connexion admin sert de passerelle pour les administrateurs afin
d'accéder au tableau de bord administrateur d'un site web d'e-commerce. Elle se
compose de champs de saisie pour entrer une adresse e-mail ou un nom d'utilisateur
ainsi qu'un mot de passe. Une fois que l'administrateur a saisi les identifiants
corrects et soumis le formulaire, il accède à l'interface backend où il peut gérer
différents aspects de la plateforme d'e-commerce, notamment les stocks, les
commandes, les utilisateurs et les paramètres du site web.

62
 Figure 41: Page de connexion administrateur

b) Dashboard page
La page dashboard pour administrateur est l'épicentre de contrôle et de gestion
de toutes les activités liées au site web d'e-commerce. Elle offre une vue d'ensemble
complète de l'état actuel de la plateforme, y compris les statistiques clés telles que les
ventes, les revenus, le nombre de commandes et les nouveaux utilisateurs. De plus,
elle présente des graphiques et des tableaux interactifs pour visualiser les tendances
et les performances. Cette page permet également à l'administrateur d'accéder
rapidement aux fonctionnalités essentielles telles que la gestion des produits, des
catégories, des commandes et des utilisateurs. Elle offre une expérience utilisateur
intuitive et personnalisable, permettant à l'administrateur de personnaliser les widgets
et les paramètres en fonction de ses préférences et de ses besoins spécifiques.

63
 Figure 42:Dashboard

c) SideBar
Dans la page d'administration, la barre latérale sert de
menu de navigation offrant un accès rapide aux différentes
sections et fonctionnalités de la plateforme de commerce
électronique. Il comprend des liens ou des icônes
représentant différentes catégories telles que le tableau de
bord, les produits, les catégories, les commandes, les
utilisateurs et les paramètres. La barre latérale reste visible
sur la gauche de l'écran, permettant aux administrateurs de
basculer facilement entre les différentes sections du panneau
d'administration sans perdre le contexte. Dans la page
d'administration, la barre latérale sert de menu de navigation
offrant un accès rapide aux différentes sections et
fonctionnalités de la plateforme de commerce électronique.
Il comprend des liens ou des icônes représentant différentes
catégories telles que le tableau de bord, les produits, les
catégories, les commandes, les utilisateurs et les paramètres.
La barre latérale reste visible sur la gauche de l'écran,
permettant aux administrateurs de basculer facilement entre
les différentes sections du panneau d'administration sans
perdre le contexte.

Figure 43:Side Bar

64
d) La gestion des categories

➢ All categories
La page "Toutes les catégories" affiche toutes les catégories que
l'administrateur a insérées dans le système. Chaque catégorie est répertoriée avec
des détails tels que son nom, sa description et éventuellement une image. Pour
chaque catégorie répertoriée, il y a des boutons "Modifier" et "Supprimer" qui
permettent à l'administrateur de mettre à jour les informations de la catégorie ou
de la supprimer du système. Cette page offre une vue d'ensemble pratique de
toutes les catégories disponibles sur le site e-commerce, avec des options
d'édition et de suppression pour une gestion efficace.

Figure 44:All categories

➢ Edit categories
La page "Modifier les catégories" permet à l'administrateur de mettre à jour
les informations d'une catégorie spécifique. Elle affiche les détails actuels de la
catégorie sélectionnée, tels que son nom, sa description et son image.
L'administrateur peut modifier ces informations en saisissant de nouvelles valeurs
dans les champs correspondants. Une fois les modifications apportées, il peut
soumettre le formulaire pour mettre à jour les informations de la catégorie dans
le système. Cette page offre une interface conviviale pour la gestion précise des
détails de chaque catégorie sur le site e-commerce.

65
 Figure 45: Edit categories

6) Add categories
La page "Ajouter des catégories" permet à l'administrateur d'ajouter de
nouvelles catégories à la liste existante sur le site e-commerce. Elle comprend les
champs suivants :

1. Nom : Champ où l'administrateur peut saisir le nom de la nouvelle catégorie.

2. Description : Champ permettant de fournir une description de la nouvelle
catégorie.
3. Visibilité : Option pour spécifier si la catégorie doit être visible ou cachée sur
le site.
4. Image : Champ permettant de télécharger ou de sélectionner une image
représentative pour la catégorie.

Une fois que l'administrateur a rempli ces informations, il peut soumettre le

formulaire pour ajouter la nouvelle catégorie à la base de données du site e-
commerce.

66
 Figure 46: Add category

e) La gestion des produits

➢ All products
La page "Tous les produits" affiche tous les produits que l'administrateur a
ajoutés au système de l'e-commerce. Chaque produit est répertorié avec des détails
tels que son nom, sa description, son prix et son stock disponible. Pour chaque
produit répertorié, il y a des boutons "Modifier" et "Supprimer" qui permettent à
l'administrateur de mettre à jour les informations du produit ou de le supprimer du
système.

Figure 47: All products

67
➢ Edit products
La page "Modifier les produits" permet à l'administrateur de mettre à jour les
informations d'un produit spécifique dans le système de l'e-commerce. Elle
présente un formulaire pré-rempli avec les détails actuels du produit, tels que son
nom, sa description, son prix, son stock disponible, etc. L'administrateur peut
modifier ces informations selon les besoins, puis soumettre le formulaire pour
enregistrer les modification.

Figure 48 : Edit product

➢ Add product
La page "Ajouter un produit" permet à l'administrateur d'insérer un nouveau
produit dans le système de l'e-commerce. Elle présente un formulaire comprenant
des champs pour saisir les détails du nouveau produit, tels que son nom, sa
description, son prix, son stock disponible, etc. L'administrateur peut télécharger
une image représentative du produit à partir de son appareil pour l'ajouter à la liste.
Une fois tous les détails saisis, l'administrateur peut soumettre le formulaire pour
enregistrer le nouveau produit dans la base de données du système.

68
 Figure 49: Add product

f) La gestion des blogs

➢ All blogs
La page "Tous les blogs" affiche tous les blogs qui ont été insérés par
l'administrateur dans le système. Chaque blog est répertorié avec son titre, son
contenu, une image, et la date à laquelle il a été ajouté. Les blogs sont affichés dans
un tableau avec des boutons "Modifier" et "Supprimer" pour chaque blog,
permettant à l'administrateur de modifier les informations du blog ou de le
supprimer du système. Cette page offre une vue d'ensemble pratique de tous les
blogs disponibles sur le site, avec des options d'édition et de suppression pour une
gestion efficace.

69
 Figure 50: All Blogs

➢ Add blogs
La page "Ajouter un blog" est l'interface où l'administrateur peut saisir les
informations pour créer un nouveau blog. Elle comprend les champs suivants :
1. Titre :C'est le champ où l'administrateur saisit le titre du blog.
2. Contenu : C'est le champ où l'administrateur saisit le contenu du blog, y
compris le texte, les images, etc.
3. Image : C'est le champ où l'administrateur peut télécharger une image pour
accompagner le blog, généralement une image illustrative ou représentative du
contenu du blog.
Une fois que l'administrateur a rempli ces informations, il peut soumettre le
formulaire pour créer et ajouter le blog au système.

70
 Figure 51: Add blogs

g) Gestion des utilisateurs

La page "Tous les utilisateurs" présente une liste complète de tous les
utilisateurs enregistrés sur le site web. Chaque utilisateur est répertorié avec des
détails tels que leur nom d'utilisateur, leur prénom, leur nom de famille, leur
adresse e-mail, leur adresse de livraison et leur numéro de téléphone. Des
fonctionnalités d'édition et de suppression sont également fournies, permettant à
l'administrateur d'effectuer des actions telles que la mise à jour des informations
des utilisateurs ou la suppression de comptes.

71
 Figure 52: All users

h) Support message
La page "Messages de support" est une interface dans le panneau
d'administration d'un site web où les administrateurs peuvent visualiser et gérer
les messages envoyés par les utilisateurs souhaitant obtenir de l'aide, signaler un
problème ou donner leur avis. Cette page affiche une liste de tous les messages
de support reçus, avec des détails tels que le nom de l'utilisateur, son adresse e-
mail, le sujet du message, le contenu du message et la date de création. Les
administrateurs ont la possibilité de répondre à chaque message en cliquant sur le
bouton "Répondre", ce qui les redirige vers une page où ils peuvent rédiger et
envoyer une réponse. De plus, les administrateurs peuvent également supprimer
des messages en cliquant sur le bouton "Supprimer" associé à chaque message
s'ils le jugent nécessaire. Cette page facilite la gestion efficace des requêtes des
utilisateurs et contribue à maintenir un bon niveau de support client.

Figure 53: Support Messages

72
i) La gestion des commandes

➢ Orders
La page "Commandes" affiche toutes les commandes passées par les clients
sur le site e-commerce. Chaque commande est répertoriée avec des informations
telles que le numéro de commande, la date de commande, le montant total et l'état
actuel de la commande. En plus de la liste des commandes, la page offre deux
fonctionnalités principales :

Figure 54: Orders page

➢ Vue détaillée des commandes (View Order)

En cliquant sur le bouton "Voir la commande" ou une action similaire, les
administrateurs peuvent accéder à une vue détaillée de chaque commande. Cette
vue détaillée comprend des informations telles que les articles commandés, les
quantités, les prix unitaires, les informations de livraison, les coordonnées du
client, etc. Les administrateurs peuvent également utiliser cette vue pour mettre à
jour le statut de la commande, tel que le passage de "En attente" à "Expédiée" une
fois que la commande est traitée.

73
 Figure 55:View order details

➢ Historique des commandes (Order History)

Cette fonctionnalité permet aux administrateurs de consulter l'historique
complet des commandes passées sur le site. L'historique des commandes offre une
vue chronologique de toutes les transactions passées, ce qui peut être utile pour la
comptabilité, le suivi des tendances de vente, et la gestion des retours ou des litiges.
Les administrateurs peuvent parcourir les pages pour afficher l'historique complet
des commandes.

Figure 56: Order history

74
 Conclusion
Dans cette version préliminaire du site d'e-commerce, nous avons couvert les
fonctionnalités fondamentales nécessaires à son fonctionnement. Cependant, il est
important de noter qu'il reste encore beaucoup à ajouter et à développer pour
améliorer l'expérience globale des utilisateurs et maximiser les performances de
l'entreprise en ligne.

Parmi les éléments à considérer pour les futures mises à jour et développements,
on peut citer l'optimisation de l'interface utilisateur pour une meilleure convivialité,
l'ajout de fonctionnalités de recherche avancée pour faciliter la navigation des
utilisateurs, l'intégration de systèmes de paiement supplémentaires pour accueillir
un plus large éventail de clients, et l'implémentation de fonctionnalités de marketing
telles que les promotions et les offres spéciales pour stimuler les ventes.

De plus, la mise en place de mesures de sécurité renforcées pour protéger les

données des utilisateurs et prévenir les fraudes en ligne est un aspect crucial qui
devrait être pris en compte lors du développement ultérieur du site.

En résumé, cette version préliminaire du site d'e-commerce offre une base solide
à partir de laquelle nous pouvons continuer à construire et à développer. En restant
à l'écoute des besoins des utilisateurs et en suivant les tendances du marché, nous
serons en mesure de mettre en œuvre les améliorations nécessaires pour faire de ce
site une destination en ligne de premier choix pour les acheteurs.

75
 Bibliographie
YouTube: https://www.youtube.com/
W3Schools: https://www.w3schools.com/
Stack Overflow: https://stackoverflow.com/
GitHub: https://github.com/
Bootstrap Documentation: https://getbootstrap.com/docs/
ChatGPT Documentation: https://beta.openai.com/docs/
PayPal Developer Documentation: https://developer.paypal.com/docs/
Freepik: https://www.freepik.com/
PHP Documentation: https://www.php.net/docs.php
PhpMyadmin Documentation: https://www.phpmyadmin.net/docs/
Mysql Documentation : https://dev.mysql.com/doc/

76