UNIVERSITE MOULAY ISMAIL –UMI-

BACHELOR EN GENIE INFORMATIQUE -BGI-

Projet
Intitulé :

E-Commerce

Réalisé par Encadré par :

 Akrame ARCHOUN Ali BEKRI

Ali BEKRI

Chaimaa LAMINI
Soutenu le xx devant le jury : Ali OUBELKACEM

Ali BEKRI, Professeur à la Faculté des Sciences- Meknès

,

Said BENHLIMA, Professeur à la Faculté des Sciences- Meknès

Chaimaa LAMINI, Professeur à la Faculté des Sciences- Meknès

Ali OUBELKACEM, Professeur à la Faculté des Sciences- Meknès

Année Universitaire : 2020-2021

1
 REMERCIMENTS

Tout d'abord, je tiens à remercier tout particulièrement les personnes suivantes et à

leur témoigner toute ma reconnaissance, pour leur dévouement et leur soutien pour la
concrétisation de ce projet:

 M. Ali OUBELKACEM, responsable projet, pour ses conseils éclairés, sa patience,

sa disponibilité et pour la confiance qu'il m'a accordée dès l'ébauche du projet et
tout au long de ces quatre mois.

 M. Ali BEKRI, responsable projet, pour m'avoir accordé toute la confiance

nécessaire pour élaborer ce projet librement, et avoir mis à ma disposition tous
les moyens nécessaires.

 Mme. Chaymaa LAMINI, enseignante-chercheuse, pour son investissement, sa

contribution et toute l'aide et les conseils apportés durant ce projet.

2
 LISTES DES FIGURES

Figure 1 : Diagramme de cas d'utilisation _____________________ 8

Figure 2 : Diagramme de séquence ajoutée ___________________ 10
Figure 3 : Diagramme de séquence supprimée _________________ 11
Figure 4 : Diagramme de séquence modifiée __________________ 12
Figure 5 : Diagramme des classes ___________________________ 13
Figure 6 : Architecture JEE ________________________________ 18
Figure 7 : Implémentation classe ____________________________ 20
Figure 8 : Page Login______________________________________ 21
Figure 9 : Page Accueil Admin ______________________________ 21
Figure 10 : Page de gestion des fournisseurs __________________ 22
Figure 11 : Page Accueil Client _____________________________ 22
Figure 12 : Page catégorie Mobile __________________________ 23
Figure 13 : Page Panier ___________________________________ 23

3
Tables Des Matières
I. Introduction Générale ..................................................................................................................... 5
II. Contexte général ............................................................................................................................. 6
1. Problématique : ........................................................................................................................... 6
2. Objectifs :..................................................................................................................................... 6
III. ETUDE PRELIMIAIRE .................................................................................................................... 6
1. Spécification des fonctionnalités attendues : ............................................................................... 6
2. Diagramme de GANTT ............................................................................................................... 6
IV. ANALYSE ET CONCEPTION .................................................................................................. 7
1. Identification des acteurs ............................................................................................................. 7
2. Principale fonctionnalité du système ........................................................................................... 7
3. Diagramme de cas d'utilisation.................................................................................................... 8
5. Diagramme de séquences: ......................................................................................................... 10
6. Diagramme des classes:............................................................................................................. 13
V. OUTILS DE DEVELOPPEMENT ............................................................................................... 14
VI. MISE EN OEUVRE DU PROJET ............................................................................................ 18
VII. DEMONSTRATION ................................................................................................................. 21
VIII. CONCLUSION ET PERSPECTIVES ...................................................................................... 24
IX. BIBLIOGRAPHIE .................................................................................................................... 24

4
 I. Introduction Générale
Dans le cadre de ma seconde année du cycle Génie Informatique au Bachelor de
l'Université Moulay Ismaïl, il m'est proposé un projet de 4 mois me permettant de mettre en
pratique mes connaissances théoriques au travers un cahier des charges définissant la
conception et le développement d'une application web E-Commerce.

Au début, je n’avais aucune idée sur l’architecture JEE, à l’égard madame Chaimae
Lamini qui n’a ménagé aucun effort pour la bonne réussite de ce travail.

Au début du semestre 4 j’ai reçu le cahier de charge de mon projet pour commencer la
partie de conception, afin de passer à la partie Codage qui a été vraiment difficile pour la
raison de la difficulté JEE et l’autoformation pour le maitriser.

Le présent rapport donne un descriptif complet sur le développement de ce projet, et

comment j'ai procédé pour étendre, sur le projet initial, la conception et l'analyse, la sélection
des éléments à ajouter, à modifier, à maintenir ou à abandonner, selon le nouveau cahier des
charges. J’ai également essayé de mettre en place un planning dans le but de réaliser cette
application, et pour qu'elle soit conforme aux objectifs fixées.

5
II. Contexte général
1. Problématique :
Un Site E-Commerce doit obligatoirement avoir un espace administrateur afin de
gérer l’ajout, la suppression, la modification des produits et des fournisseurs afin de les
afficher à l’utilisateur pour effectuer un achat.

2. Objectifs :
Cette application développée a pour but au client de s’inscrire à la plateforme et
chercher un produit pour effectuer une commande .Pour l’espace administrateur de facilité la
tâche au client.

III. ETUDE PRELIMIAIRE

1. Spécification des fonctionnalités attendues :
Notre application va introduire les traitements suivants :

 Inscription à la plateforme et la sauvegarde des informations à la base de données.

 L’ajout du produit au panier pour confirmer l’achat.
 Gestion des produits et des fournisseurs par l’administrateur.

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

6
IV. ANALYSE ET CONCEPTION
1. Identification des acteurs
Selon le cahier des charges, il y a trois acteurs principaux :

 L’administrateur

Gérant de l’application web et possédant un accès total de toutes les

fonctionnalités, il peut consulter, ajouter, modifier et supprimer n’importe quel
élément.

 Le Client

Possède un accès limité au niveau des fonctionnalités de l’application.

Il peut consulter les produits et ajouter au panier pour effectuer la commande.

2. Principale fonctionnalité du système

La principale fonctionnalité de ce système est la manipulation d'une base de données
des produits, fournisseurs à travers une application web. Plus précisément l’application nous
permet de créer, modifier, ou supprimer des produits, des fournisseurs, des utilisateurs.

7
3. Diagramme de cas d'utilisation

Figure 1 : Diagramme de cas d'utilisation

8
 4. Description textuelle de quelques cas d'utilisation:
Nom : Ajouter Un Produit

Acteur(s) : Administrateur

Description : L’ajout d’un produit doit être possible pour un utilisateur de type administrateur.

Auteur : AKRAME ARCHOUN

Préconditions : L’utilisateur doit être authentifié en tant qu’administrateur.

Scénario nominal :

1) Le système demande le Login

2) L’utilisateur doit s’authentifier avec une adresse email dont le rôle est admin

3) L’utilisateur sélectionne Ajouter Produit

4) L’utilisateur saisie les coordonnées du produit

5) Valider pour effectuer l’ajout

Scénario alternatifs :

6) Le système demande des détails corrects à l'utilisateur

Le scénario alternatif prend fin et le système revient à l'étape 4 du scénario nominal

9
5. Diagramme de séquences:

Figure 2 : Diagramme de séquence ajoutée

10
Figure 3 : Diagramme de séquence supprimée

11
Figure 4 : Diagramme de séquence modifiée

12
6. Diagramme des classes:

Figure 5 : Diagramme des classes

13
V. OUTILS DE DEVELOPPEMENT

 Java EE, Java Entreprise Edition ou rebaptisé Jakarta EE, est un Framework à
la fois riche (basé sur la bibliothèque Java SE et possède de nombreuses API),
ouvert (la communauté Java Community Process) et dédié au développement,
au déploiement et à l'exécution d'application Internet modernes (nécessaires
aux entreprises). Il s'agit d'une plate-forme fortement orienté serveur pour le
développement et l'exécution d'application distribuées, cela dit bien sûre avec
le langage de programmation Java.

 Eclipse IDE est un environnement de développement intégré libre (le terme

Eclipse désigne également le projet correspondant, lancé par IBM) extensible,
universel et polyvalent, permettant potentiellement de créer des projets de
développement mettant en œuvre n'importe quel langage de programmation .

 MySQL, le plus populaire des serveurs de bases de données SQL Open Source, est
développé, distribué et supporté par MySQL AB. MySQL AB est une société
commerciale, fondée par les développeurs de MySQL, qui développent leur activité en
fournissant des services autour de MySQL.

14
 Apache Tomcat est un
conteneur libre de
Servlet Java EE. Issu du
projet Jakarta, Tomcat
est désormais un projet principal de la fondation Apache. Tomcat implémente les
spécifications des Servlets et des JSP de Sun Microsystems. Il inclut des outils pour la
configuration et la gestion, mais peut également être configuré en éditant des fichiers
de configuration XML. Comme Tomcat inclut un serveur HTTP interne, il est aussi
considéré comme un serveur HTTP (web).

15
 HTML est un langage de description de document utilisé sur Internet pour faire des pages
Web. Son sigle signifie« HyperText Markup Language » en anglais, littéralement « langage de
marquage hypertexte ». Le balisage HTML est incorporé dans le texte du document et est
interprété par un navigateur Web.

 Les feuilles de style en cascade CSS (Cascading Style Sheets) est un langage informatique qui
sert à décrire la présentation des documents HTML, XHTML et XML. Les standards
définissant CSS sont publiés par le W3C (World Wide Web Consortium).

16
 Javascript, créé à l'origine par Netscape, ce langage de programmation est conçu pour traiter
localement des événements provoqués par le lecteur (par exemple, lorsque le lecteur fait
glisser la souris sur une zone de texte, cette dernière change de couleur). C'est un langage
interprété, c'est-à-dire que le texte contenant le programme est analysé au fur et à mesure par
l'interprète, partie intégrante du browser, qui va exécuter les instructions. Ce langage a fait
l'objet d'une normalisation sous le nom de ECMAScript.

 Enterprise Architect: L'UML s'est imposé comme le standard en matière de langage de

modélisation des systèmes informatiques. De l'expression des besoins au déploiement en
passant par la conception, utiliser ou tout simplement comprendre UML est un incontournable
de tout acteur du SI. Le logiciel Enterprise Architect de Sparx System permet de réaliser tous
les diagrammes UML 2. Bien plus qu'un simple modeleur UML, il permet de mettre en œuvre
toutes les phases et disciplines d'un projet.

17
VI. MISE EN OEUVRE DU PROJET

Architecture logicielle du système

L'architecture logicielle permet de structurer l'application concernée en couches pour
clarifier la communication (flux de données) entres la base de données et l'application, puis traiter,
manipuler et présenter l'information par des allers-retours entre le client et l'application.

En principe, une application Web se compose des couches suivantes :

1. La couche DAO.

2. La couche Métier.

3. La couche Web.

Figure 6 : Architecture JEE

18
La principale caractéristique de cette architecture est la séparation des
préoccupations (données, service et présentation) grâce à la séparation stricte
des couches applicatives. En effet, on peut observer les trois couches de
l’application :

 Couche DAO : permet les accès à la base de données.

 Couche métier : contient l’ensemble du code service, elle organise les
accès à la couche DAO et ses aspects transactionnelles.
 Couche Présentation : cette couche est la couche d’entrée dans
l’application du point de vue d’utilisateur. Elle appelle les traitements
de la couche service en fonction des actions effectuées par l’utilisateur
et récupère les données retournées.

19
Voici un exemple d'une implémentation d'une classe dans le projet :

Figure 7 : Implémentation classe

20
VII. DEMONSTRATION
Page de Login

Figure 8 : Page Login

Page Accueil Admin :

Figure 9 : Page Accueil Admin

21
 Page de gestion des Fournisseurs

Figure 10 : Page de gestion des fournisseurs

Page Accueil Client

Figure 11 : Page Accueil Client

22
Page catégorie Mobile :

Figure 12 : Page catégorie Mobile

Page panier :

Figure 13 : Page Panier

23
VIII. CONCLUSION ET PERSPECTIVES

Je dois commencer par affirmer que durant ce travail j’étais très fasciné et
absorbé par ce projet. Et je peux déclarer sans équivoque avoir déployé un effort
colossal durant sa phase d’implémentation.
Presque toutes les spécifications et fonctionnalités mentionnées dans le cahier de
charge ont été réalisées.
Les qualités exigés et attendues de toute application qui se respecte, à savoir la
convivialité (facilité d’utilisation) et l’ergonomie de l’interface (beauté) ont été bien
satisfaites.
Comme tout projet de taille moyenne ou grande, ce projet reste ouvert à toute
amélioration ou extension à d’autres fonctionnalités dans le future.

IX. BIBLIOGRAPHIE

http://www.stackoverflow.com
https://openclassrooms.com/fr/

24