Projet de Fin d’Année
3éme année Réseau & Informa0que
Concep'on et Réalisa'on d’un site web
E-commerce
Réalisé par : Encadrée par :
Reda Naciri Mr Rabhi Ahmed
Adam El Amrani
Juries:
Mr. Rabhi Ahmed
Mme. BENABDELOUAHAB IKRAM
Mme. AZROUMAHLI CHAIMAE
Soutenu le 22/06/2023 devant le jury
Dédicace
Au nom du Dieu clément et miséricordieux
Nous dédions cet humble travail à :
Nos chers parents,
Pour qui nous devons ce que nous sommes aujourd’hui. Grâce à vos prières, sou@ens et
sacrifices tout au long de notre cursus.
Que dieu, le tout puissant vous préserve et vous procure une santé et une longue vie.
À nos chers frères et sœurs,
Aucune dédicace ne serait suffisante pour vous exprimer ce que nous ressentons envers
vous. Nous vous dirons juste merci pour vos conseils et vos encouragements, et que nous
vous souhaitons une vie pleine de succès et de prospérité.
À tous nos enseignants,
Pour leur bienveillance et pour leur contribu@on à notre solide forma@on.
À nos familles et nos amis,
Pour leur affec@on et leur sou@en.
Page 2 of 30
Remerciements
En préambule à ce mémoire on remercie Dieu qui nous a aidés et nous a donné la pa@ence
et le courage durant ces longues années d’étude.
Aussi nos remerciements au corps professoral et administra@f de l’EMSI qui déploient de
grands efforts pour nous assurer une très bonne forma@on.
Nous remercions sincèrement Mr Rabhi Ahmed notre encadrant Universitaire, qui s’est
toujours montrés disponibles tout au long de la réalisa@on de ce mémoire, ainsi pour
l’inspira@on, l’aide et le temps qu’il a bien voulu nous consacrer, et sans son aide ce
mémoire n’aurait jamais vu le jour.
Page 3 of 30
Table Des Ma'ères
• Dédicace………………………………………………………………………………………........2
• Remerciements………………………………………………………….………………….......3
• Table des ma7ères..………………………………………………………………………….…4
• Introduc7on générale………………………………………………………………………....6
Chapitre I : Contexte général du projet et étude de l’existant …………….........7
I. Cahier de charge…………………………….………….………………….…………………..8
1.1 Présenta7on de l’entreprise.......................................................8
1.2 Organisa7on de l’agence………………………………………………………...9
1.3 Présenta7on de probléma7que ………………………….……….………...9
1.4 Objec7fs du projet ………………..……………..……………………….……..10
1.5 Back office << espace admin>> ………………………..…………….…….10
Chapitre II : Analyse et concep7on…………………….……………………………...........11
I. Les diagrammes des cas d’u7lisa7on ………………………..………….……….…12
1.1 Défini7on …………………………………............……….…….……………….12
1.2 Diagrammes de cas d’u7lisa7on de notre site …….……………….12
II. Diagrammes de séquences…………………..………...…….………….…………….15
2.1 Défini7on………………………………..…………………………….…………...15
2.2 Diagrammes de séquences de notre site ……………….......……..16
III. Diagramme de classes ……………….………………………………….…..…………..21
3.1 Défini7on……………………………………………………………….……………21
3.2 Diagrammes de classes de notre site ………………...….……………21
Chapitre III : Réalisa7on de l’applica7on ……………………………….……….…………22
I. Ou7ls de développement……………………………..………………………………....23
II. Présenta7on de site……………..……………………………….…………………………25
• Conclusion Générale……….……………………………………………………………..30
Page 4 of 30
Introduc7on Général
Notre projet de fin d'année consiste à la créa<on d'un site web e-commerce. Nous avons effectué
une étude de marché approfondie afin d'iden<fier les tendances actuelles et les besoins des
consommateurs. CeGe analyse nous a permis de choisir un créneau spécifique pour notre site
web.
En termes de développement, nous avons mis l'accent sur la convivialité et la sécurité des
transac<ons. Nous avons u<lisé des technologies web modernes pour concevoir une structure
claire et responsive, offrant une expérience u<lisateur op<male sur tous les appareils.
Pour faciliter la ges<on des produits, nous avons intégré un système qui permet aux vendeurs de
télécharger facilement des informa<ons détaillées, y compris des images, des descrip<ons et des
prix. Nous avons également mis en place un panier d'achat sécurisé, offrant aux u<lisateurs la
possibilité de sélec<onner des produits, de passer des commandes et de procéder au paiement
en toute confiance.
La sécurité étant un aspect crucial du commerce électronique, nous avons pris des mesures pour
protéger les données personnelles des u<lisateurs et sécuriser les paiements. Nous avons u<lisé
des protocoles de cryptage avancés et des cer<ficats SSL pour garan<r la confiden<alité des
informa<ons sensibles.
En outre, nous avons ajouté des fonc<onnalités avancées telles que les produits les plus consultés
et les ventes mensuelles les plus vendues pour se connecter aux dernières tendances du marché,
une carte indiquant l'emplacement du magasin et une page de contact pour obtenir les avis des
clients, etc.
Ce projet de fin d'année a été une expérience enrichissante, nous permeGant d'acquérir des
compétences pra<ques en ma<ère de développement web et de nous familiariser avec les défis
spécifiques du commerce électronique. J'espère que notre site web fournira une plateforme
aGrayante et fonc<onnelle pour les u<lisateurs et les vendeurs, en favorisant une expérience
d'achat agréable et sécurisée.
Page 5 of 30
Chapitre 1
Contexte Général du projet et l’Étude de
l’existant
Page 6 of 30
1. Cahier de charges
1.1. Présenta6on de site
GAMEIT est un site spécialisé dans le domaine de vente de
matériel informa6que et de jeux vidéo :
1. Objec<fs du site web :
- Créer une plateforme en ligne aGrayante et conviviale pour les u<lisateurs.
- PermeGre aux clients de rechercher, sélec<onner et acheter des produits
informa<ques et de jeux vidéo.
- Fournir des informa<ons détaillées sur les produits, y compris des descrip<ons, des
images et des spécifica<ons techniques.
- Offrir un processus de commande et de paiement sécurisé.
- Proposer des fonc<onnalités de ges<on des comptes u<lisateur.
2. Design et interface u<lisateur :
- Concevoir un design moderne, aGrac<f et adapté à l'univers du gaming.
- Assurer une naviga<on intui<ve avec une structure claire et des catégories de produits
bien définies.
- Rendre le site responsif pour garan<r une expérience u<lisateur op<male sur tous les
appareils.
3. Catalogue de produits :
- Développer un système de ges<on des produits permeGant d'ajouter, de modifier et
de supprimer facilement les ar<cles du catalogue.
- Inclure des filtres de recherche avancés pour aider les clients à trouver rapidement les
produits qu'ils recherchent.
- Afficher des informa<ons complètes sur chaque produit, telles que les
caractéris<ques, les prix, les disponibilités et les évalua<ons des u<lisateurs.
4. Panier d'achat et processus de commande :
- MeGre en place un panier d'achat qui permet aux u<lisateurs d'ajouter des produits,
de modifier les quan<tés et de procéder facilement au paiement.
- Intégrer des op<ons de paiement sécurisées, telles que les cartes de crédit, les
portefeuilles électroniques et les paiements en ligne.
5. Ges<on des comptes u<lisateurs :
- PermeGre aux clients de créer des comptes personnels, de gérer leurs informa<ons
personnelles et de consulter leur historique d'achats.
Page 7 of 30
1.2. Organisa6on de l’agence
Figure 1 : [Link] de l’accueil
1.3. Présenta6on de la probléma6que
Comment créer un site web e-commerce performant et a4rayant pour la
vente de matériel informa9que de gaming et de jeux vidéo, tout en
garan9ssant une expérience u9lisateur op9male et des transac9ons
sécurisées ?
Page 8 of 30
1.4. Objec6fs du projet
Les objec9fs d'un site web e-commerce spécialisé dans la vente de jeux
vidéo et de matériel d’informa9que sont de proposer une sélec9on
complète de produits de gaming, de créer une expérience u9lisateur
immersive avec une naviga9on intui9ve, d'offrir des informa9ons détaillées
sur les produits et des avis, d'assurer des transac9ons de paiement
sécurisées, de favoriser un sen9ment de communauté parmi les joueurs et
de fournir un excellent service client. En se concentrant sur ces objec9fs, le
site vise à répondre aux besoins uniques de la communauté gaming, à
encourager l'engagement des clients, à établir la confiance et à s9muler les
ventes, afin de se posi9onner solidement sur le marché du gaming.
1.5. Back Office
Le backoffice regroupe un ensemble de tâches administra9ves, ce dernier
doit également perme4re une ges9on quo9dienne des ac9vités e-
commerce (Suivi des commandes, mise à jour des catalogues produits) sans
avoir besoin de l’interven9on de l’agence.
Parmi les taches de ges9on backoffice nous pouvons citer :
- L’ajout des produits
- La modifica9on des produits
- La suppression des produits
- La ges9on du stock
- La ges9on des u9lisateurs
Page 9 of 30
Chapitre 2
Analyse et Concep8on
Page 10 of 30
1. Les diagrammes des cas d’uKlisaKon
1.1. Défini6on
Un diagramme de cas d'u/lisa/on est un ou/l de modélisa/on qui représente les interac/ons
entre les acteurs (u/lisateurs ou systèmes externes) et un système donné. Il est u/lisé pour
décrire les différentes fonc/onnalités et les ac/ons que le système peut effectuer en réponse aux
interac/ons des acteurs.
Le diagramme de cas d'u/lisa/on se compose de plusieurs éléments clés :
1. Acteur : Représente un u/lisateur ou un système externe qui interagit avec le système étudié.
Il peut être un individu, un groupe d'u/lisateurs ou même un autre système informa/que.
2. Cas d'u/lisa/on : Il représente une fonc/onnalité ou une ac/on spécifique que le système doit
réaliser en réponse à une interac/on avec un acteur. Chaque cas d'u/lisa/on décrit une séquence
d'ac/ons effectuées par le système pour aLeindre un objec/f précis.
3. Rela/on d'associa/on : CeLe rela/on établit le lien entre les acteurs et les cas d'u/lisa/on. Elle
indique quels acteurs interagis avec un cas d'u/lisa/on.
4. Inclusion et extension : Ces rela/ons permeLent de décrire des rela/ons de dépendance entre
les cas d'u/lisa/on. L'inclusion représente une rela/on de sous-fonc/onnalité, où un cas
d'u/lisa/on principal inclut un autre cas d'u/lisa/on pour accomplir une tâche spécifique.
L'extension permet de décrire des comportements alterna/fs ou faculta/fs qui peuvent se
produire lors de l'exécu/on d'un cas d'u/lisa/on principal.
5. Système : Il représente le système étudié, qui offre les fonc/onnalités décrites par les cas
d'u/lisa/on.
En résumé, un diagramme de cas d'u/lisa/on est un ou/l de modélisa/on qui permet de
représenter visuellement les interac/ons entre les acteurs et les fonc/onnalités d'un système. Il
aide à comprendre et à spécifier les besoins et les comportements aLendus du système, en
meLant l'accent sur les ac/ons effectuées par les u/lisateurs et les réponses du système.
Page 11 of 30
1.2. Diagramme de cas d’u6lisa6on de notre site web
Figure 2 : Diagramme de cas d’[Link] visiteur
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.
Page 12 of 30
Le Client : cet 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
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 paiements et la gestion des livraisons.
Figure 4 : Diagramme de cas d’[Link] Administrateur
Page 13 of 30
2. Les Diagrammes de séquence
2.1. Défini6on
Un diagramme de séquence est un type de diagramme u<lisé en ingénierie logicielle pour
représenter la séquence des interac<ons entre les objets d'un système. Il montre
comment les objets communiquent entre eux en meGant en évidence l'ordre
chronologique des messages échangés. Les diagrammes de séquence sont u<lisés pour
concevoir, documenter et communiquer les comportements d'un système logiciel ou
d'un processus mé<er.
Figure 5 : Pré[Link] du modèle MVC
Page 14 of 30
2.2. Diagramme de séquence de notre site web
Le visiteur :
Figure 6 : Diagramme de Séquence d’authen.fi[Link] 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.
Page 15 of 30
Le client :
Figure 7 : Diagramme de Séquence d’authen.fi[Link] 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
Page 16 of 30
Page 17 of 30
Figure 8 : Diagramme de Séquence d’un achat de 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
Page 18 of 30
L’administrateur :
Figure 9 : 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
Page 19 of 30
3. Le diagramme de classe
3.1. Défini6on
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
3.2. Diagramme de classe de notre site
Figure 10 : Diagramme de classes
Page 20 of 30
Chapitre 3
Réalisa8on de L’applica8on
Page 21 of 30
1. Les Outilles de développement
WampServer est un ensemble de logiciels conçu pour Windows qui facilite
la mise en place d'un serveur web local. Il inclut Apache, MySQL et PHP, offrant ainsi un
environnement pratique pour le développement web et les tests. Avec une interface facile
à utiliser, WampServer simplifie la configuration et la gestion de votre serveur local.
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).
L’anglais : Cascading Style Sheets, forment un des 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.
Page 22 of 30
, 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
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.
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…)
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
Page 23 of 30
2. Présentation du Site
Dans ce qui suit, des captures d’écran présentant le site web sous le nom de domaine :
[Link]
Figure 11: Page d’accueil
Page 24 of 30
Figure 12: Page des Produits
Figure 13: Page de Panier
Page 25 of 30
Figure 14 : Page d’à propos de nous
Figure 15: Page de Contact
Page 26 of 30
Figure 16: Profile d’utilisateur
Figure 17: Dashboard
Page 27 of 30
Figure 18: Page des Produits
Figure 19: Profile des utilisateurs
Page 28 of 30
Figure 19 : Page Histoire des Ventes
Page 29 of 30
Conclusion Générale
En conclusion, le projet de créa9on d'un site web e-commerce pour la vente de
matériel électronique de gaming et de jeux vidéo présente de nombreux défis et
enjeux. Pour assurer son succès, il est essen9el de concevoir une interface
conviviale et a4rayante, offrant une expérience u9lisateur op9male. La sécurité des
transac9ons et la protec9on des données personnelles des clients sont des aspects
cruciaux qui doivent être intégrés dès le départ. Fournir des informa9ons détaillées
sur les produits, faciliter le processus d'achat avec un panier d'achat sécurisé et
offrir des fonc9onnalités avancées telles que les filtres de recherche contribuent à
améliorer la sa9sfac9on des clients. Le suivi et l'analyse des performances du site
web perme4ent de prendre des mesures correc9ves et d'op9miser
con9nuellement l'expérience u9lisateur. En me4ant en œuvre ces éléments clés, le
site web e-commerce pourra offrir une plateforme a4rayante, sécurisée et
fonc9onnelle pour les amateurs de gaming et de jeux vidéo, favorisant ainsi une
expérience d'achat agréable et réussie.
Page 30 of 30