PROJET DE FIN D’ETUDES

Ingénierie Full Stack et Management Digital

Thème :
Management systeme du centre de formation et
d’encadrement

Réaliser par :

Mohammed EL Aguili Youssra EL Hassouni

 Table des matières
Dédicace 5

Remerciement 6

Resumer 7

Abstract 8

Introduction : 9

Chapitre I 10

I- Contexte generale de projet : 11

II- L’objectif : 11

Chapitre II 13

I- Conception : 14

Chapitre III 18

I- Les Outiles de développement 19

II- Presentation de la platforme 20

1. Interface bienvenue : 20

Figure 6 :Interface bienvenue : 21

2. Interface accueil : 21

3. Interface profile: 22

4. Interface formateur: 23

5. Interface module: 24

6. Interface groupe: 26

7. Interface groupe 26

8. Interface absence: 27

9. Interface emploi: 29

Conclusion 31
 Dédicace
 A nos chers parents

 À tous nos chers amis

 À nos Frères et sœurs

 À tous nos professeurs

 Remerciement
NOUS ÉPROUVONS UNE PROFONDE

GRATITUDE ENVERS TOUTES LES PERSONNES

GÉNÉREUSES QUI ONT APPORTÉ LEUR

PRÉCIEUSE CONTRIBUTION, JOUANT UN RÔLE

ESSENTIEL DANS LA CRÉATION DE CE PROJET.

 Resumer
Dans le cadre de notre projet de fin d'études, nous nous sommes fixés pour objectif de
concevoir et de développer un site web dédié à la gestion scolaire, afin de simplifier
les opérations quotidiennes des établissements éducatifs. Cette application vise à
fournir aux écoles et aux lycées les outils nécessaires pour gérer efficacement leurs
ressources et leurs activités, le tout à travers une interface conviviale. Parmi les
fonctionnalités clés de notre plateforme, nous proposons :

 Authentification des utilisateurs

 Gestion des comptes
 Gestion des utilisateurs
 Suivi des stagiaires
 Administration des modules
 Gestion des salles de classe
 Suivi des absences
 Gestion des emplois du temps et des calendriers

Pour la conception de notre application, nous avons utilisé le langage de modélisation

UML (Unified Modeling Language) pour créer une représentation visuelle claire de
notre solution. En ce qui concerne l'implémentation technique, nous avons choisi
plusieurs technologies adaptées à nos besoins. Visual Studio Code a été retenu comme
environnement de développement, tandis que Laravel a été sélectionné en tant que
framework backend. Pour le frontend, nous avons opté pour React, et MySQL a été
choisi comme système de gestion de base de données. De plus, nous avons intégré
Bootstrap ainsi que HTML/CSS pour garantir une présentation harmonieuse et une
expérience utilisateur fluide. Cette combinaison de technologies nous a permis de
bâtir une plateforme à la fois robuste et performante pour la gestion scolaire.
 Abstract
As part of our final project, we aimed to design and develop a website dedicated to
school management, with the goal of simplifying the daily operations of educational
institutions. This application is intended to provide schools and high schools with the
necessary tools to effectively manage their resources and activities, all through a user-
friendly interface. Key features of our platform include:

 User authentication
 Account management
 User management
 Intern tracking
 Module administration
 Classroom management
 Absence tracking
 Schedule and calendar management

For the design of our application, we utilized the Unified Modeling Language (UML)
to create a clear visual representation of our solution. Regarding technical
implementation, we selected several technologies suited to our needs. Visual Studio
Code was chosen as the development environment, while Laravel was selected as the
backend framework. For the frontend, we opted for React, and MySQL was chosen as
the database management system. Additionally, we integrated Bootstrap along with
HTML/CSS to ensure a cohesive presentation and a smooth user experience. This
combination of technologies allowed us to build a robust and high-performing
platform for school management.
Introduction :

Dans un contexte éducatif en constante mutation, la gestion des établissements

scolaires est devenue un défi majeur pour les enseignants et les administrateurs. Face
à des enjeux tels que l'optimisation des ressources, la coordination des activités et le
suivi des performances des élèves, il est impératif de disposer d'outils efficaces. Ce
projet de fin d'études a pour ambition de concevoir et développer une plateforme web
dédiée à la gestion scolaire, qui vise à simplifier et moderniser les opérations
quotidiennes des écoles et des lycées.

Notre application se distingue par son interface conviviale, conçue pour faciliter
l'accès et l'utilisation des différentes fonctionnalités. Parmi celles-ci, nous retrouvons
l'authentification des utilisateurs, la gestion des comptes, le suivi des stagiaires, ainsi
que l'administration des modules et des salles de classe. En intégrant des outils de
suivi des absences et de gestion des emplois du temps, notre solution offre une vue
d'ensemble complète et intuitive de la vie scolaire.

Pour assurer la réussite de ce projet, nous avons adopté une méthodologie de

développement rigoureuse, s'appuyant sur le langage de modélisation UML (Unified
Modeling Language) pour créer une représentation visuelle de la solution. En termes
d'implémentation, nous avons fait appel à des technologies modernes telles que
Laravel pour le backend, React pour le frontend, et MySQL pour la gestion des
données. De plus, nous avons intégré Bootstrap et HTML/CSS pour garantir une
présentation harmonieuse et une expérience utilisateur fluide.

En somme, notre objectif est de fournir une plateforme robuste et performante qui
réponde aux besoins spécifiques des établissements scolaires, tout en favorisant une
gestion efficace et harmonieuse des ressources éducatives. Ce projet représente une
étape significative dans notre parcours académique, et nous sommes convaincus qu'il
apportera une valeur ajoutée aux institutions qui l'adopteront.
Ce rapport est structuré en trois chapitres distincts. Le premier chapitre comprend une
présentation détaillée du projet. Le deuxième chapitre se consacre à l'analyse et à la
conception de notre application. Enfin, dans le troisième chapitre, nous exposons les
outils que nous avons utilisés pour la réalisation du projet, accompagnés de captures
d'écran de la plate-forme, accompagnées de descriptions explicatives
Chapitre I
I- Contexte generale de projet :

Le contexte éducatif actuel est marqué par une nécessité croissante de numérisation et
d'efficacité dans la gestion des établissements scolaires. Les écoles et les lycées font
face à des défis variés, tels que l'organisation des cours, la gestion des ressources
humaines, le suivi des performances des élèves et la communication avec les parents.
Dans ce cadre, une gestion manuelle ou traditionnelle peut s'avérer insuffisante et
chronophage, entraînant des erreurs et des pertes de temps.

La transition vers des solutions numériques offre l'opportunité d'améliorer ces

processus. Notre application de gestion scolaire est conçue pour répondre à ces enjeux
en centralisant toutes les informations et outils nécessaires sur une seule plateforme
accessible. En intégrant des fonctionnalités telles que l'authentification, la gestion des
utilisateurs, et le suivi des absences, nous souhaitons non seulement simplifier les
tâches administratives, mais aussi renforcer l'engagement des élèves et des
enseignants.

De plus, la capacité à générer des rapports et des statistiques en temps réel permettra
aux responsables d'avoir une vision claire de la situation au sein de l'établissement,
facilitant ainsi la prise de décisions éclairées. En somme, notre application vise à
révolutionner la gestion scolaire, en fournissant une solution moderne, intuitive et
adaptée aux besoins des établissements éducatifs d'aujourd'hui.

II- L’objectif :

L'objectif principal de notre application de gestion scolaire est de fournir une solution
intégrée et conviviale qui facilite la gestion quotidienne des établissements éducatifs.
Plus précisément, nous visons à :
 Optimiser la gestion administrative : Centraliser les informations relatives aux
comptes, aux utilisateurs, aux absences et aux emplois du temps pour réduire la
charge administrative et améliorer l'efficacité.

 Améliorer la communication : Faciliter la communication entre les enseignants,

les élèves et les parents grâce à des outils de suivi et d'information clairs et
accessibles.

 Renforcer le suivi des performances : Permettre aux établissements de suivre les

performances des élèves et d'analyser les données pour prendre des décisions
éclairées concernant leur éducation.

 Promouvoir une expérience utilisateur fluide : Offrir une interface intuitive qui
permet aux utilisateurs de naviguer facilement et d'accéder aux fonctionnalités
nécessaires sans difficulté.

 Favoriser l'adoption des outils numériques : Encourager les établissements à

intégrer des solutions technologiques dans leur fonctionnement quotidien,
contribuant ainsi à une modernisation du système éducatif.

 En atteignant ces objectifs, notre application vise à devenir un outil indispensable

pour les établissements scolaires, leur permettant de mieux gérer leurs ressources
et d'améliorer la qualité de l'éducation qu'ils offrent.
Chapitre II
I- Conception :

1- Digramme Cas d’utilisation :

en utilisant le logiciel de modélisation starUML, nous avons créé un diagramme de cas d'utilisation
détaillé pour notre projet. Ce diagramme de cas d'utilisation nous permet de visualiser les différentes
fonctionnalités et interactions entre les acteurs et le système. Il représente de manière claire les actions
que les utilisateurs peuvent effectuer sur notre plateforme et comment ces actions interagissent avec le
système. Staruml nous a offert un environnement convivial pour créer ce diagramme de manière
collaborative, ce qui nous a aidés à mieux comprendre les exigences de notre projet et à les
documenter de manière claire et précise.

Figure 1:cas d’utilisation administrateur

 Figure 2: cas d’utilisation
formateur

Figure 3: cas d’utilisation stagiaire

2- Diagramme de classe :

Figure 4: diagramme de classe

3- Diagramme de sequence :

Figure 5 :diagramme de séquence

4- Conclusion :

En conclusion, la réalisation des diagrammes de cas d'utilisation, de classe et de séquence à l'aide du

logiciel de modélisation StarUML a constitué une étape cruciale dans le développement de notre
projet. Le diagramme de cas d'utilisation nous a permis de clarifier et de visualiser les différentes
fonctionnalités offertes par notre application ainsi que les interactions entre les utilisateurs et le
système. Cette représentation a non seulement enrichi notre compréhension des exigences
fonctionnelles, mais elle a également facilité la communication au sein de notre équipe.

De plus, les diagrammes de classe et de séquence ont complété cette démarche en fournissant une
structure claire des relations entre les différents objets du système et en décrivant le flux des
opérations. Grâce à StarUML, nous avons pu collaborer efficacement, ce qui a renforcé notre capacité
à documenter nos choix de conception de manière précise et méthodique.

Ainsi, ces outils de modélisation ont non seulement guidé notre réflexion tout au long du processus de
développement, mais ils ont également posé les bases d’une architecture robuste pour notre
application de gestion scolaire. En progressant vers les prochaines étapes du projet, nous sommes
convaincus que cette documentation solide contribuera à la réussite globale de notre solution.
Chapitre III
Réalisation de l’application
I- Les Outiles de développement
1. starUML:

StarUML est un outil de génie logiciel dédié à la modélisation UML et édité

par la société coréenne MKLabs. Il est multiplateforme et fonctionne sous
Windows, Linux et MacOS.

2. Visual studio:

Visual Studio Code est un éditeur de code extensible développé par Microsoft pour

Windows, Linux et macOS. Les fonctionnalités incluent la prise en charge du débogage, la mise en
évidence de la syntaxe, la complétion intelligente du code, les snippets, la refactorisation du code et
Git intégré.

3. Laravel :

Laravel est un framework web open-source écrit en PHP respectant le principe modèle-vue-contrôleur
et entièrement développé en programmation orientée objet. Laravel est distribué sous licence MIT,
avec ses sources hébergées sur GitHub .

4. HTML:
 Le HyperText Markup Language, généralement abrégé HTML ou, dans sa dernière

version, HTML5, est le langage de balisage conçu pour représenter les pages web.

5. Bootstrap:

Bootstrap est une collection d'outils utiles à la création du design de sites et

d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons,
outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option.

6. Git:

Git est un système de contrôle de version distribué qui permet de suivre les modifications
du code source et de collaborer efficacement sur un projet. Il facilite la gestion des versions,
l'intégration des contributions et le retour à des états antérieurs du code.

7. DigitalOcean:

DigitalOcean est une plateforme de cloud computing qui permet de déployer, gérer et
héberger des applications sur des serveurs virtuels (droplets). Elle offre des solutions simples et
rapides pour les développeurs afin de créer et gérer des infrastructures cloud

8. XAMPP:

XAMPP est un environnement de développement local qui regroupe Apache, MySQL,

PHP et Perl. Il permet de créer et tester des applications web sur un serveur local avant de les déployer
en ligne. Dans ce cas, il a été exécuté sur un VPS Ubuntu hébergé sur DigitalOcean.
II- Presentation de la platforme
Dans les sections à venir, vous découvrirez une série de captures d'écran qui vous présenteront
visuellement le site web.

1. Interface bienvenue :

Lorsque l'utilisateur fait sa première visite sur le site, il est accueilli par un message descriptif . La
plateforme propose deux méthodes distinctes pour procéder à l'authentification. Si l'utilisateur est déjà
en possession d'un compte, il a la possibilité de cliquer sur le bouton "login". Sinon, il peut choisir le
bouton "inscrire". L'utilisateur bénéficie d'une flexibilité lorsqu'il s'agit de créer son compte sur la
[Link] propose une option de création de compte classique. Dans cette approche, l'utilisateur est
invité à renseigner plusieurs champs, notamment son prénom, son nom, un nom d'utilisateur unique,
un mot de passe sécurisé et une adresse e-mail valide. Cette méthode permet une inscription détaillée,
offrant un contrôle total sur les informations fournies, ainsi qu'une personnalisation plus poussée de
leur profil.

Figure 6 :Interface bienvenue :

2. Interface accueil :

Sur la page d'accueil, nous pouvons observer quatre sections distinctes : Formateurs, Modules,
Stagiaires et Formations. Chacune de ces sections est conçue pour afficher le nombre d'éléments
correspondants, qui se met à jour automatiquement à chaque ajout de données. Cela permet aux
utilisateurs d'avoir une vue d'ensemble claire et instantanée des ressources disponibles et de l'activité
de la plateforme.

Figure 7 :interface d’acceuil

3. Interface profile:

Sur cette page, l'utilisateur a la possibilité de consulter l'ensemble de ses données personnelles de
manière claire et organisée. Cette vue d'ensemble lui permet de vérifier facilement les informations
qui le concernent, garantissant ainsi leur exactitude. De plus, pour améliorer l'expérience utilisateur,
un lien de retour vers le tableau de bord est disponible, permettant une navigation fluide et intuitive
entre les différentes sections de la plateforme.

Pour ceux qui souhaitent mettre à jour leurs informations, un bouton "Modifier le profil" est intégré.
En cliquant sur ce bouton, l'utilisateur accède à un formulaire dédié, lui permettant d'apporter les
modifications nécessaires à ses données. Cette fonctionnalité est conçue pour être simple et rapide,
afin que l'utilisateur puisse gérer ses informations sans difficulté. En offrant ces options, nous visons à
garantir une expérience utilisateur optimale, en veillant à ce que chaque individu puisse facilement
accéder et adapter ses données selon ses besoins.

Figure 8 :page information de profile

Figure 9 :page modification d’information de profile

4. Interface formateur:

Sur cette page, l'utilisateur a la possibilité de visualiser l'ensemble des formateurs inscrits dans le
système. Chaque formateur est présenté de manière claire, permettant une consultation rapide des
informations pertinentes. L'utilisateur peut également modifier les données de chaque formateur si
nécessaire, en cliquant sur le bouton correspondant.

En outre, un bouton "Supprimer" est disponible pour retirer un formateur du système. Il est important
de noter que cette action est irréversible, ce qui signifie que les données supprimées ne peuvent pas
être récupérées. Par conséquent, un message de confirmation peut être affiché pour s'assurer que
l'utilisateur est conscient de la gravité de cette action avant de la valider. Cela contribue à éviter des
suppressions accidentelles et garantit une gestion prudente des informations.

Figure 10 :page liste formateur

 Figure 11 :page ajouter formateur

5. Interface module:

Sur cette page, l'utilisateur a la possibilité de visualiser l'ensemble des modules disponibles dans le
système. Chaque module est présenté de manière organisée, facilitant la consultation des informations
essentielles. L'utilisateur peut également modifier les détails de chaque module si des mises à jour sont
nécessaires, en utilisant le bouton approprié.

En outre, un bouton "Supprimer" est également présent pour retirer un module du système. Il est
crucial de souligner que cette action est irréversible, ce qui signifie que les informations supprimées ne
peuvent pas être récupérées. Afin d'éviter toute suppression accidentelle, un message de confirmation
apparaît pour s'assurer que l'utilisateur est pleinement conscient des conséquences avant de valider
cette action.

Enfin, cette page offre également la fonctionnalité d'importer un fichier contenant des informations
préexistantes sur les modules. Cela permet à l'utilisateur de charger rapidement un ensemble de
données, simplifiant ainsi le processus d'ajout de nouveaux modules. Cette fonctionnalité améliore
l'efficacité de la gestion des modules et permet une intégration fluide des informations.
 Figure 12 :page liste modules

Figure 13 :page ajouter modules

6. Interface groupe:

sur cette page, l'utilisateur a la possibilité de visualiser l'ensemble des groupes disponibles dans le
système. Chaque groupe est présenté de manière claire et organisée, ce qui facilite la consultation des
informations essentielles. L'utilisateur peut également modifier les détails de chaque groupe si des
mises à jour sont nécessaires, en utilisant le bouton approprié.
De plus, un bouton "Supprimer" est également présent pour retirer un groupe du système. Il est
important de noter que cette action est irréversible, ce qui signifie que les informations supprimées ne
peuvent pas être récupérées. Pour éviter toute suppression accidentelle, un message de confirmation
apparaît pour s'assurer que l'utilisateur est pleinement conscient des conséquences avant de valider
cette action.

Enfin, cette page offre également la possibilité d'importer un fichier contenant des informations
préexistantes sur les groupes. Cela permet à l'utilisateur de charger rapidement un ensemble de
données, simplifiant ainsi le processus d'ajout de nouveaux groupes. Cette fonctionnalité améliore
l'efficacité de la gestion des groupes et permet une intégration fluide des informations au sein de la
plateforme.

7. Interface groupe

Figure 14 :page liste groupe

 Figure 14 :page ajouter groupe

8. Interface absence:

Sur cette page, l'utilisateur peut consulter la liste globale des absences enregistrées dans le système.
Cette vue d'ensemble permet une surveillance efficace des absences au sein de l'établissement.
L'utilisateur a également la possibilité d'effectuer une recherche par critère de groupe, ce qui facilite la
localisation des informations spécifiques relatives à un groupe donné.
De plus, cette page permet d'ajouter de nouvelles absences facilement. En remplissant un formulaire
dédié, l'utilisateur peut rapidement enregistrer les absences des élèves, contribuant ainsi à maintenir
une gestion précise et à jour des présences. Cette fonctionnalité vise à améliorer la traçabilité et à
faciliter le suivi des absences, tout en optimisant l'expérience utilisateur au sein de la plateforme.
 Figure 15 :page liste d’absence

Figure 16 :page liste d’absence par groupe

Figure 17 :page ajouter l’absence

9. Interface emploi:

Figure 18:page générer un emploi

En somme, la conception des interfaces et des pages de notre application de gestion scolaire a été
pensée pour maximiser l'expérience utilisateur tout en répondant aux besoins fonctionnels des
établissements éducatifs. Chaque page, qu'il s'agisse de la gestion des formateurs, des modules, des
groupes ou des absences, a été soigneusement élaborée pour offrir une navigation fluide et intuitive.

Les fonctionnalités intégrées, telles que la possibilité de modifier ou de supprimer des données, ainsi
que l'importation de fichiers, facilitent la gestion des informations et rendent l'application adaptable
aux exigences spécifiques des utilisateurs. De plus, les options de recherche par critères permettent
d'accéder rapidement aux données pertinentes, améliorant ainsi l'efficacité des processus
administratifs.

L'ensemble de ces éléments témoigne de notre engagement à créer une plateforme non seulement
fonctionnelle, mais également conviviale, capable d'apporter une réelle valeur ajoutée aux
établissements scolaires. En favorisant une interface intuitive, nous visons à encourager l'adoption de
l'application et à faciliter la gestion quotidienne des ressources éducatives.
Conclusion

En conclusion, ce projet de développement d'une application de gestion scolaire a permis d'explorer et

de mettre en œuvre une solution complète et intégrée répondant aux besoins des établissements
éducatifs. À travers la création de divers diagrammes de modélisation, tels que les diagrammes de cas
d'utilisation, de classe et de séquence, nous avons établi une base solide pour la conception de notre
plateforme.

Chaque page de l'application, que ce soit celle des formateurs, des modules, des groupes ou des
absences, a été soigneusement pensée pour offrir une expérience utilisateur fluide et intuitive. Les
fonctionnalités intégrées, telles que la modification des données, la suppression d'entrées, et
l'importation de fichiers, contribuent à une gestion efficace des informations. La capacité à rechercher
et à ajouter des absences renforce la traçabilité et facilite le suivi des élèves.

Ce projet n'est pas seulement un aboutissement académique, mais également un outil prometteur qui
pourrait transformer la gestion scolaire. En alliant des technologies modernes et une interface
conviviale, nous visons à simplifier les tâches administratives et à améliorer l'engagement des
utilisateurs. Nous sommes convaincus que cette application répondra aux attentes des établissements
et contribuera à une meilleure organisation de la vie scolaire.