République tunisienne

Ministre de l’Enseignement Supérieur et de la Recherche Scientifique

Université de Tunis el Manar

Faculté des Sciences Economiques et de Gestion de Tunis

Rapport de Projet de Fin d’Études

Présenté en vue de l’obtention du

Diplôme National de Licence Fondamentale enInformatique de Gestion

Spécialité :Informatique appliqué à la gestion

Réalisé par :

Chawki Bougarras

Développement d'un site web e-commerce pour la

commercialisation des matériels informatique

Encadrante professionnel :Mme.Challakhi Souad

Encadrant académique : M.Hafedh Harrathi

Réalisé au sein de Société Online

Année Universitaire 2020 - 2021

 DÉDICACES

A mon père,
Aucune dédicace ne saurait exprimer l’amour, l’estime, le dévouement et le respect
que j’ai toujours eu pour vous.

Rien au monde ne vaut les efforts fournis jour et nuit pour mon éducation et mon
bien être. Ce travail est le fruit de tes sacrifices que tu as consentis pour mon
éducation et ma formation.

Tes conseils ont toujours guidé mes pas vers la réussite.

Ta patience sans fin, ta compréhension et ton encouragement sont pour moi le

soutien indispensable que tu as toujours su m’apporter.

que Dieu le tout puissant te préserve, t’accorde santé, bonheur, qui étude de l’esprit
et te protège de tout mal.

A ma mère,
Affable, honorable, aimable : Tu représentes pour moi le symbole de la bonté par
excellence, la source de tendresse et l’exemple du dévouement qui n’a pas cessé de
m’encourager et de prier pour moi.

Tu n’as cessé de me soutenir et de m’encourager durant toutes les années de mes

études, tu as toujours été présente à mes côtés pour me consoler quand il fallait.

Ta prière et ta bénédiction m’ont été d’un grand secours pour mener à bien mes
études.

Je te dédie ce travail en témoignage de mon profond amour.

«Je vous remercie pour tout le soutien et l’amour que vous me

portez depuis mon enfance»

REMERCIEMENTS
Je tiens à remercier toutes les personnes qui ont contribué au succès de mon
stage et qui m'ont aidé lors de la rédaction de ce rapport.

 Tout d'abord, il est de mon devoir d’exprimer ma profonde et sincère

gratitude envers Monsieur Hafedh Harrathi, Maître assistant à la Faculté des
Sciences Economiques et de Gestion de Tunis, pour son encadrement
académique ainsi que pour ses conseils précieux lors de la réalisation de ce
rapport et aussi le développement de cette application.

 Je tiens à remercier vivement ma maitre de stage, Madame Challakhi

Souad ,pour l’accueil, le temps passé ensemble et le partage de s’expertise
au quotidien. Grâce aussi à sa confiance j'ai pu m'accomplir totalement dans
mes missions. Elle fut d'une aide précieuse dans les moments les plus
délicats.

Tables des Matières

INTRODUCTION GÉNÉRALE.........................................................................................................1
CHAPITRE I : CADRE GÉNÉRAL.....................................................................................................2
Introduction.................................................................................................................................2
I. L’organisme d’accueil..........................................................................................................2
II. Définition de l’e-commerce.................................................................................................2
III. Avantage et inconvénient du e-commerce......................................................................3
III.1 Les avantages...............................................................................................................3
III.2 Les inconvénients..........................................................................................................3
IV. Cadre du projet................................................................................................................4
V. Présentation du sujet...........................................................................................................4
V.1 Présentation.................................................................................................................4
V.2 L’objectif.......................................................................................................................4
VI. Plan de travail..................................................................................................................5
Conclusion...................................................................................................................................5
CHAPITRE II : ETUDE DE L’EXISTANT ET SPÉCIFICATION DES BESOINS.......................................6
Introduction :...............................................................................................................................6
I. Etude de l’existant et solution.............................................................................................6
I.1 Description de l’existant...............................................................................................6
I.2 Critique de l’existant.....................................................................................................6
I.3 Solution proposée.........................................................................................................6
II. Etude des besoins................................................................................................................7
II.1 Besoins fonctionnels.....................................................................................................8
II.2 Besoins non fonctionnels..............................................................................................9
Conclusion.................................................................................................................................10
CHAPITRE III : CONCEPTION ET PILOTAGE DU PROJET.............................................................11
Introduction...............................................................................................................................11
I. Conception Générale.........................................................................................................11
I.1 Méthodologie de conception......................................................................................11
I.2 Concept et architecture :............................................................................................12
I.3 Méthodologie adoptée :.............................................................................................13
II. Pilotage du projet..............................................................................................................14
 II.1 Équipe et rôle :............................................................................................................14
II.2 Backlog du produit.....................................................................................................15
II.3 Conception détaillé.....................................................................................................16
II.3.1 Diagramme de cas d’utilisation général.........................................................16
II.3.2 Diagramme de classe général.........................................................................17
II.4 Planification des Sprints.............................................................................................18
III. Réalisation du Sprint 1...................................................................................................19
III.1 Introduction................................................................................................................19
III.2 Conception..................................................................................................................20
III.3 Développement..........................................................................................................22
III.3.1 Interfaces du sprint..........................................................................................22
...........................................................................................................................................23
Conclusion.............................................................................................................................26
IV. Réalisation du Sprint 2...................................................................................................27
IV.1 Introduction................................................................................................................27
IV.2 Conception..................................................................................................................28
IV.3 Développement..........................................................................................................42
IV.3.1 Interfaces du sprint..........................................................................................42
Conclusion.............................................................................................................................51
V. Réalisation du Sprint 3.......................................................................................................52
V.1 Introduction................................................................................................................52
V.2 Conception..................................................................................................................53
V.3 Développement..........................................................................................................55
V.3.1 Interfaces du sprint..........................................................................................55
Conclusion.............................................................................................................................56
Conclusion.................................................................................................................................56
CHAPITRE IV : REALISATION......................................................................................................57
I. Environnement de travail..................................................................................................57
I.1 Environnement Hard :................................................................................................57
I.2 Atelier de Génie Logiciel :...........................................................................................57
Conclusion.................................................................................................................................59
CONCLUSION GÉNÉRAL.............................................................................................................60
WEBOGRAPHIE..........................................................................................................................61
Tables des Figures

Figure 1:logo de la Société Online..........................................................................................................2

Figure 2: L'architecture REST..........................................................................................................12
Figure 3:Les étapes du cycle de vie Scrum...................................................................................14
Figure 4:Diagramme du cas d'utilisation général..........................................................................16
Figure 5:le diagramme de classe général......................................................................................17
Figure 6:Planification des Sprints....................................................................................................18
Figure 7:Diagramme d’Activité «S’authentifier»............................................................................20
Figure 8:Diagramme d’Activité «Inscription».................................................................................21
Figure 9:l’interface graphique «Authentification Admin»..............................................................22
Figure 10:l’interface graphique «Inscription Client»......................................................................23
Figure 11:l’interface graphique «Authentification Client».............................................................24
Figure 12:l’interface graphique «Console Admin»........................................................................25
Figure 13:l’interface graphique «Console Client».........................................................................26
Figure 14:diagramme cas d’utilisation «Gérer les paramétrages des Clients».........................28
Figure 15:diagramme de séquence «Modifier un Client»............................................................29
Figure 16:diagramme de séquence «Désactivé un Client existant»..........................................30
Figure 17:diagramme de cas d’utilisation «Gérer les Catégories».............................................31
Figure 18:diagramme de séquence «Ajouter une Catégorie».....................................................32
Figure 19:diagramme de séquence «Modifier une Catégorie»...................................................33
Figure 20:diagramme de séquence «Supprimer une Catégorie»...............................................34
Figure 21:diagramme du cas d’utilisation «Gérer les Produits»..................................................35
Figure 22:diagramme de séquence «Ajouter un Produit»............................................................36
Figure 23:diagramme de séquence «Modifier un Produit»..........................................................37
Figure 24:diagramme de séquence «Supprimer un Produit»......................................................38
Figure 25:diagramme du cas d’utilisation «Gérer les Paniers»...................................................39
Figure 26:diagramme de séquence «Consulter Panier»..............................................................40
Figure 27:diagramme de séquence «Modifier Panier».................................................................41
Figure 28:l’interface graphique «Modifier Client»..........................................................................42
Figure 29:l’interface graphique «Désactivé un Client».................................................................43
Figure 30:l’interface graphique «Ajouter Catégorie»....................................................................44
Figure 31:l’interface graphique «Modifier Catégorie»...................................................................45
Figure 32:l’interface graphique «Supprimer Catégorie»...............................................................46
Figure 33:l’interface graphique «Ajouter Produit».........................................................................47
Figure 34:l’interface graphique «Modifier Produit».......................................................................48
Figure 35:l’interface graphique «Supprimer Produit»...................................................................49
Figure 36:l’interface graphique «Consulter Panier»......................................................................50
Figure 37:l’interface graphique «Modifier Panier»........................................................................51
Figure 38:diagramme de séquence «Passation Commande»....................................................53
Figure 39:diagramme de séquence «Suivi Commande».............................................................54
Figure 40:l’interface graphique «Passation Commande»............................................................55
Figure 41:l’interface graphique «Suivi Commande».....................................................................56
Figure 42:logo Java EE.....................................................................................................................57
Figure 43:logo StarUml.....................................................................................................................58
Figure 44:logo Spring Tool Suite.....................................................................................................58
Figure 45:logo IntelliJ IDEA..............................................................................................................58
Figure 46:logo Angular......................................................................................................................58
Figure 47:logo Spring Framework...................................................................................................58
Figure 48:logo Bootstrap..................................................................................................................59
Figure 49:logo phpMyAdmin............................................................................................................59
Liste des Tableaux

Tableau 1: Backlog du produit....................................................................................15

Tableau 2: illustre le backlog détaillé de ce premier sprint.........................................19
Tableau 3:Backlog détaillé du deuxième sprint..........................................................27
Tableau 4: illustre le backlog détaillé de ce troisième sprint.......................................52
 INTRODUCTION GÉNÉRALE

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 à jours 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, aussi
permet au client de se protéger de virus corona vue la situation sanitaire dans le
monde actuellement.

Notre projet est réalisé dans le cadre du mémoire de licence fondamentale en

informatique de gestion ayant comme objectif principal : La conception et
développement d’un Site Web de e-commerce pour la commercialisation des
téléphones portables et des matériels informatique pour la boutique Media Info.

6
0
 CHAPITRE I : CADRE GÉNÉRAL

Introduction
Dans ce chapitre, je commence par l’organisme d’accueil, le commerce
électronique, ensuite le cadre du projet, la présentation de sujet et le plan de
travail.

I. L’organisme d’accueil
Online est une boite de développement informatique spécialisée en conception,
réalisation et commercialisation des applications web et mobiles et des sites
web.
La société Online, située à Djerba, a été fondée en 2018. Online est une
société de conseil en organisation et en ingénierie des systèmes d'information
qui a pour mission de bâtir des solutions Internet de qualité, en offrant des

conseils, des technologies et des services adéquats .

Figure 1:logo de la Société Online

II. Définition de l’e-commerce

Le e-commerce ou le commerce électronique, un sous ensemble de l’e-business,
est l’achat, la vente et l’échange de biens et de services sur les réseaux
informatiques (comme internet) par le biais duquel les opérations ou les
conditions de vente sont exercées par voie électroniques.E-commerce peuvent
être répartis en quatre catégories principales : B2B, B2C, C2B et C2C.
6
0
III. Avantage et inconvénient du e-commerce
III.1 Les avantages
Dans un premier temps, nous allons donc analyser les avantages que le
e-commerce procure à l’entreprise ainsi qu’à
ses clients.
 Pour les entreprises
- Il ouvre un nouveau canal de distribution, un circuit complémentaire pour
certain produit et services de l’entreprise.
- Il facilite les transactions en évitant à l’acheteur de se déplacer (donc de
lui faire gagner du temps) tout en lui offrant un service identique et
confortable.
- Il donne la possibilité de réduire les prix publics des produits en éliminant
la marge laissée habituellement aux intermédiaires, comme certains couts
de structure.
- L’enregistrement des données via internet est quasiment automatique et
demande peu d’effort.
 Pour les clients
- Le e-commerce est un extraordinaire outil de présélection ;
- La recherche du meilleur prix ;
- Un marché aux puces à l’échelle mondiale ;
- Un gain de temps ;
- Une offre actualisée (on trouve les derniers modèles).

III.2 Les inconvénients

 Pour l’entreprise
- L’incertitude et le manque de confiance autour de la sécurisation des
moyens de paiement, malgré le fait que dorénavant les méthodes de
cryptage de données assurent une confidentialité quasi parfaite lors de la
transaction.
- La résistance des intermédiaires (grossistes, distributeurs) qui craignent
une destruction d’emplois assortie d’une perte de chiffre d’affaires.
 Pour les clients
- L’insécurité des paiements et la peur de tomber sur un cybermarchand
malhonnête qui ne livre pas.
- Le manque de relations humaines et le sentiment d’isolement devant sa
machine (cas des internautes peu expérimentés).
- Le manque de contact avec le produit.
- Les couts de téléphone.
- Les détails et tarifs de livraison.
- Les difficultés de recours en cas d’ennuis.
6
0
 IV. Cadre du projet
Durant la deuxième semestre de l’année 3éme LFIG au sein de la faculté
descience économique et de gestion de Tunis, nous sommes appelés à
passer un stage de quatre mois dont le fruit est ce mémoire.
Notre projet est réalisé au sein de la Société Online, portera sur la conception
et la réalisation d’un site web commercial pour la vente des matériels
informatique et des téléphones portables pour la boutique Media Info.

V. Présentation du sujet
V.1 Présentation
L'objectif de ce mémoire est concevoir et développer un site Web commercial
pourla commercialisation des matérielsinformatique en ligne tel que les
ordinateurs, les imprimantes,téléphones et des autres matériels liés au
domaine informatique,qui doit permettre l’inscriptiondes visiteurs pour devenir
desclients, le choix des produits, la passation des commandes.
V.2 L’objectif
Ce site permettra de réaliser les opérations suivantes :
- suivi les commandes,
- Mettre en place des promotions,
- Gérer les produits (ajouter, modifier ou supprimer des produits),
- Gérer les catégories (ajouter, modifier ou supprimer des catégories),
En effet, ce site donne aux internautes la possibilité de s’inscrire, effectuer
leurs demandes en ligne, En plus, les internautes peuvent consulter en ligne
le catalogue et toutes ses nouveautés.

6
0
VI. Plan de travail
Pour un bon travail il nous faut un rapport bien structuré qui peut être exploité
après la mise en place de ce site, pour cela nous allons organiser notre présent
rapport de la manière suivante :

Dans le premier chapitre «Cadre général», nous allons présenter l’organisme

d’accueil, ainsi commerce électronique et ses types, ses avantages et ses
inconvénients pour mieux comprendre le cadre général du sujet.Nous allons
mettre notre projet dans son cadre général en présentant le sujet.

Dans le deuxième chapitre intitulé «Etude de l’existant et spécification des

besoins» nous allons en premier lieu, étudier les Procédures de vente utilisées
actuellement en relevant les inconvénients. En deuxième lieu, nous précisons les
principales solutions offertes par notre projet en tenant compte de ses besoins
fonctionnels et non fonctionnels.

Dans le troisième chapitre «Conception et pilotage du projet» nous abordons la

phase de conception. Nous spécifions d’abord la méthode de conception
adaptée, l’architecture et la méthodologie de développement après, le pilotage
de notre projetet nous présentons les différents diagrammes de notre site web.

Enfin et au niveau du quatrième et dernier chapitre intitulé «Réalisation», nous

allons présenter notre site web, en mentionnant les différents environnements de
travail matériels et logiciels utilisés pour entamer le projet.

Conclusion
Dans ce premier chapitre nous avons mis le sujet dans son cadre général.
Nous allons commencer un deuxième chapitre intitulé «Etude de l’existant
et spécification des besoins».
6
0
 CHAPITRE II : ETUDE DE L’EXISTANT ET
SPÉCIFICATION DES BESOINS

Introduction :
Dans ce deuxième chapitre, nous aborderons l’étude de la manière de vente
actuelle, suivie d’une critique pour pouvoir concentrer sur les problèmes à
résoudre pendant la réalisation de notre projet.

Ainsi, ce chapitre présente un ensemble des besoins fonctionnels et autres non

fonctionnels.

I. Etude de l’existant et solution

I.1 Description de l’existant
Comme toutes les sociétés commerciales, Media Info possède sa manière de
présenter et de commercialiser ses produits :
L’exposition des produits par des affiches publicitaires, des dépliants, les
spots publicitaires dans les radios et aussi par des vitrines qui se trouvent au
sein de la boutique.
Pour acheter un équipement de communication telle qu’un téléphone portable
ou un ordinateur portable ou des accessoires, le client doit se déplacer
directement au local de la société afin de chercher une offre de vente qui
satisfait ses besoins.

I.2 Critique de l’existant

-Depuis sa mise en place La procédure existante atteint ces objectifs avec une
fréquence limité et non extensible voir qu’elle ne concerne qu’un nombre limité
des clients qui sont très proches de la boutique pour pouvoir visiter les vitrines
voir les produits exposés et savoir la disponibilité de ces derniers ainsi que
leurs prix et leurs caractéristiques techniques.
-L'abondance des documents dans la boutique qui peut ralentir les services.
-Risque de mélanger les documents; ce qui peut être fatal.
-Des heures d’ouvertures limitées.
I.3 Solution proposée
Afin de pallier aux défaillances, nous proposons d’informatiser la
commercialisation de nos produits par la création d’une boutique virtuelle sur
Internet.
Il nous est indispensable de préciser à cette étape que notre projet de fin
d’étude prendra en considération toutes ces contraintes en essayant de
présenter les solutions nécessaires tout en respectant les règles des jeux d’un
6
0
 site web tels que la simplicité de navigation entre les pages, la bonne
ergonomie et la sécurité des données confidentielles des clients.

Ce projet consiste donc à la mise en place d’un site Web commercial qui gère
la commercialisation des matériels informatique,
Ce site devra contenir trois interfaces séparées :
 Partie Administrateur
Cette partie permettra le stockage des documents et leur publication sur
internet. Ce mécanisme est accompli par l’administrateur du site qui doit
s’authentifier avec son login et son mot de passe. Après son authentification
comme administrateur, il pourra accéder à la page qui lui permettra de gérer
les outils d’administration. Le site affichera toutes les tâches qui peuvent être
effectuées par l’administrateur qui pourra :
-Gestion des catégories : Ajouter, modifier, supprimer.
-Gestion des Produits : il a le droit d’ajouter, modifier, supprimer
un produit.
-suivi des commandes.
 Partie FrontOffice
-La page d’accueil: c’est la page principale du site.
-Page détail produit + panier+ inscription ou connexion.
 Partie Client
Cette interface doit être accessible à n’importe quel internaute cherchant des
produits et effectuant des commandes.
On trouve :
- Page information client : modification informations.
- Page de liste des commandes réalisées.

II. Etude des besoins

Dans cette section du chapitre, nous nous intéressons aux besoins des
utilisateurs traités dans notre projet c’est à dire l’inscription du client, le choix des
produits, le lancement des commandes enfin la confirmation à travers les
spécifications fonctionnelles et non fonctionnelles pour aboutir à un site de
qualité qui répond aux besoins des clients.
6
0
II.1 Besoins fonctionnels
Les besoins fonctionnels se présentent comme suit :
- Exposition des produits ainsi que leurs prix et caractéristiques.
- Inscription des clients.
- Gestion de profil client.
- Ajout des produits choisis au panier.
- Confirmation de la commande.
- la confirmation de l’opération d’achat.
- le mode de livraison.
- la réception de la facture en PDF.
- paiement à la livraison.

a)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 .

b) 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 passer d’autres commandes.

c)Ajout produit au panier

Le client choisi un produit et lui ajouter à son panier ou il va le trouvé avec
un prix unitaire et un choix de quantité.

d) Mode de livraison
La commande qui va être confirmée par le client, elle va être livrée à
domicile.

e)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.

f) La Confirmation de l’opération d’achat

La confirmation dans notre site consiste l’Intervention humanitaire,
l’administrateur fait contacter le client et assure la confirmation de
l’opération d’achat.
6
0
 g) La réception du facture
Notre site permet au administrateur de récupérer une facture en
format PDF contienne les détails d’achat pour l’imprimer et l’envoyer
au client.
h) Le paiement à la livraison
Le paiement est assuré par le client lors de la livraison de son
produit et la réception de sa facture.
i) Gestion profile client
Notre site permet au client de gérer un profil contenant ses
informations nécessaire telque nom, prénom, téléphone, date de
naissance et adresse.

II.2 Besoins non fonctionnels

Les besoins non fonctionnels sont importants car ils agissent de façon
indirecte sur le résultat et sur le rendement de l’utilisateur, ce qui fait
qu’ils ne doivent pas être négligés, pour cela il faut répondre aux
exigences suivantes :

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 bonne 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.
6
0
Conclusion
Dans ce chapitre on a présenté une étude du système existant, les lacunes qu’il
comprend ainsi que les solutions que nous proposons pour pallier ces
problèmes, nous avons aussi cité les besoins fonctionnels et non fonctionnels qui
sont indispensables pour mieux faciliter le travail à réaliser.

Dans le chapitre suivant nous allons aborder l’étude conceptuelle de notre site,
tout en mentionnant tous les scénarios possibles, les acteurs, les diagrammes.

6
0
 CHAPITRE III :CONCEPTION ET PILOTAGE
DU PROJET

Introduction
Dans notre projet, la conception représente une phase primordiale et
déterminante pour produire une application de haute qualité. C’est dans ce stade
que nous devons clarifier en premier lieu la vue globale, en décrivant la
méthodologie de conception, l’architecture générale et la méthodologie que nous
allons suivre dans la partie réalisation de notre projet. Puis, dans un deuxième
lieu nous allons traiter le découpage du projet et détailler notre choix conceptuel
à travers plusieurs types de diagrammes.

I. Conception Générale
I.1 Méthodologie de conception
UML est un langage qui s’appuie sur un méta modèle, un modèle de
plus haut niveau qui définit les éléments d’UML (les concepts
utilisables) et leur sémantique (leur signification et leur mode
d’utilisation).
UML offre différents modèles pour spécifier et concevoir un logiciel. Ces
modèles utilisent une représentation graphique sous forme de
diagrammes représentant des vues différentes du système (diagramme
de cas d’utilisation, diagramme de classes, diagramme de séquence,
diagramme de déploiement, diagramme d’activités,…).
Dans notre travail, nous nous intéressons à l’élaboration des
diagrammes suivants :

 Diagrammes de cas d’utilisation.

 Diagrammes de classes.
 Diagrammes de séquences.
 Diagrammes d’activité.
6
0
I.2 Concept et architecture :
Architecture REST:
REST (Representational State Transfer) ou RESTful est un style
d’architecture permettant de construire des applications (Web, Intranet,
Web Service).  Lorsque le protocole HTTP est utilisé par l’architecture
REST les méthodes HTTP disponibles sont GET, HEAD, POST, PUT,
PATCH, DELETE, CONNECT, OPTIONS et TRACE.
Une API REST(également appelée API RESTful) est une interface de
programmation d'application (API ou API web) qui respecte les
contraintes du style d'architecture REST et permet d'interagir avec les
services web RESTful.
Notre application se compose de deux parties :
*Partie Back-End: développer avec Spring boot; s’occupe des
traitements effectué coté serveur.
*Partie Front-End:développer avec Angular; s’occupe de la
présentation des IHM (interface homme-machine : permet à l’utilisateur
de communiquer avec une machine, un programme informatique ou un
système).
L’ensemble des traitements coté serveur constituent la partie Back-end
de l’application et ils sont exposés à travers des web services pour que
la partie frontale puisse utiliser les fonctionnalités qu’ils offrent.
On a choisi d’implémenter les web services en utilisant l’approche
REST et un protocole de communication léger HTTP (HyperText
Transfer Protocol) entre les deux parties de l’application : Front-end et
Back-end, pour l’échange des données.

6
0
 Figure 2:L'architecture REST

Avantages:
Les avantages de REST sont les suivants :

*Facile a mettre en œuvre;

*Il suffit d'un navigateur pour accéder à un service;
*Mise en cache des ressources, donc accélération des opérations;
*la séparation du client et du serveur, qui aide à manipuler plus
facilement les applications ;
*le fait d’être stateless, ce qui rend les requêtes API très spécifiques et
orientées vers le détail ;

I.3 Méthodologie adoptée :

Pour améliorer nos chances de réussite, nous devons choisir une méthode
de développement itérative et incrémentale «les méthodes Agiles».
Cette méthode permet un gain considérable de temps et donc d’argent,
l’amélioration de la qualité des développements et donc la satisfaction des
utilisateurs et une meilleure réactivité lors d’une demande de modification.
Aujourd’hui, il y a plusieurs méthodes agiles.

Les méthodes Agiles les plus populaires en usage aujourd'hui sont:

 l'extrême Programming (XP)
 Scrum
 Feature Driven Development (FDD)
 Lean Software Development
6
0
  Agile Unified Process (Agile UP ou AUP)
 Crystal
 Dynamic Systems Development Method (DSDM)

- Méthodologie agile : Scrum

Notre choix est focalisé sur la méthode Scrum qui favorise une grande
importance aux réunions quotidiennes. Grâce à cette méthodologie, nous
pouvons réduire le travail inutile en nous concentrant exclusivement sur ce
que le client demande et en assurant la transparence de notre processus.

Figure 3:Les étapes du cycle de vie Scrum

II. Pilotage du projet

Dans notre projet, On a choisi le pilotage du projet avec
la méthodologie Scrum.
Le cadre Scrum consiste en une équipe avec des rôles bien définis, un
cérémonial favorisant la collaboration et quelques artefacts.

II.1 Équipe et rôle :

L’équipe a un rôle capital dans Scrum : elle est constituée dans le but
d’optimiser la valeur produite ; pour cela, elle doit avoir toutes les
compétences nécessaires au développement du produit.
6
0
 Elle est investie avec le pouvoir et l’autorité pour faire ce qu’elle a à faire.

— Product Owner (le propriétaire du produit) : c’est le responsable du

Produit, il représente les clients et les utilisateurs en transcrivant leurs
Besoins.

— Scrum Master (le directeur de produit) : il a pour charge de faciliter

l’application de Scrum, sa mission est de tout mettre en œuvre pour que
l’équipe travaille dans de bonnes conditions et se concentre sur l’objectif
duprojet. Il porte également une attention particulière au respect des
différentesphases de Scrum.
— Scrum Team (l’équipe de Scrum) :L’équipe se gère en toute
autonomie et est en charge du développement du produit. Il n’y a pas de
notionde hiérarchie, toutes les décisions sont prises ensemble. Elle
regroupe les rôles habituellement nécessaires à un projet
(architecte,concepteur, développeur, etc.).

II.2 Backlog du produit

Le backlog du produit correspond à une liste priorisée des besoins et des
exigences du client. Les éléments du backlog,appelés aussi les histoires
utilisateurs, sont formulés en une ou deux phrases décrivant de manière
claire et précise la fonctionnalité désirée par le client.
Elles y sont classées par priorité ce qui permet de définir l’ordre de
réalisation.

1 : Priorité la plus forte

2: Priorité la plus faible

ID En Tant que Je Souhaite Priorité

1 Admin S’authentifier 1

2 Visiteur Inscrire 1

3 Admin Consulter la console admin afin de pouvoir gérer 1

les fonctionnalités concernées par l’Admin.

4 Client Consulter la console client afin de pouvoir gérer les 1

6
0
 fonctionnalités concerné par le Client.

5 Admin Modifier et désactiverun client afin de gérer les 2

clients.

6 Admin Créer, modifier et supprimer les Catégories afin de 2

gérer la gestion des Catégories.

7 Admin Créer, modifier et supprimer les produits afin de 2

gérer la gestion des produits.

8 client modifier, consulter, le panier afin de gérer le 2

panier.

9 client Passer une commande afin de pouvoir acheter un 2

produit.

10 Admin Le suivi des commandes 2

Tableau 1: Backlog du produit

II.3 Conception détaillé

II.3.1 Diagramme de cas d’utilisation général
Les cas d’utilisation sont une technique de capture des besoins fonctionnels
du système. Ils décrivent les interactions entre les utilisateurs du système et
le système lui-même, en d’autres termes, ils aident à formaliser la façon
dont une application sera exploitée par ses futurs utilisateurs.

La figure4 : illustre le diagramme de cas d’utilisation général :

6
0
 Figure 4:Diagramme du cas d'utilisation général

II.3.2 Diagramme de classe général

Le diagramme de classe représente les classes intervenant dans le
système. Il est une représentation statique des éléments qui composent un
système et de leurs relations. La classe est un concept abstrait qui permet
de représenter toutes les entités d’un système.

La figure5 : illustre le diagramme de classe général :

6
0
 Figure 5:le diagramme de classe général

II.4 Planification des Sprints

Dans notre cas, nous avons décidé de diviser nos sprints selon les
traitements comme le montre la figure.
6
0
 Release 1

Sprint 2

Gestion
Client
+

Gestion Catégorie
+

Gestion des
Produits
+
Gestion Panier

Sprint 1

Authentification

Inscription

Console Admin et
Client
6
0
 Sprint 3

PassationCom
mande +

Suivi
Commande

Figure 6:Planification des Sprints

III. Réalisation du Sprint 1

III.1 Introduction
- Le sprint est le noyau de Scrum, un sprint ne peut pas démarrer tant que le
précédent n’est pas encore terminé.
Avant de se lancer dans un sprint, l’équipe Scrum se pose la question :
«pourquoi faisons-nous ce sprint?» pour définir le but de ce dernier et ce but ne
doit pas être exprimé en terme technique pour qu’il soit compréhensible par le
Product Owner.
Dans notre cas et avec la participation du Product Owner nous avons décidé
que le but est le suivant :«terminer la partie de l’application qui concerne
l’authentification l’inscription et la consultation du console pour admin et client».

ID En Tant Je Souhaite Taches

que
6
0
1 Admin S’authentifier Conception des diagrammes, Implémentation des
interfaces graphiques, Création des tables dans la
base de données.

2 Visiteur Inscrire Conception des diagrammes, Implémentation des

interfaces graphiques, Création des tables dans la
base de données.

3 Utilisateur Consulter ma Implémentation des interfaces graphiques.

(admin ou console
client)

Tableau 2: illustre le backlog détaillé de ce premier sprint

III.2 Conception

La figure7 : illustre le diagramme d’Activité «S’authentifier» : 6

0
6
0
 Figure 7:Diagramme d’Activité «S’authentifier»

♦Permet à l’utilisateur (Administrateur ou Client) d’accéder à l’application en

Saisissant le login et le mot de passe, si tous les champs sont bien remplis et
les informations Saisies sont correctes elle se redirige vers la page d’accueil,
sinon l’application vide les zones de Saisie et affiche un message d’erreur.

La figure8 : illustre le diagramme d’Activité «Inscription» :

6
0
 Figure 8:Diagramme d’Activité «Inscription»

♦Permet à un visiteur de devenir un client en remplissant un formulaire

d’inscription, si tous les informations saisies sont correctes alors l’inscription
est réussite et un nouveau client a été ajouter, sinon le système affiche un
message d’erreur.

III.3 Développement

III.3.1 Interfaces du sprint

La figure 9: l’implémentation d’interface «Authentification Admin» :

6
0
 Figure 9:l’interface graphique «Authentification Admin»

La figure 10:l’implémentation d’interface «Inscription Client» :

6
0
6
0
 Figure 10:l’interface graphique «Inscription Client»

La figure 11:l’implémentation d’interface «Authentification Client» :

6
0
 Figure 11:l’interface graphique «Authentification Client»

La figure 12: l’implémentation d’interface «Console Admin» :

6
0
 Figure 12:l’interface graphique «Console Admin»

La figure 13: l’implémentation d’interface «ConsoleClient» :

6
0
 Figure 13:l’interface graphique «Console Client»

Conclusion
Dans cette section nous avons présenté l’analyse, la conception et
le développement du premier sprint.

IV. Réalisation du Sprint 2

IV.1 Introduction
En appliquant le même principe que le précédent, nous avons décidé que le but
du deuxième sprint est le suivant : «Gestion des Comptes client,Gestion
Catégorie, Gestion des Produits, Gestion des Paniers ».

ID En Tant Je Souhaite Taches

6
0
 que

1 Admin modifier et désactivécompteclient Conception des diagrammes, Implémentation des

afin de gérer la gestion des Comptes. interfaces graphiques, Création des tables dans la base de
données.

2 Admin Créer, modifier et supprimer les Conception des diagrammes, Implémentation des
Catégories afin de gérer la gestion interfaces graphiques, Création des tables dans la base de
des Catégories. données.

3 Admin Créer, modifier et supprimer les Conception des diagrammes, Implémentation des
Produits afin de gérer la gestion des interfaces graphiques, Création des tables dans la base de
Produits. données.

4 client consulter, modifierle Panier afin de Conception des diagrammes, Implémentation des
gérer la gestion dePanier. interfaces graphiques.interaction dans la base de
données.

Tableau 3:Backlog détaillé du deuxième sprint

IV.2 Conception

La figure 14 : illustre le diagramme du cas d’utilisation «Gérer les paramétrages

des Clients» :
6
0
Figure 14:diagramme cas d’utilisation «Gérer les paramétrages des Clients»

La figure 15 : illustre le diagramme de séquence «Modifier un Client»

6
0
 Figure 15:diagramme de séquence «Modifier un Client»

♦Permet à l’administrateur de modifier un client, Pendant cette opération,

l’administrateur consulte la liste des clients, ensuite il choisit le client qui va être
modifier, il saisit les données à modifier,Le système modifier le client et fait
l’enregistrement des données.
6
0
La figure 16 : illustre le diagramme de séquence «Désactivé un Client»

Figure 16:diagramme de séquence «Désactivé un Client existant»

♦Permet à l’administrateur de désactivé un client, Pendant cette opération,

l’administrateur consulte la liste des clients, l’administrateurchoisir le client qui
va être désactivé, Le système enregistre les données et rendre le client
désactivé.
6
0
La figure17 : illustre le diagramme du cas d’utilisation «Gérer les Catégories » :

Figure 17:diagramme de cas d’utilisation «Gérer les Catégories»

La figure 18: illustre le diagramme de séquence «Ajouter une Catégorie »

6
0
 Figure 18:diagramme de séquence «Ajouter une Catégorie»

♦Permet à l’administrateur d’ajouter une catégorie, Pendant cette opération,

l’administrateur insère tous les informations de lacatégorie, le système vérifie
que tous les champs sont correctement remplis, enregistre les données et
informe l’administrateur du succès de l’ajout de cettecatégorie dans la base de
données. 6
0
La figure 19 : illustre le diagramme de séquence «Modifier une Catégorie»

Figure 19:diagramme de séquence «Modifier une Catégorie»

♦Permet à l’administrateur de modifier les informations d’unecatégorie,

Pendant cette opération, l’administrateur change les valeurs qu’il veut modifier,
le système vérifie que tous les champs sont correctement remplis, enregistre
les données et informe l’administrateur du succès de cette opération.
6
0
La figure 20: illustre le diagramme de séquence «Supprimer une Catégorie»

Figure 20:diagramme de séquence «Supprimer une Catégorie»

♦Permet à l’administrateur de supprimer une catégorie, Pendant cette

opération, l’administrateur choisir la catégorie qui va être supprimer, Le
système averti l’administrateur de l’opération de suppression,L’administrateur
confirme la suppression,enregistre les données et informe l’administrateur du
succès de suppression de cette catégorie dans la base de données.

La figure21: illustre le diagramme du cas d’utilisation «Gérer les Produits » :

6
0
 Figure 21:diagramme du cas d’utilisation «Gérer les Produits»

La figure 22: illustre le diagramme de séquence «Ajouter un Produit»

6
0
 Figure 22:diagramme de séquence «Ajouter un Produit»

♦Permet à l’administrateur d’ajouter un nouveau produit, Pendant cette

opération, l’administrateur insère tous les informations du produit, le système
vérifie que tous les champs sont correctement remplis, enregistre les données
et informe l’administrateur du succès de l’ajout de ce produit dans la base de
données.

La figure 23: illustre le diagramme de séquence «Modifier un Produit»

6
0
 Figure 23:diagramme de séquence «Modifier un Produit»

♦Permet à l’administrateur de modifier les informations d’un produit, Pendant

cette opération, l’administrateur change les valeurs qu’il veut modifier, le
système vérifie que tous les champs sont correctement remplis, enregistre les
données et informe l’administrateur du succès de cette opération.

La figure 24: illustre le diagramme de séquence «Supprimer un Produit»

6
0
 Figure 24:diagramme de séquence «Supprimer un Produit»

♦Permet à l’administrateur de supprimer un produit, Pendant cette opération,

l’administrateur consulte la liste des produits, choisir le produit qui va être
supprimer, Le système vérifier que le produit n’est pas utilisé dans un autre
service, si ouiil supprime le produit et enregistre les données et afficher un
message de succès, sinon il affiche un message d’erreur.

La figure25: illustre le diagramme du cas d’utilisation «Gérer les Paniers» :

6
0
 Figure 25:diagramme du cas d’utilisation «Gérer les Paniers»

La figure 26: illustre le diagramme de séquence «Consulter Panier»

6
0
Figure 26:diagramme de séquence «Consulter Panier»

♦Permet au client d’ajouter un nouveau panier, Pendant cette opération, le

client demande l’ajout d’un produitau panier, le système fait l’ajout d’un panier
qui contient le produit choisi par le client et l’enregistrer.

La figure27: illustre le diagramme de séquence «Modifier Panier»

6
0
 Figure 27:diagramme de séquence «Modifier Panier»

♦Permet au client de modifier un panier, Pendant cette opération, le client fait

la modification des informations du panier, le système fait l’enregistrement des
modifications.

IV.3 Développement
IV.3.1 Interfaces du sprint

─La figure28 : illustre l’implémentation d’interface «Modifier un Client»

6
0
 Figure 28:l’interface graphique «Modifier Client»

─La figure29:illustre l’implémentation d’interface «Désactivé un Client»

6
0
 Figure 29:l’interface graphique «Désactivé un Client»

─La figure30: illustre l’implémentation d’interface «Ajouter une Catégorie »

6
0
 Figure 30:l’interface graphique «Ajouter Catégorie»

─La figure 31: illustre l’implémentation d’interface «Modifier une Catégorie»

6
0
 Figure 31:l’interface graphique «Modifier Catégorie»

─La figure 32: illustre l’implémentation d’interface «Supprimer une Catégorie»

6
0
 Figure 32:l’interface graphique «Supprimer Catégorie»

─La figure 33: illustre l’implémentation d’interface «Ajouter un Produit»

6
0
 Figure 33:l’interface graphique «Ajouter Produit»

─La figure 34: illustre l’implémentation d’interface «Modifier un Produit»

6
0
 Figure 34:l’interface graphique «Modifier Produit»

─La figure35: illustre l’implémentation d’interface «Supprimer un Produit»

6
0
 Figure 35:l’interface graphique «Supprimer Produit»

─La figure36: illustre l’implémentation d’interface «Consulter Panier»

6
0
 Figure 36:l’interface graphique «Consulter Panier»

─La figure 37:illustre l’implémentation d’interface «Modifier Panier»

6
0
 Figure 37:l’interface graphique «Modifier Panier»

Conclusion
Dans cette section nous avons présenté l’analyse, la
conception et le développement du deuxièmesprint.

V. Réalisation du Sprint 3
V.1 Introduction
En appliquant le même principe que le précédent, nous avons décidé que le but du
troisième sprint est le suivant : «Passation et Suivi du commande».
6
0
ID En Tant Je Souhaite Taches
que

Conception des diagrammes, Implémentation des

interfaces graphiques, Création des tables dans
1 client Passer une
la base de données.
commande

Conception des diagrammes, Implémentation des

interfaces graphiques, intervention dans la base
2 Admin Suivi les commandes
de données.

Tableau 4:illustre le backlog détaillé de ce troisième sprint.

V.2 Conception
6
0
La figure38: illustre le diagramme de séquence «Passation Commande»

Figure 38:diagramme de séquence «Passation Commande»

♦Permet au client d’ajouter une commande, Pendant cette opération, le

clientconsulte le catalogue du produit, il choisit le produit et demande d’ajouter
au panier,le systèmedemande à l’utilisateur de s’authentifier, il vérifier les
données d’authentification, le client confirme la commande quand in consulte
son panier, le système enregistre les données dans la base de données.
6
0
La figure 39: illustre le diagramme de séquence «Suivi commande»

Figure 39:diagramme de séquence «Suivi Commande»

♦Permet au administrateur de suiviles commandes, Pendant cette opération,

l’Admin demande la liste des commandes, le système affiche la liste,
l’administrateur peut connaitre les commandes qui sont payer et qui n’ont pas
encore payer aussi il peut contacter le client pour suivre la commande et sa
livraison.

V.3 Développement
V.3.1 Interfaces du sprint
6
0
─La figure40: illustre l’implémentation d’interface «Passation Commande»

Figure 40:l’interface graphique «Passation Commande»

─La figure41: illustre l’implémentation d’interface «Suivi commande»

6
0
 Figure 41:l’interface graphique «Suivi Commande»

Conclusion
Dans cette section nous avons présenté l’analyse, la conception et le
développement du troisième sprint.

Conclusion
Dans ce troisième chapitre nous avonsclarifié la vue globale en décrivant les
méthodologies de conception et de développement et l’architecture adoptée. En
suite le découpage du projet et les diagrammes de conception. Nous allons
commencer un quatrième chapitre intitulé «réalisation».

CHAPITRE IV : REALISATION

I. Environnement de travail
Au niveau de cette dernière partie, nous allons énumérer les outils soft et hard
que nous avons utilisés pour réaliser notre site.
6
0
 I.1 Environnement Hard :
- Hôte :PC Portable HP
- Processeur :Intel(R) Pentium(R) CPU N3710 @ 1.60GHz 1.60
GHz
- RAM : 4GO
- Système d’exploitation : Système d’exploitation 64 bits .

I.2 Atelier de Génie Logiciel :

a) Langage de programmation :
Nous avons eu recours, pour le développement de notre application au
langage de programmation J2EE. C’est la garantie de portabilité qui fait la
réussite de Java dans les architectures client-serveur en facilitant la migration
entre serveurs, très difficile pour les gros systèmes.
C’est le langage le plus adopté par les développeurs grâce à sa fiabilité et sa
performance élevé.

b) Environnement de développement :
JEE : Java Enterprise Edition, ou Java EE, c’est une spécification
pour la technique Java de Sun plus particulièrement destinée aux
applications d’entreprise. Ces applications sont considérées dans une
approche multi-niveaux. Dans ce but, toute implémentation de cette
spécification contient un ensemble d’extensions au Framework Java
standard (JSE, Java Standard Edition) afin de faciliter la création
d’applications réparties.

Figure 42:logo Java EE

JPA : c’est une API Java Persistance qui repose sur des entités
annotés et sur un gestionnaire de ces entités (EntityManager) qui
propose des fonctionnalités pour les manipuler (ajout, modification
suppression, recherche). Ce gestionnaire est responsable de la
gestion de l'état des entités et de leur persistance dans la base de
données.

b) Outil de Conception:
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.

Figure 43:logo StarUml

6
0
 c) Outil de développement:
Spring Tool Suite est une application qui facilite
la création de projet Spring .
Etant basée sur Eclipse .

Figure 44:logo Spring Tool Suite

IntelliJ IDEA un IDE Java performant et

ergonomique pour Enterprise Java, Scala, Kotlin
L'IDE anticipe vos besoins et automatise les tâches
de développement.

Figure 45:logo IntelliJ IDEA

d) Framework utilisé :
Angular est un Framework open source écrit en JavaScript qui
permet la création d’applications Web et plus particulièrement de ce
qu’on appelle des  « Single Page Applications » : des applications web
accessibles via une page web unique qui permet de fluidifier
l’expérience utilisateur et d’éviter les chargements de pages à chaque
nouvelle action.

Figure 46:logo Angular

En informatique, Spring est un Framework open
Source pour construire et définir l'infrastructure d'une
application Java, dont il facilite le développement et les
tests.

Figure 47:logo SpringFramework

Bootstrapest une collection d'outils utiles à la création du design

(graphisme, animation et interactions avec la page dans le navigateur,
etc.) de sites et d'applications web. C'est un ensemble qui contient des
codes HTML et CSS, des formulaires, boutons, outils de navigation et
6
0
 autres éléments interactifs, ainsi que des extensions JavaScripten
option.

Figure 48:logo Bootstrap

f) Système de gestion de base de données :

phpMyAdmin (PMA) est une application Web de gestion pour les

systèmes de gestion de base de données MySQL réalisée
principalement en PHP et distribuée sous licence GNU GPL.

Figure 49:logo phpMyAdmin

Conclusion
Dans ce chapitre nous avons présenté les différents moyens utilisés pour la
réalisation de notre site web.

CONCLUSION GÉNÉRALE
6
0
Ce rapport présente le travail que j’ai effectué lors de mon stage au sein de la
société Online.

Mon travail s’est fixé comme objectifs de satisfaire le maximum des besoins du
cahier de charge et faciliter les tâches aux utilisateurs.

Cette application a permis, en premier lieu, de faciliter les achats puisque le client n’a
pas besoin de se déplacer, elle a permis aussi de développer l’interactivité entre
l’entreprise et les clients et gagner plus de temps.

Cette expérience en marché de travail m’a offert une bonne préparation à mon
insertion professionnelle, car elle fut pour moi une expérience enrichissante et
complète qui conforte mon désir d’exercer mon futur métier dans le domaine de
l’informatique.

WEBOGRAPHIE
6
0
[1] Spring Tool Suite. [En ligne]
Disponible sur :https://spring.io/tools

[2] Angular. [En ligne]

Disponible sur :https://fr.wikipedia.org/wiki/Spring_(framework)

[3] PhpMyAdmin. [En ligne]

Disponible sur : https://fr.wikipedia.org/wiki/PhpMyAdmin

[4] Bootstrap. [En ligne]

Disponible sur :https://getbootstrap.com/

[5] Les méthodes agiles. [En ligne]

Disponible sur : https://agiliste.fr/introduction-methodes-agiles/

[6] Spring Security. [En ligne]

Disponible sur :https://www.toptal.com/java/rest-security-with-jwt-spring-security-and-java

6
0