DÉVELOPPEMENT

WEB FULL STACK

ISTA NTIC SYBA

Marrakech

t
et

rediger PAR :

Zahira el kourii

ED-DAHHAK AYMANE

Khalid elbana
 2024-2025 Remerciements

Nous tenons à exprimer notre sincère gratitude à toutes les personnes qui ont contribué, de près

ou de loin, à la réalisation de ce stage et à la rédaction de ce rapport.

Nous remercions tout d’abord Monsieur Mechbouk Zaher, notre encadrant pédagogique, pour

son accompagnement tout au long de cette période. Sa disponibilité, ses conseils, sa rigueur et sa

confiance ont été pour nous d’un grand soutien. Grâce à son encadrement, nous avons pu

progresser dans notre travail, surmonter les difficultés techniques et structurer notre réflexion

avec méthode et professionnalisme.

Un grand merci également à l’ensemble de nos formateurs pour leur investissement durant

notre formation. Leur enseignement et leurs encouragements ont largement contribué à notre

progression et à la réussite de ce projet.

Enfin, nous souhaitons exprimer notre profonde reconnaissance à nos familles et à nos proches

pour leur soutien moral constant, leur patience et leur confiance tout au long de notre parcours.

À toutes et à tous, merci.

Sommaire
Remerciement

Introductions

I. Présentation de l’entreprise

1 .Fiche d’identité

2. Contexte

3 . Problématique

4. Missions Principales

II. Présentation du projet

1 . Contexte initial

2 .Objectifs du projet

3. Phase de conception du projet

3.1 Analyse préliminaire de projet
3.2 .Conception technique
3.2.1. Diagramme de cas d’utilisation
3.2.2Architecture du système et Choix des technologies

3.2.3 Diagramme de Class

3.2.4 Diagramme de sequence

3.2.5 Diagramme d’Activité

3.2.6 Conception des maquettes UI/UX avec Figma

4. Tests et vérifications

5. Documentation

6 .Résultats obtenue

Annexes

Conclusion
 Introduction

Dans le cadre de notre formation en développement digital, nous avons réalisé un projet
technique visant à développer un système web de gestion des formations pour les formateurs de
l’OFPPT. Ce projet s'inscrit dans une démarche pédagogique concrète, avec pour objectif la mise
en pratique des compétences techniques acquises durant notre parcours.

Le contexte institutionnel montre un besoin croissant de modernisation des outils de formation.

Les processus liés à la planification, au suivi des sessions, à la gestion des compétences, des
absences ou encore de l’hébergement étaient majoritairement manuels ou fragmentés. Le projet
visait donc à centraliser et automatiser ces fonctions dans une plateforme unique, ergonomique et
sécurisée.

Ce projet a représenté une occasion idéale de mettre en pratique l'ensemble des compétences
techniques et fonctionnelles liées au développement web fullstack. Nous avons choisi de
travailler sur une thématique institutionnelle, car elle présente des enjeux réels de transformation
numérique. Travailler sur un système destiné à l’OFPPT nous a permis de concevoir une solution
répondant à des besoins clairs, concrets et à forte valeur ajoutée.

Après une phase de recherche et d’analyse des besoins fonctionnels, nous avons identifié les
modules nécessaires : gestion des utilisateurs par rôle, planification des formations, gestion des
sessions, des compétences, des présences et des ressources pédagogiques. Ces modules ont été
pensés pour répondre à la fois aux exigences techniques (sécurité, performances, accessibilité) et
à une expérience utilisateur fluide pour des profils non techniques.
I. Présentation de l’entreprise

2. Contexte
L’Office de la Formation Professionnelle et de la Promotion du Travail (OFPPT) est
l’établissement public de référence en matière de formation professionnelle au Maroc. Créé en
1974, il a pour mission de développer les compétences des jeunes, des adultes et des
professionnels à travers un réseau étendu de centres de formation répartis sur l’ensemble du
territoire national.

L’OFPPT propose une offre de formation diversifiée et adaptée aux besoins du marché de
l’emploi, couvrant plus de 300 filières dans des secteurs clés tels que l’industrie, le BTP, le
tourisme, le numérique, l’agriculture, les services et bien d’autres. Grâce à ses partenariats avec
les entreprises, les branches professionnelles, les régions et les institutions internationales,
l’OFPPT joue un rôle central dans la montée en compétence de la main-d'œuvre marocaine et
l'amélioration de l’employabilité des jeunes.

Parmi ses axes stratégiques figure la formation continue des formateurs, élément essentiel
pour garantir une pédagogie moderne, interactive et alignée sur les évolutions du monde
professionnel. Ces formations sont destinées à renforcer les compétences techniques,
pédagogiques et transversales des formateurs en poste, afin qu’ils puissent transmettre
efficacement les savoirs aux stagiaires.

Conscient de l’importance d’une gestion efficace et structurée de ces actions, l’OFPPT souhaite
mettre en place un système numérique centralisé de gestion des formations des formateurs,
couvrant tous les aspects logistiques, administratifs, pédagogiques et évaluatifs.

Ce système permettra notamment de :

  Planifier les sessions de formation selon les besoins réels du terrain ;
 Suivre les parcours individuels des formateurs, leurs absences et leurs évaluations ;
 Gérer les ressources pédagogiques et les hébergements ;
 Fournir aux différents acteurs des tableaux de bord dynamiques et des rapports d’aide à la
décision.

Avec plus de 11 000 formateurs mobilisés à l’échelle nationale, la mise en place d’un tel outil
représente un pas majeur vers la digitalisation des processus de formation et la
professionnalisation continue des équipes pédagogiques. Ce projet s’inscrit pleinement dans la
stratégie de transformation digitale et d’amélioration de la qualité de l’enseignement pilotée par
l’OFPPT.

3 . Problématique
Avant le démarrage de ce projet, la gestion des formations des formateurs au sein de l’OFPPT
reposait principalement sur des méthodes traditionnelles : feuilles de calcul, échanges de
courriels, formulaires papier, et outils de suivi non centralisés. Cette organisation fragmentée
engendrait plusieurs limites majeures : un manque de visibilité globale sur les parcours des
formateurs, une difficulté à planifier efficacement les sessions, une gestion logistique manuelle
sujette aux erreurs, et une traçabilité insuffisante des absences et des évaluations.

De plus, l’absence d’un système numérique unifié freinait la collaboration entre les différents
acteurs impliqués (Responsables CDC, Responsables Formation, Formateurs, DR, etc.). La
multiplicité des supports et la dispersion des informations rendaient également difficile l’analyse
des données, essentielle pour piloter une politique de formation continue efficace et adaptée aux
besoins réels du terrain.

Dans ce contexte, ma mission en tant que stagiaire a été de participer à la conception et au

développement d’un système de gestion moderne, sécurisé et responsive, capable de
centraliser l’ensemble du processus de formation des formateurs. Ce système vise à répondre aux
défis organisationnels rencontrés en apportant des solutions concrètes : automatisation des
tâches, suivi en temps réel, accès simplifié aux ressources pédagogiques, visualisation des
absences, et génération de rapports statistiques utiles à la prise de décision.

Le projet s’inscrit dans une dynamique plus large de transformation digitale de l’OFPPT, et vise
à faire de la gestion des formations des formateurs un levier de professionnalisation, de qualité
pédagogique, et d’efficience organisationnelle.

4. Missions Principales
Dans le cadre de l’amélioration continue des outils numériques de l’OFPPT, le projet a consisté à
concevoir et développer un système complet de gestion des formations destinées aux formateurs.
L’objectif principal était de mettre en place une plateforme web centralisée permettant de
planifier les sessions de formation, de suivre les absences ..

Le projet a couvert l’ensemble des étapes du développement logiciel, depuis l’analyse des
besoins et la modélisation des processus jusqu’au développement de l’interface utilisateur, de
l’API backend et de la base de données. Une attention particulière a été accordée à la sécurité des
données, à l’ergonomie de l’interface, ainsi qu’à la gestion des rôles selon les profils utilisateurs
(Responsable CDC, Responsable Formation, Formateurs...).

II. Présentation du projet

1 . Contexte initial
Le présent projet a été développé pour le compte de l’Office de la Formation Professionnelle et
de la Promotion du Travail (OFPPT), dans le cadre de sa stratégie de modernisation et de
digitalisation des processus pédagogiques. L’objectif était de mettre en place une plateforme
numérique centralisée dédiée à la gestion des formations des formateurs, couvrant
l’ensemble du cycle de formation : planification, suivi, évaluation, gestion des absences,
hébergement, et diffusion des ressources pédagogiques.
Auparavant, la gestion de ces formations était assurée via des moyens disparates (Excel, emails,
fichiers papiers, plateformes isolées), ce qui entraînait des difficultés de coordination, un manque
de traçabilité, et une faible visibilité sur la progression des formateurs à l’échelle nationale. Cette
situation freinait l’efficacité administrative et la réactivité pédagogique.

Le nouveau système a donc été conçu comme une refonte complète du processus de gestion,
visant à fournir aux différents acteurs (Responsables CDC, Responsables Formation, Formateurs
Animateurs, DR…) un outil unique, sécurisé, ergonomique et aligné avec les standards
technologiques actuels.

2 .Objectifs du projet
Les objectifs principaux du développement de cette nouvelle plateforme étaient les suivants :

• Concevoir une interface utilisateur moderne, responsive et intuitive.

• Planifier efficacement les parcours de formation des formateurs.
• Automatiser la gestion des absences.
• Optimiser l'organisation logistique des hébergements.
• Centraliser la gestion des documents de formation.

3. Phase de conception du projet

3.1 Analyse préliminaire de projet

Avant de démarrer le développement technique du système de gestion des formations des

formateurs de l’OFPPT, une phase de conception approfondie a été menée. Cette étape initiale
avait pour objectif de structurer le projet, de définir précisément les besoins fonctionnels et non
fonctionnels, et de planifier les différentes phases de réalisation.

L’analyse préliminaire a permis de mieux comprendre les attentes des différents acteurs
impliqués, notamment les responsables CDC, les responsables formation, les formateurs
animateurs, ainsi que les équipes techniques et administratives. Elle a également pris en compte
les contraintes institutionnelles, la diversité des profils utilisateurs, et les exigences en matière de
sécurité, d’ergonomie et de traçabilité.

Un cahier des charges fonctionnel a été élaboré à partir de cette analyse, en étroite collaboration
avec les parties prenantes. Ce document a permis de définir les principaux modules du système à
développer, à savoir :

 Gestion des sessions de formation

 Suivi des absences des formateurs
 Espace documentaire partagé
 Évaluations et rapports analytiques
 Gestion des rôles et des profils utilisateurs

Analyse des besoins fonctionnels

À la suite des échanges avec les parties prenantes de l’OFPPT, les besoins fonctionnels du
système ont été structurés autour de plusieurs modules clés destinés à couvrir l’ensemble du
processus de gestion des formations. Les fonctionnalités ont été priorisées selon leur impact sur
l’efficacité pédagogique, la logistique et le suivi administratif.

 Système de gestion de gestion des formations

 Création, modification et suppression des sessions de formation
 Affectation des thématiques, des objectifs pédagogiques, et des durées
 Gestion des lieux de formation (sites, salles, équipements)
 Association des intervenants (formateurs animateurs) et participants
 Consultation du calendrier global ou par centre
 Possibilité de marquer certaines formations comme prioritaires ou obligatoires
 Affichage des formations par centre, domaine ou région

 Système de gestion des absences

 Enregistrement manuel ou automatisé des absences des formateurs

 Saisie des motifs et périodes d’absence
  Visualisation des absences par tableau de bord (par formation ou par formateur)
 Génération de rapports d’alerte pour les absences récurrentes
 Suivi statistique mensuel et annuel des absences par DR ou site

 Expérience utilisateur frontend

 Design moderne et attrayant reflétant l'identité de l'agence

 Navigation intuitive et accessible
 Responsive design (adaptation aux différents appareils)
 Système de recherche et de filtrage des circuits
 Affichage des avis clients et des témoignages
 Page de contact avec formulaire et informations pratiques

 Gestion des profils utilisateurs

 Création de compte utilisateur( inscription avec email, validation des données,

Roles(Client /Admin)
 Historique des reservations (list des reservations ,details des reservations,statut des
reservation,filtrage par date /status)
 Gestion des informations personnelles
 Possibilité de sauvegarder des circuits favoris.

Cette analyse détaillée des besoins fonctionnels a permis d'établir un plan d'action clair et de
prioriser les développements en fonction de l’ importance . Elle a également servi de base pour
l'élaboration du cahier des charges et la planification du projet.

c. Logique Métier du Projet:

D’après les réunions avec l’encadrant, les besoins métier ont été identifiés et traduits en
scénarios concrets, selon les différents rôles utilisateurs.

 Gestion des Utilisateurs (User)

En tant que formateur (participant ou animateur), je souhaite :

  Accéder à une liste claire des formations disponibles, avec les thématiques, lieux, dates,
animateurs, et objectifs pédagogiques.
 Filtrer les formations selon des critères tels que le domaine, la date, ou le centre.
 Consulter les détails de chaque formation : durée, contenu, prérequis, documents
disponibles.
 M’inscrire ou consulter mon statut d’inscription à une formation.
 Gérer mon profil personnel : modifier mes informations, consulter l’historique des
formations suivies, télécharger mes attestations.

 Gestion des Formations

En tant que responsable de formation ou responsable CDC, je souhaite :

 Créer, modifier ou supprimer des sessions de formation avec tous les détails
nécessaires : thème, site, animateur, dates, durée, objectifs, etc.
 Affecter des formateurs participants selon leur spécialité ou leur centre
d’appartenance.
 Associer des ressources pédagogiques à chaque formation (PDF, vidéos, liens, quizz).
 Visualiser l’ensemble des formations planifiées dans un calendrier partagé ou tableau de
bord.
 Activer ou désactiver une session à tout moment.

 Système de Gestions des Absences

En tant que formateur animateur ou responsable, je souhaite :

 Enregistrer les absences des participants, en précisant la date, le motif, et la durée.

 Accéder à un tableau de bord des absences par session, centre ou formateur.
 Générer des rapports d’alerte pour les absences fréquentes.
 Télécharger des relevés d’absences par période ou par utilisateur.
  Ressources Pédagogiques

En tant que formateur animateur, je souhaite :

 Consulter des documents pédagogiques liés à la session (supports, quizz, corrigés).

En tant que participant, je souhaite :

 Télécharger les supports de cours pour les formations auxquelles je suis inscrit.
 Avoir un accès restreint selon mon rôle aux documents (lecture seule, accès limité dans
le temps, etc.).

3.2 .Conception technique

3.2.1. Diagramme de cas d’utilisation

Le diagramme de cas d'utilisation présente de manière graphique les principales interactions

entre les acteurs du système (formateur participant, formateur animateur, responsable de
formation, responsable CDC, administrateur) et les fonctionnalités clés de la plateforme de
gestion des formations.

Ce diagramme permet de visualiser les différents cas d'utilisation du système, tels que :

 L'inscription à une session de formation

 La consultation du planning de formation
 Le téléchargement de ressources pédagogiques
 L'enregistrement des absences
 La validation et la planification des sessions
 L’évaluation des formateurs et des formations
 La gestion des utilisateurs et des accès
 La génération de rapports statistiques

Chaque acteur est associé aux actions qu'il est autorisé à effectuer, ce qui permet de clarifier les
rôles et les responsabilités dans le fonctionnement global du système.
Ce diagramme est un outil essentiel pour la modélisation fonctionnelle du projet, car il
facilite la compréhension des besoins métier, structure les échanges avec les parties prenantes, et
constitue une base solide pour le développement technique. Grâce à cette représentation visuelle,
il devient plus facile de :

 Identifier les fonctionnalités prioritaires

 Définir les droits d'accès selon les profils
 Anticiper les interactions entre utilisateurs et système
 Organiser les modules de développement
3.2.2Architecture du système et Choix des technologies

 L'architecture du système a été conçue de manière à séparer clairement les différentes

responsabilités du projet, facilitant ainsi sa maintenance, son évolution et son évolutivité.
Le système repose sur une architecture moderne en trois couches qui permet une gestion
optimale des données, des fonctionnalités et de l'expérience utilisateur.

A.Architicture Globale
 B. Frontend (React.js) :

Le frontend est développé en React.js, un framework JavaScript performant et populaire pour

construire des interfaces utilisateur dynamiques et réactives. Cette couche est responsable de la
présentation des données et de l'interaction avec les utilisateurs. Elle est conçue pour être
responsive, offrant une expérience fluide et cohérente sur tous les appareils (PC, tablette,
smartphone).

C. Backend (Laravel) :

Le backend utilise Laravel 12, un framework PHP robuste, pour gérer l’API RESTful qui
permet au frontend de récupérer et d’envoyer des données. Ce backend est responsable de la
logique métier, de la gestion des réservations, de la validation des données et de la
communication avec la base de données.

 Responsabilité principale : Traitement des requêtes API

 Technologie : Laravel 12 (PHP)
 Architecture : API RESTful avec routes dédiées aux opérations CRUD (création,
lecture, mise à jour, suppression).
 Sécurité : Validation sécurisée des données

D . Flux de donnés :

E. Base de données (MySQL) :

La base de données conçue pour le système de gestion des formations de l'OFPPT repose sur une
architecture relationnelle complète et normalisée. Elle regroupe plusieurs entités interconnectées
permettant de modéliser l'ensemble du processus de formation, depuis la planification jusqu'à
l'évaluation et la logistique.

Tables principales et leur rôle

1. centres : contient les informations sur les centres de formation (nom, localisation,
adresse, contact).
2. directions_regionales : stocke les informations des directions régionales (DR), avec
leurs coordonnées et zones géographiques.
3. formateurs : représente les formateurs (participants ou animateurs), associés à un
utilisateur, un centre et une DR. Chaque formateur peut avoir un rôle d'animateur ou non.
4. users : contient les comptes utilisateurs du système, avec rôles (admin, responsable CDC,
formateur animateur, etc.).
5. formations : décrit les formations avec leurs objectifs, durées, dates, et statut (planifiée,
en cours, terminée...).
6. sessions : correspond aux sessions pratiques d'une formation, liées à une thématique, un
animateur, un centre, une date et un lieu.
7. inscriptions : gère l'inscription d'un formateur à une formation avec date, statut et
confirmation.
8. presences : enregistre les présences et absences des formateurs par session, avec
justification si besoin.
9. documents : stocke les ressources pédagogiques (titre, description, fichier, type,
session/formation associée).
10. evaluations : recueille les évaluations post-formation ou en session, avec note,
commentaire et suggestion.
11. plans_formation : contient les plans de formation annuels créés par les responsables
CDC.
12. plan_formations : fait le lien entre un plan de formation et les formations qui le
composent.
 13. competences : référence les compétences visées par les formations, avec catégorie et
description.
14. formateur_competences : affecte les compétences acquises par un formateur avec
niveau (débutant, expert...).
15. thematiques : décrit les thématiques de formation (titre, durée, description).
16. thematique_competences : associe chaque thématique aux compétences qu'elle couvre.
17. hebergements : gère les lieux d'hébergement des formateurs, avec capacité, adresse et
contact.
18. reservations_hebergement : permet de suivre les réservations hôtelières des formateurs
par formation, avec dates, chambre, statut.
19. notifications : gère les alertes du système (nouvelles formations, changements, absences,
etc.).
20. system_logs : journalise les actions effectuées par les utilisateurs pour la traçabilité.

⚙️Contraintes et relations

 Toutes les tables sont en InnoDB avec support des clés étrangères pour garantir l'intégrité
référentielle.
 Les relations entre formateurs, formations, sessions, documents, plans, etc., sont assurées
par des clés étrangères.
 Des index uniques ou combinés assurent la performance et la non-redondance des
données sensibles (matricule, email, etc.).

📆 Automatisations et gestion temporelle

 La majorité des tables incluent une colonne created_at (timestamp automatique)

 Certaines colonnes utilisent ON UPDATE current_timestamp() pour suivre les
modifications
Cette structure permet de couvrir l'ensemble des besoins fonctionnels du système, depuis la
planification d'une formation, la gestion des compétences, des absences, des documents, des
évaluations et des ressources logistiques.

3.2.3 Diagramme de Class

Le diagramme de classe ci-dessous illustre la structure des principales entités du système de

gestion des formations des formateurs de l’OFPPT ainsi que leurs relations. Il permet de

visualiser la modélisation de la base de données, les attributs de chaque entité (table), ainsi

que les liens logiques entre elles (associations, cardinalités).

3.2.4 Diagramme de sequence
Ce diagramme de séquence représente le processus d’inscription d’un formateur participant
à une session de formation via la plateforme de gestion centralisée de l’OFPPT. Il met en
évidence l’interaction entre les différents composants du système, depuis la consultation des
formations disponibles jusqu’à la validation de l’inscription.
Voici un aperçu des interactions :

1. Formateur Participant : Accède à la plateforme et consulte la liste des formations

disponibles.
2. Interface Utilisateur (Frontend React.js) : Envoie une requête HTTP au système pour
récupérer les sessions ouvertes à l’inscription.
3. Système de Gestion (Backend Laravel) : Interroge la base de données pour récupérer
les sessions actives.
4. Base de données (MySQL) : Retourne la liste des formations filtrées.
5. Frontend : Affiche la liste à l’utilisateur.
6. Formateur Participant : Sélectionne une formation et soumet une demande
d’inscription.
7. Frontend : Envoie la demande d’inscription via une requête HTTP POST.
8. Backend : Enregistre la demande, notifie le responsable de formation, puis attend
validation.
9. Responsable de Formation : Valide ou rejette la demande d’inscription.
10. Backend : Met à jour le statut de la demande dans la base de données.
11. Frontend : Affiche une confirmation ou un refus à l’utilisateur.
3.2.5 Diagramme d’Activité
Le diagramme d’activité ci-dessous représente le flux global des processus métier du système
de gestion des formations des formateurs de l’OFPPT. Il illustre, de manière visuelle et
structurée, les étapes principales qu’un utilisateur peut suivre, depuis l’authentification jusqu’à
la participation à une formation, en passant par l’inscription, le suivi, et l’évaluation.

Ce diagramme permet de modéliser les différentes interactions entre les acteurs du système
(formateur participant, formateur animateur, responsable formation, responsable CDC), tout en
intégrant les chemins alternatifs, les processus parallèles (consultation de documents,
déclaration d’absence, etc.) et les décisions métier critiques (ex. : validation ou refus
d’inscription).
Ce diagramme d'activité global illustre :

 Authentification de l’utilisateur

 Consultation du catalogue de formations disponibles

 Inscription à une session

 Validation ou rejet par le responsable

 Accès aux documents pédagogiques

 Déclaration et traitement des absences

 Participation à la formation

 Évaluation de la session

 Génération de rapports de suivi et d’analyse

3.2.6 Conception des maquettes UI/UX avec Figma
Pour valider l’expérience utilisateur du système de gestion des formations des formateurs de
l’OFPPT, j’ai conçu une série de maquettes fonctionnelles à l’aide de l’outil Figma. Ces
maquettes couvrent les principales interfaces du système :

 Page d’accueil avec accès aux différents profils (login par rôle)
 Page d’authentification incluant la sélection du rôle (formateur participant, animateur,
responsable, etc.)
 Tableau de bord du formateur animateur (accès aux formations animées, gestion des
absences, documents)
 Page de gestion des absences avec formulaire structuré
 Espace ressources pédagogiques (upload, organisation et consultation de documents)
 Maquettes mobile et desktop pour garantir une expérience responsive fluide sur tous
les appareils

L’objectif de ces maquettes était de :

 Faciliter la projection visuelle du système final

 Valider les choix ergonomiques et fonctionnels avec les parties prenantes
 Servir de référence claire et structurée pour le développement frontend
4. Tests et vérifications
 Test de fonctionnement (cas normal, erreur, blocage si complet).
 Tests multi-supports : PC, tablette, smartphone.
 Amélioration des messages d’alerte (confirmation, erreur, validation...).

5. Documentation
 Écriture de la structure des tables pour la base de données.
 La réalisation de digaramme de classe , diagramme de cas d’utilisation , diagramme
d’activité .

6 .Résultats obtenus
Page home ET PROFILE RESPONSABLE
FORMATION (ED-DAHHAK AYMANE ) :
Page home :