Ministére de l'Enseignement

Année Universitaire
Supérieur et de la Recherche 2023/2024
Scientifique

DIGITAL SCHOOL
Ecole International Supérieur
Privé Polytechnique de Sousse

RAPPORT DE PROJET
DE FIN D'ANNEE

VR and Gaming Engineering

E learning Platforme

EPI Digital School Mohamed Fedi Benghanem Mahdi Mili

i
 Dédicace
Du profond de mon cœur, je dédie ce travail à tous ceux qui me sont chers,

A MES CHERS PARENTS

Que ce travail soit l’expression de ma reconnaissance pour vos

sacrifices consentis, votre soutien moral et matériel que vous
n’avez cesse de prodiguer.
Vous avez tout fait pour mon bonheur et ma réussite.

Que dieu vous préserve en bonne santé et vous accorde une longue vie

A MES FRERES, SŒURS, LEURS EPOUX ET LEURS ENFANTS

Vous étiez toujours présents pour m’aider et m’encourager.

Sachiez que vous serez toujours dans mon cœur.

A tous mes amies qui n’ont cessé de m’encourager et de me soutenir

A TOUS MES AMIES

ii
 Remerciements

A mes parents

Aucun hommage ne pourrait être à la hauteur de l’amour

Et de l’affection dont ils ne cessent de me comble
A mes Frères
En leur souhaitant la réussite et le bonheur A toute ma famille
A tous mes amis
A tous mes professeurs et ceux qui ont contribué àla réussite de ce travail

« ‫» اﻟﺤﻤﺪ ﷲ اﻟﺬي ھﺪاﻧﺎ ﻟﮭﺬا و ﻣﺎﻛﻨﺎ ﻟﻨﮭﺘﺪي ﻟﻮﻻ أن ھﺪاﻧﺎ اﷲ‬

Nous exprimons nos profondes gratitudes et respectueuse

reconnaissance ànotre encadreur :
Mr. Mahdi Mili

Pour sa bonne volonté d'accepter de nous encadrer, pour tout le

temps qu’ilnous a octroyé et pour tous les conseils qu’il nous a
prodigué.
Nous remercions aussi nos université Pour leurs directives précieuses, et
pour la qualité de leurs suivis durant toutela période de notre projet

iii
 AVANT

Dans le cadre de ce projet, nous avons eu l'opportunité de travailler sur la

conception et la réalisation d'une plateforme d'E-learning, un projet proposé en
collaboration avec l'entreprise EPI Digital School. Cette expérience s'avère être un
élément essentiel dans le développement des compétences de l'étudiant en
informatique.

En effet, elle lui permet de mettre en pratique les connaissances théoriques acquises
tout au long de son parcours universitaire dans un contexte professionnel concret,
avec l'encadrement de M. Mahdi Mlili, notre enseignant référent.

iv
 Table des matières
Dédicace ....................................................................................................................... ii
Remerciements .................................................................................................................. iii
AVANT ..................................................................................................................... iv
Table des matières ..................................................................................................... v
Liste des figures ....................................................................................................... vii
Liste des tableaux.................................................................................................... viii
Introduction générale ................................................................................................ 1
Chapitre I :................................................................................................................. 2
ETUDE PREALABLE .............................................................................................. 2
1.1 Introduction ............................................................................................... 3
1.2 Présentation de l'université EPI : ............................................................. 3
1.3 Recueil........................................................................................................ 4
1.3.1 Définition du champ de l’étude .................................................................... 4
1.3.2 Problématique: ............................................................................................ 6
1.3.3 Objectifs à atteindre et publiques cible ........................................................ 6
1.4 Etude de l’existant ..................................................................................... 8
1.5 Analyse de l’existant .......................................................................................... 8
1.5.1 Critique de l’existant ................................................................................. 11
1.6 Proposition de différentes solutions ........................................................ 12
1.7 Conclusion ............................................................................................... 13
Chapitre II ............................................................................................................... 14
MODELISATION CONCEPTUELLE .................................................................. 14
& ORGANISATIONELLE ..................................................................................... 14
Introduction : ....................................................................................................... 15
1. Modélisation Conceptuelle ...................................................................... 15
[Link] de la méthodologie de conception : ........................................................ 15
1.1.1. Présentation d’UML : ................................................................................ 15
[Link] des cas d’utilisation ....................................................................... 16
[Link] des acteurs ........................................................................... 16
[Link] des cas d'utilisation .............................................................. 16
[Link] de séquences ................................................................................ 21
[Link] de séquence : « Authentification » .......................................... 21
[Link] de séquence : « Inscription au site » ........................................ 22
[Link] de séquence : « Ajout de code d’un groupe » : ........................ 22
Conclusion :.......................................................................................................... 23

v
Chapitre III .............................................................................................................. 24
3.1 Introduction ............................................................................................. 25
3.2 Etude technique ....................................................................................... 25
3.2.1 Environnement de réalisation .................................................................... 25
[Link] Matériels de base : ................................................................................ 25
[Link] Choix des langages de développement et de SGBD : ............................. 26
[Link] Outil de développement : ...................................................................... 28
3.3 Production des programmes ................................................................... 28
3.3.1 Descriptif du produit : ................................................................................... 28
3.3.2 Architecture .................................................................................................. 29
3.4.1 Charte graphique ....................................................................................... 30
3.4.2 Arrière-plan et texte................................................................................... 30
3.4.3 Présentation des interfaces ......................................................................... 30
Conclusion: .......................................................................................................... 40
Conclusion et Perspectives ...................................................................................... 41
Glossaire ................................................................................................................... 43
BIBLIOGRAPHIE & Webliographie ................................................................. 44
Titre : « Conception et réalisation d’une plateforme d’E-learning » .................... 45
Résumé : ........................................................................................................ 45
Title: « Design and implementation of a platform of E-learning » ...................... 45
Abstract :........................................................................................................ 45
« ‫ ﺗﺼﻤﯿﻢ وإﻧﺠﺎز ﻣﻨﻈﻮﻣﺔ ﻟﻔﺎﺋﺪة اﻟﺘﻌﻠﻢ ﻋﻦ ﺑﻌﺪ‬:»‫ اﻟﻌﻨﻮان‬........................................................ 46
‫اﻟﺨﻼﺻﺔ‬: ........................................................................................................... 46

vi
 Liste des figures
Figure 1: Moodle ............................................................................................................................... 9
Figure 2: BlackBoard Learn............................................................................................................10
Figure 3: Google Classroom ............................................................................................................10
Figure 4: Edmodo ............................................................................................................................11
Figure 5: Diagramme de cas d'utilisation pour l'administrateur ...................................................18
Figure 6: Diagramme de cas d'utilisation pour l’utilisateur ...........................................................18
Figure 7: Représentation du diagramme de classe .........................................................................20
Figure 8: Diagramme de séquence d’authentification ....................................................................21
Figure 9: Diagramme de séquence « Inscription au site» ...............................................................22
Figure 10: Diagramme de séquence << Créer code groupe>>........................................................23
Figure 11:La page d’accueil ............................................................................................................31
Figure 12: interface Inscription .......................................................................................................32
Figure 13: Interface d’authentification ...........................................................................................33
Figure 14: Interface d’admin ..........................................................................................................34
Figure 15: Interface d’étudiant .......................................................................................................35
Figure 16:Interface d’ajout de code de groupe ...............................................................................36
Figure 17:Interface de creation de groupe ......................................................................................37
Figure 18: Interface de professeur ..................................................................................................38
Figure 19: Interface de discussion de groupe ..................................................................................39

vii
 Liste des tableaux
Tableau 1: Comparaison des solutions existantes ...........................................................................11
Tableau 2: Matériel de base.............................................................................................................26

viii
 Introduction générale

Dans le cadre de notre Projet de Fin d'Année (PFA), nous nous sommes engagés dans le
développement d'un système interne visant à renforcer la communication au sein de notre
institution, l'EPI Digital School. Notre objectif principal est de concevoir une plateforme
d'apprentissage en ligne facilitant l'interaction entre les étudiants et les professeurs, tout en
assurant une gestion efficiente des ressources pédagogiques.
Cette initiative trouve sa justification dans l'évolution constante des méthodes d'enseignement
et d'apprentissage, amplifiée par l'émergence des technologies de l'information et de la
communication. Face à l'essor des cours à distance et à la nécessité de favoriser la
collaboration en ligne, il est crucial de disposer d'outils adaptés pour stimuler l'engagement des
apprenants et optimiser la transmission des connaissances.

Ce projet intitulé est constitué de trois chapitres :

Dans le premier chapitre de notre rapport, nous explorerons le domaine de l'apprentissage en
ligne, qui constitue le champ d'étude de notre application. Nous procéderons à une analyse
approfondie des solutions existantes sur le marché, en examinant les avantages et les
inconvénients de chaque approche. Nous identifierons également les principaux défis et
lacunes rencontrés, sur lesquels nous proposerons des solutions innovantes.
Dans le deuxième chapitre, nous nous pencherons sur la modélisation conceptuelle de notre
solution. Nous détaillerons les différents aspects de notre plateforme d'apprentissage en ligne,
en mettant en avant les fonctionnalités clés et les interactions entre les différents acteurs. Nous
présenterons ensuite le modèle logique des données sous-jacent à notre application, en
décrivant la structure des informations manipulées et les relations entre les différentes entités.
Dans le troisième chapitre, nous aborderons l'étude technique de notre projet. Nous décrirons
en détail l'environnement de développement, tant sur le plan matériel que logiciel, ainsi que les
outils utilisés pour la conception et la mise en œuvre de notre application. Nous illustrerons
également les différentes fonctionnalités de notre plateforme à travers des captures d'écran,
offrant ainsi une vue concrète de l'expérience utilisateur.

1
 Chapitre I :
ETUDE PREALABLE

2
 1.1 Introduction
L'étude préalable constitue une étape fondamentale dans le processus de conception et de
développement de notre application.

Dans ce chapitre, nous débuterons par définir le champ d'étude de notre projet et énoncer
les objectifs que nous souhaitons atteindre. Nous nous attarderons ensuite sur une
analyse approfondie des solutions existantes sur le marché, en mettant en lumière leurs
avantages et leurs inconvénients respectifs. Cette analyse critique de l'existant nous
permettra d'identifier les lacunes et les défis rencontrés, et ainsi de définir clairement nos
objectifs en vue de développer un système de qualité dans le futur.

Enfin, nous proposerons différentes solutions aux problèmes identifiés, en nous

appuyant sur notre compréhension de l'existant et sur les besoins spécifiques de notre
projet. Ces solutions serviront de base à la conception et à la réalisation de notre
application, en visant à répondre de manière efficace et innovante aux besoins des
utilisateurs.

1.2 Présentation de l'université EPI :

L'EPI Educational Group est une institution renommée dans le domaine de l'éducation,
offrant une gamme diversifiée de programmes et de services éducatifs de haute qualité.
Fondée sur des principes d'excellence académique, d'innovation pédagogique et de
responsabilité sociale, l'EPI Educational Group s'engage à fournir une expérience
éducative enrichissante et stimulante à ses étudiants.

L'EPI Educational Group se distingue par son engagement envers l'excellence

académique, en offrant des programmes rigoureux et adaptés aux besoins du marché du
travail. L'institution dispose d'une équipe pédagogique hautement qualifiée et dévouée,
qui assure un encadrement personnalisé et un suivi attentif de chaque étudiant.

En plus de son offre académique diversifiée, l'EPI Educational Group met l'accent sur le
développement des compétences transversales et la préparation à la vie professionnelle.
L'institution propose des activités parascolaires, des stages en entreprise et des
opportunités d'apprentissage expérientiel, permettant aux étudiants de développer un
ensemble de compétences essentielles pour réussir dans leur carrière.

En outre, l'EPI Educational Group accorde une grande importance à l'innovation

3
pédagogique et à l'utilisation des technologies de l'information et de la communication
dans l'enseignement et l'apprentissage. L'institution investit dans des infrastructures
modernes et des ressources numériques de pointe, offrant ainsi à ses étudiants un
environnement d'apprentissage dynamique et interactif.

Forte de son engagement envers l'excellence, l'innovation et le développement

personnel, l'EPI Educational Group continue de jouer un rôle de premier plan dans le
domaine de l'éducation, formant ainsi les leaders et les professionnels de demain.

1.3 Recueil

1.3.1 Définition du champ de l’étude

L'intégration des Technologies de l'Information et de la Communication (TIC) dans les
processus de transmission des connaissances est devenue une composante essentielle de
l'environnement fonctionnel et intellectuel de nombreuses institutions éducatives. Cette
évolution a donné lieu à de nouvelles approches dans la production, la diffusion et
l'appropriation des contenus pédagogiques, favorisant l'accès à une information variée et
interconnectée pour les enseignants et les apprenants.
Les Technologies de l'Information et de la Communication Éducatives (TICE) englobent
diverses applications informatiques visant à soutenir les processus éducatifs. Parmi
celles-ci, on trouve notamment les plateformes d'apprentissage en ligne, les
environnements virtuels d'apprentissage et les outils de communication et de
collaboration à distance. Ces technologies offrent des possibilités nouvelles pour
l'enseignement et la formation, en permettant un accès flexible aux ressources
pédagogiques et en favorisant l'interaction entre les participants.
Dans le cadre de notre Projet de Fin d'Année (PFA), nous nous concentrons
spécifiquement sur les dynamiques impulsées par les technologies numériques dans les
contextes éducatifs. Notre objectif est de développer un système de téléformation qui tire
parti des avancées technologiques pour offrir une expérience d'apprentissage innovante
et enrichissante.
Afin de situer notre projet dans son contexte, nous définissons quelques notions clés
relatives à notre champ d'étude. La Formation Ouverte et/ou à Distance (FOAD) est un
dispositif flexible de formation qui permet d'adapter les apprentissages aux besoins
individuels ou collectifs, tout en offrant un accès à des ressources et des compétences
variées. Cette approche vise à répondre aux besoins de divers publics, tels que les

4
personnes en reconversion professionnelle, les personnes en situation de handicap ou
celles désireuses de suivre une formation à distance.
Dans le domaine de la FOAD, l'E-Learning, ou apprentissage en ligne, occupe une place
centrale. Il s'agit de l'utilisation des technologies de l'internet pour faciliter l'accès aux
ressources pédagogiques et encourager les échanges et la collaboration à distance. Le E-
Learning trouve des applications variées, tant dans le secteur professionnel que dans le
secteur universitaire, offrant des alternatives flexibles et innovantes à l'enseignement
traditionnel.
Dans l'organisation d'un projet de E-Learning, deux approches principales sont
couramment utilisées : l'approche asynchrone et l'approche synchrone. L'approche
asynchrone permet à l'apprenant d'accéder à des ressources pédagogiques à son rythme,
tandis que l'approche synchrone favorise l'interaction en temps réel entre les participants,
simulant ainsi une expérience d'apprentissage plus proche de celle d'une classe
traditionnelle.
En résumé, notre projet de PFA s'inscrit dans la continuité de ces évolutions en
proposant un système de téléformation innovant et adapté aux besoins des apprenants et
des formateurs. En exploitant les potentialités des TICE, nous visons à offrir une
expérience d'apprentissage flexible, interactive et personnalisée, contribuant ainsi à la
promotion de l'éducation à distance et à la diffusion des connaissances dans un contexte
numérique en constante évolution.
Dans le cadre de notre Projet de Fin d'Année (PFA), nous explorons diverses
technologies et fonctionnalités destinées à améliorer l'expérience d'apprentissage à
distance.
Les Rich Internet Applications (RIA) représentent une catégorie d'applications semi-
légères qui tirent parti des ressources de l'ordinateur client. Elles offrent une meilleure
réactivité et ergonomie par rapport aux applications web traditionnelles, en évitant les
rechargements de pages fréquents et en permettant une utilisation fluide des
fonctionnalités en ligne.
La Web Conférence est une autre technologie essentielle pour la formation à distance,
permettant la réunion virtuelle de plusieurs participants pour des réunions de travail, des
formations ou des séminaires. Elle facilite les échanges en temps réel et offre un gain de
temps et d'argent, bien qu'elle puisse présenter des défis en termes de confidentialité et
de sécurité.
Le Streaming, ou diffusion en continu, est un élément clé de la formation à distance,

5
permettant la transmission de contenus audio et/ou vidéo en temps réel. Il existe deux
types de streaming : le streaming progressif, qui utilise les protocoles HTTP et FTP et ne
nécessite pas de serveur spécialisé, et le streaming continu, qui offre une adaptabilité
dynamique de la qualité du contenu en fonction de la connexion réseau.
Le Sharing, ou partage, est une fonctionnalité importante dans les outils de E-Learning,
permettant de partager des documents, d'afficher l'écran en temps réel et de piloter à
distance un ordinateur pour une assistance technique ou un support en ligne.
Enfin, l'assistance à distance et le bureau à distance sont des outils technologiques
innovants qui permettent d'accéder à un ordinateur distant et de fournir un support
technique à distance, notamment pour l'assistance informatique, le diagnostic matériel et
la configuration à distance.
En examinant ces différentes technologies et fonctionnalités, nous visons à développer
une application de téléformation innovante et performante, répondant aux besoins
spécifiques des apprenants et des formateurs dans un environnement d'apprentissage à
distance. Dans la section suivante, nous détaillerons nos objectifs à atteindre dans le
cadre de ce projet.

1.3.2 Problématique:
Face aux défis actuels de l'enseignement et de l'apprentissage, notamment l'adaptation
aux contraintes de disponibilité, de distance et de flexibilité, comment concevoir et
développer une plateforme d'e-learning interne pour une université qui réponde
efficacement aux besoins des étudiants, des enseignants et de l'administration ? Cette
plateforme devrait permettre aux étudiants d'accéder facilement aux ressources
pédagogiques, de collaborer avec leurs pairs et de communiquer avec leurs enseignants
de manière transparente et sécurisée. De même, elle devrait offrir aux enseignants des
outils conviviaux pour créer et animer des cours en ligne, ainsi que pour évaluer et
suivre les progrès des étudiants. Enfin, pour l'administrateur, cette plateforme devrait
fournir des fonctionnalités de gestion complètes, permettant de surveiller et d'analyser
l'activité des utilisateurs, de répondre rapidement aux réclamations éventuelles et de
garantir la sécurité et la confidentialité des données.

1.3.3 Objectifs à atteindre et publiques cible

Dans un contexte où les contraintes liées à la formation en présentiel sont de plus en plus
prégnantes, telles que la disponibilité et les frais de déplacement, la formation à distance

6
 apparaît comme une alternative flexible et adaptée aux besoins des étudiants.

Objectifs :

Notre objectif principal est de développer une plateforme d'E-Learning qui répond
efficacement aux besoins des étudiants et des enseignants de notre université. Cette
plateforme vise à offrir une expérience d'apprentissage souple et enrichissante en
permettant :

Les Besoins Non Fonctionnels :

- Une planification flexible des formations grâce à une interface ergonomique et intuitive,
facilitant ainsi la gestion des sessions de cours pour les différents utilisateurs.

- Un accès simplifié aux ressources et services pédagogiques, garantissant ainsi une

disponibilité optimale des supports de cours et des outils de collaboration.

- Une collaboration et un échange facilités à distance, favorisant ainsi l'interaction entre

les étudiants et les enseignants et encourageant la coopération dans le cadre de la
téléformation.

- Une amélioration de la qualité d'apprentissage grâce à l'utilisation des nouvelles

technologies multimédias, permettant ainsi une immersion plus riche et interactive dans
les contenus pédagogiques.

- Une interactivité accrue entre les enseignants et les étudiants à travers des
fonctionnalités telles que les discussions instantanées, le partage de documents et le suivi
des progrès des étudiants.

- Une optimisation du temps de réponse de l'application, garantissant ainsi une expérience

fluide et réactive pour les utilisateurs.

- Une sécurité de l'information assurée, garantissant la confidentialité et l'intégrité des

données échangées dans le cadre de la téléformation.

Conclusion :

Notre application cible principalement les étudiants et les enseignants de notre université,
offrant ainsi une solution adaptée et performante pour l'apprentissage en ligne au sein de
notre communauté éducative. En répondant aux besoins spécifiques de ces deux publics,
notre plateforme aspire à devenir un outil incontournable dans le domaine de la formation à
distance, contribuant ainsi à l'amélioration continue de la qualité de l'enseignement et de

7
l'expérience d'apprentissage au sein de notre institution.
1.4 Etude de l’existant
Cette section vise à examiner les solutions les plus couramment utilisées dans le
domaine de l'E-Learning. Cette analyse nous permettra d'identifier les points forts et les
points faibles de chaque solution existante.

Dans les prochaines sections, nous procéderons à une étude approfondie des solutions
actuellement disponibles sur le marché. Nous commencerons par présenter une analyse
de l'existant, suivie d'une critique détaillée des différentes plateformes et outils de E-
Learning.
1.5 Analyse de l’existant

Dans l'analyse de l'existant, nous avons examiné plusieurs solutions de E-Learning

disponibles sur le marché. Voici un aperçu des principales plateformes et outils étudiés,
ainsi que de leurs caractéristiques :

Moodle : Moodle est une plateforme d'apprentissage en ligne open source largement
utilisée dans le monde de l'éducation. Elle offre une gamme de fonctionnalités telles que
la gestion des cours, les forums de discussion, les évaluations en ligne et le suivi des
progrès des étudiants. Ses points forts incluent sa flexibilité, sa communauté active de
développeurs et sa compatibilité avec une variété de modules complémentaires.
Cependant, certaines critiques ont été formulées concernant son interface utilisateur
parfois complexe et son manque de convivialité pour les enseignants débutants.

Blackboard : Blackboard est une autre plateforme populaire utilisée dans de

nombreuses institutions éducatives. Elle propose des outils de gestion de contenu, de
suivi des progrès des étudiants, de communication et de collaboration en ligne. Ses
points forts comprennent son interface conviviale, sa prise en charge de l'apprentissage
mixte et sa gamme étendue de fonctionnalités. Cependant, certains utilisateurs ont
exprimé des préoccupations concernant ses coûts élevés et sa courbe d'apprentissage
pour les administrateurs et les enseignants.
Google Classroom : Google Classroom est une plateforme d'apprentissage virtuel
gratuite développée par Google. Elle offre des fonctionnalités telles que la distribution
de devoirs, les discussions en ligne, le partage de documents et le suivi des progrès des
élèves. Ses points forts comprennent son intégration transparente avec les autres outils
Google, sa facilité d'utilisation et sa compatibilité avec les appareils mobiles. Cependant,

8
certains utilisateurs ont noté des limitations en termes de personnalisation et de
fonctionnalités avancées.

Edmodo : Edmodo est une plateforme d'apprentissage social conçue pour les écoles et
les enseignants. Elle offre des fonctionnalités telles que la création de groupes de classe,
les devoirs en ligne, les discussions en ligne et le partage de ressources pédagogiques.
Ses points forts incluent son interface conviviale, sa compatibilité avec les appareils
mobiles et sa facilité d'intégration avec d'autres outils éducatifs. Cependant, certains
utilisateurs ont critiqué sa gestion des données et ses options de personnalisation
limitées.

En résumé, chaque solution de E-Learning a ses propres avantages et inconvénients, et le

choix de la plateforme la mieux adaptée dépend des besoins spécifiques de l'institution et
des utilisateurs finaux. L'analyse de l'existant nous permettra de mieux comprendre les
lacunes et les opportunités dans le paysage actuel du E-Learning, afin de concevoir une
plateforme qui réponde efficacement aux besoins de notre projet PFA.

Figure 1: Moodle

9
Figure 2: BlackBoard Learn

Figure 3: Google Classroom

10
 Figure 4: Edmodo

1.5.1 Critique de l’existant

Le tableau 1 récapitule les avantages et les inconvénients de tous les outils traités.

Outils Avantage Inconvénients

Moodle  Open Source  Interface d’utilisateur complexe
 Flexibilité dans la  Besoin de compétence Technique
création
 Prise En charge de
modules
Black Board  Interface d’utilisateur  Cout élevé
conviviale et  Peut nécessiter des ressources matérielles et
intuitive logicielles
 Prise en charge de
l’apprentissage
mixte

Google Classroom  Gratuit à utiliser  Limite en termes de personnalisation

 Intégration avec les  Dépendance à l’égard de l’infrastructure
outils google
Edmodo  Interface conviviale  Gestion de données peut poser des problèmes
 Possibilité de créer de confidentialité et de sécurité
des groupes de
classe

Tableau 1: Comparaison des solutions existantes

11
 1.6 Proposition de différentes solutions

Après avoir identifié les lacunes dans les solutions existantes lors de notre analyse, nous
proposons la conception et l'implémentation d'une plateforme web intégrée qui répondra
aux besoins spécifiques de notre projet PFA. Voici les principales caractéristiques de
notre solution proposée :
Plateforme Web Intégrée :
Notre plateforme de E-Learning sera entièrement basée sur une interface web, offrant
ainsi une compatibilité avec tous les principaux navigateurs web sans nécessiter de
téléchargement ou d'installation supplémentaire.
Cette approche garantira une accessibilité optimale pour les formateurs et les apprenants,
quel que soit leur système d'exploitation.
Performance et Fluidité :
Une attention particulière sera portée à la rapidité et à la fluidité de notre application.
Des temps de connexion rapides ainsi qu'une expérience fluide lors du partage de
documents, de la diffusion audio et vidéo seront assurés.
Malgré la diversité des fonctionnalités offertes, notre plateforme sera conçue de manière
à offrir une simplicité d'utilisation et une ergonomie d'interface pour garantir une
expérience utilisateur intuitive et agréable.
Pilotage à Distance Sécurisé :
Notre solution intégrera un mécanisme de pilotage à distance sécurisé, permettant aux
formateurs de contrôler les ordinateurs des apprenants à distance de manière sécurisée et
transparente.
Cette fonctionnalité sera mise en œuvre en utilisant des protocoles et des techniques de
sécurité robustes pour garantir la confidentialité et l'intégrité des données échangées.
Regroupement des Fonctionnalités :
Notre plateforme regroupera toutes les fonctionnalités essentielles identifiées lors de
l'analyse de l'existant, y compris le partage de documents, les discussions en ligne, la
diffusion audio et vidéo, ainsi que le pilotage à distance.
Cette approche permettra aux formateurs et aux apprenants d'accéder à toutes les
fonctionnalités nécessaires à leur formation et à leur collaboration au sein d'une seule et
même plateforme, simplifiant ainsi leur expérience d'apprentissage en ligne.

12
En résumé, notre solution proposée vise à combler les lacunes des solutions existantes en
offrant une plateforme de E-Learning complète, performante, sécurisée et conviviale,
répondant ainsi aux besoins spécifiques de notre projet PFA.

1.7 Conclusion
En résumé, ce chapitre examine les solutions existantes dans le domaine du E-Learning,
mettant en évidence leurs avantages et leurs limites, notamment en termes de
compatibilité, performance, sécurité et intégration des fonctionnalités. Cette solution
vise à répondre efficacement aux besoins des formateurs et des apprenants en offrant une
accessibilité universelle, une performance optimale, une sécurité renforcée et une
intégration harmonieuse des fonctionnalités. En adoptant une approche axée sur la
simplicité, la rapidité et la sécurité, cette plateforme cherche à offrir une expérience
d'apprentissage en ligne enrichissante et intuitive, tout en facilitant la collaboration et
l'interaction entre les utilisateurs. En somme, cette solution représente une avancée
significative dans le domaine du E-Learning, ouvrant la voie à une nouvelle ère
d'apprentissage en ligne, plus flexible, plus efficace et plus sécurisée, au service de
l'éducation et de la formation pour tous.

13
 Chapitre II

MODELISATION CONCEPTUELLE

& ORGANISATIONELLE

14
Introduction :

La modélisation conceptuelle et organisationnelle constitue une étape importante dans la

convergence des notations utilisées dans le domaine de l’analyse de conception objet
puisqu’elle représente une synthèse pour notre système.

Dans ce chapitre nous commençons par le modèle conceptuel détaillé de notre

application, ensuite nous exposons le modèle logique des données. Enfin nous clôturons
ce chapitre par une conclusion.

1. Modélisation Conceptuelle

Le Modèle conceptuel de données est une représentation statique du système

d’information. Il a comme objectif de constituer une représentation claire et cohérente
des données manipulées dans le système d’information.

Cette section, sera présentée comme suit : nous commençons par le choix de la
méthodologie de conception et justification. Ensuite nous identifions les acteurs et les
diagrammes des cas d’utilisation, puis nous présentons le diagramme de classe,
diagramme de collaboration et enfin les diagrammes d’état transition.

1.1. Choix de la méthodologie de conception :

Dans la cadre de notre projet, nous avons opté pour le langage UML comme une
approche de conception. Ci-dessous, nous présentons ce langage puis nous justifions
notre choix.

1.1.1. Présentation d’UML :

UML (Unified Modeling Language) est un langage formel et normalisé en termes de
modélisation objet. Son indépendance par rapport aux langages de programmation, aux
domaines de l’application et aux processus, son caractère polyvalent et sa souplesse ont
fait lui un langage universel. En plus UML est essentiellement un support de
communication, qui facilite la représentation et la compréhension de solution objet. Sa
notation graphique permet d’exprimer visuellement une solution objet, ce qui facilite la
comparaison et l’évaluation des solutions. L’aspect de sa notation, limite l’ambigüité et
les incompréhensions.

15
 Diagrammes de cas d'utilisation : identifient les utilisateurs du système (acteurs) et leurs
interactions avec le système.

 Diagrammes de classes : représentent des collections d'éléments de modélisation

statiques (classes, paquetages...), qui montrent la structure d'un modèle.
 Diagrammes de séquence : permettent de représenter des collaborations eu objets selon
un point de vue temporel, on y met l'accent sur la chronologie (envois de messages).

La conception de notre interface a été élaborée en suivant la démarche suivante :

 L'élaboration des diagrammes de cas d'utilisation. Cette étape a été réalisée à la suite de
la

Spécification fonctionnelle de l’application.

 Recensement des classes candidates et élaboration du diagramme des classes.

 Dresser les diagrammes de collaboration et de séquences pour mettre en évidence

interactions entre les différents objets du système.
 Elaborer le diagramme d'états-transitions pour montrer les différents états l'interface.

1.2. Diagramme des cas d’utilisation

Les cas d’utilisation décrient un ensemble d’actions réalisées par le système, en réponse
à une action d’un acteur.

1.2.1. Identification des acteurs

L’étudiant, professeur et l’administrateur sont les acteurs qui interagissent avec notre
système.

 Etudiant : assiste à une formation dans le salon de formation.

 Professeur : anime à une formation dans le salon de formation.

 Administrateur : c’est le responsable de l’administration du site de téléformation.

1.2.2. Identification des cas d'utilisation

Nous décrivons pour chaque acteur les cas d’utilisation. On distingue les cas d'utilisation
suivants :

16
 Etudiant :

 S’inscrire au site

 S’authentifier

 Gérer son profil (mettre à jour ses informations personnels)

 Ajouter un code de groupe

 Consulter la liste des groupes ajouté

 Réclamer un problème

 Partager des documents dans le groupe

 Discuter avec les professeur au cours d’une formation

 Uploader un cours

 Uploader et télécharger des documents.

Professeur :

 S’inscrire au site de formation

 S’authentifier

 Gérer son profil (mettre à jour ses informations Personnels et la liste des groupes)

 Création d ‘ un code de groupe

 Consulter la liste des groupes creé

 Réclamer un problème

 Partager des documents dans le groupe

 Discuter avec les etudiants au cours d’une formation

 Uploader un cours

 Uploader et télécharger des documents.

Administrateur :

 Authentifier

 Consulter la liste des utilisateurs

 Répondre aux réclamations

17
 Consulter la liste des formations existantes

 Supprimer l’utilisateur non actif (etudiant, professeur) ;

Pour simplifier notre diagramme de cas d'utilisation, nous avons procédé à sa

décomposition en trois diagrammes :

Figure 5: Diagramme de cas d'utilisation pour l'administrateur

 Diagramme qui concerne les activités de l ‘administrateur

Figure 6: Diagramme de cas d'utilisation pour l’utilisateur

18
 Diagramme qui concerne les activités de l’utilisateur
Classe Utilisateur :

Attributs :

- id_utilisateur : int

- nom : string

- prenom : string

- email : string

- mot_de_passe : string

- Role : string

Méthodes :

- authentification() : void

- ajoutCodeGroupe() : void

- creationCodeGroupe() : void

- envoyerMessageDiscussion() : void

- partagerDocumentEtudiant() : void

Classe Etudiant :

Attributs :

- id_etudiant : int

- matricule : string

Classe Professeur :

Attributs :

- id_professeur : int

- specialite : string

19
Classe Admin

Attributs :

- id_admin : int

- role : string

Méthodes :

- consulterGroupes() : void

- consulterNombreEtudiantsProfesseurs() : void

- RepondreEtudiant() : void

Ce diagramme de classes illustre la structure de notre système d'e-learning, en décrivant

les différentes entités et leurs relations. Les utilisateurs peuvent être des étudiants, des
professeurs ou des administrateurs, chacun avec des attributs et des fonctionnalités
spécifiques. Les méthodes définies dans la classe Utilisateur permettent d'accéder aux
fonctionnalités principales du système, telles que l'authentification, la gestion des
groupes, la messagerie et le partage de documents. Les classes Etudiant, Professeur et
Admin étendent la classe Utilisateur et ajoutent des attributs et des fonctionnalités
supplémentaires correspondant à leurs rôles respectifs dans le système.

Figure 7: Représentation du diagramme de classe

20
1.3. Diagrammes de séquences

Les diagrammes de séquences représentent les interactions entre les objets en indiquant
la chronologie des séquences. Les diagrammes de séquences ajoutent une dimension
temporelle aux diagrammes de collaborations.

1.3.1. Diagramme de séquence : « Authentification »

Le diagramme de séquence « Authentification » présente le séquencement des

Interactions entre utilisateur, l’interface d’authentification, l’entité utilisateur et

l’interface de Profil.

Figure 8: Diagramme de séquence d’authentification

21
 1.3.2. Diagramme de séquence : « Inscription au site »

Le diagramme de séquence d’inscription au site présente le séquencement des

interactions entre utilisateur, l’interface d’inscription et l’entité Utilisateur.

Utilisateur

Figure 9: Diagramme de séquence « Inscription au site»

1.3.3. Diagramme de séquence : « Ajout de code d’un groupe » :

- L'utilisateur lance l'action d'ajout de code pour un groupe.

- Le système génère un code unique pour le groupe à partir de la base de données.

- Le système renvoie le code généré à l'utilisateur.

- L'utilisateur reçoit le code et procède à son ajout dans le groupe concerné.

- Le système enregistre le code ajouté dans la base de données pour ce groupe.

- Le processus d'ajout de code pour ce groupe est terminé.

22
 Figure 10: Diagramme de séquence << Créer code groupe>>

Conclusion :
Dans cette partie, nous avons réalisé la modélisation organisationnelle et logique de
notre application. Cette modélisation nous a permis de dégager le modèle logique des
données qui sera exploité lors de l’implémentation. Ce modèle sera transformé en
modèle physique de données qui fera l’objet du chapitre suivant.

23
Chapitre III

Réalisation

24
 3.1 Introduction
Après avoir élaboré la conception de notre application, nous abordons dans ce chapitre le
dernier volet de ce rapport, qui a pour objectif d'exposer la phase de réalisation.

La phase de réalisation est considérée comme étant la concrétisation finale de toute la

méthode de conception.

Nous menons tout d’abord une étude technique où nous décrivons les ressources
logicielles utilisées dans le développement de notre projet. Nous présentons en premier
lieu notre choix de l’environnement de travail, où nous spécifions l’environnement
matériel et logiciel qu‘on a utilisé pour réaliser notre application puis nous détaillons
l’architecture, aussi nous présentons quelques interfaces réalisées pour illustrer le
fonctionnement de quelques activités du système.

3.2 Etude technique

L'étude technique est une phase d'adaptation de conception à l'architecture technique.
Elle a pour objectif de décrire au plan fonctionnel la solution à réaliser d'une manière
détaillée ainsi que la description des traitements. Cette étude, qui suit l'étude détaillée,
constitue le complément de spécification informatique nécessaire pour assurer la
réalisation du futur système. Cette étude permet également de déterminer :

 La structure informatique de la base de données,

 L'architecture des programmes,

 La structure de chaque programme et l'accès aux données.

3.2.1 Environnement de réalisation

Pour la réalisation de notre application, nous avons eu recours à plusieurs moyens
matériels et logiciels :

[Link] Matériels de base :

Le développement de l’application est réalisé via un ordinateur portable ayant les

Caractéristiques suivantes :

25
 Caractéristique MSI KATANA
Marque MSI
Processeur Gen Intel(R) Core(TM)
RAM 16GO
Disque dur 500 GO
Système d’exploitation Microsoft Windows 11

Tableau 2: Matériel de base

[Link] Choix des langages de développement et de SGBD :

HTML

- Il est utilisé afin de créer et de représenter le contenu d'une page web

CSS

- Le CSS correspond à un langage informatique permettant de mettre en forme des

pages web (HTML ou XML). Ce langage est donc composé des fameuses « feuilles
de style en cascade » également appelées fichiers CSS

JavaScript

- JavaScript est un langage de programmation de scripts principalement employé dans

les pages web interactives et à ce titre est une partie essentielle des applications web.
Avec les langages HTML et CSS, JavaScript est au cœur des langages utilisés par les

26
 développeurs web

ThreeJs :

- [Link] est une bibliothèque JavaScript pour créer des scènes 3D dans un
navigateur web. Elle peut être utilisée avec la balise canvas du HTML5 sans avoir
besoin d'un plugin. Le code source est hébergé sur le GitHub de son créateur
mrDoob.

PHP :

- PHP: Hypertext Preprocessor, plus connu sous son sigle PHP, est un langage de
programmation libre, principalement utilisé pour produire des pages Web
dynamiques via un serveur web, mais pouvant également fonctionner comme
n'importe quel langage interprété de façon locale. PHP est un langage impératif
orienté objet.

Apache :

- Le logiciel libre Apache HTTP Server est un serveur HTTP créé et maintenu au sein
de la fondation Apache. Jusqu'en avril 2019, ce fut le serveur HTTP le plus populaire
du World Wide Web. Il est distribué selon les termes de la licence Apache

Vite :

- Vite est un serveur de développement local écrit par Evan You, le créateur de [Link],
et utilisé par défaut par Vue et pour les modèles de projets React. Il prend en charge
TypeScript et JSX. Il utilise Rollup et esbuild en interne pour le regroupement

27
 MySQL:

- MySQL(My Structured Query Langage-Langage de requêtes structuré) est un

système de gestion de bases de données relationnelles dédiées Open source. Il est
très rapide, fiable et facile à utiliser et [Link] a été développé à l’origine pour gérer
des très grandes bases de données beaucoup plus rapidement que des solutions déjà
établies. Il offre un ensemble de

[Link] Outil de développement :

Les principaux outils qui ont contribué à la qualité du développement sont :

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é

XAMPP:

XAMPP est un ensemble de logiciels permettant de mettre en place un serveur Web

local, un serveur FTP et un serveur de messagerie électronique. Il s'agit d'une
distribution de logiciels libres offrant une bonne souplesse d'utilisation, réputée pour son
installation simple et rapide.

3.3 Production des programmes

3.3.1 Descriptif du produit :

Description du produit :

28
 Notre projet, une plateforme d'apprentissage en ligne dédiée à l'EPI Digital School, est
composé de plusieurs fonctionnalités pour répondre aux besoins des étudiants, des
professeurs et de l'administration :

Gestion des utilisateurs :

- Permet l'authentification des utilisateurs, notamment des étudiants, des professeurs et

des administrateurs.

- Permet à l'administrateur d'ajouter des utilisateurs à des groupes spécifiques.

Gestion des groupes :

- Permet aux professeurs de créer des groupes pour leurs cours.

- Permet aux étudiants de rejoindre des groupes et de participer aux discussions.

Communication :

- Permet l'envoi de messages dans des discussions entre étudiants et professeurs.

- Permet aux étudiants de partager des documents avec d'autres étudiants dans les groupes.

Administration :

- Permet à l'administrateur de consulter le nombre de groupes créés.

- Permet à l'administrateur de consulter le nombre d'étudiants et de professeurs inscrits.

- Permet à l'administrateur de répondre aux étudiants en cas de problème ou de question.

Cette plateforme vise à faciliter la communication et la collaboration entre les différents

acteurs de l'EPI Digital School, tout en offrant une gestion efficace des cours et des
ressources pédagogiques.

3.3.2 Architecture

Couche de présentation (Frontend) :

- Interface utilisateur interactive développée en utilisant HTML, CSS et JavaScript (y

compris [Link] pour les éléments 3D).

- Conception responsive pour une expérience utilisateur optimale sur différents appareils.

- Utilisation de bibliothèques ou frameworks JavaScript comme [Link], [Link] ou

AngularJS pour la gestion de l'interface utilisateur dynamique.

Couche d'application (Backend) :

29
- Développement du côté serveur en utilisant PHP pour la logique métier.

- Utilisation du serveur web Apache pour le déploiement de l'application.

- Intégration avec une base de données MySQL pour le stockage et la gestion des
données.

- Implémentation des fonctionnalités d'authentification, d'autorisation, de gestion des

utilisateurs, des groupes, des cours et des messages.

Infrastructure :

- Déploiement de l'application sur un serveur local utilisant XAMPP, qui comprend

Apache, MySQL, PHP et phpMyAdmin.

- Hébergement sur un serveur cloud pour assurer la disponibilité et la scalabilité de la

plateforme si nécessaire.

- Utilisation de solutions de déploiement continu pour automatiser le processus de

déploiement et garantir la qualité du code.

Cette architecture vous permettra de développer une plateforme d'apprentissage en ligne

robuste et évolutive, tout en offrant une expérience utilisateur interactive et immersive
grâce à l'utilisation de [Link] pour les éléments 3D.

3.4.1 Charte graphique

3.4.2 Arrière-plan et texte
Nous avons opté pour un fond noir et un texte blanc ou de couleur sombre sur notre site
web. Cette décision est basée sur des études montrant que les sites conçus avec un fond
noir connaissent souvent plus de succès. De nombreux moteurs de recherche et
boutiques en ligne utilisent également des fonds noirs. Le choix du fond noir évoque la
simplicité du papier, ce qui offre au lecteur une impression de sérieux, de sobriété, de
détachement et d’objectivité. En utilisant du texte blanc ou des couleurs sombres, nous
cherchons à garantir un confort de lecture optimal pour nos utilisateurs.

3.4.3 Présentation des interfaces

Après les phases d’étude de l’existant, la conception et la modélisation fonctionnelle et

organisationnelle nous avons développé les interfaces de notre application

30
 la page d’accueil de notre application, à partir de cette interface, si internaute est un
nouveau utilisateur il a la possibilité de créer son compte ou s’authentifier

Les interfaces de notre application sont présentées sous forme de lien :

- Login : qui amène l’utilisateur à la page d ‘authentification

- Sign-up : qui amène l’utilisateur à la page d’inscription

- Objet-3D: Objet 3D que l'utilisateur peut faire tourner avec la souris.

Figure 11:La page d’accueil

La page d’inscription contient des inputs pour les informations nécessaires pour créer
votre compte :

- Email : [Espace pour saisir votre adresse e-mail]

- Mot de passe : [Espace pour saisir votre mot de passe]

- Nom : [Espace pour saisir votre nom]

31
- Prénom : [Espace pour saisir votre prénom]

- Statut : [Sélectionnez votre statut parmi les options suivantes : Étudiant / Professeur]

Une fois tous les champs remplis, cliquez sur le bouton "S'inscrire".

Après avoir cliqué sur le bouton "S'inscrire", vous serez redirigé vers la page de
connexion où vous pourrez utiliser vos identifiants nouvellement créés pour accéder à
notre plateforme.

Figure 12: interface Inscription

Après validation de ses informations et création de son profil, l’utilisateur sera redirigé
vers l’interface de connexion

32
 Figure 13: Interface d’authentification
Sur cette page, vous allez pouvoir vous connecter à notre plateforme d'e-learning en
utilisant une expérience visuelle immersive et innovante.

Imaginez-vous plongé dans un espace virtuel où chaque élément réagit à vos actions de
manière dynamique. Vous verrez des formes géométriques en mouvement, des
animations fluides et des effets visuels captivants.

Pour vous connecter, suivez ces étapes :

- Cliquez sur le champ vide du courriel pour commencer à saisir votre adresse
électronique.

- Observez comment le formulaire se déplace de manière fluide vers la gauche pour vous
offrir un espace optimal pour entrer vos informations.

- Remplissez les champs avec votre courriel et votre mot de passe.

- Une fois vos informations saisies, cliquez sur le bouton "Se connecter".

- Si vos informations sont correctes, vous serez redirigé vers notre plateforme d'e-
learning.

- En revanche, si vos informations sont incorrectes, observez comment le formulaire

réagit en se déplaçant vers la gauche et vers la droite, indiquant ainsi que quelque chose
n'est pas correct. Vous pourrez alors corriger vos informations et réessayer.

- Profitez de cette expérience immersive et engageante pour accéder à notre plateforme

33
 Figure 14: Interface d’admin
Profile Administrateur :

- Dans cette section, l'administrateur peut gérer les utilisateurs, les groupes, et les
réclamations.

Dashboard:

- Le dashboard de l'administrateur offre une vue d'ensemble des activités importantes du

système.

Tableau des Étudiants Inscrits :

- Ce tableau présente une liste des étudiants inscrits dans le système, avec des détails tels
que leur nom, prénom, et autres informations pertinentes.

Tableau des Professeurs :

- Ce tableau affiche les professeurs enregistrés dans le système, avec des informations
telles que leur spécialité et leur statut.

Tableau des Groupes Créés:

- Ce tableau répertorie les différents groupes créés dans le système, avec des détails sur
les membres et les activités de chaque groupe

Réclamations :

- Dans cette section, l'administrateur peut consulter et répondre aux réclamations émises
par les étudiants ou les professeurs.

34
 Figure 15: Interface d’étudiant

Rejoindre un groupe fermé :

Les étudiants ont la possibilité de rejoindre des groupes fermés, qui sont destinés à des
cours spécifiques ou à des projets de groupe. Sur l'interface, un formulaire clairement
visible permet aux étudiants d'entrer un code fourni par leur professeur pour accéder à un
groupe fermé. Une fois le code saisi et validé, l'étudiant est automatiquement ajouté au
groupe correspondant.

Créer un groupe avec un générateur de code :

Pour les projets de groupe ou les discussions spécifiques à une spécialité, les étudiants
ont également la possibilité de créer leurs propres groupes. Sur l'interface, un formulaire
de création de groupe est disponible, où les étudiants peuvent spécifier le nom du
groupe, la spécialité associée et d'autres détails pertinents. Un générateur de code intégré
génère un code unique pour le groupe, qui peut être partagé avec d'autres étudiants
souhaitant rejoindre le groupe

35
 Figure 16:Interface d’ajout de code de groupe

Interface du formulaire :

Le formulaire d'ajout de code présente une interface conviviale pour les étudiants. Il
comprend deux éléments principaux : un champ de saisie (input) et un champ de texte
(text) pour le code du groupe. Le champ de saisie est conçu pour permettre aux étudiants
de taper ou de coller le code fourni par leur professeur, tandis que le champ de texte
affiche le code saisi afin de permettre une vérification avant l'ajout.

Saisie du code :

L'étudiant peut entrer le code dans le champ de saisie à l'aide du clavier ou en le copiant
depuis une source externe. Le formulaire est conçu pour accepter différents formats de
code, en veillant à ce que l'étudiant puisse facilement saisir le code sans rencontrer de
problèmes de formatage.

Validation et ajout au groupe fermé :

Une fois que l'étudiant a saisi le code dans le champ de saisie, il peut cliquer sur le
bouton "Ajouter" pour soumettre le code. Le formulaire vérifie alors si le code est valide
et correspond à un groupe fermé existant. Si le code est valide, l'étudiant est

36
automatiquement ajouté au groupe fermé correspondant, ce qui lui permet d'accéder aux
ressources et aux discussions spécifiques à ce groupe.

Figure 17:Interface de creation de groupe

Interface du formulaire :

Le formulaire de création de groupe présente une interface simple et intuitive pour les
étudiants. Il comprend deux champs de saisie (input) : un pour le nom du groupe et un
autre pour la spécialité. Les étudiants peuvent facilement taper le nom du groupe et
sélectionner la spécialité correspondante à partir d'une liste déroulante.

Saisie du nom du groupe et de la spécialité :

L'étudiant peut entrer le nom du groupe dans le champ de saisie dédié. Il peut choisir un
nom qui représente clairement l'objectif ou le sujet du groupe. Dans le champ de saisie
de la spécialité, l'étudiant peut sélectionner la spécialité à laquelle le groupe est associé à
partir d'une liste déroulante. Cela permet de regrouper les groupes par domaine d'études,
facilitant ainsi la recherche pour les autres étudiants intéressés par cette spécialité.

Génération du code unique :

Une fois que l'étudiant a saisi le nom du groupe et sélectionné la spécialité, il peut
cliquer sur le bouton "Création" pour générer un code unique pour le groupe. Le
générateur de code intégré crée un code alphanumérique unique qui sera utilisé pour

37
identifier le groupe. Ce code sera ensuite partagé avec d'autres étudiants souhaitant
rejoindre le groupe.

Confirmation de la création du groupe :

Après avoir cliqué sur le bouton "Création", le formulaire affiche un message de

confirmation indiquant que le groupe a été créé avec succès. Le message peut également
inclure le code généré pour le groupe, permettant à l'étudiant de le partager facilement
avec d'autres étudiants intéressés.

Figure 18: Interface de professeur

Rejoindre un groupe fermé :

Les professeurs ont la possibilité de rejoindre des groupes fermés, qui sont destinés à des
cours spécifiques ou à des projets de groupe. Sur l'interface, un formulaire clairement
visible permet aux professeurs d'entrer un code fourni par leurs étudiants pour accéder à
un groupe fermé. Une fois le code saisi et validé, le professeur est automatiquement
ajouté au groupe correspondant.

Créer un groupe avec un générateur de code :

Pour les projets de groupe ou les discussions spécifiques à une spécialité, les professeurs
ont également la possibilité de créer leurs propres groupes. Sur l'interface, un formulaire

38
de création de groupe est disponible, où les professeurs peuvent spécifier le nom du
groupe, la spécialité associée et d'autres détails pertinents. Un générateur de code intégré
génère un code unique pour le groupe, qui peut être partagé avec d'autres étudiants
souhaitant rejoindre le groupe

Figure 19: Interface de discussion de groupe

Interface conviviale :

L'interface de discussion de groupe est conçue de manière conviviale, offrant une

expérience utilisateur fluide et intuitive. Elle présente une mise en page claire avec une
liste des groupes disponibles, permettant aux étudiants et aux professeurs de rejoindre ou
de créer des groupes spécifiques à leurs domaines d'intérêt ou à leurs cours. Les
discussions de groupe sont organisées de manière structurée, facilitant la navigation et la
participation active.

Discussions en temps réel :

L'interface de discussion de groupe permet des échanges en temps réel entre les
étudiants et les professeurs. Les participants peuvent publier des messages, poser des

39
questions, partager des idées et répondre aux contributions des autres membres du
groupe. Cette fonctionnalité encourage l'engagement actif et favorise les interactions
collaboratives, permettant aux membres d'apprendre les uns des autres et de bénéficier
de diverses perspectives.

Partage de documents PDF et fichiers :

En plus des discussions textuelles, l'interface de discussion de groupe facilite le partage

de documents PDF et d'autres fichiers à extension variée. Les étudiants et les professeurs
peuvent télécharger et partager des documents pertinents tels que des notes de cours, des
présentations, des exercices ou des articles académiques. Cela permet un accès facile aux
ressources nécessaires et encourage la collaboration basée sur des supports visuels ou
écrits.

Prévisualisation et téléchargement des fichiers :

Les fichiers partagés dans les discussions de groupe sont présentés avec des aperçus
pour faciliter l'identification et la sélection des fichiers pertinents. Les membres du
groupe peuvent prévisualiser les documents PDF et les autres fichiers avant de les
télécharger. En cliquant sur un fichier, il s'ouvre dans une nouvelle fenêtre ou se
télécharge directement sur l'appareil de l'utilisateur, selon les paramètres de sécurité et
les préférences de l'utilisateur.

Conclusion:
Dans ce chapitre, nous avons pu présenter l’environnement et le processus de
développement. Nous avons exposé ainsi le résultat de développement à l’aide des
aperçus écran. Nous avons clôturé par une évaluation du travail réalisé.

40
 Conclusion et Perspectives

Le projet PFA (Projet de Fin d'Études) de l'Université EPI Digital School offre une
solution complète et innovante pour faciliter l'apprentissage en ligne et la collaboration
entre étudiants et professeurs. L'interface de discussion de groupe permet aux utilisateurs
de partager des idées, de poser des questions et de partager des ressources, tout en
favorisant l'engagement actif et la coopération. De plus, la fonctionnalité de partage de
documents PDF et de fichiers divers améliore l'accès aux ressources et facilite la
collaboration basée sur des supports visuels et écrits. Ce projet PFA démontre
l'engagement de l'Université EPI Digital School envers l'innovation pédagogique et la
transformation numérique de l'enseignement supérieur. Il offre une solution pratique et
efficace pour répondre aux besoins croissants des étudiants et des professeurs en matière
de collaboration en ligne, d'échange de connaissances et d'accès aux ressources.

Perspectives:

 Le projet PFA de l'Université EPI Digital School offre de nombreuses perspectives

d'amélioration et de développement futur. Voici quelques pistes à explorer :

 Amélioration de l'interface utilisateur : Continuer à améliorer l'interface de discussion de

groupe en tenant compte des retours des utilisateurs et en intégrant des fonctionnalités
conviviales pour une expérience utilisateur optimale.

 Intégration d'outils de collaboration supplémentaires : Ajouter des fonctionnalités

supplémentaires telles que des tableaux blancs interactifs, des sondages, des quiz ou des
salles de réunion virtuelles pour enrichir davantage la collaboration entre les étudiants et
les professeurs.

 Intégration d'un système de notifications : Mettre en place un système de notifications

pour informer les utilisateurs des nouvelles discussions, des réponses aux messages et
des mises à jour des fichiers partagés, afin de favoriser une communication en temps
réel.

 Suivi des activités et des performances : Intégrer un système de suivi des activités des
utilisateurs et des performances pour permettre aux professeurs de suivre la participation
des étudiants, de fournir des commentaires personnalisés et de mesurer l'efficacité des
discussions de groupe.

41
 Intégration d'un moteur de recherche : Mettre en place un moteur de recherche pour
faciliter la recherche de discussions antérieures, de messages spécifiques ou de
documents partagés, afin d'améliorer l'accessibilité et la récupération d'informations.

En explorant ces perspectives, le projet PFA de l'Université EPI Digital School

continuera de s'adapter aux besoins changeants des utilisateurs et de fournir une
plateforme d'apprentissage en ligne de qualité, favorisant ainsi une expérience éducative
enrichissante et collaborative.

42
 Webographie

- [Link]

- [Link]

- [Link]

- [Link]

Glossaire

CSS :Cascading Style Sheet-feille de style en cascade

FOAD : formation ouverte et/ou à distance

HTTP: Hypertext Transfer Protoco
MVC :Modele-Vue-Controleur
UML:Unified Modeling Language
RTMP: Real-Time Messaging Protocol
RIA : Rich Internet Application
XML : eXtensible Markup Language

43
 BIBLIOGRAPHIE & Webliographie

 [Bouillon, Bourdin, 2005]: Bouillon J-L., Bourdin S. La réduction de la « fracture

numérique » aux prises avec le pilotage d’un projet : les TICE entre rationalisation
économique et rationalisation pédagogique. Communication au colloque organisé par
l’Institut supérieur de la documentation (ISD) L’information numérique et les enjeux de
la société de l’information, Université La Manouba, Tunis, 14-16 avril 2005

 [VIEIRA ET AL 07] : Lise Vieira , Soufiane Rouissi , Nathalie Pinède- Wojciechowski «

TICE Méditerranée 2007 »

 [Aur 09]: «Programmation FLEX 3 Applications Internet riches avec Flash

ActionScript 3, MXML et Flex Builder »

[1] [Link]
[2] [Link]
[3] [Link]
[Link]
[4] [Link]/contents/xml/xmlintro.php3
[5] [Link]
[6] [Link]
[7] [Link]
[8] [Link]
[9] [Link]
[10] [Link]
[11] [Link]

44
 Titre : « Conception et réalisation d’une plateforme d’E-
learning »

Résumé :

Ce projet consiste à réaliser une plateforme d’apprentissage en ligne. L’objectif de

notre projet de fin d’études est de développer une interface web d’un salon de
téléformation. Ce travail a été développé au sein de la société Genie-Consulting et il est
principalement destiné aux formateurs désirants animer une formation à distance et aux
apprenants cherchants à assister une téléformation.

Mots clés : Apprentissage en ligne, pilotage à distance, architecture MVC, MXML,

Flex, RED5, Streaming

Title: « Design and implementation of a platform of E-learning »

Abstract :

This project consists in installing a platform of E-learning .The objective of our final
project is to develop a web interface to training fair

This work was developed within Genie-Consulting company and it is principally

intended to trainers desiring animate a distance learning and to learners to attend a
cherchants teletraining.

Keywords : E-learning, remote control , architecture MVC, MXML, Flex, RED5,

Streaming

45
 ‫اﻟﻌﻨﻮان»‪ :‬ﺗﺼﻤﯿﻢ وإﻧﺠﺎز ﻣﻨﻈﻮﻣﺔ ﻟﻔﺎﺋﺪة اﻟﺘﻌﻠﻢ ﻋﻦ ﺑﻌﺪ «‬

‫اﻟﺨﻼﺻﺔ‪:‬‬

‫ھﺬا اﻟﻤﺸﺮوع ﻣﻮﺟﮫ ﻹﻧﺠﺎز ﻣﻨﻈﻮﻣﺔ ﻟﻔﺎﺋﺪة اﻟﺘﻌﻠﻢ ﻋﺒﺮ اﻻﻧﺘﺮﻧﺖ‪ .‬اﻟﮭﺪف ﻣﻦ ھﺬا اﻟﻤﺸﺮوع ﻟﺨﺘﻢ اﻟﺪروس ھﻮ ﺗﺼﻤﯿﻢ‬
‫وﺑﺮﻣﺠﺔ‬

‫ﻣﻮﻗﻊ ﻟﻐﺮﻓﺔ ﺗﻌﻠﻢ ﻋﻦ ﺑﻌﺪ‪.‬‬

‫ھﺬا اﻟﻤﺸﺮوع ﺗﻢ إﻧﺠﺎزه ﻟﻔﺎﺋﺪة ﺷﺮﻛﺔ ﺟﻨﻲ ﻛﻮﻧﺴﻠﺘﯿﻨﻎ وھﻮ ﻣﻮﺟﮫ ﺑﺎﻷﺳﺎس إﻟﻰ اﻟﻤﺪرﺳﯿﻦ اﻟﺬﯾﻦ ﯾﺮﻏﺒﻮن ﻓﻲ ﺗﻨﺸﯿﻂ‬
‫دروس‬

‫ﻋﻦ ﺑﻌﺪ وإﻟﻰ اﻟﻤﺘﻌﻠﻤﯿﻦ اﻟﺬﯾﻦ ﯾﺒﺤﺜﻮن ﻋﻦ ﻣﺜﻞ ھﺬا اﻟﻨﻤﻂ ﻣﻦ اﻟﺪروس‪.‬‬

‫ﻛﻠﻤﺎت اﻟﻤﻔﺎﺗﯿﺢ‪:‬اﻟﺘﻌﻠﻢ ﻋﻦ ﺑﻌﺪ‪،‬اﻟﺘﺤﻜﻢ ﻋﻦ ﺑﻌﺪ‪،‬أﺳﻠﻮب "م ف س"‪،‬ﻣﺈﻛﺴﻤﻞ‪ ،‬ﻓﻠﻜﺲ ‪،‬راد‪ ،5‬ﺳﺘﺮﯾﻤﯿﻨﻎ‬

‫‪46‬‬
47