MEMOIRE DE FIN D’ETUDES

Développement d’une application web « Gestion des suivies »

PERIODE :

Du 22 Février au 10 Juin 2022

Nom & Prénom de l’Etudiant : Mlle ARRAI Ibtissame

Classe, Filière et Option de l’Etudiant : 3ème année Licence Professionnelle Génie Logiciel.

SUPERVISEUR EN ENTREPRISE : ENCADRANT ECOLE :

Chargée d’orienter l’étudiant au sein de l’entreprise

Nom et Prénom : M. KHANDALI Mohamed Nom et Prénom : M. MARAH

Fonction : Responsable Qualité Flux et

Processus

Visa de Validation :

Année Universitaire : 2021/2022

 Dédicace

A ma chère mère, A l’âme de mon cher père,

Pour vos sacrifices et votre aide

Pour vos conseils qui m’ont guidé tout au long de mes études

Aucun mot ne peut exprimer mon amour envers vous.

A mes chères sœurs,

Je ne sais comment vous remercier pour votre amour et tout ce que vous avez fait et que
vous continuez de faire pour moi.

A Mes professeurs,

Pour leurs efforts et aide afin de m’assurer une formation convenable et cohérente.

A tous mes chers amis,

Pour tout le soutien que vous m’avez offert, je vous dis

MERCI.

A tous ceux qui m’aiment,

Je dédie ce travail…

Ibtissame ARRAI
 REMERCIEMENTS

Il m’est particulièrement agréable avant de présenter ce travail de fin d’études, d’exprimer

toute ma gratitude envers les personnes qui ont contribué de près ou de loin à la réalisation de

ce stage dans de très bonnes conditions et d’avoir œuvré pour rendre ce stage une expérience
très enrichissante pour moi tant sur le plan professionnel que personnel.

Je tiens à remercier vivement M. KHANDALI Mohammed Responsable Qualité Flux et

pour ses conseils et son soutien malgré ses nombreuses préoccupations et sa grande

responsabilité, aussi pour le partage de son expertise au quotidien et son judicieux encadrement.
Grâce à sa confiance j'ai pu m'accomplir totalement dans mes missions. Il fut d'une aide

précieuse dans les moments les plus délicats.

Mes meilleurs remerciements s’adressent à BENKARA Younes, pour ses conseils et l’aide

qu’il m’a apporté durant cette période de stage, pourtant qu’à l’ensemble du personnel
d’Eurafric Information pour leur sympathie et leurs soutiens.

Je tiens également à remercier sincèrement M. MARAH, mon encadrant pédagogique, pour

sa disponibilité et ses précieux conseils, pour avoir accordé son temps et son attention, mais
également pour son assistance pour la rédaction du présent mémoire.

Mes remerciements s’adressent aussi à tout le corps professoral et administratif de

l’ESTEM pour leurs efforts, pour la qualité de l'enseignement qui m’a été dispensé durant ma
formation.

Je tiens à remercier également les membres du jury, pour leur assistance et de me faire
l’honneur d’accepter de juger mon travail.
 Résumé

Le stage s’est déroulé au sein d’Eurafric Information, basée à Bouskoura et vise à

développer une nouvelle application d’assistance au pilotage des traitements « back-office ».

L’approche est basée sur la mise en œuvre d’une solution qui facilitera aux personnes en
charge du plan de pilotage des traitements « Back-Office » de la banque, d’optimiser leurs

performances afin de capitaliser sur un enrichissement continu de la base de connaissances des

incidents.

Afin de garantir la performance et la réussite de mon projet, j’avais adopté la méthode de

développement V pour gérer la conduite de mon projet, j’ai choisi d’utiliser UML comme outil

de conception pour décrire les fonctionnalités techniques de l’application, et bien évidemment

j’ai utilisé la technologie LARAVEL pour élaborer la partie Back-End en respectant la logique

métier, ainsi que les technologies HTML5, CSS3, BOOTSTRAP, JavaScript, JQuery et Ajax
pour former la couche présentation et les IHM dédié à l’application.

À travers ce document, je décrirai plus en détail chaque partie de la réalisation du projet.

 Abstract

The internship took place within Eurafric Information, based in Bouskoura, and aims to
develop a new assistance application to manage back-office processing.

The approach is based on the implementation of a solution that will make it easier for
those in charge of the bank’s back-office processing management plan to optimise their

performance in order to capitalise on the continuous enrichment of the incident knowledge

base.

In order to guarantee the performance and success of my project, I adopted the

development method V to manage the conduct of my project, I chose to use UML as a design

tool to describe the technical functionalities of the application, and of course I used the LARAVEL
technology to develop the Back-End part in accordance with the requirements of the client’s

business logic, as well as the HTML5, CSS3, BOOTSTRAP, JavaScript, JQuery and Ajax
technologies to form the presentation layer and the HMI dedicated to the application.

Through this document, I will describe in more detail each part of the project
implementation.
 Sommaire :

Dédicace -------------------------------------------------------------------------------------------- 2

REMERCIEMENTS ---------------------------------------------------------------------------------- 3

Résumé --------------------------------------------------------------------------------------------- 4

Abstract --------------------------------------------------------------------------------------------- 5

Sommaire : ----------------------------------------------------------------------------------------- 6

LISTE DES TABLEAUX ------------------------------------------------------------------------------ 9

Liste des figures ---------------------------------------------------------------------------------- 10

Liste des acronymes ----------------------------------------------------------------------------- 14

Introduction générale --------------------------------------------------------------------------- 15

CHAPITRE I : Contexte général du projet : ------------------------------------------------------- 16

1. Introduction -------------------------------------------------------------------------------- 16

2. Présentation de l’organisme d’accueil : / Environnement de l’entreprise ---------------- 16

2.1. Présentation du Groupe FINANCECOM : --------------------------------------------- 16

2.2. Présentation de BANK OF AFRICA : --------------------------------------------------- 17

2.3. Présentation de la société Eurafric-Information : ------------------------------------- 18

2.4. Organigramme d’Eurafric-Information : ---------------------------------------------- 19

3. Conclusion : -------------------------------------------------------------------------------- 19

CHAPITRE II : CADRE GÉNÉRAL DU PROJET ------------------------------------------------------ 20

1. Introduction -------------------------------------------------------------------------------- 20

2. Définition du projet : ----------------------------------------------------------------------- 20

2.1. Présentation du contexte du projet : -------------------------------------------------- 20

 2.2. Problématique : ------------------------------------------------------------------------ 21

2.3. Objectif du projet : -------------------------------------------------------------------- 21

3. Planning du projet : ------------------------------------------------------------------------ 21

4. Conclusion : -------------------------------------------------------------------------------- 22

Chapitre III : Etude fonctionnelle du projet : ----------------------------------------------------- 23

1. Introduction : ------------------------------------------------------------------------------- 23

2. Etude Fonctionnelle : ----------------------------------------------------------------------- 23

2.1. Etude des besoins fonctionnels : -------------------------------------------------------- 23

2.2. Spécification des besoins non fonctionnels : ----------------------------------------- 24

3. Organisation et planification du projet : -------------------------------------------------- 26

3.1. Études des processus de développement : ------------------------------------------- 26

3.2. Processus de développement en V : -------------------------------------------------- 26

4. Conclusion : -------------------------------------------------------------------------------- 27

Chapitre III : Etude conceptuelle : ---------------------------------------------------------------- 28

1. Introduction : ------------------------------------------------------------------------------- 28

2. Description du langage UML : ------------------------------------------------------------- 28

3. Digrammes de cas d’utilisation : ----------------------------------------------------------- 28

3.1. Diagramme de cas d’utilisation en général : ------------------------------------------ 29

3.2. Diagramme de cas d’utilisation « Créer un compte » : ------------------------------- 30

3.3. Diagramme de cas d’utilisation « Ajouter une consigne» :--------------------------- 31

4. Diagramme de classe : --------------------------------------------------------------------- 31

5. Diagramme de séquence : ----------------------------------------------------------------- 33

5.1. Diagramme de séquence « Recherche » :--------------------------------------------- 34

 5.2. Diagramme de séquence « Modifier un uproc » : ------------------------------------ 34

6. Conclusion : -------------------------------------------------------------------------------- 36

Chapitre IV : Etude technique : ------------------------------------------------------------------- 37

1. Introduction : ------------------------------------------------------------------------------- 37

2. Les technologies adoptées : --------------------------------------------------------------- 37

2.1. Back-End : ------------------------------------------------------------------------------ 37

2.2. Front-End : ----------------------------------------------------------------------------- 37

3. Serveur web : ------------------------------------------------------------------------------- 39

3.1. Apache : ---------------------------------------------------------------------------------- 39

4. BDD : ---------------------------------------------------------------------------------------- 39

4.1. Laragon : ------------------------------------------------------------------------------- 39

5. Interfaces graphiques : --------------------------------------------------------------------- 40

5.1. Partie utilisateur : ---------------------------------------------------------------------- 40

2.3. Partie d’administrateur normale : ----------------------------------------------------- 42

2.4. Partie administrateur supérieure : ----------------------------------------------------- 59

3. Conclusion : -------------------------------------------------------------------------------- 65

Conclusion générale :---------------------------------------------------------------------------- 66

 LISTE DES TABLEAUX

Tableau 1: Identification des acteurs................................................................................................................. 23

Tableau 2: Les exigences non fonctionnelles ................................................................................................. 25

Tableau 3 : Description des classes.................................................................................................................... 33

 Liste des figures
Figure 1: Logo FinanceCom .................................................................................................................................. 16

Figure 2: Hiérarchies du holding FinanceCom ............................................................................................... 17

Figure 3: Logo BANK OF AFRICA ........................................................................................................................ 17

Figure 4: Logo Eurafric Information ................................................................................................................... 18

Figure 5: Organigramme EAI ................................................................................................................................ 19

Figure 6: Cycle en V ................................................................................................................................................. 27

Figure 7: LOGO UML ............................................................................................................................................... 28

Figure 8: Diagramme de cas d'utilisation générale...................................................................................... 29

Figure 9 : Diagramme de cas d'utilisation "Créer un compte"................................................................. 30

Figure 10: Diagramme de cas d'utilisation "Ajouter une consigne" ...................................................... 31

Figure 11 : Diagramme de classe........................................................................................................................ 32

Figure 12 : Diagramme de séquence "Recherche" ....................................................................................... 34

Figure 13 : Diagramme de séquence "Modifier un uproc" ....................................................................... 35

Figure 14 : LOGO LARAVEL ................................................................................................................................... 37

Figure 15 : Logo d'HTML5 ..................................................................................................................................... 37

Figure 16 : Logo de CSS ......................................................................................................................................... 38

Figure 17 : Logo Bootstrap ................................................................................................................................... 38

Figure 18 : Logo de JavaScript ............................................................................................................................. 38

Figure 19 : Logo d'Ajax ........................................................................................................................................... 38

Figure 20 : Logo de JQuery ................................................................................................................................... 39

Figure 21 : Logo d'Apache .................................................................................................................................... 39

Figure 22 : Logo de Laragon ................................................................................................................................ 39

Figure 23 : Page d'authentification .................................................................................................................... 40

Figure 24 : Page d'accueil ...................................................................................................................................... 41

Figure 25 : Page de recherche ............................................................................................................................. 41

Figure 26 : Page des consignes ........................................................................................................................... 42

Figure 27 : Ajouter une session ........................................................................................................................... 43

Figure 28 : Erreur d'ajout de session ................................................................................................................. 43

Figure 29 : Ajout d'une session avec succès ................................................................................................... 44

Figure 30 : Modifier session 1 .............................................................................................................................. 44

Figure 31 : Modifier session 2 .............................................................................................................................. 45

Figure 32 : Modifier session 3 .............................................................................................................................. 45

Figure 33 : Erreur de la modification de la session ...................................................................................... 46

Figure 34 : Modification de la session effectuée avec succès .................................................................. 46

Figure 35 : Supprimer une session 1 ................................................................................................................. 47

Figure 36 : Supprimer une session 2 ................................................................................................................. 47

Figure 37 : Alerte de suppression de la session ............................................................................................ 48

Figure 38: Suppression de la session est effectuée avec succès ............................................................. 48

Figure 39 : Ajouter une uproc .............................................................................................................................. 49

Figure 40 : Erreur lors de l'ajout d'une uproc................................................................................................. 49

Figure 41: L’ajout d’uproc est effectuée avec succès .................................................................................. 50

Figure 42 : modifier une uproc 1 ........................................................................................................................ 50

Figure 43 : Modifier une uproc 2 ........................................................................................................................ 51

Figure 44 : Modifier une uproc 3 ........................................................................................................................ 51

Figure 45 : Erreur de la modification de l'uproc............................................................................................ 52

Figure 46 : Modification de l'uproc a été effectuée avec succès ............................................................ 52

Figure 47 : Supprimer une uproc 1 .................................................................................................................... 53

Figure 48 : Supprimer une uprocs 2 .................................................................................................................. 53

Figure 49 : Alerte de suppression d’uproc ...................................................................................................... 54

Figure 50 : Suppression d’uproc effectuée avec succès ............................................................................. 54

Figure 51 : Ajouter une consigne ....................................................................................................................... 55

Figure 52 : L'ajout de la consigne effectuée avec succès .......................................................................... 55

Figure 53 : Modifier une consigne 1.................................................................................................................. 56

Figure 54 : Modifier une consigne 2.................................................................................................................. 56

Figure 55 : Modification de la consigne effectuée avec succès .............................................................. 57

Figure 56 : Supprimer une consigne 1 .............................................................................................................. 57

Figure 57 : Supprimer une consigne 2 .............................................................................................................. 58

Figure 58 : Alerte de suppression de la consigne ......................................................................................... 58

Figure 59 : Suppression effectuée avec succès.............................................................................................. 59

Figure 60 : créer un compte ................................................................................................................................. 59

Figure 61 : Ajouter une équipe ............................................................................................................................ 60

Figure 62 : Erreur lors de l'ajout d'équipe ....................................................................................................... 60

Figure 63 : L'ajout d'équipe est effectué avec succès ................................................................................. 61

Figure 64 : Modifier une équipe 1 ...................................................................................................................... 61

Figure 65 : Modifier équipe 2............................................................................................................................... 62

Figure 66 : Erreur lors de la modification d'équipe ...................................................................................... 62

Figure 67 : Modification d'équipe effectuée avec succès .......................................................................... 63

Figure 68 : Supprimer une équipe...................................................................................................................... 63

Figure 69 : Alerte de suppression d'équipe .................................................................................................... 64

Figure 70 : Suppression d'équipe effectuée avec succès ........................................................................... 64

Figure 71 : Créer un compte admin ................................................................................................................... 65

 Liste des acronymes

ABRÉVIATION DÉSIGNATION

EAI Eurafric Information

Ecole Supérieure en Ingénierie de

l’Information, Télécommunication,
ESTEM
Management & Génie Civil.

UML Unified Modeling Language

HTML 5 HyperText Markup Language 5

CSS 3 Cascading Style Sheets

AJAX Asynchronous JavaScript and XML

MVC Model-View-Controller
 Introduction générale

Personne ne peut plus douter que l’informatique est une révolution fondamentale et

Innovante qui a touché considérablement la vie humaine durant le dernier siècle. En effet, loin
d’être un phénomène effervescent, ou une tendance passagère, l’informatique vient d’être

exploitée dans tous les aspects de la vie. Aucun domaine n’est resté à l’abri de cette politique
qui facilite les tâches aussi bien pour l’entreprise que pour le personnel.

Chaque banque a pour objectif principal de garantir l’efficacité de ses traitements, en

effet, il ne serait pas acceptable qu’un dysfonctionnement, ou un blocage gêne le bon

déroulement de son travail. Eurafric Information, consiste en l’analyse, la conception et le

développement d’une application web, afin de faciliter à l’administrateur de créer / modifier /
supprimer toutes les sessions / uprocs / consignes, ainsi que la création des comptes pour les
utilisateurs, facilité aussi à l’administrateur supérieur de créer / modifier / supprimer les équipes,

ainsi que la création des comptes admin, et permettra à l’utilisateur normal (pilote) de connaître
les consignes à suivre pour chaque uproc incidenté.

C’est dans ce cadre que s’inscrit mon projet de fin d’études, qui est déroulé au sein d’Eurafric

Information, dans une durée de 16 semaines, et afin de présenter mon travail de la manière la

plus exhaustive possible ; ce rapport est scindé en cinq chapitres. Dans le premier chapitre je
présente le contexte général du projet adoptée, le deuxième chapitre je présente le cadre

général et la conduite du projet. Je consacre le troisième chapitre fait objet d’une étude
fonctionnelle et non fonctionnelle des besoins, le quatrième est dédié à la conception détaillée

de ma solution, le dernier chapitre expose l’environnement du développement ainsi que la

réalisation de cette solution, et en fin une conclusion synthétise le travail réalisé et expose des

perspectives d'amélioration.
 CHAPITRE I : Contexte général du projet :

1. Introduction

Ce chapitre a pour but de présenter le contexte général du projet de fin d’études. D’abord,

je présenterai EAI, l’organisme où s’est déroulé le PFE, en parcourant son historique, ses chiffres
clé, les métiers et services qu’elle offre, ses partenaires et ses clients. Ensuite, je présenterai le

contexte général du projet et son contexte fonctionnel. Enfin, je décrirai la méthodologie

adoptée pour mener le projet et sa planification.

2. Présentation de l’organisme d’accueil : / Environnement de l’entreprise

2.1. Présentation du Groupe FINANCECOM :

FinanceCom, détenu par son fondateur et Président M. Othman

Benjelloun, est un groupe financier de premier plan, né d’une réussite qui

démarre au Maroc et qui résulte des efforts de 5 générations

d’entrepreneurs et de philanthropes.

FinanceCom intervient dans divers secteurs d’activités à fort Figure 1: Logo FinanceCom

potentiel de croissance regroupant : Banque, Assurance, Gestion d’Actifs,

Technologies, Media et Télécommunications.
 Figure 2: Hiérarchies du holding FinanceCom

2.2. Présentation de BANK OF AFRICA :

BANK OF AFRICA (anciennement BMCE,

Banque marocaine du Commerce extérieur) est

une société anonyme fondée en 1959 en tant

que banque publique qui devait, en plus de son

activité bancaire classique, contribuer au

Figure 3: Logo BANK OF AFRICA
développement du commerce extérieur du
Maroc, elle fut la première banque à être privatisée en 1995 en devenant filiale du groupe
FinanceCom.

2.3. Présentation de la société Eurafric-Information :

EURAFRIC INFORMATION (EAI) est une filiale IT du groupe

BANK OF AFRICA créé en Octobre 2008, elle gère le Système

d’Information et des services clés en main de + 15 grands

partenaires du Groupe FinanceCom exerçant des métiers divers

: Banque, Assurance, Finance, Technologies, Crédits à la

consommation et bien d’autres.

Figure 4: Logo Eurafric Information
Une étape décisive dans la mise en œuvre d’une stratégie
résolue du groupe sur le marché des nouvelles technologies de l’information avec la naissance

d’Eurafric Information.

Une nouvelle vision qui vient renforcer la synergie du Groupe FinanceCom avec la création

d’Eurafric Information, un partenariat technologique entre BANK OF AFRICA, BMCE Group, RMA
et le groupe Crédit mutuel Alliance Fédérale pour la France représentée par sa filiale

technologique Euro-Information, une mutualisation maximum des moyens humains et des outils
pour optimiser les coûts et faciliter le développement des activités Banque et Assurance.

EAI regroupe actuellement plus de 350 ingénieurs de haut niveau lauréats de grandes écoles
marocaines et internationales, dotés d’expertises pointues dans plusieurs domaines :

Développement, Réseaux & Télécoms, Système et Bases de Données, Sécurité Informatique,

Business Intelligence, Digital… Un capital humain qui constitue l’ossature et les forces vives de

notre Groupe.

EAI se positionne actuellement, après d’importantes réalisations, en tant que Centre de

Services Informatiques Partagés multi-clients, en proposant des services professionnels destinés

aux filiales partenaires du Groupe. Grâce à un catalogue de services compétitifs et innovants, EAI
propose des services mutualisés et optimisés adaptés aux besoins de ses partenaires. EAI

s’appuie sur une plateforme Technologique Innovante, un Data Center Tier 3+ hautement
sécurisé, un site de secours, et sur l'expertise de ses nombreux partenaires technologiques

reconnus.

2.4. Organigramme d’Eurafric-Information :

Figure 5: Organigramme EAI

3. Conclusion :

Le présent chapitre avait comme objectif de présenter la société Eurafric Information en termes
d’activités et d’organisation.

Dans le prochain chapitre, je décrirai le cadre générale du projet.

 CHAPITRE II : CADRE GÉNÉRAL DU PROJET

1. Introduction

Le présent chapitre a pour objet de donner une vision globale du projet, sa problématique
ainsi que son objectif, entamera par la suite la démarche adoptée pour sa conduite.

2. Définition du projet :

2.1. Présentation du contexte du projet :

Le présent projet est réalisé dans le cadre de projet de fin d'études pour l'obtention du

diplôme « Licence Professionnelle en Génie Logiciel » au sein de l’Ecole Supérieure en Ingénierie

de l’Information, Télécommunication, Management & Génie Civil (ESTEM) de Casablanca, et qu’il

a été réalisé dans la société Eurafric information durant la période s'étalant du 22 Février
jusqu'à 10 Juin 2022.

Au cours de ce stage, Eurafric-information m’a confié la conception et la réalisation d’une

nouvelle application web ‘’Gestion des suivies‘’. Cette application permettra aux personnes en

charge du plan de pilotage des traitements « Back-Office » de la banque, d’optimiser leurs

performances afin de capitaliser sur un enrichissement continu de la base de connaissance des

incidents.

Les pilotes des traitements seront assistés d’une part pour dérouler les consignes qui

s’appliquent lors d’un incident donné et d’autre part pour alerter automatiquement les astreintes
techniques et fonctionnelles.

De plus une interface dédiée aux administrateurs permettant la mise à jour des données
(sessions / uprocs / consignes) grâce aux fonctionnalités : créer / modifier / supprimer, ainsi la

création des comptes pour les utilisateurs. Et autre interface dédiée aux administrateurs
supérieures permettant la mise à jour des équipes grâce aux fonctionnalités : créer / modifier /

supprimer, ainsi la création des comptes pour les administrateurs.

 2.2. Problématique :
Parmi les principales activités du département Production, la suivie des sessions et uprocs. Le
souci principal dans ce stade se réduit essentiellement à la puissance de résoudre toutes les

problèmes qui arrivent pour un nouveau recruteur.

Lorsqu’un nouveau recruteur (pilote) commence à travailler tout seul (après une formation), il

arrive des fois où il tombe dans des problèmes dont il ne connaît pas la solution ou bien la
consigne qu’il doit suivre.

Pour résoudre ces problèmes. Ceci nécessite alors la communication continue entre chaque
nouveau recruteur (pilote) et son responsable ou ses collègues, donc il doit les appeler pour les

questionner ce qu’il doit faire. Parfois, il les appelait dans des moments inappropriés, et ça suivi
de ne pas répondre correctement.

2.3. Objectif du projet :

L’objectif de mon projet de fin d’études est de concevoir et implémenter une application web,
qui sera une solution conçue pour éviter tous ces problèmes mentionné ci-dessus. Alors, cette

application permettra à l’administrateur de créer/ modifier / supprimer toutes les sessions /

uprocs / consignes, ainsi la création des comptes pour les utilisateurs, et permettra à

l’administrateur supérieures de créer/ modifier / supprimer toutes les équipes, ainsi la création
des comptes pour les administrateurs, et permettra aux pilotes de connaître les consignes à

suivre pour chaque uproc incidenté.

3. Planning du projet :

Initialisé dès le début du stage, le planning ci-dessous contient les tâches que j’ai été amené
à traiter et d’où je découle une vue du diagramme de Gantt illustrant le déroulement du projet.

Il s’agit d’un planning qui a fait l’objet d’un réajustement tout au long du stage.

Pour assurer le meilleur déroulement possible du projet, j’ai opté pour le choix du diagramme

de GANTT afin d’évaluer la durée du projet et les tâches respectivement tout en spécifiant les
tâches précises de chaque phase.

Dans ce qui suit, je présente une description des phases de notre champ d’intervention :
 Etude de l'existant : Il concerne la manipulation des données pour les comprendre.

Identification des problèmes et spécification des besoins : Dans cette phase j’analyse

la problématique du projet, c’est à dire comprendre les motivations et objectifs de ce projet.

Choix techniques et division de projet : Dans cette phase je discute les outils et

technologie à employer ainsi que l’architecture du projet.

Formation : Il s’agit de suivre une formation de quelques jours dans le but d’approfondir

les connaissances sur les technologies à employées dans le projet.

Conception de l’architecture des modules : Conception et réalisation des diagrammes

UML.

Elaboration des tests unitaires et d’intégration : Conception des méthodes de test.

Développement : Rédaction du code.

Exécution des tests : Réalisation des tests pour préparer la solution au déploiement.

Déploiement.

La figure ci-dessous du « Diagramme de GANTT » présente le planning qui était mon fil conducteur
pour réaliser le projet.

4. Conclusion :

Dans ce chapitre, j’ai déterminé en premier lieu le contexte du projet, dans un second lieu,
j’ai spécifié la problématique, ensuite j’ai définit l’objectif du projet, et en dernier lieu, j’ai illustré

le déroulement du travail avec le planning.

 Chapitre III : Etude fonctionnelle du projet :

1. Introduction :

Afin de garantir la réussite et l'efficacité de mon projet, il faut à ce stade du travail définir

avec précision la bordure de la solution à développer. Je décris donc dans ce chapitre la phase
de l’étude fonctionnelle du projet. Dans un premier temps, je commence par une définition des

besoins fonctionnels de la solution à créer.

2. Etude Fonctionnelle :

2.1. Etude des besoins fonctionnels :

2.1.1. Identification des acteurs du système :

Un acteur représente l’abstraction d’un rôle joué par des entités externes (utilisateur,
dispositif matériel ou autre système) qui interagissent directement avec le système étudié.

Dans notre solution, nous identifions 3 types d’acteurs : Administrateur supérieure,

Administrateur normale et le pilote (utilisateur normale).

Le tableau suivant (Cf. Tableau 1) présente l’identification des acteurs.

C’est l’acteur qui joue le rôle de la gestion des équipes, et

Administrateur supérieure qui se charge aussi de la gestion des comptes admin.

C’est l’acteur qui joue le rôle de la gestion des sessions &

Administrateur normale uprocs & consignes, et qui se charge aussi de la gestion des
comptes admin.

il s’agit d’un employé de l’entreprise qui va consulter les

Pilote
consignes des uprocs.

Tableau 1: Identification des acteurs

 2.1.2. Spécification des besoins fonctionnels :
Les besoins fonctionnels représentent les attentes de chaque acteur de la future plate-
forme. Toute solution conceptuelle doit satisfaire, préalablement, à des besoins fonctionnels afin

de délimiter le périmètre fonctionnel de l‘application et surveiller la traçabilité des besoins lors

de la phase de développement.

L’application doit permettre au pilote de :

> Voir des informations sur l’application
> Consulter les consignes.

L’application doit permettre à l’administrateur normal:

> Voir des informations sur l’application.

> La gestion des sessions (Ajouter / Modifier /Supprimer).
> La gestion des uprocs (Ajouter / Modifier /Supprimer).
> La gestion des consignes (Ajouter / Modifier /Supprimer).
> La Création des comptes pour les pilotes.

L’application doit permettre à l’administrateur supérieur :

> Voir des informations sur l’application.

> La gestion des équipes (Ajouter / Modifier /Supprimer).
> La Création des comptes pour les administrateurs normaux.
2.2. Spécification des besoins non fonctionnels :
Les spécifications non-fonctionnelles sont des exigences qui ne concernent pas
directement les services spécifiques fournis par le système. Ils peuvent concerner des propriétés

et des contraintes remplies par le système dans son intégralité.

Les principaux besoins non fonctionnels de notre application sont résumés dans le tableau

suivant :
 Exigences Description

L’application doit fonctionner sans défaillance et exécuter

La fiabilité
les fonctions attendues avec la précision requise.

L’application doit exécuter les fonctions demandées dans

La rapidité
un temps raisonnable.

L’application doit être facile à utiliser avec une interface

La convivialité
simple et attractive.

Lorsqu’un utilisateur désire utiliser l’application, cette

La disponibilité
dernière doit être disponible.

Facilité avec laquelle on peut localiser et corriger les

La Maintenabilité
pannes.

Elle doit être possible d’étendre le système.

L’évolutivité

L’application doit manipuler à terme une base de

données qui peut s’avérer importante, il est important de

La sécurité sécuriser l’accès à cette dernière ainsi que les données

manipulées, d’autant plus que cette application est

accessible depuis le réseau, donc elle doit être sécurisé à

travers la gestion des droits d’accès.

L’accès à la base de données doit être souple et rapide.

Contraintes techniques
L’application doit être toujours fonctionnelle.

Tableau 2: Les exigences non fonctionnelles

 3. Organisation et planification du projet :

3.1. Études des processus de développement :

Bien gérer ses projets, c'est juste une question d'organisation. Planification des tâches et

des activités, suivi des échéances, des ressources affectées, autant d'éléments basiques pour une
démarche de développement d’un projet.

Tout projet informatique requiert un processus de développement bien défini pour assurer
son succès. En fait, le choix d’un processus de développement pour mon projet était crucial dans

le sens où il affectera aussi bien la planification que les spécifications fonctionnelles et

techniques.

Au terme de cette étude, il s’avère que le processus de développement le plus adéquat à

une méthodologie V. Ce modèle implique toutes les étapes du cycle de vie d’un projet :

conception, réalisation, validation.

3.2. Processus de développement en V :

Le cycle en V en gestion de projet découle du modèle en cascade théorisé dans les années
1970, qui permet de représenter des processus de développement de manière linéaire et en

phases successives.

Ce mode de gestion de projet a été développé dans les années 1980 et appliqué au champ

des projets industriels, puis étendu aux projets informatiques. Il a été remis en cause à partir du
début des années 2000, sous l’effet de l’accélération des changements technologiques,
favorisant davantage les méthodes dites « agiles ».

La lettre V fait référence à la vision schématique de ce cycle, qui prend la forme d’un V : une
phase descendante suivie d’une phase ascendante. Le cycle en V associe à chaque phase de

réalisation une phase de validation, comme l’illustre le schéma ci-dessous :

 Figure 6: Cycle en V

4. Conclusion :

Dans ce chapitre, j’ai présenté l’analyse fonctionnelle et non fonctionnelle, ainsi que

l’organisation et planification de mon projet, phase dans laquelle, j’ai défini les spécifications
dans le but d'élaborer l’architecture globale du projet.
 Chapitre III : Etude conceptuelle :

1. Introduction :

Pour assurer les objectifs attendus, il est essentiel que je parviens à une vue claire des

différents besoins escomptés de mon projet. Au cours de cette partie, je vais dégager les
fonctionnalités attendues en définissant les différents diagrammes de cas d’utilisation, de classe

et de séquence qui expliquent ces cas.

2. Description du langage UML :

UML est un langage formel et normalisé, son

indépendance par rapport aux langages de programmation,

aux domaines de l’application et aux processus, son caractère
polyvalent et sa souplesse ont fait de lui un langage universel.
Il est essentiellement un support de communication, qui
facilite la représentation et la compréhension de solution

objet. Sa notation graphique permet d’exprimer visuellement

une solution objet, ce qui facilite la comparaison et
Figure 7: LOGO UML
l’évaluation des solutions.

3. Digrammes de cas d’utilisation :

Les diagrammes de cas d'utilisation (DCU) sont des diagrammes UML utilisés pour une
représentation du comportement fonctionnel d'un système logiciel.

On définit donc les diagrammes de cas d’utilisation :

3.1. Diagramme de cas d’utilisation en général :

Figure 8: Diagramme de cas d'utilisation générale

3.2. Diagramme de cas d’utilisation « Créer un compte » :

Figure 9 : Diagramme de cas d'utilisation "Créer un compte"

 3.3. Diagramme de cas d’utilisation « Ajouter une consigne» :

Figure 10: Diagramme de cas d'utilisation "Ajouter une consigne"

4. Diagramme de classe :

Les diagrammes de classes sont l'un des types de diagrammes UML les plus utiles, car ils

décrivent clairement la structure d’un système particulier en modélisant ses classes, ses attributs,
ses opérations et les relations entre ses objets.

Les figures suivantes (Cf. Figure 11) représentent le diagramme de classe de ma solution.
 Figure 11 : Diagramme de classe

Le tableau suivant (Cf. Tableau 3) présente une description sur les différentes classes :
 Nom de la classe Description

Cette table représente les utilisateurs de

l’application qui sont soit : un pilote soit un
Users
administrateur ou un administrateur
supérieure.

Equipes C’est la table qui définit les équipes gérées par

l’administrateur supérieure.

Sessions C’est la table qui définit les sessions gérées

par l’administrateur.

Uprocs C’est la table qui définit les uprocs des

sessions gérées par l’administrateur.

Consignes C’est la table qui définit les consignes des

uprocs incidentés gérées par l’administrateur.

Tableau 3 : Description des classes

5. Diagramme de séquence :

Les diagrammes de séquence permettent de représenter des collaborations entre objets

selon un point de vue temporel, mettent l’accent sur la chronologie des envois de messages. Ils

sont constitués d’acteurs, d’objets (instances) et de messages (cas d’utilisation, appels

d’opération).

Le principe de base des diagrammes de séquence est la représentation graphique de la

chronologie des échanges de messages avec le système ou au sein du système.

Dans cette section, nous allons présenter deux diagrammes de séquence, chacun représentant

l’un des scénarios.

5.1. Diagramme de séquence « Recherche » :

Figure 12 : Diagramme de séquence "Recherche"

5.2. Diagramme de séquence « Modifier un uproc » :

Figure 13 : Diagramme de séquence "Modifier un uproc"
 6. Conclusion :

Dans ce chapitre d’analyse et conception j’ai présenté les différents diagrammes UML à savoir
les diagrammes des cas d’utilisation, le diagramme de classe et les diagrammes de séquence. Le
chapitre suivant sera consacré à la phase de mise en œuvre de l’application.
 Chapitre IV : Etude technique :

1. Introduction :

Ce chapitre présentera une étude des moyens technologiques dont je dois disposer, afin de
présenter les différentes interfaces de l’application réalisée.

2. Les technologies adoptées :

2.1. Back-End :
2.2.1. Laravel :
Laravel est une plate-forme PHP open source créée par

Taylor Otwell qui est conçue pour rendre les applications Web
plus faciles et plus rapides. Il suit un modèle de configuration

Model View Controller (MVC). Laravel réutilise les composants

actuels de divers frameworks qui aident à créer une application

Web. Il a été initialement publié en 2009 et a eu plusieurs mises

à jour au fil des ans. Dans mon projet, j’ai travaillé avec

version 8.
Figure 14 : LOGO LARAVEL
2.2. Front-End :
2.2.2. HTML5 :
HTML5 (HyperText Markup Language 5) est la dernière révision

majeure du HTML, il transforme le HTML qui était un simple balisage pour

structurer des documents en une plate-forme complète de

développement d'applications. Parmi ses autres caractéristiques, HTML5

comporte de nouveaux éléments et des API JavaScript pour améliorer le

stockage, le multimédia et l'accès au matériel. Figure 15 : Logo d'HTML5

 2.2.3. CSS3 :
CSS (Cascading Style Sheets) est l'un des langages principaux
du Web ouvert et a été standardisé par le W3C. Ce standard évolue

sous forme de niveaux (levels), CSS1 est désormais considéré comme

obsolète, CSS2.1 correspond à la recommandation et CSS3, qui est

découpé en modules plus petits, est en voie de standardisation.

Figure 16 : Logo de CSS

2.2.4. Bootstrap :
Bootstrap est une collection d'outils utiles à la création du design
(graphisme, animation et interactions avec la page dans le navigateur,

etc.) de sites et d'applications web. C'est un ensemble qui contient des

codes HTML et CSS, des formulaires, boutons, outils de navigation et

autres éléments interactifs, ainsi que des extensions JavaScript en option.

Figure 17 : Logo Bootstrap

2.2.5. JavaScript :
JavaScript est un langage de programmation des scripts
principalement employé dans les pages web interactives et à ce titre est une

partie essentielle des applications web. Avec les langages HTML et CSS,
JavaScript est au cœur des langages utilisés par les développeurs web3. Une

grande majorité des sites web l'utilisent4, et la majorité des navigateurs

Figure 18 : Logo de JavaScript
web disposent d'un moteur JavaScript5 pour l'interpréter.

2.2.6. Ajax :
AJAX signifie Asynchronous JavaScript and XML. L’AJAX n’est

pas un langage de programmation mais correspond plutôt à un

ensemble de techniques utilisant des technologies diverses pour

envoyer et récupérer des données vers et depuis un serveur de façon

asynchrone, c’est-à-dire sans avoir à recharger la page.
Figure 19 : Logo d'Ajax
 2.2.7. JQuery :
JQuery est une bibliothèque JavaScript rapide, petite et riche
en fonctionnalités. Il rend les choses comme la traversée et la

manipulation de documents HTML, la gestion des événements,

l'animation et Ajax beaucoup plus simples avec une API facile à

utiliser qui fonctionne sur une multitude de navigateurs. Avec une

combinaison de polyvalence et d'extensibilité, jQuery a changé la

façon dont des millions de personnes écrivent JavaScript. Figure 20 : Logo de JQuery

3. Serveur web :

3.1. Apache :

Apache est un logiciel de serveur web gratuit et open-

source qui alimente environ 46% des sites web à travers le
monde. Le nom officiel est Serveur Apache HTTP et il est
maintenu et développé par Apache Software Foundation.
Il permet aux propriétaires de sites web de servir du contenu
sur le web – d’où le nom « serveur web » - . C’est l’un des
serveurs web les plus anciens et les plus fiables avec une
Figure 21 : Logo d'Apache
première version sortie il y a plus de 20 ans, en 1995.

4. BDD :

4.1. Laragon :
Laragon est un environnement de développement
universel portable, isolé, rapide et puissant pour PHP, Node.js,

Python, Java, Go, Ruby. Il est rapide, léger, facile à utiliser et

facile à étendre, il est idéal pour la création et la gestion

d’applications Web modernes, et axé sur la performance -

conçu autour de la stabilité, de la simplicité, de la flexibilité et
Figure 22 : Logo de Laragon
de la liberté, il est très léger et restera aussi maigre que
possible. Le binaire de base lui-même est inférieur à 2 Mo et utilise moins de 4 Mo de RAM lors

de l’exécution, il n’utilise pas les services Windows. Il a sa propre orchestration de services qui
gère les services de manière asynchrone et non bloquante afin que vous trouviez que les choses
fonctionnent rapidement et en douceur avec Laragon.

5. Interfaces graphiques :

5.1. Partie utilisateur :

2.2.8. Authentification :
La réalisation commence par le développement de la page d’authentification qui contient trois
champs : E-mail, Mot de passe et le logo de l’entreprise « Eurafric Information ».

Figure 23 : Page d'authentification

2.2.9. Page d’accueil :

Après l’authentification, l’application va être ouverte sur la page d’accueil qui contient le nom de
l’utilisateur authentifié et les informations sur cette application, ainsi un menu.
 Figure 24 : Page d'accueil

2.2.10.Page de recherche :
Cette page contient toujours le même header et menu que la page d’accueil, ainsi les critères de
recherche.

Figure 25 : Page de recherche

 2.2.11.Page des consignes :
Les résultats de la recherche s’affichent dans la page des consignes.

Figure 26 : Page des consignes

2.3. Partie d’administrateur normale :

Dans cette partie, les pages d’authentification, d’accueil, de recherche et des consignes sont
identique qu’a la partie d’utilisateur (sauf le menu qui est différent).

2.3.1. Gestion des sessions :

2.3.1.1. Ajouter :
L’admin est obligé de sélectionner premièrement l’équipe, puis saisir la valeur de la session.
 Figure 27 : Ajouter une session

Si l’admin saisit une session qui existe déjà dans la BDD, un message d’erreur s’affiche comme

suite :

Figure 28 : Erreur d'ajout de session

Sinon, un message de réussite s’affiche comme suite :

 Figure 29 : Ajout d'une session avec succès

2.3.1.2. Modifier :
Pour que l’admin puisse modifier une session, il est obligé de choisir tout d’abord l’équipe.

Figure 30 : Modifier session 1

Après, un tableau s’affichera contient toutes les sessions de cette équipe.

 Figure 31 : Modifier session 2

Après qu’il clique sur le bouton ‘Modifier’, l’interface ci-dessous s’affichera. Ce dernier contient
une zone de texte non modifiable / cliquable contient l’ancienne valeur de la session, et autre

zone de texte dont l’admin va saisir la nouvelle valeur de cette session.

Figure 32 : Modifier session 3

S’il a saisi une session qui existe déjà dans la BDD, un message d’erreur s’affiche comme suite :
 Figure 33 : Erreur de la modification de la session

Sinon, un message de réussite s’affiche.

Figure 34 : Modification de la session effectuée avec succès

2.3.1.3. Supprimer :
Pour que l’admin puisse supprimer une session, il est obligé de choisir tout d’abord l’équipe.
 Figure 35 : Supprimer une session 1

Après, un tableau s’affichera contient toutes les sessions de cette équipe.

Figure 36 : Supprimer une session 2

Après qu’il clique sur le bouton ‘Supprimer’, une alerte s’affichera.

 Figure 37 : Alerte de suppression de la session

S’il a annulé, la session ne va pas être supprimée.

S’il a cliqué sur Ok, la session va être supprimée, et un message de réussite affichera comme
suite :

N.B : Si une session est supprimée, toutes les uprocs de cette session seront aussi supprimées.

Figure 38: Suppression de la session est effectuée avec succès

 2.3.2. Gestion des uprocs :
2.3.2.1. Ajouter :
L’admin est obligé de sélectionner premièrement l’équipe, puis la session et après saisir la
valeur de l’uproc.

Figure 39 : Ajouter une uproc

Si l’admin saisit une uproc qui existe déjà dans la BDD, un message d’erreur s’affiche comme
suite :

Figure 40 : Erreur lors de l'ajout d'une uproc

Sinon, un message de réussite s’affiche comme suite :

Figure 41: L’ajout d’uproc est effectuée avec succès

2.3.2.2. Modifier :
Pour que l’admin puisse modifier une uproc, il est obligé de choisir tout d’abord l’équipe, puis
la session.

Figure 42 : modifier une uproc 1

Après, un tableau s’affichera contient toutes les uprocs de la session qu’il a sélectionné.
 Figure 43 : Modifier une uproc 2

Après qu’il clique sur le bouton ‘Modifier’, l’interface ci-dessous s’affichera. Ce dernier contient
une zone de texte non modifiable / cliquable contient l’ancienne valeur de l’uproc, et autre zone

de texte dont l’admin va saisir la nouvelle valeur d’uproc.

Figure 44 : Modifier une uproc 3

S’il a saisi une uproc qui existe déjà dans la BDD, un message d’erreur s’affiche comme suite :
 Figure 45 : Erreur de la modification de l'uproc

Sinon, un message de réussite s’affiche.

Figure 46 : Modification de l'uproc a été effectuée avec succès

2.3.2.3. Supprimer :
Pour que l’admin puisse supprimer une session, il est obligé de choisir tout d’abord l’équipe,
puis la session.
 Figure 47 : Supprimer une uproc 1

Après, un tableau s’affichera contient toutes les uprocs de la session qu’il a sélectionné.

Figure 48 : Supprimer une uprocs 2

Après qu’il clique sur le bouton ‘Supprimer’, une alerte s’affichera.

 Figure 49 : Alerte de suppression d’uproc

S’il a annulé, l’uproc ne va pas être supprimée.

S’il a cliqué sur Ok, l’uproc va être supprimée, et un message de réussite affichera comme

suite :

N.B : Si une uproc est supprimée, toutes les consignes de cet uprocs seront aussi supprimées.

Figure 50 : Suppression d’uproc effectuée avec succès

 5.2.3. Gestion des consignes :
5.2.3.1. Ajouter :
L’admin est obligé de sélectionner l’équipe, la session, l’uproc, puis il sélectionne le type de
problème, et en fin il saisit la consigne.

Figure 51 : Ajouter une consigne

Après qu’il remplit le formulaire ci-dessus, un message de réussite s’affiche comme suit :

Figure 52 : L'ajout de la consigne effectuée avec succès

 5.2.3.2. Modifier :
Pour que l’admin puisse modifier une session, il doit sélectionner l’équipe, la session, l’uproc et
le type

Figure 53 : Modifier une consigne 1

Après, un tableau s’affichera contient la consigne approprié.

Figure 54 : Modifier une consigne 2

Après qu’il saisit la nouvelle consigne, un message de réussite s’affiche comme suite :
 Figure 55 : Modification de la consigne effectuée avec succès

5.2.3.3. Supprimer :
Pour que l’admin puisse modifier une session, il doit sélectionner l’équipe, la session et l’uproc

Figure 56 : Supprimer une consigne 1

Après, un tableau s’affichera contient les consignes approprié avec leurs type de problème.
 Figure 57 : Supprimer une consigne 2

Après qu’il clique sur le bouton ‘Supprimer’, affichera une alerte.

Figure 58 : Alerte de suppression de la consigne

S’il a annulé, la consigne ne va pas être supprimée.

S’il a cliqué sur Ok, la consigne va être supprimée, et un message de réussite affichera comme

suite :
 Figure 59 : Suppression effectuée avec succès

5.2.4. Créer un compte :

L’admin a le droit de créer seulement les comptes pour les utilisateurs.

Figure 60 : créer un compte

2.4. Partie administrateur supérieure :

2.4.1. Gestion des équipes :
2.4.1.1. Ajouter :
La figure ci-dessous, présente l’interface de l’ajout d’une nouvelle équipe.
 Figure 61 : Ajouter une équipe

Si l’admin supérieure a saisi un nom d’équipe existe déjà, un message d’erreur s’affiche comme
suite :

Figure 62 : Erreur lors de l'ajout d'équipe

Sinon, l’équipe va être créée avec succès.

 Figure 63 : L'ajout d'équipe est effectué avec succès

2.4.1.2. Modifier :
La page de modification des équipes, contient un tableau qui contient toutes les équipes

enregistrés dans la BDD.

Figure 64 : Modifier une équipe 1

Après la clique sur le bouton ‘Modifier’, l’interface ci-dessous s’affiche, contient l’ancienne valeur
d’équipe, et une zone de texte pour saisir la nouvelle valeur.
 Figure 65 : Modifier équipe 2

S’il a saisi une équipe qui existe déjà dans la BDD, un message d’erreur s’affiche comme suite :

Figure 66 : Erreur lors de la modification d'équipe

Sinon, un message de réussite s’affiche comme suite.

 Figure 67 : Modification d'équipe effectuée avec succès

2.4.1.3. Supprimer :
La figure ci-dessous présente l’interface de la suppression d’une équipe.

Figure 68 : Supprimer une équipe

Après qu’il clique sur le bouton ‘Supprimer’, affichera une alerte.

 Figure 69 : Alerte de suppression d'équipe

S’il a annulé, l’équipe ne va pas être supprimée.

S’il a cliqué sur Ok, l’équipe va être supprimée, et un message de réussite affichera comme

suite :

N.B : Si une équipe est supprimée, il va supprimer toutes les sessions de cette équipe.

Figure 70 : Suppression d'équipe effectuée avec succès

 5.3.2. Créer un compte :
L’admin a le droit de créer seulement les comptes pour les administrateurs normaux.

Figure 71 : Créer un compte admin

3. Conclusion :

Dans ce chapitre, j’ai présenté tout d’abord les technologies adoptées dans ce projet, puis j’ai
exposé le fruit de travail réalisé sous forme des prises d’écrans de l’application développé, en
expliquant les fonctionnalités de chaque écran.
 Conclusion générale :
Le projet de fin d’´études, effectué au sein de la société Eurafric Information, consistait à

développer une solution pour la gestion des suivies. Pour atteindre cet objectif, une étude de