Département des mathématiques, de l’informatique et des sciences physiques

Filière : DUT Multimédia et conception Web

Mémoire du Projet de Fin d’étude

Création d’un site web E-commerce

Réalisé par :
Wejdane ELHASSANI
Date de soutenance : 22 juin 2021

Jury:
Nom et prénom Etablissement Qualité
M. ERRADI Mohamed Ecole Normale Président
Supérieure – Tétouan
Examinateur

M. AAMMOU Souhaib Ecole Normale Encadrant pédagogique

Supérieure – Tétouan
 Dédicace :
Je dédie cet ouvrage
A ma maman qui m’a encouragé durant ces années d’études.
Qu’elle trouve ici le témoignage de ma profonde reconnaissance.
A la mémoire de mon père, qui m’a toujours poussé et motivé dans mes études.
A mes frères et Ceux qui partagé avec moi tous les moments d’émotion lors de la
réalisation de ce travail. Ils m’ont chaleureusement supporté et encouragé tout au
long de mon parcours.
A ma famille, mes proches et à ceux qui me donnent de l’amour et de la vivacité.
A tous mes amis qui m’ont toujours encouragé, et à qui je souhaite plus de succès.
A tous ceux que j’aime.
Merci d’être toujours là pour moi.

Remerciements
A notre Professeur et Encadrant du projet, Professeur AAMMOU SOUHAIB

Notre gratitude s’adresse à M. AAMMOU SOUHAIB pour son encadrement, son

orientation, ses conseils et la disponibilité qu’il nous a témoignée pour nous
permettre de mener à bien ce travail. Nous tenons à remercier notre Encadrant du
projet de fin d’étude, qui nous a suivi tout a long de cette période et nous a
conseillé sur l’orientation que celui-ci devait prendre, nous avons eu le grand
plaisir de travailler sous votre direction.

A notre Professeur et chef de la filière DUT MULTIMEDIA ET CONCEPTION

WEB, Professeur ERRADI MOHAMED.

Nous exprimons nos profonds remerciements à notre Chef de filière M. ERRADI

MOHAMED pour l’aide compétente qu’il nous a apportée, pour sa patience et son
encouragement. Son œil critique nous ’a été très précieux pour structurer le travail
et pour améliorer la qualité des différentes sections.
Je veux vraiment vous remercier car j’ai eu beaucoup de chance de vous avoir
comme chef de notre filière.

Table de Matière
Introduction.................................................................................................................
- Organisation du projet...............................................................................................
 Présentation du projet ………………………………………………………...
 Description de projet.....................................................................
 Objectif général.............................................................................
 Acteurs..........................................................................................
 Fonctionnalités..............................................................................
-Planification opérationnelle........................................................................................
 Tableau des taches.............................................................................................
 Diagramme de GANTT.....................................................................................
 Diagramme de PERT........................................................................................
-Processus de développement......................................................................................
 Définition et différentes phases du processus………………………………...
- Modélisation..............................................................................................................
 UML.................................................................................................................
 Diagramme de cas d’utilisation.........................................................................
 Diagramme de séquences..................................................................................
 Création de compte.......................................................................
 Gestion des produits......................................................................
 Paiment.........................................................................................
 Processus d’achat..........................................................................
 Diagramme d’activité......................................................................................
- Organisation graphique.............................................................................................
 Charte Graphique..............................................................................................
 Logotype.......................................................................................
 Couleurs........................................................................................
 Maquettes..........................................................................................................
 Zoning...........................................................................................
 Wireframes....................................................................................
 Implémentation..................................................................................................
 Outils de développement...............................................................
 Interfaces.......................................................................................
-Conclusion..................................................................................................................
-Référence....................................................................................................................

Liste des figures

Figure 1 : Tableau des taches......................................................................................
Figure 2 : Diagramme de Gantt...................................................................................
Figure 3 : Diagramme PERT.......................................................................................
Figure 4 : Les étapes de développement des trois branches du processus 2TUP…...
Figure 5 : Diagramme de cas d’utilisation..................................................................
Figure 6 : Diagramme de séquences de création de compte........................................
Figure 7 : Diagramme de séquences de gestion des produits......................................
Figure 8 : Diagramme de séquence de paiement.........................................................
Figure 9 : Diagramme de séquence de panier consuler……………………………...

Figure 10 : Logotype utilisé pour le site......................................................................

Figure 11 : Zoning page d’accueil...............................................................................
Figure 12 : Zoning de page de produit........................................................................
Figure 13 : Zoning de profile.......................................................................................
Figure 14 : Zoning de page de blog.............................................................................
Figure 15 : Zoning de page de panier..........................................................................
Figure 16 : Page d’accueil...........................................................................................
Figure 17 : Page des Produits......................................................................................
Figure 18 : Interface-Page d’accueil............................................................................

Figure 19 : Interface-Produits......................................................................................
Figure 20 : Interface-Inscription..................................................................................
Figure 21 : Interface-Panier.........................................................................................
Figure 22 : Interface-Contactez Nous..........................................................................

Introduction
Des ventes de mains en mains, vers des ventes virtuelles, passent les priorités des
opérations de ventes des biens et des services, ce qui nous rend obligés de donner
plus d’importance à la vente électronique.
Les boutiques en ligne sont depuis des années, largement conseillés pour les
sociétés qui se basent sur la vente des produits et même des services Ces types de
sites web représentent un dispositif global fournissant aux clients un pont de
passage à l’ensemble des informations, des produits, et des services à partir d’un
portail unique en rapport avec son activité.
Les sites de vente en ligne permettent aux clients de profiter d’une foire virtuelle
disponible est quotidiennement mise à jour sans la moindre contrainte, ce qui leur
permettrai de ne jamais rater les coups de cœur, ainsi Une foire sans problèmes de
distance géographique, ni d’horaire de travail ni de disponibilité de transport.
D’une autre part ces sites offrent à la société de profiter de cette espace pour
exposer ses produits à une plus large base de clientèle.
L’objectif de mon travail c’est tout simplement la conception et la création d’une
boutique en ligne réservé à la vente des vêtements pour les femmes.
Cette boutique qu’est dédiée à la vente des vêtements pour les femmes, permet aux
clients un large choix entre plusieurs marques et prix, Ainsi que les différentes
méthodes de paiement par carte bancaire ou à la livraison.
Pour bien simplifié ce mémoire, il est donc partagé en quatre chapitres :
- L’organisation du projet : est consacré à analyser les besoin et définirent
les fonctionnalités de projet plus la planification et le processus de
développement.
- Modélisation : détaille la conception de projet et les diagrammes qui
schématisent les fonctionnalités.
- L’organisation graphique : illustre le travail travers les maquettes et
présente la charte graphique.
- L’implémentation : présente l’environnement de travail ainsi que les
outils logiciels qu’on a utilisé pour réaliser ce projet plus que les
références et les liens complets.
Et finalement la conclusion résume le contenu de projet et mentionne les
perspectives d’amélioration possible.
 Chapitre 1 : Organisation du Projet

1. Présentation du Projet
1.1 Description du Projet
Notre projet portera sur la conception et la réalisation d’un site web commercial est
réalisé dans le cadre de projet de fin d’étude pour l’obtention d’un diplôme
universitaire en Multimédia et Conception Web A l’école Normale supérieure.
Aujourd’hui, de plus en plus de vendeurs et de fournisseurs de produits et services
qui disposent d'une boutique ou d'un magasin physique s'initient avec succès. Cette
expérience dans le marché digital de la vente en ligne est pour les entreprises et les
marques une formidable opportunité de développer leur business et leur chiffre
d'affaires.
Cette boutique qu’est dédiée à la vente des vêtements pour les femmes, permet aux
clients un large choix entre plusieurs marques et prix, Ainsi que les différentes
méthodes de paiement par carte bancaire ou à la livraison.
L’application web a deux interfaces, l’une est destinée à l’administrateur pour lui
permettre la gestion des produits et aussi les commentaires. L’autre est pour les
clients.

1.2 Objectif général

- Des achats plus rapides pour les clients.
- Les entreprises peuvent facilement atteindre de nouveaux clients.
- Réduction des coûts d'exploitation.
- Interactions limitées avec les clients.
- Les pannes technologiques peuvent avoir une incidence sur la capacité de vendre.
 1.3Acteurs
Visiteur :
C’est un individu qui est entrain de naviguer sur le net, cherchant un produit. Donc
c’est un utilisateur inconnu, il n’est pas encore un client.
Client :
C'est un visiteur déjà créer un compte sur le site, il peut donc suivre le processus
d’achat des produits.
Administrateur :
Appeler aussi le webmaster. C'est celui qui chargé de mettre à jour le site et de
veiller à son amélioration. Dans ce cadre, suivant la taille du site, il est chargé de
coordonner l'action de ses différents interlocuteurs techniques : développeurs,
webdesigners ou encore graphistes. Il gère également l'hébergement du site.
 1.4Fonctionnalités
Visiteur - Visiter l’accueil.
-Crée un compte.
- Donner son avis et commenter sur
les produits.
-Ajouter des produits aux paniers.
- Commander.
- Contactez l’administration.
Client -Visiter le site.
- Donner son avis.
-Commenter sur les produits.
- Créer un compte.
-Passer une commande.
-Suivre la commande.
-Contacter administrateur.
Administrateur -Gérer le stock des produits.
-Ajouter un produit et son prix.
-Supprimer un produit.
-Modifier un produit et son prix.
- Modifier ou supprimer le compte
d’utilisateur.
-Modifier les préférences du site
(Titre, Description, Logo).
- Gérer les paiements.
- Gérer la livraison.

2. Planification opérationnelle
 2.1 Tableau des taches
Tableau des tâches est nécessaire lors de la réalisation d’un projet. La figure 1 ci-
dessous est une planification prévisionnelle illustrant les différentes phases de
réalisation du projet.

Figure 1 : Tableau des taches

 2.2 Diagramme de GANTT
Le diagramme de Gantt, couramment utilisé en gestion de projet, est l'un des outils
les plus efficaces pour représenter visuellement l'état d'avancement des différentes
activités (tâches) qui constituent un projet. La colonne de gauche du diagramme
énumère toutes les tâches à effectuer, tandis que la ligne d'en-tête représente les
unités de temps les plus adaptées au projet (jours, semaines, mois etc.). Chaque
tâche est matérialisée par une barre horizontale, dont la position et la longueur
représentent la date de début, la durée et la date de fin.

Figure 2 : Diagramme de Gantt

 2.3 Diagramme de PERT
Le diagramme PERT représente le planning des travaux par un graphe de
dépendances. Son formalisme en réseau se focalise sur l’interconnexion des tâches
à effectuer et sur le calcul des chemins critiques. Une différence importante avec le
diagramme de Gantt est l'échelle de temps conventionnelle du diagramme PERT
qui représente un enchaînement de tâches et non des durées ou un calendrier.

Figure 3 : Diagramme PERT

3. Processus de développement (2TUP) :

3.1Définition et les différentes phases de processus :
Le 2TUP propose un cycle de développement en Y, qui dissocie les aspects
techniques des aspects fonctionnels. Il commence par une étude préliminaire qui
consiste essentiellement à identifier les acteurs qui vont interagir avec le système à
construire, les messages qu'échangent les acteurs et le système, à produire le cahier
des charges et à modéliser le contexte (le système est une boîte noire, les acteurs
l'entourent et sont reliés à lui, sur l'axe qui lie un acteur au système on met les
messages que les deux s'échangent avec le sens).
Le processus s'articule ensuite autour de trois phases essentielles :

-une branche technique ;

-une branche fonctionnelle 

-une phase de réalisation.

 -La branche fonctionnelle: capitalise la connaissance du métier de
l’entreprise. Elle constitue un investissement pour le moyen et le long terme
Les fonctions du système d’information sont en effet indépendantes des
technologies utilisées.
Cette branche comporte les étapes suivantes :
 La capture des besoins fonctionnels, qui produisent un modèle des besoins
focalisé sur le métier des utilisateurs.
 L’analyse.

-La branche du milieu : consiste à fusionner les résultats des 2 branches. Cette

fusion conduit à l’obtention d’un processus en forme de Y.
Cette branche comporte les étapes suivantes :
 La conception préliminaire.
 La conception détaillée.
 Lecodage
 L’intégration.
Figure 4 : Les étapes de développement des trois branches du processus 2TUP
 Chapitre 2 : Modélisation

1. UML
UML, c’est l’acronyme anglais pour « Unified Modeling Language ». On le traduit
par « Langage de modélisation unifié ». La notation UML est un langage visuel
constitué d’un ensemble de schémas, appelés des diagrammes, qui donnent chacun
une vision différente du projet à traiter. UML nous fournit donc des diagrammes
pour représenter le logiciel à développer : son fonctionnement, sa mise en route, les
actions susceptibles d’être effectuées par le logiciel.
2. Diagramme des cas d’utilisation :
Les diagrammes de cas d'utilisation sont des diagrammes UML utilisés pour une
représentation du comportement fonctionnel d'un système logiciel. Ils sont utiles
pour des présentations auprès de la direction ou des acteurs d'un projet.

Figure 5 : Diagramme de cas d’utilisation

 3. Diagramme de séquence
3.1 Définition :
Les diagrammes de séquences sont la représentation graphique des interactions
entre les acteurs et le système selon un ordre chronologique dans la formulation
Unified Modeling Language.
En ce qui suit, Je présenterai quelques diagrammes de séquences relatifs aux cas
d’utilisations présentés.
3.2 Création de Compte

Figure 6 : Diagramme de séquence de création de compte

3.3Gestion des produits

Parmi les opérations dont l’administrateur est chargé on trouve la gestion des
produits exposés sur le site web telles que l’ajout, la modification et la suppression.
 Figure 7 : Diagramme de séquence de gestion des produit

3.4 Paiement en ligne

Après la validation de commande, le client a le choix entre deux types de
paiement, paiement par carte bancaire ou à la livraison :

Figure 7 : Diagramme de séquence de paiment

 3.4Panier consuler :

Figure 8 : Diagramme de séquence de panier consuler

4. Diagramme d’activité
Le diagramme d'activité est un diagramme comportemental d'UML, permettant de
représenter le déclenchement d'événements en fonction des états du système et de
modéliser des comportements parallélisables. Le diagramme d'activité est
également utilisé pour décrire un flux de travail.

4.1Inscription
4.2Authentification
 Chapitre 3 : Organisation Graphique

1. Charte Graphique
1.1 Logotype
Le logo utilisé pour mon site c’est comme l’horloge de 24 heures. Ce qui veut dire
toute la journée et toute la nuit 24/7, service est un service disponible à
tout moment et généralement.

Figure 9 : Logotype utilisé pour le site

1.2 Couleur
En générale, le couleur utilisée dans mon projet :

#898989 / R 54 g 54 b 54 / C O M O Y 0 K 46

2. Maquettes
2.1 Zoning
Le zoning d’un site web consiste à définir et positionner les différentes zones
fonctionnelles (les blocs) dans la page web. On va ainsi pouvoir placer le logo, la
zone de menu, le contenu principal, les colonnes et les éventuels widgets. C’est
donc la première étape permettant de définir l’organisation générale des pages
d’un projet.
Figure 10 : Login

Figure 11 : Sign up

Figure 12 : Les Produits

Figure 13 : Commander

Figure 14 : Ajouter au panier

Figure 15 : le panier

 2.2 Wireframes

Figure 16 : Page d’accueil

Figure 17 : Page des produits
 Chapitre 4 : Implémentation

1. Outils de développement
Le serveur d’hébergement
Il est nécessaire de disposer d’un espace où déposer les fichiers relatifs au
fonctionnement de WordPress. Le terme utilisé est serveur.

Pour installer WordPress il faut disposer d’un hébergeur comprenant :

 PHP en version supérieure ou égale à 4.3

 MySQL en version supérieure ou égale à 4.1.2
 Apache avec le module de réécriture d’url mod_rewrite
INSTALLER XAMPP
XAMPP, celui-ci est composé d’un serveur web (Apache) embarquant le langage
PHP mais également de MySQL que l’on peut administrer par le biais de
l’interface web.
L’intérêt se trouve donc dans la possibilité de créer des documents web (en HTML
ou PHP), généralement dans le but de les partager (par exemple sur un blog comme
celui-ci). Le langage PHP permet de créer des documents web dynamiques, par
exemple en modifiant une page en fonction d’une action du visiteur, il est très utile
également pour communiquer avec une base de données MySQL.
MySQL est un système de gestion de base de données (SGBD). Il est l’un des
logiciels SGBD les plus utilisés du monde. Avec phpMyAdmin, il est possible
d’administrer visuellement (pas en ligne de commande), par le biais de son
navigateur web, MySQL, pour créer, gérer, faire des requêtes, exporter… dans ses
bases de données. Je ferais plusieurs articles sur son utilisation.
Télécharger les fichiers d’installation de WordPress
 Sur le site « wordpress.org  » 
  Décompressez le fichier .zip téléchargé
 Ouvrez le dossier WordPress décompressé
 Sélectionnez tous les éléments du dossier et copiez-les
 Ouvrez le dossier \wamp64\www situé à la racine de votre disque principal

 Aller en phpmyadmin et créer une base de données

Créer une base de données sur le serveur
 Dans l'espace personnel fourni par l'hébergeur, aller dans le panneau de
configuration Cliquer sur Bases de données MySQL. Donner un nom à la base de
données, puis cliquer sur Créer une base de données.
 Créer un utilisateur en entrant un nom d'utilisateur et un mot de passe, et confirmer
en cliquant sur Créer un utilisateur. Associer l'utilisateur créé à la base de données,
puis cliquer sur Ajouter.
 Gérer ensuite les privilèges de l'utilisateur en cochant ou en décochant les
différentes propositions, puis cliquer sur Apporter les modifications.
Les paramètres de connexion à la Base de Données sont sauvegardés dans le
fichier  config.php  situé à la racine de l’installation de WordPress :

Paramétrage de la Base de Données dans config.php

Connexion au Tableau de bord en tapant « localhost/wordpress/wp-admin »

WORDPRESS

WordPress : est un système de gestion de contenu (SGC ou

content
management system (CMS) en anglais) gratuit, libre et open-source. Ce logiciel
écrit en PHP repose sur une base de données MySQL et est distribué par
l'entreprise américaine Automatique. Les fonctionnalités de WordPress lui
permettent de créer et gérer différents types de sites Web : site vitrine, site de vente
en ligne, site applicatif, blogue, ou encore portfolio.
ELEMENTOR

Elementor : est un constructeur de page WordPress qui se

présente sous la forme d’un plugin. Il permet de créer le design d’un site
WordPress sans coder, grâce à l’utilisation de modèles WordPress tout prêts à
ajouter en drag and drop dans votre contenu.
Tous les changements sont visibles en temps réel.
WOOCOMMERCE

WooCommerce : est une extension open source pour

WordPress permettant de créer une
boutique en ligne. Il est conçu pour les petites et grandes entreprises en ligne
utilisant WordPress. Lancé le 27 septembre 2011, le plugin est rapidement
devenu célèbre pour
sa simplicité d'installation et de personnalisation. WooCommerce et
WooCommerce Multilingual sont dans le répertoire des extensions de
WordPress.
2. Interfaces
Cette partie de ce mémoire est réservé à l'affichage des interfaces du site, je
vais présenter alors des captures d’écran des principales interfaces réalisées
dans ce site web.
 Figure 18 : Interface-Page d’accueil

La page d’accueil : c’est la page principale de mon site web, Elle est
constituée de plusieurs éléments, l’affichage de catégorie de vente avec des
images cliquables, Elles envoient le client à la page de la catégorie de vente
souhaitée, Une barre contient les différentes marques de ce site web, Des
images de produits en vente, les plus intéressant et les populaires, Et des titres
appartenant à la page de blog.
Figure 19 : Interface-Produits

La page des produits : c'est la page qui contient les différents produits de site
web, et une zone de filtrage du produit pour faciliter la recherche d’un produit.

Figure 20 : Interface-Inscription
Figure 21 : Interface- Panier

Panier : Apres l’authentification, le client a le droit de mettre en panier

n’importe quels produits avec la quantité souhaitée avec la possibilité d’ajouter
ou supprimer un produit.

Figure 22 : Interface-Contactez Nous

 Conclusion
Ce projet nous a donné une occasion favorable pour faire les premiers pas dans la
vie professionnelle en parallèle avec la formation théorique, il nous a permis de
transformer nos connaissances théoriques en une réalité pratique. Tout au long de
la préparation de mon projet de fin d’études, J’ai essayé de mettre en pratique les
connaissances acquises durant nos études universitaires et cela dans le but de
réaliser ce site web.

D’autre part ce projet permis de tester nos compétences et d’utiliser nos savoirs et
nos savoir-faire, Mais la durée reste toujours insuffisante pour pouvoir maîtriser
toutes les connaissances et pouvoir les appliquer convenablement.

Nous devons avouer que rétrospectivement nous sommes satisfaits de cette

mémoire puisque nous avons atteint l’objectif de réaliser un projet consiste à
concevoir un site web dynamique qui permet de réaliser le commerce des
vêtement.

 En effet ce projet nous a permis d’approfondir nos compétences techniques

dans le domaine de la conception et la réalisation en faisant appel aux
connaissances acquises durant ces deux ans.

 Comprendre le contexte du projet et de la problématique posée et mieux

planifier et gérer les différentes activités du travail

 développer l'autonomie et la responsabilité 

Nous espérons que ce modeste travail méritera votre admiration.

 Les Références
https://fr.wordpress.org/ site officielle de WordPress
https://woocommerce.com/ site officielle de Woocommerce
https://elementor.com/?ref=22599 Site officielle de Elementor