UNIVERSITE IBN ZOHR

FACULTE POLYDISCIPLINAIRE OUARZAZAT

DEPARTEMENT D’INFORMATIQUE

Projet de Fin d’Etudes

Licence Sciences Mathématique et Informatique

Conception et Réalisation d’un site web

d’e-Commerce

Réalisé par : Encadrée par :

Ayoub Ait Baha Mr. Salahddine Krit

M’hamed Ait Hssaine

Soutenu le 02/05/2023 devant le jury composé de :

1
 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, soutiens 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.

À tous nos enseignants :

Pour leur bienveillance et pour leur contribution à notre solide formation.

À nos familles et nos amis :

Pour leur affection et leur soutien

2
 Remerciements

En préambule à ce mémoire on remercie Dieu qui nous a aidés et

nous a donné la patience et le courage durant ces longues années

d’étude.

Aussi nos remerciements au corps professoral et administratif de la

faculté polydisciplinaire Ouarzazate qui déploient de grands efforts pour

nous assurer une très bonne formation.

Nous remercions sincèrement Mr SALAHDDINE KRIT notre

encadreur Universitaire, qui se sont toujours montrés disponibles tout

au long de la réalisation de ce mémoire, ainsi pour l’inspiration, l’aide et

le temps qu’ils ont bien voulu nous consacrer, et sans eux, ce mémoire

n’aurait jamais vu le jour.

3
 Sommaire

• Dédicace …………………………………………………………… 2
• Remerciements…………………………………………………… 3
• Sommaire………………………………………………..………… 4
• Introduction général………………………………………..……... 6

Chapitre I : Contexte général du projet et étude de l’existence……….........7

I. Cahier de charge…………………………………….……………….7
I.1 Présentation de fédération……………………………………………7
I.2 Présentation de problématique……………………………………..7
I.3 Solution……………………………………………………………..7
I.4 Back office ((espace admin)) …………………………………….8
Chapitre II : Analyse et conception…………………….………………......9
I. Les diagrammes des cas d’utilisation……………………………………….9
1.1 Définition………………………………………………………………..9
1.2 Diagrammes de cas d’utilisation de notre site……………………………10
II. Diagrammes de séquences………………………………………………….11
2.1 Définition…………………………………………………….……11
2.2 Diagrammes de séquences de notre site……………………………12
III. Diagrammes de classes……………………………………………………13
3.1 Définition……………………………………………………..13
3.2 Définition Diagrammes de classes notre site……………………..13
Chapitre III : Réalisation de l’application ………………….…………………14
I. Outils de développement…………………………..………....14
1.1 WordPress…………………………………………………………14
1.2 StarUml ………………………………………………14
1.3 HTML……………………………………………………………14
1.4 CSS……………………………………………………………….15
1.5 MYSQL…………………………………………………………15
1.6 JavaScript……………………………………………………….15
1.7 NodeJS…………………………………………………………..15
1.8 TypeScripte……………………………………………………..15
II. Présentation de site………….………...……………………………….16
2.1 L’en-tête du site…………….………………………………………………
2.2 La page d’accueil………………………………………………………….
2.3 Fenêtre de promotion ………………………………………………… ……

4
 2.4 Fenêtres de chat ……………………………………………………………..
2.5 qui sommes nous ……………………………………………...….……… .
2.6 Authentification…………………………………………………………….
2.7 Achat………………………………………………………………………....
III. Présentation de l’espace administrateur…………………………….
3.1 Authentification…………………………………………………………….
3.2 Espace administrateur………………………………………………………
3.3 Gestion des produits………………………………………………………..
3.4 Gestion des commandes……………………………………….…….……..
3.5 Code de promotion …………………………………………………...........

 Conclusion

5
 Introduction générale
Le projet de fin d’étude, comme son nom l’indique, s’effectue à la fin de son cursus de
formation.
Il sert à confirme ses acquis théoriques, tous en ouvrant des portes sur l’emploi.
Il vous permet d’acquérir une petite expérience professionnelle, qui peut vous distinguer des
autres candidats sortant de votre promotion.
Durant les deux mois avril et mai. Tous les étudiants de licence sont appelés à effectuer un
stage, dont l’objectif est de découvrir le milieu professionnel tous en profitant des expériences
du personnel de l’établissement en essayant d’appliquer les connaissances théoriques déjà
acquises.
Aujourd’hui, le commerce électronique est considéré comme un dossier prioritaire par de
nombreuses organisations internationales.
L’objectif de notre projet est le développement d’un site web d’e-commerce pour la
Fédération Interprofessionnelle Marocaine de la Rose à Parfum (FIMAROSE) consiste à
développer une présence en ligne pour l'organisation. Le site web permettra de présenter les
activités et les services de la fédération, ainsi que de partager des informations sur l'industrie
de la rose à parfum au Maroc.

Le rapport est composé de trois chapitres : le premier présente le cahier des charges, le
deuxième décrit l'analyse et la conception de notre site web, et le troisième chapitre présente

6
les outils utilisés pour la réalisation du projet, ainsi que des captures d'écran du site avec des
descriptions détaillées

Chapitre 1

Contexte général du projet et

Étude de l’existant

1. Cahier de charge

1.1 Présentation de fédération

Le projet consiste en la conception et la réalisation d'un site web e-Commerce pour la

Fédération Interprofessionnelle Marocaine de la Rose à Parfum (FIMAROSE).
Ce site permettra aux clients de l'entreprise d'acheter des produits en ligne de manière
simple et sécurisée. Le site devra être fonctionnel et intuitif pour garantir une expérience
utilisateur agréable et faciliter les ventes.

1.2 Présentation de la problématique

Actuellement, la fédération dispose d'un magasin physique mais ne dispose pas d'une
plateforme en ligne.
Cette absence de présence en ligne limite les ventes de la fédération et ne permet pas de
toucher une audience plus large.
La création d'un site web e-commerce permettra à la fédération de combler cette lacune et
de booster ses ventes.

1.3 Solution

La solution proposée consiste à concevoir et réaliser un site web e-commerce adapté aux
besoins de l'entreprise.
Le site comprendra notamment les fonctionnalités suivantes :
- Un catalogue en ligne de tous les produits vendus par l'entreprise
- Une interface utilisateur intuitive pour permettre une navigation facile et agréable
- Un panier d'achat pour permettre aux clients de sélectionner et d'acheter des produits

7
 - Un système de paiement en ligne sécurisé pour garantir des transactions sûres
- Un espace client pour permettre aux clients de suivre leurs commandes et leurs
historiques d'achats
La solution sera réalisée en utilisant les technologies les plus récentes pour garantir la
sécurité et la fiabilité du site.

1.4 BackOffice ((Espace admin))

Le projet nécessite la mise en place d'un back office ou espace administrateur, qui
permettra à la fédération de gérer efficacement son site web e-commerce.
L'espace admin offrira des fonctionnalités telles que :
- La gestion des produits (ajout, suppression, modification de produits)
- La gestion des commandes et des livraisons
- La génération de rapports pour suivre les ventes et les performances du site
- La gestion des clients
L'espace admin sera accessible aux administrateurs du site et sera sécurisé par des mesures
de sécurité telles qu'un système de connexion sécurisé et des mots de passe robustes.

8
 Chapitre 2

Analyse et conception

1. Les diagrammes des cas d’utilisation

1.1 Définition

Les rôles des diagrammes de cas d’utilisation sont de recueillir, d’analyser et d’organiser
les besoins, ainsi que de recenser les grandes fonctionnalités d’un système. Il s’agit donc de la
première étape UML pour la conception d’un système. Le diagramme de cas se compose de
trois éléments principaux :

Un Acteur : c’est l’idéalisation d’un rôle joué par une personne externe, un processus ou
une chose qui interagit avec un système. Il se représente par un petit bonhomme avec son nom
inscrit dessous.

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 fin, pour l’acteur qui l’initie.

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. Les relations indiquent
que le cas d'utilisation source présente les mêmes conditions d'exécution que le cas issu. Une
relation simple entre un acteur et une utilisation est un trait simple.

9
 1.2 Diagrammes de cas d’utilisation de notre site web

Le Client : cet acteur peut 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 1 : Diagramme de cas d’utilisation

10
 2. Diagrammes de séquences

2.1 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és sur le model MVC :

Figure 2 : présentation du modèle MVC

11
 2.2 Diagrammes de séquences de notre site web

Le Client :

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

- Les internaute 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

12
3 Le diagramme de classe

3.1 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

3.2 Diagramme de classe de notre site

Figure 4 : Diagramme de classes

13
 Chapitre 3

Réalisation de site

1. Les outils de développement

1.1 Wordpress

WordPress est un système de gestion de contenu gratuit (SGC

ou content management system (CMS) en anglais) et open-
source. Ce logiciel libre écrit en PHP repose sur une base de données MySQL et est distribué
par l'entreprise américaine Automattic.

1.2 StarUml

StarUml est un est un outil de génie logiciel dédié à la modélisation UML et

édité par la société coréenne MKLabs.  Il est multiplateforme et fonctionne sous
Windows, Linux et MacOS.
La dernière version gère l'ensemble des diagrammes définis par UML 2, ainsi que plusieurs
diagrammes SysML, le organigrammes, les diagrammes de flux de données, et
les diagrammes entité-association.

1.3 HTML :

L’HypertextMarkupLanguage, généralement abrégé HTML, est le format de

données conçu pour représenter les pages web.
HTML 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)

14
 1.4 CSS

l'anglais: 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.

1.5 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.

1.6 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…)

1.7 NodeJs

Node.js est une plateforme logicielle libre en JavaScript, orientée vers les

applications réseau évènementielles hautement concurrentes qui doivent
pouvoir monter en charge.
Parmi les modules natifs de Node.js, on retrouve http qui permet le développement de
serveur HTTP. Ce qui autorise, lors du déploiement de sites internet et d'applications web
développés avec Node.js, de ne pas installer et utiliser des serveurs webs tels que Nginx ou
Apache.
Concrètement, Node.js est un environnement bas niveau permettant l'exécution de JavaScript
côté serveur.

1.8 TypeScripte

TypeScript est un langage de programmation libre et open source développé

par Microsoft qui a pour but d'améliorer et de sécuriser la production de
code JavaScript. Il s'agit d'un sur-ensemble syntaxique strict de JavaScript (c'est-à-dire que
tout code JavaScript correct peut être utilisé avec Type Script).

15
2. Présentation de site

16