Ministère de l'Enseignement Supérieur,

de la Recherche Scientifique et de l’Innovation

Université Sultan Moulay Slimane
L'Ecole Supérieure de Technologie -- Fkih Ben Salah

Rapport de Projet de Fin d’Etudes

Filière : « Génie Informatique »

Année Universitaire : 2023-2024

Sujet:
Réalisation d’une Application Web pour la Gestion
d’établissement

Réalisées par :
Halima Er-reguigue et Meryem Khayati

Encadré par : Pr. Abdellah AMINE

Membres de Jury:

Pr. R. AIT DAOUD Président

Pr. I. KHOULQI Examinateur
Pr. A. AMINE Encadrant

Ecole Supérieure de Technologie - Fkih Ben Salah

Hay Tighnari, Route Nationale N° 11, 23200, B.P : 336 Fkih Ben Salah
Tel: (+212) [Link].66, Fax: (+212) [Link].99, Email: estfbs@[Link],
Site Web: [Link]
 DEDICACES

Ce travail représente un effort collectif nourri par une passion

partagée. Nous souhaitons le dédier avec gratitude à nos chers parents, qui
nous ont toujours encouragés à viser l'excellence et nous ont accompagnés
avec bienveillance tout au long de ce cheminement.

Nous tenons également à exprimer notre reconnaissance à nos

précieux amis, dont l'amitié sincère et le soutien indéfectible ont été des
sources de force inestimables.

Enfin, nous souhaitons adresser nos remerciements sincères à toutes

les personnes qui ont contribué, de près ou de loin, à la réalisation de ce
travail, en partageant leur expertise, leur expérience ou leur motivation.

2
 REMERCIEMENTS

Nous exprimons tout d’abord notre profonde reconnaissance envers

notre clément Dieu, qui nous a accordé la force et la persévérance
nécessaires pour mener à bien ce travail.

Au terme de ce travail, nous tenons à exprimer notre profonde

gratitude et nos sincères remerciements à notre encadrant Professeur
Abdellah AMINE , pour tout le temps qu’il nous a consacré, ses conseils
précieux, et pour la qualité de son suivi durant la période de notre projet.

Nous tenons aussi à remercier vivement les membres du jury pour

leurs présences et leurs conseils.

Nous adressons nos remerciements les plus sincères au Directeur de

l’École Supérieure de Technologie Fkih Ben Saleh, Monsieur El Mostapha
RAKIB, pour son soutien institutionnel et pour avoir mis à notre disposition
toutes les ressources nécessaires à la réalisation de ce projet.

Nous manifestons notre gratitude à nos très chers parents pour leur
soutien indéfectible, à nos sœurs et nos frère pour leurs encouragements. Un
merci particulier à nos amis qui nous ont aidés dans la collecte de certaines
données.

Nous n'oublions pas tous les enseignants de l’École Supérieure de

Technologie FKIH BEN SALEH qui nous ont offert une formation de haut
niveau tout au long de notre cursus.

Enfin, nous tenons à remercier chaleureusement toutes les

personnes qui ont contribué, de près ou de loin, à la réalisation de ce projet.

3
 RESUME

Ce rapport présente les différentes étapes d’analyse, de conception et

de réalisation d’une application web pour la gestion d'établissements. Cette
application est conçue pour simplifier et améliorer divers aspects de la vie
scolaire dans l’ École Supérieure de Technologie Fkih Ben Saleh, offrant aux
étudiants et au personnel administratif une plateforme pratique et sécurisée
pour accéder aux informations et aux services nécessaires.

Pour mener à bien ce projet, nous avons commencé par une étude
fonctionnelle permettant d’identifier la problématique ainsi que les objectifs
et les fonctionnalités du projet à développer. Ensuite, nous avons réalisé une
étude conceptuelle afin de mieux définir le comportement du site web à
travers des diagrammes UML (Unified Modeling Language), ce qui a facilité
la phase d’implémentation. Pour la phase d’implémentation, nous avons
utilisé le Framework Java Spring Boot pour le backend et la bibliothèque
JavaScript React pour le frontend. Nous avons également utilisé les IDE
IntelliJ IDEA et Visual Studio comme environnements de travail.

4
 ABSTRACT
This report presents the different stages of analysis, design and
creation of a web application for establishment management. This application
is designed to simplify and improve various aspects of school life in the École
Supérieure de Technologie Fkih Ben Saleh, providing students and
administrative staff with a convenient and secure platform to access necessary
information and services.

To carry out this project, we started with a functional study to identify

the problem as well as the objectives and functionalities of the project to be
developed. Then, we carried out a conceptual study to better define the
behavior of the website through UML (Unified Modeling Language) diagrams,
which facilitated the implementation phase. For the implementation phase,
we used the Java Spring Boot Framework for the backend and the React
JavaScript library for the frontend. We also used the IntelliJ IDEA and Visual
Studio IDEs as working environments.

5
 TABLE DE MATIERES

INTRODUCTION GENERALE ........................................................................................................... 10

Chapitre 1: ............................................................................................................................................. 12
PRESENTATION GENERALE DE PROJET ................................................................................. 12
I. Introduction ........................................................................................................................................ 13
II. Contexte ............................................................................................................................................. 13
III. Analyse de l'existant .......................................................................................................................... 13
IV. Problématiques ................................................................................................................................. 14
V. Objectif du projet ............................................................................................................................... 14
VI. Analyse globale des besoins ...............................................................................................................15
A. Spécification des besoins fonctionnels ........................................................................................ 15
B. Spécification des besoins non fonctionnels ................................................................................. 15
VII. Planning ...........................................................................................................................................16
VIII. Conclusion ..................................................................................................................................... 16
Chapitre 2: ...............................................................................................................................................17
CONCEPTION DU PROJET ................................................................................................................17
I. Introduction ........................................................................................................................................ 18
II. Langage de modélisation .................................................................................................................... 18
A. Description d’UML ..................................................................................................................... 18
III. Les diagrammes .................................................................................................................................19
A. Présentation .................................................................................................................................19
B. Identification des acteurs ............................................................................................................. 19
C. Diagramme de cas d’utilisations .................................................................................................. 20
D. Diagramme de classe ...................................................................................................................22
E. Description textuelle de cas d'utilisation“S’authentifier” ............................................................ 23
Scénario nominale : .........................................................................................................................24
Scénarios alternatifs : ...................................................................................................................... 24
Partie 3 : Exigences non fonctionnelles: ....................................................................................... 24
F. Diagramme de séquence ..............................................................................................................24
IV. Conclusion ........................................................................................................................................26
CHAPITRE 3: .........................................................................................................................................27
REALISATION DU PROJET ................................................................................................................27
I. Introduction ........................................................................................................................................ 28
II. Architecture du système ...................................................................................................................28
A. MVC (Modèle, Vue, Contrôleur) ............................................................................................. 28
III. Technologies utilisées ........................................................................................................................28
A. Environnement de travail ..........................................................................................................28
B. Les langages de programmation et les technologies ..................................................................... 31
IV. Mise en place de la sécurité ...............................................................................................................35
A. Authentication avec JWT (Json Web Token) .............................................................................. 35
B. Protection des méthodes ............................................................................................................ 37
C. Protection des routes dans React js ............................................................................................. 38
D. Injection-SQL ..............................................................................................................................39
V. Présentation des interfaces de l’application .......................................................................................39
A. Page d'accueil ...............................................................................................................................39
B. Espace Étudiant ...........................................................................................................................42
C. Page des Emplois du Temps ........................................................................................................ 43
D. Page de connexion ...................................................................................................................... 44
E. Profil de l'Étudiant .......................................................................................................................45
F. Espace administrateur .................................................................................................................. 47
1. Filières ................................................................................................................................................. 48
2. Semestres ............................................................................................................................................. 50
3. Étudiant ...............................................................................................................................................52
4. Emploi de temps ................................................................................................................................. 54

6
5. Modules ............................................................................................................................................... 55
6. Note ..................................................................................................................................................... 57
7. Demandes et réclamations .................................................................................................................. 58
VI. Conclusion ........................................................................................................................................ 64
CONCLUSION ET PERSPECTIVES ....................................................................................................65
WEBOGRAPHIE ................................................................................................................................... 66

7
TABLE DE FIGURE

Figure 1 :Diagramme de Gantt ------------------------------------------------------------------------------------------16

Figure 2 :UML ------------------------------------------------------------------------------------------------------------18
Figure 3 :diagramme de cas d’utilisation d’administrateur --------------------------------------------------- 21
Figure 4 :diagramme de cas d’utilisation d’Étudiant ------------------------------------------------------------ 22
Figure 5 :diagramme de classes ------------------------------------------------------------------------23
Figure 6 :diagramme de séquence d’authentification -------------------------------------------------------- 25
Figure 7 :diagramme deséquence déconnexion --------------------------------------------------------------- 26
Figure 8 :Visual Studio Code ----------------------------------------------------------------------------------------- 29
Figure 9 :Xampp --------------------------------------------------------------------------------------------------------- 29
Figure 10 : StartUML --------------------------------------------------------------------------------------------------- 29
Figure 11 :PhpMyAdmin ---------------------------------------------------------------------------------------------- 30
Figure 12 :Intellij IDEA ------------------------------------------------------------------------------------------------ 30
Figure 13 :Postman ------------------------------------------------------------------------------------------------------30
Figure 14 :HTML -------------------------------------------------------------------------------------------------------- 31
Figure 15 :CSS ------------------------------------------------------------------------------------------------------------31
Figure 16 :Js --------------------------------------------------------------------------------------------------------------- 31
Figure 17 :React js ------------------------------------------------------------------------------------------------------- 32
Figure 18 :Java ------------------------------------------------------------------------------------------------------------ 32
Figure 19 :Spring ---------------------------------------------------------------------------------------------------------32
Figure 20 :Spring boot --------------------------------------------------------------------------------------------------33
Figure 21 :JPA ------------------------------------------------------------------------------------------------------------ 33
Figure 22 :Hibernate ---------------------------------------------------------------------------------------------------- 33
Figure 23 :Spring security ----------------------------------------------------------------------------------------------34
Figure 24 :Spring Data JPA --------------------------------------------------------------------------------------------34
Figure 25 :Maven -------------------------------------------------------------------------------------------------------- 34
Figure 26 :JSON --------------------------------------------------------------------------------------------------------- 35
Figure 27 :Page d’accueil ----------------------------------------------------------------------------------------------- 40
Figure 28 :Page d'accueil section d'actualités --------------------------------------------------------------------- 40
Figure 29 :Page d'accueil section des cartes des filières -------------------------------------------------------- 40
Figure 30 :Footer ---------------------------------------------------------------------------------------------------------41
Figure 31 :Section des détails de l'EST FBS ---------------------------------------------------------------------- 41
Figure 32 :Section de détail de l'actualité -------------------------------------------------------------------------- 42
Figure 33 : Section de détail de la filière -------------------------------------------------------------------------- 42
Figure 34:Page de l'Espace Étudiant -------------------------------------------------------------------------------- 43
Figure 35: Page des emplois du temps section des cartes des filières ---------------------------------------- 43
Figure 36:Page des emplois du temps section des cartes des semestres de la filière ----------------------44
Figure 37:Page des emplois du temps, section visualisation de l'emploi ------------------------------------44
Figure 38:Page de connexion ----------------------------------------------------------------------------------------- 45
Figure 39:Page de Profil de l’étudiant ------------------------------------------------------------------------------ 45
Figure 40:Profil de l'Étudiant ----------------------------------------------------------------------------------------- 46
Figure 41:Page d'envoi de demande -------------------------------------------------------------------------------- 46
Figure 42:Page d'envoi de réclamation ----------------------------------------------------------------------------- 47
Figure 43:Page de consultation des notes ------------------------------------------------------------------------- 47
Figure 44:Espace administrateur ------------------------------------------------------------------------------------48
Figure 45:Liste des filière ---------------------------------------------------------------------------------------------- 48
Figure 46:Ajouter des filière ------------------------------------------------------------------------------------------ 49
Figure 47:Message indiquant la réussite de la suppression de la filière" ----------------------------------49
Figure 48:modifier filière ---------------------------------------------------------------------------------------------- 49
Figure 49:Cartes des filières désactivées ---------------------------------------------------------------------------- 50

8
Figure 50 :Carte de filière Active ------------------------------------------------------------------------------------ 50
Figure 51:List des semestres -------------------------------------------------------------------------------------------51
Figure 52 : Ajouter semestre ------------------------------------------------------------------------------------------ 51
Figure 53 :Modifier semestre --------------------------------------------------------------------------------------- 51
Figure 54 :Carte de filière Active -------------------------------------------------------------------------------------52
Figure 55 :Cartes des semestres ------------------------------------------------------------------------------ 52
Figure 56 : List étudiant ------------------------------------------------------------------------------------------------53
Figure 57 :Ajouter étudiant ------------------------------------------------------------------------------------------- 53
Figure 58:Modifier étudiant -------------------------------------------------------------------------------------------53
Figure 59:Partie visualisation de l'emploi du temps chez l'administrateur -------------------------------54
Figure 60:modifier emploi de temps -------------------------------------------------------------------------------- 54
Figure 61:Supprimer Emploi de temps --------------------------------------------------------------------------- 55
Figure 62:Ajouter Emploi de temps -------------------------------------------------------------------------------- 55
Figure 63:list modules -------------------------------------------------------------------------------------------------- 55
Figure 64:Ajouter module --------------------------------------------------------------------------------------------- 56
Figure 65:Modifier module --------------------------------------------------------------------------------------------56
Figure 66:Suprimer Module -------------------------------------------------------------------------------------------56
Figure 67:Liste des étudiants inscrits à ce module et leurs notes correspondantes --------------------57
Figure 68:Ajouter note ------------------------------------------------------------------------------------------------- 57
Figure 69:Modifier note -------------------------------------------------------------------------------------------- 57
Figure 70:Supprimer note --------------------------------------------------------------------------------------------- 58
Figure 71:List des demandes ------------------------------------------------------------------------------------------ 58
Figure 72:Accepter demande ----------------------------------------------------------------------------------------- 59
Figure 73 :Réponse dans l'email ------------------------------------------------------------------------------------- 59
Figure 74:Refuser demande --------------------------------------------------------------------------------------59
Figure 75:Supprimer demande ---------------------------------------------------------------------------------------60
Figure 76:list actualités ------------------------------------------------------------------------------------------------- 60
Figure 77:Ajouter actualité -------------------------------------------------------------------------------------------- 61
Figure 78:Modifier actualité ------------------------------------------------------------------------ 61
Figure 79:Supprimer actualité ---------------------------------------------------------------------------------------- 61
Figure 80:List des fichiers ----------------------------------------------------------------------------------------------62
Figure 81:Ajouter fichier ----------------------------------------------------------------------------------------------62
Figure 82:Modifier fichier --------------------------------------------------------------------------------------------- 63
Figure 83:Supprimer fichier -------------------------------------------------------------------------------------------63
Figure 84:Voir fichier ---------------------------------------------------------------------------------------------------63

9
 INTRODUCTION GENERALE

Les applications web jouent un rôle crucial grâce aux avancées

technologiques et à notre mode de vie en évolution. Accessibles via des
navigateurs web et hébergées sur des serveurs, elles ne nécessitent aucune
installation locale, simplifiant ainsi l'accès et les mises à jour. Devenues
omniprésentes et intégrées dans divers domaines, elles offrent des
fonctionnalités puissantes, favorisant la flexibilité, l'accessibilité, le travail
collaboratif et la gestion à distance, soutenant ainsi l'innovation et l'efficacité
opérationnelle.

Dans ce contexte, le projet que nous voulons vous présenter a pour

objectif de concevoir et de réaliser une application web de gestion
d’établissement. Cette application proposera des services de gestion des
actualités de l'école, des emplois du temps et des résultats des étudiants,
améliorant ainsi la communication et l'efficacité administrative, tout en
offrant une plateforme centralisée et accessible pour toutes les parties
prenantes de l'école.

Parmi tous les outils de développement Web existantes Nous avons

choisi Spring Boot pour le back-end et React js pour le front-end de notre
application en raison de leur compatibilité et de leur intégration harmonieuse,
offrant ainsi une solution complète pour le développement d'applications web
modernes. Cette combinaison nous permet de mettre en pratique nos
connaissances en programmation tout en garantissant des performances
optimales et une expérience utilisateur interactive, répondant ainsi aux
exigences de notre projet de manière efficace et efficiente.

Ce rapport est structuré en trois chapitres. Le premier chapitre est une

présentation générale du projet exposant les grandes lignes, le cahier de

10
charges, les solutions proposées, ainsi que les besoins fonctionnels et non
fonctionnels.

Le deuxième chapitre décrit la conception du site web, en présentant

son architecture. Le troisième chapitre détaille le développement du site web,
en expliquant les fonctionnalités implémentées. Enfin, une conclusion
résume les principaux apports du stage ou du projet et propose des
perspectives d’amélioration.

11
Chapitre 1:
PRESENTATION GENERALE DE
PROJET

12
I. Introduction
Ce chapitre a pour objectif de présenter de manière détaillée le projet.
Nous allons présenter l'analyse de l'existant, les problématiques, et les
objectifs, ainsi que les besoins du projet et les fonctionnalités clés à
développer pour répondre aux attentes de la communauté éducative.

II. Contexte
L'évolution rapide des technologies de l'information a profondément
transformé la manière dont les établissements gèrent leurs processus
administratifs et interagissent avec leur communauté étudiante. Dans ce
contexte dynamique, la conception d'une application web de gestion
d'établissement s'impose comme une réponse stratégique. Cette application
sera conçue pour simplifier la gestion des documents d'une institution à
travers des demandes en ligne, tout en intégrant d'autres fonctionnalités
essentielles telles que la gestion des actualités, des emplois du temps, des
résultats, et des étudiants...etc.

III. Analyse de l'existant

Le site actuel de l'École Supérieure de Technologie de Fkih Ben Saleh
présente certains points forts, tels que la section dédiée aux emplois du temps
des cours, qui permet aux étudiants d'accéder facilement à leur planning
académique.
Cependant, la gestion des documents au sein de l'établissement repose
principalement sur des processus manuels. Par exemple, les étudiants
soumettent leurs demandes de documents, telles que les attestations de stage,
en remplissant des formulaires papier. Ce processus entraîne des délais de
traitement considérables, une charge administrative élevée et un risque accru
d'erreurs humaines. De plus, la traçabilité des demandes est limitée, ce qui
peut entraîner des retards dans la délivrance des documents.
En outre, la section des actualités sur le site manque de structure et de
hiérarchie claires. Aussi il n'y a pas d'espace personnel sécurisé pour les
étudiants, pour leur permettrait de consulter leurs résultats en toute sécurité.
Actuellement, les étudiants utilisent leur code Massar et leur date de
naissance pour accéder à leurs résultats. Bien que cette méthode soit simple et

13
facilement accessible, elle présente des risques pour la confidentialité des
données, car ces informations sont sensibles et peuvent être facilement
compromises.

IV. Problématiques
Les outils numériques sont cruciaux pour les établissements
éducatifs afin d'améliorer leur gestion et leur communication avec les
étudiants. Cependant, ils présentent des défis en matière de sécurité
des données et d'efficacité. Comment une application web peut-elle
aider un établissement éducatif à mieux gérer les documents, suivre les
demandes, sécuriser les informations des étudiants et simplifier l'accès
aux ressources académiques ? Quels indicateurs peuvent mesurer
l'impact de cette application sur l'efficacité administrative, la
satisfactiondes étudiants et la réduction des délais de traitement ?

V. Objectif du projet
Le projet vise à créer une application web pour offrir aux
étudiants une plateforme centralisée répondant à leurs besoins administratifs.
Cette plateforme permettra de :
 Soumettre des demandes de documents, telles que des attestations de
stage, simplifiant ainsi le processus administratif.
 Consulter les actualités, événements et annonces essentielles grâce à un
espace dédié à la gestion des actualités.
 Accéder et gérer les emplois du temps des cours via une fonctionnalité de
gestion des actualités.
 Consulter les résultats académiques de manière sécurisée grâce à un
espace dédié à la gestion des notes.
 Bénéficier d'un contrôle d'accès différencié en fonction des rôles
d'utilisateur, distinguant les administrateurs des étudiants.
 Les accès seront contrôlés selon les rôles, avec des permissions distinctes
pour les administrateurs et les étudiants.

14
VI. Analyse globale des besoins
A. Spécification des besoins fonctionnels
 Gestion des Documents :Permettre aux étudiants de remplir des
formulaires de demande de documents en ligne, Stocker les
demandes de documents dans une base de données pour suivi,
Envoyer des notifications automatiques aux étudiants concernant
l'état de leur demande.
 Gestion des Actualités :Offrir une interface d'administration
pour la publication, la modification et la suppression d'actualités,
Afficher les actualités de manière claire et organisée pour les
utilisateurs.
 Gestion des Emplois du Temps :Permettre aux administrateurs
de créer, modifier et supprimer des plannings d'activités, Afficher
les emplois du temps de manière claire.
 Gestion des Notes :Stocker de manière sécurisée les notes des
étudiants dans la base de données, Permettre aux étudiants de
consulter leurs résultats via une interface conviviale.
 Gestion des Utilisateurs :Définir des autorisations spécifiques
pourles administrateurs et les étudiants afin de restreindre l'accès
aux fonctionnalités appropriées.
B. Spécification des besoins non fonctionnels
 Sécurité : Assurer la protection des données des utilisateurs à
travers des mesures de sécurité telles que le chiffrement des
données et la gestion sécurisée des identifiants.
 Performance : Se réfère à l'efficacité et à la rapidité avec lesquelles
l'application fonctionne et répond aux besoins des utilisateurs.
 Ergonomie : Concevoir une interface utilisateur intuitive et
ergonomique pour faciliter la navigation et l'utilisation de
l'application.
 Extensibilité : Concevoir une architecture modulaire et évolutive
permettant l'ajout facile de nouvelles fonctionnalités à l'avenir.

15
VII. Planning

Figure 1:Diagramme de Gantt

VIII. Conclusion
Après avoir présenté le projet et effectué l'analyse des
exigences spécifiques, les besoins fonctionnels et non fonctionnels.
Les chapitres à venir détailleront la conception du projet ainsi que la
réalisation collaborative de son développement et de la conception
des applications.

16
Chapitre 2:
CONCEPTION DU PROJET

17
I. Introduction
La phase de modélisation est considérée comme la plus
importante de toutes les autres phases, jouant un rôle essentiel dans la
réalisation du projet. Pour cela, nous explorons le rôle crucial de la
modélisation, notamment avec l'UML, dans laquelle nous détaillons les
différents éléments de conception, à savoir le diagramme de cas
d’utilisation, les diagrammes de séquences et le diagramme de classes, et
nous concluons avec une synthèse.

II. Langage de modélisation

A. Description d’UML
UML (Unified Modeling Language, ou langage de
modélisation unifié) est un outil graphique indispensable pour
représenter et décrire les divers aspects d’un système d’information.
Il couvre toutes les phases de développement de ce dernier. Ce
qui rend UML particulièrement précieux, c’est son caractère
universel : il est indépendant des langages de programmation, des
domaines d’application et des processus de développement. Grâce à
ses schémas visuels, UML permet de concevoir des solutions
orientées objet de manière claire et compréhensible, de structurer
les informations de façon efficace et de fournir une approche
standardisée au processus de développement. Pour ces raisons, nous
avons choisi d'utiliser UML.

Figure 2:UML

18
III. Les diagrammes
A. Présentation
Les diagrammes UML jouent un rôle crucial en aidant les
développeurs de système à comprendre, collaborer et développer des
applications. Ils peuvent les utiliser pour visualiser un système ou un
projet dans son ensemble, ainsi que pour subdiviser les applications
en composants plus petits pour un développement plus efficace.
Il existe deux catégories principales de diagrammes UML, les
diagrammes de structure qui montrent les différents objets trouvés
dans un système. Alors que les diagrammes comportementaux
concentrent sur la façon dont les objets du système interagissent les
uns avec les autres .
 Les vues statiques: Représentant le système physiquement :
 Diagramme de cas d’utilisation (DCU)
 Diagramme de classes (DCL)
 Diagramme d’objets (DOB)
 Diagramme de composants (DCP)
 Diagramme de déploiement (DDP)
 ...
 Les vues dynamiques: Montrant le fonctionnement du système :
 Diagramme de séquence (DES)
 Diagramme d’activités (DAC)
 Diagramme d’état-transition (DET)
 Diagramme de collaboration (DCO)
 ...

B. Identification des acteurs

Un acteur représente un rôle joué par une entité externe
(utilisateur humain, dispositif matériel ou autre système) qui
interagit directement avec le système étudié.
Pour cette application on distingue deux acteurs:
 Administrateur : Il gère les étudiants, les actualités, les demandes
de documents, les réclamations, les résultats des étudiants, les

19
 emplois du temps, les semestres, les modules, les filières.
 Étudiant : Il peut consulter le site, consulter son profil, voir les
actualités, consulter son emploi du temps, ses résultats, envoyer
une demande de documents ou une réclamation.

C. Diagramme de cas d’utilisations

Souvent, les utilisateurs ne sont pas forcément des
informaticiens. Il leur faut donc un moyen simple d’exprimer leurs
besoins. C’est précisément le rôle des diagrammes de cas d'utilisation,
qui permettent d’analyser et d’organiser les besoins, ainsi que de
recenser les principales fonctionnalités d’un système. Il s’agit donc de
la première étape d’analyse d’un système.
L'idée principale est que chaque utilisateur d'un système logiciel
a un objectif spécifique lorsqu'il l'utilise. Les cas d'utilisation décrivent
alors les différentes actions entreprises par l'utilisateur pour atteindre
son butspécifique en utilisant le système.
1. Diagramme de cas d’utilisations « Administrateur»
La figure ci-dessous représente le diagramme de cas d'utilisation de
l'administrateur qui interagit avec le système par l'authentification avant de
gérer les étudiants, les actualités, les demandes de documents, les
réclamations, les résultats des étudiants, les modules, les emplois du temps,
les semestres, les résultats des notes, et les filières.

20
Figure 3:diagramme de cas d’utilisation d’administrateur

Figure 3 :diagramme de cas d’utilisation d’administrateur

21
 Figure 3 :diagramme de cas d’utilisation d’administrateur

2. Diagramme de cas d’utilisations « Étudiant »

Figure 4:diagramme de cas d’utilisation d’Étudiant

La figure ci-dessous représente le diagramme de cas

d’utilisationsd’Etudiant.

D. Diagramme de classe
Un diagramme de classes est une représentation statique d'un
système, mettant en avant les classes et les relations entre elles. Il offre
une vue d'ensemble du système, avec pour objectif principal de
modéliser les tables du système d'information.

22
 En UML, une classe est illustrée par un rectangle divisé en
plusieurs sections : le nom de la classe, les attributs (ou champs),
et les méthodes (ou opérations).
Le diagramme de classes suivant représente une vue globale de notre
système

Figure 5:diagramme de classes

E. Description textuelle de cas d'utilisation“S’authentifier”

Partie 1 : Description:
Titre : Authentification utilisateur
Acteur principale : Utilisateur.
Acteurs secondaires : Système
Résumé : Ce cas d'utilisation décrit le processus par lequel un
utilisateur s'authentifie dans le système pour accéder à des
fonctionnalités protégées.
Date : 20/02/2024
Responsable : Halima et Meryem
Version : 1.0
Partie 2 : Description des scénarios:
Préconditions :
 L'utilisateur doit avoir un compte dans le système.
 L'utilisateur doit connaître ses identifiants (nom d'utilisateur et
mot de passe).

23
Scénario nominale :
1. L'utilisateur accède à la page de connexion.
2. Le système affiche un formulaire de connexion demandant le nom
d'utilisateur et le mot de passe.
3. L'utilisateur entre son nom d'utilisateur et son mot de passe et
soumet le formulaire.
4. Le système vérifie si les champs ne sont pas vides.
5. Il vérifie ensuite si les informations sont valides.
6. JWT-Token sera généré pour afficher l’interface adéquate.
7. Le système redirige l’acteur vers son espace selon son rôle.
Scénarios alternatifs :
Scénario alternatif SA1: les champs vides.
SA1 commence au point 4 du scénario nominale. Le système indique
que les champs vide .
Le scénario reprend au point 2 du scénario nominal.
Scénario alternatif SA2: nom utilisateur ou mot de passe incorrect.
SA2 commence au point 5 du scénario nominale.
Le système indique que les donnes incorrect .
Le scénario reprend au point 2 du scénario nominal.
Post condition :
Si l'authentification réussit, ouverture de l’espace utilisateur ou
l'utilisateur peut accéder aux fonctionnalités protégées du système.
Si l'authentification échoue, l'utilisateur reçoit un message d'erreur et
reste non authentifié.
Partie 3 : Exigences non fonctionnelles:
Le site doit fonctionner 24 heures sur 24 et 7 jours sur 7.

F. Diagramme de séquence
Le diagramme de séquence permet de décrire comment les
éléments du système interagissent entre eux et avec les objets (acteurs)
en se basant sur des messages ordonnés. Chaque message transitant
sur un lien est symbolisé par une flèche porteuse d’une expression.

24
 La lecture se fait de haut en bas, et l’ordre chronologique doit
respecter ce sens. La réalisation d'un diagramme de séquence permet
de lister les méthodes dont on aura besoin lors de la phase de
développement.
1. Diagramme de séquence « Gestion d’authentification avec JWT
«JSON Web Token»

Figure 6:diagramme de séquence d’authentification

2. Diagramme de séquence « déconnexion »

En raison de sécurité, Lorsqu’un utilisateur termine son travail il
est obligatoire de se déconnecter, cette déconnexion est traitée par le
système comme suit :
Scenario 1 : L’acteur demande la déconnexion.
Scenario 2 : le système traite la demande de l’acteur, et en suite, il ferme la
connexion (casser le jeton jwt).
Scenario 3 : le système redirige l’acteur vers la page de login.

25
 Figure 7:diagramme deséquence déconnexion

IV. Conclusion
Ce chapitre résume le travail effectué lors des étapes d’analyse
et de conception de la solution mise en place. D’abord, nous avons
commencé par présenter les acteurs du système en décrivant leurs
rôles et leurs principales tâches. Ensuite, nous avons passé aux
différents diagrammes d’UML pour mieux comprendre les
fonctionnalités offertes et mieux représenter la communication entre
les différents objets du projet. Le chapitre suivant décrira les
technologies et les outils utilisés dans le projet.

26
CHAPITRE 3:
REALISATION DU PROJET

27
I. Introduction
Après avoir effectué l’étude et la conception de notre
application web, nous allons, dans ce chapitre, décrire notre
environnement de travail ainsi que les technologies utilisées pour
la réalisation de notre application. Ensuite, nous allons présenter
quelques captures d’écran démontrant le résultat final de
l’application en expliquant toutes les fonctionnalités.

II. Architecture du système

A. MVC (Modèle, Vue, Contrôleur)
L'architecture MVC est un modèle architecturale qui sépare une
application en trois composants principaux :
Modèle (Model) : Gère les données et la logique métier de l'application. Il
communique avec la base de données, traite les données et applique les
règles métiers.
Vue (View) : Présente les données au utilisateur. Elle est responsable de
l'affichage de l'interface utilisateur et de la mise en forme des données reçues
du Modèle.
Contrôleur (Controller) : Agit comme un intermédiaire entre le Modèle et
la Vue. Il reçoit les entrées de l'utilisateur, traite ces entrées
(souvent en invoquant des méthodes du Modèle), et met à jour la
Vue en conséquence.

III. Technologies utilisées

A. Environnement de travail

28
Visual Studio Code : Visual Studio Code est un éditeur de
code source gratuit, léger et extrêmement
populaire développé par Microsoft. Il est
conçu pour répondre aux besoins des
développeurs dans un large éventail de
langages de programmation et de
Figure 8:Visual Studio Code
technologies web.

Xampp : XAMPP est un ensemble de logiciels

open-source qui permet de créer un
environnement de développement web local
sur votre ordinateur. Le nom XAMPP est
dérivé des composants principaux qu'il
inclut :
X : Suggère qu'il est multiplateforme, c'est-à-
dire qu'il fonctionne sur différents systèmes
Figure 9:Xampp
d'exploitation, tels que Windows, macOS et
Linux.
A : Apache, le serveur web inclus dans
XAMPP.
M : MySQL, le système de gestion de base de
données relationnelles.
P : PHP, le langage de script côté serveur.
P : Perl, un langage de script polyvalent.

StarUML : StarUML est un logiciel open-source

utilisé pour créer et visualiser des
diagrammes UML (Unified Modeling
Language). Il aide à concevoir et
documenter des systèmes logiciels en
utilisant divers types de diagrammes, tels
que des diagrammes de classe et de
Figure 10: StartUML séquence.

29
 PhpMyAdmin : PhpMyAdmin est une application
web open-source utilisée pour gérer et
administrer des bases de données MySQL
de manière conviviale. Il fournit une
interface graphique pour effectuer des
opérations courantes liées à la gestion des
bases de données, telles que la création de
bases de données, la gestion des tables,
Figure 11:PhpMyAdmin
l'insertion de données, l'exécution de
requêtes SQL et bien plus encore.

IntelliJ IDEA est un environnement

IntelliJ IDEA : de développement intégré (IDE) puissant et
intelligent pour le développement de
logiciels. Il est principalement utilisé pour
le développement Java, mais il prend
également en charge de nombreux autres
langages de programmation. IntelliJ IDEA
offre des fonctionnalités avancées telles que
l'auto-complétion de code, la
Figure 12:Intellij IDEA refactorisation, la navigation dans le code,
et des outils intégrés pour le débogage et les
tests, facilitant ainsi le travail des
développeurs.

Postman : Postman est un outil de

développement d’API (Application
Programming Interface). qui permet de
tester et développer des API facilement. Il
permet de lancer une série de requêtes http
Figure 13:Postman et de tester chacune d’entre elles, ainsi de
répondre.

30
B. Les langages de programmation et les technologies

HTML: Le HyperText Markup Language, ou

HTML (HTML5 dans sa version la plus
récente), est un langage de balisage utilisé
pour créer et structurer des pages web. Il
permet de définir l'hypertexte, d'organiser
sémantiquement le contenu, de mettre en
forme le texte et de concevoir le squelette
Figure 14:HTML
des pages web.

CSS: Les feuilles de style en cascade, ou

CSS (Cascading Style Sheets), sont un
langage de style qui décrit la présentation
des pages HTML. CSS est utilisé pour
définir et personnaliser les styles et la mise
en page des pages web. Les standards de
Figure 15:CSS CSS sont publiés par le World Wide Web
Consortium.

JS, ou JavaScript, est un langage de

JavaScript: programmation côté client, ce qui signifie
qu'il est exécuté par votre navigateur web. Il
permet d'interagir avec les éléments HTML
comme les images et les textes. JavaScript
est principalement utilisé pour rendre les
pages web interactives et constitue une
Figure 16:Js
partie essentielle des applications web. Avec
HTML et CSS, JavaScript est considéré
comme l'une des technologies de base du
World Wide Web.

31
 React JS est une bibliothèque
React js: JavaScript créée par Facebook pour
construire des interfaces utilisateur
interactives et dynamiques. Elle permet de
développer des composants réutilisables, de
gérer l'état de l'application de manière
efficace, et de mettre à jour l'affichage
automatiquement lorsque les données
changent. React est particulièrement
Figure 17:React js populaire pour les applications web où la
rapidité et l'interactivité sont essentielles.

Java est un langage de

Java:
programmation polyvalent et orienté objet,
utilisé pour développer une grande variété
d'applications, Il est connu pour sa
portabilité, ce qui signifie que le code Java
peut être exécuté sur n'importe quel
système.
Figure 18:Java

Spring: Spring est un framework open-

source pour le développement
d'applications Java, offrant une structure
complète pour la création d'applications
robustes. Il fournit des outils pour
Figure 19:Spring simplifier l'accès aux données, la
sécurisation des applications, il est apprécié
pour sa modularité et sa facilité
d'intégration avec une variété de
technologies.

32
 Spring Boot est un framework Java
Spring boot:
qui simplifie le processus de développement
d'applications en fournissant des
fonctionnalités prêtes à l'emploi et des
configurations par défaut intelligentes,
réduisant ainsi la quantité de code
Figure 20:Spring boot
boilerplate nécessaire. Il permet de créer
rapidement des applications autonomes et
prêtes à être déployées, en intégrant des
fonctionnalités telles que la gestion des
dépendances et la configuration
automatique.

JPA: JPA (Java Persistence API) est une

spécification Java qui établit une norme
pour la gestion de la persistance des
données dans les applications Java. Elle
fournit un ensemble de classes et
Figure 21:JPA d'annotations pour représenter les entités
de base de données et simplifier leur
manipulation dans le code Java.

Hibernate est un framework open-

Hibernate: source qui simplifie l'accès et la
manipulation des données dans une base
de données relationnelle à partir d'une
application Java. Il permet aux
développeurs de travailler avec des objets
Java plutôt qu'avec des requêtes SQL
directes.
Figure 22:Hibernate

33
 Spring Security est un framework
Spring Security : Java qui fournit des fonctionnalités de
sécurité pour les applications Spring. Il
permet de sécuriser les applications en
gérant l'authentification (vérification de
l'identité des utilisateurs) et l'autorisation
(contrôle des accès aux ressources). Spring
Figure 23:Spring security
Security offre des fonctionnalités telles que
la gestion des sessions, la protection contre
les attaques, la configuration basée sur les
rôles.

Spring Data JPA est une partie du

Spring Data JPA : framework Spring qui simplifie l'accès aux
données dans les applications Java en
utilisant la technologie JPA. Il offre une
abstraction au-dessus de JPA, permettant
aux développeurs d'interagir avec leur base
de données de manière simple et cohérente,
elle facilite les opérations sur les données en
Figure 24:Spring Data JPA offrant des méthodes déclaratives et des
requêtes générées automatiquement.

Maven est un outil de gestion de

projet qui simplifie le processus de
Maven : développement des applications Java. Il
permet de gérer les dépendances, il utilise
des fichiers de configuration XML appelés
"[Link]" pour définir la structure du
projet, spécifier les dépendances
Figure 25:Maven
nécessaires, et configurer les étapes de
construction.

34
 JSON : Signifie JavaScript Object Notation:
est un format standard utilisé pour
représenter des données structurées de
façon semblable aux objets [Link] est
également utilisé pour l’échange des
Figure 26:JSON données textuelles.

IV. Mise en place de la sécurité

A. Authentication avec JWT (Json Web Token)
L'authentification est le processus de vérification de l'identité d'un
utilisateur ou d'un système. C'est une étape cruciale pour sécuriser l'accès
aux ressources sensibles dans les applications et les systèmes informatiques.
Lorsqu'un utilisateur essaie d'accéder à une application, il doit prouver son
identité en fournissant des informations telles qu'un nom d'utilisateur et un
mot de passe. Une fois ces informations vérifiées, l'utilisateur obtient l'accès
aux fonctionnalités et aux données autorisées.
JWT (JSON Web Token) est un moyen populaire et sécurisé de gérer
l'authentification et l'autorisation dans les applications web et mobiles. JWT
permet de transmettre des informations de manière sécurisée entre deux
parties: le client (comme un navigateur ou une application mobile) et le
serveur.

1. Fonctionnement de JWT

 Authentification Initiale : L'utilisateur envoie ses identifiants (nom

d'utilisateur et mot de passe) au serveur.
 Génération du JWT : Le serveur vérifie les identifiants, crée un JWT
contenant les informations de l'utilisateur, et renvoie ce JWT au client.
 Stockage du JWT : Le client stocke le JWT (généralement dans le
stockage local ou les cookies).
 Envoi du JWT avec chaque requête : Pour les requêtes suivantes, le client
envoie le JWT dans les en-têtes HTTP.

35
 Validation du JWT : Le serveur valide le JWT pour autoriser l'accès aux
ressources protégées.

2. Structure du Token

 Header : Indique le type de token (JWT) et l'algorithme de

cryptageutilisé.
 Payload : Contient les informations ("claims") sur l'utilisateur
et d'autres données. Par exemple, le nom d'utilisateur,
l'identifiant de l'utilisateur, etles rôles ou permissions.
 Signature : Elle est créée en combinant le header, le payload,
et une clé secrète connue uniquement du serveur.

3. Avantages de JWT

 Le serveur n'a pas besoin de stocker de session, ce qui rend l'authentificati

on plus scalable.
 Les informations sont signées et peuvent être chiffrées, empêchant les alté
rations et garantissant la confidentialité.
 Facile à transmettre via les URL, les paramètres POST ou les en-
têtes HTTP.

4. Comparaison : Authentification JWT vs Authentification par Session

 Stockage des Données:

JWT : Les informations d'authentification sont contenues dans le
token lui-même. Le serveur n'a pas besoin de maintenir l'état de la
session.
Session : Le serveur stocke les informations de la session,
généralement dans la mémoire du serveur, une base de données
ouun cache.
 Scalabilité:

JWT : Plus facile à mettre à l'échelle, car aucun état de session n'est
conservé sur le serveur.

36
Session : Peut être plus difficile à mettre à l'échelle, car les sessions
doivent être partagées entre les instances de serveur.
 Sécurité:

JWT : Plus sécurisé si utilisé correctement (ex. : tokens courts,

renouvellement des tokens, stockage sécurisé des tokens).
Session : Les sessions sont souvent plus sécurisées contre les
attaques de vol de tokens, car les informations de session sont
stockées côté serveur et non exposées au client.

B. Protection des méthodes

En utilisant JWT pour l'authentification, Spring Boot peut
protéger les méthodes en vérifiant la validité des tokens inclus dans les
requêtes.
Après que l'utilisateur soit connecté et que le token soit généré,
en décodant le contenu du token, Spring Boot peut extraire les
informations d'identification, y compris le rôle de l'utilisateur,
Si le rôle contenu dans le token correspond aux autorisations
requises pour accéder à la méthode protégée, l'accès est autorisé.
Sinon, l'accèsest refusé.
Voici un exemple que nous devons implémenter:

Cette approche offre une sécurité robuste en assurant que seuls les
utilisateurs authentifiés et autorisés peuvent accéder aux méthodes de
l'application, tout en transportant les informations de rôle directement avec
le token, ce qui simplifie le processus d'authentification et d'autorisation.
Voici comment nous injectons le token dans le header de chaque
requête dans le frontend [Link] pour que le backend Spring Boot puisse le
décoder et vérifier si l'utilisateur a les permissions nécessaires pour accéder à

37
cette méthode. Si l'utilisateur a la permission, il peut accéder aux méthodes,
sinon une erreur d'autorisation est renvoyée.
C. Protection des routes dans React js
La protection des routes dans une application React permet de
contrôler qui peut accéder à certaines parties de l'application. Cela signifie
que certaines pages, comme une page de tableau de bord ou des paramètres,
ne sont accessibles que si l'utilisateur est connecté.
Si un utilisateur non connecté essaie d'accéder à ces pages, il est
redirigé vers la page de connexion. Pour cela, on utilise un composant qui
vérifie les permissions appropriées pour chaque utilisateur et le redirige vers
ses propres pages privées. Cela aide à sécuriser les routes de l'application et à
offrir une meilleure expérience utilisateur en s'assurant que seules les
personnes autorisées peuvent accéder aux informations sensibles.

Ce composant "AuthGarde" est utilisé pour vérifier si un

utilisateur est authentifié et s'il a les permissions nécessaires pour accéder
à certaines routes, garantissant ainsi la sécurité des parties sensibles de
l'applicationReact.

38
D. Injection-SQL

L’injections SQL est une technique d'attaque informatique où

des codeurs malveillants insèrent du code SQL non autorisé dans les
entrées d'une application web. Cela peut leur permettre d'accéder à des
données sensibles, de modifier ou supprimer des données, voire
prendre lecontrôle du système.
Spring Data JPA fournit une protection contre les l'injection SQL, à
l’aide des méthodes de repository. Ces méthodes sont générées
automatiquement et sont sécurisées contre les injections SQL.
Voici un exemple que nous devons implémenter:

V. Présentation des interfaces de l’application

A. Page d'accueil

Lorsqu'on ouvre l'application, la page affichée est la page d'accueil.

Cette page présente l'École Supérieure de Technologie de Fkih Ben Salah,
ainsi que les filières qu'elle propose et les actualités. En bas de la page se
trouve un footer contenant les coordonnées de l'école, telles que l'email de
contact. Un menu est proposé, offrant des liens vers les pages suivantes :

Espace Étudiant : Cette page fournit des informations sur l'espace étudiant,
décrivant les fonctionnalités disponibles pour chaque étudiant.

39
Emploi du temps : Permet aux visiteurs du site de consulter l'emploi du
temps de l'année universitaire actuelle, présentant les emplois du temps de
chaque filière et pour chaque semestre.
Connexion : Cette page offre la possibilité aux utilisateurs du site de se
connecter à leur espace personnel.

Figure 27:Page d’accueil

Figure 28:Page d'accueil section d'actualités

Figure 29:Page d'accueil section des cartes des filières

40
 Figure 30: Footer

Figure 12 : Image d’EST FBS

Le bouton "Plus de détails" permet à l'utilisateur de voir quelques

détails sur l'École Supérieure de Technologie fkih ben salah.

Figure 31: Section des détails de l'EST FBS

41
 Le bouton "Voir plus" permet à l'utilisateur de voir les détails des
actualités, y compris le titre, la description, la date, ainsi que les images et les
vidéos.

Figure 32 :Section de détail de l'actualité

Si l'utilisateur veut en savoir plus sur les filières, il peut simplement

cliquer sur la carte de la filière qui l'intéresse.

Figure 33: Section de détail de la filière

B. Espace Étudiant

Cette page informe l'étudiant des fonctionnalités dont il peut

bénéficier et le redirige vers son espace s'il est déjà connecté sinon, il est
redirigé vers la page de connexion.

42
 Figure 34:Page de l'Espace Étudiant

C. Page des Emplois du Temps

Cette page permet aux visiteurs du site de consulter et de télécharger
l'emploi du temps de l'année universitaire actuelle pour chaque filière et pour
chaque semestre. L'utilisateur doit choisir sa filière, puis son semestre.

Figure 35 : Page des emplois du temps section des cartes des filières

43
 Figure 36 :Page des emplois du temps section des cartes des semestres de la filière

Figure 37 : Page des emplois du temps, section visualisation de l'emploi

D. Page de connexion
Cette page offre la possibilité aux utilisateurs du site de
se connecterà leur espace personnel.

44
 Figure 38 :Page de connexion

E. Profil de l'Étudiant
Si le nom d'utilisateur et le mot de passe appartiennent
à un étudiant,il sera redirigé vers son espace personnel après la
connexion réussie.

Figure 39: Page de Profil de l’étudiant

Lorsqu'il clique sur "Profil", il peut voir les détails de

son profil telsque son nom, prénom, etc

45
 Figure 40: Profil de l'Étudiant

Si un étudiant a besoin d'un document tel qu'une attestation

d'inscription ou tout autre document, il peut faire sa demande en ligne en
cliquant sur "Demandes" et en remplissant un formulaire dédié avant de
l'envoyer.

Figure 41:Page d'envoi de demande

Si un étudiant a une réclamation à faire concernant une demande

refusée, un délai prolongé ou un manque de réponse, il peut cliquer sur
"Réclamations" pour accéder à un formulaire dédié où il peut saisir les détails
de sa réclamation avant de l'envoyer .

46
 Figure 42 :Page d'envoi de réclamation

 "Accueil" permet de rediriger l'utilisateur vers la page d'accueil du

site.
 “Se déconnecter" permet à l'étudiant de se déconnecter de son
compte, le redirigeant ainsi vers la page de connexion.

Si l'étudiant clique sur "Consultation des notes", il pourra voir la liste

des modules avec leurs notes pour chaque module, ainsi que le résultat de
chaque semestre.

Figure 43 :Page de consultation des notes

F. Espace administrateur

Si le nom d'utilisateur et le mot de passe appartiennent à un

administrateur, il sera redirigé vers son espace personnel après la connexion
réussie.

47
 Dans cet espace, l'administrateur peut gérer les étudiants, les filières,
les semestres, les modules, les notes, les actualités, les emplois du temps, les
demandes et les réclamations (ajouter, supprimer et modifier).

Figure 44 :Espace administrateur

1. Filières

Figure 45 :Liste des filière

48
 Figure 46 :Ajouter des filière

Figure 47 :Message indiquant la réussite de la suppression de la filière"

Figure 48: modifier filière

49
2. Semestres

Pour accéder aux semestres, on doit tout d'abord choisir la filière et

l'année afin de pouvoir gérer les semestres d'une filière pour une année
spécifique.

Figure 49 :Cartes des filières désactivées

Figure 50 : Carte de filière Active

50
 Figure 51 :List des semestres

Figure 52: Ajouter semestre

Figure 53 :Modifier semestre

Étape commune :

51
 Pour gérer les étudiants, les emplois du temps et les modules, on doit
tout d'abord choisir la filière, l'année, puis le semestre afin de pouvoir gérer
les étudiants, les modules et les emplois du temps d'une filière pour une
année et un semestre spécifiques.

Figure 54:Carte de filière Active

Figure 55:Cartes des semestres

3. Étudiant

52
 Figure 56: List étudiant

Figure 57:Ajouter étudiant

Figure 58 : Modifier étudiant

53
4. Emploi de temps

Remarque
Lorsque l'emploi du temps est présent, les boutons "Modifier emploi
du temps" et "Supprimer emploi du temps" sont activés. Si l'emploi du temps
n'existe pas, seul le bouton "Ajouter emploi du temps" est activé.

Figure 59 :Partie visualisation de l'emploi du temps chez l'administrateur

Figure 60: modifier emploi de temps

54
 Figure 61 :Supprimer Emploi de temps

Figure 62:Ajouter Emploi de temps

5. Modules

Figure 63 : list modules

55
 Figure 64 : Ajouter module

Figure 65: Modifier module

Figure 66 : Suprimer Module

56
6. Note
Liste des étudiants inscrits à ce module et leurs notes
correspondantes:

Figure 67 : Liste des étudiants inscrits à ce module et leurs notes correspondantes

Si on clique sur "+", on peut ajouter une note pour ce module à un

étudiant.

Figure 68 :Ajouter note

Figure 69 : Modifier note

57
 Figure 70 : Supprimer note

7. Demandes et réclamations

Figure 71 : List des demandes

Accepter ou refuser une demande :

Dans cet espace, l'administrateur peut accepter, refuser ou supprimer
les demandes. Il peut également filtrer les demandes en fonction de leur
statut, afin de voir celles en attente, acceptées ou refusées.
Si l'administrateur accepte la demande, il doit alors envoyer les
documents nécessaires à l'étudiant par email, et si il refuse , il doit également
envoyer un e-mail à l'étudiant pour l'informer de la raison pour laquelle sa
demande a été refusée.
Accepter :

58
 Figure 72 :Accepter demande

Figure 73:Réponse dans l'email

Refuser:

Figure 74: Refuser demande

59
 Figure 75 :Supprimer demande

Le même processus est également applicable pour les réclamations

8. Actualités

Figure 76 : list actualités

60
 Figure 77 :Ajouter actualité

Figure 78: Modifier actualité

Figure 79 :Supprimer actualité

Si on clique sur econ d'œil, on peut gérer les fichiers de chaque

actualité

61
Figure 80 :List des fichiers

Figure 81 :Ajouter fichier

62
Figure 82 :Modifier fichier

Figure 83:Supprimer fichier

Figure 84 :Voir fichier

63
VI. Conclusion
Dans ce chapitre, nous avons détaillé les technologies utilisées pour la
réalisation de notre projet ainsi que les captures d’écran montrant le
fonctionnement de notre application et nous avons décrit en détail les
différents pages qui la constituent.

64
 CONCLUSION ET PERSPECTIVES

Le but principal de ce projet de fin d’etude est de concevoir et

développer une application Web dynamique pour la gestion d’établissement
La conception de cette application a débuté avec la rédaction du cahier des
charges, ce qui a permis d’identifier les besoins et de définir une vision
globale.

Pour la réalisation de ce projet, nous avons commencé par une étude

de l’existant, une étude du système à traiter et la recherche des besoins à
satisfaire, suivies de la conception et de l’élaboration des diagrammes
importants en utilisant des outils comme StarUML.

Nous avons développé notre application en travaillant en groupe,

une expérience qui nous a permis de reconsidérer l’importance du travail
collaboratif. Ce projet nous a permis d’appliquer les connaissances acquises
durant nos études et d'apprendre de nouveaux outils et technologies.

Pour les perspectives d’avenir, il serait intéressant d'intégrer des

technologies avancées comme l’Intelligence Artificielle pour l'automatisation
de la gestion des dossiers et l'analyse prédictive des performances des
étudiants. Développer une version mobile de l’application offrirait une
accessibilité accrue, permettant aux utilisateurs de gérer leurs informations et
de recevoir des notifications en temps réel. Enfin, l'intégration d'outils
d’analyse et de reporting permettrait de fournir des statistiques détaillées sur
les inscriptions, les résultats académiques et les tendances générales, aidant à
la prise de décisions stratégiques au sein de l'établissement.

Ce projet a non seulement créé une application pour la gestion

d’établissement, mais aussi posé les bases pour des améliorations futures, en
nous donnant l’occasion de maîtriser des outils précieux pour les défis
technologiques à venir.

65
 WEBOGRAPHIE

Documentation officielle de React js :[Link]

Tutoriels React sur W3Schools: [Link] Stack
Overflow: [Link]
JWT (JSON Web Tokens): [Link]
Documentation officielle de Spring Boot: [Link]
boot Guide de démarrage rapide Spring Boot:
[Link] Youtube :
[Link]
Google : [Link] ChatGPT : [Link]

66