Rapport PFE Gestion de Budget

UNIVERSITE CADI AYYAD -Marrakech-
Département Informatique
Mémoire de Projet de Fin d'Etudes

Pour l'obtention du diplôme de Licence en Education
Spécialité Informatique (Enseignement secondaire)
Mise en place d’une

application web pour la
gestion de budget : cas d’ENS
Elaboré par : Encadré par :

BEN-LAGHFIRI Majeda Pr. NAIT MALEK Youssef
ZHIRI Rania
Soutenu le 22/06/2024 devant le jury :

Pr. AIT OUNEJJAR Lahoussaine
Pr. NAIT MALEK Youssef
Pr. EL GHARRAS Soumaya
Année universitaire 2023-2024

Dédicaces
Nous dédions ce travail :
À nos chers parents,

Nous vous devons ce que nous sommes aujourd'hui grâce à votre amour, à
votre patience et à vos innombrables sacrifices. Que ce modeste travail
soit pour vous une petite compensation et une reconnaissance envers ce
que vous avez fait d'incroyable pour nous. Que Dieu, le Tout-Puissant, vous
préserve et vous procure santé et longue vie afin que nous puissions, à
notre tour, vous combler.
À nos chères sœurs et nos chers frères,

Aucune dédicace ne saurait exprimer assez profondément ce que nous
ressentons envers vous. Nous vous disons, tout simplement, un grand merci,
nous vous aimons.
À nos chers amis,

En témoignage de l'amitié sincère qui nous a liés et des bons moments
que nous avons passés ensemble. Nous vous dédions ce modeste travail
en vous souhaitant un avenir radieux et plein de bonnes promesses.
Aujourd'hui, ici rassemblées auprès des jurys,

Nous prions Dieu que cette soutenance
Soit un signe de persévérance
Et que nous soyons enchantées
Par notre travail honoré.
Rania & Majeda

i
Remerciements
Nos remerciements les plus sincères vont à toute personne ayant eu la
bonté et la patience de satisfaire notre curiosité et de nous aider dans
notre travail par leurs précieux conseils, réponses et recommandations.
Nous tenons à remercier dans un premier temps, toute l'équipe

pédagogique de l’ENS et les intervenants professionnels responsables
de la formation sciences de l'informatique, pour avoir assuré la partie
théorique de celle-ci.
Nous exprimons notre profonde reconnaissance envers Mr. Nait Malek

Youssef pour son encadrement attentif tout au long de ce projet de fin
d’étude. Ses conseils avisés et son soutien constant ont été d'une aide
précieuse pour aborder les missions évoquées. Sa présence lors des
différents suivis a été source de guidance et de motivation, contribuant
ainsi à notre progression.
Nous remercions chaleureusement Mme. Dadda Hanaa pour son temps

précieux et ses indications éclairantes sur ses besoins. Sa générosité et
sa confiance en notre travail ont été des éléments essentiels qui nous
ont inspirées et motivées tout au long du projet.
Enfin, nous adressons nos plus sincères remerciements à toutes nos

proches et nos amies qui nous ont toujours soutenues et encouragées
au cours de la réalisation de ce projet de fin d’étude.
ii
Résumé
Ce rapport est le fruit de nos efforts dans le cadre de notre projet de fin d'études.
L'objectif principal de ce projet est de concevoir et de développer une application web
visant à simplifier la gestion du budget des vacataires à l'école normale supérieure (ENS).
L'application permettra aux différents administrateurs de gérer diverses tâches relatives
aux vacataires et au budget de l'ENS.
Cette initiative porte sur la gestion des paiements de chaque vacataire. Il est important
de noter qu'il existe une différence entre les vacataires et les heures supplémentaires ;
notre site concerne exclusivement les vacataires.
Notre projet s'est déroulé en trois phases. Tout d'abord, nous avons réalisé une analyse
du projet pour déterminer les spécifications et élaborer un cahier des charges. Ensuite,
nous sommes passés à la phase de conception, où nous avons traduit les fonctionnalités
en diagrammes à l'aide du langage UML. Enfin, nous avons mis en œuvre le projet en
utilisant le Framework Laravel (Basé sur le langage PHP) , ainsi que d'autres
technologies innovantes.
Mots clés : PHP , Laravel , UML , Budget des vacataires, ENS.
iii
Abstract
This report is the result of our efforts in the context of our final year project. The
primary goal e of this project is to create a web application that simplifies budget
management for adjunct professors. The application will allow administrators to handle
various associated with adjunct professors and the ENS budget.
This initiative aims to manage the payement processing for each adjunct professor. It’s
crucial to distinguish between adjunct professors and overtime; our platform is
specifically tailored for adjunct professors.
Our project was carried out in three phases. Firstly, we carried out a project analysis to
determine the requirements and draw up a specification. Next, we moved on to the
design phase, where we translated the functionalities into diagrams using the UML
language. Finally, we implemented the project using the Laravel framework ( Based on
the language PHP) , as well as other innovative technologies.
Keywords: PHP , Laravel , UML , Budget for temporary employees, ENS.
iv
Listes des figures
Figure 1 : Organigramme de l’ENS......................................................................................09

Figure 2 : Organigramme de service financier......................................................................10
Figure 3 :Organigramme processus (partie 1 )......................................................................11
Figure 4 :Organigramme processus (partie 2 )......................................................................12
Figure 5 : Principe de la méthodologie de développement 2TUP.........................................15
Figure 6 : Backlog de Github .............................................................................................17
Figure 7 : RoadMap .........................................................................................................17
Figure 8 : RoadMap (suite) ................................................................................................18
Figure 9 : Diagramme de cas d’utilisation Administrateur .................................................20
Figure 10 : Diagramme de classe.........................................................................................21
Figure 11 : Diagramme de séquence Connexion.................................................................22
Figure 12 : Diagramme de séquence Gestion des vacataires................................................23
Figure 13 : Diagramme de séquence Modifier un vacataire................................................24
Figure 14 : Diagramme de séquence Ajout d’un vacataire...................................................25
Figure 15 : Diagramme de séquence Gestion de calendrier..................................................26
Figure 16 : Diagramme de séquence Gestion de configuration........................................... 27
Figure 17 : Diagramme de séquence Ajouter admin.............................................................28
Figure 18 : Diagramme de séquence supprimer admin.........................................................28
Figure 18 : Diagramme de séquence supprimer admin.........................................................28
Figure 19 : Diagramme de séquence modifier admin...........................................................29
Figure 20 : Diagramme de séquence Ajouter un jour...........................................................29
Figure 21 : Architecture de Laravel.....................................................................................32
Figure 22 : Logo HTML......................................................................................................33
Figure 23 : Logo CSS..........................................................................................................33
Figure 24 : Logo SQL..........................................................................................................34
Figure 25 : Logo Discord.................................................................................................... 34
Figure 26 : Logo XAMPP....................................................................................................34
Figure 27 : Logo PHP..........................................................................................................34
Figure 28 : Logo Bootstrap.................................................................................................34
Figure 29 : Logo Laravel.....................................................................................................35
Figure 30 : Logo Vs Code...................................................................................................35
Figure 31 : Logo StarUml....................................................................................................35
Figure 32 : Logo MySQL.....................................................................................................35
Figure 33 : Logo GitHub....................................................................................................35
Figure 34: Logo Chart.js.....................................................................................................36
Figure 35 : Logo JavaScript.................................................................................................36
Figure 36 : Logo Breeze.......................................................................................................36
01
Listes des figures
Figure 37 : Logo Google Drive............................................................................................36

Figure 38 : Logo Livewire....................................................................................................37
Figure 39 : Logo Spatie........................................................................................................37
Figure 40 : Logo Tailwindcss...............................................................................................37
Figure 41 : Logo Canva.......................................................................................................37
Figure 42 : Logo DOMPDF................................................................................................38
Figure 43 : Logo AnyDesk...................................................................................................38
Figure 44 : Logo Full Calendar............................................................................................38
Figure 45 : Page Login ........................................................................................................40
Figure 46 : Page Accueil.......................................................................................................41
Figure 47 : Page Gestion des vacataires...............................................................................42
Figure 48 : Page Ajouter vacataire.......................................................................................42
Figure 49 : Page Afficher vacataire .....................................................................................43
Figure 50 : Page Modifier vacataire.....................................................................................43
Figure 51 : Page Calendrier..................................................................................................44
Figure 52 : Page Calendrier..................................................................................................44
Figure 53 : Page Documents................................................................................................45
Figure 54 : Page Configuration............................................................................................46
Figure 55 : Page Infos Budgétaires.......................................................................................47
Figure 56 : Page Modifier Infos Budgétaires......................................................................47
Figure 57 : Page Rôles ........................................................................................................48
Figure 58 : Page Rôles/Permission ......................................................................................48
Figure 59 : Page Ajouter Rôles............................................................................................49
Figure 60 : Page Permission.................................................................................................49
Figure 61 : Page Ajouter Permission ...................................................................................50
Figure 62 : Page Modifier Permission .................................................................................50
Figure 63 : Page Ajouter Sous Admin..................................................................................51
Figure 64 : Page Modifier Sous Admin................................................................................51
Figure 65 : Page Ajouter Jour férié......................................................................................52
Figure 66 : Page Modifier Jour Férié...................................................................................52
Figure 67 : Menu header......................................................................................................53
Figure 68 : Page Mes informations......................................................................................53
Figure 69 : Page Paramètres.................................................................................................53
Figure 70 : Mind map Gestion-Budget-ENS........................................................................56
02
Listes des acronymes
ENS Ecole Normale Supérieure
DA Directeur Adjoint
SF Service financier
SRH Le service des ressources humaines
UML Le Langage de Modélisation Unifié
HTML Le HyperText Markup Language
CSS Cascading Style Sheets
SQL Structured Query Language
VoIP Voice over Internet Protocol
XAMPP Cross-Platform, Apache, MySQL, PHP, and Perl
PHP Hypertext Preprocessor
HTTP Hypertext Transfer Protocol
MIT The Massachusetts Institute of Technology
GPL GNU General Public License
API Application programming interface
CV Curriculum Vitae
03
Table des matières
Dédicaces........................................................................................................................i
Remerciements..............................................................................................................ii
Résumé.........................................................................................................................iii
Abstract........................................................................................................................iv
Liste des figures............................................................................................................01
Liste des acronymes.....................................................................................................03
Table de matière.......................................................................................................... 04
Introduction générale..................................................................................................06
Chapitre I: Étude fonctionnelle et analyse des besoins

1. Introduction.....................................................................................................................09
2. Organisme d’accueil : ENS de Marrakech........................................................................09
2.1 Présentation générale..................................................................................................09
2.2 Organigramme...........................................................................................................09
3. Cadre général du projet....................................................................................................10
3.1 Vacataire : Description des activités du processus......................................................10
3.2 Présentation générale du projet..................................................................................12
3.3 Les besoins de service financier..................................................................................13
4. Problématique..................................................................................................................13
5. Identification des acteurs et leurs rôles.............................................................................13
6. Identification des besoins fonctionnels.............................................................................14
7. Identification des besoins non fonctionnels......................................................................15
8. Choix du cycle de développement....................................................................................15
9. Planification du projet.....................................................................................................17
10. Conclusion.....................................................................................................................18
Chapitre II: Conception du projet

1. Introduction ....................................................................................................................20
2. Vue fonctionnelle du système : diagramme .......................................................................20
2.1 Diagramme de cas d’utilisation ................................................................................20
2.2 Diagramme de classe ...............................................................................................21
2.3 Diagramme de séquence ..........................................................................................22
3. Conclusion .......................................................................................................................30
04
Chapitre III: Étude technique
1. Introduction ..................................................................................................................32
2. Outils et Technologies de Développement .....................................................................32
2.1 Architecture physique ..............................................................................................32
2. 2 Choix et outils utilisés .............................................................................................33
3. Conclusion .....................................................................................................................38
Chapitre IV: Mise en œuvre

1. Introduction...................................................................................................................40
2. Les interfaces de l’application.........................................................................................40
2.1 Page Login............................................................................................................40
2.2 Page Accueil..........................................................................................................41
2.3 Page Gestion des vacataires ..................................................................................42
2.3.1 Liste des vacataires....................................................................................42
2.3.2 Ajouter vacataire.......................................................................................42
2.3.3 Aperçu un vacataire...................................................................................43
2.3.4 Modifier un vacataire.................................................................................43
2.4 Page Calendrier.....................................................................................................44
2.5 Page Documents ..................................................................................................45
2.6 Page Configuration...............................................................................................46
2.6.1 Page info budgétaires.................................................................................47
2.6.2 Page Modifier Info budgétaires..................................................................47
2.6.3 Page Rôles.................................................................................................48
2.6.4 Page Ajouter/Modifier Rôle Permission.....................................................48
2.6.5 Page Ajouter Rôle......................................................................................49
2.6.6 Page Permissions........................................................................................49
2.6.7 Page Ajouter Permission............................................................................50
2.6.8 Page Modifier Permission..........................................................................50
2.6.9 Page Ajouter Sous Admin..........................................................................51
2.6.10 Page Modifier Sous Admin......................................................................51
2.6.11 Page Ajouter Jour Férié...........................................................................52
2.6.12 Page Modifier Jour Férié.........................................................................52
2.7 Page Mes informations .........................................................................................53
2.8 Page paramètres ...................................................................................................53
Conclusion générale....................................................................................................54
Webographie .............................................................................................................55
Annexes......................................................................................................................56
05
Introduction générale
Depuis quelques décennies, les systèmes d'information sont devenus des outils indispensables
dans tous les domaines, y compris ceux que l'on pensait autrefois en être éloignés. En effet, il
est aujourd'hui inconcevable d'imaginer une administration, un hôpital, une entreprise ou une
école sans système d'information. Leur utilité va de la simple saisie des avis internes à la gestion
complète des diverses activités de l'organisme.
Pour qu'une entreprise puisse gérer de manière optimale et efficace ses différentes ressources,
elle doit impérativement disposer d'un système d'information robuste et évolutif, tout en étant
facile à utiliser pour les usagers. Sinon, ce qui est censé être un outil d'aide risque de devenir un
obstacle.
Un système d'information comprend à la fois l'infrastructure et les logiciels d'application.

L'infrastructure peut être résumée comme le matériel informatique tel que les ordinateurs
personnels, les serveurs, les imprimantes et tous les équipements bureautiques informatiques,
ainsi que le réseau qui permet le partage des ressources et la communication interne et externe.
En ce qui concerne la partie applicative d'un système d'information, elle constitue un élément
crucial de sa solidité. Il est donc essentiel de concevoir des progiciels capables de tirer parti de
toute la puissance de l'infrastructure, tout en rendant celle-ci transparente pour les utilisateurs,
en offrant des fonctionnalités avancées et une ergonomie optimale.
Dans le cadre de la formation CLE-INFORMATIQUE à l'École Normale Supérieure

Marrakech, nous avions pour objectif de réaliser un projet complet afin de développer notre
autonomie et notre responsabilité, de faciliter notre intégration professionnelle, d'approfondir
nos connaissances et de perfectionner notre formation.
De nos jours, l'informatique est considérée comme un outil indispensable pour toute entreprise
qui ne souhaite pas rester à l'écart de la mondialisation. Cependant, il est indéniable qu'il y a
encore un manque de systèmes informatiques dans le parcours de la plupart des étudiants,
même dans les filières informatiques.
Dans le cadre de notre projet de fin d’études, l'École Normale Supérieure Marrakech nous a
confié la mission de concevoir et de réaliser une application web pour la gestion du budget des
vacataires. Cette application, simple à utiliser, nécessite un accès sécurisé via un identifiant et
un mot de passe, et permet de gérer le traitement des dossiers des vacataires. Dans ce projet
plusieurs outils ont été utilisés pour développer les différents modules durant notre stage au
sein du service financier.
06
Ce rapport explique clairement les différentes étapes suivies pour réaliser le travail demandé.
Nous commençons le rapport par une présentation générale dans laquelle nous exposons le
sujet de l'application et en 4 grands chapitres :
Chapitre I : Etude fonctionnelle et analyse des besoins

Ce chapitre dédié à à réaliser une étude théorique basée sur la description et la problématique
du sujet.
Chapitre II : Conception du projet

Ce chapitre consacré à la conception détaillée et à l'analyse qui explicite les différents
diagrammes que nous avons construits durant la phase de conception en se basant sur le
langage semi formel UML2.
Chapitre III: Étude Technique

Ce chapitre sera dédié à une étude technique approfondie du projet, mettant en évidence
l'environnement logiciel utilisé ainsi que les diverses techniques de réalisation.
Chapitre IV: Mise en œuvre

Ce chapitre est consacré à la description de la phase de mise en œuvre de l’application.
Enfin, une conclusion générale clôturera ce rapport tout en évoquant les perspectives qui
peuvent étendre notre projet de fin d'études dans le futur.
07
CHAPITRE I:
ÉTUDE
FONCTIONNELLE ET
ANALYSE DES BESOINS
Sommaire
1. Introduction....................................................................................................09
2. Organisme d’accueil : ENS de Marrakech.......................................................09
2.1 Présentation générale................................................................................09
2.2 Organigramme..........................................................................................09
3. Cadre général du projet...................................................................................10
3.1 Vacataire : Description des activités du processus.....................................10
3.2 Présentation générale du projet.................................................................12
3.3 Les besoins de service financier.................................................................13
4. Problématique.................................................................................................13
5. Identification des acteurs et leurs rôles............................................................13
6. Identification des besoins fonctionnels............................................................14
7. Identification des besoins non fonctionnels.....................................................15
8. Choix du cycle de développement....................................................................15
9. Planification du projet.....................................................................................17
10. Conclusion....................................................................................................18
Ce chapitre présente le projet, la problématique à résoudre, et la

solution adoptée. Il explique comment cette solution répond aux
besoins identifiés.
08
chapitre I : Étude fonctionnelle et analyse des besoins
1) Introduction
Ce chapitre présente le contexte général du projet en introduisant une brève description de ce

dernier, la problématique à résoudre ainsi que la solution adoptée.
2) Organisme d’accueil : ENS de Marrakech
2.1 Présentation générale

L’Ecole Normale Supérieure de Marrakech fut créée en 1979, à l’instar des autres ENS du
Maroc, sous la tutelle du Ministère de l’Education Nationale. Elle a depuis développé une
expertise actée par la formation des professeurs de l’enseignement secondaire.
2.2 Organigramme
2.2.1 L’école normale supérieure Marrakech
Figure 1 :Organigramme de l’ENS
09
2.2.1 Service financier
Figure 2 :Organigramme de service financier
Les services financiers désignent toute prestation de nature financière, incluant les services
d’assurance et les services connexes, ainsi que tous les services bancaires et autres services financiers.
Nous avons effectué un stage dans ce service de février à juin afin de répondre à ses besoins.
3) Cadre général du projet
3.1 Vacataire : Description des activités du processus
Les vacataires d'enseignement sont recrutés pour dispenser ponctuellement des heures
d'enseignement dans le cadre d'activités pédagogiques, ils sont recrutés au niveau de chaque
département selon les besoins validés.
L’intégration d’un vacataire se fait par le processus suivant :
1- Une semaine avant le début des cours, le professeur ou le vacataire dépose son dossier heures
supplémentaires/ vacation auprès du directeur adjoint .
2- Le directeur adjoint vérifie la conformité du dossier;
3- Si le dossier n'est pas conforme, il sera remis à l'intéressé pour complément,
4- Si le dossier est conforme, Le directeur adjoint remet le dossier au service
des ressources humaines, (il faudra trancher sur cette partie: dossier complet ou pas).
10
5- Le service des ressources humaines vérifie la conformité du dossier administratif et

remet l'annexe 1 et l'annexe 2 pour signature auprès du Le directeur adjoint et après
signature il l'envoie à la présidence.
6- Après retour de la présidence et si le dossier n'est pas signé, il sera remis au vice
Doyen pour vérification et correction:
7- Si corrigé, il sera retourné à la présidence pour signature. Sinon, il n'aura favorable: pas
de suite
8- Si le dossier est signé au niveau de la présidence, il sera remis au service financier. (par
qui ?)
9- Le service financier vérifie la conformité de la partie du dossier nécessaire au paiement,
et assure sa remise au paiement.
Voici un organigramme qui illustre ce processus :
Figure 3 :Organigramme processus ( partie 1)
11
Figure 4 :Organigramme processus ( partie 2)
3.2 Présentation générale du projet
Le service financier est également chargé de traiter les dossiers de vacation afin de finaliser le
processus. Cependant, ce service rencontre plusieurs problèmes pour traiter les dossiers ainsi
que pour calculer les montants et le budget général des vacataires.
Notre projet de fin d'études vise à simplifier la gestion du budget des vacataires à l'ENS.
Nous proposons une application web pour rendre cette gestion plus simple et plus
transparente, afin d'optimiser les ressources disponibles pour les vacataires.
12
3.3 Les besoins de service financier
Le service financier de l'ENS veut Faciliter le traitement des dossiers de vacation au sein du
service ; Il est besoin d’une application web pour simplifier les procédures de traitement et
diminuer les erreurs .
L’application comprend :
Les documents de paiement ( ordre de paiement 1 + ordre de virement + état de
paiement + ordre de paiement 2 + état percepteur ) .
Traitement et calcul des indemnités en respectant les lois en vigueurs selon l’heure et le
diplôme .
Un calendrier pour l’ajout des séance .
Des statistiques.
Une base de données des vacataires de l’ENS .
4) Problématique
Comment concevoir une plateforme de gestion budgétaire efficace pour les vacataires de
l'ENS, qui simplifie le processus de traitement des dossiers de vacation au sein du service
financier, facilite la validation des heures, automatise le calcul des montants, répond aux
besoins opérationnels et garantit une gestion financière claire ?
5) Identification des acteurs et leurs rôles
Acteur principal :
✓ Admin :
▪Se connecter.
▪Responsable de la gestion globale de site.
▪Gérer les vacataires.
▪Modifier ses informations.
▪Analyser et gérer les statistiques relatives au budget.
▪Saisir les heures de vacations effectuées .
▪Saisir les informations budgétaires de l’ENS (montant consacré pour les vacataires).
▪Gérer les Niveaux : ajout d’un diplôme (intitulé {Licence , Master , Doctorat) et
montant) suppression.
▪Gérer les jours fériés : ajout , modification , suppression.
▪Gérer les comptes administrateurs : ajout , suppression , modification.
13
6) Identification des besoins fonctionnels
Les services proposés par notre application web se résument en deux acteurs majeurs :
Elle permet à l’admin et le sous-admin ( selon les rôles et permissions ) de :
Se connecter :
▪À travers son email et mot de passe.
Modifier ses informations.
Supprimer, ajouter ou apercevoir un vacataire.
Afficher des informations sur l’état du budget (budget initial , budget restant).
Afficher des statistiques sur les vacataires ( nombre de diplôme).
Afficher les jours fériés à venir.
Saisir les heures de vacations effectuées pour chaque vacataire et il ne peut pas cocher
les jours fériés.
Enregistrer les données budgétaires de l'ENS, y compris les montants alloués aux
vacataires.
Inclure l'ajout et la suppression des niveaux de diplômes avec leurs montants associés.
Gérer les jours fériés : permettre l'ajout, la modification et la suppression des jours
fériés.
Permettre à l'administrateur principal d'attribuer des sous-administrateurs, leur
accordant ainsi des rôles et des permissions, et de supprimer ou modifier ces comptes
administrateurs selon les besoins.
--Permission "gestion vacataires" : le sous-admin peut accéder à la page de gestion

des vacataires (liste des vacataires), ainsi qu'ajouter, modifier, afficher ou supprimer un
vacataire.
--Permission "gestion calendrier" : le sous-admin peut accéder à la page du calendrier
pour ajouter ou supprimer une séance ( saisir les heures effectuées par jour) pour un
vacataire, ainsi que consulter le total des heures effectuées.
--Permission "gestion documents" : le sous-admin peut accéder à la page des documents
pour télécharger les documents correspondants à chaque vacataire.
--Permission "gestion configuration" : le sous-admin peut accéder à la page de
configuration qui concerne toute la configuration du site (gestion du budget, des taux, des
jours fériés, des rôles, des permissions, et des autres sous-admins( les compte
administrateurs). Cette page est principalement destinée à l'administrateur principal, mais
elle a été ajoutée pour permettre à celui-ci de solliciter l'aide de quelqu'un si nécessaire.
14
7) Identification des besoins non fonctionnels
Les besoins non fonctionnels sont des exigences qui ne concernent pas spécifiquement le
comportement du système mais plutôt identifient des contraintes internes et externes du système.
Les principaux besoins non fonctionnels de notre application web se résume dans les points
suivants :
▪L’application doit avoir une interface conviviale , souple et exploitable par l’utilisateur.
▪ Le design doit être simple et pratique pour l'utilisateur. Il est nécessaire d'adapter le
corps du site en fonction des dimensions de l'appareil.
▪L'autoformation sur des frameworks et des langages de programmation tels que
Laravel.
▪ Le code de l’application doit être compréhensible et lisible pour minimiser l’effort
d’évolution du système et pour localiser et corriger les erreurs facilement.
8) Choix du cycle de développement
Pour tout projet informatique, il est primordial de spécifier un cycle de vie de projet
informatique qui régira toute la période du projet. Étant donné les spécificités de notre projet,
notamment l’aspect éducatif et académique de ce projet, ce qui nous contraignait à apprendre
beaucoup, parfois par l’erreur, tout au long, nous avons opté pour un cycle de vie en Y.
Figure 5 :Principe de la méthodologie de développement 2TUP
15
-> Branche fonctionnelle :

Les principales étapes de la branche fonctionnelle se présentent comme suit :
L’étape capture des besoins fonctionnels a pour objectif de définir :

- La frontière fonctionnelle entre le système et son environnement.
- Les activités attendues des différents utilisateurs par rapport au système.
L’étape d’analyse : consiste à étudier précisément les spécifications fonctionnelles de
manière à obtenir une idée de ce que va réaliser le système en termes de métier.
-> Branche technique :

Les principales étapes de la branche technique se présentent comme suit :
L’étape capture des besoins techniques : Cette étape recense toutes les contraintes sur
les choix de technologies pour la conception du système. Les outils et le matériel
sélectionnés ainsi que la prise en compte des contraintes d’intégration avec l’existant
(pré requis d’architecture technique).
L’étape architecture matérielle et logiciel: Définit les composants nécessaires à la
construction de l’architecture technique. Cette conception est complètement
indépendance des aspects fonctionnels. Elle permet de générer le modèle de conception
technique qui définit les Framework.
-> Branche de conception et développement logiciel

Les principales étapes de cette branche se présentent comme suit:
L’étape conception préliminaire: cette étape permet de produire le modèle de

conception système. Ce dernier organise le système en composants, délivrant les
services techniques et fonctionnels, ce qui induit le regroupement des informations des
branches techniques et fonctionnelles.
L’étape conception détaillée: permet d’étudier comment réaliser chaque composant. Le
résultat fournit l’image prête fabriquée du système complet.
L’étape de codage : permet d’effectuer la production des composants et les tests des
unités de code au fur et à mesure de leur réalisation.
L’étape de recette: consiste à valider les fonctionnalités du système développé.
16
9) Planification du projet
La planification joue un rôle essentiel en assurant le bon déroulement du projet à chaque étape
de son cycle de développement.
La figure ci-dessous expose le planning qui a dirigé la mise en œuvre du projet:
Figure 6 :Backlog de Github
Figure 7 : RoadMap
17
Figure 8 : RoadMap (suite)
10) Conclusion
Ce chapitre met en perspective notre projet en présentant la solution adoptée pour résoudre
les problèmes identifiés et répondre à nos besoins, ainsi que la méthode de suivi employée
pour le projet.
Dans le prochain chapitre, nous exposerons la conception qui a été appliquée durant toute
la mise en œuvre de ce projet.
18
CHAPITRE II:
CONCEPTION
DU PROJET
Sommaire
1. Introduction ...................................................................................................20
2. Vue fonctionnelle du système : diagramme .....................................................20
2.1 Diagramme de cas d’utilisation ...............................................................20
2.2 Diagramme de classe................................................................................21
2.3 Diagramme de séquence ..........................................................................22
3. Conclusion......................................................................................................30
Ce chapitre vise à formaliser les diagrammes fonctionnels présentés,

afin de clarifier les concepts, faciliter la communication entre les
parties prenantes, et établir des bases solides pour la conception et
la mise en œuvre.
19
Chapitre II : CONCEPTION DU PROJET
1) Introduction
Dans cette section, nous allons reproduire les différents besoins cités précédemment sous la
forme de diagrammes UML.
UML : Le Langage de Modélisation Unifié, de l'anglais Unified Modeling Language (UML),
est un langage de modélisation graphique à base de pictogrammes conçu comme une méthode
normalisée de visualisation dans les domaines du développement logiciel et en conception
orientée objet.
2) Vue fonctionnelle du système : diagramme
2.1) Diagramme de cas d’utilisation
Le diagramme des cas d'utilisation (Use Case Diagram) constitue la première étape de l’analyse
UML en :
✓ Modélisant les besoins des utilisateurs.
✓ Identifiant les grandes fonctionnalités et les limites du système.
✓ Représentant les interactions entre le système et ses utilisateurs.
Le diagramme des cas d’utilisation apporte une vision utilisateur et absolument pas une vision
informatique. Il ne nécessite aucune connaissance informatique et l’idéal serait qu’il soit réalisé
par le client ou l’utilisateur.
Figure 9 : Diagramme de cas d’utilisation Administrateur
20
L'administrateur est responsable de la gestion globale de l’application , y compris la modification

de ces informations personnelles, gestion des vacataires , des documents , des emplois du temps ,
le calendrier et la configuration de l’application.
-Pour gestion des vacataires , la page affiche la liste des vacataires, à partir de cette liste,
l'administrateur peut ajouter, modifier ou supprimer un vacataire, cette dernière opération étant
effectuée en utilisant l'ID du vacataire.
-Pour gestion des document , la page affiche la liste des vacataires , et l’administrateur peut
télécharger les documents nécessaires de chaque vacataire. Il y a cinq documents :ordre de
paiement 1 , ordre de virement , état de paiement , ordre de paiement 2 , état percepteur.
2.2) Diagramme de classe
Figure 10 : Diagramme de classe
21
2.3) Diagramme de séquence
La figure 11 représente le diagramme de séquence de la connexion de l’Admin
Figure 11 : Diagramme de séquence Connexion
Après que l'administrateur accède à l'application, le système affiche un formulaire de connexion.

L'administrateur doit alors renseigner son adresse e-mail et son mot de passe. Le système envoie ces
informations à la base de données pour vérification. Deux cas de figure sont possibles :
Informations correctes : le système affiche la page d'accueil.
Informations incorrectes : le système affiche une erreur de connexion.
22
La figure 12 représente le diagramme de séquence de gestion des vacataires :
Figure 12 : Diagramme de séquence Gestion des vacataires
Après que l'administrateur demande la liste des vacataires, le système récupère les informations
des vacataires depuis la base de données et prépare une liste à afficher. À partir de cette liste,
l'administrateur peut ajouter, modifier ou supprimer un vacataire. Cette dernière tâche est
effectuée en utilisant l'ID du vacataire, et le système affiche alors un message de confirmation à
l'administrateur. Deux possibilités s'offrent à lui :
Non : le système annule l'opération.
Oui : le vacataire est supprimé avec succès.
23
La figure 13 représente le diagramme de séquence de modification d’un vacataire :
Figure 13 : Diagramme de séquence Modifier un vacataire
Pour modifier un vacataire, le système utilise également l'ID du vacataire pour récupérer ses
informations et afficher le formulaire de modification. Après que l'administrateur a saisi les
nouvelles informations, le système effectue une vérification :
Si les informations sont erronées, le système affiche une erreur de modification.
Si les informations sont correctes, le système envoie les nouvelles données à la base de données
et la mise à jour du vacataire est effectuée avec succès.
24
La figure 14 représente le diagramme de séquence d’Ajout d’un vacataire :
Figure 14 : Diagramme de séquence Ajout d’un vacataire
Pour ajouter un vacataire, le système affiche un formulaire d'ajout. Après que l'administrateur a
saisi les informations du nouveau vacataire, le système effectue une vérification :
Si les informations existent déjà, le système signale que les informations sont erronées.
Sinon, le système envoie ces informations à la base de données et l'enregistrement est effectué
avec succès.
25
La figure 15 représente le diagramme de séquence de gestion de calendrier
Figure 15 : Diagramme de séquence de Gestion de calendrier
L'administrateur peut demander le calendrier de chaque vacataire. Le système affiche alors le

calendrier en utilisant l'ID de ce vacataire.
Si l'administrateur souhaite saisir une séance, le système affiche une alerte pour l'ajout du
nombre d'heures. Après la saisie, la séance est stockée dans la base de données.
26
La figure 16 représente le diagramme de séquence de configuration de l’application :
Figure 16 : Diagramme de séquence de Gestion de configuration
Pour la configuration, l'administrateur peut afficher les informations budgétaires

ainsi que la liste des administrateurs, après que le système a récupéré les
informations de la base de données. À partir de cette liste, l'administrateur peut
ajouter, modifier ou supprimer des entrées. La même procédure s'applique pour les
jours fériés.
27
La figure 17 représente le diagramme de séquence d’ajout d’un admin :
Figure 17 : Diagramme de séquence ajouter admin
La figure 18 représente le diagramme de séquence de suppression d’un admin :
Figure 18 : Diagramme de séquence supprimer admin
28
La figure 19 représente le diagramme de séquence de modification d’un admin :
Figure 19 : Diagramme de séquence modifier admin
La figure 20 représente le diagramme de séquence d’ajout d’un jour férie
Figure 20 : Diagramme de séquence ajouter un jour
Pour ajouter un jour férié, il suffit de saisir la date et l'événement. Pour la modification
et la suppression, le même principe que pour la modification et la suppression des
administrateurs est appliqué.
29
3) Conclusion
Après avoir présenté les diagrammes fonctionnels de notre application, tels que
les diagrammes de cas d'utilisation et les diagrammes de séquence, nous allons
maintenant passer à leur formalisation. Cette étape est essentielle pour clarifier les
concepts et les relations entre les différents éléments de l'application. Elle
permettra également de faciliter la communication entre les parties prenantes du
projet et de poser des bases solides pour la conception et la mise en œuvre de
l'application.
30
CHAPITRE III:
ÉTUDE TECHNIQUE
Sommaire
1. Introduction ...................................................................................................32
2. Outils et Technologies de Développement ......................................................32
2.1 Architecture physique ..............................................................................32
2.2 Choix et outils utilisés ..............................................................................33
3. Conclusion .....................................................................................................38
Ce chapitre décrit l'architecture de l'application ainsi que les divers

outils et technologies employés durant la phase de développement.
31
Chapitre III : Étude technique
1)Introduction
Dans ce troisième chapitre nous présentons, en premier lieu, l’environnement de travail et nous
justifions les choix du langage de programmation et la technologie de développement appliqué.
2)Outils et Technologies de Développement :
2.1) Architecture physique:
Laravel peut gérer le niveau de complexité élevé requis pour les applications d'entreprise qui
nécessitent un backend, y compris les comptes d'utilisateurs, les exportations et les systèmes de
gestion des commandes. Cela peut également aider les débutants à créer des applications de base
plus durables et stables.
Figure 21 : Architecture de Laravel
-- Un serveur web Apache est capable de traiter les demandes HTTP reçues sur le port dédié
au protocole HTTP, puis de renvoyer des réponses en utilisant ce même protocole.
-- Un serveur de base de données MySQL est responsable de la gestion du stockage et de la

manipulation des données.
32
Pour model :
Les Laravel Model Factories définissent les enregistrements de la base de données d'une
manière prévisible et facilement reproductible afin que les tests de votre application soient
cohérents et contrôlés. Les usines de modèles définissent un ensemble d'attributs par défaut
pour chacun de vos modèles Eloquent.
Pour Controller :
Ce sont simplement des classes qui ont comme objectif de regrouper les fonctions qui vont
contenir la logique de notre application. Au niveau de Laravel, je peux créer un contrôleur
grâce à la commande php artisan make:controller .
Pour view :
Les vues contiennent le code HTML du site. Créer une vue signifie donc créer un fichier
contenant du HTML qui sera retourné par une route.
2.2) Choix et outils utilisés:
HTML (HyperText Markup Language) est un langage de balisage

fondamental utilisé pour créer et structurer le contenu d'une page web.
Son rôle central dans le développement web en fait un élément
indispensable pour la création d'interfaces utilisateur interactives et
dynamiques sur Internet.
Figure 22 : Logo HTML
CSS (Cascading Style Sheets) représente un langage de style essentiel

utilisé pour définir l'esthétique et la mise en forme d'une page web créée
en HTML. Son rôle primordial dans le développement web réside dans
sa capacité à séparer la structure et le contenu (HTML) de l'apparence
visuelle, contribuant ainsi à la création d'interfaces utilisateur élégantes
et uniformes.
Figure 23 : Logo CSS
33
SQL est un langage informatique normalisé servant à exploiter des

bases de données relationnelles. La partie langage de manipulation
des données de SQL permet de rechercher, d'ajouter, de modifier ou
de supprimer des données dans les bases de données relationnelles.
Outre le langage de manipulation des données..
Figure 24 : Logo SQL
Discord est une plateforme de VoIP et de messagerie instantanée. Il

fonctionne sur les systèmes d’exploitation Windows, macOS, Linux,
Android, iOS ainsi que sur les navigateurs web. Il est distribué sous
forme de freeware et développé avec une licence propriétaire.
Figure 25 : Logo Discord
XAMPP est un ensemble de logiciels permettant de facilement

créer une interface web interagissant avec une base de données
SQL!
- X pour cross-plateforme (LAMPP pour Linux, WAMPP pour
Windows,...)
- A pour Apache
- M pour MySQL
Figure 26 : Logo XAMPP - P pour PHP
- P pour Perl
PHP: Hypertext Preprocessor, plus connu sous son sigle PHP (sigle
auto-référentiel), est un langage de programmation libre,
principalement utilisé pour produire des pages Web dynamiques via
un serveur HTTP, mais pouvant également fonctionner comme
n'importe quel langage interprété de façon locale. PHP est un
Figure 27 : Logo PHP langage impératif orienté objet.
Bootstrap est un Framework développé par l'équipe du réseau social

Twitter. Proposé en open source, ce Framework utilisant les langages
HTML, CSS et JavaScript fournit aux développeurs des outils pour
créer un site facilement. Ce Framework est pensé pour développer des
sites avec un design responsive, qui s'adapte à tout type d'écran, et en
priorité pour les smartphones.
Figure 28 : Logo Bootstrap
34
Laravel est un framework web open-source écrit en PHP

respectant le principe modèle-vue-contrôleur et entièrement
développé en programmation orientée objet. Laravel est distribué
sous licence MIT, avec ses sources hébergées sur GitHub.
Figure 29 : Logo Laravel
Visual Studio Code (VSCode) est un outil gratuit créé par

Microsoft pour aider les développeurs à écrire du code
informatique. Il fonctionne sur différents systèmes d'exploitation
comme Windows, Linux et Mac. VSCode prend en charge de
nombreux langages de programmation et propose des
fonctionnalités telles que la coloration syntaxique, l'auto-
complétion du code et le débogage pour faciliter le processus de
Figure 30 : Logo Vs Code
développement.
StarUML est un logiciel de modélisation UML qui offre une

interface utilisateur graphique conviviale et des fonctionnalités
puissantes pour la création de différents types de diagrammes
UML,tels que les diagrammes de classes, les diagrammes de
séquence, les diagrammes d'activités, les diagrammes de cas
Figure 31 : Logo StarUml d'utilisation, etc.
MySQL est un système de gestion de bases de données

relationnelles SQL open source développé et supporté par Oracle. Il
est distribué sous une double licence GPL et propriétaire.
Figure 32 : Logo MySQL
La plateforme GitHub va contenir quant à elle les dépôts dans le

cloud afin que les développeurs arrivent à travailler sur un même
projet et distinguent en temps réel les modifications apportées par
les autres développeurs. GitHub permet également d'organiser et de
gérer les projets.
Figure 33 : Logo GitHub
35
Chart.js est une bibliothèque JavaScript open source gratuite pour

la visualisation de données. Créée par le développeur web Nick
Downie en 2013, la bibliothèque est maintenant maintenue par la
communauté et est la deuxième bibliothèque de graphiques JS la
plus populaire sur GitHub par le nombre d'étoiles après D3.js.
Figure 34 : Logo Chart.js
JavaScript est un langage de programmation de scripts

principalement employé dans les pages web interactives et à ce titre
est une partie essentielle des applications web.
Figure 35 : Logo JavaSciript
Breeze : C'est un package minimaliste pour l'authentification qui

fournit une mise en place rapide de l'authentification via les
plateformes Laravel Jetstream et Tailwind CSS. Il simplifie
grandement le processus d'ajout de fonctionnalités
Figure 36 : Logo Breeze d'authentification à une application Laravel.
Google Drive est un cloud (nuage en anglais), ce qui signifie qu'il

peut enregistrer tous vos documents dans un endroit (appelé
serveur) sur internet. Cela vous permet de les récupérer, modifier et
utiliser à tous moments, n'importe où sur la planète.
Figure 37: Logo Google Drive
36
Livewire est une librairie, develope par Caleb Porzio, qui nous
permet de construire des interfaces réactives et dynamiques en
utilisant Blade et un peu de JavaScript.
Figure 38 : Logo Livewire
Spatie Laravel est un package open source populaire qui facilite la

gestion des rôles et des permissions dans Laravel. Il offre une API
élégante pour définir des rôles, attribuer des permissions à ces rôles
et vérifier si un utilisateur a la permission d'effectuer une action
spécifique.
Figure 39 : Logo Spatie
Tailwind CSS est un framework CSS open source. La fonctionnalité

principale de cette bibliothèque est, contrairement à d'autres
frameworks CSS comme Bootstrap, qu'elle ne procure pas une série
de classes prédéfinies pour des éléments tels que des boutons ou des
tables.
Figure 40 : Logo Tailwindcss
CANVA est un outil graphique qui permet aux utilisateurs de

réaliser des logos, des invitations, des publications pour vos réseaux
sociaux, des CV, des flyers et beaucoup d’autres choses. En
choisissant CANVA, vous pouvez aussi bénéficier de divers outils en
matière de vidéo, d’audio et d’animation.
Figure 41 : Logo Canva
37
Le package laravel-dompdf est un wrapper Laravel pour la

bibliothèque Dompdf qui permet de convertir du code HTML en
fichiers PDF (Portable Document Format).
Figure 42 : Logo DOMPDF
AnyDesk est une application de bureau à distance distribuée par

AnyDesk Software GmbH. Le logiciel propriétaire fournit un
accès à distance indépendant de la plate-forme aux ordinateurs
personnels et autres appareils exécutant l'application hôte.
Figure 43 : Logo AnyDesk
Fullcalendar est une bibliothèque JavaScript open-source

populaire utilisée pour créer des calendrier interactifs dans des
applications web .
Figure 44 : Logo Full Calendar
3) Conclusion :
L'étude technique a consisté à examiner diverses technologies susceptibles de répondre à nos

besoins et à sélectionner celles qui sont les plus modernes et les mieux adaptées aux exigences
du projet. Les outils utilisés ont été choisis après des études comparatives, afin de garantir une
application moderne, ergonomique et intuitive, sécurisée, hautement performante, extensible,
évolutive, et facile à maintenir.
38
CHAPITRE IV:
MISE EN ŒUVRE
Sommaire
1. Introduction ....................................................................................................40
2. Les interfaces de l’application..........................................................................40
2.1 Page Login ................................................................................................40
2.2 Page accueil...............................................................................................41
2.3 Page gestion vacataire...............................................................................42
2.3.1 Liste des vacataires..........................................................................42
2.3.1 Ajouter vacataire..............................................................................42
2.3.1 Aperçu un vacataire.........................................................................43
2.3.1 Modifier un vacataire.......................................................................43
2.4 Page calendrier..........................................................................................44
2.5 Page documents..........................................................................................45
2.6 Page configuration.....................................................................................46
2.6.1 Page info budgétaires......................................................................47
2.6.2 Page Modifier Info budgétaires.......................................................47
2.6.3 Page Rôles......................................................................................48
2.6.4 Page Ajouter/Modifier Rôle Permission.........................................48
2.6.5 Page Ajouter Rôle..........................................................................49
2.6.6 Page Permissions............................................................................49
2.6.7 Page Ajouter Permission................................................................50
2.6.8 Page Modifier Permission...............................................................50
2.6.9 Page Ajouter Sous Admin..............................................................51
2.6.10 Page Modifier Sous Admin...........................................................51
2.6.11 Page Ajouter Jour Férié.................................................................52
2.6.12 Page Modifier Jour Férié..............................................................52
2.7 Page mes informations...............................................................................53
2.8 Page paramètres.....................................................................................................53
Ce chapitre se concentre sur la phase de mise en œuvre de

l'application. Il détaille l'architecture de notre application et illustre
certaines fonctionnalités au moyen des interfaces utilisateur.
39
chapitre IV : Mise en œuvre
1) Introduction
Après avoir cité langage de programmation et les différentes technologie de développement

appliqué dans le troisième chapitre, nous abordons dans ce chapitre une phase importante et
indispensable dans la mise en œuvre de l’application. Nous y décrivons l’architecture de notre
application et nous illustrons certaines fonctionnalités assurées à travers les interfaces.
2) Les interfaces de l’application
2.1 Page Login :
Figure 45 : Page Login
La page de connexion est la première page affichée dans notre application web. Nous avons
utilisé le package Breeze de Laravel pour créer cette page, afin de permettre l'accès aux
différents utilisateurs (administrateurs de notre projet). Breeze est un package qui
implémente les fonctionnalités d'authentification de Laravel. Il configure les routes, les
contrôleurs et les vues pour diverses fonctionnalités, parmi lesquelles nous utilisons les
suivantes :
Connexion d'un utilisateur avec une adresse email et un mot de passe
Vérification de l'adresse email d'un utilisateur
Déconnexion d'un utilisateur
40
2.2 Page Accueil :
Figure 46 : Page Accueil
Cette page d'accueil fournit un aperçu rapide à lire des informations essentielles, y compris
le budget initial et restant, les jours fériés à venir, une vue du calendrier avec la date actuelle
mise en évidence. et un graphique montrant le nombre de vacataires par niveau .
41
2.3 Page Gestion des vacataires :
2.3.1 Liste de vacataires :
Figure 47 : Page Gestion des vacataires
2.3.2 Ajouter Vacataire :
Figure 48 : Page Ajouter vacataire
42
2.3.3 Aperçu un vacataire :
Figure 49 : Page Afficher vacataire
2.3.4 Modifier un Vacataire :
Figure 50 : Page Modifier vacataire
43
2.4 Page Calendrier:
Figure 51 : Page calendrier
Figure 52 : Page Calendrier
Cette page du calendrier permet à l'utilisateur de voir et de gérer les heures travaillées par les
vacataires sur un calendrier mensuel. Les heures travaillées sont indiquées pour des jours
spécifiques, et l'utilisateur peut naviguer entre les mois. Elle affiche également les jours férie
enregistrés dans la base des données chacun avec un couleur spécifique . L'administrateur ne
peut pas saisir une séance dans un jour férié, car la case est bloquée.
44
2.5 Page Document:
Figure 53 : Page Documents
Cette page permet de gérer facilement les documents de chaque vacataire en offrant des
liens de téléchargement pour divers documents importants et en incluant une barre de
recherche pour une navigation plus efficace. Les documents traités sont :
État de paiement .
Relevé de prélèvement retenus .
Ordre de paiement 1 (vacataire) .
Ordre de paiement 2 (percepteur) .
Ordre de virement .
45
2.6 Page Configuration:
Figure 54 : Page Configuration
Cette page permet d’ajouter, modifier et supprimer les admis et la même chose pour les jours
fériés, ainsi qu’il y a une page de info budgétaires, page rôles et permissions .
46
2.6.1 Page Info budgétaires
Figure 55 : Page Infos Budgétaires
La page montre un aperçu du budget de l'École Normale supérieure de Marrakech (ENS), Les
montant de chaque diplôme, le taux d'imposition est de 30 % et les charges familiales sont de 360
dirhams. L’utilisateur (Sup Admin) peut bien sur modifier les informations à partir de button
modifier.
2.6.2 Page Modifier Info budgétaires
Figure 56 : Page Modifier Infos Budgétaires
47
2.6.3 Page Rôles
Figure 57 : Page Rôles
2.6.4 Page Ajouter/Modifier Rôle Permission
Figure 58 : Page Rôles/Permission
La page "Rôles" permet aux administrateurs de gérer les rôles et les autorisations. Ils peuvent
ajouter, modifier et supprimer des rôles, ainsi qu'attribuer des rôles aux utilisateurs.
48
2.6.5 Page Ajouter Rôle
Figure 59 : Page Ajouter rôle
La page "Rôles" permet aux administrateurs de gérer les rôles et les autorisations. Ils peuvent
ajouter ou modifier des permissions à un rôle et supprimer des rôles , ainsi qu'attribuer des
rôles aux utilisateurs.
2.6.6 Page Permissions
Figure 60 : Page Permissions
La page Permissions permet aux administrateurs avec les autorisations appropriées de gérer les
autorisations des autres utilisateurs du système.
49
2.6.7 Page Ajouter Permission
Figure 61 : Page Ajouter Permission
La page "Ajouter une permission", l’administrateur peut ajouter une nouvelle permission au
système. Cette permission peut être attribuée à des utilisateurs ou à des groupes d'utilisateurs
pour leur donner accès à des fonctionnalités spécifiques du système.
2.6.8 Page Modifier Permission
Figure 62 : Page Modifier Permission
50
2.6.9 Page Ajouter Sous Admin
Figure 63 : Page Ajouter Sous Admin
La page "Ajouter Sous Admins" permet aux administrateurs d'ajouter de nouveaux sous-
administrateurs au système.
2.6.10 Page Modifier Sous Admin
Figure 64 : Page Modifier Sous Admin
51
2.6.11 Page Ajouter Jour Férié
Figure 65 : Page Ajouter Jour Férié
La page "Ajouter Jour Férié" permet aux administrateurs d'ajouter un jour férié en spécifiant la
date de début, la date de fin et le type de jour. Il existe trois types de jours fériés, chacun ayant
une couleur spécifique pour simplifier la visualisation dans le calendrier : national (rose),
international (mauve) et religieux (vert).
2.6.12 Page Modifier Jour Férié
Figure 66: Page Modifier Jour Férié
52
2.7 Page Mes informations
Figure 67 : Menu header
Figure 68 : Page mes informations
La page Mes infos affiche les informations concernant l’utilisateur connecté.
2.8 Page Paramètres
Figure 69 : Page paramètres
La page Paramètres pour modifier ses informations .
53
CONCLUSION GÉNÉRALE
En conclusion, notre projet de fin d'études, vise à développer une application web pour simplifier
la gestion du budget des vacataires à l'ENS , et d'acquérir des compétences essentielles sur le plan
technique . Ce travail nous a offert l'opportunité de mettre en pratique les connaissances
théoriques acquises durant notre formation et de nous confronter aux défis réels rencontrés dans
le domaine de l'informatique.
Nous avons pu observer l'importance cruciale de l'informatique dans la gestion des ressources
humaines et financières, confirmant ainsi que la maîtrise de ces outils est indispensable . La
réalisation de ce projet nous a également sensibilisés à la nécessité d'une planification rigoureuse
et d'une communication efficace au sein de l'équipe pour assurer le succès de tout travail
collaboratif.
L'application développée, grâce à son interface intuitive et ses fonctionnalités adaptées,

représente une avancée significative pour l'ENS pour la gestion de budget des vacataires. Elle
permettra de gagner en efficacité et en précision, tout en réduisant les erreurs humaines et le
temps consacré à ces tâches administratives.
Ce projet a été une expérience enrichissante qui a renforcé notre autonomie et notre sens des
responsabilités. Enfin, il a été une formidable opportunité d'approfondir nos connaissances
techniques, notamment en module de développement web avec des technologies modernes telles
que Laravel et UML.
Nous sommes fiers du travail accompli et confiants que cette application apportera une réelle
valeur ajoutée à l'ENS. Nous espérons que notre démarche inspirera d'autres initiatives
similaires, visant à optimiser les processus administratifs par le biais de solutions informatiques
innovantes.
En guise de perspective, nous envisageons de poursuivre dans un premier lieu ce présent projet en
continuant à développer le reste des modules comme: la gestion de la vacation des heures sup, la
gestion de documents emploi, ....
54
Webographie
https://www.youtube.com/@FundaOfWebIT
https://laravel.com/docs/7.x/installation
https://spatie.be/docs/laravel-permission/v6/installation-laravel
https://www.fundaofwebit.com/post/laravel-10-spatie-user-roles-and-
permissions-tutorial
https://www.youtube.com/@yelocode
https://www.youtube.com/@JamaouiMouad
https://arjunamrutiya.medium.com/building-dynamic-bar-charts-in-laravel-
using-chart-js-a-step-by-step-guide-1b2039b15be0
https://www.webslesson.info/2021/03/how-to-implement-fullcalendar-in-
laravel-8-using-ajax.html
https://laravel-france.com/posts/gerer-ses-permissions-avec-laravel-
permission
https://www.chartjs.org/docs/latest/samples/information.html
https://www.akilischool.com/cours/laravel-lauthentification-avec-breeze
https://www.tutorialspoint.com/laravel/laravel_middleware.htm
https://www.uca.ma/ens/fr
55
Annexe
1. Mind map :
Figure 70 : Mind map Gestion-Budget-ENS
56
2. Structure du projet :
Annexe
57
58

Rapport PFE Gestion de Budget

Transféré par

Droits d'auteur :

Formats disponibles

Rapport PFE Gestion de Budget

Transféré par

Informations du document

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

Rapport PFE Gestion de Budget

Transféré par

Droits d'auteur :

Formats disponibles

UNIVERSITE CADI AYYAD -Marrakech-

Mémoire de Projet de Fin d'Etudes

Mise en place d’une

Elaboré par : Encadré par :

Soutenu le 22/06/2024 devant le jury :

Année universitaire 2023-2024

À nos chers parents,

À nos chères sœurs et nos chers frères,

À nos chers amis,

Aujourd'hui, ici rassemblées auprès des jurys,

Rania & Majeda

Nous tenons à remercier dans un premier temps, toute l'équipe

Nous exprimons notre profonde reconnaissance envers Mr. Nait Malek

Nous remercions chaleureusement Mme. Dadda Hanaa pour son temps

Enfin, nous adressons nos plus sincères remerciements à toutes nos

Mots clés : PHP , Laravel , UML , Budget des vacataires, ENS.

Keywords: PHP , Laravel , UML , Budget for temporary employees, ENS.

Figure 1 : Organigramme de l’ENS......................................................................................09

Figure 37 : Logo Google Drive............................................................................................36

ENS Ecole Normale Supérieure

SRH Le service des ressources humaines

UML Le Langage de Modélisation Unifié

HTML Le HyperText Markup Language

CSS Cascading Style Sheets

SQL Structured Query Language

VoIP Voice over Internet Protocol

XAMPP Cross-Platform, Apache, MySQL, PHP, and Perl

PHP Hypertext Preprocessor

HTTP Hypertext Transfer Protocol

MIT The Massachusetts Institute of Technology

GPL GNU General Public License

API Application programming interface

Chapitre I: Étude fonctionnelle et analyse des besoins

Chapitre II: Conception du projet

Chapitre IV: Mise en œuvre

Un système d'information comprend à la fois l'infrastructure et les logiciels d'application.

Dans le cadre de la formation CLE-INFORMATIQUE à l'École Normale Supérieure

Chapitre I : Etude fonctionnelle et analyse des besoins

Chapitre II : Conception du projet

Chapitre III: Étude Technique

Chapitre IV: Mise en œuvre

Ce chapitre présente le projet, la problématique à résoudre, et la

Ce chapitre présente le contexte général du projet en introduisant une brève description de ce

2) Organisme d’accueil : ENS de Marrakech

2.1 Présentation générale

Figure 1 :Organigramme de l’ENS

2.2.1 Service financier

Figure 2 :Organigramme de service financier

3) Cadre général du projet

3.1 Vacataire : Description des activités du processus

L’intégration d’un vacataire se fait par le processus suivant :

5- Le service des ressources humaines vérifie la conformité du dossier administratif et

Voici un organigramme qui illustre ce processus :

Figure 3 :Organigramme processus ( partie 1)

Figure 4 :Organigramme processus ( partie 2)

3.2 Présentation générale du projet

3.3 Les besoins de service financier

5) Identification des acteurs et leurs rôles

6) Identification des besoins fonctionnels

Elle permet à l’admin et le sous-admin ( selon les rôles et permissions ) de :