Ecole Normale Supérieure de l’Enseignement ‫ﺍ ﻟﻤﺪﺭﺳﺔ ﺍﻟﻌﻠﻴﺎ ﻸﺳﺎﺗﺬﺓ ﺍﻟﺘﻌﻠﻴﻢ ﺍﻟﺘﻘﻨﻲ‬

Technique Mohammedia ‫ﺍﻟﻤحﻤﺪيﺔ‬

Université Hassan II de Casablanca
ENSET
‫ﺟﺎﻣﻌﺔ ﺍﻟحﺴﻦ ﺍﻟﺜﺎﻧﻲ ﺑﺎﻟﺪﺍﺭ ﺍﻟﺒﻴﻀﺎﺀ‬

Département Mathématiques et Informatique

Rapport de Stage Ingénieur

Filière :
« Génie du Logiciel et des Systèmes Informatiques Distribués »
GLSID

Réalisation d’une application web

de gestion commerciale

Lieu du stage : REC Média à Agadir

Soutenu le 16/11/2018

Réalisé par : Encadré par :

Abdessamad REDOUANI M. El hassan BOUTHANOUTE
M. Ibrahim SIMALI

Année Universitaire : 2018-2019

ENSET, Avenue Hassan II - B.P. 159 - Mohammedia - Maroc
 05 23 32 22 20 / 05 23 32 35 30 – Fax : 05 23 32 25 46 - Site Web: www.enset-media.ac.ma
E-Mail : contact@enset-media.ac.ma
Remerciement

Je tiens à adresser mon profonde extrême et gratitude à tous ceux qui m’ont aidé, de près ou
de loin, à réaliser ce modeste projet.

Je tiens aussi à remercier M. El hassan BOUTHANOUTE et M. Ibrahim SIMALI d’avoir

m’encadrer tout au long de la période de ce stage. Ils ont été toujours disponibles, à l’écoute
de mes nombreuses questions, et toujours intéressés par l’avancement de mon travail.

Je remercie également le corps professoral de la filière Génie du Logiciel et des Systèmes

Informatiques Distribués qui a été toujours présent pour assurer la bonne formation dans le
domaine concerné.

Enfin je tiens à remercier également les membres du jury qui ont accepté d’évaluer mon
travail.
Sommaire
Remerciement
Sommaire

Table des figures

Introduction............................................................................................................................................. 1

Chapitre I : Contexte générale du projet

1. Présentation de l’établissement d’accueil ...................................................................................... 3
1.1. Situation géographique : ............................................................................................................. 3
1.2. Activité, lieu, objectif................................................................................................................... 3
1.3. Structure et effectif de l'entreprise : ........................................................................................... 4
1.4. Clients de REC Media :................................................................................................................. 4
1.5. Partenaires de REC Media : ......................................................................................................... 5
1.6. Valeurs clés de REC Media .......................................................................................................... 5
2. Cahier des charges........................................................................................................................... 6
2.1. Mission (objectif) ......................................................................................................................... 6
2.2. Organisation du projet (démarche et méthodologie) ................................................................. 6
2.3. Besoins et fonctionnalités techniques et métiers ....................................................................... 7

Chapitre II : Conception et modélisation

1. La méthode UML ............................................................................................................................. 9
2. Diagrammes de cas d’utilisation ..................................................................................................... 9
3. Diagramme de classes ................................................................................................................... 16

Chapitre III : Réalisation de l’application

1. Les outils de développement ........................................................................................................ 20
1.1. Logiciels et outils utilisés ........................................................................................................... 20
1.2. Langages utilisés ........................................................................................................................ 21
1.3. Technologies et bibliothèques utilisés ...................................................................................... 21
2. La création du projet ..................................................................................................................... 24
2.1. Structure de projet ..................................................................................................................... 24
2.2. Configuration de sécurité ........................................................................................................... 26
3- Les interfaces réalisées.................................................................................................................. 28
Conclusion ............................................................................................................................................. 46
Webographie ......................................................................................................................................... 47
Table des figures
Figure 1: Logo de l'entreprise REC Media ............................................................................................... 3
Figure 2: Situation géographique de l'entreprise REC Media ................................................................. 3
Figure 3: Clients de REC Media................................................................................................................ 4
Figure 4: Partenaires de REC Media ........................................................................................................ 5
Figure 5: Diagramme de cas d'utilisations ............................................................................................ 10
Figure 6: Diagramme de cas d'utilisation : gestion de produits ............................................................ 11
Figure 7: Diagramme de cas d'utilisation : gestion des clients ............................................................. 12
Figure 8: Diagramme de cas d'utilisation : gestion des fournisseurs .................................................... 12
Figure 9: Diagramme de cas d’utilisation : gestion des dossiers........................................................... 13
Figure 10: Diagramme de cas d'utilisation : gestion des commandes .................................................. 14
Figure 11: Diagramme de cas d'utilisation : gestion des factures ......................................................... 14
Figure 12: Diagramme de cas d'utilisation : gestion des utilisateurs .................................................... 15
Figure 13: Diagramme de classes .......................................................................................................... 17
Figure 14: Architecture Spring Boot ...................................................................................................... 24
Figure 15: Structure de projet ............................................................................................................... 25
Figure 16: Formulaire d'authentification .............................................................................................. 28
Figure 17: Template web de l'application ............................................................................................. 29
Figure 18: Tableau de bord ................................................................................................................... 30
Figure 19: Interface de statistiques ....................................................................................................... 31
Figure 20: Interface de gestion de dossiers .......................................................................................... 33
Figure 21: interface de gestion de produits .......................................................................................... 34
Figure 22: Interface de gestion de clients ............................................................................................. 35
Figure 23: Interface de gestion de fournisseurs .................................................................................... 36
Figure 24: La liste des commandes ....................................................................................................... 37
Figure 25: Commande d'achat .............................................................................................................. 38
Figure 26: Commande de vente ............................................................................................................ 38
Figure 27: Formulaire d'ajout/modification de commande .................................................................. 39
Figure 28: Liste des factures .................................................................................................................. 40
Figure 29: Détails d'une facture ............................................................................................................ 40
Figure 30: Exemple de facture en format PDF ...................................................................................... 41
Figure 31: Formulaire d'ajout/modification de facture ........................................................................ 42
Figure 32: Interface de gestion des utilisateurs .................................................................................... 43
Figure 33: Liste des permissions............................................................................................................ 43
Figure 34: Informations de la société .................................................................................................... 44
Figure 35: Page non trouvé (404) .......................................................................................................... 45
Figure 36: Page accès refusé(403) ......................................................................................................... 45
Introduction

Pour assurer une formation professionnelle performante aux étudiants, les cours proposés au
sein des établissements sont complétés par un stage permettant de valider les connaissances déjà acquis
tout au long de la formation et de faire une comparaison entre la théorie étudié et la pratique afin de
concrétiser ces connaissances et être plus proche au domaine de l’emploi.

Dans le cadre de la formation à l’Ecole Normale Supérieure de l’Enseignement Technique de

Mohammedia et afin d’appliquer les méthodologies et les notions enseignées tout au long de l’année, je
devais réaliser un stage d’ingénieur d’une durée de huit semaines au sein de de l’entreprise REC Media,
après avoir préparé toutes les obligations et les documents nécessaires pour commencer le projet du
stage, sous la tutelle de son directeur M. BOUTHANOUTE El Hassan.

La mission qui ma a été confiée est tout d’abord, la réalisation d’une application web dynamique de
gestion commerciale avec le Framework Spring Boot, en travaillant sur toutes les fonctionnalités fournit
par celui-ci.

Mon travail s’articulera autour de trois parties dont le premier sera consacré à la présentation générale
de la société, et de présentation de cahier des charges, le deuxième abordera à l’analyse et conception
du problème. Enfin présenter les différentes démarches adoptées pour réaliser l’application. Une
webographie sera également mise à la disposition du lecteur.

1
 Chapitre I
Contexte générale du projet

2
Contexte générale du projet
1. Présentation de l’établissement d’accueil

Figure 1: Logo de l'entreprise REC Media

1.1. Situation géographique :

La présente section s’intéresse à la présentation de l’organisme d’accueil qui est le REC Media,
qu’elle est implantée au N° 380 Avenue 9 juillet LKHIAM 1 Agadir.

Figure 2: Situation géographique de l'entreprise REC Media

1.2. Activité, lieu, objectif

Créée en 2015, REC Media est une agence de communication événementielle, spécialisée dans :
► La communication et publicité.
► Développement web & web-marketing.
► Production audiovisuelle.
► Des logiciels de gestion personnalisés.
► La maintenance du réseau informatique.
3
 ► Des sites internet avec base de données.
► Installation et réparation de matériel informatique.
► Centre de formation agrée (progiciels REC Media et produits Microsoft).
L’objectif de la société est avant tout regrouper un pôle de compétences dynamique qui répond
aux besoins des sociétés, en leur apportant des solutions personnalisées lors d’événements
professionnels et de conseils en communication événementielle. L’avantage de REC Media sur une
grande partie de ses concurrents réside dans le fait qu'est une agence indépendante et innovante, leur
domaines d’interventions sont multiples : Conférence, web séminaire, e-conférence, forum, vœux,
événements institutionnels, inventives, kick off, lancement de produits, relations publiques, séminaires
interne / externe, soirées d’entreprises, team Building.

1.3. Structure et effectif de l'entreprise :

REC Media est une filiale de l’entreprise SARL qui elle s’occupe de l’organisation des
événements dans une agence à Agadir.
 Le design des images et le montage des vidéos sont réalisés par des indépendants « free-
lance » qui sont rémunérés au prorata de leurs travaux.

 Mr Mouad Dibe, responsable de la production audiovisuelle et multimédia.

 Le gérant de l’agence (BOUTHANOUTE El Hassan, Fondateur et Directeur de la société)

s’occupe de la maintenance du site internet et des commandes passées par les clients.

1.4. Clients de REC Media :

Tout en développant son activité, REC Media veille à maintenir une grande diversification de sa
clientèle et des secteurs d’activités auxquels elle s’adresse, de façon à contenir le risque de concentration
sur un nombre restreint de Clients.

Figure 3: Clients de REC Media

4
1.5. Partenaires de REC Media :

Figure 4: Partenaires de REC Media

1.6. Valeurs clés de REC Media

Des valeurs clés caractérisent REC Media, telles :
 L’excellence : c’est l’essence même de la culture REC Media. L’expertise, reconnue par les
clients, les partenaires est l'expression de la motivation et de l'engagement du REC Media.

 Le dynamisme et l’innovation : REC Media évolue en permanence, innove et sait se remettre

en question. REC Media est une société vivante qui ne se satisfait pas d’un schéma type, mais
qui recherche sans cesse des idées pour progresser. REC Media encourage fortement ceux
qui vont de l’avant.

 L’esprit d’équipe : chaque personne est à l’écoute et prêt à apporter son soutien chaque fois
que ses compétences le permettent. Le partage est reconnu comme une valeur essentielle du
REC Media et indispensable au développement de tous.

5
2. Cahier des charges

2.1. Mission (objectif)

Une bonne gestion d'entreprise passe indéniablement par une bonne gestion commerciale qui
permet de piloter une entreprise. En effet, la gestion commerciale permet par exemple de fixer un prix
de vente, de suivre l'évolution de ses stocks ou encore d'accéder rapidement aux informations d'un
client ou d'un fournisseur. La gestion commerciale donne les indices qui permettent aux dirigeants de
prendre les bons choix stratégiques.
Aujourd’hui la gestion commerciale nécessite l’utilisation des technologies d’informatique pour la rendre
plus efficace et plus rapide, de minimiser la perte d’informations qui freinent le processus de
développement de l’entreprise. Pour cela l’objectif principal de mon projet est la création d’une
application Web qui permet aux directeurs des entreprises de gérer les commandes/factures d’une
manière facile. De plus, consulter facilement les statistiques des achats et des ventes effectuées
automatiquement.

2.2. Organisation du projet (démarche et méthodologie)

Après que j’ai reçu le sujet de ce projet, il était obligatoire de déterminer une méthode à suivre
durant le développement de l’application. Pour cela je prends en considérations trois phases à procéder
qui sont présentés dans la figure ci-dessous :

Phase Phase de Phase

préparatoire réalisation d'évaluation

 Phase préparatoire :
 Analyse du sujet à l’aide des documents primaire fournit pour mettre sur écrit ce qu’il faut
faire et comment le faire.
 En se fixant des objectifs et les moyens en actions.
 Déterminer la méthode avec laquelle on souhaite réaliser les objectifs.

 Phase de réalisation :
 Mise en place des objectifs avec les moyens prévus à cet effet (planification)
 La mise en œuvre de ressources et les outils de développements

 Phase d’évaluation :
 Vérifier que les objectifs fixés sont atteints.
 Vérifier si les moyens ont répondus, aux attentes.

6
2.3. Besoins et fonctionnalités techniques et métiers
L’application attendu doit répondre aux certains fonctionnalités techniques et métiers. Il doit
permettre aux utilisateurs de :

 Gérer les produits.

 Gérer les commandes.
 Gérer les factures.
 Gérer les clients.
 Gérer les fournisseurs.
 Gérer les utilisateurs.
 Consulter toutes les statistiques.

Pour aboutir réaliser les objectives de ce projet, il faut faire une étude conceptuelle, comme une
première phase, qui consiste à formuler le problème à résoudre d’une manière objective, simple,
cohérente et complète.
Le suivant chapitre présente le travail fait durant cette phase, à travers les diagrammes UML les plus
utilisés, à savoir le diagramme de cas d’utilisation et le diagramme de classes correspondant au projet.

7
 Chapitre II
Conception et modélisation

8
Conception et modélisation
1. La méthode UML
Apres avoir déterminé les différents besoins, les fonctionnalités métiers et techniques et les règles
de gestion de l’application, la réalisation de celle-ci est doit passer par l’étape de conception, l’étape la
plus importante parce qu’elle présente la base sur laquelle l’application est réalisé.
Afin d’avoir une conception clair, j’ai décidé d’utiliser la méthode UML à l’aide du logiciel « Entreprise
Architect », en regardant les modèles qu’elle fournit, tel que le diagramme de classes, de cas d’utilisation
et le diagramme de séquence etc…

2. Diagrammes de cas d’utilisation

Les diagrammes de cas d'utilisation sont des diagrammes UML utilisés pour donner une vision globale
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, mais pour le développement, les cas d'utilisation sont plus
appropriés.
Un cas d'utilisation représente une unité discrète d'interaction entre un utilisateur (humain ou machine)
et un système. Il est une unité significative de travail. Dans un diagramme de cas d'utilisation, les
utilisateurs sont appelés acteurs (Actors), ils interagissent avec les cas d'utilisation (Use cases).
Le diagramme suivant représente les différents cas d’utilisations principaux qui définissent le
fonctionnement de l’application à réaliser.

9
 Figure 5: Diagramme de cas d'utilisations

Les acteurs qui interagissent avec le system d’application sont limites dans deux acteurs ;
Administrateur et Utilisateur. L’objectif de mettre l’acteur Utilisateur est simplifier la représentation des
cas d’utilisation qui sont communes entre les deux acteurs fils.
Grace à l’outil de modélisation Entreprise Architect qui fournit la fonctionnalité de regroupement des
cas d’utilisations, ce diagramme regroupe plusieurs cas d’utilisation sous forme des packages dont
chaque package désigne un module ou une partie du système. Il existe six diagrammes de cas
d’utilisations pour :

 Gestion des clients  Gestion des dossiers

 Gestion des fournisseurs  Gestion des commandes
 Gestion des produits  Gestion des factures.

Entre outre, le diagramme de cas d’utilisation qui concerne la gestion d’utilisateurs qui prend la partie
particulière pour un administrateur. Les détails de ces diagrammes seront présentés dans la suite.

10
 Figure 6: Diagramme de cas d'utilisation : gestion de produits

Le diagramme de gestion de produits contient onze cas d’utilisation qu’un utilisateur peut
réaliser ; il peut ajouter ou modifier un produit avec l’affectation du TVA et de catégorie correspondant.
En même temps s’il n’existe pas de catégorie ou de TVA souhaité, il a la possibilité de les ajouter, modifier
ou de les supprimer selon le besoin.
L’affectation d’une catégorie et de TVA est obligatoire dès la première fois qu’on ajoute un produit. Et
facultatif dans le cas de mise à jour.

11
 Figure 7: Diagramme de cas d'utilisation : gestion des clients

Le diagramme de cas d’utilisation de gestion des clients constitué de 3 principales cas classique
qui sont l’ajout, la suppression et la mise à jour d’un client.
La même chose pour le diagramme de cas d’utilisation représentant la gestion des fournisseurs ci-
dessous :

Figure 8: Diagramme de cas d'utilisation : gestion des fournisseurs

12
 Figure 9: Diagramme de cas d’utilisation : gestion des dossiers

Le diagramme ci-dessus représente les cas d’utilisation à réaliser par un utilisateur en ce qui
concerne les dossiers contenant de documents commerciale.
L’utilisateur gère les dossiers en :
- Création d’un nouveau dossier
- Modification d’un dossier existant
- Consultation d’un dossier
- Fermeture d’un dossier
- Suppression d’un dossier

13
 Les deux diagrammes suivant représentent l’interaction d’utilisateur avec le système de gestion des
commandes et de factures. L’utilisateur a la possibilité de :

 Consulter les informations d’une commande  Valider une commande

 ajouter une nouvelle commande  Supprimer une commande
 Corriger une commande (Mise à jour d’informations)

Figure 10: Diagramme de cas d'utilisation : gestion des commandes

En ce qui concerne les systèmes de gestion des factures, l’utilisateur peut :

 Ajouter une facture

 Consulter une facture
 Valider une facture
 Corriger une facture
 Supprimer une facture

Figure 11: Diagramme de cas d'utilisation : gestion des factures

14
Figure 12: Diagramme de cas d'utilisation : gestion des utilisateurs

Ce diagramme est réservé seulement pour les administrateurs comme acteurs. Il représente les
opérations qui peuvent être réalisé dans le système de gestion des utilisateurs.
Un administrateur peut ajouter un nouvel utilisateur en lui affectant au moins une permission qui est
nécessaire.
Un administrateur a la possibilité de modifier les informations d’un utilisateur soit :
- Mise à jour de ses informations
- Affectation des permissions
- Retire des permissions
- Activation ou désactivation de son compte

Enfin l’administrateur a le droit de supprimer un utilisateur.

15
 Le diagramme des cas d’utilisation ne présente pas totalement le système d’application, car il s’agit
seulement d'une représentation qui indique les actions qu’un acteur peut faire sur ceci. Alors, les
questions qui se posent s’arrêtent sur la manière et les objets sur lesquels ces actions interagissent.

3. Diagramme de classes
La méthode UML fournit le diagramme de classes, un schéma utilisé en génie logiciel pour présenter
les classes et les interfaces des systèmes ainsi que les différentes relations entre celles-ci. Ce diagramme
fait partie de la partie statique d'UML car il fait abstraction des aspects temporels et dynamiques.

Une classe décrit les responsabilités, le comportement et le type d'un ensemble d'objets. Les éléments
de cet ensemble sont les instances de la classe. C’est un ensemble de fonctions et de données (attributs)
qui sont liées ensemble par un champ sémantique.

Les classes sont utilisées dans la programmation orientée objet. Elles permettent de modéliser un
programme et ainsi de découper une tâche complexe en plusieurs petits travaux simples. Elles peuvent
être liées entre elles grâce au mécanisme d'héritage qui permet de mettre en évidence des relations de
parenté. D'autres relations sont possibles entre des classes, chacune de ces relations est représentée par
un arc spécifique dans le diagramme de classes. Elles sont finalement instanciées pour créer des objets.

Elles sont finalement instanciées pour créer des objets (une classe est un moule à objet : elle décrit les
caractéristiques des objets, les objets contiennent leurs valeurs propres pour chacune de ces
caractéristiques lorsqu'ils sont instanciés)

Le suivant diagramme représente toutes les classes qui font les parties structurales et données de
l’application.

16
 Figure 13: Diagramme de classes

Le diagramme contient quinze classes déférents et liant entre elle par des diverses relations :

 La classe Produit
Il contient les attributs suivant : la désignation d’un produit, son prix, la quantité en stock,
quantité d’alerte et la référence. De plus, cette classe a des relations d’association avec d’autres
classes telles que TVA et Catégorie ;
Un produit appartient à une seule catégorie et ne peut avoir qu’une seule TVA qui se caractérise par
une désignation et un taux.

 La classe Stock
Définie par la quantité en stock et la date de son changement, elle concerne un seul produit.
Cependant un produit peut avoir plusieurs stocks.

 La classe Personne : c’est une spécification des deux classes Fournisseur et Client.
- La classe Fournisseur se caractérise par une adresse, le capital, l’email, le numéro de fax, le
numéro de téléphone, la raison sociale et un code.
- La classe Client se caractérise par l’adresse, l’âge, le nom et un numéro de téléphone.
 La classe dossier
17
 Défini par son nom, son numéro et la date de sa création et la date de fermeture. Un dossier peut
contenir plusieurs commandes et plusieurs factures, alors qu’une facture ou une commande ne peut
être enregistré que dans un seul dossier.

 Classe Commande
Une commande peut contient une ou plusieurs lignes de commande, alors qu’une ligne ne
concerne qu’une seule commande. Une ligne de commande concerne un seul produit et défini la
quantité de ce produit et son prix de vente ou d’achat. La commande concerne soit un fournisseur
ou un client.

 La classe Facture
Une facture concerne une seule commande, ainsi un fournisseur (facture d’achat) ou bien un
client (facture de vente), contient au moins une ligne de facture. De plus elle peut avoir une
réduction et une règlemente ou plusieurs et une seule livraison.

En se basant sur ces diagrammes des cas d’utilisation et de classes données créés dans la phase de
conception, on peut maintenant commencer la phase de réalisation, à construire l’application dont les
deux parties Front-End et Back-End.

18
 Chapitre III
Réalisation de l’application

19
Réalisation de l’application
1. Les outils de développement
La réalisation de cette application a besoin d’utilisation de plusieurs logiciels, des langages pour
implémenter, des technologies et des Frameworks afin de créer la conception de l’application, dans la
phase de conception, les traitements principaux de côté serveur, et la mise en page/forme des interfaces
graphiques et d’autres options dans la phase de réalisation.

1.1. Logiciels et outils utilisés

1.1.1. Entreprise Architect
Un logiciel de modélisation et de conception UML, édité par la société
australienne Sparx Systems. Couvrant, par ses fonctionnalités,
l'ensemble des étapes du cycle de conception d'application, il est l'un des
logiciels de conception et de modélisation les plus reconnus.

1.1.2. IDE Eclipse

- IDE Eclipse L’entreprise a choisi de développer sur l’IDE Eclipse.
C’est donc sur cet environnement que j’ai réalisé mes
développements. Cela a permis d’utiliser les outils déjà mis en
place pour le projet comme par exemple le module Spring Boot
qui permet de lancer facilement un serveur en local.

1.1.3. XAMP
Un ensemble de logiciels permettant de mettre en place facilement un
serveur Web confidentiel, un serveur FTP et un serveur de messagerie
électronique. Il s'agit d'une distribution de logiciels libres (X (cross) Apache
Maria DB Perl PHP) offrant une bonne souplesse d'utilisation, réputée pour
son installation simple et rapide.

20
1.2. Langages utilisés

Java : un langage de programmation orienté objet créé par James

Gosling et Patrick Naughton, La particularité et l'objectif central de Java
est que les logiciels écrits dans ce langage doivent être très
facilement portables sur plusieurs systèmes d’exploitation

HTML : L’HyperText Markup Language est un langage de balisage, le

format de données conçu pour représenter les pages web.
CSS : Les feuilles de style en cascade (Cascading Style Sheets), forment
un langage informatique qui décrit la présentation des documents HTML
et XML.
JavaScript : un langage de programmation de scripts orienté objet à prototype,
principalement utilisé dans les pages web interactives.

1.3. Technologies et bibliothèques utilisés

1.1.4. Java Enterprise Edition (JEE)
La plateforme Java entreprise (Java EE) est un ensemble de spécifications coordonnées et
pratiques qui permettent un ensemble des solutions pour le développement, le déploiement, et de la
gestion des applications multi tiers centralisées sur un serveur. Construit sur la plateforme de Java 2
édition standard (Java SE), la plateforme Java EE ajoute les possibilités nécessaires pour fournir une
plateforme complète, stable, sécurisée, et rapide de Java au niveau entreprise.

1.1.5. Java 8
Java 8 est la dernière version de Java et offre notamment la possibilité d’utiliser des lambda
expressions, une nouvelle API de gestion de dates et heures ainsi que l'utilisation des “Optionals” qui
permettent une meilleure gestion des références null.

1.1.6. Spring Boot

Spring Boot est un framework qui permet la mise en
place d’application Spring rapidement et facilement. Il se
base sur le Framework Spring et permet de s’affranchir de
la plupart des configurations de celui-ci à mettre en place
pour créer une application.
Les principales fonctions :

21
- Une gestion des dépendances Spring simplifiée
- Un déploiement facilité
- Intégrez directement Tomcat, Jetty ou Undertow (inutile de déployer des fichiers WAR)
- La configuration automatique de bibliothèques Spring et autres
- La configuration des propriétés externes plus lisible
- Facilités pour créer des repositories
- Des possibilités de déclarer des sorties JSON multiples
- L’exposition des ressources par REST juste avec une annotation
- Aucune génération de code et aucune exigence pour la configuration XML

1.1.7. Spring Security

Spring Security, est un contrôleur d’authentification flexible et puissant pour assurer une
application Web Java basé sur Spring.

1.1.8. Hibernate Framework

Est un Framework open source gérant la persistance des objets en base de données relationnelle.
Hibernate est adaptable en termes d'architecture, il peut donc être utilisé aussi bien dans un
développement client lourd, que dans un environnement web léger de type Apache Tomcat ou dans un
environnement Java EE complet : WebSphere, JBoss Application Server et Oracle WebLogic Server

1.1.9. BOOTSTRAP
Un Framework développé par l'équipe du réseau social Twitter,
utilisant les langages HTML, CSS et JavaScript fournit aux développeurs des
outils pour créer un site facilement. Il sert à développer des sites avec un
design responsive, qui s'adapte à tout type d'écran.
Il fournit des outils avec des styles déjà en place pour des typographies, des
boutons, des interfaces de navigation et bien d'autres encore.

1.1.10. FusionCharts
Une bibliothèque JavaScript de cartographie propose aux
développeurs un composant pour intégrer des graphiques de toutes
sortes sur un site Internet de manière simple et efficace. Ce module
permet de créer des graphes animés et interactifs, pratique pour des
présentations en ligne ou des applications Web.

22
1.1.11. Maven

Maven est un outil permettant d'automatiser la gestion de projets Java.

Il offre entre autres les fonctionnalités suivantes :

 Compilation et déploiement des applications Java (JAR, WAR)

 Gestion des librairies requises par l'application
 Exécution des tests unitaires
 Génération des documentations du projet (site web, pdf, Latex)
 Intégration dans différents IDE (Eclipse, JBulder)

23
2. La création du projet
2.1. Structure de projet
La création de projet Spring Boot nécessite la mise en place d’une organisation de sa structure
suivant les couches et les modules que Spring fournit.
L'illustration ci-dessous montre la structure de Spring Boot :

Browser
Spring Boot IOC Containner
HTML
CSS HTTP

HTML WEB Métier DAO

Serveur TomCat Entités

Interfaces
Contrôleurs JPARepository
Métiers

Vues Spring Data

Implémentations
Métiers JPA
Spring MVC

Spring Hibernate
Security
JDBC

Figure 14: Architecture Spring Boot

 IoC Container : C'est la base la plus importante et également la base, le fondement du Spring. C'est
le rôle de la configuration et de la gestion de dépendances et la gestion du cycle de vie des objets
Java
 Il fait La configuration automatique pour lier les implémentations à leurs interfaces (injection
de dépendances)
 WEB : il contient un serveur web Tomcat et l’ensemble des contrôleurs qui permet de traiter les
requêtes. Ainsi, l’ensemble des vues HTML.
 Métier : il contient les interfaces des métiers et les implémentations.
 DAO : Contient toutes les classes Repository permettant l’accès à la base de données

24
Suite à cette architecture, la structure du projet est comme suit :
Il compose de huit package
- Package de base gc.rec qui contient la main pour le
démarrage de l’application.

- Packages DAO : gc.rec.dao et gc.rec.entities

- Packages métier : gc.rec.imetier et gc.rec.metier

- Packages WEB : gc.rec.web

- Package pour la configuration de securité :

gc.rec.security

- Package utile : gc.rec.conversions

Figure 15: Structure de projet

25
2.2. Configuration de sécurité
Spring Security est un module incontournable d’une application développée en Spring. Il apporte
tout le nécessaire pour sécuriser une application et il a l’avantage d’être vraiment personnalisable. Les
deux notions essentielles sont : l’authentification (savoir qui je suis) et les autorisations (savoir ce que
j’ai le droit de faire). Spring Security essaye d’apporter une solution à ces deux problématiques.
Pour configurer cette application j’utilise la Java Config. Cette dernière est plus qu’encouragée avec les
dernières versions de Spring. La classe permettant de le créer devra être annotée par
@EnableWebSecurity et hérité de la classe abstraite WebSecurityConfigurerAdapter qui fournit trois
méthodes dont chacune a un rôle :
Authentification
- La méthode configure pour gérer l’authentification : il prend comme paramètre un objet de type
AuthenticationManagerBuilder qui permet de définir quel sera le mode d’authentification des
utilisateurs et de vérifier la cohérence entre les informations saisit et celles qui se trouve dans la base
de donnés.

Autorisations
- La méthode configure pour contrôler l’accès aux ressources, il prend comme paramètre un objet de
type HttpSecurity qui permet de définir des autorisations liées aux requêtes. Par exemple dans notre
application nous avons :

Requête Permission
"/" et "/index" "SHOW_DASHBOARD"
"/statistiques" "SHOW_STATISTIQUES"
"/dossiers" "SHOW_DOSSIERS"
"/commandes" "SHOW_COMMANDES"
"/factures" "SHOW_FACTURES"
"/produits" "SHOW_PRODUCTS"
"/clients" "SHOW_CLIENTS"
"/fournisseurs" "SHOW_FOURNISSEURS"

26
 Requête Permission
"/dossiers/add" "UPDATE_DOSSIERS"
"/dossiers/update"
"/dossiers/delete"
"/commandes/nouveau" "UPDATE_COMMANDES"
"/commandes/edit"
"/commandes/add"
"/commandes/update"
"/commandes/delete"
"/factures/nouveau" "UPDATE_FACTURES"
"/factures/edit"
"/factures/add"
"/factures/update"
"/factures/delete"
"/fournisseurs/add" "UPDATE_FOURNISSEURS"
"/fournisseurs/update"
"/fournisseurs/delete"
"/produits/add" "UPDATE_PRODUITS"
"/produits/update"
"/produits/delete"
"/familles/save"
"/familles/delete"
"/tva/dave"
"/tva/delete"
"/factures/print" "PRINT_FACTURES"

Chaque utilisateur a un ensemble de permissions et lorsqu’il veut accéder à une ressource, il doit avoir
la permission correspondant à la ressource qui le permet.

- La méthode configure qui prend en paramètre un objet de type WebSecurity permet d’ignorer des
requête à traiter par la classe de configuration de sécurité.
Dans notre application, la requête à ignorer est celle de récupération des ressources statiques telles
que les fichiers css, javascript et des images.

27
3- Les interfaces réalisées

3.1. L’authentification

Figure 16: Formulaire d'authentification

La première page qui s’affiche est la page d’authentification qui compose d’un formulaire dans
lequel un utilisateur doit saisir son identification, ici c’est le nom d’utilisateur et le mot de passe.
Cette page est appelée automatiquement quand un utilisateur fait appel à une requête qui nécessite
une authentification. C’est le module Spring-Security qui occupe de gérer ces requêtes en utilisant la
classe WebSecurityConfigurerAdapter fourni.
Une fois les informations sont correctes, l’application sera redirigée vers la page d’accueil qui contient le
tableau de bord. Dans le cas contraire l’application reste dans la page d’authentification en notifiant
l'utilisateur par un message que les informations saisies sont l'incorrect.

28
3.2. Template utilisé

En-tête(Header)

Barre de menu Contenu

En-pied (footer)

Figure 17: Template web de l'application

La Template utilisé se compose de quatre parties :

- L’entête (Header) : une barre fixe en haut de la page grâce aux classes de Framework Bootstrap. Il
contient le nom et la location de la page courant, un bouton de changement de thème et un pour la
déconnexion.
- Pied de page (Footer) : Barre en bas de la page, contient le logo de la société et son adresse.
- La barre de menu : une barre fixe à gauche de la page qui peut être caché selon le choix d’utilisateur
et selon la dimension de l’écran. Il contient un ensemble de liens, regroupés selon la catégorie
concerné, permettant d’accéder à tous le contenu de l’application.
Grace au moteur de Template Thymleaf ayant des fonctionnalités telles que : la gestion des Layouts et
des Fragments qui permettent de d’utiliser une seule Template pour toutes les pages de l’application.

29
3.3. Tableau de bord

Figure 18: Tableau de bord

C’est la première page affiché dès l’authentification d’utilisateur. Cette page représente une
vision globale sur les opérations faite pendant des durées différentes.
Cette interface compose de quatre parties :
- Partie haut-gauche : présente le nombre de commandés effectués, les quantités des produits
vendu, le revenu et la croissance du mois courant, ainsi le rapport par rapport au mois dernier.
- Partie haut-droite : un diagramme montre les opérations d’achats, de ventes et les revenus pour
chaque mois de l’année courant.
- Partie gauche-bas : un tableau qui présente les produits les plus vendus.
- Partie bas-droit : un diagramme montre la variation de stock des produits.

30
3.4. L’interface de statistiques

Figure 19: Interface de statistiques

Cette interface présente un ensemble de statistiques qui concerne :

- Les deux diagrammes à barres présentent les ventes : un pour les quantités de produits vendus en
fonction de mois, et l’autre pour les revenues des ventes.

31
- Les achats : Le diagramme à gauche présente les quantités de produits achetés. Et le diagramme à
droite pour les couts d’achats. Tous en fonction de mois.

- Les deux diagrammes à secteurs présentent les différents produits achetés (gauche) et vendus
(droite) pendant l’année courant.

L’utilisateur a la possibilité de filtrer les statistiques à l’aide du

formulaire suivant soit par le choix de :

- Dossier
- L’année
- Le mois
- Le jour
- La catégorie des produits
- Le produit

32
3.5. Interface pour la gestion des dossiers
L’interface ci-dessous contient la liste de dossiers crées par les utilisateurs. L’utilisateur a la
possibilité de rechercher un dossier selon son nom, sa date de création ou par la date quand il ferme. Il
peut les regrouper selon les dossiers fermés ou ouverts. L’interface fournit aussi un bouton permettant
la création d’un nouveau dossier.

Figure 20: Interface de gestion de dossiers

L’ouverture d’un dossier affiche ses détails tel que le nombre de commandes et factures dans ce dossier,
le nombre de produits acheté/vendus et les montants total. De plus l’utilisateur qui créer ce dossier.

33
3.6. Interface de gestion des produits
Cette interface compose d’une liste de produits que la société dispose sous forme d’un tableau
ou il est défini par sept colonnes : la référence de produit, sa désignation, son prix et la famille à quel il
appartient, la quantité en stocke et la quantité d’alerte, De plus une colonne qui contient les bottons
permettant de supprimer ou de la mise à jour d’un produit.
Les quantités en stock sont affichées en vert lorsque ses valeurs sont supérieures aux quantités d’alerte,
et en rouge dans le cas contraire.
En cliquant sur le bouton nouveau, un formulaire pour la saisie d’un nouveau produit s’affiche à gauche
du tableau. La même chose dans le cas de mise à jour.

Figure 21: interface de gestion de produits

34
3.7. Interface de gestion des clients

Figure 22: Interface de gestion de clients

Cette interface contient un tableau de clients qui contient les colonnes suivant : le nom du client,
son prénom, son âge, son adresse, l’e-mail et le numéro de téléphone. Et une colonne de gestion (les
bottons d’ajout, de suppression et de modification)
L’affichage de formulaire d’ajout de nouveau client se fait en cliquant sur le bouton nouveau, et le même
pour le bouton de modification.

35
3.8. Interface de gestion des fournisseurs
Cette interface contient un formulaire de l’ajout de nouveau, ou de modification des informations
d’un fournisseur. Et une liste des fournisseurs déjà existés définies par :
Le code de fournisseur, le nom, l’adresse, le raison social, le capital, l’email, le numéro de téléphone et
le numéro de fax ; et une colonne contenant les boutons de gestion de ces fournisseurs.

Figure 23: Interface de gestion de fournisseurs

36
3.9. Interface de gestion des commandes

Nous avons trois interfaces pour la gestion des commandes :

- La liste des commandes : l’interface nous offre la liste des commandes enregistrés dans un dossier,
et qui sont regrouper en commandes d’achats (fournisseurs) et commandes de ventes (clients)
o Commandes d’achats : présenté sous forme de tableau dont les colonnes sont le numéro,
la date, le fournisseur et la validité de commande.
o Commande de ventes : un tableau contenant les colonnes : numéro, date et la validité de
la commande et le client.
L’utilisateur a la possibilité de filtrer ces commandes soit par la date, la précision du
fournisseur/client et sa validité ou par le saisit de numéro de la commande.

Figure 24: La liste des commandes

- Les détails d’une commande

Les utilisateurs peuvent consulter les détails d’une commande en cliquant sur le bouton
« détails » dans la liste des commandes. Le résultat obtenu présente comme suit :
Elle peut être une commande d’achat ou de vente. Elles contiennent des informations générales telles
que le numéro de commande, la date, sa validité et le nombre de produits commandés. De plus la liste
de produits commandé ; ses quantités, les TVA, les sous-total et le montant total.
La différence entre les deux est que la commande d’achat contient de plus les informations du
fournisseur concerné. Cependant dans la commande de vente, elle contient celles du client.

37
 Figure 25: Commande d'achat

Figure 26: Commande de vente

- Formulaire de mise à jour et d’ajout d’une nouvelle commande

L’ajout d’une commande se fait en saisissant la date de commande qui doit respecter un format
spécifique. Il faut aussi déterminer si cette commande est validée ou non, par défaut l’option est
mise à non. La détermination du type de commande soit en choisissant un client (vente) ou un
fournisseur (achat).
L’utilisateur doit au moins ajouter un produit commandé d’après le formulaire à droite, qui
propose une liste des produits avec ses prix, ainsi la saisie de la quantité commandé qui doit être au
minimum égal à 1.

38
La mise à jour d’une commande se fait de la même manière.

Figure 27: Formulaire d'ajout/modification de commande

39
3.10. Interface de gestion des factures
La liste des factures est similaire au celle des commandes.

Figure 28: Liste des factures

Détails d’une facture

Figure 29: Détails d'une facture

Les principales informations d’une facture sont :

- Les informations générales : contient le numéro et la date de la facture. Le nombre de produits
commandés, le total hors taxe et le total toutes taxes comprises TTC
40
- La liste des produits commandés : contient les noms des produits, les prix, les quantités et les sous-
totaux.
- La partie concerné et ses informations : soit un client ou bien un fournisseur.
- Les réductions sur les produits.
- Les règlements
- La livraison : la date et l’adresse (facultatif)
L’interface contient aussi un bouton qui permet d’imprimer la facture en version PDF :
Exemple :

Figure 30: Exemple de facture en format PDF

41
Formulaire de mise à jour et d’ajout d’une nouvelle facture

Figure 31: Formulaire d'ajout/modification de facture

L’utilisateur peut établir la facture à partir d’une commande en cliquant sur le bouton « facturer »
dans la liste des commandes.
La mise à jour ou la modification d’une facture se fait de la même manière que la commande. La
déférence est que lors d’établir de facture, l’utilisateur peut ajouter des options tels que les règlements
de la facture, les réductions, la date et l’adresse de livraison.

42
3.11. Interface de gestion des utilisateurs

Cette interface est accessible seulement par les administrateurs, ils peuvent consulter la liste des
utilisateurs de cette application, les permissions affectés, et les statuts de leurs compte, c’est-à-dire s’ils
sont activé ou non.
Un administrateur peut ajouter ou modifier un utilisateur à l’aide de formulaire affiché à gauche, en
saisissant le nom d’utilisateur qui ne doit pas être existe déjà et un mot de passe, ensuite il doit affecter
au moins une permission.

Figure 32: Interface de gestion des utilisateurs

L’affectation des permissions se fait dans une boite

de dialogue qui sera affiché après la clique sur le
bouton bleu dans la ligne permission

Figure 33: Liste des permissions

43
3.12. Interface de gestion des informations de la société
Cette interface présente les informations et le logo de la société qui utilise cette application. Si
l’utilisateur connecter à l’application est un administrateur il a la possibilité de modifier ces informations.

Figure 34: Informations de la société

44
3.13. Page pour les requêtes introuvables
Cette page s’affiche lorsque l’utilisateur essaye d’accéder à une ressource inexistante dans
l’application.

Figure 35: Page non trouvé (404)

3.14. La page 403 pour les requêtes inaccessible

Figure 36: Page accès refusé(403)

45
Conclusion

Au terme de ce travail, il sera nécessaire de s’interroger sur son efficacité et son

adéquation avec les objectifs tracés initialement.

Ce projet a été très intéressant et enrichissant pour moi car il m’a permis d’améliorer mes
compétences en réalisation du projet, et en développement de l’application web avec un nouvel
outil, Framework Spring, ce qui est un avantage et point de plus pour moi.
De plus, il a été bénéfique et formateur tant sur le plan technique que humain. Techniquement
car j’ai vu améliorer mes compétence dans la programmation web en apprenant notamment le
modèle MVC, la sécurité et le concept ORM du Framework Spring qui permettent d’organiser le
code de manière à ce que celui-ci puisse être plus facilement réutilisable et maintenable.

Enfin, je voudrais signaler que ce stage m’a été bénéfique à plus d’un titre. En effet, il me
permet d’appliquer mes connaissances théoriques et pratiques que j’ai acquises durant mon
curseur universitaire dans le domaine professionnel, et aussi de les améliorer.

46
Webographie

Site officiel de REC Media :

http://www.rec.ma/

Documentation et concepts de base

http://www.wikipedia.com

Framework de développement de mise en page et mise en forme

http://www.bootstrap.com

Bibliothèque de création des diagrammes et graphiques

https://www.fusioncharts.com

Concepts de base de Framework Spring Boot

http://spring.io/projects/spring-boot

Collection des dépendances et bibliothèques nécessaires du projet

https://mvnrepository.com/

47