Département d’Informatique

Filière Licence fondamentale

en Sciences Mathématiques et Informatique

PROJET DE FIN D’ÉTUDES

intitulé :

Conception et réalisation d’un site web interactif de

mathématiques pour enfants
Présenté par :
Mehdi BAOUZ
Kawtar WAZZANI
soutenu le 05 Juillet 2017 devant le Jury

M.Mohammed RZIZA Professeur à la Faculté des Sciences - Rabat Président

M.Omar MEGZARI Professeur à la Faculté des Sciences - Rabat Encadrant
M.El Mamoun SOUIDI Professeur à la Faculté des Sciences - Rabat Examinateur

Année universitaire 2016-2017

Remerciements

Avant tout, il apparaît opportun de commencer ce mémoire par des remerciements à

toutes les personnes qui ont contribué à la réalisation de ce projet.

On voudrait tout d’abord adresser toute notre profonde gratitude à notre enca-
drant M.MEGZARI Omar, pour sa patience, sa disponibilité, ses directives précieuses et
surtout ses judicieux conseils, qui ont contribué à alimenter notre travail, on tient aussi à
remercier M.RZIZA Mohammed, et M.SOUIDI El Mamoun de vouloir juger et examiner
notre travail.

On tient à remercier et à témoigner toute notre reconnaissance à tous les profes-

seurs, intervenants et toutes personnes qui par leurs paroles, leurs écrits, leurs conseils
et leurs critiques ont guidé nos réflexions.

On ne saura terminer sans exprimer nos remerciements les plus sincères à nos très
chers parents qui ont toujours été là pour nous épauler.

i
Table des matières

Remerciements i

Introduction iv

1 Contexte du projet et présentation de l’application 1

1.1 Objectifs et attentes du projet . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Identification des besoins . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 Modélisation en UML 3
2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Spécification fonctionnelle . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2.1 Identification des acteurs du système . . . . . . . . . . . . . . . . 3
2.2.2 Fonctionnalités . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2.3 Description textuelle des cas d’utilisations . . . . . . . . . . . . . 4
2.3 Conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3 Réalisation et mise en œuvre 16

3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.2 Choix techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.2.1 Langages utilisés . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.2.2 Logiciels utilisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.3 Présentation des réalisations . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.3.1 Espace visiteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.3.2 Espace Élève . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.3.3 Espace Enseignant . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.3.4 Espace Administrateur . . . . . . . . . . . . . . . . . . . . . . . 27

Annexe 29

Conclusion et perspectives 34

Webographie 36

ii
Table des figures

2.2.1 Diagramme général de cas d’utilisation . . . . . . . . . . . . . . . . . . . 4

2.2.2 Cas d’utilisation "Consulter les cours","Accéder aux jeux" . . . . . . . . 5
2.2.3 Cas d’utilisation "Consulter les cours ","Accéder aux jeux","Consulter les
exercices" et "Accéder aux épreuves " . . . . . . . . . . . . . . . . . . . . 6
2.2.4 Diagramme de séquence du scénario "Accéder aux épreuves" . . . . . . . 7
2.2.5 Diagramme de séquence du scénario "Consulter les exercices" . . . . . . 8
2.2.6 Cas d’utilisation "Gérer les comptes ","Mise à jour des cours" . . . . . . 9
2.2.7 Diagramme de séquence du scénario "Gérer les comptes" et"Mise à jour
des cours" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2.8 Cas d’utilisation "Ajouter des exercices " et "Rédiger les cours" . . . . . 11
2.2.9 Diagramme de séquence du scénario "Rédiger un cours " et "Ajouter des
exercices" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.3.1 Diagramme de classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3.3.1 Page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3.3.2 Première partie : "Accueil" . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.3.3 Deuxième partie : "Notre mission" . . . . . . . . . . . . . . . . . . . . . 20
3.3.4 Troisième partie : "Contenu" . . . . . . . . . . . . . . . . . . . . . . . . 21
3.3.5 Quatrième partie : "À propos" . . . . . . . . . . . . . . . . . . . . . . . 21
3.3.6 Espace Élève . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.3.7 Exemple d’un cours : "Addition" . . . . . . . . . . . . . . . . . . . . . . 23
3.3.8 Exemple d’exercice : "Addition" . . . . . . . . . . . . . . . . . . . . . . 23
3.3.9 Affichage du score . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.3.10Espace des jeux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.3.11Espace Enseignant pour ajouter un cours ou un exercice . . . . . . . . . 25
3.3.12Espace Enseignant : "Ajouter un cours" . . . . . . . . . . . . . . . . . . 26
3.3.13Espace Administrateur pour les utilisateurs . . . . . . . . . . . . . . . . 27
3.3.14Espace Administrateur pour la gestion des cours . . . . . . . . . . . . . 28
3.3.15Propriétés du système . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.3.16Configuration de wamp . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.3.17le menu dans la barre de tâches . . . . . . . . . . . . . . . . . . . . . . . 33

iii
Introduction

Dans le cadre d’assurer la réussite scolaire ainsi que les perspectives d’avenir
des enfants, un site éducatif pourra être une solution adapté à cette génération qui
est connectée, impliquée, ouverte sur le monde numérique, capable de piloter son parcours.

L’apprentissage des mathématiques chez les enfants se construit souvent à partir

d’expériences de la vie quotidienne. Même s’il ne comprend pas tout, un enfant est
capable de mémoriser et de comprendre très vite les choses qu’il côtoie tous les jours ;
donc un site interactif peut être favorable dans le processus de l’apprentissage, car il
offre à l’enfant un espace animé et vivant.

Un site interactif pourra être adéquat à la compréhension des mathématiques, ceci

en lui offrant un espace remplit d’audiovisuelle pour l’inciter à apprendre. Les élèves
n’apprennent plus de la même manière qu’auparavant, il est essentiel de savoir si les
nouvelles technologies peuvent contribuer à améliorer l’éducation. Élèves, professeurs,
personnels administratifs peuvent accéder au site Web depuis n’importe quel matériel
connecté à internet.

Ce mémoire est structuré de la façon suivante : dans un premier chapitre nous

présentons le site Web et le contexte du projet. Dans le deuxième chapitre, nous
procédons à une étude fonctionnelle et une description de la conception. La présentation
des réalisations se situe au niveau du troisième chapitre de notre rapport.
Nous terminons ce mémoire par une conclusion générale et nous présentons quelques
perspectives et futures améliorations concernant notre site.

iv
Chapitre 1

Contexte du projet et présentation de

l’application

1.1 Objectifs et attentes du projet

L’objectif principal de notre projet est de mettre en place un site Web interactif de
mathématiques pour enfants, afin de permettre aux écoliers un apprentissage facile et
rapide.
Notre site jouera un rôle important dans l’acquisition de l’information et ce à travers :

• l’accès au cours, exercices ainsi que les épreuves pour une éducation complète ;

• l’interaction du professeur en déposant le cours ;

• le divertissement pour animer l’apprentissage.

Pour ce faire, nous avons travaillé en deux étapes : lors de la première étape, nous
devions réaliser toutes les recherches nécessaires à l’élaboration du cahier des charges et
des différentes fonctionnalités. Pour ceci, la première démarche a consisté à réaliser les
différentes étapes citées chronologiquement ci-dessous :

• le premier contact avec notre encadrant afin de déterminer les besoins géné-
raux ;

• une analyse des besoins approfondie après notre consultation sur le web d’autres sites
interactifs ;

• une phase d’étude fonctionnelle et technique du projet ;

• une phase de conception des interfaces afin de déterminer l’aspect de notre site.

1
Dans un deuxième temps, nous avons commencé le travail de développement en
tenant compte des besoins identifiés et des spécifications fonctionnelles définies.

1.2 Identification des besoins

Sur la base de ce qui précède, le programme à mettre en place doit traiter les points
suivants :

• Un espace « Élève » qui contient des rubriques cours, exercices et des épreuves
de niveau.
Un espace animé et interactifs avec des audio et vidéos pour offrir un divertissement et
une plaisance afin de faciliter l’apprentissage.

• Un espace « Enseignant » qui contient un éditeur de texte pour la rédaction

des cours et d’exercices.

• Un espace « Administrateur » qui sert à gérer les comptes et les mises à jour.

Pour avoir ces différents espaces il a fallu établir une connexion, c’est à dire avoir
un formulaire d’authentification qui permet à chaque utilisateur de se connecter à sa
rubrique.
Le site doit aussi être facile à utiliser et présenter un enchaînement logique entre les
interfaces, et pour assurer une navigation rapide les liens doivent être suffisants.
La mise en page du site doit faciliter un maximum la démarche d’utilisation à l’aide d’une
présentation claire et intuitive.
Les différentes couleurs et choix typographiques doivent permettre à un utilisateur de
repérer les différentes fonctionnalités qui s’offrent à lui.

2
Chapitre 2

Modélisation en UML

2.1 Introduction
Dans ce chapitre, nous allons décrire notre démarche de modélisation.
Cette modélisation consiste à transformer des besoins en modèles UML[1] (Unified Mo-
deling Language). Un modèle d’analyse fonctionnelle en utilisant un diagramme de cas
d’utilisation et un modèle de conception en se basant sur un diagramme de classes.

2.2 Spécification fonctionnelle

2.2.1 Identification des acteurs du système
Un acteur représente un rôle c’est à dire une personne, un matériel ou un logiciel qui
interagit directement avec le système. Les acteurs qui interagissent avec notre site Web
interactif sont les suivants :

— le visiteur qui peut consulter les cours et accéder aux jeux ;

— l’élève qui peut consulter en plus des cours et des jeux, les exercices, et évaluer
son niveau à travers des épreuves ;

— l’administrateur qui est chargé de la mise à jour des cours, ainsi que la gestion
des comptes des élèves et des professeurs ;

— l’enseignant qui est chargé d’écrire le cours et de le déposer ainsi de faire les mises
à jour de son propre cours.

2.2.2 Fonctionnalités
En UML [1], les cas d’utilisation permettent de représenter le fonctionnement du
système vis-à-vis de l’utilisateur. Il s’agit d’une vue fonctionnelle du système vis-à-vis de
son environnement extérieur.
Chaque cas d’utilisation exprime une manière d’utiliser le système par un acteur.

3
Le diagramme général de cas d’utilisation permet de donner une vision globale du
comportement fonctionnel du système.

Figure 2.2.1 – Diagramme général de cas d’utilisation

Après avoir présenté globalement nos cas d’utilisations, nous allons dans la sec-
tion suivante donner les détails de chaque cas d’utilisation.

2.2.3 Description textuelle des cas d’utilisations

a) Description détaillée du cas d’utilisation « Consulter les cours »

4
 Figure 2.2.2 – Cas d’utilisation "Consulter les cours","Accéder aux jeux"

Un visiteur peut consulter les cours mis en ligne, en choisissant le cours qu’il veut
suivre, il peut aussi accéder aux jeux mais pour découvrir d’autres espaces il doit avoir
un compte.

Détail du cas d’utilisation "Consulter les cours"

Nom du cas : Consulter les cours mis en ligne.
Acteur : visiteur.
Objectif : Découvrir le site et accéder aux cours.
Pré-condition : le visiteur accède à la page d’accueil du site web.
Post-condition : la page des niveaux est affichée pour choisir un cours spécifique.

Scénario principal :
— Le système affiche la page d’accueil.
— Le visiteur choisis la rubrique des cours.
— Le système affiche les différents niveaux.
— Le visiteur choisis le cours spécifique.

Détail du cas d’utilisation "Accéder aux jeux"

Nom du cas : Accéder aux jeux du site web.
Acteur : visiteur.
Objectif : Consulter la rubrique des jeux.
Pré-condition :le visiteur accède à la page d’accueil du site web.
Post-condition :La page des jeux est affichée pour choisir un jeux.

Scénario principal :
— Le système affiche la page d’accueil.
— Le visiteur choisis la rubrique des jeux.
— Le système affiche les différents jeux.
— Le visiteur choisis le jeu désiré.

5
b) Description détaillée des cas d’utilisations de l’élève

Comme le montre la Figure 2.2.3 ci-dessous un élève doit s’authentifier pour s’en-
traîner sur les exercices et tester son niveau.
Puisqu’il y’a une relation de généralisation entre l’élève et le visiteur donc l’élève peut
aussi consulter les cours et accéder aux jeux.

Figure 2.2.3 – Cas d’utilisation "Consulter les cours ","Accéder aux jeux","Consulter
les exercices" et "Accéder aux épreuves "

Détail du cas d’utilisation « Accéder aux épreuves »

Nom du cas : Accéder aux épreuves.
Acteur : élève.
Objectif : Évaluer le niveau.
Pré-condition : Choisir une épreuve spécifique à un cours .
Post-condition : L’épreuve est affichée.

Scénario principal :
— Le système contient un formulaire d’authentification ou d’inscription.
— L’élève remplit le formulaire.
— L’élève est redirigé vers son espace.
— L’élève choisit la rubrique des épreuves.
— Le système affiche le score et la correction de l’épreuve.
— Le système enregistre le score de l’élève.
L’interaction entre l’élève et le système est illustrée sur la Figure ci-dessous

6
 Figure 2.2.4 – Diagramme de séquence du scénario "Accéder aux épreuves"

Détail du cas d’utilisation « Consulter les exercices»

Nom du cas : Consulter les exercices.
Acteur : élève.
Objectif : S’entraîner sur un cours.
Pré-condition : Choisir un cours spécifique.
Post-condition : l’exercice est affiché.

Scénario principal :

— Le système contient un formulaire d’authentification ou d’inscription.

— L’élève remplit le formulaire.
— L’élève est redirigé vers son espace.
— L’élève choisis la rubrique des exercices.
— Le système affiche l’exercice.
— Le système génère un nombre important d’exercices.
L’interaction entre l’élève et le système est illustrée sur la Figure ci-dessous

7
 Figure 2.2.5 – Diagramme de séquence du scénario "Consulter les exercices"

Détail sur la relation de généralisation

Comme le montre la Figure 2.2.3 qui illustre le diagramme d’utilisation, il y a

une relation de généralisation qui lie entre l’élève et le visiteur, celle-ci explique qu’un
élève disposant d’un compte peut éventuellement « Consulter les cours » et « Accéder
aux jeux ».

8
c) Description détaillée des cas d’utilisations « Gérer les comptes »,
«Mise à jour des cours »

Figure 2.2.6 – Cas d’utilisation "Gérer les comptes ","Mise à jour des cours"

Détail du cas d’utilisation « Gérer les comptes »

Nom du cas : Gérer les comptes.
Acteur : Administrateur.
Objectif : La gestion des comptes des élèves et des enseignants.
Pré-condition : l’administrateur choisit la mise à jour des utilisateurs.
Post-condition : la liste des utilisateurs est modifiée .

Scénario principal :

— Le système affiche le formulaire d’authentification.

— L’administrateur remplit le formulaire.
— L’administrateur est redirigé vers son espace.
— L’administrateur met à jour la liste des élèves ou des enseignants.

9
 Détail du cas d’utilisation «Mise à jour des cours »
Nom du cas : Mise à jour des cours .
Acteur : Administrateur.
Objectif : La gestion des cours .
Pré-condition : l’administrateur choisi la mise à jour des cours.
Post-condition : la liste des cours est modifiée.

Scénario principal :

— Le système affiche le formulaire d’authentification.

— L’administrateur remplit le formulaire.
— L’administrateur est redirigé vers son espace.
— L’administrateur met à jour la liste des cours.
L’interaction entre l’administrateur et le système est illustrée sur la Figure ci-dessous

Figure 2.2.7 – Diagramme de séquence du scénario "Gérer les comptes" et"Mise à jour
des cours"

10
d) Description du cas d’utilisation de l’enseignant

Figure 2.2.8 – Cas d’utilisation "Ajouter des exercices " et "Rédiger les cours"

Détail du cas d’utilisation "Rédiger un cours"

Nom du cas : Rédiger un cours.
Acteur : Enseignant.
Objectif : Enrichir le site avec des cours de professeurs.
Pré-condition : Accéder à l’éditeur de texte.
Post-condition : Déposer le cours.

Scénario principal :

— Le système contient un formulaire d’authentification ou d’inscription.

— L’enseignant remplit le formulaire.
— L’enseignant est redirigé vers l’espace enseignant.
— L’enseignant rédige le cours.
— L’enseignant dépose le cours.

11
Détail du cas d’utilisation "Ajouter des exercices"

Nom du cas :Ajouter des exercices.

Acteur : Enseignant.
Objectif : Enrichir le site avec des exercices.
Pré-condition : Accéder à l’espace enseignant.
Post-condition :Ajout des exercices.

Scénario principal :

— Le système contient un formulaire d’authentification ou d’inscription.

— L’enseignant remplit le formulaire.
— L’enseignant est redirigé vers l’espace enseignant.
— L’enseignant ajoute des exercices.
L’interaction entre l’enseignant et le système est illustrée sur la Figure ci-dessous

Figure 2.2.9 – Diagramme de séquence du scénario "Rédiger un cours " et "Ajouter des
exercices"

12
2.3 Conception
Pour définir le modèle conceptuel, nous devons identifier les classes d’analyse qui vont
participer à la réalisation de chacun des cas d’utilisations cités auparavant.

Figure 2.3.1 – Diagramme de classes

13
Le diagramme de la Figure 2.3.1 englobe huit concepts abstraits représentants les entités
de notre système notamment : Élève, Enseignant, Administrateur, Cours, Exercices,
Jeux, note et Épreuve. Chaque concept possède les attributs qui décrivent ses propriétés.
Un concept est relié à d’autres concepts via des associations.

Un cours comme le montre la Figure a pour attributs : l’identifiant du rapport,

sa description, la date de déposition, le titre ainsi que le niveau du cours.

Un cours doit être déposé par un et unique enseignant. Un enseignant est carac-
térisé par un identifiant, un nom, un prénom, un email pour s’identifier et son mot de
passe. Il peut aussi ajouter plusieurs exercices.

La liaison cours élève représente le fait que l’élève peut consulter un cours ou plu-
sieurs. L’élève est représenté par un identifiant, un nom, un prénom, un email pour
s’identifier et un mot de passe.

L’élève peut passer plusieurs épreuves et reçoit pour chacun une note d’où la classe
associative note qui relie entre l’élève et l’épreuve.
Il peut aussi accéder aux jeux et travailler des exercices .

Un administrateur qui est représenté par un identifiant, un nom et un prénom à

des opérations de mise à jour, d’ajout et de suppression des comptes et des cours.

En tenant compte des classes et associations du diagramme de classe de la Figure

2.3.1, nous avons élaboré ces tables :

Cours(Identifiant, titre, niveau, description, date, identifiant-Enseign =>Enseignant).

La table Cours stocke les informations sur ce dernier ainsi que l’identifiant du professeur
qui l’a déposer.

Élève(Identifiant, email, nom, prénom, âge, sexe, mot de passe).

La table Élève stocke les informations sur ce dernier.

Enseignant(Identifiant, email, nom, prénom, sexe, mot de passe).

La table Enseignant stocke les informations sur ce dernier.

Épreuve(Identifiant , lien, identifiant-cours=>Cours).

La table Épreuve stock les informations sur celui ci plus la référence sur l’identifiant du
cours auquel appartient l’épreuve.

Administrateur(Identifiant, nom, prénom, mot de passe).

La table Administrateur stocke les informations sur ce dernier.

14
Fichier(Identifiant,nom,chemin-fichier).
La table Fichier stocke les informations sur les cours qui sont déposés par les Enseignant.

Note(Identifiant, identifiant-Élève=>Élève, identifiant-cours=>Cours, identifiant-

épreuve=>Épreuve, note1, note2, note3 ).
La table Note stocke les informations sur la note d’un élève.

Exercice(Identifiant,niveau,cours, identifiant-Enseign=>Enseignant, lien, lienCours,

question1, question2, question3, choix1, choix2, choix3, réponse1, réponse2, réponse3).

2.4 Conclusion
Cette partie de modélisation nous a permis de mieux cerner les besoins ainsi que les
attentes de notre projet. On a ainsi pu réaliser une structure cohérente du futur site.
Cette étape est très importante dans un projet puisqu’elle en est le fondement d’une
réalisation efficace.

15
Chapitre 3

Réalisation et mise en œuvre

3.1 Introduction
Dans ce chapitre, nous passons à la phase implémentation. Nous allons présenter les
différentes technologies utilisées ainsi que l’environnement de la réalisation. Nous expli-
querons nos choix techniques, et donnerons ensuite une description des résultats aboutis
approuvés par quelques imprimés écrans.

3.2 Choix techniques

3.2.1 Langages utilisés
Pour implémenter notre projet, nous avons opté pour le langage PHP[2]. Le choix de
ce langage est du, premièrement au fait que nous avons fait une conception orientée objet
avec UML[1], ce qui nous conduit à utiliser des langages orientés objet. En second lieu, la
portabilité du langage PHP[2], nous permet d’implémenter notre serveur applicatif sans
nous préoccuper du système d’exploitation sur lequel il va être déployé. Les technologies
web HTML[3], CSS[4], Bootstrap[6] et JavaScript[7] sont aussi utilisés pour réaliser les
interfaces du site web.

• PHP [2] (HyperText Preprocessor) : plus connu sous son sigle PHP, est un
langage de programmation libre et gratuit, principalement utilisé pour produire des
pages Web dynamiques via un serveur HTTP, mais pouvant également fonctionner
comme n’importe quel langage interprété de façon locale. PHP est un langage impératif
orienté objet. Il a permis de créer un grand nombre de sites web célèbres, comme
Facebook, Wikipédia, etc. Il est considéré comme une des bases de la création de sites
web dits dynamiques mais également des applications web.

• HTML [3] (HyperText Markup Language) : généralement abrégé HTML, est le

format de données conçu pour représenter les pages web. C’est un langage de balisage
permettant de structurer sémantiquement et logiquement et de mettre en forme le
contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires
de saisie, et des programmes informatiques. Il permet de créer des documents avec des
équipements très variés de manière conforme aux exigences de l’accessibilité du web.

16
• CSS [4] (Cascading Style Sheets) : Les feuilles de style en cascade forment un
langage informatique qui décrit la présentation des documents HTML. Par l’intermé-
diaire de propriétés d’apparence (couleurs, bordures, polices, etc.) et de placement
(largeur, hauteur, côte à côte, dessus-dessous, etc.), le rendu d’une page web peut être
intégralement modifié sans aucun code supplémentaire dans la page web. Les feuilles
de styles ont d’ailleurs pour objectif principal de dissocier le contenu de la page de son
apparence visuelle.

• SQL [5](Structured Query Language) : est un langage informatique normalisé

servant à exploiter des bases de données relationnelles. La partie langage de manipula-
tion des données de SQL permet de rechercher, d’ajouter, de modifier ou de supprimer
des données dans les bases de données relationnelles.

• Bootstrap [6] (Framework) : c’est une collection d’outils utile à la création du

design (graphisme, animation et interactions avec la page dans le navigateur etc.) de
sites et d’applications web. C’est un ensemble qui contient des codes HTML et CSS,
des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que
des extensions JavaScript en option. C’est l’un des projets les plus populaires sur la
plate-forme de gestion de développement. Bootstrap est compatible avec les dernières
versions des navigateurs majeurs, mais peut fonctionner de manière dégradée sur des
navigateurs plus anciens. Depuis la version 2, le Framework adopte la conception de sites
web adaptatifs, permettant aux projets utilisant Bootstrap de s’adapter dynamiquement
au format des supports depuis lesquels ils sont accédés (PC, tablette, smartphone).

• JavaScript [7] :Le JavaScript est un langage informatique utilisé sur les pages
web.La particularité du JavaScript consiste à créer des petits scripts sur une page HTML
dans le but d’ajouter une petite animation ou un effet particulier sur la page.

3.2.2 Logiciels utilisés

Afin de réaliser notre site web, nous avons eu recours à plusieurs logiciels.

• StarUML [8] : logiciel pour la réalisation des différents diagrammes de modéli-

sation.Ce logiciel est cédé comme open source par son éditeur, à la fin de son exploitation
commerciale, sous une licence.StarUML gère la plupart des diagrammes spécifiés dans la
norme UML 2.0. L’export des diagrammes peut se faire dans les format JPEG, WMF,
SVG et PNG.

• WampServer [9] : est une plate-forme de développement Web sous Windows

pour des applications Web dynamiques à l’aide du serveur Apache2, du langage de
scripts PHP et d’une base de données MySQL. Il possède également PHPMyAdmin pour
gérer plus facilement vos bases de données.

17
• phpMyAdmin [10] : est une application Web de gestion pour les systèmes de
gestion de base de données MySQL réalisée en PHP. Cette interface pratique permet
d’exécuter, très facilement et sans grandes connaissances en bases de données, des re-
quêtes comme les créations de table de données, insertions, mises à jour, suppressions et
modifications de structure de la base de données, ainsi que l’attribution et la révocation
de droits et l’import/export.

• LaTeX [11] : pour la rédaction des rapports.

C’est un langage et un système de composition de documents créé par Leslie Lamport
en 1983. Plus exactement, il s’agit d’une collection de macro-commandes destinées à
faciliter l’utilisation du processeur de texte Tex de Donald Knuth.

On a utilisé en plus de ces logiciels, des applications Android pour les vidéos et
les audio utilisés dans le site web (VivaVideo, Changeur de voix), ainsi un site de
montage en ligne sur le web kizoa[12].

18
3.3 Présentation des réalisations
3.3.1 Espace visiteur
Lorsqu’un visiteur arrive sur la page d’accueil (voir la Figure 3.3.1) , il n’aura accès
qu’à la rubrique "j’apprends" et "je m’amuse" pour consulter les cours et accéder aux
jeux. Il peut éventuellement s’inscrire autant qu’élève ou enseignant pour découvrir les
autres espaces.

Figure 3.3.1 – Page d’accueil

Comme on peut le voir sur la Figure 3.3.1 ci-dessus la page d’accueil est divisée en
quatre parties :

19
Accueil : Cette partie qui est illustré dans la Figure 3.3.2 ci-dessous englobe le
logo de notre site, son nom et la barre de menu.

Figure 3.3.2 – Première partie : "Accueil"

Mission : Comme le montre la Figure 3.3.3 ci-dessous cette partie décrit brièvement
le contenu du site Web.

Figure 3.3.3 – Deuxième partie : "Notre mission"

20
Contenu : La Figure 3.3.4 ci-dessous montre les images qui contiennent des liens
vers les différentes rubriques "J’apprends","Je m’entraîne","Je m’évalue" et "Je
m’amuse".

Figure 3.3.4 – Troisième partie : "Contenu"

À propos : Cette partie qui est illustré sur la Figure 3.3.5 présente une description
des membres qui ont contribué à la réalisation du site web.

Figure 3.3.5 – Quatrième partie : "À propos"

21
3.3.2 Espace Élève
l’élève peut accéder à son espace après authentification avec son email et son mot
de passe.La Figure 3.3.6 ci-dessous représente la première page de l’espace "élève". Cet
espace est animé par des audio pour aider et guider l’enfant dans ses choix .

Figure 3.3.6 – Espace Élève

À l’issue du choix de "J’apprends" qui symbolise les cours, l’élève sera ramené à
choisir son niveau puis le cours.
Les cours sont représentés comme le montre la Figure 3.3.7 ci-dessous par des vidéos.
le choix de la vidéo est préférable car l’enfant a beaucoup de mal à se repérer dans les
écrits. Il met du temps à comprendre qu’il y a une explication logique du cours. Il a
donc besoin de réentendre aussi souvent que nécessaire l’information pour en intégrer la
totalité du sens.

22
 Figure 3.3.7 – Exemple d’un cours : "Addition"

Quand l’élève choisit "Je m’entraîne" il est redirigé vers une page qui contient des
exercices. Ces derniers sont générés d’une manière aléatoire.

Figure 3.3.8 – Exemple d’exercice : "Addition"

23
 Quand l’élève choisit "Je m’évalue", il sera ramené dans une page pour choisir des
épreuves.La Figure 3.3.9 montre un exemple d’exercice d’une épreuve. La correction est
affichée une fois l’élève choisit sa réponse.
À la fin de l’épreuve le score est affiché, la base de données enregistre les trois meilleurs
scores de l’élève.

Figure 3.3.9 – Affichage du score

Quand l’élève choisit la rubrique "Je m’amuse", il est redirigé vers une page qui
contient des jeux open source dans le but d’offrir un cadre de divertissement pour l’enfant.

Figure 3.3.10 – Espace des jeux

24
3.3.3 Espace Enseignant
L’espace enseignant est un espace dédié aux professeurs pour déposer leurs cours et
ajouter les exercices.
Pour modifier un cours, l’enseignant doit saisir l’identifiant du cours, il charge le cours
pour ensuite faire les mises à jour désirées. Il peut aussi supprimer son cours.
On offre au professeur une interface avec un éditeur de texte destiné à la création et
l’édition de fichiers textes, cet éditeur a pour but de convertir tout ce qui est écrit en
lettres en code html et puisque c’est un site interactif de mathématiques il faut pas
oublier l’option MathJax[13] pour écrire les fractions et les fonctions mathématiques et
autres .

•MathJax [13] : C’est une bibliothèque logicielle JavaScript qui affiche les for-
mules mathématiques dans des navigateurs web, en utilisant les balises de LaTeX[11].
MathJax est distribué comme logiciel libre.

Le professeur après connexion est redirigé vers son espace, il peut choisir dans une
liste les mises à jours désirées, la Figure 3.3.12 ci-dessous illustre l’espace enseignant.

Figure 3.3.11 – Espace Enseignant pour ajouter un cours ou un exercice

25
 L’enseignant en choisissant d’ajouter un cours, il se retrouve dans la page qui est
illustré dans la Figure 3.3.12 ci-dessous, il saisit un titre, choisit le niveau puis à l’aide
de l’éditeur il rédige son cours.

Figure 3.3.12 – Espace Enseignant : "Ajouter un cours"

26
3.3.4 Espace Administrateur
La Figure 3.3.16 illustre l’espace de l’administrateur pour gérer les comptes des utili-
sateurs. Ainsi l’administrateur après connexion à cet espace il peut effectuer des mises à
jour sur les comptes des élèves et des enseignants en choisissant soit "ajouter", "modifier"
ou "supprimer".

Figure 3.3.13 – Espace Administrateur pour les utilisateurs

27
La Figure 3.3.17 ci-dessous illustre l’espace de l’administrateur pour gérer les cours du
site Web. Ainsi l’administrateur après connexion à cet espace il peut effectuer des mises
à jour sur les cours .

Figure 3.3.14 – Espace Administrateur pour la gestion des cours

28
Annexe

Voici un guide d’installation pour pouvoir développer dans le site "Secret of success".

WampServer
Si vous utilisez linux, il faut suivre les étapes suivante :
— Ouvrir le terminal
— saisir dans le terminal la ligne de commande suivante :
sudo apt-get install apache2

— si on vous demande une question répondez par "Y"

— saisir dans le terminal la ligne de commande suivante :
sudo apt-get install php5 libapache2-mod-php5

— si on vous demande une question tapez "Y"

— saisir dans le terminal la ligne de commande suivante :
sudo apt-get install mysql-server

— si on vous demande une question tapez "Y"

— saisir dans le terminal la ligne de commande suivante :
sudo apt-get install libapache2-mod-auth-mysql
php5-mysql phpmyadmin

— si on vous demande une question saisir "Y"

Une fois tous ces paquets installés, ouvrez un des liens suivants dans votre
navigateur :
— http://127.0.0.1/

— http://localhost

29
Si le message « It works ! » s’affiche, votre serveur Lamp est correctement
installé. Selon la version installée, vous pouvez aussi avoir une page intitulée
« Apache2 Ubuntu Default Page ».
En cas de problème consultez la page suivante :

http://doc.ubuntu-fr.org/lamp

Si vous utilisez Windows : avant de télécharger « WampServer », il faut

vérifier quel est le type du système de votre PC : 32 ou 64 bits ?

1-Cliquez sur le bouton « Démarrer » ;

2-Cliquez sur « Panneau de configuration » ;
3-Cliquez sur « Système et sécurité » ;
4-Cliquez sur « Système » ;
ou
Sur le bureau, faites un clic droit sur « Ordinateur ». Dans le menu
contextuel, sélectionnez « Propriétés ».

Figure 3.3.15 – Propriétés du système

Pour télécharger « Wampserver », suivez le lien :

http://www.wampserver.com/

30
En fonction du type de système relevé, téléchargez la version « Wampserver»
adaptée à votre PC.
1- Installez «Wampserver» en exécutant le fichier «wampserver2.2e-. . . exe».
2-Paramétrez la langue française :
-Cliquez droit sur l’icône « Wampserver » en bas à droite de la barre des
tâches ;
-Sélectionnez le dossier « Langue » puis « french ».
3- L’icône de « Wampmanager » dans la barre des tâches doit être de couleur
verte. Si ce n’est pas le cas, vous ne pourrez pas lancer la visualisation d’une
page php par le navigateur ou lancer PhpMyAdmin.
4- « Serveur hors ligne » signifie que Wampserver est uniquement en local
(sur votre PC).
5-« Serveur en ligne » signifie que Wampserver est connecté à votre réseau et
que tous les PC ou tablettes numériques appartenant à votre réseau peuvent
accéder à vos sites et à vos bases de données.
6-Vérifications à effectuer si vous avez un problème :
http://forum.wampserver.com/read.php?1,88043
http://php.net/manual/fr/ini.core.php

Figure 3.3.16 – Configuration de wamp

31
Editeur de texte

Pour écrire le code de développement on vous propose un éditeur de texte

à télécharger,"Notepad++" c’est un éditeur de code source qui prend en
charge plusieurs langages.
Voici l’adresse de téléchargement :
http://www.01net.com/telecharger/windows/Internet/editeur_de_site/
fiches/29119.html
— Double cliquez sur l’icône npp.0.2.Installer.exe ;
— acceptez l’installation si la question vous est posée puis laissez-vous
guider par l’assistant ;
— choisissez français puis cliquez sur « OK » ;
— lisez les conditions d’utilisation et cliquez sur « J’accepte » ;
— acceptez le dossier par défaut puis cliquez sur « suivant » ;
— cochez toutes les options sauf la première puis cliquez sur «Installer» ;
— cochez la case permettant de lancer notepad++ puis cliquez sur «Fer-
mer».

Installation

Le téléchargement des dossiers du site est sur l’adresse suivante :

https://www.mediafire.com/?t9kmlwgecgyeqd5
Le téléchargement du code de la base de donées est sur l’adresse suivante :
https://www.mediafire.com/?ovqf9k2232ocpq4
Apres le téléchargement du dossier.zip dans votre ordinateur suivez les
étapes suivantes :
1-cliquez sur le bouton "Démarrer" ;
2-cliquez sur le bouton "Ordinateur" ;
3-accéder à votre disque local (C :) ;
4-cliquez sur le fichir "wamp" ;
5-cliquez sur le fichier "www" ;

32
6-extraire le dossier.zip du site Web dans "www" sur linux vous déposez le
dossier dans var/www/ ou bien var/www/html ;
7-revenir à la barre de tâches cliquez sur l’icône verte "W" illustré sur la
Figure au-dessus puis accéder à "localhost" ainsi vous pouvez accéder à
toutes les pages du site Web, et pour l’accès à l’application de gestion de la
base de données cliquez sur "phpMyAdmin" créer une base de données qui
porte le même nom que le fichier.sql puis exporter dans phpmyadmin.

Figure 3.3.17 – le menu dans la barre de tâches

33
Conclusion et perspectives

L’objectif de ce projet était de mettre en place un site web éducatif pour

enfants.

On retiendra de ce projet qu’une étude approfondie est indispensable

avant le développement de toute application. En effet, la création d’une
plateforme web n’est pas une activité à prendre à la légère, elle mérite
d’être suivie et encadrée. On retiendra également qu’un projet de site
Web demande une bonne organisation et une cohérence entre les différents
acteurs du projet.

Les étapes du projet sont presque toutes dépendantes les unes des autres.
Avant de passer à l’étape suivante, il faut avoir validé l’étape précédente.

Cependant, comme tout projet de fin d’étude, nous avons rencontrés

des problèmes de divers types. L’implémentation de notre système fut l’une
des majeures difficultés que nous avons rencontré vu le nouvel environne-
ment de travail et sa complexité.

Ce projet de fin d’études était une occasion pour développer nos com-
pétences en PHP [2],HTML [3],CSS [4], et JavaScript[7]. On a aussi appris
la rédaction des rapports avec LaTeX[11], et utiliser le site de montage
Kizoa [12].

Il est vrai d’après les différents scénarios des tests d’exécution effec-
tués précédemment que nous sommes arrivés à satisfaire les besoins d’offrir
un site éducatif de mathématiques. Mais ceci ne nous empêche pas à penser
à des améliorations à apporter comme perspectives de ce travail. Nous
pouvons améliorer notre application en prévoyant un espace élève plus
structuré et plus ordonné avec plus de cours, d’exercices et des épreuves.

34
35
Webographie

[1] Page disponible à l’adresse :

http://laurent-audibert.developpez.com/Cours-UML/?page=introduction-
modelisation-objet
[2] Page disponible à l’adresse :
http://www.journaldunet.com/solutions/pratique/dictionnaire-du-webmas
technologies-langages/19519/php-hypertext-preprocessor-definition.htm
[3] Hypertext Markup Language. Page disponible à l’adresse :
http://glossaire.infowebmaster.fr/html/
[4] Page disponible à l’adresse :
https://fr.slideshare.net/shawncalvert/html-csspresentation
[5] Page disponible à l’adresse :
http://www.sqlcourse.com/intro.html
[6] Page disponible à l’adresse :
https://www.w3schools.com/bootstrap/default.asp
[7] Page disponible à l’adresse :
http://glossaire.infowebmaster.fr/javascript/
[8] Page disponible à l’adresse :
http://matthieu-brucher.developpez.com/tutoriels/conception/staruml/
[9] Romain Bourdon. WAMPSERVER, plate-forme de développement Web
sous Windows. Page disponible à l’adresse :
http://www.wampserver.com/2011/11/11/presentation-wampserver/
[10] Page disponible à l’adresse :

36
 https://www.evxonline.com/presentation-phpmyadmin.html
[11] Page disponible à l’adresse :
https://www.latex-project.org/
[12] Page disponible à l’adresse :
https://www.kizoa.fr/
[13] Page disponible à l’adresse :
http://docs.mathjax.org/en/latest/start.html

37