Vous êtes sur la page 1sur 57

‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬

ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Projet de fin d’année


Génie Télécommunications & Réseaux

<
Mise en place d’un système de
pointage pour la gestion automatique
des absences des étudiants

/>

Réalisées par :
SBAI HANAE
TALHAOUI HANANE

Encadré par :
IMADEDDINE MOUNTASSER

Année universitaire :
2022-2023

2
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Remerciements

Nous ’adressons nos vifs remerciements :

A. Allah le tout-puissant de nous avoir donné la santé, la


volonté, le courage et de nous avoir fourni, la forcent pour
achever ce travail... Nous ne saurions oublier de remercier
nos parents pour leur contribution, leur soutien et leur
patience, nos proches, nos amis et toutes les personnes qui nous
ont aidé par leur soutien permanent dans nos études ou en
dehors.

À notre encadrant M. Imadeddine Mountassir pour son


encadrement, son soutien et sa disponibilité. Ses conseils, ses
suggestions de lecture, ses commentaires, ses corrections et ses
qualités scientifiques ont été très précieux pour mener à bien
ce travail.

3
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Résumé

Le projet vise à mettre en place un système de pointage automatisé pour la gestion des
absences des étudiants. L'objectif est d'offrir une solution plus efficace et transparente pour suivre la
présence des étudiants dans le cadre de leur parcours éducatif. Le système utilisera des technologies
modernes telles les cartes électroniques pour enregistrer automatiquement la présence des étudiants.
Il sera intégré aux systèmes existants de l'institution éducative, garantissant ainsi une bonne
intégration avec les bases de données des étudiants et les plateformes de gestion académique.

Abstract

The project aims to implement an automated attendance tracking system for student absences
management. The objective is to provide a more efficient and transparent solution for monitoring
student attendance within their educational journey. The system will utilize modern technologies
such as electronic cards to automatically record student presence. It will be integrated into the
existing systems of the educational institution, ensuring seamless integration with student databases
and academic management platforms.

4
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Table de Matière

Remerciements .............................................................................................................................. 3
Resume ........................................................................................................................................... 4
Abstract .......................................................................................................................................... 4
Liste des figures ............................................................................................................................ 7
Introduction ................................................................................................................................... 9
Chapitre I : Contexte Générale Du Projet ................................................................................ 10
I. Objectif du projet ................................................................................................. 11
II. presentation du projet ........................................................................................ 11
1. Description de service d’absence ................................................................ 11
2. problematique ................................................................................................ 11
3. solution proposees ......................................................................................... 12
III. Deroulement du projet ....................................................................................... 13
Chapitre II : Analyse et conception du projet ......................................................................... 14
I. Identification des acteurs.................................................................................... 15
II. Specification des besoins ................................................................................... 15
III. Diagramme utilises.............................................................................................. 17
1. Diagramme de cas d’utilisation .................................................................. 17
2. Diagramme de sequence ............................................................................ 18
3. Diagramme de classe .................................................................................. 20
Chapitre III : Realisation et mise en œuvre de l’application ................................................. 24
I. Technologie RFID ................................................................................................ 25
II. Environnement et outils de develeppements .................................................. 26
1. bootstrap ......................................................................................................... 26
2. starUML .......................................................................................................... 27
3. spring boot ...................................................................................................... 27
4. Thymeleaf ....................................................................................................... 28
5. MySQL ............................................................................................................ 28

5
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

6. Iltellij IDEA ..................................................................................................... 29


7. WampServer ................................................................................................... 29
8. HTML .............................................................................................................. 30
9. CSS ................................................................................................................... 30
10. Java .................................................................................................................. 31
11. hibernate ......................................................................................................... 31
12. GitHub ............................................................................................................. 32

III. Realisation du projet ........................................................................................... 33


Conclusion ................................................................................................................................... 56
Bibliotheques ............................................................................................................................... 57

6
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Liste des figures

Figure 1 : diagramme de cas d'utisation................................................................................................ 17

Figure 2 : diagramme de séquence (étudiant) ...................................................................................... 18

Figure 3: diagramme de séquence (Administrateur) .......................................................................... 19

Figure 4 : diagramme de sequence (enseignant) .................................................................................. 19

Figure 5: digramme de classe.................................................................................................................. 20

Figure 6: Modèle MVC............................................................................................................................. 21

Figure 7: view ............................................................................................................................................ 22

Figure 8: Modele ....................................................................................................................................... 22

Figure 9: Controller .................................................................................................................................. 23

Figure 10: RFID ......................................................................................................................................... 25

Figure 11: logo bootstrap ........................................................................................................................ 26

Figure 12: logo starUML .......................................................................................................................... 27

Figure 13: logo spring boot ..................................................................................................................... 27

Figure 14: logo thymeleaf ........................................................................................................................ 28

Figure 15: logo MySQL ............................................................................................................................ 28

Figure 16: logo IntelliJ IDEA ................................................................................................................... 29

Figure 17: logo Wampserver ................................................................................................................... 29

Figure 18: logo html ................................................................................................................................. 30

Figure 19: logo css..................................................................................................................................... 30

Figure 20: logo Java .................................................................................................................................. 31

Figure 21: logo Hibernate ........................................................................................................................ 31

Figure 22: logo GitHub ............................................................................................................................ 32

Figure 23: Authentification d'un utilisateur ......................................................................................... 33

Figure 24: table des utilisateurs .............................................................................................................. 35

Figure 25: Ajouter un utilisateur ............................................................................................................ 35

Figure 26: table des utilisateurs .............................................................................................................. 36

Figure 27: la table de base de données des utilisateurs ....................................................................... 36

7
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Figure 28: l'authentification des gens externes du système................................................................ 37

Figure 29: l'authentification de l'administrateur .................................................................................. 38

Figure 30: espace administrateur ........................................................................................................... 38

Figure 31: Tables des étudiants .............................................................................................................. 39

Figure 32: Ajouter un étudiant ................................................................................................................. 40

Figure 33: modifier un étudiant.............................................................................................................. 41

Figure 34: Table des séances ................................................................................................................... 41

Figure 35:Ajouter une séance .................................................................................................................. 42

Figure 36: Modifier une séance ............................................................................................................... 42

Figure 37: table enseignant ...................................................................................................................... 43

Figure 38: Ajouter un enseignant ........................................................................................................... 44

Figure 39: Modifier un enseignant ......................................................................................................... 44

Figure 40: table module ........................................................................................................................... 45

Figure 41: Ajouter un module ................................................................................................................. 45

Figure 42: table filière............................................................................................................................... 46

Figure 43: Ajouter une filière .................................................................................................................. 47

Figure 44: Modifier une filière ................................................................................................................ 47

Figure 45: interfaces département .......................................................................................................... 48

Figure 46 : interfaces matière .................................................................................................................. 49

Figure 47: interfaces salle......................................................................................................................... 49

Figure 48: interfaces groupe .................................................................................................................... 49

Figure 49: L'authentification d'un étudiant .......................................................................................... 49

Figure 50: compte d'étudiant .................................................................................................................. 49

Figure 51: Espace étudiant ...................................................................................................................... 49

Figure 52: Espace étudiant ...................................................................................................................... 49

Figure 53: L'authentification d'un enseignant ...................................................................................... 49

Figure 54: space enseignat ....................................................................................................................... 49

Figure 55: space enseignat ....................................................................................................................... 49

8
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Introduction générale

Dans le cadre de notre formation d’ingénieurs, les projets constituent un moyen


efficace et une véritable opportunité pour apprendre. Pour ceci, ce projet de fin d’année
nous a été très utile pour approfondir nos connaissances en ce qui concerne le
développement web.
Le projet consiste à développer un système de pointage pour la gestionautomatique des
absences des étudiants. Ce système permettra aux enseignants de suivre facilement les
absences de leurs étudiants, ainsi qu'aux étudiants de consulter leur propre historique
d'absences. Il pourrait également inclure des fonctionnalités telles que la notification
automatique des absences aux responsables de l'établissement. Le système pourrait utiliser
des technologies telles que la reconnaissance faciale ou la reconnaissance d'empreintes
digitales pour l'authentification des étudiants.
Nous aborderons dans les parties qui suivent une présentation détaillée du projet
dès la phase de conception jusqu’à sa construction tout en expliquant les technologies
utilisées ainsi que les fonctionnalités de l’application.

9
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Chapitre I :

Contexte Générale Du Projet

10
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

I. Objectif du projet :

L’objectif général du projet met en évidence la nécessité d'améliorer la gestion des


absences des étudiants en introduisant un système de pointage automatisé, offrant ainsi une
solution plus fiable, efficace et transparente pour suivre la présence des étudiants dans le cadre de
leur parcours éducatif.

II. Présentation du projet :


I.

1. Description du service d’absence :

Le service des absences dans la plus part des écoles marocaine traitent chaque jour un grand
nombre de fiches d’absence par deslogiciels de bureautique. Parmi les rôles de ce service :

• Gestion des absences : c’est la tâche principale du service, l’administrateur doit ajouter,
modifier, et supprimer les absences des étudiants.

• Gestion des étudiants par filière : la gestion des étudiantsest aussi une tâche importante
du service d’absences, elle permet l’ajout des listes d’étudiant, l’impression des fiches
d’absences par filière.

2. Problématique :

L’ENSA ne dispose aucun logiciel informatique permettant la gestion des absences.


Le service accompli ses tâches de gestion d’unemanière presque manuelle en utilisant des
logiciels de bureautique. Ceci rend leurs tâches difficiles, et le travail compliqué, lent et mal
structuré.

11
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Parmi les problèmes de ce service :

• Problème de gestion l’ajout et la suppression des absences se fait avec Excel chaque filière est
dans un fichier Excel appart ce qui mène à une perte de temps et unemauvaise organisation de
travail.

• Difficulté d’accès à l’information chaque liste d’étudiant eststockée par filière dans un fichier
Excel indépendant, ce qui consiste le parcours de plusieurs fichiers pour consulter les absences
des étudiants.

• Problème de gestion de l’information il n’y a pas de base dedonnées pour stocker les listes
d’étudiants et leurs informations ce qui peut mener à une perte d’information.

• Problème de sécurité n’importe quelle personne peut accéder aux informations et les modifier.

3. Solutions proposées :

Afin de résoudre les problèmes ci-dessus notre encadrant nous propose de travailler sur une
application qui permet la gestion automatique des absences
L’application doit nous permettre de :
• Faciliter la consultation des absences des étudiants.
• Faciliter l’ajout des nouvelles absences.

• Diminuer les risques d’erreur.


• Garder trace sur toutes les activités effectuées p1ar l’administrateur du service.
• Garder l’archive des absences par année universitaire.

• Garantir la sécurité (Authentification).


• Rendre le travail plus structurés et dynamique.

12
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

III Déroulement du projet :

Chaque projet nécessite un planning représentant visuellement l'état d'avancement des


différentes activités qui constituent un projet. Notre projet de fin d’année Mise en place d’un
système de pointage pour la gestion automatique des absences des étudiants est réalisé selon
le planning représenté sous forme de diagramme de Gant réalisé à l’aide de Tom’sPlanner.Le
diagramme de Gantt est un outil utilisé (souvent en complément d'un réseau PERT) en
ordonnancement et en gestion de projet et permettant de visualiser dans le temps les diverses
tâches composant un projet.

13
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Chapitre II :

Contexte Générale Du Projet

14
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

I. Identification des acteurs :

Un acteur est une entité externe qui interagit avec le système(opérateur, centre distant, autre
système...). En réponse à l'action d'un acteur, le système fournit un service qui correspond à son
besoin. Les acteurs peuvent être classés (hiérarchie).
Pour notre projet les acteurs principaux sont :
Etudiant : Il joue un rôle important dans le système, il doit s’authentifier pour accéder au système
de pointage afin de marquer sa présence et aussi pour consulter leur historique d’absence.
Enseignant : Il doit s’authentifier pour accéder aux fonctionnalités qui leur sont attribuées. Parmi
ces fonctionnalités, l’enseignant a la responsabilité de valider la présence des étudiants lors des
cours, de plus l’enseignant a la possibilité de pointer les étudiants son carte.
Administrateur : c’est l’acteur clé du système. Il doit s’authentifier pour accéder aux
fonctionnalités d’administration. Les responsabilités de l’administrateur incluent la gestion des
absences enregistrées et la suppression des absences justifiées. L’administrateur a aussi la
possibilité de paramétrer le système en fonction des besoins de l’école.

II. Spécification des besoins :

Dans le cadre de notre projet "Mise en place d'un système de pointage pour la gestion
automatique des absences des étudiants", il est essentiel de spécifier clairement les besoins
fonctionnels et non fonctionnels du système. Pour cela, nous avons adopté la méthode 2TUP (Two
Track Unified Process), qui nous permet de gérer ces deux aspects de manière intégrée et
cohérente.

15
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Spécification des besoins fonctionnels :


La branche fonctionnelle, également connue sous le nom de "branche gauche" dans la méthode
2TUP, est dédiée à la capture et à l'analyse des besoins fonctionnels du système. Elle vise à
déterminer ce que le système doit réaliser du point de vue métier. Dans notre projet, nous avons
identifié les acteurs principaux tels que les étudiants, les enseignants et les administrateurs, et nous
avons défini les fonctionnalités attendues, telles que l'authentification des étudiants et des
enseignants, la validation de la présence des étudiants, la consultation de l'historique des absences
pour les étudiants, etc.

Spécification des besoins non fonctionnels :


La branche technique, également appelée "branche droite" dans la méthode 2TUP, se concentre
sur les besoins non fonctionnels du système. Il s'agit des contraintes et des exigences techniques
à prendre en compte. Dans notre projet, nous avons identifié des besoins non fonctionnels tels que
la performance du système pour gérer un grand nombre d'utilisateurs simultanément, la
disponibilité du système pendant les heures prévues d'utilisation, la facilité d'intégration avec
d'autres systèmes existants, etc.

En utilisant la méthode 2TUP, nous avons pu intégrer les résultats des deux branches dans la phase
de réalisation du projet. Cela nous a permis de concevoir et de développer une solution adaptée
aux besoins des utilisateurs, tout en prenant en compte les contraintes techniques et les exigences
de qualité. La spécification des besoins fonctionnels a guidé le développement des fonctionnalités
clés du système, tandis que la spécification des besoins non fonctionnels a assuré que le système
réponde aux normes de performance, de disponibilité et d'intégration.

16
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

III. Diagrammes Utilisés :


1. Diagramme de cas d’utilisation :

Un cas d'utilisation est une liste d'étapes qui définissent les interactions entre un acteur (un
humain qui interagit avec le système ou un système externe) et le système lui-même. Les
diagrammes decas d'utilisation décrivent les spécifications d'un cas d'utilisation et modélisent les
unités fonctionnelles d'un système. Ces diagrammes aident les équipes de développeurs à
comprendre les besoins de leur système, notamment le rôle des interactions humaines et les
différences entre plusieurs cas d'utilisation.

Figure 1 : diagramme de cas d'utilisation

17
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

2. Diagramme de séquence :

Un diagramme de séquence est une représentation visuelle qui montre l'ordre des messages
échangés entre les objets ou les acteurs d'un système. Il illustre les interactions entre les différents
éléments du système au fil du temps. Ce diagramme permet de comprendre le déroulement des
actions et des communications entre les acteurs et les objets, fournissant ainsi une vue séquentielle
du comportement du système.

Figure 2 : diagramme de séquence (étudiant)

18
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Figure 4 : diagramme de sequence (enseignant)

Figure 3: diagramme de séquence (Administrateur)

19
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

3. Diagramme de classe :

Le diagramme de classe est un schéma utilisé engénie logiciel pour présenter les classes

et les interfaces des systèmes ainsi que leurs relations. Ce diagramme représente les

entités (des informations) manipulées par les utilisateurs.

Figure 5: digramme de classe

20
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

< ! -- Pour développer notre projet de manière bien structurée et appliquer efficacement notre
conception, on a choisi de travailler selon la méthode MVC (Modèle-Vue-Contrôleur) -- >

Modèle MVC :

Le MVC signifie Model-View-Controller est un modèle architectural qui sépare une


application en trois composants logiques principaux :modèle, vue et le contrôleur. Chacun de ces
composants est construitpour gérer des aspects de développement spécifiques d’une application.
MVC est l’un des frameworks de développement Web standard les plus fréquemment utilisés
dans l’industrie pour créer des projets extensibles et évolutifs.

Figure 6: Modèle MVC

21
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

< ! - - Vue -- >

Une vue est un moyen d’afficher desobjets dans


une application. Par exemple, l’affichage d’une
fenêtre ou des boutons ou d’un texte dans une
fenêtre. Il comprend tout ce que l’utilisateur peut
voir.
La vue est l’interface utilisateur. La vue permet à
l’utilisateur d’afficher les données à l’aide d’un
modèle et luipermet également de les modifier.

Figure 7: view

// Modèle

Un modèle contient les données utilisées par un


programme. Il peut s’agir d’une base de données d’un
fichier ou d’un simple objet. Parexemple, un objet Client
récupérera les informations de la base de données, les
manipulera et mettra à jour ses données dans la base de
données

Figure 8: Modele

22
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

// Contrôleur

Les contrôleurs agissent comme une interface


entre le modèle et la vue, pour traiter toute le logique
métier et les requêtes entrantes, manipuler les données à
l’aide du composant Modèle etinteragir avec les Vues
pour rendre le résultat final. Par exemple, le contrôleur «
Client » va traiter toutes les interactions et les entrées de
la Vue « Client » et mettre à jour la base de données en
utilisant le Modèle « Client ». Le même contrôleur sera
utilisé pour visualiser lesdonnées du client.
Figure 9: Controller

23
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Chapitre III :

Réalisation et mise en œuvre de l’application

24
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

I. Technologie RFID :

La technologie RFID (Radio


Frequency Identification) est un système
d'identification automatique qui utilise des tags
électroniques pour récupérer et stocker des
données à distance. Ces tags, composés d'une
puce et d'une antenne, peuvent être attachés à
des objets ou i ntégrés dans des produits.

Figure 10: RFID

Lorsqu'un lecteur RFID émet signal radio, les tags RFID à proximité captent cette énergie et
répondent en envoyant leurs informations stockées. Les lecteurs RFID reçoivent ces données et
les transmettent à un système de gestion pour analyse.

La technologie RFID offre plusieurs avantages, notamment l'automatisation des processus de


collecte de données, la traçabilité des objets en temps réel, la réduction des erreurs humaines,
l'amélioration de l'efficacité opérationnelle et la visibilité accrue des stocks.

25
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

II. Environnement et Outils de développement :

Notre application a été développée en


utilisant une combinaison d'outils de
développement qui ont été sélectionnés en
fonction de nos besoins spécifiques.

1. bootstrap :

Bootstrap est un framework front-


end open-source largement utilisé
pour le développement d'interfaces
utilisateur réactives et attrayantes
pour les applications web. Il fournit
un ensemble de composants pré-
conçus, de styles CSS et de scripts
JavaScript, facilitant ainsi la création
d'une interface utilisateur cohérente
et esthétiquement agréable. Figure 11: logo bootstrap

26
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

2. StarUML :

StarUML est un outil de modélisation UML


puissant qui permet aux développeurs de créer et de
visualiser des diagrammes UML pour la
conception logicielle. Il facilite la communication
et la compréhension de la structure et des relations
d'un système logiciel, ce qui en fait un outil
précieux dans le processus de développement
logiciel.

Figure 12: logo starUML

3. Spring boot :

Spring Boot est un framework Java qui


simplifie le développement d'applications en
fournissant des fonctionnalités par défaut
intelligentes et des conventions de
configuration. Il est largement utilisé pour
créer des applications Web, des services
RESTful, des microservices et d'autres types
d'applications Java.

Figure 13: logo spring boot

27
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

4. Thymeleaf :

Thymeleaf est un moteur de templates Java


puissant et convivial, qui permet de créer des
vues HTML dynamiques en utilisant des
templates et des attributs spéciaux. Il est
largement utilisé avec des frameworks tels que
Spring Boot pour le développement
d'applications Web

Figure 14: logo thymeleaf

5. MySQL :

MySQL est un système de gestion de base de


données relationnelle open-source, largement
utilisé pour stocker, organiser et récupérer des
données dans des applications. Il utilise le langage
SQL et offre des fonctionnalités telles que la
création de tables, l'insertion, la mise à jour et la
suppression de données, ainsi que des
Figure 15: logo MySQL
fonctionnalités avancées telles que les index, les
vues, les procédures stockées, etc.

28
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

IntelliJ IDEA est un environnement de


6. IntelliJ IDEA: développement intégré puissant et
polyvalent, spécialement conçu pour le
développement logiciel Java, Kotlin et
d'autres langages. Il offre des
fonctionnalités avancées telles qu'un
éditeur intelligent, l'intégration avec des
outils de construction, des fonctionnalités
de débogage avancées, une intégration
avec des frameworks et des outils de tests,
ainsi que la gestion du contrôle de version.
Il est apprécié par les développeurs pour sa
facilité d'utilisation, sa productivité et sa
riche gamme de fonctionnalités.
Figure 16: logo IntelliJ IDEA

7. Wampserver:

WampServer est un logiciel open-source


qui permet de créer et de gérer facilement un
environnement de développement web local
sur Windows. Il combine les logiciels
Apache, MySQL et PHP, d'où le nom
"Wamp" qui est l'acronyme de Windows,
Apache, MySQL et PHP.

Figure 17: logo Wampserver

29
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

8. HTML

HTML (HyperText Markup Language) est


un langage de balisage utilisé pour structurer
et présenter le contenu des pages web. Il s'agit
d'un langage de base pour la création de sites
web, permettant de décrire la structure logique
des informations présentes sur une page, tels
que les paragraphes, les titres, les liens, les

images, les tableaux, les formulaires, etc.

Figure 18: logo html

9. CSS

Le CSS (Cascading Style Sheets) est un


langage de style utilisé pour définir et
contrôler l'apparence des éléments d'une page
web écrite en HTML ou en XML. Il s'agit
d'un langage de feuilles de style qui permet
de séparer la présentation et la mise en forme
du contenu d'un site web.
Figure 19: logo css

30
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

10. Java

Java est un langage de programmation de


haut niveau, orienté objet et multiplateforme,
créé par Sun Microsystems (maintenant
détenu par Oracle). Il a été conçu pour être
simple, sûr, portable et adapté à un large
éventail d'applications. Java est utilisé pour
développer des logiciels allant des
applications de bureau aux applications
mobiles, en passant par les applications web
Figure 20: logo Java et les systèmes embarqués

11. Hibernate

Hibernate est un framework de

persistance objet pour Java. Il fournit


un moyen efficace et pratique de

mapper les objets Java à une base de

données relationnelle, en utilisant une

approche appelée ORM (Object-

Relational Mapping). Figure 21: logo Hibernate

31
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

12.GitHub

GitHub est une plateforme de


développement collaboratif basée sur

Git, un système de contrôle de version


Figure 22: logo GitHub
distribué. Il permet aux développeurs

de travailler ensemble sur des projets

logiciels, de partager du code source,


de collaborer, de gérer les problèmes

(issues) et de suivre les modifications


apportées au code.

32
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

III. Réalisation du projet :

Voici maintenant un ensemble de captures d’écrans sur les principaux points


d’entrées de l’application :
L’interface d’authentification :
La première page de notre application est la page d'authentification, qui permet à
l'utilisateur d'accéder à l'application. L'application offre aux utilisateurs la
possibilité de se connecter à leur espace en tant qu'étudiant, enseignant ou
administrateur. Cette page est hautement sécurisée et assure que chaque utilisateur
accède uniquement à son espace réservé. Ainsi, les droits d'accès sont strictement
restreints pour garantir la confidentialité et la sécurité des informations.

Figure 23: Authentification d'un utilisateur

33
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

On a trois types d’utilisateur pour accéder à l’application : Administrateur, Enseignant et


Etudiant.

ENSEIGNAN
T

ETUDIANT
ADMIN

< ! -- Un avantage essentiel de Spring Boot réside dans sa capacité à garantir la


sécurité et la fiabilité des données en restreignant l'accès à l'application aux seuls
utilisateurs autorisés. Au lieu de permettre l'accès à tout individu, Spring Boot offre
un contrôle précis sur les droits d'accès en accordant l'accès uniquement aux
utilisateurs qui possèdent les informations d'identification appropriées. Cela permet
de protéger les données sensibles et de maintenir leur intégrité -- >

34
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Figure 24: table des utilisateurs

< ! - - Ajouter un utilisateur - - >

Figure 25: Ajouter un utilisateur

35
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

false

Figure 26: table des utilisateurs

Figure 27: la table de base de données des utilisateurs

36
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

< ! - - Il est observé que l'utilisateur Salma n'a pas pu accéder à l'application car
ses droits d'accès n'ont pas été attribués - - >

Figure 28: l'authentification des gens externes du système

37
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

1. Interface administrateur :

Une fois s’authentifié, l'administrateur peut accéder à son espace personnel.

Figure 29: l'authentification de l'administrateur

Dans cet espace, nous présenterons toutes les fonctionnalités et les opérations qu'un
administrateur peut effectuer.
Pour faciliter les tâches, nous avons divisé les entités en trois catégories principales
/* COURS
EQUIPE PEDAGOGIQUE
STRUCTURE */

Figure 30: espace administrateur

38
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

/* COURS

• Gestion des étudiants :

L'étudiant représente un élément dynamique dans notre application, nécessitant une


gestion attentive de la part de l'administrateur. La gestion des étudiants constitue
une tâche particulièrement intéressante, ce qu'on va voir dans les captures
suivantes :

< ! - - Afficher la liste des étudiants - ->

Figure 31: Tables des étudiants

39
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

< ! - - Ajouter un étudiant - - >

Figure 32: Ajouter un étudiant

< ! - - Modifier les informations d’un étudiant - - >

40
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

• Gestion des séances :

En tant qu'administrateur, il joue un rôle essentiel dans l'organisation et la gestion


des séances au sein de notre application. Il a le pouvoir de créer, planifier et
superviser les séances selon les besoins spécifiques de chaque groupe et filière. La
capture d'écran illustre clairement comment il peut configurer les détails des
séances, tels que les horaires, les salles, les enseignants assignés et les matières
traitées. Grâce à son implication dans la gestion des séances, il assure une
coordination efficace et Figure 33: modifier un étudiant une optimisation du
calendrier académique.

< ! - - Afficher la liste des séances - ->

Figure 34: Table des séances

41
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

< ! - - Ajouter une séance - - >

Figure 35:Ajouter une séance

< ! - - Modifier les informations d’une séance - - >

Figure 36: Modifier une séance

42
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

EQUIPE PEDAGOGIQUE

• Gestion des enseignants :

L'administrateur dispose de privilèges de gestion pour les enseignants, lui


permettant notamment d'accéder à la liste complète de tous les enseignants et de
l'afficher.

< ! - - Afficher la liste des enseignants - ->

Figure 37: table enseignant

L'administrateur possède les autorisations nécessaires pour effectuer des actions telles
que l'ajout ou la suppression d'un professeur, ainsi que la modification des informations
d'un professeur existant.

43
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

< ! - - Ajouter un enseignant - - >

Figure 38: Ajouter un enseignant

< ! - - Modifier un enseignant - - >

Figure 39: Modifier un enseignant

44
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

STRUCTURE */

• Gestion des Modules :


De la même façon l’administrateur a le droit de gérer les modules :

< ! - - Afficher les modules - - >

Figure 40: table module

< ! - - Ajouter un module - - >

Figure 41: Ajouter un module

45
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

• Gestion des filières :

L'administrateur a la capacité de prendre en charge la gestion des filières.


Cela implique la possibilité d'effectuer des actions telles que l'ajout ou la
suppression de filières, ainsi que la modification des informations associées à une
filière déjà existante.

< ! - - Afficher la liste des filières - ->

Figure 42: table filière

Comme on peut observer, les informations affichées incluent les noms des filières,
les responsables de chaque filière ainsi que le département auquel chaque filière est
rattachée.

46
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

< ! - - Ajouter une filière - - >

Figure 43: Ajouter une filière

< ! - - Modifier une filière - - >

Figure 44: Modifier une filière

47
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

De manière similaire, nous appliquons la même approche pour afficher les


informations relatives au département, à la matière, à la salle et au groupe. Ainsi,
les détails tels que le nom du département, le responsable du département, les
informations sur la salle et les détails du groupe sont tous présentés de manière claire
et accessible, et on a obtenu les résultats suivants :

< ! - - Pour département - - >

Figure 45: interfaces département

48
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

< ! - - Pour matière - - >

Figure 46 : interfaces matière

49
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

< ! - - Pour salle - - >

Figure 47: interfaces salle

50
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

< ! - - Pour groupe - - >

Figure 48: interfaces groupe

51
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

2. Interface étudiant :

Afin de garantir sa présence, l'étudiant utilise une carte RFID pour se signaler.
En effectuant un pointage avec cette carte, il enregistre sa présence de manière fiable
et sécurisée dans le système. Cette méthode de pointage par carte RFID permet une
gestion précise et automatisée des présences, offrant ainsi une solution pratique et
efficace pour suivre la présence des étudiants.

L’étudiant a aussi le droit de consulter son historique d’absence, pour faire ça il


commence par effectuer l'authentification en accédant à son compte.

Figure 49: L'authentification d'un étudiant

52
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Une fois la connexion établie, l’étudiant peut accéder à son espace personnel.

Figure 50: compte d'étudiant

Lorsque l'étudiant accède à la section "Mon compte", son historique d'absences


s'affiche instantanément. En cliquant sur cette option, il peut consulter de manière
claire et détaillée toutes les informations relatives à ses absences passées. Cette
fonctionnalité offre à l'étudiant une visibilité complète sur son historique d'absences

53
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Figure 51: Espace étudiant

Figure 52: Espace étudiant

54
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

3. Interface enseignant :

Le rôle principal de l'enseignant consiste à valider la présence des étudiants et à effectuer


un pointage pour les étudiants qui sont oubliés leurs carte RFID. Pour ce faire, l'enseignant
doit d'abord s'authentifier.

Figure 53: L'authentification d'un enseignant

55
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Après l'ouverture de session, l'enseignant peut accéder à son espace personnel.

Figure 54: space enseignat

Figure 55: space enseignat

Avant de pouvoir effectuer ses différentes fonctionnalités, l'enseignant


doit d'abord sélectionner la filière et la séance correspondantes afin d'afficher la
liste des étudiants avec leur pointage. Toutefois, malheureusement, nous n'avons
pas réussi à afficher cette liste de manière fonctionnelle jusqu'à présent. Cela
empêche l'enseignant d'accéder aux informations de pointage des étudiants et
limite donc sa capacité à valider leur présence de manière pré

56
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Conclusion générale

Dans le cadre de ce projet de Mise en place d’un système de pointage pour la gestion
automatique des absences des étudiants, nous avons réussi à concevoir et à développer une
application fonctionnelle dotée d'une interface graphique conviviale. L'application offre des
fonctionnalités essentielles telles que l'authentification, la gestion des étudiants, des enseignants,
des filières, des séances et des absences.

L'interface graphique a été conçue de manière à faciliter l'interaction des utilisateurs avec
l'application, en offrant une navigation intuitive et une présentation visuelle claire des données.
Les fonctionnalités de l'application permettent aux utilisateurs, tels que les étudiants, les
enseignants et les administrateurs, de gérer efficacement les absences, de consulter leur
historique, de valider les présences et d'effectuer d'autres tâches liées à la gestion académique.

Cependant, malgré les avancées réalisées, il reste des perspectives pour améliorer et étendre
ce projet. Certaines des perspectives futures envisagées incluent :
// Amélioration de la fonctionnalité d'affichage de la liste des étudiants avec leur pointage pour les
enseignants, en résolvant les problèmes techniques rencontrés jusqu'à présent.
// Intégration de fonctionnalités supplémentaires, telles que la génération de rapports statistiques
sur les absences, la communication entre les utilisateurs via des messages intégrés, etc.
// Intégration de technologies de pointage avancées, telles que la reconnaissance faciale ou les
codes QR, pour faciliter la validation des présences des étudiants.

57
‫المدرسة الوطنية للعلوم التطبيقية‬ ‫جامعة سيدي محمد بن عبدهللا‬
ⵜⵉⵏⵎⵍⵜⴰⵏⴰⵎⵓⵔⵜⵏⵜⵎⴰⵙⵙⴰⵏⵉⵏⵜⵓⵙⵏⵉⵙⵉⵏ ⵜⴰⵙⴷⴰⵡⵉⵜⵙⵉⴷⵉⵎⵓⵃⵎⵎⴰⴷⴱⵏⵄⴱⴷⵓⵍⵍⴰⵀ
Ecole Nationale des Sciences Appliquées de Fès Université Sidi Mohamed Ben Abdellah

Bibliothèques

https://www.youtube.com/watch?v=msXL2oDexqw
https://drive.google.com/file/d/1duRlDG7idi9Bpf5cD7eSkxCgNf5ajNkM/view
https://getbootstrap.com/
https://hibernate.org/
https://spring.io/
https://www.thymeleaf.org/
https://stackoverflow.com/

58

Vous aimerez peut-être aussi