This Better Be Worth It 1Nv 1

Ministère de l’Enseignement Supérieur et de la Recherche Scientifique
Université de Tunis
Institut Supérieur de Gestion
Rapport Projet de Fin d’Etude

Présenté en vue de l’obtention de la licence en informatique de Gestion
Application Web de gestion Du flux de travail

des congés
Présenté par :
Arif Iheb
Boussaidi Ayoub
Réalisé au sein de ETAP
Encadrant académique :El Ayech Hafedh

Encadrant Professionnel : Ksibi Mohamed
Année Universitaire 2021-2022

Remerciements
Nous consacrons cette partie à reconnaître les efforts de nos superviseurs et de notre
réseau.
Nous commençons par remercier notre institution académique et tous ses professeurs pour
leur suivi et leurs conseils constants.
pour leur suivi et leurs conseils constants.
Un remerciement spécial à notre superviseur académique et mentor Mr.Hafedh Elayech,
Ingénieur et professeur à l'Institut Supérieur de gestion (ISG).
Pour son leadership, ses efforts et ses conseils avisés qui ont guidé notre chemin.
notre chemin.
Ce stage nous a également donné l'opportunité de travailler au sein d'un organisme
professionnel accompagné et encadré par une équipe informatique compétente. Nous
tenons à transmettre
un remerciement particulier à notre superviseur professionnel Mr. Mohamed Ksibi,
Ingénieur et
développeur à ETAP, pour ses contrôles constants, ses conseils toujours valables et son
professionnalisme.
Dédicaces
Je dédicace mon travail avant tout à ma famille, à mes parents qui ont ont soutenu et aimé
inconditionnellement.
A ma mère , ma joie dans la solitude.
A mon père , mon soutien et mon conseiller.
A mes amis dali, iskander, aymen, ayoub, qui ont accompagné mon parcours par leurs rires
et leur soutien.
À mes amis et aux personnes qui n'ont jamais cessé de croire en moi.
Je n'aurais pas pu le faire sans toi.
Je suis très reconnaissant de vous avoir tous dans ma vie, pour vos encouragements et votre
motivation, je ne serais pas la personne que je suis aujourd'hui sans vous et le moins que je
puisse faire est de vous dédier ce travail.
vous dédier ce travail.
Iheb arif
Dédicaces
Je dédie mon travaille a ma famille, mes camarades, mes encadrent pour les soutenance
morales et techniques
Je veux remercie mon collègue Iheb.
Et comme le bien connue Snoop Dogg a dit : “I want to thank me for believing in me, I want
to thank me for doing all this hard work. I wanna thank me for having no days off. I wanna
thank me for never quitting”
Ayoub Boussaidi
Table des matière
Table des matières

Introduction Générale...........................................................................................................................1
Chapitre 1 : Etude préalable..................................................................................................................3
Introduction.......................................................................................................................................3
1 Présentation de l’organisme...........................................................................................................3
2 Etude de l’existant..........................................................................................................................4
2.1 Présentation de l’existant...................................................................................................4
2.2 Critique de l’existant.................................................................................................................5
2.3 Solution Proposée....................................................................................................................6
3 Méthodologie de travail.................................................................................................................8
3.1 Les différents types de méthodologie......................................................................................8
3.2 Approches Agiles VS Classiques................................................................................................8
3.3 Choix de la méthodologie Agile SCRUM...................................................................................9
3.4 Choix du langage de modélisation..........................................................................................11
4 Choix Techniques...........................................................................................................................12
4.1 Environnement de développement........................................................................................12
4.2 Langage Utilisé..................................................................................................................13
4.3 Architecture adoptée........................................................................................................15
Conclusion........................................................................................................................................17
Chapitre 2 : Analyse et spécification des besoins.................................................................................18
Introduction.....................................................................................................................................18
1 Sprint.............................................................................................................................................18
1.1 Définition................................................................................................................................18
1.2 Sprint particulier : Sprint 0......................................................................................................18
2 Analyse des besoins.......................................................................................................................19
2.1 Identification des acteurs.......................................................................................................19
2.2 Les Besoins fonctionnels.........................................................................................................19
2.3 Les Besoins non fonctionnels..................................................................................................20
3 Diagramme de cas d’utilisation global...........................................................................................20
4 diagramme de classe.....................................................................................................................22
5 backlog du produit.........................................................................................................................23
6 planification des sprints et des releases........................................................................................24
6.1 Planification des sprints..........................................................................................................24
Table des matière
6.2 Planification des releases.......................................................................................................25

Conclusion........................................................................................................................................26
Chapitre 3 : Release 1...........................................................................................................................27
Introduction.....................................................................................................................................27
1 Sprint 1..........................................................................................................................................28
1.1 Backlog du Sprint 1.................................................................................................................28
1.2 Conception du sprint 1...........................................................................................................29
1.3 Réalisation du sprint 1............................................................................................................34
2 Sprint 2..........................................................................................................................................42
2.1 backlog du Sprint 2.................................................................................................................42
2.2 Conception Du Sprint 2...........................................................................................................44
3.2 Réalisation..............................................................................................................................48
Conclusion........................................................................................................................................50
Chapitre 4 : Release 2...........................................................................................................................51
Introduction.....................................................................................................................................51
1 Sprint 3..........................................................................................................................................52
1.1 Backlog du Sprint 3.................................................................................................................52
1.2 Conception.............................................................................................................................53
1.3 Réalisation..............................................................................................................................57
Conclusion........................................................................................................................................66
Table des figures
Table des figures

Figure 1:Siege Mohamed V....................................................................................................................3
Figure 2: Organigramme d'ETAP.............................................................................................................4
Figure 3: Le fonctionnement général de la méthode Scrum................................................................10
Figure 4: logo lucidchart.......................................................................................................................12
Figure 5: logo de visual Studio code.....................................................................................................12
Figure 6: logo du XXAMP......................................................................................................................12
Figure 7: logo du POSTMAN.................................................................................................................13
Figure 8 : logo du GitHub......................................................................................................................13
Figure 9: logo du HTML5......................................................................................................................13
Figure 10: logo CSS3.............................................................................................................................14
Figure 11: logo JavaScript.....................................................................................................................14
Figure 12:logo de Bootstrap3...............................................................................................................14
Figure 13:Logo de Laravel.....................................................................................................................15
Figure 14 : MySQL................................................................................................................................15
Figure 15: Architecture MVC................................................................................................................16
Figure 16 : présentation des besoins fonctionnels...............................................................................20
Figure 17: Cas d'utilisation globale.......................................................................................................21
Figure 18: base de donnée fourni par l'ETAP........................................................................................22
Figure 19: Diagramme de classe globale.............................................................................................23
Figure 20: Planification des releases....................................................................................................25
Figure 21: Planification du Release 1....................................................................................................27
Figure 22: Cas d'utilisation Raffinée d'authentification........................................................................29
Figure 23: Diagramme d'activité d'authentification.............................................................................30
Figure 24:Diagramme de collaboration du cas d’utilisation « S'Authentifier».....................................30
Figure 25: Cas d'utilisation raffiné de consulter tableau de bord.........................................................31
Figure 26: Diagramme de séquence raffiné de consulter tableau de bord...........................................32
Figure 27: Cas d'utilisation raffiner du gérer les fiches personnels......................................................32
Figure 28: Diagramme de séquence de cherche un personnel.............................................................34
Figure 29: interface login......................................................................................................................34
Figure 30: si les champs sans vide........................................................................................................35
Figure 31: si les champ sont mal saisi...................................................................................................35
Figure 32: Consulter profile..................................................................................................................36
Figure 33: tableau de bord d'application web......................................................................................36
Figure 34: l'interface de gérer des personnels.....................................................................................37
Figure 35: Affichage d'un personnel.....................................................................................................37
Figure 36: Modifier d'un personnel......................................................................................................38
Figure 37: si le formulaire n'est pas changé.........................................................................................38
Figure 38: si le formulaire a été changé...............................................................................................39
Figure 39: l’alerte du suppression d'un personnel...............................................................................39
Figure 40 : La suppression d'un personnel...........................................................................................40
Figure 41: Formulaire d'ajout d'un personnel......................................................................................40
Figure 42:si le formulaire est mal saisi.................................................................................................41
Figure 43: si le formulaire est bien saisi...............................................................................................41
Table des figures
Figure 44: Cas d'utilisation raffiné de consulter les absences...............................................................44

Figure 45: diagramme de classe de consulter les absences..................................................................45
Figure 46 Diagramme de séquence pour cherche un absence.............................................................46
Figure 47: Cas d'utilisation de consulter la liste de pointage................................................................47
Figure 48: Diagramme de séquence Raffiné de Consulter la liste de pointage.....................................48
Figure 49: Interface des absences........................................................................................................49
Figure 50: Affichage d’une absence......................................................................................................49
Figure 51: Interface de liste de pointage..............................................................................................50
Figure 52:contenue de sprint 3............................................................................................................51
Figure 53 digramme de cas d'utilisation pour consulter les congés.....................................................53
Figure 54: diagramme de cas d'utilisation de la demande congé.........................................................54
Figure 55: diagramme de cas d'utilisation de gérer la liste des signataires..........................................55
Figure 56: diagramme de séquence de gêner fichier PDF....................................................................55
Figure 57:diagramme déploiement de signature numérique...............................................................56
Figure 58: diagramme de séquence de liste signataire........................................................................57
Figure 59: Consulter les congés............................................................................................................58
Figure 60: liste de demande congés.....................................................................................................58
Figure 61: Affichage du PDF de demande de congé.............................................................................59
Figure 62: formulaire de la demande de congé....................................................................................59
Figure 63: le chargement du formulaire...............................................................................................60
Figure 64: l'ajout du liste signataire.....................................................................................................61
Figure 65: les mails valables pour la sélection du signataire................................................................61
Figure 66: la sélection des signataires..................................................................................................62
Figure 67: la sauvegarde du liste signataires........................................................................................62
Figure 68: suppression d’un signataire de la liste.................................................................................63
Figure 69: si l'admin ajouter un signataire qui est deja sélectionné.....................................................63
Figure 70: Mail de NG sign de demande a congé.................................................................................64
Figure 71: la demande de congé..........................................................................................................65
Figure 72: si le signataire décide a refusé le congé..............................................................................65
Figure 73:si le signataire décide a accepté le congé.............................................................................66
Figure 74: les statue du demande lorsque le signataire accepte, refuse ou n'a pas réponde..............66
Liste des Tableaux
Liste des Tableaux

Tableau 1: Backlog du Produit..............................................................................................................24
Tableau 2: Planification des Sprint.......................................................................................................25
Tableau 3: backlog du Sprint 1.............................................................................................................28
Tableau 4: Description textuelle du cas d’utilisation «Authentification »............................................29
Tableau 5:Desiption textuelle du cas d’utilisation «Consulter le tableau de bord»..............................31
Tableau 6: Description textuelle du cas d’utilisation «gérer les fiches personnels».............................33
Tableau 7: backlog du sprint 2..............................................................................................................43
Tableau 8:Description textuelle du cas d’utilisation «Consulter les Absence»(admin)........................44
Tableau 9:Description textuelle du cas d’utilisation «Consulter les Absence»(Personnel)...................45
Tableau 10:Description textuelle du cas d’utilisation «Consulter la liste de pointage»(admin)...........47
Tableau 11:Description textuelle du cas d’utilisation «Consulter la liste de pointage»(personnel).....48
Tableau 12: Backlog du sprint 3............................................................................................................52
Tableau 13:Description textuelle de consulter les congés <<Personnel>>...........................................53
Tableau 14: description textuelle de consulter les congés <<Admin>>................................................54
Liste des abréviations
Liste des abréviations

-ETAP= Entreprise Tunisienne d'Activités Pétrolières
Introduction Générale
Le monde autour de nous évolue d'une manière très rapide et vaste, et en fait, cette
évolution croît d’une manière exponentielle et simultanément à la croissance de
l'information et de la technologie.
Chaque petit détail que nous accomplissons dans notre vie quotidienne génère de
l'information qu'elle soit grande ou petite, il représente un objet dynamique et peut parfois
devenir incontrôlable, et c'est là que la technologie intervient.
La technologie fournit une variété d'outils qui stimulent le développement et l'échange

d'information afin de faciliter les tâches essentielles dont les gens ont besoin et qu'ils
utilisent au quotidien.
En fait, le domaine des technologies de l'information (TI) combine l'étude et l'application des
ordinateurs et de tout type de télécommunications qui stockent, récupèrent, étudient,
transmettent, manipulent et envoient des données.
Les sociétés et les entreprises en expansion sont considérées comme l'une des plus grandes
sources de génération d'informations et ce n'est pas un secret si l'on considère la somme
des flux de travail et des transmissions qu'elles effectuent.
Il est vrai que les données générées diffèrent d'une entreprise à une autre en fonction de
nombreuses variables et facteurs tels que la taille de l'entreprise, le nombre de procédures
et d'activités menées, mais comme nous pouvons le constater à l'ère de la transformation et
de la gestion numérique, les entreprises ont compris l'importance des technologies
numériques lorsqu'il s'agit de traiter les processus et sont dans une course vers la mise en
œuvre de solutions automatisées.
Pour clarifier le concept de la numérisation dans les entreprises, nous pourrions dire que
c'est l'intégration des technologies qui transforme les opérations quotidiennes en opérations
numériques. Quelle que soit la nature de cette transition, les avantages de ce processus sont
1
innombrables et pour n'en citer que quelques-uns, nous pourrions nommer la réduction des
coûts généraux du processus, la création de systèmes de prédiction qui utilisent les données
pour améliorer la qualité de la gestion, la diminution de l'effort manuel et la visibilité et le
contrôle globaux.
Les nombreux avantages énumérés ci-dessus ont créé une motivation au sein de multiples
organismes professionnels et ont suscité le désir d'investir dans ce type de technologies,
dont particulièrement l'ETAP fait partie
2
Chapitre 1: Etude préalable
Chapitre 1 : Etude préalable
Introduction
Dans ce premier chapitre, nous présenterons le cadre général du projet. D’abord, nous
commencerons par la présentation de l’organisme d’accueil. Ensuite, nous présenterons une
étude de l’existant. Enfin, nous démontrerons également la méthodologie de travail que
nous avons choisie pour réaliser notre projet.
1 Présentation de l’organisme
L'Entreprise Tunisienne des Activités Pétrolières (ETAP) est un établissement industriel et
commercial créé par la loi n°72-22 de mars 1972 pour participer activement dans le pays à
l'industrie pétrolière.
Comme toute entreprise du secteur public, ETAP fonctionne en partenariat Coopération

avec 44 entreprises tunisiennes et étrangères.
Elle joue un rôle important dans la vie économique du pays en matière d'énergie,
notamment dans sa croissance, la création d'emplois, la décentralisation, l'intégration et le
transfert de technologie. En 2012, il y avait 800 employés, dont 468 cadres, 194 maîtres et
138 interprètes. L'objectif de la société est de reconstituer les réserves nationales
d'hydrocarbures et d'optimiser la production des concessions pétrolières et gazières dans
des conditions optimales de coût et de sécurité.
Figure 1:Siege Mohamed V
Organigramme d’ETAP:
3
Figure 2: Organigramme d'ETAP
2 Etude de l’existant
2.1Présentation de l’existant
Comme nous pouvons le constater, la numérisation et l'utilisation des nouvelles
technologies dans les entreprises ont permis à de nombreuses sociétés d'avoir plus de
possibilités d'accroître l'efficacité, la productivité et les flux de revenus. Et Dans une ère de
transformation, les entreprises ont compris l'effet de levier des technologies numériques et
sont dans une course à la mise en œuvre des solutions automatisées. ETAP, n'est pas
différente. En fait, les activités générales, les flux de travail et les transmissions massives de
cette société
ont rendu presque inévitable la décision d'entrer dans le monde digital et elle investit
aujourd'hui dans des technologies qui permettent l'automatisation des processus répétitifs
afin d'améliorer la productivité et l'efficacité pour atteindre ces objectifs, ETAP a décidé de
numériser ses processus et ses flux de travail pour clarifier le concept de numérisation dans
les entreprises, nous pourrions dire que c'est l'intégration de technologies qui transforme les
opérations quotidiennes en opérations numériques et quelle que soit la nature de cette
transition, les avantages de ce processus sont innombrables pour n'en citer que quelques-
4
uns, nous pourrions dire que la réduction des coûts généraux du processus, la diminution de
l'effort manuel et la visibilité et le contrôle globaux.
L’ETAP, qui cherche à numériser tous ses flux de travail, comme l'échange de documents
actuel, et afin de réaliser tout cela, elle cherche à mettre en œuvre une plate-forme de
gestion pour des flux de travail particuliers et dans notre cas, le flux de travail de demande
de congé où un employé peut facilement demander un congé via une plateforme tout en
accomplissant d'autres fonctionnalités sur cette plateforme et pour finaliser la transmission
de ce workflow, l'entreprise cherche également à mettre en place une solution de signature
électronique pour légaliser ses documents numériques.
Une signature électronique, également connue sous le nom de e-signature, est considérée
comme un moyen facile de légaliser des documents numérisés.
cette solution est fournie pour notre projet par NG Sign, une société spécialisée dans la
signature électronique.
Ce type de solutions est considéré comme l'avenir facile pour les entreprises et les sociétés,
car les solutions adaptées existantes rendent chaque processus plus difficile et la recherche
de nouvelles technologies était une nécessité et non une fin en soi.
2.2 Critique de l’existant

Il est vrai que la plupart des entreprises utilisent encore la méthode traditionnelle de la
paperasse et que l'ETAP est encore considéré comme l'une d'entre elles et la plupart de leur
processus de transactions et les flux de travail sont réalisés par le biais du système manuel
qui consiste simplement à demander un document pour votre opération, de remplir le
document et d'attendre son admission, un processus qui prend énormément de temps, la
société souhaite changer cela à cause des nombreuses raisons et des nombreux
inconvénients rencontrés à travers leurs expériences.
L'utilisation de la méthode manuelle de traitement de la paperasserie a entraîné de

nombreux problèmes au sein de l'entreprise :
- Le traitement manuel des documents prend du temps, stressant, peut devenir assez
compliqué et de nombreuses erreurs peuvent se produire.
5
- Le manque d'espace de stockage, puisque la documentation de chaque document prend

beaucoup de place et doit être toujours stockée à proximité de l'entreprise afin d'être
accessibles rapidement.
- Les problèmes de sécurité mettant en danger le processus, l'entreprise doit protéger ses
données et ses actifs précieux contre le risque ou d'une mauvaise manipulation.
- Si le document doit être manipulé par de nombreuses personnes, son édition et sa gestion
peuvent être assez compliquées et ralentissant le processus du flux de travail.
- L'approbation et la vérification des documents prennent beaucoup de temps, un temps qui

coûte à la fois de l'effort et de l'argent.
- Le manque de transparence du processus est également considéré comme un problème

majeur, puisque certains flux de travail peuvent être manipulés et modifiés, ce qui peut
entraîner des dommages ou un environnement de travail inefficace.
- Le manque de connaissances et d'outils d'admission et de suivi des processus, puisqu'il n'y

a actuellement aucun système mis en œuvre qui permette à l'émetteur du processus
d'effectuer un suivi et/ou des vérifications constantes de sa situation de départ.
Le débat sur les documents papier par rapport aux documents numériques ou électroniques
est toujours en cours de délibération, et ce fait est surprenant, surtout si l'on considère que
les entreprises de différents secteurs et même les petites entreprises sont devenues
entièrement numériques.
Pourtant, la question est de savoir s'il faut utiliser des documents papier ou des documents
électroniques est intéressante.
2.3 Solution Proposée
À mesure que le nombre de propriétaires d'entreprises et de sociétés qui investissent dans

des systèmes de gestion des données et des processus numériques augmente, le débat
entre le numérique et le papier semble quelque peu évident. Il affirme que les plateformes
de données électroniques sont en plein essor et que la nature dominante qu'elles possèdent
sur le monde prouve que le domaine des données ne fera que poursuivre sa croissance.
6
Pour participer et faire partie de ce sujet intéressant, nous avons décidé de relever le défi de
la transformation en tant qu'entreprise finale.
Ce défi de la transformation comme projet de fin d'études. Après avoir analysé les différents
témoignages de différents membres de l'organisme et fait des recherches sur le sujet et le
domaine global, et aussi après avoir planifié et visualisé notre sujet, nous avons finalement
décidé de créer une plateforme où la numérisation du flux de travail "demande de congé"
est réalisée. Nous commençons par développer un portail pour l'entreprise où l'employé est
libre de se connecter, de remplir certaines fonctionnalités autorisées par la plate-forme et
générées de manière créative, et peut demander un congé numériquement via la plate-
forme en remplissant simplement ses données et en le générant en PDF, puis en attendant
son approbation et sa signature, et enfin vous l'avez, un flux de travail finalisé avec des
documents numériques imprimables à la fin du processus. En générant ce type de solution,
on obtient de nombreux avantages, comme ceux énumérés ci-dessous :
- Garantir un accès facile, en remplaçant la recherche de dossiers dans les armoires par une
simple action comme un clic de souris ou par un clic de bouton pour accéder aux différents
dossiers et documents.
- Contrôler l'accès, et par cela nous assurons que les documents confidentiels sont bien
placés et en ordre. L’utilisation des documents numériques est beaucoup plus facile à gérer
que le contrôle de la paperasse qui risque d'être Perdu où endommager.
- Le partage de la flexibilité et de la facilité et l'accélération du processus de travail.
Non seulement notre solution assure l'enrichissement numérique, mais elle permet
également les deux principaux avantages des documents numériques :
- La fiabilité du document : les documents électroniques sont une preuve complète des
données. L'intégration et la mise en œuvre des données et ce processus est géré de manière
que le document est toujours fiable et compréhensible.
- Légalisation du document : Les documents signés numériquement sont une preuve légale
de L’admissibilité du document, il indique l'acceptation d'un enregistrement ou d'un
document.
3 Méthodologie de travail
7
3.1 Les différents types de méthodologie

Dans le but de mener à la bonne réalisation du projet en passant par toutes les phases, de la
planification jusqu’à la mise en œuvre, tout en assurant l’efficacité et la rentabilité du
produit final, on s’appuie sur l’utilisation des méthodes de gestion de projets, qui peuvent
être divisées en deux types :
 Les méthodes traditionnelles : autrement dit méthode classique, qui consiste à

réaliser une série de phases qui s'enchaînent, où l’exécution d’une de ces phases
exige la fin de celle qui la précède. Ces phases constituent une suite d’étapes, qui
visent à bien réaliser un projet.[1]
 Les méthodes Agiles, Elle est plus efficace et moins rigide que les méthodes
traditionnelles. Celles-ci placent les besoins des clients au centre des priorités des
projets. L'approche Agile est une approche itérative et collaborative qui peut prendre
en compte les besoins initiaux du client et les besoins liés au changement.[2]
3.2 Approches Agiles VS Classiques

Dans cette partie, nous comparerons deux grandes familles de modes de gestion Projet :
Méthodes traditionnelles et agiles. Cela ne doit pas perdre de crédibilité Quoi qu'il en soit,
mais pour comprendre le but et les différents points qu'ils représentent.
La méthode traditionnelle suit le cycle de vie standard du projet. Elle présente Les propriétés
suivantes :
 Proposition de solutions complètes

 Suivi d’un processus de développement linéaire
 Définition de l’ensemble des contraintes dès le début du projet
Nous avons pris la décision en comparant les méthodes traditionnelles et agiles. Suivez ces
étapes lors de la configuration de notre application
3.3 Choix de la méthodologie Agile SCRUM

3.3.1 Définition du SCRUM
Scrum est une méthode agile, généralement utilisée pour la gestion des projets
informatiques. Cette méthode qui consiste à subdiviser le projet en plusieurs modules,
8
appelés « sprint » qui se réalisent itérativement selon une planification bien étudiée. Les
sprints peuvent durer entre quelques heures et un mois. Avant de démarrer un nouveau
sprint, l`équipe réalise une rétrospective. Cette technique analyse le déroulement du sprint
achevé, afin dàméliorer ses pratiques. Par ici Nous visons à améliorer la productivité autant
que possible tout en assurant la satisfaction du client.[3]
3.3.2 Les Bases de SCRUM

La méthodologie SCRUM est basée sur 3 principes :
 Transparence: Scrum valorise un langage commun.

 Inspection: Scrum propose de recenser régulièrement les différents artefacts
générés pour identifier les déviations indésirables
 Adaptation: Permet d’ajuster en permanence le développement du produit
en fonction des anomalies détectées lors de l’inspection
3.3.3 Les Acteurs dans SCRUM

Scrum consiste de 3 rôles:
 Le Product owner: : C'est le client qui est l’entité qui a besoin du produit, d’où
il présente la personne qui se charge de l'approbation ou le rejet du travail
soumis, ainsi que l’optimisation du travail de l'équipe à travers la gestion le
backlog produit, la définition des exigences auxquelles le produit doit
répondre et l’ajustement des fonctionnalités du produit lors de chaque
itération [4]
 L’équipe de développement: qui est chargée de la transformation des

besoins exprimés et spécifiés dans le backlog, en fonctionnalités
informatiques spécifiques et exploitables. L'équipe de développement
s'autoorganise. Aucune personne ne peut lui apprendre comment changer
l'histoire du produit réalisé, on dit qu'elle est autonome. L’équipe est
interdisciplinaire où les membres peuvent réaliser d'autres tâches, tels que
développer, concevoir, etc.… [4]
9
 Le Scrum master : Il doit maîtriser l'intégralité de Scrum. Il doit s'assurer que

la méthode Scrum est correctement implémentée. L'approche de l'équipe de
développement Cette méthode est généralement confondue avec son chef de
projet. Sa mission consiste à guider et à assister les membres de l'équipe,
Gérer efficacement le carnet de produit, de sorte qu’il est claire et précis pour
l’équipe et finalement, Aider l'équipe à surmonter les obstacles durant
l’avancement. [4]
3.3.4 Processus SCRUM
Figure 3: Le fonctionnement général de la méthode Scrum
 Scrum est basé sur des itérations qu’on appelle sprints.

 L'objectif fait partie d'un référentiel d'exigences appelé backlog produit, détenu et
entretenu par le Product owner
 Ce référentiel se compose de fonctionnalités qui sont toujours demandées, et
nécessaires à la satisfaction du client. Avant chaque sprint, les fonctionnalités les plus
prioritaires seront transformées en backlog de sprint, qui sera l'objectif à réaliser
durant le sprint.[5]
 Les sprints commencent toujours par un plan basé sur des discussions entre le
product owner, et l’équipe de développement, concernant les backlogs de produits.
A la fin de chaque sprint, une réunion se met place, afin d’analyser le travail réalisé,
détecter des anomalies ou des lacunes, puis définir les taches du sprint suivant.[5]
10
 L'équipe de développement est dirigée par le Scrum Master pour réaliser un objectif
bien déterminé. Son rôle consiste à aider l’équipe à surmonter les obstacles ains que
participer au développement en cas de besoin.[5]
 Chaque sprint améliore la valeur ajoutée du produit en ajoutant des fonctionnalités
qui peuvent être livrées aux clients.
3.4 Choix du langage de modélisation

Un langage de modélisation est un langage artificiel qui peut être utilisé pour exprimer de
lìnformation ou de la connaissance ou des systèmes dans une structure qui est définie par
un ensemble cohérent de règles. Ces règles sont utilisées pour lìnterprétation de la
signification des composants dans la structure. Le langage de modélisation que nous avons
choisi pour la modélisation de notre application est lÙML (Unified modeling langage).[6]
3.4.1 Définition UML

UML, Unified Modeling Langage, Langage de modélisation unifiée orienté objet. Cela résulte
de la fusion de trois méthodes orientées objet, Booch et OMT et OOSE conçue par Par Grady
Booch, James Rumbaugh et Ivar Jacobson respectivement.[7]
3.4.2 Principe UML

Les Trois experts UML, modélisation et Formalisation pour la conception d'un langage de
modélisation universel standardisé Notamment pour le développement informatique en
langages objets. UML 2 est une évolution majeure du langage. La dernière spécification, UML
2.2, est prise en charge par OMG. Groupe de gestion d'objets. La modélisation et la
formalisation du vocabulaire standardisé et davantage orienté objet confèrent à la méthode
tout son attrait. Ou alors En effet, la formalisation et la modélisation facilitent la définition
du problème à traiter. Et la compréhension de tous les principaux acteurs après que cela
devienne vrai Enseignement court. Lorsque le modèle est bien défini, il sera plus facile de le
référencer lorsque Développement pour assurer la conformité. Cet outil précieux Elle
explique à elle seule l'essor de l'approche UML. [8]
4 Choix Techniques
Avant de commencer la mise en œuvre de notre projet. Définissons d'abord l'environnement
matériel, puis le logiciel, et enfin, Présenter les différentes langues utilisées.
11
4.1 Environnement de développement
Figure 4: logo lucidchart

Lucidchart est un environnement de travail visuel qui associe création de diagrammes, visualisation
de données et fonctionnalités de collaboration afin de faciliter la communication et stimuler
l’innovation. [9]
Figure 5: logo de visual Studio code
-Visual Studio Code est un éditeur de code source récemment lancé par Microsoft, avec la
particularité d’être diffusé sur GitHub donc en open source. Il est disponible pour Windows
mais aussi Linux et Mac OS X et vient concurrencer directement les éditeurs modernes tels
que Atom, Brackets et SublimeText. [10]
Figure 6: logo du XXAMP
- XAMPP est un acronyme, "X"->Multiplateforme, "A"->Apache server, "M"->MariaDB, "P"-

>Perl et "P"->PHP, c’est une pile de logiciels, qui comprend les distributions Apache utilisées
pour développer et tester le site Web localement avant son déploiement sur Internet. [11]
12
Figure 7: logo du POSTMAN
Postman est une application utilisée pour les tests d'API. Il s'agit d'un client HTTP qui utilise
une interface utilisateur graphique pour tester les requêtes HTTP et doit capturer et valider
différents types de réponses. [12]
Figure 8 : logo du GitHub
GitHub est une plateforme d'hébergement de code pour la mise en version et la

collaboration. Il vous permet, à vous et aux autres, de travailler ensemble à des projets de
n'importe où. Ce tutoriel vous apprendra les bases de GitHub telles que les dépôts, les
branches, les commits et les requêtes d'extraction. [13]
4.2 Langage Utilisé
Figure 9: logo du HTML5
HTML (HyperText Markup Language) est l’élément de base du Web. Il définit la signification
et la structure du contenu Web. D’autres technologies que le HTML sont généralement
13
utilisées pour décrire l’apparence/présentation (CSS) ou la fonctionnalité/le comportement

(JavaScript) d’une page Web. [14]
Figure 10: logo CSS3
CSS (Cascading Style Sheets) est un langage de stylesheet utilisé pour décrire la présentation
d’un document écrit en HTML ou XML (y compris les dialectes XML tels que SVG, MathML ou
XHTML). CSS décrit comment les éléments doivent être rendus à l’écran, sur papier, en
discours ou sur d’autres supports. [15]
Figure 11: logo JavaScript
JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language

with first-class functions. While it is most well-known as the scripting language for Web
pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and
Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic
language, supporting object-oriented, imperative, and declarative (e.g. functional
programming styles. [16]
Figure 12:logo de Bootstrap3
Bootstrap est un framework destiné à faciliter la création d’applications Web. Il regroupe

une collection d’outils fournis sous la forme de classes CSS et de librairies JavaScript. [17]
14
Figure 13:Logo de Laravel
Laravel est un framework d’application web avec une syntaxe expressive et élégante. Nous
croyons que le développement doit être une expérience agréable et créative pour être
vraiment épanouissant. Laravel tente de soulager le développement en facilitant les tâches
courantes utilisées dans la majorité des projets Web, comme l’authentification, le routage,
les sessions et la mise en cache. [18]
Figure 14 : MySQL
MySQL un Système de Gestion de Bases de Données Relationnelles (SGBDR). Il est distribué

sous une double licence GPL et propriétaire. Il fait partie des logiciels de gestion de base de
données les plus utilisés au monde. [24]
4.3 Architecture adoptée
Architecture MVC: Modèle-Vue-Contrôleur, En fait, lorsque nous évoluons Avec MVC, vous
segmentez votre code en trois parties ou couches, et chaque couche a une fonction
spécifique
 La couche Vue: Ceci fait partie de mon code qui gère la présentation Données à
l'utilisateur, il obtient une vue des données issues du modèle Responsable de la
création de l'interface d’Une présentation de l'application (page) basée sur les
informations qu'elle contient Par exemple HTML). Cependant, HTML ou Pour les
représentations textuelles des données, il peut également être utilisé pour le
provisionnement Différents formats selon vos besoins. [19]
15
 La couche Contrôleur: Il est responsable du routage des informations. Décidez qui

accédera et traitera les informations. Traiter la demande Fournissez des réponses aux
utilisateurs à l'aide de modèles et de couches de vue. [20]
 La couche Modèle: : Ceci fait partie du code qui exécute la logique Entreprise
d'applications. Cela signifie qu'elle est responsable de la récupération Des données
pour les transformer selon le concept de logique applicative Traitement, validation,
association, et toutes autres tâches connexes, etc. Manipulation de données. Elle est
également en charge du dialogue avec Base de données, il sait en quelque sorte
comment se connecter à la base de données Exécuter des requêtes (Create, Read,
Update, Delete) sur des données et des bases de données. [21]
Figure 15: Architecture MVC
(1) Le visiteur transmet sa requête http, l'envoie au serveur d'applications. Celui-ci l'envoie
directement à la partie de code appelée Controller. (2) Le contrôleur effectue le routage de
l'information en décidant qui la récupèrera, puis la traitera. Il fait appel en fait au Modèle qui
contient l'information structurée et qui va réaliser des calculs ou des traitements sur cette
16
information. Puis les envoyer au Contrôleur, (3) qui à partir des données obtenues, (4) Va
générer une vue. (5) Cette page web sera le résultat de la demande du visiteur (6). [22]
Conclusion
Dans ce chapitre, nous avons défini le contexte du projet et passé en revue les solutions
existantes. Dans le chapitre suivant, nous poursuivrons l'analyse des besoins et vous
montrerons le backlog produit, l'architecture adoptée et l'environnement de développement
approprié associé à votre projet.
17
Chapitre 2 : Analyse et spécification des besoins
Introduction
Le principe de base de Scrum est de se concentrer de manière répétée sur un ensemble de
tâches. Fonctions qui doivent être réalisées à chaque itération. Dans ce chapitre C'est la
phase la plus importante de cette méthodologie et est communément appelée "Sprint Zéro",
Il représente le travail le meilleur et le plus important, mais il est en sommeil en soi Avec de
bonnes spécifications de besoins, c'est juste une question qui doit être posée Au début de
ses travaux, tous les informaticiens se demandaient : « Que voulons-nous de nous ?
Comme? 'Ou quoi ? ", Pour identifier le backlog produit et le plan de release, Détails de
l'architecture adoptée et de la technologie utilisée pour la construire du Logiciel.
1 Sprint
1.1 Définition
Dans les modèles de développement agiles SCRUM, les sprints spécifient une période de
temps Certaines tâches qui doivent être accomplies avant de passer en revue
1.2 Sprint particulier : Sprint 0

La composition du sprint est quasiment la même, mais un peu particulière sauf pour le sprint
0. Le premier sprint du projet ne fournit aucune fonctionnalité à la fin. Il représente plutôt la
construction du modèle sous-jacent pour tous les sprints suivants. Dans cette phase, vous
identifiez tous les utilisateurs potentiels de votre solution et concevez avec eux le produit
final. Par conséquent, l'interaction entre le client et l'équipe SCRUM est particulièrement
intense lors du sprint 0, car elle permet de définir l'application attendue à la fin du dernier
sprint. Les attentes en matière d'ergonomie, de sécurité et de fiabilité sont définies. Sprint 0
est un framework qui ne produit rien de manière fonctionnelle, mais construit tous les
autres sprints [23]
2 Analyse des besoins

Dans la phase d'analyse des besoins, identifiez d'abord les parties prenantes Impliquez-vous
dans l'application. Procéder ensuite à l'identification des besoins fonctionnels ça ne
fonctionne pas.
18
2.1 Identification des acteurs

Un acteur est une entité qui s’intègre et interagit avec le système par cas
d’utilisation.
 Admin: L’entité responsable de la gestion des processus du l’application web.

 Personnel: L’entité qui utilise le portail ETAP pour effectuer ses opérations et le
travail.
 Signataire: L’entité hiérarchique supérieure responsable de la signature des
demandes de congé.
2.2 Les Besoins fonctionnels

Les éléments suivants sont une partie de ce que l’application web permet aux différents
utilisateurs d’accomplir
Acteur Rôles
 S’authentifier
 Consulter le tableau de bord
 Gérer les fiches personnelles
 Consulter la liste des congés
Admin  Consulter la liste de demande de congés

 Gérer la liste des signataires
 Gérer les absences
 Consulter la liste de pointage
 S’authentifier
 Consulter le tableau de bord
 Consulter ses congés
 Consulter ses absences
Personnel  Création une demande de congé

 Générer un fichier PDF de la demande du congé
 Consulter l’état de sa demande
 Consulter sa liste de pointage
Signataire  Signer un conge avec une signataire numérique
Figure 16 : présentation des besoins fonctionnels
19
2.3 Les Besoins non fonctionnels

Ergonomie de l’interface: l’application doit être Simple et claire pour tous les utilisateurs.
Performance : maintenir le flux de travail au sein de l'entreprise en bon ordre,
des performances élevées sont attendues
 Fiabilité : L’application doit répondre aux besoins fonctionnels.

 Adaptabilité : on garantit la rapidité et la facilité de modification, de déploiement et
de contrôle de notre système.
 Sécurité: L’application porte des informations personnelles alors il faut s’assurer de la
sécurité de ces dernières.
 Simplicité: L’application doit être facile à utiliser
3 Diagramme de cas d’utilisation global

Le diagramme de cas d’utilisation globale est un diagramme UML utilisé pour fournir une vue
d’ensemble du processus qui décrit la relation entre la fonctionnalité et les acteurs. [25]
20
Figure 17: Cas d'utilisation globale
21
4 diagramme de classe
Le diagramme de classe clarifie le système par cartographier la structure d’un système

particulier en modélisant ses class, attributs, méthode et les relations entre les table et le
type des relation (One to many, Many to one, one to one, many to many). [26]
Figure 18: base de donnée fourni par l'ETAP
Après avoir étudié la base de données fournis par l'ETAP, nous avons conclu que nous
devions ajouter des tables (en bleue) pour pouvoir développer les fonctions nécessaires.
22
Figure 19: Diagramme de classe globale
5 backlog du produit
Le backlog produit contient tous les éléments sur lesquels l’équipe doit travailler
 Utilisateur (Personnel, Admin, Signataire)
ID Titre User Story Priorité
En tant qu’un utilisateur je dois

1 Authentification m’authentifier pour accéder ma Elevée
session
Consulter tableau de En tant qu’un utilisateur je dois

2 faible
bord consulter le tableau de bord
23
Gérer les fiches En tant qu’un admin je dois gérer

3 Moyenne
personnels les fiches personnels
En tant qu’un Personnel je dois

Faible
consulter mes absences
4 Gérer les absences
En tant qu’un admin je dois gérer
Elevée
les absences
En tant qu’un Personnel je dois
Faible
Consulter la liste de consulter mes Pointage
5
pointage
En tant qu’un admin je dois
consulter la liste de pointage Faible
En tant qu’un Utilisateur je dois

Moyenne
consulter mes congés

6 Moyenne
Gestion congé demander un congé

Moyenne
générer le fichier PDF de mon congé
En tant qu’un admin je dois gérer

Moyenne
les signataires
7 Signature numérique En tant qu’un signataire je dois
signer un congé avec une signature Elevée
numérique
Tableau 1: Backlog du Produit
6 planification des sprints et des releases

6.1 Planification des sprints
La réunion de planification de sprint est l'un des événements les plus importants du
Méthodologie Scrum. L’objectif de cette réunion est de mettre en place le planning du
travail.
On a réparti notre application en 3 Sprints comme le montre ce tableau suivant :
24
Durée de
Sprint Planification des sprints
réalisation
User Story 1: Authentification
Sprint 1 User Story 2: Consulter tableau de bord 1 mois
User Story 3: Gérer les fiches Personnels
User Story 4: Gérer les absences

Sprint 2 1mois
User Story 5: Consulter la liste de pointage
User Story 6: Gestion Congé

Sprint 3 1mois
User Story 7: signature numérique
Tableau 2: Planification des Sprint
6.2 Planification des releases

Une release est une nouvelle version du produit. Elle comporte du plusieurs sprints. Dans
notre application on a divisé les sprints en 2 releases
Authentification
Consulter
Sprint 1
tableau de bord
Gérer les fiches

Release 1 personnels
Gérer les
absences
Sprint 2
Consulter la liste
de pointage
Gestion congé
release 2 Sprint 3
signature
numérique
Figure 20: Planification des releases
25
Conclusion
Dans ce chapitre on a identifié, analyser et préciser les acteurs et leur fonctionnalité. On a
Conçu le diagramme de cas d’utilisation global. On a créé notre tableau de backlog et on a
planifier notre sprints et releases. Dans ce chapitre suivant on va adresser la première
release.
26
Chapitre 3 : release 1
Chapitre 3 : Release 1
Introduction
Dans ce chapitre on va élaborer la progression du 1ere release. En utilisant des Backlogs,
Diagrammes explicatifs, Description textuelles et des capture d’écrans.
Authentification
Consulter
Sprint 1
tableau de bord
Gérer les fiches

personnels
Gérer les
absences
Sprint 2
Consulter la liste
de pointage
Figure 21: Planification du Release 1
27
1 Sprint 1
1.1 Backlog du Sprint 1
ID User Stories ID Type Tâche

1.1.1 Front-End Créer une interface
d’authentification
En tant d’un
utilisateur je 1.1.2 Back-end Créer les contrôleurs
dois d’authentification
1
m’authentifier
pour accéder à 1.1.3 Back-end Développer
ma session L’authentification
1.1.4 - Faire des tests

En tant qu’un
2.1 Front-end Créer la page d’accueil
utilisateur je
2
dois consulter le
2.2 Front-end Créer le tableau de bord
tableau de bord
3.1 Front-end Créer le navbar et ajouter bouton
pour afficher les personnelles
3.2 Front-end Créer l’interface pour afficher les
personnelles
En tant qu’un
admin je dois 3.3 Front-end
3 Ajouter les boutons du CRUD
gérer les fiches
(création, Read, Update, Delete)
personnels
3.4 Back-end Développer les fonctions

nécessaires
3.5 - Faire les tests

Tableau 3: backlog du Sprint 1
28
1.2 Conception du sprint 1

1.2.1 Authentification
Figure 22: Cas d'utilisation Raffinée d'authentification

Nom du cas d’utilisation Authentification
Acteur(s) Utilisateur
Objectif Permet l’utilisateur a accéder et bénéficier a les service de
l’application web
Précondition L’utilisateur doit avoir un compte et saisie son mot de passe et
son mail
Postcondition Utilisateur authentifier et a l’accès au application web
Scénario nominal 1. Afficher l’interface du login.
2. Saisir le login et le mot de passe.
3. Cliquer le bouton login.
4. Le système vérifie les données entrées par l’utilisateur.
5. Donnés vérifier.
6. Le système accorder l’accès à l’utilisateur et affiche le
tableau de bord.
Scénario alternatif Le système affiche un message d’erreur si l’email et le mot
de passe sont incorrect ou n’existe pas (Personnel n’est pas
encore ajouté par l’admin) et retour a l’étape 2 du scénario
nominal.
Le système va vous informer si l’un des champs est vide
Tableau 4: Description textuelle du cas d’utilisation «Authentification »
 Diagramme d’activité :
29
Un diagramme d’activités est un organigramme illustrant les activités exécutées par un

système. [27]
Figure 23: Diagramme d'activité d'authentification
Figure 24:Diagramme de collaboration du cas d’utilisation « S'Authentifier»
30
1.2.2 Consulter tableau de bord
Figure 25: Cas d'utilisation raffiné de consulter tableau de bord
Nom du cas d’utilisation Authentification

Acteur(s) Utilisateur
Objectif Permet l’utilisateur a accéder Consulter le
tableau de bord
Précondition L’utilisateur doit être authentifier
Postcondition Tableau de bord consulter
Scénario nominal 1. Authentification.
2.Affichage du tableau de bord.
-L’utilisateur peut consulter son profile
Tableau 5:Desiption textuelle du cas d’utilisation «Consulter le tableau de bord»
31
Figure 26: Diagramme de séquence raffiné de consulter tableau de bord
1.2.3. Gérer les fiches personnelles
Figure 27: Cas d'utilisation raffiner du gérer les fiches personnels
32
Nom du cas d’utilisation Gérer les fiches personnels

Acteur(s) Admin
Objectif Permet l’admin a gérer les personnels
Précondition L’admin doit s’authentifier
Postcondition Les personnels gérés
Scénario nominal 1)L’admin doit s’authentifier
2)Clique sur personnel dans the nav bar
3)La liste des personnels s’affiche et 4 bouton s’affiche :
Afficher/Modifier/Effacer/Ajouter
 Pour modifier un personnels :
-il doit cliquer sur ‘modifier’ -un formulaire s’affiche
contient les info du personnels et les champs non griser
-l’admin veut les changer
-clique sur terminer pour l’update
-retour à l’étape (3) et la nouvelle liste s’affiche
 Pour l’afficher les données d’un personnel :
-il doit cliquer sur ‘Afficher’
-un formulaire s’affiche contient les info du personnels et
les champs sont griser
-clique sur retour pour retourner à l’étape (3) et la
nouvelle liste s’affiche
 Pour ajouter un personnels :

-il doit cliquer sur ‘ajouter’
-un formulaire vide s’affiche contient
-l’admin dois saisir ces données
-clique sur terminer pour l’ajouter
-retour à l’étape (3) et la nouvelle liste s’affiche
 Pour effacer un personnel :
Il doit cliquer sur ‘effacer’
Un alerte de confirmation s’affiche
L’admin se confirme
Retour à étape (3) et la nouvelle liste s’affiche
 L’admin peut chercher un personnel avec son nom,

matricule, sexe, Nature agent, Date de nais ou Email
Scénario alternatif -Le système affiche une message d’erreur si le formulaire

d’ajouter un personnelle est mal saisi.
- Le système affiche une message d’erreur si le formulaire de
modifier un personnelle est n’est pas changé.
Tableau 6: Description textuelle du cas d’utilisation «gérer les fiches personnels»
33
Figure 28: Diagramme de séquence de cherche un personnel
1.3 Réalisation du sprint 1

Authentification :
Figure 29: interface login
34
Figure 30: si les champs sans vide
Figure 31: si les champ sont mal saisi
35
Figure 32: Consulter profile
Figure 33: tableau de bord d'application web
36
Gérer les fiches personnelles :
Figure 34: l'interface de gérer des personnels
Figure 35: Affichage d'un personnel
37
Figure 36: Modifier d'un personnel
Figure 37: si le formulaire n'est pas changé
38
Figure 38: si le formulaire a été changé
Figure 39: l’alerte du suppression d'un personnel
39
Figure 40 : La suppression d'un personnel
Figure 41: Formulaire d'ajout d'un personnel
40
Figure 42:si le formulaire est mal saisi
Figure 43: si le formulaire est bien saisi
41
2 Sprint 2
2.1 backlog du Sprint 2
I
User Stories ID Type Tâche
D
4.1.1 Front-End Ajouter le bouton du
personnelles dans le nav-bar
En tant d’un
Personnel je
4.1.2 Back-end Créer les contrôleurs pour
dois consulter
afficher son absence
mes absences
4.2.1 Front-end Ajouter bouton pour afficher
4
les Absences dans le nav-bar
4.2.2 Front-end Créer l’interface pour afficher

les absences
Ajouter les Botton pour ajouter

4.2.3 Back-end ou effacer une absence
 L’admin peut chercher un
Absence avec son nom,
En tant qu’un Nombre de jour, Date de
admin je dois fin, Date de début,
gérer les période de fin, période de
absences début, Accumulation ou
Nature d’absence
4 4.2.4 Back-end
Développer les fonctions
nécessaires
4.2.3 - Faire les tests

5 En tant qu’un 6.1.1 Front-end Ajouter le bouton pointage
Personnel je dans le nav-bar
42
6.1.2 Back-end Créer les contrôleurs pour

dois consulter afficher les informations
les pointage nécessaires

6.2.1
Front-end
Créer le nav-bar et ajouter
bouton pour afficher les
6.2.2 personnelles
Front-end
Créer l’interface pour afficher
les personnelles
En tant qu’un
admin je dois
Ajouter les bottons du CRUD
consulter la liste
(création, Read, Update,
de pointage
Delete)
Back-end Développer les fonctions

6.2.3 nécessaires
Faire les tests

-
6.2.4
Tableau 7: backlog du sprint 2
2.2 Conception Du Sprint 2

2.2.1 Consulter les absences
Figure 44: Cas d'utilisation raffiné de consulter les absences
43
Nom du cas d’utilisation Consulte les absence

Acteur(s) Admin
Objectif Permet l’admin à consulter les absence
Postcondition L’historique des Personnels s’affiche
Scénario nominal 1) L’admin doit s’authentifier
2) Clique sur absence dans the nav-bar
3) L’historique des absences des Personnels s’affiche
-L’admin a la possibilité de cherche un Personnel par son
nom, Nombre de jour, Date de fin, Date de début, période
de fin, période de début, Accumulation ou Nature
d’absence
-L’admin a la possibilité de crée un absence
-L’admin a la possibilité de supprimer un absence
Scénario alternatif - Le système affiche une message s’il n’a pas des absences
Tableau 8:Description textuelle du cas d’utilisation «Consulter les Absence»(admin)
Nom du cas d’utilisation Consulte les absence

Acteur(s) Personnel
Objectif Permet le personnel a consulter ses absence
Précondition L’Personnel doit s’authentifier
Postcondition L’historique de les personnels s’affiche
Scénario nominal 1) Le personnel doit s’authentifier
2) Clique sur absence dans the nav bar
3) L’historique de ses absences s’affiche
-Personnel a la possibilité de cherche un Personnel par son
nom, Nombre de jour, Date de fin, Date de début, période
de fin, période de début, Accumulation ou Nature d’absence
Scénario alternatif - Le système affiche une message s’il n’a pas des absences
Tableau 9:Description textuelle du cas d’utilisation «Consulter les Absence»(Personnel)
44
Figure 45: diagramme de classe de consulter les absences
45
Figure 46 Diagramme de séquence pour cherche un absence
2.2.2 Consulter la liste de pointage
Figure 47: Cas d'utilisation de consulter la liste de pointage
46
Nom du cas d’utilisation Consulte la liste de pointage

Acteur(s) Admin
Objectif Permet l’admin a consulter la liste de pointage
Postcondition L’admin consulte la liste de pointage
Scénario nominal 1) L’admin doit s’authentifier
2) Clique sur pointage dans the nav-bar
3) La liste des pointages des Personnels s’affiche
-L’admin a le possibilité de cherche un instance de
Pointage par le matricule, ID, date de création ou
origine
Scénario alternatif - Le système affiche une message s’il n’a pas de donnée
dans la liste de pointage
Tableau 10:Description textuelle du cas d’utilisation «Consulter la liste de pointage»(admin)
Nom du cas d’utilisation Consulte la liste de pointage

Acteur(s) Personnel
Objectif Permet l’Personnel a consulter la liste de pointage
Précondition Personnel doit s’authentifier
Postcondition Personnel consulte ses pointages
Scénario nominal 1. Personnel doit s’authentifier
2. Clique sur pointage dans the nav-bar
3. La liste de ses pointages s’affiche
dans la liste de pointage
Tableau 11:Description textuelle du cas d’utilisation «Consulter la liste de
pointage»(personnel)
47
Figure 48: Diagramme de séquence Raffiné de Consulter la liste de pointage
3.2 Réalisation
3.1. Consulter les absences
Figure 49: Interface des absences
48
Figure 50: Affichage d’une absence
3.2Consulter la liste de pointage
Figure 51: Interface de liste de pointage
49
Conclusion
Après le développement de ce release, nous avons réalisé les diagrammes de notre
application dans ce release. Les utilisateurs possèdent des comptes et chacun a des
fonctionnalités en fonction de son rôle.
Dans le chapitre suivant, nous allons terminer notre projet afin d’obtenir une application
complète qui répond à tous les besoins indiqués au début
50

Introduction
Dans ce chapitre on va élaborer la progression du 2eme release. En utilisant des Backlogs,
Diagrammes explicatifs, Description textuelles et des capture d’écrans.
Gestion
congé
Sprint 3
signature
numérique
Figure 52:contenue de sprint 3
51
1 Sprint 3
1.1 Backlog du Sprint 3
ID User Story ID Type Tâche
En tant qu’un 6.1.1 Ajouter le bouton Congés dans le nav-bar
Front-end
Personnel je dois
consulter mes
congés Créer les contrôleurs pour afficher les
6.1.2 informations nécessaires
Back-end
Faire des tests

6.1.3 -
En tant qu’un admin 6.2.1
Front-end Ajouter le bouton Congés dans le nav-bar
je dois consulter la
liste des congés et 6.2.2 Créer les contrôleurs pour afficher les
Back-end
son état(signé- informations nécessaires
refusé-en cours)
- Faire des tests

6.2.3
6 En tant qu’un 6.3.1
utilisateur je dois Front-end Ajouter un bouton demande congé dans le
demander un congé nav-bar
6.3.2
Front-end Créer le formulaire de la demande de
congé
6.3.3 Back-end Développer la Demande de congé

En tant qu’un 6.4.1 Front-end Ajouter le bouton de générer et afficher le PDF
Personnel je dois dans l’interface congé
générer le fichier
PDF de mon congé 6.4.2 Back-end Le système s’écrire les données du formulaire
‘demande congé’ et les inséré dans un fichier
PDF

En tant qu’un 7.1 Back-end Le système envois le fichier PDF gêner aux
signataire je dois mails sélectionner par ordre
signer un congé
avec une signature 7.2 Front-end Le signataire reçoit le fichier PDF et le décide de
7
numérique le signé ou refusé
7.3 - Faire des tests

Tableau 12: Backlog du sprint 3
52
1.2 Conception
1.2.1 Gestion congé
Figure 53 digramme de cas d'utilisation pour consulter les congés
Nom du cas d’utilisation Consulte les congés

Acteur(s) Personnel
Objectif Permet le personnel a consulter son liste de congé
Précondition Personnel doit s’authentifier
Postcondition Personnels consulte son liste de congé
Scénario nominal 1)Personnels doit s’authentifier
2)Clique sur congé dans le nav-bar
3)La liste des Congé des Personnels s’affiche
-Personnel a le possibilité de cherche un instance de
congé
dans la liste de congé
Tableau 13:Description textuelle de consulter les congés <<Personnel>>
53
Nom du cas d’utilisation Consulter les congés

Acteur(s) Admin
Objectif Permet l’admin a consulter la liste de congé
Précondition l’admin doit s’authentifier
Postcondition l’admin consulte la liste de congé
Scénario nominal 1)l’admin doit s’authentifier
2)Clique sur congé dans le nav-bar
3)La liste des congé des Personnels s’affiche
- l’admin a le possibilité de cherche un instance de
congé
- l’admin a le possibilité d’ajouter un instance de congé
dans la liste de congé
Tableau 14: description textuelle de consulter les congés <<Admin>>
1.2.2 Demande congé
Figure 54: diagramme de cas d'utilisation de la demande congé
54
Figure 55: diagramme de cas d'utilisation de gérer la liste des signataires
1.2.3 Gêner PDF
Figure 56: diagramme de séquence de géner fichier PDF
55
1.2.4 Signature numérique

 Diagramme déploiement
Un diagramme de déploiement est une vue statique qui sert à représenter
l'utilisation de l'infrastructure physique par le système et la manière dont les
composants du système sont répartis ainsi que leurs relations entre eux [28]
Figure 57:diagramme déploiement de signature numérique
56
Figure 58: diagramme de séquence de liste signataire
57
1.3 Réalisation
Figure 59: Consulter les congés
Figure 60: liste de demande congés
58
Figure 61: Affichage du PDF de demande de congé
Figure 62: formulaire de la demande de congé
59
Figure 63: le chargement du formulaire
60
Figure 64: l'ajout du liste signataire
Figure 65: les mails valables pour la sélection du signataire
61
Figure 66: la sélection des signataires
Figure 67: la sauvegarde du liste signataires
62
Figure 68: suppression d’un signataire de la liste
Figure 69: si l'admin ajouter un signataire qui est deja sélectionné
63
Figure 70: Mail de NG sign de demande a congé
64
Figure 71: la demande de congé
Figure 72: si le signataire décide a refusé le congé
65
Figure 73:si le signataire décide a accepté le congé
Figure 74: les statue de la demande lorsque le signataire accepte, refuse ou n'a pas réponde
Conclusion
Dans ce chapitre, nous résumons le développement et le déploiement de notre système.
Nous avons présenté l'architecture que nous avons choisi la plus appropriée pour le
déploiement de l'application de notre projet et nous avons démontré le diagramme de
déploiement de notre système pour clore ce chapitre.
66
Conclusion générale
Notre projet de développement d'application portail a été réalisé au sein de l'entreprise
tunisienne des activités pétrolières (ETAP), et durant notre stage, nous avons été soutenus
et orientés par des conseils à la fois professionnels et académiques qui nous ont permis de
développer notre solution.
Une solution qui consistait en une plateforme qui élimine les procédures de paperasserie
d'un workflow particulier "Demande de congé" mais aussi, l'intégration d'une solution d'e-
signature qui légalise notre processus numérique et donne une justification certifiée de la
demande.
Tout au long de ce projet, nous avons eu la chance d'élargir nos horizons et d'apprendre de
nouveaux domaines et de nouvelles technologies et d’approfondir nos compétences
techniques (recherche, codage, connaissances générales...). Et ceci s'est même étendu pour
atteindre le développement de nos compétences professionnelles et sociales en travaillant
au sein d'un organisme prestigieux et une équipe professionnelle. Nous avons eu la chance
d'avoir une telle orientation qui nous a poussé à atteindre nos objectifs et nous considérons
cette expérience comme une amélioration de nos compétences.
Ce projet nous a appris beaucoup de choses à reporter dans notre vie professionnelle et
universitaire et tout cela a été une réalité générée par les efforts fournis et la collaboration
de l'équipe.
Au final, nous estimons que notre solution a bien répondu aux attentes de l'équipe
fonctionnelle de l'entreprise qui a exprimé sa satisfaction.
Comme perspectives, nous planifions la migration vers un portail et d'explorer un processus

numérique innovatif et automatisé au sein de cet organisme.
Ces perspectives ont été planifié pour la période à venir et nous comptons développer un
upgrade de cette version déjà développée.
67
Aussi, nous sommes conscients de l'importance du business intelligence dans les organismes
économiques et c'est dans ce sens que nous planifions l'intégration de différents dashboards
pour le suivi des activités et des différents processus métiers de l'entreprise.
Un module BI s'impose dans les prochaines versions de notre solution.
L'intégration de ce dernier fera la différence entre les solutions classiques et les solutions
décisionnelles qui interviennent dans l'aide à a prise de décision et la vision opérationnelle
des entreprises.
68
Webographie
Webographie
1 : https://edisciplinas.usp.br/pluginfile.php/2477426/mod_resource/content/2/04_Stoean-
MT_revue_Dialogues.pdf
2 : https://fr.wikipedia.org/wiki/Méthode_agile
3,4,5,23 : https://fr.wikipedia.org/wiki/Scrum_(développement)
6 : https://fr.wikipedia.org/wiki/Langage_de_modélisation
7,8 : https://fr.wikipedia.org/wiki/UML_(informatique)
9 : https://fr.wikipedia.org/wiki/Lucidchart
10 : https://fr.wikipedia.org/wiki/Visual_Studio_Code
11 : https://fr.wikipedia.org/wiki/XAMPP
12 : https://fr.wikipedia.org/wiki/Postman_(logiciel)
13 : https://fr.wikipedia.org/wiki/GitHub
14 : https://developer.mozilla.org/en-US/docs/Web/HTml
15 : https://developer.mozilla.org/en-US/docs/Web/CSS
16 : https://developer.mozilla.org/en-US/docs/Web/javascript
17 : https://fr.wikipedia.org/wiki/Bootstrap_(framework)
18 : https://fr.wikipedia.org/wiki/Modèle-vue-contrôleur
19, 20, 21, 22 : https://adventy.org/fr/mvc
24 : https://fr.wikipedia.org/wiki/MySQL
25 : https://fr.wikipedia.org/wiki/Diagramme_de_cas_d%27utilisation
26 : https://fr.wikipedia.org/wiki/Diagramme_de_classes
27 : https://fr.wikipedia.org/wiki/Diagramme_d%27activit%C3%A9
28 : https://fr.wikipedia.org/wiki/Diagramme_de_d%C3%A9ploiement
69

This Better Be Worth It 1Nv 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

This Better Be Worth It 1Nv 1

Transféré par

Droits d'auteur :

Formats disponibles

Ministère de l’Enseignement Supérieur et de la Recherche Scientifique

Institut Supérieur de Gestion

Rapport Projet de Fin d’Etude

Application Web de gestion Du flux de travail

Réalisé au sein de ETAP

Encadrant académique :El Ayech Hafedh

Année Universitaire 2021-2022

Table des matières

6.2 Planification des releases.......................................................................................................25

Table des figures

Figure 44: Cas d'utilisation raffiné de consulter les absences...............................................................44

Liste des Tableaux

Liste des abréviations

La technologie fournit une variété d'outils qui stimulent le développement et l'échange

Chapitre 1 : Etude préalable

Comme toute entreprise du secteur public, ETAP fonctionne en partenariat Coopération

Figure 1:Siege Mohamed V

Figure 2: Organigramme d'ETAP

2.2 Critique de l’existant

L'utilisation de la méthode manuelle de traitement de la paperasserie a entraîné de

- Le manque d'espace de stockage, puisque la documentation de chaque document prend

- L'approbation et la vérification des documents prennent beaucoup de temps, un temps qui

- Le manque de transparence du processus est également considéré comme un problème

- Le manque de connaissances et d'outils d'admission et de suivi des processus, puisqu'il n'y

2.3 Solution Proposée

À mesure que le nombre de propriétaires d'entreprises et de sociétés qui investissent dans

- Le partage de la flexibilité et de la facilité et l'accélération du processus de travail.

3.1 Les différents types de méthodologie

 Les méthodes traditionnelles : autrement dit méthode classique, qui consiste à

3.2 Approches Agiles VS Classiques

 Proposition de solutions complètes

3.3 Choix de la méthodologie Agile SCRUM

3.3.2 Les Bases de SCRUM

 Transparence: Scrum valorise un langage commun.

3.3.3 Les Acteurs dans SCRUM

 L’équipe de développement: qui est chargée de la transformation des

 Le Scrum master : Il doit maîtriser l'intégralité de Scrum. Il doit s'assurer que

3.3.4 Processus SCRUM

Figure 3: Le fonctionnement général de la méthode Scrum

 Scrum est basé sur des itérations qu’on appelle sprints.

3.4 Choix du langage de modélisation

3.4.1 Définition UML

3.4.2 Principe UML

4.1 Environnement de développement

Figure 4: logo lucidchart

Figure 5: logo de visual Studio code

Figure 6: logo du XXAMP

- XAMPP est un acronyme, "X"->Multiplateforme, "A"->Apache server, "M"->MariaDB, "P"-

Figure 7: logo du POSTMAN

Figure 8 : logo du GitHub

GitHub est une plateforme d'hébergement de code pour la mise en version et la

4.2 Langage Utilisé

Figure 9: logo du HTML5

utilisées pour décrire l’apparence/présentation (CSS) ou la fonctionnalité/le comportement

Figure 10: logo CSS3

Figure 11: logo JavaScript

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language

Figure 12:logo de Bootstrap3

Bootstrap est un framework destiné à faciliter la création d’applications Web. Il regroupe

Figure 13:Logo de Laravel

MySQL un Système de Gestion de Bases de Données Relationnelles (SGBDR). Il est distribué

4.3 Architecture adoptée

 La couche Contrôleur: Il est responsable du routage des informations. Décidez qui