Chapitre 1 :

PRESENTATION DU PROJET

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 1

 1.1. Introduction :

Dans ce chapitre, nous parlons de la société dans laquelle j’ai passé mon stage, et le
concept de E-learning, ainsi que le cahier de charge qui définit le contexte et l’objectif ciblé.

1.2. Présentation de la société :

WEBEPICE s’agrandit ! 2011 s’annonce très prometteur pour l’agence. Créée en 2007 et
réalisant son premier projet pour un bureau de consulting International en 2008, l’agence
WEBEPICE ne comptait que trois personnes. Suite à une consultation des meilleures agences
nationales, Maroc Telecom décide de le faire confiance pour la totalité de l’ecommunication
de son opérateur ELISSA : création et gestion du portail, gestion de l’enotorité, applications
Facebook, Création des bannières pour tous les supports : Maroccope, Tekiano, et tous les
partenaires de la marque. A ce jour, elle compte 12 personnes et est en pleine expansion. WP
change de local et se dote d’un véritable service spécialisé et consacré à l’Emailing avec de
nouvelles recrues en complément de son service commercial et webmarketing.

1.3. Contexte et Objectif du Projet :

1.3.1. Le concept du E-Learning :

L'apprentissage en ligne ou E-Learning, étymologiquement l'apprentissage par des moyens
électroniques, peut être défini selon divers points de vue et notamment socioéconomique,
organisationnel, pédagogique et technologique.
Une définition du E-Learning a été donnée par l'Union Européenne : « le E-Learning est
l’utilisation des nouvelles technologies multimédias de l’Internet pour améliorer la qualité de
l’apprentissage en facilitant d’une part l’accès à des ressources et à des services, d’autre part
les échanges et la collaboration à distance ».
Le E-Learning est une modalité pédagogique et technologique qui concerne la formation
continue, mais aussi l’enseignement supérieur, c’est-à-dire pour un apprenant adulte ayant une
certaine autonomie dans l’organisation de son processus d’apprentissage, comme en
entreprise par exemple. Cependant, il faut remarquer, qu’aux USA, dans des textes officiels
récents, le E-Learning est souvent décliné sous la forme « Enhanced-Learning Through
Information Technologies », pour tout type de public, de la maternelle à la formation
continue, et qui y inclut toutes les technologies éducatives que nous avons déjà connues :
didacticiels, CD/Rom, Hypermédias, Tuteur (formateur) Intelligent… (US DoE, 2000).
Ainsi, le E-Learning serait un assemblage, tant de pratiques pédagogiques que de technologies
éducatives qui existaient, et dont le développement proviendrait de l’avènement d’Internet
(2000/2001) avec son potentiel d’ubiquité. Il semble cependant, comme pour les évolutions
récentes des organisations, que le E-Learning qui est en émergence particulièrement au
Maroc, possède des caractéristiques qui le font différer des approches des technologies de
l’éducation telles que nous les connaissions.

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 2

Plusieurs termes sont utilisés pour traduire le terme E-Learning. La traduction la plus fidèle
est apprentissage en ligne. On parle aussi parfois d’e-formation, le « e » comme dans E-
Learning étant une référence explicite aux technologies de l’information.
L'apprentissage mixte conjugue les notions d'apprentissage en ligne et d'apprentissage hors
ligne. L'apprentissage mixte désigne une méthode d'acquisition d'un savoir ou de construction
de connaissance utilisant des interactions (acteur-acteur ou acteurs ressources) relayées par un
système télématique (électronique, informatique connecté par réseau). L'apprentissage
électronique peut avoir lieu à distance (en ligne), en classe (hors ligne et/ou en ligne) ou les
deux. L'apprentissage en ligne est une spécialisation de l'apprentissage à distance (ou
formation à distance), un concept plus général qui inclut entre autres les cours par
correspondance, et tout autre moyen d'enseignement en temps et lieu asynchrone.

1.3.2. Cahier des charges :

a. Contexte du projet :

La société WEB EPICE qui dispose parmi les missions qu’elle s’est astreinte la formation,
désire améliorer la qualité des services qu’elle offre. Cette société dans le cadre de l’étude
qu’elle a mené, a considéré qu’il y avait un besoin de création et mise au point un site
d’apprentissage en ligne et notamment, pour offrir un service de qualité à sa clientèle et
augmenter le rendement de son Département formation et le fortifier.
Par ailleurs, un site d’apprentissage en ligne permettra à WEB EPICE de compléter les
prestations qu’elle offre aux entreprises.

b. Objectif Ciblé :

 Mettre au point une solution web présentant les services de la formation

proposés par Devo Services, accessible à distance et continuellement
disponible.
 Augmenter le nombre de bénéficiaires, ainsi que la réduction du nombre de
formateurs en plus de l’automatisation de quelques tâches manuelles visant à
renforcer la fiabilité et la qualité de la formation offerte par la société.

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 3

 c. Acteurs

Après la phase d’analyse, nous avons identifié trois catégories d’utilisateurs :

Les apprenants, les formateurs et les administrateurs.

Les Apprenants Les Formateurs Les Administrateurs

-Ils consultent les cours, -Ils Créent les séances -Ils préparent les sessions
et envoi des messages ainsi que des quiz.
-Ils sont à la disposition -Ils déterminent les
Via la messagerie
des apprenants afin de programmes de formations
interne.
-Ils Passent des répondre aux questions de le contenu des cours.
évaluations. ces derniers.
-Ils Créent les groupes et
d’insérer/retirer des
apprenants.

1.4. L’intérêt de ce projet.

Actuellement, La formation continue se fait de façon traditionnelle, ce qui résulte des places
limitées, Charge élevée de la formation et Nécessité de se déplacer pour assister aux cours. A
ce regard notre projet résolut de ces difficultés en augmentant nombre de bénéficiaires et
réduire le nombre de professeurs.

1.5. Conclusion :

Cette brève Présentation nous a permet de prendre idée générale sur notre projet, ce
qui nous facilite l’approche des autres chapitres.

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 4

 Chapitre 2 :
Outils de réalisation de projet

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 5

 2.1. Introduction :

Ce chapitre va vous permettre de savoir les différents outils que nous avons utilisé
lors de la réalisation de notre projet de stage.au niveau de la conception et de
développement.

2.2. Au niveau de la conception :

A ce niveau nous avons utilisé deux logiciels, nous les citons comme suite :

2.2.1. Adobe XD.

Adobe XD est un logiciel d’UX/UI Design permettant aux webdesigners et aux

infographistes de créer, et modifier très facilement des prototypes interactifs de
sites web ou d’applications mobiles.
Adobe XD permet également de partager aisément ces prototypes avec nos
collaborateurs, nos réviseurs ou nos clients.

2.2.2. Adobe Photoshop.

Photoshop est un logiciel de retouche, de traitement et de dessin assisté par

ordinateur.
Il travaille essentiellement sur images matricielles car les images sont constituées
d’une grille de points appelés pixels. L’intérêt de ces images est de reproduire des
gradations subtiles de couleurs.

2.2.3. Adobe Illustrator

Adobe Illustrator est un logiciel de création graphique vectorielle. Il fait

partie de la gamme Adobe, peut être utilisé indépendamment ou en complément
de Photoshop, et offre des outils de dessin vectoriel puissants. Les images
vectorielles sont constituées de courbes générées par des formules
mathématiques.

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 6

 2.3. Au niveau de développement :

2.3.1. Front-end (le frontal).

a. HTML. (Traduction : HyperText Markup Language)

C'est le langage universel utilisé sur les pages Web lisibles par tous les
Navigateurs Web (Internet Explorer, Netscape, Mozilla, etc.…). Ce langage
fonctionne suivant l'assemblage et la combinaison de balises permettant de
structurer et donner l'apparence voulue aux données textes, images et
multimédias suivant la mise en page voulue.

b. CSS.

Le terme CSS est l'acronyme anglais de Cascadant Style Sheets qui peut se
traduire par "feuilles de style en cascade". Le CSS est un langage informatique
utilisé sur l'internet pour mettre en forme les fichiers HTML ou XML. Ainsi,
les feuilles de style, aussi appelé les fichiers CSS, comprennent du code qui
permet de gérer le design d'une page en HTML. Bien que l'HTML puisse être
mis en forme à l'aide de balises prévus à cet effet, de nos jours il est plus
judicieux d'utiliser le CSS et de n'utiliser le XHTML que pour le contenu.
L'avantage de l'utilisation d'un fichier CSS pour la mise en forme d'un site
réside dans la possibilité de modifier tous les titres du site en une seule fois en
modifiants une seule partie du fichier CSS. Sans ce fichier CSS, il serait
nécessaire de modifier chaque titre de chaque page du site (difficilement
envisageable pour les énormes sites de plusieurs milliers de pages).

2.3.2. Backend (l’arrière-plan).

a. XAMPP

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(cross) Apache
MySQL Perl PHP) offrant une bonne souplesse d'utilisation, réputée pour son
installation simple et rapide. Ainsi, il est à la portée d'un grand nombre de
personnes puisqu'il ne requiert pas de connaissances particulières et
fonctionne, de plus, sur les systèmes d'exploitation les plus répandus. Il est
distribué avec différentes bibliothèques logicielles qui élargissent la palette des
services de façon notable : Opens SL, Expat (parseur XML), PNG, SQLite,
lib…

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 7

 b. PhpMyAdmin :

PhpMyAdmin est un outil qui facilite l'administration de MySQL sur le web. Il

est écrit en PHP et permet notamment de créer / supprimer des bases de
données, de créer / modifier / supprimer des tables ou enregistrements,
d'exécuter des requêtes SQL, d'importer et d'exporter des structures ou données
de votre base de données MySQL, et bien plus.

c. PHP :

Le PHP est un langage informatique utilisé sur l'internet. Le terme PHP est un
acronyme récursif de "PHP : Hypertext Preprocessor". Ce langage est
principalement utilisé pour produire un site web dynamique. Il est courant que
ce langage soit associé à une base de données, tel que MySQL. Exécuté du
côté serveur (l'endroit où est hébergé le site) il n'y a pas besoin aux visiteurs
d'avoir des logiciels ou plugins particulier. Néanmoins, les webmasters qui
souhaitent développer un site en PHP doivent s'assurer que l'hébergeur prend
en compte ce langage. Lorsqu’une page PHP est exécutée par le serveur, alors
celui-ci renvois généralement au client (aux visiteurs du site) une page web qui
peut contenir du HTML, XHTML, CSS, JavaScript ...

d. MySQL :

MySQL est une base de données relationnelle libre qui a vu le jour en 1995 et
très employée sur le Web, souvent en association avec PHP (langage) et
Apache (serveur web). MySQL fonctionne indifféremment sur tous les
systèmes d'exploitation (Windows, Linux, Mac OS notamment). Le principe
d'une base de données relationnelle est d'enregistrer les informations dans des
tables, qui représentent des regroupements de données par sujets (table des
clients, table des fournisseurs, table des produits, par exemple). Les tables sont
reliées entre elles par des relations. Le langage SQL (acronyme de Structure
J’Query Language) est un langage universellement reconnu par MySQL et les
autres bases de données et permettant d'interroger et de modifier le contenu
d'une base de données. Les autres bases de données utilisées en informatique
sont essentiellement Microsoft SQL Server et Oracle.

N.B : Au niveau matériel, durant toute cette période j’ai utilisé personnel ordinateur.
2.4. Conclusion 
Jusqu’à ce moment nous avons justement défini les différents logiciels que nous avons utilisé
; pour aller loin dans ce côté nous allons les traiter en détails dans le troisième chapitre.

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 8

 Chapitre 3 :
Le déroulement de stage

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 9

 3.1. Introduction :

Dans ce chapitre nous parlons de déroulement de stage, précisément les étapes

que nous avons trouvé lors de la réalisation de notre projet.

3.2. Présentation de stage.

Pendant ma période de stage j'ai essentiellement travaillé sur un projet de site

web permettant la société d’améliorer la qualité d’apprentissage en ligne de ses
Apprenants.
Les quatre premiers jours de cette période consacrés principalement à la
réalisation du design de ce site, le reste du temps destiné au son développement.

3.3. Les étapes de la réalisation de notre projet.

Afin de réaliser notre projet nous avons suivi un ensemble d’étapes, nous les citons
comme suite :

3.3.1. La conception de site web.

Pour faciliter le développement de notre site web, il suffit de réaliser sa

conception générale qui nous donne une idée claire concernant le résultat final.
Pour cette raison nous avons utilisé trois logiciels : Adobe Photoshop, Adobe
Illustrator et Adobe XD. L’ensemble de ces logiciels nous donnent les résultats
suivants :

LOGO DE SITE

Arrière-plan
réalisée en
utilisant
Photoshop

Des icones
réalisés en
utilisant
Adobe
Illustrator

Figure 3.1 : Interface Adobe XD

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 10

 3.3.2. La réalisation du frontal (Front-end).
Apres la réalisation de la conception de notre site web. Nous pouvons maintenant le
développer en utilisant des langages de programmation.
Pour cette raison nous devons le commencer par le développement du frontal (Front-end).
A ce niveau nous avons utilisé : HTML ; CSS et.et nous prenons ci-dessous deux extraits
leurs codes.

Figure 3.2 : Code HTML

Figure 3.3 : Code CSS

Figure 3.4 : NAVBAR DE SITE

Le code HTML (voir figure3.2) permet d’ajouter des liens hypertextes (Home, Courses, Programs,
Teachers), alors que le Code CSS (voir figure 3.3) permet de gérer le design d’une page HTML (Les
couleurs, l’ordre des liens hypertextes, l’ajout de l’arrière-plan, etc.).
La combinaison entre eux nous donne le résultat présenté dans la figure 3.4

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 11

 3.3.3. La réalisation de l’arriéré plan (Back-tend).
a. La structure d’un site dynamique.
 Définition d’un site dynamique

Un site dynamique fait appel à un langage dynamique comme PHP et peut stocker des
données dans une base de données comme MySQL.
La plupart des sites sont en dynamique car ISL (Inter-Switch Link) permettent de récupérer
des informations en fonction des utilisateurs, d’enregistrer les données d’un formulaire…

Figure 3.5 : Structure d’un site dynamique

 Les étapes de fonctionnement d’un site web

• Le client tape l’adresse ou clique sur l’adresse d’un site

• L’adresse IP du site interroge le serveur correspondant
• le serveur cherche les fichiers
• Le serveur analyse et lit les fichiers
• Le serveur grâce à un logiciel (ex : apache) lit le langage de programmation
dynamique (ex :PHP).
• Si le logiciel voit du code PHP indiquant une base de données, il récupère les
informations dans la base de données (ex : MySQL).
• Une fois que tout le code PHP est lu et qu’il a récupéré les informations dans la base
de données il génère du code html/css grâce à PHP.
• Le serveur renvoie alors le code html/css au navigateur.
• Le navigateur lit le code renvoyé par le serveur.
• Le navigateur affiche la mise en page correspondant au code.

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 12

 3.3.4. Diagramme de flux d’informations

1- ère tache l’apprenant s’inscrit dans le compte

2 -ème tache l’apprenant se connecte.
3 -ème tache l’apprenant choisit une formation.
4 -ème tache l’apprenant recherche un cours.
5 -ème tache l’apprenant consulte le cours.
6 -ème tache la formation contient un cours

CHOISISSENT

RECHERCHENT
SE CONNECTENT
S’INSCRIVENT CONTIENT
CONSULTENT

Figure 3.6 : Diagramme de flux d’informations

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 13

 3.3.5. Merise pour la modélisation du système :
Pour modéliser les fonctionnalités, que doit offrir ce système, j’ai choisi la méthode
MERISE.

MERISE étant une méthode de conception et de développement d’un système

d’information, représentant les interactions entre ses différents composants et d’en proposer
une description formelle. Au début des années 90, cette méthode a connu une évolution
importante suite à l’intégration de concepts orientés objets tel que l’héritage. Je présente, dans
la suite, Le Modèle conceptuel de communication, (MCC) le Modèle conceptuel de données
(MCD) et le Modèle conceptuel de traitements (MCT), j’ai utilisé le POWER AMC. Power
AMC qui est un outil intégré de conception et de modélisation des systèmes d’entreprises. Il
intègre la technique standard de modélisation Merise. La méthode MERISE est basée sur la
séparation des données et des traitements, à effectuer, en plusieurs modèles conceptuels et
physiques. Cette séparation assure une longévité au modèle. En effet, l'agencement des
données n'a pas à être souvent remanié, tandis que les traitements le sont plus fréquemment.

La méthode Merise préconise 3 niveaux d’abstraction :

- le niveau conceptuel qui décrit la statique et la dynamique du système d’information en

se préoccupant uniquement du point de vue du gestionnaire.
- le niveau organisationnel qui décrit la nature des ressources qui sont utilisées pour
supporter la description statique et dynamique du système d’information. Ces ressources
peuvent être humaines et/ou matérielles et logicielles.
- le niveau opérationnel dans lequel on choisit les techniques d’implantation du système
d’information (données et traitements).

 Le modèle conceptionnel de données.

Un Modèle Conceptuel de Données est la formalisation de la structure et de la signification
des informations décrivant des objets et des associations perçus d'intérêt dans le domaine
étudié, en faisant abstraction aux solutions et aux contraintes techniques et informatiques
d'implantation en base de données.

Un MCD est exprimé en entité-relation Merise qui comporte les concepts basiques suivants :

 Entité : modélisation d'un objet d'intérêt (en termes de gestion) pour l'utilisateur.
 Relation : modélisation d'une association entre deux ou plusieurs entités.
 Cardinalités : modélisation des participations mini et maxi d'une entité à une relation
 Propriétés : modélisation des informations descriptives rattachées à une entité ou une
relation.
 Identifiant : modélisation des propriétés contribuant à la détermination unique d'une
occurrence d’une entité.

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 14

 Figure 3.7 : Le Modèle Conceptuel de Communication d’apprenant

Le modèle ci-dessus permet de normaliser l’écriture des données à partir d’une représentation
des leurs interactions.
Prenons comme exemple L’interaction entre Module et Questions, Au premier sens nous
trouvons que chaque Module (1, n) peut contenir 1 ou n questions, mais au sens inverse
chaque question doit appartenir à un seul module.

 Le modèle logique de données.

Le MCT modélise les activités du domaine, activités conditionnées par les échanges avec
l'environnement, sans prise en compte de l'organisation. Ainsi, chaque activité (nommée
opération) regroupe un ensemble d'activités élémentaires réalisables au sein du domaine, sans
autres informations extérieures (on n’a pas besoin de s'arrêter pour attendre des informations
extérieures).

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 15

 3.3.6. Les tables

 Table système d’inscription.

Figure 3.8 : Table système d’inscription.

 Table système de téléchargement d'images

Figure 3.9 : Table système de téléchargement d'images

 Table système de contact

Figure 3.10 : table système de contact

N.B : Lorsqu’un utilisateur s’inscrit dans notre site, ses informations sont stockées dans la
base de données sous forme de tableaux.

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 16

 3.4. La description des principales interfaces graphiques :
3.4.1. Page d’inscription.

Figure 3.11 : page d’inscription

Comme son appellation cette page permet à tout nouveau client de s’inscrire dans cette base
de données pour pouvoir, par la suite, choisir une formation et consulter les cours.
Les champs de saisie contiennent un nombre de caractères minimum. Si ce nombre n’est
Pas satisfait, une alerte de couleur rouge vient interpeller l’internaute de son erreur de
Saisie pour ainsi la corriger.
La page n’est validée que si tous les champs de saisie sont conformes aux exigences
Demandées.
3.4.2. Page de connexion :

Figure 3.12 : Page de connexion

Cette page permet aux utilisateurs inscrits dans notre site de se connecter à leurs comptes afin
de consulter les cours de leurs formations.

3.4.3. Page d’accueil :

Cette interface repressente la page d’accueil de notre site
web ; il comporte plusieurs sous-pages ; nous pouvons les
BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 17
citer comme :
 La deuxième sous page propose aux
utilisateurs quelques cours les plus consultés
durant la dernière période.

Cette sous page motive les apprenants de

consulter les cours à distance, en citant
l’importance de E-learning

La cinquième sous page cite la liste

des formateurs qui sont à la
disposition des apprenants

Cette sous page permet aux

apprenants de poser leurs questions
aux administrateurs du site.

Le footer de notre site web comprend :

- Les informations de contact.
- les liens vers les pages principales.

Figure 3.13: Page d’accueil

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 18

 3.4.4. Page des cours

Figure 3.14 : Page des cours

Cette page donne aux utilisateurs une liste de cours afin de choisir ce qui répond à leur
vocation.
Chaque catégorie est rapidement identifiable par une image qui la représente.
L'essentiel étant que l’apprenant ne se retrouve pas perdu dans la masse de cours.

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 19

 3.4.5. Page des formations :

Figure 3.15 : Page des formations

Après que l’apprenant ait choisit le cours qui répond à leur vocation ; il peut le consulter
facilement en suivant l’explication de formateur.

Figure 3.16 : Page de profil

Cette page donne aux utilisateurs la possibilité de modifier leurs informations personnelles.

BOUAMRI SALAH EDDINE RAPPORT DE STAGE DE FIN D’ETUDES 20