Vous êtes sur la page 1sur 74

REPUBLIQUE TUNISIENNE

MINISTERE DE LENSEIGNEMENT SUPERIEUR,


DE LA RECHERCHE SCIENTIFIQUE ET DES TECHNOLOGIES DE
LINFORMATION ET DE LA COMMUNICATION
UNIVERSITE DE TUNIS EL MANAR

INSTITUT SUPERIEUR DINFORMATIQUE

RAPPORT DE STAGE DE FIN DETUDES


Prsent en vue de lobtention du
Diplme : Licence Applique
Option : Systmes Informatiques et Logiciels

Par
BEN HAMMOUDA Roua

Conception et Ralisation dune plateforme Social


Learning
Organisme daccueil :
Centre National dInformatique

Encadrant lentreprise : Mr.HMADI Karim


Encadrant lISI : Mr.LAABIDI Mohsen

Anne Universitaire 2013-2014

Je ddie ce travail
lme ternelle de mon pre Jallel
ma mre Jamila
Que Dieu la protge
Pour tous les sacrifices consentis
Pour tous les encouragements quelle a su prodiguer aux moments difficiles. Quelle trouve,
dans ce travail, le tmoignage de ma vive gratitude et de ma grande reconnaissance, pour
lnergie quelle a su implanter en moi tous les moments de mes tudes.
mes surs Amal et Rim pour leurs sacrifices et leurs prcieuses directives, pour tout ce que
nous avons partag.
mon plus cher ami Mohamed Amine, qui m'a soutenu, et qui t toujours mes
cots
Que vous trouviez, dans ce travail, le tmoignage de ma sincre fraternit et de mon ternel
attachement familial.
toute ma famille,
mes chers amis
Quils trouvent ici, lexpression de mes sincres remerciements.

Roua

Nos remerciements sadressent notre Prsidente du jury


Mme. Yosra NAJJAR
pour lhonneur quelles nous font de juger notre travail.
Nous tenons galement exprimer nos sentiments de respect tous les membres de jury.

Nous exprimons nos profondes gratitudes et respectueuse reconnaissance notre


encadreur de la socit :
Mr. Karim HMADI
pour son assistance, sa disponibilit, ses encouragements et ses conseils continus.
Nous remercions aussi notre encadreur:
Mr. Mohsen LAABIDI
pour ses directives prcieuse, et pour la qualit de son suivi durant toute la priode de notre
projet.
Par la mme occasion, nous adressons nos remerciements tous nos enseignants pour leurs
efforts qui ont guid nos pas et enrichi nos connaissances tout au long de nos tudes
universitaires.

Table des matires


Introduction gnrale .................................................................................................................... 1
Chapitre I : Etude pralable et tat de lart ............................................................................... 4
Introduction.................................................................................................................................. 4
1. Prsentation de lorganisme daccueil ................................................................................... 4
1.1 Prsentation gnrale du Centre National de lInformatique(CNI) ................................... 4
1.2 Organigramme ................................................................................................................... 4
2. Prsentation du projet .............................................................................................................. 5
2.1 Description du projet ......................................................................................................... 5
2.2 Objectifs du projet ............................................................................................................. 5
3. Etat de lart .............................................................................................................................. 5
3.1 Cest quoi, une plate-forme dapprentissage en ligne ? ..................................................... 5
3.2 E-Learning ......................................................................................................................... 6
3.3 Blended Learning ............................................................................................................... 6
3.4 Web 2.0 .............................................................................................................................. 6
3.5 Le Social Learning (Lapprentissage social) ..................................................................... 7
4. Planning ................................................................................................................................... 8
Conclusion ................................................................................................................................... 8
Chapitre II : Analyse et spcification des besoins .................................................................... 11
Introduction................................................................................................................................ 11
1. Etude de lexistant ................................................................................................................ 11
1.1 Description de lexistant .................................................................................................. 11
1.2 Critique de lexistant ........................................................................................................ 12
1.3 La solution propose ........................................................................................................ 13
2. Spcification des exigences ................................................................................................... 13
2.1 Etude des besoins fonctionnels ........................................................................................ 13
2.2 Etude des besoins non fonctionnels ................................................................................. 14
2.3 Les acteurs systme ......................................................................................................... 14
2.4 Identification des cas dutilisation ................................................................................... 14
2.5 Diagramme globale des cas dutilisation ......................................................................... 16
3. Identification des risques ....................................................................................................... 17

Conclusion ................................................................................................................................. 18
Chapitre III : Conception ........................................................................................................... 20
Introduction................................................................................................................................ 20
1. Choix de la mthodologie de conception ............................................................................ 20
2. Raffinement des cas dutilisation......................................................................................... 20
2.1 Cas dutilisation Sauthentifier .................................................................................. 20
2.2 Cas dutilisation Grer le profil .................................................................................. 22
2.3 Cas dutilisation Grer blog ....................................................................................... 23
2.4 Cas dutilisation Grer wiki ....................................................................................... 23
2.5 Cas dutilisation Grer plateforme ............................................................................. 24
2.6 Cas dutilisation Grer les ressources ........................................................................ 25
2.7 Cas dutilisation Grer les sondages .......................................................................... 26
2.8 Cas dutilisation Grer les utilisateurs ....................................................................... 26
2.9 Cas dutilisation Grer les tests ................................................................................. 28
2.10 Cas dutilisation Grer les devoirs ........................................................................... 29
2.11 Cas dutilisation Se communiquer ........................................................................... 29
2.12 Cas dutilisation Grer les cours .............................................................................. 30
3. Modlisation conceptuelle des donnes ............................................................................... 31
3.1 Dictionnaire des donnes ................................................................................................. 31
3.2 Diagramme de classes ...................................................................................................... 31
4. Diagrammes dactivits ......................................................................................................... 32
4.1 Diagramme dactivits Grer les utilisateurs ............................................................. 32
4.2 Diagramme dactivits Grer les cours ...................................................................... 33
4.3 Diagramme dactivits Grer les devoirs ................................................................... 34
Conclusion ................................................................................................................................. 34
Chapitre IV : Ralisation ............................................................................................................ 36
Introduction................................................................................................................................ 36
1. Etude technique ................................................................................................................... 36
1.1 Matriels de base ............................................................................................................. 36
1.2 Choix du CMS (Content Management System) .............................................................. 36
1.3 Outils de dveloppement.................................................................................................. 38
1.4 Langages de dveloppement ............................................................................................ 40
2. Architecture gnrale de lapplication ................................................................................... 40

3. Prsentation des interfaces ..................................................................................................... 42


3.1 Scnario Administrateur ............................................................................................ 43
3.2 Scnario Tuteur .......................................................................................................... 47
3.3 Scnario Apprenant .................................................................................................... 50
4. Apports .................................................................................................................................. 53
4.1 Apports au niveau des connaissances techniques ............................................................ 53
4.2 Apports au niveau de la conception et du dveloppement............................................... 54
Conclusion ................................................................................................................................. 54
Conclusion et perspectives .......................................................................................................... 55
Bibliographie................................................................................................................................ 57
Webographie ................................................................................................................................ 58
Annexes ........................................................................................................................................ 60
Annexe A ................................................................................................................................... 60
Annexe B ................................................................................................................................... 65

Liste des figures


Figure 1: Organigramme du CNI .........................................................................................................4
Figure 2: Diagramme globale des cas dutilisation ............................................................................17
Figure 3: Cas dutilisation Sauthentifier .....................................................................................20
Figure 4: Diagramme de squence Authentification ...................................................................21
Figure 5: Cas dutilisation Grer le profil ....................................................................................22
Figure 6: Cas dutilisation Grer blog ..........................................................................................23
Figure 7: Cas dutilisation Grer wiki ..........................................................................................23
Figure 8: Cas dutilisation Grer la plateforme ............................................................................24
Figure 9: Cas dutilisation Grer les ressources ...........................................................................25
Figure 10: Cas dutilisation Grer les sondages ...........................................................................26
Figure 11: Cas dutilisation Grer les utilisateurs ........................................................................26
Figure 12: Diagramme de squence Ajout dun utilisateur ..........................................................27
Figure 13: Cas dutilisation Grer les tests ..................................................................................28
Figure 14: Cas dutilisation Grer les devoirs ..............................................................................29
Figure 15: Cas dutilisation Se communiquer ..............................................................................29
Figure 16: Cas dutilisation Grer les cours .................................................................................30
Figure 17: Diagramme de classes.......................................................................................................31
Figure 18: Diagramme dactivit Grer les utilisateurs ................................................................32
Figure 19: Diagramme dactivit Grer les cours .........................................................................33
Figure 20: Diagramme dactivit Grer les devoirs .......................................................................34
Figure 21: Architecture 3-tiers ...........................................................................................................41
Figure 22: Architecture MVC ............................................................................................................41
Figure 23: Page daccueil ...................................................................................................................43
Figure 24: Installation dun composant ..............................................................................................44
Figure 25: Paramtrage du composant install ..................................................................................44
Figure 26: Changer le thme ..............................................................................................................45
Figure 27: Lajout dun service ..........................................................................................................45
Figure 28: Lajout dun utilisateur .....................................................................................................46
Figure 29: Configuration des permissions des utilisateurs.................................................................46

Figure 30: Lajout dun sondage ........................................................................................................47


Figure 31: Grer blog .........................................................................................................................48
Figure 32: Ajout dun cours ...............................................................................................................48
Figure 33: Ajout dun devoir ..............................................................................................................49
Figure 34: Ajout dun vnement au calendrier partag ....................................................................49
Figure 35: Affichage dun vnement au calendrier ..........................................................................49
Figure 36: Communication Forum ...............................................................................................50
Figure 37: Grer le profil ...................................................................................................................51
Figure 38: Communication Chat ..................................................................................................51
Figure 39: Liste des cours ..................................................................................................................52
Figure 40: Tlchargement dun cours...............................................................................................52
Figure 41: Partage sur les mdias sociaux .........................................................................................52
Figure 42,43: Suivre la plateforme sur mdias sociaux .....................................................................52
Figure 45: Participation un sondage ................................................................................................53

Liste des tableaux


Tableau 1: Planning prvisionnel .........................................................................................................8
Tableau 2: Comparaison des solutions existantes ..............................................................................12
Tableau 3: Identification des cas dutilisation....................................................................................15
Tableau 4: Matriels de base ..............................................................................................................36
Tableau 5: Comparaison entre des CMS ............................................................................................37

Introduction gnrale

Introduction gnrale
Internet forme, lducation se transforme
Par Mario Asselin

LInternet a rvolutionn le monde des ordinateurs et des communications comme rien


dautre auparavant. En effet, elle est la fois une capacit de diffusion dans le monde entier, un
mcanisme de distribution de l'information et un moyen de collaboration et d'interaction entre les
individus et leurs ordinateurs, peu importe l'emplacement gographique.
Par ailleurs, lexplosion des mdias sociaux modifie profondment internet et ses usages.
S'il est courant pour des adultes d'utiliser titre personnel ou professionnel les mdias sociaux, il
en va autrement dans les milieux ducatifs, la formation continue ou professionnelle. Et pour
servir mieux encore lorganisation, elle se doit dtre la hauteur des ambitions quelle porte :
rapidit, flexibilit, efficacit et rentabilit. Pour y faire face, le systme traditionnel de
formation par son approche prsentielle, conditionn par lunit de temps et de lespace semble
tre insuffisant pour rpondre ce grand dfi do la ncessit dune nouvelle approche qui est le
social Learning.
Les tuteurs, nont plus le monopole de la transmission Lapprenant 2.0 ne se limite pas
utiliser Internet pour consulter des pages web ; sil a commenc par changer du courriel et des
messages textes, il exploite maintenant les possibilits quoffre le World Wide Web dans les
deux sens, consultation et diffusion.
Bien que lenseignement par internet (ou tl-enseignement ou e-Learning) souffre de
carences principalement lis l'absence relative de l'enseignant et donc la difficult
d'adaptation de l'enseignement au niveau et au comportement de l'apprenant, il constitue un des
moyens pdagogiques actuels et prometteurs.
Le social learning devrait venir complter loffre existante de formations classiques,
prsentiels et e-learning. Lun des problmes du e-learning est bien souvent, larrt en cours de
formation. Les apprenants ne vont pas au bout de leur apprentissage. En effet, seuls face leurs
crans, ils ne trouvent pas la motivation pour samliorer. Le social learning permet aux

Introduction gnrale
apprenants de discuter, dchanger propos de la formation et de progresser ensemble.
Limportant est donc de donner des outils pour lier les gens les uns aux autres afin quils se
parlent et sauto-forment.
Pour ce fait le Centre National dInformatique, CNI, a dcid dinformatiser la formation
quil offre aux personnels de ltat qui souhaitent bnficier du cours acclrs en informatique.
Il nous a confi la tche de concevoir et de dvelopper une plateforme Social Learning.
Dans ce contexte vient s'inscrire notre projet de fin d'tudes de licence en informatique
spcialit Systmes Informatique et Logiciel (SIL) l'Institut Suprieur de lInformatique (ISI).
Et cela constitue, une occasion pour appliquer ce que nous avons tudi au cours de notre
processus de formation et mettre en uvre nos connaissances dans les diffrentes phases de
dveloppement.
Le prsent rapport sarticule autour de quatre chapitres. Nous commencerons par le
chapitre Etude pralable et tat de l'art qui localise le contexte gnral du notre projet et met
laccent sur le champ dtude de notre application qui est lapprentissage social.
Le deuxime chapitre Analyse et spcification des besoins ddi ltude de lexistant ou
nous prsenterons une synthse des solutions existantes sur le march en discutant les avantages
et les inconvnients de chacune delles. Puis, nous formulerons les principales fonctionnalits de
la solution raliser.
A la lumire de ce chapitre, nous entamerons le troisime chapitre intitul Conception, dans
lequel nous prsenterons la notation de modlisation utilise ainsi que lensemble des
diagrammes conus.
Conclurons avec le quatrime chapitre Ralisation qui sera consacr ltude technique ou
nous dtaillerons notre environnement de travail suivis

dune

prsentation des diffrents

fonctionnalits de notre plateforme Social Learning travers des capture dcran.

Chapitre I

Etude pralable et tat de


lart

Chapitre I: Etude pralable et tat de lart

Introduction
Ltude pralable constitue une tape prliminaire pour la ralisation de notre plateforme. Tout
dabord, nous commenons par la prsentation de lorganisme daccueil. Ensuite, nous passons
la dfinition des objectifs atteindre, ainsi que notre champ dtude.

1. Prsentation de lorganisme daccueil


1.1 Prsentation gnrale du Centre National de lInformatique
(CNI)
Le CNI est un tablissement public caractre non administratif, dot de la personnalit civile et
de lautonomie financire.
Les principales missions du CNI sont:

Infogrance des systmes dinformation nationaux de ladministration

Mise en uvre et dploiement de le-administration

Fixation et proposition des mthodes et des normes dingnierie et techniques

Matrise douvrage dlgue

Assistance des utilisateurs

Ralisation dtudes : orientation, stratgie et mission daudit informatique

Formation dans le domaine de linformatique au profit des tablissements publics

Le CNI est un renfort au secteur priv dans le cadre du partenariat tenant compte des orientations
nationales [10].

1.2 Organigramme

Figure 1: Organigramme du CNI


4

Chapitre I: Etude pralable et tat de lart

2. Prsentation du projet
2.1 Description du projet
Le systme consiste mettre en place, sur le site web du CNI, une plateforme sociale Learning
pour le compte des personnels de ltat qui souhaitent bnficier du cours acclrs en
informatique chez le CNI.

2.2 Objectifs du projet


Dans un secteur o les contraintes de formation en prsentiel sont importantes (disponibilit, le
frais de dplacement, etc.), le concept de la formation distance offre des rponses
complmentaires et une plus grande flexibilit au apprenant qui pourra se former son rythme en
fonction de ses disponibilits.
Notre objectif consiste crer une plateforme du social Learning qui rpond au besoin du tuteur
et des apprenants la fois et de manire :

Favoriser une pdagogie socioconstructiviste (collaboration, activits, rflexion critique,


etc.),

Garantir plus de souplesse pour la planification des formations laide dune interface
ergonomique, lgre, efficace, compatible -sans ncessit d'un navigateur rcent- et
simple manipuler pour les diffrents utilisateurs,

Faciliter laccs aux ressources et services,

Offrir aux apprenants un espace dapprentissage individualis,

Faciliter le partage, la production, la communication et la collaboration distance,

Offrir un accs aux fonctionnalits ncessaires des rseaux sociaux et des services web
2.0.

3. Etat de lart
3.1 C'est quoi, une plate-forme d'apprentissage en ligne?
Une plateforme d'apprentissage en ligne, appele encore LMS (Learning Management System),
est un site web qui hberge le contenu didactique et facilite la gestion de l'apprentissage et la
mise en uvre de stratgies pdagogiques. On trouve aussi les appellations de Centre de
formation virtuel ou de Plate-forme e-learning (FOAD).
5

Chapitre I: Etude pralable et tat de lart


Une plateforme e-learning (ou LMS) est un produit driv des logiciels CMS (Content
Management System) mais prsente des fonctions diffrentes pour la pdagogie et
l'apprentissage [3].

3.2 E-learning
Le E-learning, ou formation en ligne, est une technique de formation reposant sur la mise
disposition de contenus pdagogiques via un support lectronique : Cd-rom, Internet, intranet,
extranet, etc.
Le E-learning dsigne les outils, les applications et lensemble des contenus mis disposition
dun stagiaire dans le but dune formation pdagogique. Longtemps rduites des supports cdrom, le E-learning a volu et utilise dornavant le web et diffrentes applications.
Contrairement ce que lon pourrait penser, la formation en ligne nest pas synonyme
disolement. Cette solution permet aussi de nombreuses possibilits dchange et dinteractivit
[7].

3.3 Blended Learning


Le Blended-learning (galement appel formation mixte) est un dispositif de formation alliant
diffrents modes de formation, afin doffrir lapprenant le moyen de formation le plus complet
du march.
Le mot Blended learning vient de langlais blend qui signifie mlange, et learning
signifie apprentissage.
Le Blended learning permet donc dassocier des cours danglais par tlphone, des cours
danglais online, des mails lessons, du mobile learning, des cours danglais particuliers en face-face et encore des cours danglais collectifs [8].

3.4 Web 2.0


Le Web 2.0 ne peut pas tre rsum une technologie ou une technique, c'est un ensemble de
bons procds qui suivent une volution logique du Web. C'est une notion (un concept) qui n'a
pas vraiment une dfinition mais plusieurs, ce terme a t invent par O'reilly dans son fameux
post what is Web 2.0 .

Chapitre I: Etude pralable et tat de lart


On peut rsumer le "concept" Web 2.0 en deux aspects : l'un qui est technique et l'autre qui est
plus li la communication et le partage :

Au niveau technique le Web 2.0 correspond ce que l'on peut appeler les interfaces
enrichies (Ajax, Flash 8, Ruby on Rails, etc.). Tous ces outils techniques, ont pour but de
faciliter la navigation et l'ergonomie

Au niveau communication cela correspond au partage et la diffusion dinformation


(blog, rss, utilisation dapi, portail communautaire, forum, folksonomie, wiki) mais
aussi au marketing viral [12]

Les notions fondamentales sont :

les interactions entre internautes (collaboration, partage, communaut, rseau)

l'interaction avec les contenus proposs en ligne (possibilit d'intervenir sur les contenus)

l'ouverture (possibilit facile et rapide d'entrer et de sortir des contenus)

la gratuit de la plupart des services

l'accessibilit (sites visibles sur les navigateurs standards, applications en ligne) [14]

3.5 Le social Learning (Lapprentissage social)


Le social Learning est un mode dapprentissage qui permet de partager, de construire, de
collaborer avec dautres distance via des outils collaboratifs (wiki, chat, forum, blog,) ou des
rseaux sociaux dentreprises [6].
Cest lvolution du blended Learning, ce dernier mlange la formation classique et le e-learning.
Il permet, par exemple, aux apprentis de poursuivre la discussion lorsquelle est termine. Mais,
pour une entreprise, le vritable avantage tient dans le bnfice. En effet, les collaborateurs bien
forms seront plus mme de proposer des solutions intelligentes et efficaces aux clients.
Daprs Frdric Domon directeur de lagence Social Learning Le social Learning peut tre
considr comme laccroissement des connaissances, des comptences et des comportements par
la connexion des autres, que ce soient des collaborateurs, des conseillers ou des experts via les
mdias lectroniques [9].
Le Social Learning permet de dvelopper les connaissances, les attitudes et les aptitudes par la
connexion aux autres (collgues, mentors ou experts) via les mdias numriques synchrones ou
asynchrones.

Chapitre I: Etude pralable et tat de lart


Lapprenant nest plus uniquement destinataire du savoir dispens par lenseignant mais il
devient acteur du dispositif denseignement. Il participe son propre apprentissage et collabore
avec lenseignant et les autres apprenants. Enfin, il partage son savoir et ses connaissances [6].

4. Planning
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 assez de visibilit permettant destimer
approximativement la date dachvement de chaque tche.
Dans notre projet, nous avons estim de raliser notre application dans une dure approximative
de trois mois. Le tableau ci-dessous montre le planning que nous avons adapt pour mener bien
notre ralisation des diffrentes parties du projet.
Semaine
Etape

Fvrier
1

Mars
4

Avril
4

Mai
4

Etude pralable
Conception
Ralisation
Test et validation
Rdaction du rapport
Tableau 1: Planning prvisionnel

Conclusion
A travers ce chapitre nous avons tent de prsenter de manire synthtique lactivit du CNI
ainsi que le cadre de notre projet.
Dans le chapitre qui suit, nous passerons lanalyse et le critique de lexistant afin de mieux
comprendre le comportement de notre projet et mieux assimiler ses exigences.
.

Chapitre II

Analyse
&
Spcification des besoins

Chapitre II: Analyse et spcification des besoins

Introduction
Ltape danalyse et de spcification des besoins joue un rle important dans le cycle de
dveloppement des systmes dinformations. Cette phase permet dclaircir au mieux les besoins
fonctionnels et non fonctionnels attendus du systme afin davoir une meilleure comprhension
du sujet.

1. Etude de lexistant
Lanalyse de lexistant comprend principalement trois parties qui sont la description de
lexistant, la critique de lexistant et la solution propose.

1.1 Description de lexistant


La formation continue au CNI se fait actuellement de faon traditionnelle: cours, apprenants et
tuteurs sur place.
Dans le but de rsoudre ces inconvnients plusieurs plateformes de formation en ligne se
subdivisent en plateformes propritaires et plateformes libres .
a) Plateformes propritaires :
DIDACTI: Une plateforme pdagogique o enseignants et lves viennent dposer des
contenus sous forme dactivits dapprentissages pour ensuite les partager puis crer
une interactivit [3].
WebCT: Une plate-forme dveloppe par

l'informaticien Murray W. Goldberg

l'Universit de Colombie-Britannique. la suite de recherche sur l'application des


technologies Web la pdagogie, Goldberg constate que la satisfaction et la
performance acadmique pourraient tre grandement rehausses par des systmes
fonds sur des pages Web. Il dveloppe la premire version de WebCT [3].

b) Plateformes libres :
Moodle: Une plateforme d'apprentissage en ligne (e-learning en anglais) sous licence
"open source" servant crer des communauts d'apprenants autour de contenus et
d'activits pdagogiques [3].

11

Chapitre II: Analyse et spcification des besoins


LUniversit Virtuelle de Tunis (UVT) dispose un Environnement de Travail
Numrique (ENT) accessible aux tudiants et aux enseignants tunisiens, cet
environnement est dispens sur la plateforme Moodle.
Chamilo : Une plateforme qui vous permet d'implmenter une institution ducative
virtuelle en quelques tapes simples, ou d'enrichir vos cours prsentiels grce un
portail web accessible partout, tout le temps [3].

1.2 Critique de lexistant


Le tableau ci-dessous rcapitule les avantages et les inconvnients de toutes les plateformes
traites.
Plateformes

Didacti

Avantages

- Rseau

social focalis web

2.0

Inconvnients

- Version gratuite rduite


- Encore

en construction,

pas

trs connue
WebCT

- Rpond

la demande, trs

stable, interface agrable

- Accs interdit au code source


- Donnes

contenues dans des

fichiers

textes

(moins

performant quune base de


donnes)
Moodle

- Logiciel libre et gratuit


- Intgration

possible dans un

- Interface

moins

conviviale

quun blog

ENT
Chamilo

- Une

version gnrique qui

- Bien

qu'intuitive et agrable,

comprend dj de nombreux

l'interface de Chamilo n'est

outils intgrs

pas non plus mtaphorique.

- Une inspiration web 2.0 avec


des outils sociaux intgrs

Les

fonctionnalits

et

l'ergonomie sont globalement


les mmes que sur Moodle ou
toute

autre

plateforme

12

Chapitre II: Analyse et spcification des besoins


textuelle
Tableau 2: Comparaison des solutions existantes
Comme le montre le tableau ci-dessus, les solutions existantes des formations distance sur le
march proposent diffrents fonctionnalits de base (Chat, sharing, etc.). Cependant, elles
possdent des inconvnients.

1.3 La solution propose


Ltude lexistant nous a permis de dgager plusieurs anomalies que nous avons dtailles dans
la section prcdente. Pour faire recours ces anomalies nous proposons de concevoir et
dimplmenter une plateforme social-Learning pour le compte des personnels de l'tat qui
souhaitent bnficier du cours acclrs en informatique chez le CNI.

2. Spcification des exigences


Dans cette section nous identifions une liste dexigences fonctionnelles et non fonctionnelles du
systme concevoir. Certaines exigences sont ajoutes pour clarifier davantage les besoins des
utilisateurs.

2.1 Etude des besoins fonctionnels


Les besoins fonctionnels reprsentent les attentes de chaque acteur de la future plate-forme.
Toute solution conceptuelle doit satisfaire, pralablement, des besoins fonctionnels afin de
dlimiter le primtre fonctionnel de lapplication et surveiller la traabilit des besoins lors de la
phase de dveloppement.
La prsente plateforme doit satisfaire les besoins fonctionnels suivants :
La gestion des utilisateurs,
La gestion des cours,
La gestion des devoirs,
La gestion des tests,
La gestion des notes,
La gestion des actualits,

13

Chapitre II: Analyse et spcification des besoins


La gestion des ressources,
La gestion de la communication entre les utilisateurs,
La gestion des sondages,
La gestion des blogs,
La gestion des wikis,
La gestion des services web.

2.2 Etude des besoins non fonctionnels


Un besoin non fonctionnel est une restriction ou une contrainte qui pse sur un service du
systme, telle les contraintes lies lenvironnement et limplmentation et les exigences en
matire de performances.
Les besoins non fonctionnels :

Le code doit tre clair pour permettre des futures volutions ou amliorations,

La plateforme doit fournir un accs rapide aux informations, et doit faire la mise jour en
temps rel,

La plateforme doit tre portable, extensible, rutilisable et fiable,

La plateforme offre une interface conviviale et facile utiliser,

La plateforme doit garantir la confidentialit, lintgrit et la cohrence des donnes.

2.3 Les acteurs systme


Un acteur reprsente labstraction dun rle jou par des entits externes (utilisateur, dispositif
matriel ou autre systme) qui interagissent directement avec le systme tudi.
Les acteurs interagissant avec notre systme sont :

Administrateur : cest le responsable de ladministration du site de tlformation.

Tuteur : anime des formations dans le salon de formation.

Apprenant : assiste une formation dans le salon de formation.

2.4 Identification des cas d'utilisation


Un cas d'utilisation dfinit une manire d'utiliser le systme et permet d'en dcrire les exigences
fonctionnelles. Chaque cas d'utilisation contient un ou plusieurs scnarios qui dfinissent
comment le systme devrait interagir avec les utilisateurs (appels acteurs) pour atteindre un but
14

Chapitre II: Analyse et spcification des besoins


ou une fonction spcifique d'un travail. Un acteur d'un cas d'utilisation peut tre un humain ou un
autre systme externe celui que l'on tente de dfinir. Il permet d'adopter le langage de
l'utilisateur final ou de l'expert du domaine. Chaque cas d'utilisation est reprsent au sein d'un
diagramme de cas d'utilisation.

Cas dutilisation

Acteurs

Grer son profil (crer compte, indiquer son propre fuseau horaire,
ajouter photo, choisir la langue de l'interface, mettre jour ses
informations, etc.)

Administrateur

Sauthentifier

Grer la plate-forme(les thmes, les composants, les services web,


etc.)

Grer les utilisateurs (Ajouter, supprimer, grer les droits daccs,


etc.)

Grer les ressources (Ajouter, supprimer, etc.)

Grer les sondages (crer, consulter, supprimer, etc.)

Grer les blogs (crer, partager, etc.)

Grer les wikis (rdiger, distribuer, etc.)

Grer son profil (crer compte, indiquer son propre fuseau horaire,
ajouter photo, choisir la langue de l'interface, mettre jour ses
informations, etc.)

Sauthentifier

Grer les cours (ajouter, modifier, grer leurs droits daccs, etc.)

Grer ses apprenants (dsigner manuellement ses apprenants,

Tuteur

dsinscrire manuellement des apprenants de ses cours, etc.)

Se communiquer (tchatcher avec les apprenants au cours dune


formation, participer des forums, etc.)

Grer les notes (dfinir son propre barme pour les notes, etc.)

Grer les sondages (crer, consulter, supprimer, etc.)

Participer un sondage
15

Chapitre II: Analyse et spcification des besoins

Grer les tests (dfinir une base de donne de question, supprimer,


modifier, consulter, etc.)

Grer les ressources (dposer, modifier, grer les droits daccs,


etc.)

Grer les wikis (crer, partager, etc.)

Grer les blogs (crer, partager, etc.)

Se bnficier des principaux services web

Grer son profil (crer compte, indiquer son propre fuseau horaire,
ajouter photo, choisir la langue de l'interface, mettre jour ses
informations, etc.)

Sauthentifier

Se communiquer (tchatcher avec les apprenants au cours dune

Apprenant

formation, participer des forums, etc.)

Se bnficier des principaux services web

Participer un sondage

Passer des tests

Passer des devoirs

Grer les wiki (rdiger, distribuer, etc.)

Grer les ressources sur le serveur (dposer, modifier, grer les


droits daccs, etc.)

Tlcharger un cours

Tableau 3: Identification des cas dutilisation

2.5 Diagramme globale des cas dutilisation


Une fois les diffrents cas dutilisation identifis, nous pouvons laborer le diagramme des cas
dutilisation qui met en relation les acteurs et les cas dutilisation quils utilisent.

16

Chapitre II: Analyse et spcification des besoins

Figure 2: Diagramme globale des cas dutilisation

3. Identification des risques


Afin dassurer le bon fonctionnement du projet, il faut prendre en considration un certain
nombre de contraintes :

Non matrise des outils de dveloppement : le fait de ne pas matriser quelques outils de
dveloppement nous amne passer un temps important pour apprendre et matriser ces
outils.

Risque de crer une architecture inadapte

17

Chapitre II: Analyse et spcification des besoins

Conclusion
Dans ce chapitre nous avons entam la phase danalyse et de spcification des besoins.
En effet, ltude de lexistant nous a permis de prparer une tude conceptuelle de la solution
propose mettre en place.

18

Chapitre III

Conception

Chapitre III: Conception

Introduction
Afin datteindre les objectifs de notre projet, et aprs lanalyse et la spcification des besoins de
notre future systme, nous nous focalisons dans ce chapitre la conception.

1. Choix de la mthodologie de conception :


Dans la cadre de notre projet, nous avons opt pour le langage UML comme un langage de
conception.
UML (Unified Modeling Language, traduisez langage de modlisation objet unifi ) est n de
la fusion des trois mthodes qui ont le plus influenc la modlisation objet au milieu des annes
90 : OMT, Booch et OOSE [15].

2. Raffinement des cas dutilisation


Dans le but de mieux comprendre notre systme et les interactions avec les utilisateurs, dans
cette partie nous allons dtailler les scenarios de principaux cas dutilisation

2.1. Cas dutilisation Sauthentifier

Figure 3: Cas dutilisation Sauthentifier


CU1: Sauthentifier
Rsum: Ce CU1 permet lacteur daccder son espace personnel
Acteurs: administrateur, tuteur, apprenant
Pr-condition: Lacteur doit tre un membre enregistr dans la plateforme
Post-Condition: le cas dmarre aprs le point 02 de lenchainement nominal.
Scnario nominal:
DEBUT
20

Chapitre III: Conception


01 : Le systme affiche un formulaire de connexion lacteur.
02 : lacteur saisit son nom ainsi que son mot de passe.
03: Le systme vrifie les paramtres.
04 : Le systme ouvre l'espace de travail correspondant au profil.
FIN
Scenario alternative :
Le login ou le mot de passe est incorrect: ce scnario commence au point 03 du scnario
nominal.
01: Le systme informe lacteur que les donnes saisies sont errones et lui demande sil veut
changer son mot de passe.

Diagramme de squence :

Figure 4: Diagramme de squence Authentification

21

Chapitre III: Conception

2.2 Cas dutilisation Grer le profil

Figure 5: Cas dutilisation Grer le profil


CU2: Grer le profil
Rsum: Ce CU2 permet lacteur de mettre jour ses informations.
Acteurs: administrateur, tuteur, apprenant
Pr-condition: Lacteur doit tre un membre identifi.
Post-Condition: le cas dmarre aprs le point 02 de lenchainement nominal.
Scnario nominal:
DEBUT
01 : le systme affiche le profil actuel de lacteur.
02 : lacteur met jour ses informations.
03 : le systme vrifie la validit des informations saisies.
04 : le systme enregistre ces informations dans la base de donnes.
05 : le systme notifie lacteur du bon droulement de mise jour de son profil.
FIN
Scenario alternative :
les informations sont manquantes ou incorrectes: ce scnario commence au point 03 du
scnario nominal.
01 : Le systme informe lacteur que les donnes saisies sont errones, garde les informations
saisies avant et le scnario reprend au point 02 du scnario nominal.

22

Chapitre III: Conception

2.3 Cas dutilisation Grer blog

Figure 6: Cas dutilisation Grer blog

CU3 : Grer blog


Rsum: Ce CU3 permet lacteur de crer, supprimer, modifier ou commenter son blog.
Acteurs: administrateur, tuteur
Pr-condition: Lacteur doit tre connect.

2.4 Cas dutilisation Grer wiki

Figure 7: Cas dutilisation Grer wiki


23

Chapitre III: Conception


CU4 : Grer wiki
Rsum: Ce CU4 permet lacteur de crer, supprimer, modifier ou commenter un article.
Acteurs: administrateur, tuteur, apprenant
Pr-condition: Lacteur doit tre connect.

2.5 Cas dutilisation Grer plateforme

Figure 8: Cas dutilisation Grer la plateforme


CU5: Grer la plateforme
Rsum: Ce CU5 permet ladministrateur de modifier la composition interne de la plateforme.
Acteurs: administrateur
Pr-condition: Lacteur doit tre connect.
Post-Condition: le cas dmarre aprs le point 02 de lenchainement nominal.
Scnario nominal:
DEBUT
01 : le systme affiche ltat actuel de la plateforme.
02 : lacteur met jour la plateforme.
03 : le systme vrifie la validit des mis jour.

24

Chapitre III: Conception


04 : le systme enregistre les mis jours dans la base de donnes.
05 : le systme notifie lacteur du bon droulement de mise jour de la plateforme.
FIN
Scenario alternative :
les informations sont manquantes ou incorrectes: ce scnario commence au point 03 du
scnario nominal.
01: Le systme informe lacteur que les mis jour sont errones, garde ltat de la plateforme

2.6 Cas dutilisation Grer les ressources

Figure 9: Cas dutilisation Grer les ressources

CU6: Grer les ressources


Rsum: Ce CU6 permet aux acteurs darchiver des fichiers textuels, visuels, sonores
et audio-visuels sur la plateforme.
Acteurs: administrateur, tuteur, apprenant
Pr-condition: Lacteur doit tre connect.

25

Chapitre III: Conception

2.7 Cas dutilisation Grer les sondages

Figure 10: Cas dutilisation Grer les sondages


CU7: Grer les sondages
Rsum: Ce CU7 permet de crer, modifier et supprimer des sondages.
Acteurs: administrateur, tuteur
Pr-condition: Lacteur doit tre connect.

2.8 Cas dutilisation Grer les utilisateurs

Figure 11: Cas dutilisation Grer les utilisateurs


CU8: Grer les utilisateurs
Rsum: Ce CU8 permet lacteur dajouter et de supprimer un utilisateur.
Acteurs: administrateur, tuteur
Pr-condition: Lacteur doit tre connect.
Post-Condition: Le cas dmarre aprs le point 02 de lenchainement nominal.
Scnario nominal dajout dun utilisateur:
26

Chapitre III: Conception


DEBUT
01: Le systme affiche un formulaire dinscription lacteur.
02: Lacteur saisit les informations du nouvel utilisateur et lui affecter un rle.
03 : Le systme vrifie la validit des informations saisies.
04: Le systme enregistre ces informations dans la base de donnes.
05: Le systme notifie lacteur du bon droulement de linscription.
FIN
Scenario alternative :
les informations sont manquantes ou incorrectes: ce scnario commence au point 03 du
scnario nominal.
01: Le systme informe lacteur que les donnes saisies sont errones et le scnario reprend au
point 02 du scnario nominal.

Diagramme de squence :

Figure 12: Diagramme de squence Ajout dun utilisateur

27

Chapitre III: Conception

2.9 Cas dutilisation Grer les tests

Figure 13: Cas dutilisation Grer les tests


CU9: Grer les tests
Rsum: Ce CU9 permet lacteur dajouter, dannuler et modifier un test.
Acteurs: tuteur
Pr-condition: Lacteur doit tre connect.
Scnario nominal dajout dun test:
DEBUT
01: Lacteur saisit les questions en indiquant la vraie rponse et en prcisant un barme.
02: Lacteur configure les droits daccs au test.
03: Lacteur enregistre le test dans la base de donnes.
04: Lacteur ajoute le test au calendrier partage et notifie les apprenants de lajout du test.
FIN

28

Chapitre III: Conception

2.10 Cas dutilisation Grer les devoirs

Figure 14: Cas dutilisation Grer les devoirs

2.11 Cas dutilisation Se communiquer

Figure 15: Cas dutilisation Se communiquer


29

Chapitre III: Conception

2.12 Cas dutilisation Grer les cours

Figure 16: Cas dutilisation Grer les cours

CU13: Grer les cours


Rsum: Ce CU13 permet lacteur dajouter, dannuler et modifier un cours.
Acteurs: tuteur
Pr-condition: Lacteur doit tre connect.
Scnario nominal dajout dun cours:
DEBUT
01: Le systme affiche deux mthodes dajout dun cours.

<mthode1: Crer un cours>


02: Lacteur saisit le contenu du cours.

<mthode2: tlverser un cours>


02: Lacteur tlverse le cours.
03: Lacteur configure les droits daccs son cour.
04 : Lacteur enregistre le cours dans la base de donnes de la plateforme.
FIN

30

Chapitre III: Conception

3. Modlisation conceptuelle des donnes


La modlisation conceptuelle des donnes donne une vue statique du systme permettant de
dcrire le systme dinformation laide des concepts proposs par le modle UML.

3.1 Dictionnaire des donnes


Le dictionnaire des donnes (voir annexe A) reprsente la liste des attributs composants toutes
les classes formants notre systme ainsi que leurs descriptions, leurs tailles et leurs types.

3.2 Diagramme de classes


La figure ci-dessous reprsente le diagramme de classes qui contient toutes les informations
telles que les classes, les mthodes, les associations et les proprits.

Figure 17: Diagramme de classes


31

Chapitre III: Conception

4. Diagrammes dactivits
Le diagramme dactivits 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.

4.1 Diagramme dactivits Grer les utilisateurs

Figure 18: Diagramme dactivit Grer les utilisateurs

La figure ci-dessus illustre le droulement squentiel de la gestion des utilisateurs accomplis par
un administrateur ou bien un tuteur.
Aprs avoir sauthentifi, ces derniers peuvent ajouter ou supprimer un utilisateur.
Pour lajout dun utilisateur, le systme doit vrifier la validation des informations saisies. Au
cas o une information nest pas valide, le systme raffiche linterface dajout dun utilisateur.

32

Chapitre III: Conception

4.2 Diagramme dactivits Grer les cours

Figure 19: Diagramme dactivits Grer les cours

La figure ci-dessus illustre le droulement squentiel de la gestion des cours accomplis par un
tuteur.
Aprs avoir sauthentifi, un tuteur peut ajouter, modifier ou supprimer un cours. Au cas dajout
ou de modification du cours, le tuteur doit ajouter cet vnement au calendrier partag pour
informer les apprenants du changement.

33

Chapitre III: Conception

4.3 Diagramme dactivits Grer les devoirs

Figure 20: Diagramme dactivits Grer les devoirs


La figure ci-dessus illustre le droulement squentiel de la gestion des devoirs accomplis par un
tuteur.
Aprs lauthentification, un tuteur peut ajouter ou annuler un devoir. Au cas dajout, il faut lui
indiquer un dlai de remise, lui affecter un barme et lui configurer les droits daccs.
Finalement, et cest le cas dannulation aussi, le tuteur doit ajouter lvnement au calendrier
partag pour informer lapprenant du changement.

Conclusion
Dans ce chapitre, nous avons prsent une vue conceptuelle du systme raliser. Ainsi, on a pu
dfinir le diagramme de classe, les diagrammes dtaills des cas dutilisation de notre projet,
suivis de quelques diagrammes de squences et dactivits. Nous pouvons entamer la phase
suivante qui est la phase de ralisation de la solution.
34

Chapitre IV

Ralisation

Chapitre IV: Ralisation

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.
Nous menons tout dabord une tude technique o nous dcrivons les ressources logicielles et
matrielles utilises dans le dveloppement de notre projet. Puis nous dtaillons larchitecture,
aussi nous prsentons quelques interfaces ralises pour illustrer le fonctionnement de quelques
activits du systme.

1. Etude technique
L'tude technique est une phase d'adaptation de conception l'architecture technique. Cette
tude, qui suit l'tude dtaille, constitue le complment de spcification informatique ncessaire
pour assurer la ralisation du futur systme.

1.1 Matriels de base


Le dveloppement de lapplication est ralis via deux ordinateurs portables ayant les
caractristiques suivantes :
Caractristique

DELL Inspiron N5010

Marque

Dell

Processeur

Intel Core i3 CPU

RAM

3 Go

Disque dur

300 Go

Systme dexploitation

Microsoft Windows 7 Edition Intgrale 32


bits
Tableau 4: Matriels de base

1.2 Choix du CMS (Content Management System)


Nous avons fait une analyse comparative parmi trois "leaders" actuels du march et ceux les plus
utilis en excluant Wordpress volontairement qui lui est destin des sites internet de type blog
[2].

36

Chapitre IV: Ralisation

CMS

Installation

Trs

Typo3

Joomla

Drupal

simple, Trs simple, installation Plusieurs

packages

installation en ligne trs en ligne trs intuitive

installer, ncessite des

intuitive

connaissances en gestion
de serveurs

Cration de

Il

faut

crer

dveloppement modules.

des Il

faut

crer

des Il

composants.

faut

crer

des

extensions.

sur mesure
Intgration
dune mise en

Systme de mise en Systme de mise en Langage de mise en page


page

mlangeant page mlangeant HTML spcifique bas sur des

page sur

HTML et PHP

mesure

Lintgrateur doit avoir Lintgrateur doit avoir


certaines

notions

PHP.

marqueurs personnaliss.

de certaines

notions

de

PHP.

Gestion

Oui

multisite

(mutualisation

Gestion

et PHP

en

natif Via

une

extension Oui

en

natif.

du payante JMS multi-sites (mutualisation du noyau)

noyau)

(49.99 )

Oui

Oui

Oui

multilingue
Tableau 5: Comparaison entre des CMS
Le tableau ci-dessus montre quil existe des CMS qui permettent de dvelopper des applications
web, les plus clbres parmi eux: Drupal, Joomla et Typo3, chaque technologies parmi les trois
possde des avantages bien que des inconvnients.
On a opt pour le dveloppement de notre systme Drupal comme CMS vu quil est bien plus
complet que Joomla et Typo3 ; il permet la gestion multisite gratuite (inconvnient pour Joomla)
ainsi quune trs simple installation (inconvnient pour Typo3 quil ncessite des connaissances
en gestion du serveur).

37

Chapitre IV: Ralisation

1.3 Outils de dveloppement


Les principaux outils de dveloppements utiliss pour llaboration de notre application sont
prsents comme suit :

BITNAMI
Bitnami est une solution simple et conviviale pour dployer
facilement vos applications web sans casse-tte.
En fait, Bitnami est un kit complet, comprenant l'application,
une base de donnes MySQL et le serveur web Apache pour
installer votre structure web clef en main.

XAMPP v3.2.1
XAMPP est un ensemble de logiciels permettant de mettre en place
facilement

un serveur

Web

confidentiel,

un serveur

FTP et

un serveur de messagerie lectronique. Il s'agit d'une distribution


de logiciels libres (X Apache MySQL Perl PHP) offrant une bonne
souplesse d'utilisation, rpute pour son installation simple et rapide.
Notre objectif avec Bitnami est de rendre les logiciels open source
facile installer et grer sur toutes les plateformes.
Nous avons tabli un partenariat avec Apache Friends au port de la bibliothque Bitnami
d'applications XAMPP, fournissant un moyen simple pour installer vos applications
prfres, y compris Drupal, Joomla, WordPress et beaucoup plus.
Cette distribution se chargera donc dinstaller lensemble des outils dont vous pourriez
avoir besoin lors de la cration dun site web. Plus de dizaines dutilitaires sont intgrs,
comme MySQL, PHP, Tomcat ou encore phpMyAdmin. Il est distribu avec diffrentes
bibliothques logiciels qui largissent la palette des services de faon notable : OpenSSL,
Expat (parseur XML), PNG, etc. [5]

38

Chapitre IV: Ralisation

Drupal 7.26
Drupal est un CMS (Content Management System) ou SGC
(Systme de Gestion de Contenu) utilis dans le monde entier grce
aux nombreux avantages qu'il offre lors du dveloppement ou de la
gestion d'un site internet. Sa caractristique principale est son
organisation modulaire. Bitnami Drupal est une version de ce
systme de gestion de contenu populaire.
Malgr sa popularit croissante, Drupal a un processus d'installation quelque peu avanc
d'une manire qui exclut certains utilisateurs expriment pour grer des serveurs et des
bases de donnes. Cest pourquoi il est conseill dutiliser Bitnami Drupal car ce pack facilite
grandement ce processus.
Binami Drupal ralise les configurations ncessaires sur la base de donnes de MySQL et sur
le serveur Apache. Le tout d'une manire compltement automatise, l'utilisateur n'a besoin
de que slectionner quelques options simples [17].

Photoshop cs6
Photoshop CC est au cur de la quasi-totalit des projets de
cration numrique. Lapplication de retouche dimages la plus
performante au monde
Vous permet damliorer, de retoucher et de manipuler vos clichs
et autres images comme bon vous semble [4].
Nous avons utilis Photoshop pour prparer une maquette qui
reprsente notre future interface (voir annexe B).

Star UML
StarUML est diteur graphique trs complet pour les programmeurs
pour concevoir des diagrammes UML, ainsi il permettra le design
des diagrammes de classes, composants, objets, paquets, structures,
modules, activits, tats, squences, communications, interactions,
temps, etc [18].

39

Chapitre IV: Ralisation

1.4 Langages de dveloppement


Les principaux langages de dveloppements utiliss pour llaboration de notre application sont
prsents comme suit :

PHP Version 5.5.9


PHP (HyperText Preprocessor) est un langage de programmation
qui sintgre dans vos pages HTML. Il permet entre autres de
rendre automatiques des tches rptitives, notamment grce la
communication avec une base de donnes (utilisation la plus
courante de PHP) [16].

CSS3
Littralement Cascading Style Sheets (feuilles de style en
cascade), CSS est un langage dclaratif simple pour mettre en
forme des pages HTML ou des documents XML. Le langage XSS
permet de prciser les caractristiques visuelles et sonores de
prsentation dune page web : les polices de caractres, les marges
et bordures, les couleurs, le positionnement des diffrents
lments, etc [13].

HTML 5
Le HyperText Mark-up Language HTML est un langage dit de
marquage (de structuration ou de balisage) dont le rle est de
formaliser lcriture dun document avec des balises de formatage Les
balises permettant dindiquer la faon dont doit tre prsent le
document et les liens quil tablit avec dautres documents [11].

2. Architecture gnrale de l'application


Le systme se compose dun ou plusieurs ordinateurs reli linternet. Larchitecture gnrale
de la plateforme permet de donner une vision de haut niveau du systme.
40

Chapitre IV: Ralisation


Lapplication ralise sera fonde sur larchitecture 3 tiers.

Figure 21 : Architecture 3-tiers


Le deux premiers tiers seront constitus l'aide de la suite XAMPP qui est compose:

du moteur de base de donnes mySQL,

du serveur Web Apache,

du prprocesseur PHP,

de l'outil d'administration phpMyAdmin.

Le troisime tiers, le client, sera un navigateur standard (Firefox, Chrome, IE, etc.):

recevant des pages HTML,

excutant des feuilles de style (CSS),

excutant des scripts JavasSript.

Dans la ralisation de notre projet, nous avons opt pour une architecture MVC (Modle, Vue,
Contrleur) afin de garantir une assurance de la maintenabilit, la modularit de lapplication et
la rapidit de dveloppement.

Figure 22 : Architecture MVC


41

Chapitre IV: Ralisation


Ce modle de dveloppement distingue 3 fonctionnalits :
a) La vue (V)
Elle reprsente ce qui est expos l'utilisateur, en gnral il s'agit de HTML statique ou
gnr par du PHP ; il y a deux sortes de vue :

Les pages d'information navigables grce des liens

Les formulaires de saisies d'informations; ces formulaires peuvent tre prsentes


plusieurs reprises pour confirmation ou signalement d'erreurs.

b) Le contrleur(C)
Ce sont les contrleurs qui vont tre l'coute des requtes de l'utilisateur et fournir ainsi
la vue externe correspondante. Pour cela, il faudra tout moment connatre l'tat de
l'application c'est dire le contexte de la demande : "la page demande fait suite
quelle action prcise de l'utilisateur?" C'est au contrleur de connatre l'tat applicatif en
testant une variable qui sera nomme $action, provenant d'une requte POST ou GET.
c) Le modle (M)
C'est la couche (bibliothque de fonctions ou de classes) qui accde la base de donnes.

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.
Nous nous proposons dans cette section de prsenter des scnarios dutilisation illustrs par des
interfaces graphiques relatives aux diffrents acteurs de notre plateforme.

42

Chapitre IV: Ralisation

Figure 23 : Page daccueil


partir de cette premire interface, un utilisateur (administrateur, tuteur et apprenant) pourra se
connecter. Il suffit dentrer un login et un mot de passe et cliquer sur le bouton log in pour
ouvrir sa session.

3.1 Scnario Administrateur


Soit le scnario suivant :
1) Ajouter un composant la plateforme et le configure.
43

Chapitre IV: Ralisation


2) Changer le thme de la plateforme.
3) Ajouter un service web la plateforme.
4) Ajouter un utilisateur.
5) Configurer les permissions des utilisateurs.
6) Ajouter un sondage.

Figure 24 : Installation dun composant


Cette interface permet ladministrateur dinstaller des composants (modules, thmes) dans la
plateforme.

Figure 25 : Paramtrage du composant install


Ces nouveaux composants doivent tre paramtrs selon les besoins de ladministrateur.
Cette interface montre les liens qui lui permettent de le faire partir de la liste des modules.

44

Chapitre IV: Ralisation

Figure 26 : Changer le thme


Seul ladministrateur peut changer le thme de la plateforme. Cette action peut se faire partir de
cette interface.
Le lien Set default permet ladministrateur de changer le thme en mettant un autre le
thme par dfaut de la plateforme.

Figure 27 : Lajout dun service


Ladministrateur est le seul utilisateur qui peut grer la plateforme, du coup il ajoute, modifie et
supprime des services web de la plateforme.
Linterface ci-dessus permet ladministrateur de saisir les coordonnes du service web et les
enregistre dans la plateforme.

45

Chapitre IV: Ralisation

Figure 28 : Lajout dun utilisateur


Ladministrateur et les utilisateurs qui ont le rle tuteur sont les responsables dajout ou de
suppression des utilisateurs de la plateforme. Sauf quun tuteur ne peut ajouter ou supprimer
quun utilisateur de rle apprenant.
Un simple visiteur de la plateforme ne peut pas sinscrire distance aux formations organises
par le CNI, il est recommand de visiter le local du centre.
Linterface ci-dessus permet lutilisateur de remplir les coordonnes du nouvel utilisateur. Si
les donnes ne sont pas valides, un message derreur va tre affich.

Figure 29: Configuration des permissions des utilisateurs


46

Chapitre IV: Ralisation


Cette interface permet de configurer les droits daccs des utilisateurs selon leur rle aux divers
modules de la plateforme.

Figure 30: Lajout dun sondage


La figure ci-dessus schmatise la structure de linterface dajout dun sondage.

3.2 Tuteur
Soit le scnario suivant :
1) Ajouter un article son blog.
2) Ajouter un cours.
3) Ajouter un devoir.
4) Ajouter un vnement marquant lajout dun devoir au calendrier partag.
5) Discuter avec un apprenant via le module forum.

47

Chapitre IV: Ralisation

Figure 31: Grer blog


Pour quun tuteur ajoute un article son blog, il suffit de faire un simple clic sur le lien du page
blog dans la partie Navigation et, du coup, son blog personnel saffiche.
Un lien permettant dajouter le nouvel article est au-dessus des articles publis par le tuteur.

Figure 32: Ajout dun cours


48

Chapitre IV: Ralisation


Cette interface permet au tuteur dajouter un cours soit en le tlversant, soit en le crant laide
de lditeur WYSIWYG intgr dans la plateforme.

Figure 33: Ajout dun devoir

Figure 34: Ajout dun vnement au


calendrier partag

La premire interface permet au tuteur dajouter un devoir form de vrai ou faux questions.
Pour une meilleure organisation, aprs avoir cr le devoir, le tuteur partage cet vnement avec
les apprenants en le partageant au calendrier partag comme il le montre la deuxime interface.

Figure 35: Affichage dun vnement au calendrier

49

Chapitre IV: Ralisation


Linterface ci-dessous montre comment un tuteur se communique avec les apprenants via le
forum.

Figure 36: Communication Forum

3.3 Apprenant
Soit le scnario suivant :
1) Grer son profil.
2) Communiquer avec son tuteur via chat.
3) Consulter la liste des cours.
4) Partager un article du blog sur les mdias sociaux.
5) Suivre Social Learning sur les mdias sociaux.
6) Participer un sondage.

50

Chapitre IV: Ralisation

Figure 37: Grer le profil


Linterface ci-dessus permet lutilisateur de grer son profil (nom, mot de passe, photo, langue,
etc.).

Figure 38: Communication Chat


Linterface ci-dessus permet aux utilisateurs de se communiquer via loutil Chat .

51

Chapitre IV: Ralisation

Figure 39: Liste des cours

Figure 40: Tlchargement dun cours

Notre application permet aux apprenants de consulter la liste des cours, lire un cours directement
ou le tlcharger sur leurs machines.

Figure 41: Partage sur les mdias sociaux


Linterface ci-dessus permet aux utilisateurs de partager sur les mdias sociaux ou envoyer par
courriel un article (blog, wiki).

Figure 42, 43: Suivre la plateforme sur mdias sociaux

52

Chapitre IV: Ralisation


Les utilisateurs peuvent suivre la plateforme Social Learning sur ses pages sur les mdias
sociaux (Facebook, Twitter, Youtube, etc.).

Figure 44: Participation un sondage


La figure ci-dessus schmatise linterface qui permet aux utilisateurs de voter dans un sondage.

4. Apports
Ce projet de fin dtudes nous a permis de se familiariser avec un certain nombre de concepts
tout en se basant sur nos connaissances acquises au cours de notre formation au sein de notre
institut.
Ainsi, le fait davoir travaill avec nos encadreurs, les personnels de la socit nous a mis sur la
voie professionnelle.
Notre projet de fin dtude a t une occasion, pour dvelopper et exercer nos capacits
dobservation, danalyse, de conception, de dveloppement et de rdaction.

4.1 Apports au niveau des connaissances techniques


Ce projet de fin dtude nous a permis de :

Mettre en uvre les notions et les connaissances acquises au sein des modules
Mthodologie de conception des bases de donnes.

Manipuler les logiciels XAMPP, Drupal et Photoshop au cours du dveloppement de


lapplication.

Amliorer nos connaissances thoriques concernant la communication client/serveur.

Etudier les architectures multicouches et raliser limportance du travail sur ce type


dapplication dans le monde de programmation.

Apprendre grer un projet.

53

Chapitre IV: Ralisation

4.2 Apports au niveau de la conception et du dveloppement


Au niveau de la conception et du dveloppement, cette tude nous a permis de :

Mener une conception oriente objet reprsente avec le langage UML

Apprendre maitriser la mthodologie de conception et de dveloppement des


applications clientes.

Matriser les tapes de dveloppement et de conception dune application Web.

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 cran. Nous avons
cltur par une validation du travail ralis.

54

Conclusion et perspectives

Conclusion et perspectives
Plus couramment dsigne par l'anglicisme "social learning", lapprentissage social est
prsente aujourd'hui comme personnalise et flexible, permettant un apprentissage
complmentaire et individualis, se librant des contraintes de temps, de lieu, de modalit
d'apprentissage et de ressources humaines.
Dans ce cadre, sinstalle notre projet qui porte sur la ralisation et la conception d une
plateforme social Learning pour le compte des personnels de ltat qui souhaitent se bnficier
du cours acclrs en informatique chez le CNI.
Pendant ces trois mois de stage de fin dtudes, nous avons appris la recherche des
informations et en faire une synthse, notamment pour ce rapport, ce qui nous a permis de
progresser rapidement dans lapprentissage dune technologie que nous ne connaissons pas.
Sur le plan humain, ce projet a t une vritable occasion de vivre de prs lexprience du
travail au sein dune socit, qui exige lintgration dans un groupe de travail. Ce qui nous a
permis damliorer nos capacits de communication et de nous adapter la vie professionnelle.
Nous avons fait de mon mieux pour bien laisser une bonne impression sur notre discipline,
nos qualits et nos comptences techniques vis vis du staff du CNI et de prsenter un travail
la hauteur de la formation qui nous avons eu au sein de l'ISI.
Pour aboutir ce but, nous avons procd en trois principales tapes. Nous avons
commenc par une tude des besoins. Nous avons prsent les besoins fonctionnels et non
fonctionnels, ainsi quun diagramme global des cas dutilisation. Nous avons pass par la suite
ltude conceptuelle et organisationnelle. Nous avons modlis laspect dynamique de notre
systme laide des diagrammes de squences et dautres dactivits. Laspect statique en
utilisant le diagramme de classes. Finalement, nous avons prsent l'architecture gnrale de
l'application et nous avons dploy dfrentes interfaces graphiques de la solution que nous
avons implment.
Les objectifs du projet ont t achevs terme. En effet, les fonctionnalits mentionnes
dans le cahier des charges ont t implmentes et sont fonctionnels. Lamlioration de notre
55

Conclusion et perspectives
plateforme pourrait se rapporter lajout dautres fonctionnalits comme les Confrences audio
et vido en temps rel.

56

Bibliographie

Bibliographie
[1] Drupal for Education and E-Learning , crit par James G.Robertson et Bill Fitzgerald

http://www.it-ebooks.info/book/2945/

[2] Comparatif CMS , crit par M.Erwan Mollard

http://www.access-dev.com/?s=CMS

[3] Quelles normes appliques pour le meilleur choix de la plate-forme de-learning? , crit
par Nguyen Ngoc Luu Ly directrice adjointe du Dpartement de Langue et de Civilisation
franaises | cole Suprieure de Langues trangres | Universit Nationale de Hano

http://tapchi.vnu.edu.vn/Duc_Thien/so4/B%C3%A0i%202.%20Nguy%20n%20Ng%20c%20Lu
u%20Ly.pdf

57

Webographie

Webographie
[4] Photoshop CC , ralis par Adobe, visit le 17/03/2014

http://www.adobe.com/fr/products/photoshop.html
[5] Bitnami for XAMPP , crit par Bitnami, visit le 15/03/2014

https://bitnami.com/stack/xampp
[6] Notre approche E-Learning , crit par Cegos, visit le 09/02/2014

http://www.elearning-cegos.fr/notre-approche-e-learning/social-learning/

[7] Lactualit de la formation distance | E-Learning, crit par Christina BORK, visit le
08/02/2014

http://www.elearning-actu.org/e-learning_definition/

[8] Lactualit de la formation distance | Blended Learning, crit par Christina BORK,
visit le 08/02/2014

http://www.elearning-actu.org/blended_learning_definition/

[9] Lactualit de la formation distance | Social Learning, crit par Christina BORK, visit
le 08/02/2014

http://www.elearning-actu.org/le-social-learning/

[10] Prsentation du Centre National dInformatique , crit par CNI, visit le 18/02/2014

http://www.cni.nat.tn/FR/SCRIPT/missions.asp/

[11] HTML5 , crit par Comment a marche, visit le 17/03/2014

http://www.commentcamarche.net/contents/498-html-langage
[12] Un terme barbare pour expliquer lvolution actuelle dInternet , visit le 09/02/2014

https://sites.google.com/site/leweb20/

58

Webographie
[13] CSS , crit par Julien VAUBOURG, visit le 17/03/2014

http://www.jsand.net/definition_css.wju
[14] Les principes gnraux | Le web 2.0, crit par Laboratoire de Soutien

lEnseignement Tlmatique, visit le 08/02/2014

http://www.pmtic.net/cles_web2/contenus/principes_generaux/definition.php/

[15] UML , crit par Laurent PIECHOCKI, visit le 02/03/2014

http://uml.free.fr/

[16] PHP , crit par Molokai et Raf, visit le 30/04/2014

http://www.phpdebutant.org/article118.php
[17] Drupal , crit par PHPNUKE, visit le 28/02/2014

https://ra5-telecharger.phpnuke.org/fr/c113012/bitnami-drupal-gratuit#.U2e0EYF5NKY
[18] Star UML , crit par Programmes et Jeux, visit le 18/03/2014

http://staruml.programmesetjeux.com/

59

Annexes

Annexe A
Dictionnaire des donnes
N

Attribut

Libelle

Type

login

Identifiant

de Chaine

lutilisateur
2

pwd

email

Mot de passe de Chaine

status

de 60

caractres

Email

de Chaine

lutilisateur
4

de 60

caractres

lutilisateur
3

Taille

de 254

caractres

Status

de Chaine

lutilisateur

de 10

caractres

(actif, bloqu)
5

langage

Langage prfr Chaine


de lutilisateur

idPhoto

caractres

Identifiant de la entier
photo

de 12

11

de

lutilisateur
7

idPlateforme

Identifiant de la entier

11

plateforme
8

nom

Nom

de

plateforme
9

idSondage

Identifiant

la Chaine

de 60

caractres
du entier

10

sondage
10

titre

Titre du sondage Chaine

de 60

caractres
11

DateCreation

Date cration du Date

sondage
12

resultat

Resultat
sondage

13

status

Status

du Chaine

de 254

caractres
du Chaine

de 10
60

Annexes
sondage

(actif, caractres

bloqu)
14

idWiki

Identifiant

du entier

11

module wiki
15

status

Status

du Chaine

sondage

de 10

(actif, caractres

bloqu)
16

idArticle

Identifiant dun entier

10

article wiki
17

18

titre

auteur

Titre dun article Chaine


wiki

caractres

Lutilisateur

Utilisateur

de 60

rdigeant
larticle
19

langage

Langage

sous Chaine

lequel

crit caractres

de 12

larticle
20

dateCreation

Date de cration Date

de larticle
21

dateModif

Date

de Date

modification de
larticle
22

idRessource

Identifiant de la entier

11

ressource
23

status

Status

de

la Chaine

ressource
24

titre

Titre

de

caractres
la Chaine

ressource
25

type

Type

de

de 60

caractres
la Chaine

ressource
(image,

de 10

de 10

caractres
son,

video, text)
26

distributeur

Lutilisateur qui Utilisateur

61

Annexes
a

publi

la

ressource
27

idService

Identifiant

du int

11

service web
28

titre

Titre de service Chaine


web

29

status

de 60

caractres

Status

du Chaine

service

web caractres

de 10

(actif, bloqu)
30

idIcone

Identifiant

de entier

10

licne du sevice
web
31

lien

Lien du service Chaine


web

32

idBlog

caractres

Identifiant

du Chaine

module blog
33

idArticle

35

titre

auteur

de 10

caractres

Identifiant dun Chaine


article blog

34

de 254

de 60

caractres

Titre dun article Chaine


blog

caractres

Lutilisateur

Utilisateur

de 60

rdigeant
larticle
36

langage

Langage

sous Chaine

lequel

crit caractres

de 12

larticle
37

dateCreation

Date de cration Date

de larticle
38

dateModif

Date

de Date

modification de
larticle
39

idForum

Identifiant

du entier

10

forum
62

Annexes
40

titre

Titre du forum

Chaine

de 60

caractres
41

idTheme

Identifiant

du entier

10

thme du forum
42

titre

Titre du thme

Chaine

de 60

caractres
43

editeur

Editeur

du Utilisateur

de entier

10

thme
44

idAvis

Identifiant
lavis

45

editeur

Editeur de lavis

46

idEmail

Identifiant

Utilisateur

de entier

10

de Utilisateur

Le rcepteur de Utilisateur

lemail
47

emetteur

Lemetteur
lemail

48

recepteur

lemail
49

sujet

Sujet de lemail

Chaine

de 60

caractres
50

idChat

Identifiant de la entier

10

session du chat
51

nbreConnects

Nombre

des entier

10

membres
connects
52

emetteur

Emetteur

de Utilisateur

de Utilisateur

de entier

10

message
53

recepteur

Recepteur
message

54

idDevoir

Identifiant
devoir

55

dateAjout

Date de cration Date

du devoir
56

dateDevoir

Date du devoir

Date

63

Annexes
57

tuteur

Tuteur qui cr Tuteur

le devoir
58

matire

Matire

du Chaine

devoir
59

idCour

Identifiant

de 60

caractres
du entier

10

cours
60

titre

Titre du cours

Chaine

de 60

caractres
61

auteur

Tuteur qui cr Tuteur

le cours
62

matire

Matire

du Chaine

cours
63

dateAjout

de 60

caractres

Date de cration Date

du cours
64

idTest

Identifiant

du entier

10

test
65

tuteur

Tuteur qui cr Tuteur

le test
66

dateAjout

Date de cration Date

du test
67

matire

Matire du test

Chaine

de 60

caractres

64

Annexes

Annexe B
Maquette

65

Vous aimerez peut-être aussi