Vous êtes sur la page 1sur 53

Département Génie Informatique

Filière : Informatique décisionnelle

« Stage de fin d’étude


Pour l’obtention du

Licence professionnelle :
Informatique décisionnelle »

Réalisation d’une application DPI – INTERFACE DE


PRODUCTION NUMÉRIQUE ‘DIGITAL PRODUCTION INTERFACE’

Soutenu le ../06/2022 devant le jury composé de :

Préparé par : Sous la direction de :

MAARAD Douae Mr. Elmabtoul Rabie

Année universitaire : 2021 / 2022


Stage : Réalisation d’une application DPI

Dédicace

Je dédie ce travail :

A mes chers parents ‘Noureddine et Asmae’,

Nulle expression, nulle dédicace, ne saurait exprimer mon amour éternel et


mes sentiments de considérations pour les sacrifices que vous avez faits pour
mon bien-être, Votre générosité et votre bonté ont toujours été un exemple
pour moi. Trouvez en ce travail le fruit de votre dévouement et l’expression de
mon gratitude et mon profond Amour. Puisse dieu tout puissant vous garder et
vous procurer santé et bonheur.

A mon frère Walid, et mes petites sœurs Yasmine et Aya,

Votre amour et soutien, nous ont toujours donné la force de continuer.

J’espère que vous atteindrez vos objectifs et vos rêves.

Ce travail témoigne mes sentiments sincères.

A mes professeurs de ESTO et mon encadrent de LafargeHolcim

J’espère que vous trouvez de la fierté d’un savoir bien acquis.

A toute ma famille et à tous ceux qui m’aiment.

Ecole Supérieure de Technologie Oujda Page 2


Stage : Réalisation d’une application DPI

Remerciement

Je tiens à remercier dans un premier temps, tout l’équipe pédagogique de


l’école supérieure de technologie et les intervenants professionnels
responsables de la formation génie informatique.

Avant d’entamer ce rapport, je profit de l’occasion pour remercier tout d’abord


Monsieur Elmabtoul Rabie pour son soutien, son aide et ses conseils qui m’ont
guidé durant l’élaboration de ce travail, ainsi pour le temps consacré à la
période de la réalisation de ce dernier et à la lecture de ce rapport. Je le
remercie également pour la confiance qu’il m’a témoigné.

Je profite de l’occasion pour remercier au directeur de l’usine d’Oujda,


Monsieur Adil HAMIMAZ pour m’avoir accueilli au sein de son usine, et
Madame Mounia AIT BRAHIM.

Je tiens aussi à remercier mes collègues de stage Fatima Zaid de m’avoir incité
à travailler en mettant à notre disposition leurs savoirs et leurs compétences.

Je remercie également tout le corps professoral et administratif de l’ESTO pour


les efforts qu’ils fournissent afin de nous garantir une bonne formation et pour
avoir assuré la partie théorique de celle-ci.

Enfin je remercie toutes personnes qui ont contribuée de près ou de loin la


réalisation de ce travail.

Ecole Supérieure de Technologie Oujda Page 3


Stage : Réalisation d’une application DPI

Résumé

L’objectif de ce stage est la conception et la réalisation d’une application web


de la gestion de performance avec tableau de bord pour LafargeHolcim Oujda.
L’application vise à exposer les formulaires sous forme des messages envoyer
aux administrateurs et les utilisateurs, et de faire les calculs automatiquement
pour faciliter la tâche, et bien sûr de donner l’accès à l’admin de fixer les
objectifs et de visualiser les statistiques et le tableau de bord.
Le changement crée de la valeur : les DPI réussissent car ils sont conviviaux.
Simplicité : DPI est simple à utiliser
Connecter l'usine à chaque quart de travail : Réalisations, Anomalies et
consignes au prochain quart de travail
Conservez une archive de chaque rapport
Outil de suivi des stocks
Avoir une description exacte et instantanée des pannes des équipements
Cette solution permet de suppléer celle adoptée par la Fondation qui consiste à
utiliser l'outil Microsoft Excel pour la gestion des performances, des
utilisateurs, la saisie des formulaires et les envoyer par mail.
Finalement pour la mise en œuvre de cette plateforme nous avons adopté
Scrum comme méthodologie de gestion de projet.

Ecole Supérieure de Technologie Oujda Page 4


Stage : Réalisation d’une application DPI

Abstract

The objective of this internship is the design and implementation of a


performance management web application with dashboard for LafargeHolcim
Oujda.
The application aims to expose the forms in the form of messages send to
administrators and users, and to make the calculations automatically to
facilitate the task, and of course to give access to the admin to set the
objectives and to visualize the statistics and dashboard.
Change creates value: CIOs succeed because they are user-friendly.
Simplicity: DPI is simple to use
Connect the factory to each shift: Achievements, Anomalies and instructions to
the next shift
Keep an archive of each report
Inventory tracking tool
Have an exact and instantaneous description of equipment failures
This solution supplements the one adopted by the Foundation, which consists
of using the Microsoft Excel tool for managing performance, users, entering
forms and sending them by email.

Ecole Supérieure de Technologie Oujda Page 5


Stage : Réalisation d’une application DPI

Sommaire
Dédicace .................................................................................................................................................. 2
Remerciement ......................................................................................................................................... 3
Résumé .................................................................................................................................................... 4
Abstract ................................................................................................................................................... 5
Sommaire ................................................................................................................................................ 6
Liste des figures ....................................................................................................................................... 9
Introduction Générale ........................................................................................................................... 10
Chapitre 1 : Contexte Général du Projet ............................................................................................... 11
Introduction........................................................................................................................................... 12
Présentation d’organisme d’accueil ...................................................................................................... 12
. Organisme de LafargeHolcim .............................................................................................................. 13
Généralité sur LafargeHolcim ................................................................................................................ 13
LafargeHolcim mondiale.................................................................................................................... 13
LafargeHolcim Maroc ........................................................................................................................ 14
Activités et implantations.................................................................................................................. 14
Engagement santé & sécurité d’usine ............................................................................................... 15
Organigramme et positionnement du cimenterie d’Oujda............................................................... 17
Contexte générale du projet ................................................................................................................. 19
Présentation de sujet de stage .......................................................................................................... 19
Problématique ................................................................................................................................... 19
Objectifs ............................................................................................................................................ 19
La Gestion du projet .............................................................................................................................. 19
Scrum ................................................................................................................................................. 19
CONCLUSION ......................................................................................................................................... 21
Chapitre 2 : Analyse de besoins............................................................................................................. 22
Introduction........................................................................................................................................... 23
Spécifications fonctionnelles et non fonctionnelles .............................................................................. 23
Spécifications fonctionnelles ............................................................................................................. 23
Identifications des acteurs ................................................................................................................. 23
Diagramme de Cas d’Utilisation......................................................................................................... 24

Ecole Supérieure de Technologie Oujda Page 6


Stage : Réalisation d’une application DPI
Partie administrateur .................................................................................................................... 24
Conclusion ............................................................................................................................................. 24
Chapitre 3 : Conception ......................................................................................................................... 26
Introduction........................................................................................................................................... 27
Diagrammes de Séquence ..................................................................................................................... 27
Diagramme de séquence pour l’authentification ............................................................................. 27
Diagramme de séquence pour l’ajoute ............................................................................................. 28
Diagramme de séquence pour la modification ................................................................................. 28
Diagramme de séquence pour la suppression .................................................................................. 29
Diagramme de Classe ............................................................................................................................ 29
Conclusion ............................................................................................................................................. 30
Chapitre 4 : Environnement de développement et technologies utilisées ........................................... 31
Introduction........................................................................................................................................... 32
Langage et outils utilisé ......................................................................................................................... 32
Conclusion ............................................................................................................................................. 33
Chapitre 5 : Réalisation.......................................................................................................................... 34
Introduction........................................................................................................................................... 35
Résultat Final ......................................................................................................................................... 35
Partie utilisateur ................................................................................................................................ 35
PartieAdmin ................................................................................................................................... 45
Conclusion ............................................................................................................................................. 52

Ecole Supérieure de Technologie Oujda Page 7


Stage : Réalisation d’une application DPI

Liste des figures

Figure 1 : Historique des deux sociétés avant leur fusion ..................................................................... 11


Figure 2 : Détail des implantations dans les pays où LafargeHolcim détient au moins une cimenterie
............................................................................................................................................................... 12
Figure 3 : Cimenterie d’Oujda (1) .......................................................................................................... 13
Figure 4 : Implantations des usines ....................................................................................................... 14
Figure 5 : Politique santé & sécurité...................................................................................................... 15
Figure 6 : principales règles santé & sécurité de LafargeHolcim ........................................................... 16
Figure 7 : Objectifs de l’entreprise ........................................................................................................ 16
Figure 8 : Cimenterie d’Oujda (3) .......................................................................................................... 17
Figure 9 : Cimenterie d’Oujda (2) .......................................................................................................... 17
Figure 10 : Organigramme du site d’Oujda ........................................................................................... 17
Figure 11 : DIAGRAMME DE CAS D'UTILISATION .................................................................................. 23
Figure 12 : Diagramme de séquence d'authentification ....................................................................... 26
Figure 13 : Diagramme de séquence d’ajouter ..................................................................................... 27
Figure 14 : Diagramme de séquence de modification........................................................................... 27
Figure 15 : Diagramme de séquence de suppression............................................................................ 28
Figure 16 : première partie de la page DPI ............................................................................................ 45
Figure 17: Tableau de bord général....................................................................................................... 46
Figure 18 : trier par nom........................................................................................................................ 47
Figure 19 : graph total de revenue par ville .......................................................................................... 47
Figure 20 : Le revenu de la ville d'Oujda................................................................................................ 48
Figure 21 : le revenu de Nador .............................................................................................................. 48
Figure 22 : tableau des utilisateurs........................................................................................................ 49
Figure 23 : Le formulaire d'ajoute ......................................................................................................... 49
Figure 24 : Formulaire de suppression .................................................................................................. 50
Figure 25 : Editer un utilisateur ............................................................................................................. 50
Figure 26 : Tableau des performance .................................................................................................... 50
Figure 27 : Editer le nom et l'objectifFigure 28 : Tableau des performance ........... Error! Bookmark not
defined.
Figure 29 : Editer le nom et l'objectif .................................................................................................... 52
Figure 30 : Editer le nom et l'objectif .................................................................................................... 52

Ecole Supérieure de Technologie Oujda Page 8


Stage : Réalisation d’une application DPI

Introduction Générale

Comme chaque fin d’année d’un cycle supérieure d’études universitaire,


chaque étudiant devra mettre en pratique ses connaissances acquises durant
ce cycle.

En ce qui me concerne, j’ai essayé de faire la conception et la réalisation d’une


application web de la gestion de performance avec tableau de bord pour
LafargeHolcim Oujda.

Notre objectif est de concevoir et de mettre en place un system qui réunit les
différentes fonctionnalités nécessaires pour une application de la gestion des
performances, remplir des formulaires et les envoyer par mail et la visualisation
des tableaux de bords d’une entreprise.

Ce rapport retrace le déroulement de mon stage. Il est partitionné en cinq


chapitres :

Chapitre 1 : Contexte général du projet : Présentera l’organisme d’accueil, le


sujet de stage, la problématique traitée, les objectifs visés, et la gestion
adoptée pour le bon déroulement du projet.

Chapitre 2 : Analyse des besoins : analysera l’existant et ses objectifs et les


besoins fonctionnels et non fonctionnels que l’application doit assurer.

Chapitre 3 : Conception : affichera tous les diagrammes UML qui expliquant


notre système.

Chapitre 4 : Environnement de développement et technologies utilisées :


Définira l’ensemble des technologies utilisées lors de la phase de
développement.

Chapitre 5. Réalisation : Présentera le produit sous forme de prises d’écran de


l’application développée.

Ecole Supérieure de Technologie Oujda Page 9


Stage : Réalisation d’une application DPI

Chapitre 1 : Contexte Général


du Projet

Ecole Supérieure de Technologie Oujda Page 10


Stage : Réalisation d’une application DPI

1 Introduction
Dans ce chapitre je vais présenter la société d’accueil « LafargeHolcim » qui m’a accueilli pendant
trois mois de stage, je présenterai aussi des informations sur ses orientations.

2 Présentation d’organisme d’accueil


LafargeHolcim Maroc est né de la fusion en 2016 de Lafarge Ciments et Holcim Maroc, donnant
naissance au leader national des matériaux de construction. Cette fusion est la plus importante
opération financière réalisée par la Bourse des valeurs de Casablanca, soit un montant de 9,1 Md Dh.

Depuis 1928, l’entreprise participe à la modernisation du secteur de la construction et à l’essor


économique du pays, avec pour ambition d’être le partenaire de référence du développement
national, et un acteur majeur du rayonnement du Maroc à l’échelle régionale.

Figure 1 : Historique des deux sociétés avant leur fusion

Ecole Supérieure de Technologie Oujda Page 11


Stage : Réalisation d’une application DPI

3 . Organisme de LafargeHolcim
LafargeHolcim est l'un des plus grands producteurs mondiaux du ciment. Le siège central se trouve à
Zurich. Elle est présente dans plus de 70 pays sur tous les continents, comptait en 2007 près de
90.000 employés à travers des participations minoritaires et majoritaires, le groupe Suisse Holcim est
l’actionnaire majoritaire de Holcim Maroc, il opère dans de nombreux pays de l’Europe (Allemagne,
France…) de l’Asie (Chine, Vietnam.) de l’Afrique que (Egypte, Afrique du sud) et de l’Amérique
(Mexique, USA).

Figure 2 : Détail des implantations dans les pays où LafargeHolcim détient au moins une cimenterie

4 Généralité sur LafargeHolcim


4.1 LafargeHolcim mondiale :
LafargeHolcim est le leader mondial des matériaux et solutions de construction et est actif dans
quatre segments d'activité : Ciment, Granulats, Béton prêt à l'emploi et Solutions & Produits. Son
ambition est d'être à la tête de l'industrie en matière de réduction des émissions de carbone et de
transition vers une construction à faible émission de carbone. L'entreprise cherche constamment à
introduire et à promouvoir des matériaux et des solutions de construction durables et de haute
qualité auprès de ses clients du monde entier, qu'il s'agisse de constructeurs de maisons individuelles
ou de développeurs de grands projets d'infrastructure. LafargeHolcim emploie plus de 70 000
collaborateurs dans plus de 70 pays et dispose d'un portefeuille équilibré entre marchés en
développement et marchés matures.

Ecole Supérieure de Technologie Oujda Page 12


Stage : Réalisation d’une application DPI

4.2 LafargeHolcim Maroc :


LafargeHolcim Maroc est née suite à la fusion-absorption entre les groupes Lafarge Ciments et
Holcim Maroc en juillet 2016, ce qui a donné lieu à un groupe désormais leader national du secteur
des matériaux de construction avec 55% des parts de marché, un chiffre d’affaires qui s’établi à 6.66
millions de dirhams en 2016. LafargeHolcim Maroc est mobilisée pour accompagner la stratégie
nationale portuaire à horizon 2030. En 2016, les équipes ont contribué aux projets Kenitra
Atlantique, Nador West Med, Port OCP de Laayoune et Port de Jorf Lasfar. Pour tous ces projets,
l’entreprise a répondu aux exigences très strictes de durabilité des ouvrages imposées par le littoral
maritime.

Aujourd’hui LafargeHolcim Maroc est engagé dans


une transition énergétique avec l’ambition de
porter la part de l’électricité renouvelable à 52% en
2030. Dans cet objectif, le Royaume a réalisé et
continue de lancer de grands projets solaires et
éoliens et LafargeHolcim Maroc y contribue.
L’entreprise a notamment participé à la
construction de plus grand complexe solaire au
monde : Noor à Ouarzazate. Figure 3 : Cimenterie d’Oujda (1)

4.3 Activités et implantations :


A travers ses différentes filiales et participations, et pour répondre aux besoins de ses clients,
LafargeHolcim Maroc opère dans diverses activités notamment le ciment, béton, granulats, plâtre,
chaux et mortier. Les sites industriels du groupe LafargeHolcim Maroc couvrent l’ensemble du
territoire national à travers :

Ecole Supérieure de Technologie Oujda Page 13


Stage : Réalisation d’une application DPI

➢ Usines de ciment (Bouskoura, Settat,


Fès, Meknès, Tétouan, Oujda et Agadir,
en cours de construction) ;

➢ Centres de broyage (Tanger, Nador et


Laâyoune) ;

➢ Usines de plâtre ;

➢ Usine de mortier de ciment ;

➢ Usine de chaux ;

➢ centrales à béton ;

➢ Plateforme Geocycle.

Figure 4 : Implantations des usines

4.4 Engagement santé & sécurité d’usine :


La Santé & Sécurité est une préoccupation ancrée dans son quotidien et s’inscrit en tête de nos
priorités. Son ambition est d’être l’entreprise marocaine la plus sûre pour ses collaborateurs, ses
clients et ses parties prenantes.

Et au-delà de son périmètre, LafargeHolcim Maroc veut être la référence nationale dans ce domaine
en incitant tous les acteurs de son environnement à s’engager à ses côtés. Cette ambition première
est un état d’esprit et une exigence quotidienne portée par le top management le LafargeHolcim
Maroc qui s’engage à :

Réaliser les objectifs métiers en prenant la Santé & Sécurité comme un levier clé pour le succès
collectif ;

Donner l’exemple en termes de comportement et d’actions sur les sujets Santé & Sécurité, avec une
attention particulière accordée à la Sécurité Transport Logistique ; Agir systématiquement lorsque
des situations à risque sont notifiées ou identifiés pour réduire les risques du métier.

Ecole Supérieure de Technologie Oujda Page 14


Stage : Réalisation d’une application DPI

Figure 5 : Politique santé & sécurité

Ecole Supérieure de Technologie Oujda Page 15


Stage : Réalisation d’une application DPI

Figure 6 : principales règles santé & sécurité de LafargeHolcim

4.5 Organigramme et positionnement du cimenterie d’Oujda :

Figure 7 : Objectifs de l’entreprise


Positionnement du site d’Oujda :

L'usine est située à 45 Km à l’ouest de la ville d’Oujda, d’une superficie totale de 171 hectares l’usine
est facilement accessible grâce à la route nationale reliant Oujda à Casablanca, et suffisamment
proche du port de Nador qui assure l’alimentation de l’usine en coke de pétrole. La liaison routière
avec les autres régions du Royaume se fait à partir de l’autoroute reliant Oujda et Casablanca.

Ecole Supérieure de Technologie Oujda Page 16


Stage : Réalisation d’une application DPI

L’usine est raccordée à la voie ferrée depuis son démarrage et dispose de sa flotte particulière de
wagons citernes.

Le site n'était pas choisi par hasard mais en tenant compte de plusieurs raisons, parmi elles :

Abondance des matières premières en quantité et en qualité.

Commodité d’alimentation en eau et en énergie électrique.

La qualité des terrains de point de vue fondation et écoulement de la production et


l'approvisionnement de la cimenterie.

Accès à la route et au chemin de fer.

Figure 9 : Cimenterie d’Oujda (2) Figure 8 : Cimenterie d’Oujda (3)

Organigramme du site d’Oujda :

Figure 10 : Organigramme du site d’Oujda

Ecole Supérieure de Technologie Oujda Page 17


Stage : Réalisation d’une application DPI

5 Contexte générale du projet :


Ce Projet rentre dans le cadre du projet de fin d’études au sein de département
informatique, il a été effectué pendant la période de 04 avril et 30 juin 2022 au
sein de LafargeHolcim.

5.1 Problématique :
Le système existant qui consiste à l’utilisation d’un tableur Microsoft Excel et
d’un rapport a envoyé manuellement aux chefs de poste est très limité. Les
opérations faites par un humain sur tableur acceptent l’erreur et si les
informations sont très importantes le traitement de ces derniers prend du temps
et de l’effort.

5.2 Objectifs :
Le changement crée de la valeur : DPI a du succès parce qu'il est convivial.

Simplicité : DPI est simple à utiliser.

Connecter l'usine à chaque quart de travail : Réalisations, Anomalies et


instructions au prochain quart de travail.

Conservez une archive de chaque rapport.

Outil de suivi des stocks.

Avoir une description exacte et instantanée des pannes des équipements.

6 La Gestion du projet :
6.1 Scrum :
Scrum est la méthode agile la plus utilisée. A l'instar des autres méthodes
agiles, Scrum est une démarche de gestion de projet qui fait du client (ou
utilisateur) le principal pilote de l'équipe en charge des développements.
Historiquement, elle est principalement mise en œuvre dans le domaine
informatique, et dans celui du développement d'applications en particulier. Le
terme anglais "scrum" signifie "mêlée" et s'inspire ouvertement du rugby, sport
qui requiert une équipe soudée avançant dans la même direction. Dans le

Ecole Supérieure de Technologie Oujda Page 18


Stage : Réalisation d’une application DPI

cadre de la méthode Scrum, une "mêlée" se traduit par un sprint. Entendez par
là une phase de développement d'une à quatre semaines qui visent à
concentrer l'équipe projet sur une partie limitée du produit ou du service à
réaliser. Typiquement, il s'agira de concrétiser quelques fonctionnalités dans le
cas d'une application. Au terme de chaque sprint, une revue de sprint est
organisée pour faire le point sur l'état d'avancement du projet avec les
utilisateurs, passer au crible les éventuelles adaptations à réaliser, et identifier
les objectifs du sprint suivant (voir l'infographie ci-dessous).

Les principaux avantages de la méthode SCRUM :

➢ Personnel engagé : l'une des caractéristiques de SCRUM, c'est que le


personnel participe activement à la définition des activités et des horaires, de
sorte que le degré d'engagement et la motivation sont plus élevés.

➢ Meilleure vue d'ensemble du projet : avec SCRUM, les projets


précédemment 26 vus dans leur globalité et de façon homogène uniquement
par les gestionnaires de projets sont désormais accessibles à tous les membres
de l'équipe de livraison.

➢ Réduction des bugs : la méthode SCRUM privilégie la qualité et la


fonctionnalité des développements. Le nombre de bugs et de reprises est ainsi
réduit.

➢ Mise à jour des priorités : au début, le client ignore toute la portée de


l'application, ainsi que la façon dont cela pourrait changer avec le temps. Grâce
à SCRUM, le client bénéficie d'une flexibilité au niveau de la définition, de
l'évolution des priorités et des séquences d'activités.

➢ Qualité du produit mise en avant : la méthode SCRUM se concentre


davantage sur la fourniture d'un service de valeur au client plutôt que sur une
date limite fixée.

Organisation Sprint :

Ecole Supérieure de Technologie Oujda Page 19


Stage : Réalisation d’une application DPI

Sprint 0 • Etude de cahier de charges


du projet.
• Elaboration des spécifica-
tionsfonctionnelles détail-
lées.

Sprint 1 • Conception et réalisation


des diagrammes.
• Découpage des taches.
• Planification et chiffrage
des taches à réaliser.
Sprint 2 • Conception UML, Partie Base
de données.
Sprint 3 • Réalisation.
Sprint 4 • Préparation du rapport.

CONCLUSION :
Dans ce chapitre, j’ai défini le contexte général du projet et la démarche de
développement adoptée, et une présentation des sprints

Ecole Supérieure de Technologie Oujda Page 20


Stage : Réalisation d’une application DPI

Chapitre 2 : Analyse de
besoins

Ecole Supérieure de Technologie Oujda Page 21


Stage : Réalisation d’une application DPI

Introduction :
Après avoir détaillé les besoins et les motivations derrières le projet, l’étape
suivante consiste à faire l’étude fonctionnelle du système envisagé. L’étude
fonctionnelle a pour objectif de capturer les besoins fonctionnels et de les
analyser.

I. Spécifications fonctionnelles et non fonctionnelles :


1. Spécifications fonctionnelles :
Après une étude approfondi basé sur le cahier des charges et réunions avec le
client, on a essayé de définir les principales fonctionnalités, et les classer
comme suit :

La gestion des utilisateurs.

La gestion de profil admin.

La gestion des performance ‘les objectifs’.

La visualisation du tableau de bord et les statistiques.

Le calcule automatique pour la facilitation des taches.

Le remplissage des formulaires et les envoyer par mail.

Spécifications non fonctionnelles :

Les spécifications non-fonctionnelles sont toutes les spécifications qui


n'expriment pas une fonction du logiciel.

Les spécifications non fonctionnelles de notre système sont :

Une application web stable et flexible basée sur une solution standard.

La disponibilité doit être garanti 24h/7j, et l’application doit fonctionner


correctement en toute circonstances.

Ecole Supérieure de Technologie Oujda Page 22


Stage : Réalisation d’une application DPI

2. Identifications des acteurs :


Acteur Description
Utilisateur Après l ’ a j o u t d ’ u n n o u v e a u uti-
lisateur il peut se connecter et remplir
les 3 formulaire.

Admin C’est l’administrateur de


l’application, il s’occupe de la gestion
des comptes et toutes les autres fonc-
tionnalités de responsable.

3. Diagramme de Cas d’Utilisation :


a. Partie administrateur :
Le responsable a le droit de gérer les utilisateurs, les profils admin, les statistiques, les performances.

b. Partie utilisateur :
Premièrement le visiteur a le droit de consulter les pages (DPI, PERFORMANCE, AVAILIBILITY et CP
REPORT).

Figure 11 : DIAGRAMME DE CAS D'UTILISATION

Ecole Supérieure de Technologie Oujda Page 23


Stage : Réalisation d’une application DPI

Conclusion :
Cette phase d’analyse et spécifications a permis d’avoir une idée à la fois
globale et détaillée sur le projet à mener pendant la période du stage.
L’élaboration des différentes spécifications a aidé à regrouper et préciser les
besoins et organiser le processus de développement. La partie qui suit
présentera la phase de conception du projet.

Ecole Supérieure de Technologie Oujda Page 24


Stage : Réalisation d’une application DPI

Chapitre 3 : Conception

Ecole Supérieure de Technologie Oujda Page 25


Stage : Réalisation d’une application DPI

Introduction :
La phase de conception vient répondre à la question « comment réaliser la
solution ?». Elle se fait suite à la capture et l’analyse des exigences
fonctionnelles et techniques. Dans le présent rapport, cette phase de
conception s’articule autour des différents diagrammes UML élaborés afin de
modéliser le système à mettre en place.

I. Diagrammes de Séquence :
Les diagrammes de séquences permettent de décrire comment les éléments du
système interagissent entre eux et avec les acteurs :

•Les objets au cœur d’un système interagissent en s'échangeant des messages.

•Les acteurs interagissent avec le système au moyen Interfaces Homme-


Machine.

1. Diagramme de séquence pour l’authentification :

Figure 12 : Diagramme de séquence d'authentification

Ecole Supérieure de Technologie Oujda Page 26


Stage : Réalisation d’une application DPI

2. Diagramme de séquence pour l’ajoute :

Figure 13 : Diagramme de séquence d’ajouter

3. Diagramme de séquence pour la modification :

Figure 14 : Diagramme de séquence de modification

Ecole Supérieure de Technologie Oujda Page 27


Stage : Réalisation d’une application DPI

4. Diagramme de séquence pour la suppression :

Figure 15 : Diagramme de séquence de suppression

5. Diagramme de Classe :
Le diagramme de classe présenter les classes et les interfaces des systèmes
ainsi que les différentes relations entre celles-ci.

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. Une classe 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.

Ecole Supérieure de Technologie Oujda Page 28


Stage : Réalisation d’une application DPI

Figure 15 : Diagramme de Classe

Conclusion
Dans ce chapitre, nous avons entamé une partie importante du projet, qui est
la conception du projet. Nous avons commencé par dégager les cas
d’utilisations possibles et finalement nous avons dressé les diagrammes de
séquences, d’activité et de classe. Dans le prochain chapitre l’environnement
de développement et les technologies utilisées sera adressée.

Ecole Supérieure de Technologie Oujda Page 29


Stage : Réalisation d’une application DPI

Chapitre 4 : Environnement de
développement et technologies utilisées

Ecole Supérieure de Technologie Oujda Page 30


Stage : Réalisation d’une application DPI

Introduction :
Après la conception et l’étude du projet, vient la phase de l’étude technique.
Cette partie décrit les contraintes techniques et définit les Framework et
technologies de développement utilisés.

I. Langage et outils utilisé :

L'HyperText Markup Language, HTML, désigne un type de langage


informatique descriptif. Il s'agit plus précisément d'un format de données
utilisé dans l'univers d'Internet pour la mise en forme des pages Web.

Cascading Style Sheet-feille de style en cascade, CSS est l’acronyme


de Cascading Style Sheets, est un langage de feuille de style utilisé
pour décrire la mise en forme d'un document écrit avec un langage de balisage
[3]. Il permet aux concepteurs de contrôler l’apparence et la disposition de
leurs pages web.

Le JavaScript est un langage informatique utilisé dans le


développement des pages web. Ce langage a la particularité de
s'activer sur le poste client, Autrement dit, c’est votre ordinateur qui
va recevoir le code et qui devra l'exécuter. C'est en opposition à d'autres
langages qui sont activé côté serveur.

Hypertext Preprocessor, plus connu sous son sigle PHP, est un


langage de programmation libre, principalement utilisé pour
produire des pages Web dynamiques via un serveur HTTP, mais
pouvant également fonctionner comme n'importe quel langage interprété de
façon locale.

XAMPP est un ensemble de logiciels permettant de mettre en place


un serveur Web local, un serveur FTP et un serveur de messagerie
électronique. Il s'agit d'une distribution de logiciels libres offrant
une bonne souplesse d'utilisation, réputée pour son installation simple et
rapide.

Ecole Supérieure de Technologie Oujda Page 31


Stage : Réalisation d’une application DPI

My Structured Query Langage-Langage de requêtes structurées


MYSQL est un système de gestion de bases de données relationnelles dédiées
Open source. Il est très rapide, fiable et facile à utiliser et gratuit.il a été
développé à l’origine pour gérer des très grandes bases de données beaucoup
plus rapidement que des solutions déjà établies. Il offre un ensemble de
fonctionnalités large et riche. Sa rapidité et sa sécurisation en font un outil
idéal pour les applications internet.

Atom est un éditeur de texte libre développé par GitHub depuis


2014. Il permet de développer dans de nombreux langages de
programmation comme PHP, CSS, Javascript, HTML, et bien
d'autres... C'est un logiciel moderne et intuitif.

draw.io est un éditeur de diagramme en ligne entièrement gratuit


construit autour de Google Drive (TM), qui vous permet de créer des
organigrammes, UML,relation d'entité, diagrammes de réseau, maquettes et
plus encore. Vos donnéessont stockées uniquement dans Google Drive, donc
aucun tiers supplémentaire pour faire confiance à vos données.

Power BI est défini par Microsoft comme étant « un service d’analyse


commerciale qui fournit des insights permettant de prendre des
décisions rapides et éclairées. » Disponible sur toutes les plateformes
numériques, l’application est conçue avant tout pour appuyer les entreprises
dans leur processus de prise de décision.

Conclusion :

Après avoir décrit l’architecture technique et cité les différents outils et


Framework avec lesquels on a travaillé, le chapitre suivant est consacré à la
mise en œuvre de ce système.

Ecole Supérieure de Technologie Oujda Page 32


Stage : Réalisation d’une application DPI

Chapitre 5 : Réalisation

Ecole Supérieure de Technologie Oujda Page 33


Stage : Réalisation d’une application DPI

Introduction :
Une fois les exigences fonctionnelles d’un sprint clairement identifiées, ses
besoins et son périmètre clairement cernés et sa conception réalisée, nous
avons passé à la phase de son développement.

Dans ce chapitre, nous présentons la partie mise en œuvre du projet.

I. Résultat Final :
a. Partie utilisateur :
Un utilisateur doit se connecter pour voir l’ensemble des pages suivants.

Figure 16 : Login utilisateur

Dans toutes les pages de la partie utilisateur on a un menu composer des différents pages et le
bouton Déconnecter.

Figure 17 : Menu

Ecole Supérieure de Technologie Oujda Page 34


Stage : Réalisation d’une application DPI

Après la connexion d’un utilisateur, la page DPI s’affichera. En haut il y a le nom


de l’utilisateur quelque statistique, et en bas on a les consignes de poste
précèdent.

Figure 1 : La page dpi

La page performance contient un formulaire à remplir, on commence par donner le nom de chef de
post, post, operateur et sélectionner la ligne 1 ou 2.

Le formulaire sous forme de ‘collapse’. Dans cette partie, pour la facilitation de tache de l’utilisateur

Le calcul se fait automatiquement.

Collapse

Figure 2 : La première partie de la page performance

Ecole Supérieure de Technologie Oujda Page 35


Stage : Réalisation d’une application DPI

Ecole Supérieure de Technologie Oujda Page 36


Stage : Réalisation d’une application DPI

Figure 3 : La deuxième partie la page performance

Ecole Supérieure de Technologie Oujda Page 37


Stage : Réalisation d’une application DPI

La dernière partie de cette page, c’est la partie des consignes poste.

L’utilisateur qui est connecter doit laisser des consignes pour le poste suivant, après un click sur le
bouton valider, ces derniers vont être s’afficher dans la page DPI et une copie de formulaire va
envoyer aux emails des chefs de poste.

Figure 5 : partie consignes

Figure 4 : Email performance

Ecole Supérieure de Technologie Oujda Page 38


Stage : Réalisation d’une application DPI

Figure 6 : Première partie de la page 'Availability'

Ecole Supérieure de Technologie Oujda Page 39


Stage : Réalisation d’une application DPI

Ecole Supérieure de Technologie Oujda Page 40


Stage : Réalisation d’une application DPI

Figure 7 : La dernière partie de la page 'AVAILIBILITY'

Après une clique sur le bouton valider, comme la page précédente un mail va être en voyer aux chefs
des poste.

Figure 8 : L'email envoyer

Ecole Supérieure de Technologie Oujda Page 41


Stage : Réalisation d’une application DPI

Le nom de l’utilisateur connecter est afficher dans le champ operateur, les autres champs doivent
être remplis manuellement.

Figure 9 : La première partie de la page CP rapport

Ecole Supérieure de Technologie Oujda Page 42


Stage : Réalisation d’une application DPI

Figure 10 : La dernière partie de CP rapport

Ecole Supérieure de Technologie Oujda Page 43


Stage : Réalisation d’une application DPI

Figure 11 : bouton valider

Après une clique sur le bouton valider et comme les autres partie une copie de formulaire va être
envoyer au chef de poste.

Figure 12 : Email CP rapport

Ecole Supérieure de Technologie Oujda Page 44


Stage : Réalisation d’une application DPI

1. Partie admin :

Les administrateurs possèdent une page de login

Figure 13 : Login admin

Dans tous les pages on va avoir un menu qui contient les pages suivantes :

DPI, ajouter un utilisateur, profil, performance, déconnexion.

La première page, c’est la page ‘Dashboard’, on haut il y a le nom d’admin,


quelques statistiques ‘le nombre total d’admin, d’utilisateurs …’

Figure 16 : première partie de la page DPI

Ecole Supérieure de Technologie Oujda Page 45


Stage : Réalisation d’une application DPI

En cliquant sur ce bouton on va avoir un rapport général sur nos données.

Figure 17: Tableau de bord général

Ecole Supérieure de Technologie Oujda Page 46


Stage : Réalisation d’une application DPI

Pour le premier graphique « Tonnage fin et tonnage début » on peut on peut dire que toutes les
zones ont le tonnage début et fin sont égaux, alors on peut conclure que les zones sont en équilibre.

Le deuxième graphique représente le pourcentage d’arrêt de chaque équipement.

Le dernier « objectif et réalisé » chaque performance on peut voir facilement la différence entre
l’objectif et le réalisé. Et on peut trier chaque performance par nom.

Ecole Supérieure de Technologie Oujda Page 47


Stage : Réalisation d’une application DPI

Figure 18 : trier par nom

En cliquant sur ce bouton, on va avoir le revenu total par ville.

Dans cette partie, nous avons utilisé la carte pour que la lecture soit claire.

Figure 19 : graph total de revenue par ville

Ecole Supérieure de Technologie Oujda Page 48


Stage : Réalisation d’une application DPI

En cliquant sur la ville d’Oujda, on va avoir son revenu dans la deuxième carte.

Figure 20 : Le revenu de la ville d'Oujda

Figure 21 : le revenu de Nador

Dans la deuxième page, on a l’ajoute, la modification et la suppression des utilisateurs.

Ecole Supérieure de Technologie Oujda Page 49


Stage : Réalisation d’une application DPI

Figure 22 : tableau des utilisateurs

Si on clique sur le bouton ajouter on va avoir un formulaire pour ajouter un nouveau utilisateur.

Figure 23 : Le formulaire d'ajoute

Ecole Supérieure de Technologie Oujda Page 50


Stage : Réalisation d’une application DPI

Figure 25 : Editer un utilisateur

Figure 24 : Formulaire de suppression

Dans la page performance, on a un tableau qui contient toutes les performances et il peut les éditer.

Figure 26 : Tableau des performances

Ecole Supérieure de Technologie Oujda Page 51


Stage : Réalisation d’une application DPI

Figure 27 : Editer le nom et l'objectif

Figure 28 : Editer le nom et l'objectif

Conclusion :
Lors de ce chapitre, j’ai affiché l’ensemble des modules qu’on a implémenté pour répondre aux
objectifs cités dans le cahier de charge.

Ecole Supérieure de Technologie Oujda Page 52


Stage : Réalisation d’une application DPI

Conclusion générale

Tout au long de la préparation de mon projet de fin d’études, j’ai essayé de


mettre en pratique les connaissances acquises durant mes études
universitaires et cela dans le but de réaliser cette application.

La réalisation de ce travail a nécessité au début de faire une collecte


d’informations qui nous a permis à son tour de préparer une étude théorique
au cours de laquelle nous avons étudié et critiqué l’existant. Cette étude nous a
abouti à proposer une solution fiable et qui réponde aux besoins client.

Nous avons abouti finalement à la dernière étape à savoir : la réalisation. Où


nous avons enchaîné avec une série de captures d’écran illustrant le
fonctionnement de l’application.

Cette solution va faciliter énormément leur travail, et les donner une vue plus
riche de l’avancement vers leurs objectifs.

Finalement, je suis bien satisfaite de cette opportunité de travailler durant trois


mois au sein d’une société internationale, entouré d’une équipe très
motivante, qui a facilité mon intégration et aider le développement de mon
niveau technique.

Ecole Supérieure de Technologie Oujda Page 53

Vous aimerez peut-être aussi