Ddicaces

Du profond de mon cur de ddie ce travail tout ceux qui me son cher,
A MES CHERS PARENTS
Que ce travail soit lexpression de ma reconnaissance pour vos sacrifices, consentis, votre
soutien moral et matriel que vous navez cess de prodiguer.
Vous avez tout fait pour mon bonheur et ma russite.

Que dieu vous prserve en bonne sant et vous accorde une longue vie.
A MES FRRES ET SURS
Vous tiez toujours prsents pour maider et mencourager.
Sachez que vous serez toujours les meilleurs.
A MES AMIS (ES)
Vous navez jamais cess de me soutenir et de mencourager.
Que cette russite soit la mienne et l votre.

Remerciements
Jexprime mes profondes gratitudes et respectueuse reconnaissance mon encadrant

pdagogique :Mr. Habib BENLAHMAR pour son encadrement, ses connaissances dans le
domaine de lingnierie informatique, pour tout le temps quil ma octroy et pour tout les

conseils quil ma prodigus.

Je remercie tout ceux qui ont contribus de prs ou de loin au bon droulement de mon projet,
spcialement Mr. Hassan BAADI pour ses encouragements, ses ides et sa contribution au le

projet.

Je remercie aussi mon encadrant de la socitCCPRO MAROC, Mr. Brahim

NASROALLAH davoir eu lamabilit de mencadrer, pour ses directives prcieuses et pour

la qualit de son suivi durant toute la priode de mon projet.

Avant propos :
Ce projet entre dans le cadre de la prparation dun mmoire de fin dtudes
en vue de lobtention du diplme dIngnieur en Informatique en Web,
Multimdia et Rseaux au sein de lInstitut Suprieur du Gnie Appliqu
de RABAT. Cest ainsi que jai loccasion de prparer mon projet de fin
dtude sous le sujet de la Conception et la ralisation dune plateforme Elearning propos par la socit CCPRO Maroc Casablanca. Ce projet est
dun apport trs bnfique vis--vis du perfectionnement de mes
connaissances dans le domaine informatique et pour avoir lopportunit

dappliquer des connaissances thoriques acquises tout au long du cursus

universitaire dans un cadre professionnel.

Table des matires

Ddicaces ........................................................................................................................... 1
Remerciements .................................................................................................................. 2
Avant propos : .................................................................................................................... 3
Introduction gnrale ......................................................................................................... 6
Chapitre 1 : tude pralable ............................................................................................... 8
1. CCPRO MAROC ........................................................................................................ 9
1.1.
propos ...................................................................................................................................... 9
1.2.
Approche pdagogique ............................................................................................................... 9
1.3.
Certifications ............................................................................................................................. 10
2. Introduction .......................................................................................................... 12
3. Recueil .................................................................................................................. 12
3.1. Dfinition du champ dtude ............................................................................... 12
3.1.1. E-Learning ................................................................................................................................. 12
3.1.2. Web Confrence ....................................................................................................................... 13
3.1.3. Tlassistance ........................................................................................................................... 13
3.2. Objectifs atteindre et publiques cible .............................................................. 13
3.3. Planning prvisionnel .......................................................................................... 14
4. tude de lexistant ................................................................................................ 14
4.1. Analyse de lexistant ............................................................................................ 15
4.1.1. SKYPE ........................................................................................................................................ 15
4.1.2. Adobe connect .......................................................................................................................... 15
4.1.3. TeamViewer .............................................................................................................................. 15
4.1.4. AppearIn ................................................................................................................................... 16
4.1.5. Microsoft Virtual Academy (MVA) ............................................................................................ 16
4.2. Critiques de lexistant .......................................................................................... 16
4.2.1. SKYPE ........................................................................................................................................ 16
4.2.2. Adobe connect .......................................................................................................................... 16
4.2.3. TeamViewer .............................................................................................................................. 16
4.2.4. AppearIn ................................................................................................................................... 17
4.2.5. Microsoft Virtual Academy (MVA) ............................................................................................ 17
5. Proposition des diffrentes solutions .................................................................... 17
6. Conclusion ............................................................................................................ 18
Chapitre 2 : Modlisation conceptuelle & organisationnelle ............................................. 19
1. Introduction .......................................................................................................... 20
2. Modlisation ......................................................................................................... 20
3. Conduite de projet ................................................................................................ 20
4. Choix de la mthodologie de conception ............................................................... 20
4.1. La mthode 2TUP ................................................................................................ 20
4.2. Le processus unifi .............................................................................................. 21
4.3. Processus de modlisation avec UML ................................................................. 21
5. tude prliminaire ................................................................................................ 22
5.1. Prsentation du projet raliser ......................................................................... 22
5.2. Recueil des besoins fonctionnelles ...................................................................... 22
6. Diagrammes des cas dutilisation .......................................................................... 23
6.1. Identification des acteurs .................................................................................... 23
6.2. Identification des messages ................................................................................ 23

6.3. Modlisation du contexte ................................................................................... 24

7. Modlisation conceptuelle de donnes ................................................................. 26
7.1. Reprsentation des classes ................................................................................. 26
8. Modlisation organisationnelle ............................................................................. 27
8.1. Diagramme dactivit .......................................................................................... 28
9. Conclusion ............................................................................................................ 30
Chapitre 3 : Ralisation .................................................................................................... 31
1. Introduction .......................................................................................................... 32
2. Etude technique .................................................................................................... 32
2.1. Environnement de ralisation ............................................................................. 32
2.1.1. Choix des langages de dveloppement et de SGBD ................................................................. 32
2.1.2. Outils de dveloppement ......................................................................................................... 36
3. Modlisation Physique des donnes ..................................................................... 37
4. Production de la plateforme ................................................................................. 40
4.1. Descriptif ............................................................................................................. 40
4.2. Architecture ......................................................................................................... 41
4.3. Charte graphique ................................................................................................. 42
4.3.1. Responsive Web Design ............................................................................................................ 42
4.3.2. Structure de la Template .......................................................................................................... 43
4.3.3. Prsentation des interfaces ...................................................................................................... 44
5. Apports ................................................................................................................. 55
5.1. Apports au niveau des connaissances techniques .............................................. 55
5.2. Apports au niveau de la conception et du dveloppement ............................. 56
6. Conclusion .......................................................................................................... 56
Conclusion et Perspectives ............................................................................................... 57
Bibliographie. ................................................................................................................... 59
Annexes ........................................................................................................................... 60

Introduction gnrale
L'enseignement est un mode d'ducation permettant daider un tudiant dvelopper
ses connaissances par le biais dun ensemble de cours et dexercices au sein dun
tablissement. De nombreuses tudes constatent que les mthodes de l'enseignement
traditionnel nont pas chang depuis des lustres et ce, en dpit des changements et de
l'volution des moyens de communication.
Lenseignement traditionnel est centr sur des cours magistraux, les tudiant sont parfois
passifs, souvent absents du fait de la surcharge des cours, du fait de lennui au sein de
la classe ou autres circonstances. Les principaux moyens mis en uvre dans ce type
denseignement : un cours magistral associ des travaux dirigs et pratiques sur un
support papier/tableau la majorit des cas. L'amlioration du systme ducatif par le
recours aux moyens audiovisuels classiques (projections de diapositives, vido, etc.) n'a
pas rsolu le problme.
De nos jours, lenseignement exige des moyens pour faciliter l'apprentissage de
l'apprenant tels que les choix de contenus, llaboration d'outils pour aider l'lve
construire et s'approprier des savoirs et des savoir-faire.
Plusieurs solutions de formation existent sur le march, ces solutions proposent les
diffrentes fonctionnalits de base (communication audio, vido, Tchat, support ).
Cependant, elles possdent plusieurs inconvnients comme la lenteur au niveau du
temps de rponse du systme, le nombre limit des apprenants, le fait dinstaller dautres
applications complmentaires, etc.
Notre but est dappliquer une mthode rigoureuse de conduite dun projet rel. Le projet
en question concerne la ralisation dune plateforme E-Learning. Ce projet a pour objectif
principal de proposer une solution un problme concret, et ceci en partant dune
dfinition des besoins. Nous esprons travers celui-ci, dmontrer limportance de
lapplication dune mthodologie de dveloppement, et aussi permettre par la suite que
ce produit puisse tre volutif et facilement maintenable par des intervenants tiers
Lobjectif est de concevoir et de mettre en place un systme qui runi les diffrentes
fonctionnalits ncessaires une plateforme dapprentissage en ligne et compense les
inconvnients des solutions existants. Les principales parties dont ce projet est compos
sont :
La gestion des formations : permet lorganisation des formations ainsi que la
gestion des utilisateurs,
La web Confrence : cette partie reprsente une vitrine de formations qui offre les
fonctionnalises suivantes :
o Uploader le support dune formation,
o Utiliser des ressources audio et vido,
o Conversation textuelle(Tchat),
o Tlcharger et uploader des documents.
En ce qui concerne les perspectives, nous avons suggr :
o La tlassistance (accs distance aux machines des tudiants),
o La certification.
6

Dans le premier chapitre, un champ dtude de lapplication qui est lapprentissage en

ligne est expos. Une synthse des solutions existantes sur le march est mise en valeur
tout en discutant les avantages et les inconvnients de chacune delles. Puis, des
solutions sont proposes pour remdier aux problmes soulevs. Dans le deuxime
chapitre, Je dtaillerais la modlisation conceptuelle de la solution. Dans le troisime
chapitre, une tude technique dcrivant lenvironnement de dveloppement est
minutieusement prsente et enfin, les les diffrentes fonctionnalits de lapplication sont
prsentes travers des capture dcran.

Chapitre 1 : tude pralable

1. CCPRO MAROC
1.1.

propos

Nos consultants et formateurs sont des experts de leur domaine dintervention. Ils
allient comptences techniques et savoir-faire pdagogique. Ils sont, pour la plupart,
certifis par les principaux diteurs.
1.2.

Approche pdagogique

Notre processus dactions et denseignement CCPRO Maroc propose une large

palette de mthodes de formation :
Des mthodes traditionnelles classiques (inter-entreprises) aux formules sur mesure
(intra-entreprise, face face pdagogique, e-learning, coaching), notre quipe vous
oriente vers la solution pdagogique la plus pertinente et la mieux adapte vos
besoins de formation.
Chaque projet de formation dclenche un processus respectant une charte qualit
dont lobjectif est la constitution dun plan de formation dfini par plusieurs phases :
Audit et valuation :

Identification du savoir-faire
Identification des connaissances acqurir
Identification du degr dautonomie
Identification des carts et des objectifs prioritaires

Analyse de laudit :

Constitution de groupes de mtiers identiques

Constitution de groupes de fonctions identiques
Constitution de groupes de niveaux homognes

Adaptation des plans de cours :

A partir du rsultat de laudit

A partir de plans de cours rfrentiels
A partir de spcificits des mtiers concerns

Exercices de cours :

Dfinis partir des plans de cours et des objectifs atteindre

Communs lensemble des formateurs

Supports de cours :

Dfinis partir des plans de cours

Adapts aux spcificits de vos mtiers
9

 Ralisation de la formation :

Dfinition dun calendrier des sessions de formation

Formations spcifiques aux niveaux et mtiers

valuation de la formation :

valuation qualitative chaud de la formation

Actions dvaluation moyen ou long terme
Mesure des acquis

Suivi post formation :

Assistance tlphonique
Formations complmentaires
Lquipe formation
1.3.

Certifications

v Microsoft MOS (Microsoft Office Specialist):

CCPRO Maroc est le premier centre de
grce la formation et aux tests de certification.

test

Certiport

au

Maroc,

Pourquoi passer une certification ?

Grce aux programmes de certifications Microsoft Office Specialist, vous valorisez
votre exprience, vous apportez une lisibilit votre savoir-faire, vous donnez un coup
de pouce votre carrire.
La certification est un gage de qualit et de confiance.
Les certifications sont votre valeur ajoute.
La certification vous permet dtre reconnu sur le march.
La Certification Office est un examen qui vous permet dobtenir une certification
valorisante et reconnue par Microsoft sur les applications Microsoft Office : Word,
Excel, Access, PowerPoint et Outlook.

10

QUEST-CE QUE LA CERTIFICATION MICROSOFT OFFICE SPECIALIST ?

La certification MICROSOFT OFFICE est un examen qui vous permet dobtenir une
certification valorisante et reconnue par Microsoft sur les applications Microsoft
Office : Word, Excel, Access, Powerpoint, Outlook
Cette certification garantit un niveau de comptence sur ces applications.
Elle favorisera lvolution de votre carrire professionnelle car elle prouve que vous
savez exploiter entirement les fonctionnalits des applications Microsoft Office et
offrir ainsi un niveau de productivit lev votre employeur.
v Microsoft MTA (Microsoft Technology Associate)
v ADOBE ACA :
Les certifications sur les produits Adobe concernent 6 logiciels : PHOTOSHOP,
DREAMWEAVER, FLASH, PREMIERE PRO, ILLUSTRATOR et INDESIGN sur les
versions CS5 et CS6
Pour vous prparer ces certifications, CCPRO Maroc propose les stages suivants :
ACA Photoshop (20 Heures)
ACA Dreamweaver (20 Heures)
ACA Flash Animation (20 Heures)
ACA Premiere Pro (20 Heures)
ACA Illustrator (20 Heures)
ACA Indesign (20 Heures)

11

2. Introduction
Ltude pralable reprsente une tape prparatoire pour la ralisation dune application.
En effet, elle permet danalyser, dvaluer et de critiquer le fonctionnement usuel tout en
laborant une liste des solutions possibles. Ce chapitre sera rserv pour prsenter
ltude pralable du projet. En premier lieu, le champ de ltude et les objectifs atteindre
sont dfinis. Ensuite, une analyse concernant quelques solutions existantes sur le
march tout en discutant leurs avantages et leurs inconvnients est dcrite dans la 3me
partie de ce chapitre. Lanalyse et le critique de lexistant ont permis de cerner les
objectifs afin de dvelopper un produit de bonne qualit. Enfin, diffrentes solutions aux
problmes soulevs sont proposes.

3. Recueil
3.1.

Dfinition du champ dtude

L'utilisation des Technologies dInformation et de Communication TIC ou NTIC pour

les Nouvelles Technologies dInformation et de Communication, dans les processus de
transmission des connaissances fait dsormais partie de l'environnement fonctionnel et
intellectuel de plusieurs socits. De ce fait, de nouveaux concepts entre la production,
la diffusion et l'appropriation des contenus vocation pdagogique ont t labor pour
donner naissance de nouvelles logiques d'usage s'appuyant sur un accs une
information interconnecte, tant pour les enseignants que pour les apprenants.
Lappellation TIC a gnr une srie dannotations, parmi lesquelles on trouve les
technologies de linformation et de la communication ducatives TICE . Avec ces
derniers, je me suis intress plus particulirement limpacte port par les technologies
numriques dans le domaine de lducation. On peut dire que les TICE sont comme
toute autre application informatique participant au bon droulement dune formation, et
la transmission et la mise en commun des savoirs et des savoirs faire. Cela inclut les
services et applications informatiques utilisant la technologie du rseau internet des
fins denseignement ainsi que les dispositifs intgrs (dits plateformes, environnement
pdagogiques) disponibles partir de serveurs donnant par exemple accs des
applications de type visioconfrences, audioconfrences, chat, dition et stockage
dinformations pdagogiques, etc.. Afin de mieux comprendre le contexte de notre
futur systme nous dfinissons dans ce qui suit quelques notions relatives notre champ
d'tude.
3.1.1. E-Learning
Le E-Learning est lutilisation des nouvelles technologies multimdias pour amliorer la
qualit de lapprentissage en facilitant dune part laccs des ressources et des
services, dautre part les changes et la collaboration distance.
Le e-Learning est li des secteurs tels les grandes entreprises qui lutilisent pour former
et rafraichir les connaissances de leurs employs de manire plus rapide et cible, ou,
afin de minimiser les charges denseignement des universits en offrant des alternatives
de formation distance.

12

3.1.2. Web Confrence

Le web confrence permet de runir plusieurs collaborateurs autour d'une plateforme
virtuelle pour une runion de travail, des formations ou des sminaires. Tous les
participants, devant leurs ordinateurs sont munis d'une connexion internet,
communiquent et changent des donnes en temps rel et distance. La web
confrence permet un gain en temps et en argent. En contre partie, elle souffre de
problmes de confidentialit et de scurit sont les points faibles de ces solutions.
3.1.3. Tlassistance
L'assistance distance est une mthode permettant, depuis un ordinateur distant, de
prendre le contrle d'un autre ordinateur en visualisant l'cran de celui-ci et en le
manipulant grce au clavier et la souris. Cette assistance peut tre effectue sur des
ordinateurs et des serveurs avec certains logiciels.
Un bureau distance est une innovation technologique permettant d'accder son
ordinateur distant physiquement via un autre ordinateur local. Cette technologie est utile
pour :
Assistance distance (informatique),
Diagnostic (matriel),
Aides en ligne,
Configuration et paramtrage distance.
3.2.

Objectifs atteindre et publiques cible

Dans le cas o les contraintes de formation en prsentiel sont importantes (disponibilit,

les frais de dplacement, etc.), le concept de la formation distance offre des rponses
complmentaires et une plus grande flexibilit lapprenant qui pourra se former sa
guise et en fonction de ses disponibilits.
Lobjectif consiste crer une plateforme E-Learning qui rpond au besoin du formateur et
des apprenants de manire :

Garantir plus de souplesse pour la planification des formations laide dune

interface ergonomique et simple manipuler pour les diffrents utilisateurs,
Faciliter laccs aux ressources et services,
Faciliter lchange et la collaboration,
Amliorer la qualit dapprentissage en utilisant les nouvelles technologies
multimdia,
Garantir une interactivit entre le formateur et les apprenants travers des
discussions instantanes pour donner des rponses aux questions
instantanment,
Pilotage des bureaux des apprenants par le formateur (secondaire),
Optimiser le temps de rponse de lapplication,
Assurer la scurit dinformation.

13

3.3.

Planning prvisionnel

La cl principale de la russite dun projet est un bon planning. En effet, le planning aide
bien subdiviser le travail et sparer les taches raliser, il offre une meilleure
estimation et gestion de temps ncessaire pour chaque tache. De plus, il donne une
visibilit permettant destimer approximativement la date dachvement de chaque tche
et du projet lui mme. Dans ce projet, nous avons estim de raliser notre application
dans une dure approximative de 6 mois. La figure ci-dessous montre le planning sous
le format dun diagramme de Gantt.

Figure 1 : Diagramme de Gantt

Comme le montre le diagramme, cinq principales phases peuvent en tre dgags :
Lanalyse du march : le rsultat de cette phase est la dtermination des objectifs
atteindre dans notre future application en partant de lexistant.
Conception : il sagit de dtailler les spcifications des fonctions ainsi que la
structure des donnes, et des contrles et les interfaces.
Ralisation : il sagit de raliser limplmentation des programmes et effectuer les
tests unitaires.
Test et Livraison : Il s agit de tester notre plateforme de E-Learning et sassurer
que toutes les fonctionnalits marchent parfaitement et ensuite livrer le produit
fini.
Evaluation : il sagit de rassembler les avis des utilisateurs.

4. tude de lexistant
Cette section a pour objectif dtudier et faire le tour des solutions E-Learning/Formation
distante les plus connues sur le march. Cette tude permet de dgager les points forts
et les points faibles de chacune ces solutions. Dans ce qui suit, une analyse de lexistant
ainsi que des critiques de chacun des outils cits sont dtaills.

14

4.1.

Analyse de lexistant

La formation continue se fait actuellement de faon traditionnelle : cours, apprenants

et formateurs sur place. Ce type de formation prsente beaucoup dinconvnients tels
que :
Contrainte du nombre de Places limites
Contrainte du nombre de salles rduites
Charge leve de la formation
Conditions non favorables pour certains cas
Etc.
Dans le but de rsoudre ces inconvnients, plusieurs outils base des nouvelles
technologies ont t mis disposition, tels que : AppearIn, Skype, adobe connect,
Teamviewer, Microsoft Virtual Academy (MVA).
4.1.1. SKYPE
Cest un logiciel de visioconfrence qui permet aux utilisateurs de passer des appels
tlphoniques via Internet. Les appels dutilisateur utilisateur sont gratuits, tandis que
ceux vers les lignes tlphoniques fixes et les tlphones mobiles sont payants. Skype
permet aussi la discussion instantane et lchange de fichier entre utilisateurs.
Il emploie la technologie innovatrice poste--poste, P2P (peer-to-peer), pour connecter
un utilisateur dj inscrit avec les autres utilisateurs de Skype. Dans le contexte des
systmes E-learning, skype ne peut traiter que la partie de webconfrencing et ne permet
pas la gestion des formations.
4.1.2. Adobe connect
Adobe Connect est un systme de communication web la fois souple et scuris qui
permet de prendre en charge et d'tendre les fonctionnalits d'Adobe AcrobatConnect
Professional afin de proposer des solutions de communication web pour la formation, le
marketing, les confrences et la collaboration en ligne.
Adobe Connect pour l'E-Learning, permet de :
Crer facilement des haut-impact de la formation en ligne,
Offrir des classes virtuelles et sur demande des cours,
Grer la participation, suivre les progrs, et valuer l'efficacit du cours
4.1.3. TeamViewer
Cest un logiciel pour fournir une assistance distance sur internet un autre utilisateur
qui excute aussi Teamviewer.
Teamviewer permet de contrler un ordinateur distance, travers diffrents modes de
connexion sont disponibles :

Contrle distance : Contrler l'ordinateur dun partenaire ou travailler ensemble

sur un seul ordinateur

15

Transfert de fichiers : Transfrer des fichiers depuis ou vers l'ordinateur dun

partenaire
VPN : Crez un rseau virtuel priv avec un partenaire.
4.1.4. AppearIn

Un moyen rapide de faire une visioconfrence avec des amis ou des collgues sans
avoir besoin d'installer Skype ou n'importe quel autre logiciel, cette solution est une trs
bonne alternative.
Cest un site qui utilise la technologie WebRTC afin de permettre plusieurs personnes
(maximum 8) de discuter en audio et vido (en mode p2p). Pour l'utiliser, pas besoin de
se crer de compte, il suffit de se connecter au site puis d'envoyer l'URL donnes par
Appear.in vos contacts.
Enfin, pour ceux qui s'inquiteraient de la scurit, la room est par dfaut ouverte mais
vous pouvez la verrouiller tout moment afin d'empcher de nouvelles personnes de
sinfiltrer.
L'utilisation du WebRTC rend tout cela trs lger (pas de flash), mais ncessite un
navigateur qui implmente cette technologie tels que Chrome, Opera ou Firefox (exit IE,
Safari), ce qui nest pas un grand problme car de nos jours presque tout le monde utilise
Chrome.
4.1.5. Microsoft Virtual Academy (MVA)
Cest une plateforme E-learning gratuite cre par Microsoft et qui offre une multitude de
cours interactifs spcialement ddis aux produits Microsoft tels que (Microsoft office,
Visual Studio, Windows Azure, .NET, SQL SERVER, Windows App Store, Windows
Mobile), on peut aussi y trouver des cours divers tels que (HTML5, MVC, etc.).
4.2.

Critiques de lexistant

4.2.1. SKYPE

Avantages : Gratuit et permet la scurit des changes.

Inconvnients : Ncessite une installation, ncessite un trs haut dbit.
4.2.2. Adobe connect

Avantages : Accessible partir de nimporte quel navigateur internet, et de

nimporte quel systme dexploitation
Inconvnients : Parfois certaines lenteurs dexcution.

4.2.3. TeamViewer

Avantages : Ne ncessite pas une connaissance de ladresse IP et la qualit

dimage lors de pilotage est trs haute.

16

Inconvnients : Il peut tre un outil despionnage, puisque la plupart des

manipulations distance peuvent tre visible, il pourrait ainsi suivre en direct les
oprations effectues distance sur votre ordinateur
4.2.4. AppearIn

Avantages : Gratuit, lger et compatible avec les dernires versions de

navigateurs.
Inconvnients : Ne permet pas lchange de fichiers
4.2.5. Microsoft Virtual Academy (MVA)

Avantages : Gratuit, riche en informations, et propose les toutes dernires

technologies qui puissent exister.
Inconvnients : Seule Microsoft peut proposer les cours, il ny a pas de
catgories (professeurs, tudiants)

Comme le montre la liste ci-dessus, les solutions existantes de web confrence et

dorganisation des formations sur le march proposent diffrentes fonctionnalits de
base (communication audio vido, Tchat, sharing). Cependant, elles possdent des
inconvnients comme :

Lenteur au niveau du temps de rponse du systme et surtout lors du partage

dun bureau (adobeConnect).
Nombre limit des confrenciers/apprenants pour tous les systmes existants.
Limpossibilit de publier des cours comme cest le cas pour (MVA).

5. Proposition des diffrentes solutions

Daprs ltude de lexistant plusieurs anomalies ont t dgags. Pour faire recours
ces anomalies, la conception et limplmentation dune plateforme web qui regroupe
toutes les fonctionnalits dE-Learning sera dune grande utilit.
Dans la solution propose :

La plateforme est base sur une interface web, ce qui vitera les problmes de
compatibilit avec le systme d'exploitation du formateur et celui des apprenants.
La plateforme doit tre rapide (temps de connexion, temps de reponse) et fluide.
tant donn le nombre de fonctionnalits importantes, elle devra aussi offrir une
simplicit dutilisation et surtout une ergonomie dinterface.
La plateforme doit permettre la visioconfrence
La plateforme doit regrouper les fonctionnalits de toutes les applications
prsentes dans ltude de lexistant (Partage de fichiers, Upload, Download,
Messaging, Chat, etc..).
Garantir la confidentialit et Scurit des donnes.

17

6. Conclusion
Dans ce premier chapitre, dfini le champ de ltude suivi dune tude de lexistant afin
de prciser nos objectifs atteindre. En effet, ltude de lexistant nous a permis de
prparer une bonne conception pour les amliorations que nous allons ajouter dans la
solution propose afin de rpondre nos besoins. Dans le chapitre qui suit nous
prsenterons les dmarches de dveloppement et de conception de notre solution.

18

Chapitre 2 : Modlisation conceptuelle &

organisationnelle

19

1. Introduction
La modlisation conceptuelle et organisationnelle constitue une tape importante dans
la convergence des notions utilises dans le domaine de lanalyse de conception
puisquelle reprsente une synthse pour notre systme.Dans ce chapitre nous
commenons par le modle conceptuel dtaill de notre application, ensuite nous
exposons le modle logique des donnes. Enfin nous clturons ce chapitre par une
conclusion.

2. Modlisation
Par le pass, le modle Entit-Relation reprsentait une grande partie des approches
les plus utilises.
Actuellement, les nouvelles technologies sappuient sur le modle objet. En termes
danalyse et de modlisation objet, UML est devenu un standard incontournable, stabilis
et industriel.

3. Conduite de projet
Au dbut, le cycle en cascade (ex : le cycle en V) tait trs utilis. Mais on a vite constat
son incapacit sadapter aux diffrents changements.
Litratif sest ensuite impos, parce quil rduit la complexit de ralisation des phases,
en travaillant par approches successives et incrmentales.
Une mthode fortement axe sur litratif et le modle UML est alors apparut, il sagit de
UP (Unified Process). Cette mthode comme son nom lindique, a t le fruit de travail
de plusieurs personnes voulants unifier les diffrentes mthodes existantes ce
moment.
On constate aujourdhui, lmergence dune nouvelle approche : les mthodes agiles
(Agile Modeling). C est des mthodes itratives planification souple qui permettent de
sadapter la fois aux changements du contexte et de spcifications du projet.

4. Choix de la mthodologie de conception

4.1.

La mthode 2TUP

Devant le nombre de mthodes disponibles, le choix parmi elles devient difficile,

beaucoup de questions peuvent se poser un chef de projet lors dun dmarrage de
projet :
Comment vais-je organiser les quipes de dveloppement ;
Quelles tches attribuer qui ;
Quel temps faudrait-il pour livrer le produit ;
Comment faire participer le client au dveloppement afin de capter les besoins
de celui-ci ;
Comment viter des drives et de mauvaises estimations qui vont allonger
les cots et le temps de dveloppement.

20

Comment vais-je procder pour que le produit soit volutif et

facilement maintenable.

Notre choix sest donc port vers la mthode 2TUP, du fait de son approche nouvelle et
originale.
Notre projet est bas sur un processus de dveloppement bien dfini qui va de la
dtermination des besoins fonctionnels attendus du systme jusqu la conception et le
codage final. Ce processus se base lui-mme sur le Processus Unifi (Unified Process)
qui est devenu un standard gnral runissant les meilleures pratiques de
dveloppement. Cette mthode ne se base aucunement sur un processus linaire mais
bien, sur un dveloppement itratif et incrmental.
Nous allons dabord dfinir les diffrents concepts qui vont tre utiliss dans ce document
4.2.

Le processus unifi

Le processus Unifi (PU ou UP en anglais pour Unified Process) est une mthode de
dveloppement logiciel construite sur UML ; elle est itrative et incrmentale, centre sur
larchitecture, conduite par les cas dutilisation et pilote par les risques.
Itrative et incrmentale : la mthode est itrative dans le sens o elle propose de faire
des itrations lors de ses diffrentes phases, ceci garantit que le modle construit
chaque phase ou tape soit affin et amlior. Chaque itration peut servir aussi
ajouter de nouveaux incrments.
Conduite par les cas dutilisation : elle est oriente utilisateur pour rpondre aux
besoins de celui-ci.
Centre sur larchitecture : les modles dfinits tout au long du processus de
dveloppement vont contribuer tablir une architecture cohrente et solide.
Pilote par les risques : en dfinissant des priorits pour chaque fonctionnalit, on peut
minimiser les risques dchec du projet.
La gestion dun tel processus est organise daprs les 4 phases suivant tes :

Pretude (Inception) : cest ici quon value la valeur ajoute du dveloppement

et la capacit technique le raliser (tude de faisabilit).
Elaboration : sert confirmer ladquation du systme aux besoins des
utilisateurs et livrer larchitecture de base.
Construction : sert livrer progressivement toutes les fonctions du systme.
Transition : dployer le systme sur des sites oprationnels
4.3.

Processus de modlisation avec UML

Le processus 2TUP sappuie sur UML tout au long du cycle de dveloppement, car les
diffrents diagrammes de ce dernier permettent de part leur facilit et clart, de bien
modliser le systme chaque tape.
21

 Unified Modeling Language : UML se dfinit comme un langage de modlisation

graphique et textuel destin comprendre et dcrire des besoins, spcifier, concevoir
des solutions et communiquer des points de vue.

5. tude prliminaire
Ltude prliminaire (ou Pr-tude) est la toute premire tape du processus 2TUP.Elle
consiste effectuer un premier reprage des besoins fonctionnels et oprationnels. Elle
prpare les activits plus formelles de capture des besoins fonctionnels et de capture
techniques
5.1.

Prsentation du projet raliser

Cest une plateforme qui doit grer les formations des apprenants, de permettre leur suivi
depuis leur inscription jusqu lacquisition des comptences voulues par chacun dentre
eux.
5.2.

Recueil des besoins fonctionnelles

Nous avons effectu plusieurs recherches pour identifier au mieux les besoins du projet,
et ceci afin de rpondre aux attentes des utilisateurs. Cette phase correspond une
recherche sur le terrain pour bien dfinir le cadre de notre systme. Nous nous sommes
aussi procur quelques documents, des exemples de systmes existants, lavis de
quelques personnes exprimentes dans le domaine de lenseignement, etc., ce qui
nous a permis dtablir le cahier des charges prliminaire suivant :
Une universit est dirige par un directeur et est compose de plusieurs dpartements,
dont chacun est supervis par un chef. Chaque dpartement comprend plusieurs
formations qui elles mmes se composent de plusieurs matires dont chacune est
enseigne par un professeur et comprend plusieurs lves.
Le mme principe de luniversit se calque sur notre projet de manire ce que :
Il y est les espaces suivants : administrateur, formateur, apprenant.
Un apprenant doit sinscrire et sauthentifier sur la plateforme pour :
o Choisir des formations et et les ajouter son programme.
o Bnficier dun suivi des formations et des supports essentiels.
o Interagir avec les formateurs (messagerie, chat, Visio confrence).
o Passer des tests de connaissances.
o Voir son profil

Un formateur doit sinscrire et sauthentifier sur la plateforme pour :

o Ajouter, Modifier, Supprimer et superviser des formations.
o Ajouter et Modifier des spcialits dans le cas o elles ne sont pas dfinies
par ladministrateur.
o Crer des tests de connaissances pour chacune des formations ajoutes.
o Interagir avec les apprenants (messagerie, chat, Visio confrence).
o Voir les les tests passs par chaque apprenant et pour chacun des
matires ajoutes.
o Voir son profil.
22

Un administrateur a pour rle de :

o Ajouter, Modifier, Supprimer les professeurs.
o Ajouter, Modifier, Supprimer les tudiants.
o Ajouter, Modifier, Supprimer des formations.
o Ajouter, Modifier, Supprimer des spcialits.
o Ajouter, Modifier, Supprimer des dpartements.
o Interagir avec les apprenants et les formateurs en cas de besoin.
o Voir les statistiques gnrales concernant les formations, les apprenants
et les formateurs.
Un dpartement est compos de plusieurs spcialits.
Une spcialit se compose de plusieurs formations.
Un apprenant peut suivre une ou plusieurs formations.
Un apprenant peut passer des tests pour chaque formation.
Un formateur peut ajouter une ou plusieurs formations.
Une formation appartient une seule spcialit.
Une formation dispose dun ou plusieurs documents lis.

Afin que la plateforme soit complte, un espace de Visio-confrence doit tre prsent
afin davoir un support solide.

6. Diagrammes des cas dutilisation

Les cas dutilisation dcrivent un ensemble dactions ralises par le systme en rponse
une action dun acteur.

6.1. Identification des acteurs
Le formateur, lapprenant et ladministrateur sont les acteurs qui interagissent avec notre
systme.
Formateur : anime des formations dans le salon de formation.
Apprenant : suit une formation dans le salon de formation.
Administrateur : cest le responsable de ladministration du site de tlformation.

6.2. Identification des messages

Le systme

Emet les messages suivants

Les informations dun apprenant
Les informations dun formateur
Les informations dun cours
Les informations dun dpartement
Les informations dune spcialit
Les informations dun message
Les rsultats dun test

Reoit les messages suivants

La liste de tout les utilisateurs
La liste de toutes les formations
La liste des niveaux
La liste des spcialits
La liste des dpartements
La liste des messages
Le profil dun utilisateur

Tableau 1 : identification des messages

23

6.3. Modlisation du contexte

Utilisateurs finaux
Description des besoins fonctionnels
Formateur
La plateforme doit permettre au formateur de :
Sinscrire
Sauthentifier
Crer des spcialits
Ajouter, Modifier ou Supprimer ses formations
Crer, Modifier ou Supprimer des tests pour chaque formation
Accder les dtails des tests de ses cours
Accder toutes les formations
Chercher des formations
Animer ses cours
Consulter et envoyer des messages
Chater avec des apprenants
Faire des Visio confrences avec les apprenants
Consulter son profil
Modifier les informations de son profil
Recevoir des notifications
Tlcharger des documents
Apprenant
La plateforme doit permettre au formateur de :
Sinscrire
Sauthentifier
Accder toutes les formations
Chercher des formations
Passer des tests
Voir les dtails des tests quil a pass
Ajouter ou Retirer des formations a son profil
Consulter son profil
Modifier les informations de son profil
Consulter et envoyer des messages
Chater avec des formateurs
Faire des Visio confrences avec les formateurs
Recevoir des notifications
Tlcharger des documents
Administrateur La plateforme doit permettre ladministrateur de :
Sauthentifier
Consulter les statistiques gnrales de la plateforme
(Formations, apprenants, formateurs)
Ajouter, Modifier ou Supprimer des formateurs
Ajouter, Modifier ou Supprimer des apprenants
Ajouter, Modifier ou Supprimer des Formations
Accder toutes les formations
Ajouter, Modifier ou Supprimer des spcialits
Ajouter, Modifier ou supprimer des dpartements
Consulter et envoyer des messages
Chater avec les apprenants et les formateurs
Recevoir des notifications
Tableau 2 : Modlisation du contexte
24

Pour simplifier notre diagramme de cas d'utilisation, nous avons procd sa

dcomposition en trois diagrammes :

Figure 2 : Diagramme de cas dutilisation de ladministrateur

Figure 3 : Diagramme de cas dutilisation du formateur

25

Figure 4 : Diagramme de cas dutilisation de lapprenant

7. Modlisation conceptuelle de donnes

La modlisation conceptuelle des donnes permet de dgager l'ensemble des donnes
manipules en vue d'laborer le diagramme de classes. Il sagit donc dune
reprsentation des donnes du champ de ltude ainsi que le lien smantique entre ces
donnes, facilement comprhensible, permettant de dcrire le systme dinformation
laide des concepts proposs par le modle UML.
Le modle conceptuel des donnes (MCD) a pour but d'crire de faon formelle les
donnes qui seront utilises par le systme d'information. Il s'agit donc d'une
reprsentation des donnes, facilement comprhensible, permettant de dcrire le
systme d'information l'aide d'entits.
7.1.

Reprsentation des classes

Le diagramme de classes est considr comme le plus important, il est le seul obligatoire
lors d'une modlisation.
Alors que le diagramme de cas d'utilisation montre un systme du point de vue des
acteurs, le diagramme de classes en montre la structure interne. Il permet de fournir une
reprsentation des objets du systme qui vont interagir pour raliser les cas d'utilisation.
Les classes candidates sont tires de la description textuelle du cas dutilisation
reprsentant la figure 5 :

26

Figure 5 : Diagramme de classe

8. Modlisation organisationnelle
Dans la section prcdente nous avons propos une modlisation conceptuelle des
donnes et des traitements en se basant sur lapproche objet UML qui reprsente ltat
de lart des langages de modlisation objet, il permet de modliser la structure et le
comportement dun systme indpendamment de toute mthode ou langage de
programmation.
La fiabilit de cette conception est notre porte vers un modle organisationnelle et
logique de donnes efficace et confiant. Ainsi dans cette section nous allons prsenter
le modle organisationnel et logique de notre application

27

8.1.

Diagramme dactivit

Le diagramme dactivit permet de mettre laccent sur les traitements. Il est donc
particulirement adapt la modlisation du cheminement de flots de contrle et de flots
de donnes. Il permet ainsi de reprsenter graphiquement le comportement dune
mthode ou le droulement dun cas dutilisation.
Une activit reprsente une excution dun mcanisme, un droulement dtapes
squentielles. Le passage dune activit vers une autre est matrialis par une transition.
Les transitions sont dclenches par la fin dune activit et provoquent le dbut immdiat
dune autre.Dans ce qui suit, nous prsentons notre diagramme dactivit pour crer et
grer le profil du formateur.
Les figures suivantes illustrent le droulement squentiel des traitements accomplis par
chacun des acteurs :

Figure 6 : Diagramme dactivit du formateur

28

Figure 7 : Diagramme dactivit de lapprenant

Figure 8 : Diagramme dactivit de ladmin (1)

29

Figure 9 : Diagramme dactivit de ladministrateur (2)

Figure 10 : Diagramme dactivit de ladministrateur (1)

9. Conclusion
Dans cette partie, nous avons ralis la modlisation contextuelle, conceptuelle et
organisationnelle de notre application. Cette modlisation nous a permis de dgager le
modle logique des donnes qui sera exploit lors de limplmentation. Ce modle sera
transform en modle physique de donnes qui fera lobjet du chapitre suivant.

30

Chapitre 3 : Ralisation

31

1. Introduction
Aprs 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 ralisation.La
phase de ralisation est considre comme tant la concrtisation finale de toute la
mthode de conception.
Nous menons tout dabord une tude technique o nous dcrivons les ressources
logicielles utiliss dans le dveloppement de notre projet. Nous prsentons en premier
lieu notre choix de lenvironnement de travail, o nous spcifions lenvironnement
matriel et logiciel quon a utilis pour raliser notre application puis nous dtaillons
larchitecture et enfin nous prsentons quelques interfaces ralises pour illustrer le
fonctionnement de quelques activits du systme.

2. Etude technique
L'tude technique est une phase d'adaptation de conception l'architecture technique.
Elle a pour objectif de dcrire au plan fonctionnel de la solution raliser d'une manire
dtaille ainsi que la description des traitements. Cette tude, qui suit l'tude dtaille,
constitue le complment de spcification informatique ncessaire pour assurer la
ralisation du futur systme. Cette tude permet galement de dterminer :

La structure informatique de la base de donnes,

L'architecture des programmes,
La structure de chaque programme et l'accs aux donnes.
2.1.

Environnement de ralisation

Pour la ralisation de notre application, nous avons eu recours plusieurs moyens

matriels et logiciels.
Le dveloppement a t ralis sur un MacBook Pro, le dploiement en localhost et sur
CPanel afin de tester le fonctionnement en ligne de la plateforme et le dploiement final
sera fait sur la plateforme Windows Azure.
2.1.1. Choix des langages de dveloppement et de SGBD
Voici les choix techniques qui ont t adopts pour le projet :
La modlisation avec UML.
Adoption dune architecture 3 couches.
Utilisation des technologies et outils suivants :
o GRUNT JS
o SLIM FRAMWORK (PHP 5 - REST API).
o ANGULAR JS.
o BOOTSTRAP.
o IONIC FRAMEWORK (Mobile).
Types de donnes (JSON, SQL).
Utilisation du Design Pattern (MVC).

32

Le temps de chargement dune application web est crucial. La lenteur du chargement

de lapplication nest pas seulement due au temps de rponse du module back-end ou
dun appel API mais aussi au traitement fait par votre client web avant dafficher la
page finale.
En effet, le navigateur doit attendre le chargement et lexcution complte de tous les
scripts ainsi que les feuilles de style dclares dans la balise <head> du document
HTML.
Durant la phase du dveloppement front-end, il est fortement recommand de limiter
les requtes serveur et denvoyer un code clean grce la concatnation et la
compression des fichiers (JS , CSS et idalement vos images et fichiers HTML) avant
de les dployer en production. Ces tches sont trs rptitives et rcurrentes, le temps
pass dessus est quasi perdu et na pas de valeur ajoute. Il faut donc idalement
automatiser ces actions.
Voici un descriptif des technologies utilises durant le dveloppement de la plateforme
E-learning :
v GRUNTJS
Grunt est un Task Runner, il permet de crer des tches automatises en JavaScript
telles que les tches de concatnation, de compression et de compilation des fichiers
JS, SASS, CSS ainsi que plein dautres tches. Grunt possde dailleurs une multitude
de plugins dans son co-systme dont le nom commence gnralement par grunt
contrib*.
Avant de pouvoir utiliser, il faut sassurer davoir installer nodeJs (npm) car Grunt est
un module dvelopp sous NodeJs et donc sinstalle avec le gestionnaire de
package NPM

Compression JS: grunt-contrib-uglify :

Ce plugin permet la compression des fichiers Javascript, il permet dailleurs de les

concatner si lon passe en paramtres une liste des fichiers.

grunt-contrib-cssmin :

Ce plugin permet de compresser les fichiers css.

grunt-contrib-watch :

Pour tout dveloppeur/euse, compiler chaque fois que vous faites des modifications
sur vos fichiers devient vite rptitif et une perte de temps. Ce plugin est fait pour
surveiller les fichiers que vous avez configur dans le GruntFile.js et relance les tches
souhaites
Grunt est un outil trs puissant qui facilite la vie des dveloppeurs, son eco-systme
est trs riche grce ses diffrents modules. Je me suis focalise sur quelques uns

33

dans ce projet, mais il en reste plusieurs disponibles via la documentation de Grunt :

http://gruntjs.com/getting-started.
v AngularJS
AngularJS est un framework open-source de JavaScript qui facilite efficacement le
dveloppement dapplications web, et standardise les applications ct client en offrant
une structure solide et facilement adaptable.
AngularJS est le meilleur choix pour toute application web, il favorise particulirement la
cration dlments visuels, le rsultat tant une navigation fluide et rapide sur le site.
Ceci explique sa parfaite adaptation pour les Single Page Application (SPA) et des
applications web destines aux dispositifs mobiles
Un des principaux avantages pour AngularJS est lquipe de dveloppeurs de la
plateforme qui est entirement forme par des ingnieurs ddis Google. Ceci lui confre
un certain nombre de bnfices telle que la performance, lvolutivit, la robustesse, la
plateforme tant facilement intgrable dans des diffrents projets web.
La plateforme impose un dveloppement selon la structure MVVM (Modle-VueVueModle), design pattern qui reprend la modularit des concepts MVC (Modle-VueContrleur). Il adapte et tend le HTML traditionnel pour servir le contenu dynamique de
faon amliore grce un data-binding bidirectionnel qui permet la synchronisation
automatique des modles et des vues.

Figure 11 : Data-binding AngularJS

Les modules cres au niveau de JavaScript dans AngularJS sont facilement intgrables
grce linjection de dpendances. AngularJS se charge de les instancier et de les
injecter pour nous, le code est plus facilement volutif.

34

AngularJS permet de crer des applications adaptives (responsives) et enrichit

lexprience utilisateur sur le site grce sa plateforme flexible,
Rsultat final : une application fluide, souple, facile entretenir, regroupant une grande
varit deffets visuels et danimations graphiques exceptionnelles, tout en bnficiant
dune grande vitesse de chargement.
v SLIM FRAMEWORK / API REST
API REST :
LAPI permet de faire communiquer deux applications via les URL en utilisant les
protocoles http.
REST, reprsente Representational State Transfer, est un style darchitecture pour les
systmes hypermdia (une extension de lhypertexte des donnes multimdias, qui
ajoute aux informations de type texte, dautres mdias comme des images, sons, vidos
par exemple le web) distribus.
Larchitecture REST est utile pour raliser les applications client/serveur.
SLIM FRAMEWORK :
SLIM est un micro Framework PHP trs lger. Il est idal pour crer des applications
web et des API il prend en charge toutes les mthodes HTTP tels que : GET, POST,
PUT et DELETE qui sont ncessaires pour une API REST.
Vous trouverez ci-dessous la liste des principales fonctionnalits :
encryption AES-256
authentification HTTP
gestion d'erreurs
mode debbug
cache
PDO
sessions (cookies)
middleware
Rsultat final : facile prendre en main, lger et performant.
v MVC
MVC est un patron de conception particulirement adapt pour raliser une application
web.
MVC est lacronyme de Modle-Vue-Contrleur : le Modle contient les donnes de
lapplication, la Vue (ou les Vues) contient le code pour afficher les pages de lapplication,
et le Contrleur gre les interactions de lutilisateur en faisant le lien avec le Modle et
la Vue.

35

MVC permet une sparation claire des intentions et optimise la cration dune application
web ou dun site, et sa maintenance.
v NoSQL JSON
Le NoSQL, pour "not only SQL", dsigne les bases de donnes qui ne sont pas fondes
sur l'architecture classique des bases de donnes relationnelles. Dvelopp l'origine
pour grer du big data.
Les bases orientes document reprsentent les informations sous forme d'objet XML ou
JSON.
L'avantage est de pouvoir rcuprer simplement des informations structures de
manire hirarchique.
v MySQL
MySQL(My Structured Query Langage-Langage de requtes structur) est un systme
de gestion de bases de donnes relationnelles ddies Open source. Il est trs rapide,
fiable et facile utiliser et gratuit.il a t dvelopp lorigine pour grer des trs grandes
bases de donnes beaucoup plus rapidement que des solutions dj tablies. Il offre un
ensemble de fonctionnalits large et riche. Sa rapidit et sa scurisation en font un outil
idal.
v IONIC FRAMEWORK
Ionic est un framework qui permet de crer des applications mobiles en utilisant des
technologies Web. Il se base pour cela sur d'autres frameworks / technologies qui ont
fait leurs preuves.

AngularJS, pour la partie front-end avec l'utilisation d'Angular UI Router pour la

gestion des states.
Apache Cordova, pour la cration d'une application fonctionnelle sur mobile.

Globalement ionic offre une srie de directive et de service construit par dessus angular
qui vous permettront de crer rapidement des lments d'interface. Il suffit de faire un
rapide tour sur ladocumentation pour voir les diffrents lments disponibles.
2.1.2. Outils de dveloppement
v Sublime text
Il existe une quasi-infinit dditeurs, mais Sublime text , en plus dtre multiplate-forme,
il regroupe les trois qualits objectives indispensables dun diteur de texte, qui sont la
rapidit, la simplicit et la modularit.
Sublime Text dispose dune multitude de fonctions et de raccourcis qui font gagner un
temps considrable.

36

Lun des avantages de ce logiciel, est quil est entirement paramtrable/modifiable via
loutil de gestion des packages, qui est trs bien conu et dont la documentation est
fournie sur ce site https://packagecontrol.io/
v XAMPP
XAMPP est un ensemble de logiciels permettant de mettre en place facilement
un serveur Web, un serveur FTP et un serveur de messagerie lectronique. Il s'agit d'une
distribution de logiciels libres (X (cross) Apache MariaDBPerl PHP) offrant une bonne
souplesse d'utilisation, rpute pour son installation simple et rapide.
Dans le cadre de notre projet, Xampp joue le rle dun serveur HTTP grce Apache
qui y est inclus lors de linstallation, ceci dun ct. Dun autre ct il nous permet
deffectuer des requtes vers la Base de donnes grce SLIM FRAMEWORK qui est
un Framework PHP5.
v FileZilla
FileZilla est un client FTP, c'est--dire un logiciel permettant l'change de fichiers entre
un ordinateur et un serveur ou vice-versa.
Simple et rapide d'utilisation, FileZilla nous a permis de nous connecter au serveur FTP
afin de mettre le produit fini en ligne aprs avoir achev tout les rglages ncessaires.
v Creately
Creately est un outil de diagrammes rput pour sa facilit d'utilisation. Linterface
pure combine avec des fonctionnalits, aide dessiner des diagrammes jusqu' 3
fois plus vite par rapport un logiciel de diagramme classique.

3. Modlisation Physique des donnes

Pour aboutir une description technique de la base de donnes dans le systme utilis,
il faut transformer le MLC qui est dduit du diagramme de classes, puis optimis en
fonction des traitements qui vont utiliser le modle.La transformation au niveau
physique doit tenir compte des caractristiques et des contraintes du systme utilis afin
dobtenir un modle physique ralisable et performant.Dans cette partie, nous
dcrivons la modlisation physique des donnes.
Nom de la table
coursEtudiant

Liste des champs

37

Documents

Cours

Professeur

Filire

38

Spcialit

Etudiant

Utilisateur

39

Message

Tableau 3 : Modlisation physique des donnes

4. Production de la plateforme
4.1.

Descriptif

Notre projet est compos de trois parties principales :

Partie Gestion des formations :

Permet la gestion des utilisateurs (cration des comptes pour les formateurs et
les apprenants.)
Permet lorganisation des formations : donne la possibilit un formateur de
crer sa propre formation ainsi quelle offre la possibilit aux apprenants de
suivre ou dajouter les diffrentes formations proposes leurs profils.

Partie Web Confrence :

Cette partie reprsente notre salon de formation qui offre les fonctionnalits suivantes:
Uploader le support dune formation,
Conversation Audiovisuelle / Tchat,
Tlcharger et uploader des documents,
Envoyer/Recevoir des messages (Emails),
Notifications,
Crer des tests de connaissances.
Partie Tlassistance :
Permet la communication entre les formateurs et les apprenants en accdant la
camera et au micro afin que les deux puissent discuter. Ceci en utilisant AppearIn, un
moyen rapide de faire une visioconfrence, du partage dcran et chatter avec des
amis ou des collgues sans avoir besoin d'installer Skype ou n'importe quel autre
logiciel. www.appear.in .

40

4.2.

Architecture

Larchitecture de notre application est de type client-serveur, o un ordinateur interagit

avec dautres sur Internet.Comme nous lavons mentionn prcdemment, notre
application est compose de 3 parties : une partie pour la gestion des formations et des
apprenants dvelopp en SLIM FRAMEWORK, une partie pour le salon de formation
dveloppe en html/css (BOOTSTRAP, ANGULAR JS) et une partie pour le chat et la
visioconfrence et le partage dcran dun PC distance dont nous avons adapt des
outils open source tel AppearIn.
Nous en dduisons que nous avons besoin de :

Un serveur web : utilis pour la partie gestion des formations et des utilisateurs.
Dun serveur base de donnes MySQL : se charge au stockage des donnes.
Un client lger : un navigateur web (Safari, Google Chrome.)
Durant la ralisation de notre projet, nous avons opt pour une architecture MVC afin
de garantir la maintenabilit, la modularit de lapplication et la rapidit de
dveloppement.
MVC littralement Modle Vue Contrleur est une architecture qui organise l'interface
Homme-Machine d'une manire ce que le dveloppement puisse se faire en couches
indpendantes. Il impose la sparation entre les donnes, la prsentation et les
traitements, ce qui donne trois parties fondamentales dans l'application finale : le
modle de donnes, le contrleur et la vue.
Couche Modle : Permet d'enregistrer les donnes, de les rcuprer, de les lister,
de les supprimer, et de les mettre jour.
Couche Vue : La vue correspond l'interface avec laquelle l'utilisateur interagit. Sa
premire tche est de prsenter les rsultats renvoys par le modle. Sa seconde
tche est de recevoir toutes les actions de l'utilisateur (clic de souris, slection d'une
entre, boutons, etc). Ces diffrents vnements sont envoys au contrleur, elle se
contente d'afficher les rsultats des traitements effectus par le modle et d'interagir
avec l'utilisateur.
Couche Contrleur : Le contrleur prend en charge la gestion des vnements de
synchronisation pour mettre jour la vue ou le modle et les synchroniser. Il reoit
tous les vnements de l'utilisateur et enclenche les actions effectuer. Si une action
ncessite un changement des donnes, le contrleur demande la modification des
donnes au modle, et ce dernier notifie la vue que les donnes ont change pour
qu'elle se mette jour.

41

La figure suivante reprsente larchitecture de notre plateforme :

Figure 12 : Architecture de lapplication

En accdant la plateforme, les models, les controlleurs, les vues, et tout les
documents HTML sont chargs ; comme vous pouvez le voir, les requtes sont
envoyes et excutes sur la partie REST API o se trouve tout les processus de
logique. Le backend REST est situ dans un serveur WEB ou sur le cloud (ce qui est
le plus souvent le cas).
4.3.

Charte graphique

Afin davoir un aspect visuel lgant nous tions mens chercher une template
adquate pour la plateforme E-learning, pour ce faire, nous avons eu recours
quelques sites tels que themeforest.com, html5up.net et bien dautres, ces derniers
offrent une multitude de templates HTML5/CSS3 responsives avec des thmes
diffrents.
4.3.1. Responsive Web Design
Le Responsive Web design est une approche de conception Web qui vise
l'laboration de sites offrant une exprience de lecture et de navigation optimales pour
l'utilisateur quelle que soit sa gamme d'appareil (tlphones mobiles, tablettes,
liseuses, moniteurs d'ordinateur de bureau).
Une exprience utilisateur "Responsive" russie implique un minimum de
redimensionnement (zoom), de recadrage, et de dfilements multidirectionnels de
pages.
Les avantages du responsive design sont :
La possibilit d'affiner prcisment la structure du site et ses contenus en regard
du priphrique utilis
La possibilit de cibler et de s'adapter des fonctionnalits varies (notamment
le touch)
Peut tre une alternative "rapide", en attendant une refonte complte (et
responsive) de son site web

42

Figure 13 : Responsive Web Design

4.3.2. Structure de la Template
Le contenu de la page contient deux zones, lune de 25% et lautre de 75% de la
largeur totale.
La partie gauche reprsente le menu de la plateforme et la partie droite reprsente le
contenu de chaque menu.
Le choix de ce mode de reprsentation a t choisi pour mettre en valeur chaque vue
de la plateforme soit sur un navigateur soit sur mobile.

Figure 14 : Structure de la template

43

4.3.3. Prsentation des interfaces

Aprs les phases dtude de lexistant, la conception et la modlisation fonctionnelle
et organisationnelle nous avons dvelopp les interfaces de notre application, partir
de linterface daccueil, on peut voir les formations existantes par catgorie ou par liste,
si linternaute est un nouvel utilisateur il a la possibilit de crer son compte
Les interfaces de notre application sont prsentes sous forme de liens :
ACCUEIL : qui amne lutilisateur la page daccueil de notre plateforme
FORMATIONS : qui amne lutilisateur la liste des formations proposes par
les formateurs.
Les interfaces ETUDIANTS, PROFESSEURS, FILIRES, MESSAGERIE,
SPCIALITS, STATISTIQUES et le CHAT sont affichs ds lauthentification de
chacun des utilisateurs (apprenant, formateur, administrateur).

Figure 15 : Page daccueil

Sur cette interface, un visiteur peut voir les catgories des formations ajoutes par les
formateurs ou chercher des formations.
Les formateurs et les apprenants peuvent aussi chercher des formations ou voir les
formations existantes sur la plateforme. Aprs stre authentifi, chacun des
formateurs et apprenants bnficient dautres fonctionnalits qui seront cits par la
suite.

44

Figure 16 : Page de connexion

Aprs validation des informations lutilisateur sera redirig vers son profil.

Figure 17 : Page dinscription

Aprs validation des informations et cration du profil, lutilisateur est invit se
connecter avec le compte cre ainsi il bnficie des fonctionnalits ncessaires.

45

Figure 18 : Profil et Menu de ladministrateur

Ladministrateur dispose de plusieurs menus :
Tableau de bord : o il peut voir les statistiques concernant lactivit des
formateurs et des apprenants.
Gestion des formations : o il peut ajouter, modifier ou supprimer des formations
Gestion des professeurs et tudiants : o il peut les ajouter, modifier ou
supprimer
Messagerie : o il peut envoyer des messages aux utilisateurs inscrits

Figure 19 : Panneau du CHAT

Aprs lauthentification chacun des utilisateurs peut chater avec les formateurs.

46

Figure 20 : Page de formations

Sur cette interface sont listes toutes les formations ajoutes par les formateurs avec
la possibilit de faire une recherche filtre.
Comme le montrent les 3 icones sur la premire formation, ladministrateur peut
modifier, supprimer ou voir le contenu de la formation slectionne.

Figure 21 : Messagerie
Aprs lauthentification chaque utilisateur a la possibilit denvoyer et de recevoir des
messages.
Les messages reus sont notifis pour un accs simple et rapide.

47

Figure 22 : Notifications
Aprs avoir accd son profil, chaque utilisateur est notifi des messages quil a reus. En
cliquant sur licne message on peroit la liste des messages reus et non lus comme le
montre la figure 23.:

Figure 23 : Liste des messages reus

Le formateur dispose des menus suivants :
Gestion des formations : o il peut ajouter, modifier ou supprimer des formations
Gestion des spcialits : o il peut ajouter, modifier ou supprimer des spcialits
Messagerie : o il peut envoyer des messages aux utilisateurs inscrits

48

Figure 24 : Liste des formations dun formateur

Comme cit prcdemment, ladministrateur peut ajouter des cours, cest le mme cas
concernant le formateur, c.--d. quil peut voir les cours quil a publi ainsi les modifier
ou les supprimer.
La figure ci dessous reprsente le formulaire dajout dune formation :

Figure 25 : Formulaire dajout dune formation

Chaque formation est compose dun intitul, une description o lon peut mettre des
videos (youtube ou autre) des images et du texte, le niveau de difficult de la formation,
la spcialit, lillustration de la formation (image), des fichiers lis la formation
(support) et des fichiers PDF comprenant le cours.

49

Figure 26 : Liste de toutes les formations

Lorsque lapprenant sauthentifie, il peut ajouter des formations a son cursus de
formation en cliquant sur licne + .
Il peut galement les retirer en allant sur le menu Mes formations et cliquer sur
licne - comme le montre la figure ci dessous :

Figure 27 : Formations de lapprenant

50

Figure 28 : Dtails dune formation

En accdant une formation lutilisateur peut voir les dtails concernant la formation
(Formateur, spcialit de la formation, etc), voir les cours PDF publi par le
formateur comme sur la figure au dessus (les documentations) et tlcharger des
fichiers lis la formation comme le montre la figue 29:

Figure 29 : Dtails dune formation (2)

51

Figure 30 : Dtails dune formation (3)

Une fois lapprenant ayant suivi la formation slectionne, il peut contacter le formateur
en lui envoyant un message en cas de besoin comme le montre la figure ci dessous.
Les utilisateurs peuvent communiques avec les formateurs en utilisant la partie Visio
confrence qui se prsente sur la figure 31 :

Figure 31 : AppearIn (Visio confrence)

En slectionnant un formateur sur le CHAT de la plateforme, une nouvelle fentre
souvre en redirigeant lutilisateur vers AppearIn qui est un site qui permet la visio
confrence comme cit prcdemment dans la partie analyse de lexistant. Le lien est
compos du site AppearIn et du nom du formateur ainsi quune cl de session afin
scuriser la communication, par ex :
www.appear.in/Utilisateur_TPK9oDpKjN87y6hznQP.

52

Pour consolider la partie support de la plateforme, les formateurs peuvent animer leurs
formations en mettant disposition des tests de connaissances afin que les apprenant
aient une ide de leur avancement concernant les formations quils suivent.

Figure 32 : Espace de connexion et cration du tests (Formateur)

Cette partie a t dveloppe pour le mobile et pour le web afin que les apprenants
aient une facilit pour passer des tests.
Lapplication E-Learn Quiz sera disponible sur les stores (PLAY STORE et APP
STORE).
La partie tests et la plateforme sont tout deux relis au mme API, ce qui veut dire que
pour sauthentifier il faut tre inscrit la plateforme.
La figure 32 met en valeur lespace de connexion et dinscription la plateforme, ainsi
que la partie cration du test par le formateur.
Chaque formateur peut consulter les tests quil a cre et aussi les score des tudiants
concernant ces derniers.

53

Figure 33 : Administration des tests

Comme cit prcdemment, chaque formation dispose dun ou plusieurs tests (quiz)
pour tester les connaissances dun apprenant concernant une formation suivie.
La figure 33 reprsente lespace du formateur afin quil puisse ajouter, modifier ou
supprimer un test.
Quelques points sur les tests :
o Chaque test est compos de 10 questions,
o Chaque question dispose dune unique rponse.
o Chaque test appartient une formation spcifique.

54

Figure 34 : liste des scores obtenus (Formateur)

Sur la figure 34, le formateur peut consulter les tests passs par les apprenant afin de
voir leurs scores et leurs rponses.

5. Apports
Ce projet de fin dtudes ma permis de me familiariser avec un certain nombre de
concepts tout en se basant sur nos connaissances acquises au cours de la formation
au sein de mon institut.Ainsi, le fait davoir travaill avec lencadrant ma mis sur la
voie professionnelle.Mon projet de fin dtude a t une occasion, pour dvelopper
et exercer mes capacits dobservation, danalyse, de conception, de dveloppement
et de rdaction.

5.1.

Apports au niveau des connaissances techniques

Ce projet de fin dtude ma permis de :

Me certifier en Microsoft MTA (Voir Annexes ) concernant :
o HTML5 Application Development Fundamentals
o Database Fundamentals
o Windows Operating System Fundamentals
55

 Mettre en uvre les notions et les connaissances acquises au sein des

modules Mthodologie de conception des bases de donnes .
Manipuler les logiciels Sublimetext, FileZilla au cours du dveloppement de
lapplication.
Amliorer mes connaissances thoriques concernant la communication
client/serveur.
Amliorer mes connaissances en PHP5 via lutilisation du Framework (SLIM).
Amliorer mes comptences en Angular JS.
Mieux agencer mon code au cours du dveloppement.
Manipuler le panneau de contrle CPANEL.
Connatre les fonctionnalits et les services que propose Windows AZURE.
Amliorer mes connaissances sur le CLOUD.
Etudier les architectures multicouches et raliser limportance du travail sur ce
type dapplication dans le monde de programmation.
Apprendre grer un projet.
5.2.

Apports au niveau de la conception et du dveloppement

Apprendre maitriser la mthodologie de conception et de dveloppement des

applications clientes.
Maitriser les tapes de dveloppement et de conception dune application Web.

6. Conclusion
Dans ce chapitre, nous avons pu prsenter lenvironnement et le processus de
dveloppement. Nous avons expos ainsi le rsultat de dveloppement laide des
aperus dcran.

56

Conclusion et Perspectives

57

Notre projet intitul Conception et ralisation dune plateforme E-learning consiste

la conception et la ralisation dune plateforme web destin pour lapprentissage en
ligne.
Contrairement la majorit des travaux existants sur le march qui offrent des
fonctionnalits limites et ncessitent un effort de configuration considrable, nous
avons ralis un systme qui permet la fois de grer des formations, simuler un salon
de formation virtuel, et donner la possibilit aux formateurs danimer leurs formations
et de guider leurs apprenants travers la visio confrence.
En ce qui concerne la dmarche, nous avons en premier lieu effectu une phase
dtude des diffrents outils existants. En deuxime lieu nous avons spcifi notre
application pour discerner les fonctionnalits. En troisime lieu, nous avons procd
sa conception ainsi quaux choix technologiques pour sa ralisation. Enfin, nous
lavons mise en uvre.
Toutes les fonctionnalits dcrites dans le cahier des spcifications fonctionnelles ont
t dveloppes et valides. Nanmoins, notre projet pourra tre amlior par lajout
dautres fonctionnalits tels que :
Le pilotage distance du bureau du formateur et de lapprenant.
Le partage de tout type de support de cours de formation (ppt,word,excel...)
avec animation.
Il est important noter que la ralisation de ce projet ma t bnfique sur tous les
plans. Sur le plan technique, ce projet a t une bonne occasion pour dcouvrir et
maitriser de nouvelles technologie, dapprofondir me connaissance sur le plan des
nouvelles technologies de communications et hbergement des applications en ligne.
Sur le plan humain, ce projet a t une vritable occasion de vivre de prs lexprience
du travail avec des personnes qui ont une exprience plus approfondie que la mienne,
aussi lintgration dans un groupe de travail. Ce qui ma permis damliorer mes
capacits de communication et de madapter la vie professionnelle. Jai fait de mon
mieux pour bien laisser une bonne impression sur ma discipline, mes qualits et mes
comptences techniques vis vis de mon encadrant et dautres personnes
comptentes que jai rencontr et prsenter un travail la hauteur de la formation que
jai eu au sein de lIGA.

58

Bibliographie.
Pierre paquet, Mthodologie de rdaction dun mmoire ,02/01/2014,
https://www.expertmemoire.com/articles/methodologie-redaction-memoire/.
Saeed Paivandi et Galle Espinosa, Les TIC et la relation entre enseignants et
tudiants luniversit , Distances et mdiations des savoirs [En ligne], 4 | 2013,
mis en ligne le 08 octobre 2013, consult le 22 juin 2016. URL :
http://dms.revues.org/425.
Frederic Fappani, Ed. Lien social., Aujourdhui les Nouvelles technologies de
linformation et de la Communication (NTIC) dbarquent sur lEurope donc chez
nous , Numro 485, 6 mai 1999.
Korben , blogueur franais , Appear.in en franais
http://blog.appear.in/post/77163215252/appearin-en-franais

,19/02/2014.

Laurent Audibert, UML2 de lapprentissage la pratique , http://laurentaudibert.developpez.com/Cours-UML/?page=diagramme-classes

Nicolas
Hilaire,

PATTERN
MVC
,
07/07/2016,
https://openclassrooms.com/courses/apprendre-asp-net-mvc/le-pattern-mvc.
Grafikart Quest ce que le NoSQL ?, 26/01/2016 Bonnes Pratiques:
o https://www.grafikart.fr/blog/sql-nosql
o https://www.grafikart.fr/
Raphael (Intgrateur du Dimanche, Strasbourg), cest quoi le responsive
design 08 Juillet 2015 : http://www.alsacreations.com/article/lire/1615-cestquoi-le-responsive-web-design.html
Cours dAngularJS + Tutoriels :
http://courseware.codeschool.com/shaping-up-with-angular-js/Slides/level0105.pdf
https://www.youtube.com/user/angularjs
Vikram Vaswani founder of Melonfire Host your Application in the Azure
Cloud with XAMPP and Bitnami :
o http://vikram-vaswani.in/
o https://www.apachefriends.org/docs/hosting-xampp-on-azure.html

59

Annexes

Figure 35 : Certificat MTA Database fundamentals

60

Figure 35 : Certificat MTA Windows Operating System Fundamentals

61

Figure 35 : Certificat MTA HTML5 Application Development Fundamentals

62