Filière: Ingénierie Logiciel

Rapport de Projet

Conception et Réalisation d'une

Application Web de Gestion d'une Agence
de Voyage
Réalisé par : Encadré par : Membres de jury :

Année Universitaire : 2024-2025

1
 Filière: Ingénierie Logiciel

Rapport de Projet

Conception et Réalisation d'une

Application Web de Gestion d'une
Agence de Voyage
Réalisé par : Encadré par : Membres de jury :

Année Universitaire : 2024-2025

3
 D EDICACES
Chers parents, Nous ne trouvons pas de mots
suffisamment forts pour exprimer toute notre
gratitude envers vous. Votre patience infinie, vos
encouragements constants et votre aide précieuse
ont été inestimables. C'est grâce à vous que nous
avons pu accomplir tout ce que nous avons réalisé
jusqu'à présent. Nous vous remercions du fond du
cœur pour vos sacrifices immenses et votre soutien
indéfectible.

Chers amis, Notre gratitude pour votre amitié

inébranlable, votre soutien constant et vos
encouragements sincères est immense. Vous avez été
à nos côtés à chaque étape, partageant nos joies et
nous aidant à surmonter les moments difficiles. Grâce
à vous, nous avons pu accomplir tant de choses. Nous
vous remercions du fond du cœur pour votre
présence et votre amitié indéfectible.

5
Enfin, nous souhaitons exprimer notre gratitude à
toute notre famille et à tous ceux que nous aimons
pour leur soutien inconditionnel et leur amour
indéfectible. Vous êtes notre source de force et
d'inspiration, et nous sommes immensément
reconnaissants de vous avoir dans nos vies.

REMERCIEMENTS
Nous tenons à saisir cette occasion pour exprimer notre profonde reconnaissance envers
toutes les personnes qui ont contribué de manière significative à la réussite de notre projet.
Leur soutien, leur encadrement et leurs conseils avisés ont été essentiels à la réalisation de
ce travail.

Tout d'abord, nous adressons nos sincères remerciements à Monsieur pour son
accompagnement précieux tout au long de notre projet. Sa disponibilité, sa patience et son
expertise ont joué un rôle crucial dans le développement de nos compétences et dans
l'aboutissement de ce travail. Nous sommes profondément reconnaissants de l'opportunité
d'avoir bénéficié de son encadrement attentif.

Nous souhaitons également remercier chaleureusement Monsieur pour ses observations

pertinentes et ses recommandations constructives. Son implication et ses encouragements
ont enrichi notre réflexion et ont été d'une grande aide dans les différentes étapes de notre
projet.

En conclusion, nous adressons nos remerciements les plus sincères à Monsieur et Monsieur
pour leur soutien constant et leur impact positif sur notre progression académique et
professionnelle. Nous sommes honorés d'avoir pu bénéficier de leur expertise et de leur
bienveillance tout au long de cette expérience.

6
 LISTE DES FIGURES
Figure 1: Diagramme de Gantt ............................................................................................
16

Figure 2:Logo de l’application ............................................................................................

17

Figure 3 : Diagramme de cas d’utilisation de Formateur ....................................................

21

Figure 4 : Diagramme de cas d’utilisation d’Apprenant .....................................................

22

Figure 5 : Diagramme de séquence «se connecter dans l’application web » ......................

23

Figure 6 : Diagramme de classe .......................................................................................... 24

Figure 7 : Logo de VS code .................................................................................................

26

Figure 8: Logo de Git & GitHub .........................................................................................

27

Figure 9: Logo de Figma .....................................................................................................

27

Figure 10 : Logo Visily ....................................................................................................... 28

Figure 11: Logo CodeIgniter ...............................................................................................

29
7
Figure 12: Logo HTML .......................................................................................................
29

Figure 13: Logo CSS ...........................................................................................................

30

Figure 14: Logo BOOTSTRAP ...........................................................................................

30

Figure 15: Logo de JAVASCRIPT ...................................................................................... 31

Figure 16 :Logo UML ......................................................................................................... 31

Figure 17:Page d'accueil ......................................................................................................

34

Figure 18 :Page Tableau de borde ....................................................................................... 35

Figure 19:Tableau de bord (Dark mode) .............................................................................36

Figure 20 :Créer Cour ..........................................................................................................36

Figure 21: gestion des cours ................................................................................................37

Figure 22 :Ajouter etudiant ................................................................................................. 38

Figure 23:Manager les etudiants ......................................................................................... 39

Figure 24:Profile ..................................................................................................................

40

Figure 25:Print Card ............................................................................................................

41

Figure 26:paramètres de systeme ........................................................................................ 42

Figure 27:renouveler l'abonnement .....................................................................................

43

Figure 28:page des abonnements .........................................................................................

43
8
Figure 29:Inscription d'un étudiant à un nouveau cours ......................................................
44

Figure 30:Ajouter les annonces ...........................................................................................

45

Figure 31:Manager les annonces .........................................................................................

45 Figure 32:l’affichage des

annonces ..................................................................................... 46

TABLE DES MATIERES

D EDICACES ........................................................................................................................
3

REMERCIEMENTS ............................................................................................................. 4

LISTE DES FIGURES ..........................................................................................................

5

TABLE DES MATIERES ..................................................................................................... 7

INTRODUCTION GENERALE .........................................................................................

11 Chapitre 1:

Spécification ..................................................................................................... 12

1. Introduction : ...............................................................................................................
13

2. Cahier des charges : .....................................................................................................

13

9
 2.1. Contexte général : .................................................................................................
13

2.2. Problématique : .....................................................................................................

13

2.3. Solution proposée : ...............................................................................................

14

2.4. Acteurs : ................................................................................................................

14

2.5. Etude des besoins : ................................................................................................

15

2.5.1. Besoins
fonctionnels : .................................................................................... 15

2.5.2. Les besoins non

fonctionnels : ...................................................................... 15

2.6. Diagramme de Gantt : ...........................................................................................

16

2.7. Logo de l’application : ..........................................................................................

17

3. Conclusion : .............................................................................................................. 17
Chapitre 2 : Conception et
modélisation .............................................................................18

1. Introduction : ...............................................................................................................19

2. Cycle de vie : ...............................................................................................................19

3. La méthodologie de conception : ................................................................................

20

3.1. UML : ...............................................................................................................

.... 20

10
 3.2. Diagramme de cas
d’utilisation : .......................................................................... 20

3.3. Diagramme de
séquence : ..................................................................................... 23

3.4. Diagrammes de

classe : ......................................................................................... 24 Chapitre 3 :

Environnement de travail et outils ................................................................... 25

1. Introduction : ...............................................................................................................
26

2. Outils de travail : .........................................................................................................

26

2.1. Visual studio code : ...............................................................................................

26

2.2. GIT & GITHUB : .................................................................................................

27

2.3. Figma : ..................................................................................................................

27

2.4. Visily : ...................................................................................................................

28

3. Outils de développement : ...........................................................................................

29

3.1. CodeIgniter : .........................................................................................................

29

3.2. HTML5 : ...............................................................................................................

29

11
 3.3. CSS : .....................................................................................................................
30

3.4. Bootstrap : .............................................................................................................30

3.5. JavaScript : ............................................................................................................31

3.6. UML : ...................................................................................................................31

4. Conclusion ...................................................................................................................32

Chapitre 4 : Réalisation de

projet ........................................................................................ 33

1. Introduction : ...............................................................................................................
34

2. Les interfaces graphiques : ..........................................................................................

34

2.1. Login : ...................................................................................................................

34

2.2. Tableau de bord: ...................................................................................................

35

2.3. Tableau de bord (Dark mod) : ...............................................................................

36

2.4. Créer Cour : ..........................................................................................................

36

2.5. Manager les Cour : ................................................................................................

37

2.6. Ajouter étudiant : ..................................................................................................

38

12
 2.7. Manager les etudiants: ..........................................................................................
39

2.8. Profile : .................................................................................................................

40

2.9. Print Card : ............................................................................................................

41

2.10. Parametre de systeme: .......................................................................................

42

2.11. Page des abonnements :.....................................................................................

43

2.12. Ajouter des acnnonces :.....................................................................................

45

2.13. Manager des annoces : ......................................................................................

45

3. l'affichage de l'annonce : .............................................................................................46

Conclusion Générale : .........................................................................................................47

Webographie :......................................................................................................................49

13
 INTRODUCTION GENERALE

Ce rapport présente le travail que j’ai réalisé dans le cadre de mon projet de fin d’études,
portant sur la conception et la réalisation d’une application web de gestion d’une agence de
voyage. Ce projet a pour objectif principal de proposer une solution numérique moderne et
adaptée aux besoins spécifiques des agences de voyage, où la gestion des offres, des
réservations, des clients et des itinéraires constitue un enjeu majeur.

Dans un contexte où le secteur du tourisme est en pleine transformation numérique, il

devient indispensable pour les agences de disposer d’outils efficaces afin d’optimiser leur
fonctionnement et d’améliorer l’expérience client. À travers ce projet, j’ai cherché à
répondre à ces besoins en développant une plateforme web intuitive et fonctionnelle.

Dans ce rapport, je décrirai les différentes étapes de réalisation du projet : l’analyse des
besoins, la conception, le choix des technologies, le développement, ainsi que les défis
rencontrés tout au long du processus. Je présenterai également les fonctionnalités mises en
place, ainsi que les bénéfices qu’apporte cette application pour les utilisateurs.

Ce travail témoigne de mon engagement à concevoir une solution utile, innovante et en

adéquation avec les attentes du secteur, tout en appliquant les compétences acquises durant

ma formation en développement web.

14
Chapitre 1: Spécification

15
1. Introduction :

Dans ce chapitre, nous décrivons les spécifications fonctionnelles et techniques de

l'application de gestion de centres de cours de soutien. Ces spécifications servent de base
pour le développement de la solution et garantissent qu'elle répondra aux attentes des
utilisateurs et aux objectifs fixés.

2. Cahier des charges :

2.1. Contexte général :

Le projet vise à développer une application web dédiée à la gestion des centres de cours de
soutien, offrant une solution centralisée et efficace pour administrateurs et étudiants. Les
administrateurs pourront gérer les cours, les inscriptions des étudiants, et superviser les
tandis que les étudiants auront accès à un catalogue de cours, pourront s'inscrire aux
formations de leur choix, et consulter les informations liées à leurs apprentissages. Cette
plateforme intuitive simplifie la gestion des ressources éducatives et facilite l'accès des
étudiants à des cours adaptés à leurs objectifs académiques, garantissant une organisation
fluide et optimisée des opérations du centre.

2.2. Problématique :

 Comment assurer une gestion efficace et centralisée des cours et des etudiants au sein
d'une application web dédiée aux centres de cours de soutien ?
 Comment garantir la sécurité des données personnelles et des informations sensibles
des utilisateurs (administrateurs et étudiants) sur la plateforme ?
 Comment permettre aux étudiants de rechercher et de s'inscrire aux cours de manière
rapide, intuitive et multicritère ?
 Comment les utilisateurs peuvent consulter l'application d’une façon multicritère,
rapide et efficace ?

2.3. Solution proposée :

16
L'objectif de ce projet est de concevoir une application web dédiée à la gestion centralisée
des cours et des étudiants dans un centre de soutien scolaire. Cette application vise à offrir
une interface intuitive et sécurisée pour les administrateurs et les étudiants, afin de faciliter
la gestion des formations et l'accès aux cours.

Les fonctionnalités principales de l'application incluent :

 Gestion des profils et des inscriptions aux cours.

 Suivi de l’historique de participation.
 Ajout, modification et suppression des cours.
 Ajout, modification et suppression des cours.
 Système de connexion pour protéger les données des utilisateurs.
 Recherche des cours par domaine, niveau ou horaire.
 Ajustement des préférences utilisateur et accès rapide aux informations pertinentes.

2.4. Acteurs :

L’Administrateur : est le principal gestionnaire de la plateforme. Il est responsable de la

création et de la gestion des cours, de l'inscription des étudiants et de la gestion des profils
des utilisateurs. L'administrateur peut également superviser les activités des étudiants et
des formateurs, gérer les emplois du temps, et s'assurer du bon fonctionnement général de
la plateforme. Il a accès à des outils permettant de générer des rapports etdes statistiques,
garantissant ainsi une gestion efficace et optimale des ressources et des utilisateurs.

L'Étudiant : est un utilisateur inscrit sur la plateforme qui peut explorer le catalogue des
cours proposés, s'inscrire aux formations qui correspondent à ses besoins académiques et
suivre sa progression. Il peut accéder à son profil personnel, consulter son emploi du
temps,et avoir un aperçu de ses résultats et de son historique de formation. L'étudiant peut
également interagir avec les formateurs et participer activement aux cours proposés via la
plateforme.

2.5. Etude des besoins :

2.5.1. Besoins fonctionnels :

17
Les besoins fonctionnels se présentent en sept grandes parties :

 Gestion des étudiants :

L'administrateur doit avoir la possibilité d'ajouter de nouveaux étudiants, de les
supprimer, ainsi que de déterminer ceux dont l'abonnement est expiré.
 Publication d'annonces :
L'administrateur peut publier des annonces concernant les cours de soutien
disponibles, y compris les détails des sessions et les modalités d'inscription.
 Espace étudiant :
L'étudiant peut se connecter à son espace personnel où il peut consulter et modifier ses
informations personnelles (nom, prénom, coordonnées, etc.). Il peut également
consulter les annonces publiées par l'administrateur concernant les cours disponibles.
 Consultation des annonces :
L'étudiant peut consulter les annonces de nouveaux cours et formations, et s'inscrire ou
poser des questions s'il le souhaite.

2.5.2. Les besoins non fonctionnels :

Les besoins non fonctionnels décrivent les critères qualité pour un système ou une
application, ils comprennent :

 Sécurité: La plateforme doit garantir la sécurité des informations d'identification et

financières des utilisateurs, ainsi que la confidentialité des données des projets. La
sécurité des données doit être assurée à travers des mécanismes tels que le chiffrement
des données, le pare-feu et les contrôles d'accès.
 Performance : La plateforme doit être rapide, fiable et résistante, pour permettre une
expérience utilisateur fluide et sans interruption. Les temps de chargement doivent être
courts, les erreurs doivent être minimisées et la disponibilité doit être assurée à tout
moment.
 Interface utilisateur : La plateforme doit offrir une interface utilisateur intuitive et
facile à utiliser, avec une navigation claire et cohérente.

18
 Interface conviviale : Assurez-vous que l'application possède une interface intuitive
et facile à naviguer. Les utilisateurs doivent pouvoir accéder rapidement aux différentes
fonctionnalités, telles que la réservation, l'annulation, etc…
 Réactivité : L'application doit être réactive et fournir des réponses rapides aux actions
des utilisateurs. Cela inclut des temps de chargement rapides, des transitions fluides
entre les écrans et des notifications en temps réel pour les mises à jour importantes

2.6. Diagramme de Gantt :

Le diagramme de GANTT est un outil permettant de modéliser la planification des tâches

nécessaires à la réalisation d'un projet. Il s'agit d'un outil inventé en 1917 par Henry L.
GANTT. Dans un diagramme de GANTT chaque tâche est représentée par une ligne, tandis
que les colonnes représentent les jours, semaines ou mois du calendrier selon la durée du
projet.

Figure 1: Diagramme de Gantt

2.7. Logo de l’application :

19
 Figure 2:Logo de l’application

3. Conclusion :

En résumé de ce chapitre de spécification, nous avons analysé en détail les besoins

fonctionnels et les exigences techniques de notre application de gestion de cours de
soutien. Nous avons également pris en compte les défis potentiels et les solutions pour y
répondre de manière efficace.

Pour ce projet, nous avons défini des contraintes essentielles pour garantir une expérience
utilisateur optimale. Cela inclut la création d'une interface simple et intuitive, adaptée à
tous les appareils, l'intégration de fonctionnalités spécifiques pour la gestion des étudiants
et des cours, ainsi que la sécurité des données personnelles. Nous avons aussi mis l'accent
sur la compatibilité avec plusieurs navigateurs, un support réactif pour les utilisateurs et
des tests réguliers pour assurer la performance et l'amélioration continue de l'application.

En suivant ces spécifications, nous serons en mesure de concevoir une application web de
gestion de soutien scolaire qui répondra aux besoins des administrateurs et des étudiants de
manière fluide, fonctionnelle et sécurisée.

20
 Chapitre 2 : Conception et
modélisation

1. Introduction :

Dans ce chapitre, nous allons aborder la modélisation et la conception de notre projet en

utilisant les diagrammes UML.

21
Nous allons commencer par les diagrammes de cas d'utilisation, suivi du diagramme de
séquence et du diagramme de classe. Enfin, nous allons expliquer la structure de notre base
de données.

Cette approche nous a permis de concevoir des systèmes bien structurés qui répond aux
besoins de nos utilisateurs.

2. Cycle de vie :

Le cycle de vie spiral est un modèle de développement logiciel itératif qui permet aux
équipes de s'adapter aux changements et aux risques potentiels tout au long du processus
de développement. Ce modèle se compose de quatre phases : planification, analyse des
risques, ingénierie et évaluation. La planification implique la définition des objectifs et des
exigences, l'analyse des risques permet d'identifier les risques potentiels et de les gérer,
l'ingénierie implique le développement, les tests et la documentation, et l'évaluation permet
de vérifier la qualité du produit et d'identifier les points à améliorer pour la prochaine
itération. Le modèle spiral offre une approche structurée tout en permettant une flexibilité
et une adaptation en cours de développement, ce qui en fait un choix populaire pour les
projets de fin d'étude.

3. La méthodologie de conception :
3.1. UML :

Les diagrammes UML peuvent être utilisés comme une façon de visualiser un projet avant
qu'il ne se déroule ou comme documentation pour un projet par la suite. Le but général des

22
diagrammes UML est de permettre aux équipes de visualiser comment fonctionne ou
fonctionnera un projet.

3.2. Diagramme de cas d’utilisation :

Le rôle des diagrammes de cas d'utilisation est de collecter, d'analyser, d'organiser les
exigences et de lister les principales fonctionnalités d'un système. C'est donc la première
étape UML pour la conception du système. Le diagramme de cas d'utilisation comporte
trois éléments principaux :

 Un acteur : c'est l'idéalisation d'un rôle joué par une personne externe, un processus ou
une chose qui interagit avec un système.
 Un cas d’utilisation : c'est l'unité cohérente représentant une fonctionnalité visible
d'utilisation.
 Relations : c'est l'unité cohérente représentant une fonctionnalité visible d'utilisation
Les relations dans les cas d’utilisation :

• L’inclusion : un cas A inclus dans un cas B si le comportement décrit par A est

inclus dans le comportement de B. On dit que B dépend de A.
• L’extension : on dit que A étend B si le comportement du ce dernier peut être
étendu par l’autre
• Généralisation/ spécialisation : un cas A une généralisation d’un cas B si best
est un cas particulier de A, cette relation est présente dans la plu part des
diagrammes d’UML, et se traduit par le concept d’héritage dans les langages
orientés objet.

23
Figure 3 : Diagramme de cas d’utilisation de Formateur

24
 Figure 4 : Diagramme de cas d’utilisation d’Apprenant

3.3. Diagramme de séquence :

25
Dans cette section, nous allons présenter les diagrammes de séquence de certains cas
d'utilisation de notre application. Les diagrammes de séquence sont la représentation
graphique des interactions entre les acteurs et le système selon un ordre chronologique
dans la formulation UML (Unified Modeling Language).

Figure 5 : Diagramme de séquence «se connecter dans l’application web »

3.4. Diagrammes de classe :

26
Les diagrammes de classes sont utilisés en génie logiciel pour représenter les classes et les
interfaces système et les diverses relations entre elles. Ce diagramme fait partie de la partie
statique d'UML, car il résume à la fois les aspects temporels et dynamiques.

Figure 6 : Diagramme de classe

27
Chapitre 3 : Environnement de
travail et outils

1. Introduction :

28
L'utilisation d'outils lors de la création d'une application web est essentielle, en particulier
les logiciels de développement et les Framework web. Ce chapitre présente tous les outils
utilisés pour créer notre application.

2. Outils de travail :

2.1. Visual studio code :

Figure 7 : Logo de VS code

Visual Studio Code, également communément appelé VS Code, est un éditeur de code
source créé par Microsoft pour Windows, Linux et MacOs. Il possède des fonctionnalités
telles que le débogage, la coloration syntaxique, la complétion intelligente de code, les
extraits de code, la refactorisation de code et Git intégrer. Les utilisateurs peuvent changer
le thème, les raccourcis clavier, les préférences et installer des extensions qui ajoutent des
fonctionnalités supplémentaires.

2.2. GIT & GITHUB :

29
 Figure 8: Logo de Git & GitHub

Git est un système de contrôle de version, ou VCS, qui suit l'historique des modifications
alors que des personnes et des équipes collaborent sur des projets ensemble. Alors que les
développeurs apportent des modifications au projet, toute version antérieure du projet peut
être récupérée à tout moment. GitHub est une plateforme d'hébergement de code pour le
contrôle de version et la collaboration. Il vous permet et à d'autres de travailler ensemble
sur des projets de n'importe où.

2.3. Figma :

Figure 9: Logo de Figma

Nous avons utilisé Figma pour créer et collaborer sur des maquettes de conception,
facilitant ainsi le processus de développement de notre projet.

2.4. Visily :

30
 Figure 10 : Logo Visily

Visily est une plateforme de design de prototypage qui permet aux équipes de créer
rapidement des maquettes interactives et des prototypes pour des applications web et
mobiles. Elle offre une interface intuitive avec des outils de glisser-déposer, des
bibliothèques de composants prédéfinis et des fonctionnalités de collaboration en temps
réel. Visily simplifie le processus de conception, permettant aux développeurs, designers et
parties prenantes de visualiser et itérer sur des idées de manière efficace avant de passer à
la phase de développement.

3. Outils de développement :
3.1. CodeIgniter :

31
 Figure 11: Logo CodeIgniter

CodeIgniter est un framework PHP léger et rapide conçu pour faciliter le développement
d'applications web dynamiques. Il suit une architecture MVC (Modèle-Vue-Contrôleur),
qui sépare la logique métier, la présentation, et les données, rendant le code plus structuré,
maintenable et évolutif.

3.2. HTML5 :

Figure 12: Logo HTML

HTML (HyperText Markup Language) est le langage de balisage standard utilisé pour
structurer et afficher le contenu des pages web. C'est l'une des technologies fondamentales
du web, aux côtés de CSS (pour la mise en forme) et JavaScript (pour les interactions
dynamiques). HTML utilise des balises pour définir la structure et le contenu des
documents web.

3.3. CSS :

32
 Figure 13: Logo CSS

CSS (Cascading Style Sheets) est un langage de style utilisé pour contrôler l'apparence et la
mise en forme des documents HTML. Il permet de séparer le contenu (HTML) de la
présentation (CSS) et joue un rôle essentiel dans la création de pages web modernes et
attractives.

3.4. Bootstrap :

Figure 14: Logo BOOTSTRAP

Bootstrap est un framework CSS libre et open-source qui facilite la création de sites web et
d'applications réactives (responsive). Développé initialement par Twitter, il fournit une
collection d'outils comprenant des styles préconçus, des composants UI, et des
fonctionnalités JavaScript pour accélérer le développement front-end.

3.5. JavaScript :

33
 Figure 15: Logo de JAVASCRIPT

JavaScript est un langage de programmation interprété principalement utilisé pour ajouter

de l'interactivité et du dynamisme aux pages web. Il est largement adopté dans le
développement web pour créer des expériences utilisateur riches et interactives.

3.6. UML :

Figure 16Figure :Logo UML 18: Logo UML

UML (Unified Modeling Language) est un langage de modélisation graphique utilisé pour
représenter visuellement la conception et la structure des systèmes logiciels. Il offre une
notation standardisée pour décrire les différents aspects d'un système, tels que les classes,
les objets, les relations, les comportements et les interactions. UML facilite la
communication entre les membres de l'équipe de développement et permet de mieux
comprendre, concevoir et documenter les logiciels.

4. Conclusion

En conclusion, les outils de développement modernes constituent des piliers essentiels pour
la création d’applications web performantes. Les frameworks tels que CodeIgniter et
34
Bootstrap facilitent le développement rapide et structuré, tandis que des langages comme
JavaScript, associés à HTML5 et CSS3, permettent de créer des interfaces dynamiques et
visuellement attrayantes. En utilisant ces technologies de manière cohérente, les
développeurs peuvent produire des solutions web robustes et adaptées aux besoins
spécifiques des utilisateurs, tout en garantissant une expérience fluide et engageante.

35
 Chapitre 4 : Réalisation de
projet

1. Introduction :
36
Ce chapitre a pour objectif majeur de présenter le projet final. C’est la phase de réalisation
de cette application web Dans cette partie, on va présenter quelques interfaces web dans le
but de vous situer dans le projet.

2. Les interfaces graphiques :

2.1. Login :

La page de connexion permet aux utilisateurs de s'authentifier afin d'accéder aux

fonctionnalités sécurisées de l'application. Elle comprend les éléments suivants :

• Email : Un champ permettant à l'utilisateur de saisir son adresse email.

Ce champ est validé pour vérifier qu'une adresse email valide est
fournie.
• Mot de Passe : Un champ pour saisir le mot de passe associé au
compte utilisateur. Ce champ est sécurisé et masque les caractères saisis
pour protéger la confidentialité.

Figure 17:Page d'accueil

2.2. Tableau de bord:

37
Le tableau de bord est une interface centralisée qui permet à l'utilisateur de gérer les
principales fonctionnalités de l'application. Il inclut des options pour ajouter, modifier et
supprimer des cours, gérer les étudiants, renouveler les abonnements et accéder à diverses
statistiques. Chaque fonctionnalité est accessible via des boutons ou des menus intuitifs,
facilitant la gestion efficace des ressources et des utilisateurs."

Figure 18 :Page Tableau de borde

2.3. Tableau de bord (Dark mod) :

38
 Figure 19:Tableau de bord (Dark mode)

2.4. Créer Cour :

L'interface permettant de créer un nouveau cours en entrant les détails requis, comme le
nom du cours et son prix, pour l'ajouter à la plateforme et le rendre disponible pour les
utilisateurs.

Figure 20 :Créer Cour

2.5. Manager les Cour :

39
La page dédiée aux cours sur le site web propose un aperçu complet de tous les cours
disponibles, accompagnés de leurs prix respectifs. Chaque cours est présenté avec des
informations détaillées, telles que son nom et son coût. Les utilisateurs disposent également
d'options pour gérer les cours : ils peuvent modifier les détails d'un cours existant ou le
supprimer entièrement. Cette interface est conçue pour être intuitive, offrant une gestion
efficace et rapide des cours proposés sur le site.

Figure 21: gestion des cours

2.6. Ajouter étudiant :

40
L'interface permettant l'administrateur d'ajouter un nouvel étudiant en saisissant ses
informations personnelles, telles que son nom, son email, son numéro de téléphone, sa date
de naissance, ainsi que les cours qu'il souhaite suivre et d'autres informations pertinentes

Figure 22 :Ajouter etudiant

2.7. Manager les etudiants:

L'interface permettant à l'administrateur de gérer les étudiants en offrant des options pour
modifier leurs informations personnelles, telles que le nom, l'email, le numéro de

41
téléphone, ou la date de naissance, ainsi que la possibilité de supprimer un étudiant du
système si nécessaire, afin de maintenir une gestion efficace et à jour des utilisateurs

Figure 23:Manager les etudiants

2.8. Profile :

Cette page de profil étudiant permet de gérer les informations personnelles de manière
efficace. Elle offre deux fonctionnalités principales :
Envoi de l'email et du mot de passe : En cliquant sur le bouton "Send Email And
Password", les informations d'accès, à savoir l'email et le mot de passe générés pour
42
l'étudiant, sont envoyées automatiquement à son adresse email. Cela permet à l'étudiant de
se connecter facilement à la plateforme.
Impression de la carte d'accès : Le bouton "Print Card" génère une carte d'accès contenant
les informations personnelles de l'étudiant, comme son nom, prénom, date de naissance, et
ses coordonnées. Cette carte est imprimable et peut être utilisée comme preuve
d'inscription. Ces fonctionnalités sont intégrées pour simplifier la communication et l'accès
des étudiants à leurs données essentielles sur la plateforme.

Figure 24:Profile

2.9. Print Card :

43
 Figure 25:Print Card

2.10. Parametre de systeme:

Ce page est dédiée à la personnalisation des informations du centre. Sur cette page,
l'administrateur a la possibilité de :

44
Télécharger le logo du centre : Cette fonctionnalité permet d’ajouter une image
représentant le logo officiel du centre. Ce logo sera utilisé automatiquement dans les
documents générés, comme les cartes d’accès imprimées.
Définir le nom du centre : L’administrateur peut également saisir ou modifier le nom
officiel de son centre. Ce nom sera affiché sur les cartes d’accès et dans d’autres sections
importantes de l’application.
Cette page est essentielle pour adapter l’application aux besoins spécifiques de chaque
centre, en offrant une identité visuelle et une personnalisation cohérente pour les
documents générés.

Figure 26:paramètres de systeme

2.11. Page des abonnements :

L'interface permet à l'administrateur de renouveler l'abonnement d'un étudiant en

prolongeant sa validité pour une nouvelle période. L'administrateur peut ajuster la durée de
l'abonnement en fonction des besoins de l'étudiant, assurant ainsi la continuité de son accès
aux cours et services proposés par la plateforme L'interface permet à l'administrateur
d'inscrire un étudiant à un nouveau cours, en sélectionnant le cours souhaité et en
déterminant la durée de l'inscription.

45
 Figure 28: Inscription d'un étudiantà un nouveau cours

Figure 28:page des abonnements

Figure 27:renouveler l'abonnement

L'interface permet à l'administrateur d'inscrire un étudiant à un nouveau cours, en

sélectionnant le cours souhaité et en déterminant la durée de l'inscription

46
 Figure 29:Inscription d'un étudiant à un nouveau cours

2.12. Ajouter des acnnonces :

L'interface permet à l'administrateur d'ajouter des annonces concernant les nouveautés ou

informations importantes du centre, telles que les événements à venir, les changements de
47
planning, ou les rappels. Ces annonces sont ensuite affichées aux étudiants pour les tenir
informés des dernières actualités.

Figure 30:Ajouter les annonces

2.13. Manager des annoces :

L'interface permet à l'administrateur d'afficher et de gérer la liste des annonces.

L'administrateur peut consulter toutes les annonces publiées, les modifier si nécessaire, ou
les supprimer, assurant ainsi une gestion fluide des informations destinées aux étudiants

Figure 31:Manager les annonces

3. l'affichage de l'annonce :

L'interface permet à l'étudiant de consulter les annonces affichées par l'administrateur, où

sont présentées les informations importantes concernant les nouveautés du centre, les
événements à venir, ou tout autre message destiné à informer les étudiants.

48
 Figure 32:l’affichage des annonces

Conclusion Générale :
Ce rapport présente le développement d'une application web de gestion pour un centre de
cours de soutien. L'objectif principal de ce projet était de faciliter la gestion des cours et
d'optimiser la réservation des séances de soutien, en offrant une solution numérique
performante et facile à utiliser.

49
Au cours de ce projet, nous avons fait face à plusieurs défis, notamment l'analyse des
besoins des utilisateurs, la conception d'interfaces intuitives, l'intégration des
fonctionnalités essentielles et la mise en place de mesures de sécurité pour protéger les
données sensibles. Grâce à une planification soignée, une collaboration étroite et une
gestion réactive des problèmes, nous avons pu mener à bien ces étapes.

Les résultats obtenus montrent que l'application a considérablement amélioré l'organisation

et la gestion des séances de soutien. Les utilisateurs ont exprimé des retours positifs,
soulignant une gestion simplifiée des inscriptions, une meilleure planification des cours et
une expérience utilisateur optimisée. La solution a permis de faciliter l'accès aux
informations et de rendre la gestion des ressources plus fluide et plus efficace.

Cette expérience a mis en évidence l'importance de comprendre les besoins spécifiques des
utilisateurs, de concevoir des interfaces simples et pratiques, et d'adopter une approche
agile du développement. L'écoute active des retours des utilisateurs et l'amélioration
continue de l'application ont été essentielles pour le succès du projet.

Pour l'avenir, plusieurs améliorations sont envisagées, comme l'ajout de nouvelles

fonctionnalités telles que des évaluations en ligne, des statistiques de performance, et
l'intégration avec d'autres services pour enrichir l'expérience des étudiants. Il serait
également judicieux de continuer à explorer les nouvelles technologies afin de rester
compétitif et d'offrir un service toujours plus performant.

En conclusion, ce projet a été une opportunité précieuse pour mettre en pratique nos
compétences techniques et contribuer à l'amélioration de la gestion des cours de soutien.
Nous espérons que ce rapport servira de ressource pour d'autres professionnels cherchant à
moderniser leur gestion des formations et à offrir une meilleure expérience aux étudiants.

50
 Webographie :
https://github.com/

https://stackoverflow.com/

https://chat.openai.com/

https://www.lucidchart.com/

51
https://tailwindcss.com/

https://codeigniter.com/ https://www.visily.ai/

52