Rapport de Stage - Gestion Commerciale [PDF]

Zitiervorschau

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 : [email protected]

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 « freelance » 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 préparatoire

Phase de réalisation

Phase 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 fournisseurs  Gestion des produits

 Gestion des dossiers  Gestion des commandes  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 cidessous :

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 ajouter une nouvelle commande Corriger une commande (Mise à jour d’informations)

 Valider une commande  Supprimer une commande

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 Entités

Serveur TomCat Interfaces Contrôleurs

Métiers

Vues

JPARepository

Spring Data Implémentations Métiers

JPA

Spring MVC Spring Security

Hibernate

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 "/" et "/index" "/statistiques" "/dossiers" "/commandes" "/factures" "/produits" "/clients" "/fournisseurs"

Permission "SHOW_DASHBOARD" "SHOW_STATISTIQUES" "SHOW_DOSSIERS" "SHOW_COMMANDES" "SHOW_FACTURES" "SHOW_PRODUCTS" "SHOW_CLIENTS" "SHOW_FOURNISSEURS"

26

Requête "/dossiers/add" "/dossiers/update" "/dossiers/delete" "/commandes/nouveau" "/commandes/edit" "/commandes/add" "/commandes/update" "/commandes/delete" "/factures/nouveau" "/factures/edit" "/factures/add" "/factures/update" "/factures/delete" "/fournisseurs/add" "/fournisseurs/update" "/fournisseurs/delete" "/produits/add" "/produits/update" "/produits/delete" "/familles/save" "/familles/delete" "/tva/dave" "/tva/delete" "/factures/print"

Permission "UPDATE_DOSSIERS"

"UPDATE_COMMANDES"

"UPDATE_FACTURES"

"UPDATE_FOURNISSEURS"

"UPDATE_PRODUITS"

"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)

Contenu

Barre de menu

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 soustotaux. 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