Explorer les Livres électroniques
Catégories
Explorer les Livres audio
Catégories
Explorer les Magazines
Catégories
Explorer les Documents
Catégories
Filière :
« Génie du Logiciel et des Systèmes Informatiques Distribués »
GLSID
Soutenu le 16/11/2018
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.
Enfin je tiens à remercier également les membres du jury qui ont accepté d’évaluer mon
travail.
Sommaire
Remerciement
Sommaire
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.
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
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
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 :
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…
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 :
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 :
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 :
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
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.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
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.
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.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
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
Interfaces
Contrôleurs JPARepository
Métiers
Spring Hibernate
Security
JDBC
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.
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
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)
En-pied (footer)
29
3.3. 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
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.
- 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.
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.
34
3.7. Interface de gestion des 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.
36
3.9. Interface de gestion des commandes
37
Figure 25: Commande d'achat
38
La mise à jour d’une commande se fait de la même manière.
39
3.10. Interface de gestion des factures
La liste des factures est similaire au celle des commandes.
41
Formulaire de mise à jour et d’ajout d’une nouvelle 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.
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.
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.
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
47