Une plateforme pédagogique d'orientation_Projet de fin d'études

Réalisé par : Encadré par :
Mlle. MOUDOUBAH Lamia M. ZAHID Noureddine
Mlle. El Hilali Houda
ANNEE UNIVERSITAIRE 2014-2015

Rapport de projet de fin d’études Page 2
Remerciement :
Remerciements à toute personne ayant été contribués à la réalisation de
notre projet:
Notre encadrant Zahid Noureddine
Nous le remercions de nous inciter à mener à bien ce travail, pour
son aide, son temps passé pour nous guider, ses efforts pour nous intégrer
dans l’environnement de la réalisation des projets informatiques, son
dévouement et ses précieux conseils.
Tous le corps professoral
Nous les remercions vivement, de leurs efforts considérables, leurs
conseils qui nous ont prodigués tout au long de cette année afin de garantir
une formation de qualité.
Les membres du Jury
Merci bien de choisir notre groupe, ainsi de vouloir
accepter d'évaluer ce travail
Finalement, une attention particulière à des personnes qui en ont
participé même de loin à la réussite de ce modeste travail par leur
encouragement, et plus particulièrement M.IBANNAI N pour ses
conseils visés, et son aide ainsi sa disponibilité.

L'éducation consiste à nous donner des idées,
et la bonne éducation à les mettre en
proportion.
Montesquieu
Artiste, écrivain,
Philosophe (1689 - 1755)

Table des matières :
Table des figures :...................................................................................................... 5
Introduction :............................................................................................................... 7
Chapitre I:…………………………………………………………………………………………………………………………………………8
1. Qu’est ce qu’un site pédagogique ? :.......................................................................... 9
2. Problématique:...........................................................................................................13
Chapitre II: ………………………………………………………………………………………………………………………………………14
1. Cycle de vie du projet : ..............................................................................................15
2. Cahier des charges:...................................................................................................16
3. Modele conceptuel de données: ................................................................................19
4. Importation sous PHPMyAdmin : ...............................................................................25
5. Méthode MVC:...........................................................................................................26
6. Design avec le bootStrap:..........................................................................................29
Chapitre III:………………………………………………………………………………………………………………………………………31
1. Les fonctionnalités du projet : ...................................................................................32
Conclusion :.............................................................................................................. 44
Lexique :................................................................................................................... 46
Webographie : .......................................................................................................... 47

Table des figures :
Figure 1 : Cycle de vie……………………………………………………………………..12
Figure 2 : Formation en PHP5..................................................................................17
Figure3 : Modèle conceptuel de données………………………………………….……18
Figure 4 : Modèle physique de données………………………………………………...19
Figure 6 : Modèle Logique de données……………………………………………….…19
Figure 7 : le Script SQL…………………………………………………………………….20
Figure 8 : Le Script SQL …………………………………………………………………..20
Figure 8 : le Script SQL......................................................................................…...20
Figure 9 : le Script. SQL ……………………………………………...……..……………21
Figure 10 : le Script. SQL ………………...………………………………………………22
Figure 11 : le Script. SQL………………….………………………………………………23
Figure 12 : la base de données MySQL ……………………….…….…………….……24
Figure 13 : Méthode MVC ………………………………………………………………..26
Figure14 : Utilisation de la méthode MVC………………………………………….27
Figure 15 : Page D’accueil……………………………………….………..………………30
Figure 16 : La suite de la Page D’accueil…………………..……………………………31
Figure 17 : La suite de la Page D’accueil………………………………….……….……31
Figure 18 : La suite de la Page D’accueil………………………………………..………33

Figure 19 : La partie connexion…………………………………………..…….…………33
Figure 20 : La partie inscription………………………………………………...…………34
Figure 21 : la suite de La partie inscription……………..……………………………….34
Figure 22 : Page orientation « bachelier »…………………………..………………….35
Figure 23 : Page orientation « Etudiant »…………………………..………….……….35
Figure 24 : Page Concours…………...……….…………………………………………36
Figure 25 : Page Cours……………………….…………………………………………..37
Figure 26 : Page Forum …………………………………………………………………..37
Figure 27 : Page contactez-nous ………………………………………….…………….38
Figure 28 : Page contactez-nous …………………..……………………………………39
Figure 29 : back-office « Admin » ……………………………….……………………….40
Figure 30: back-office « ajout » …………………………..……………………………..40
Figure 31: back-office « suppression» …………………………………………………41
Figure 32: back-office « modification» ……………………………..………………….41
Figure 33 : back-office partie cours «Professeur»…….……………………………….42
Figure 34 : back-office partie Forum «Professeur» ……………………………………43
Figure 35 : back-office «Etudiant » ……………………………………...………………43

Introduction :
La notion de ressource pédagogique numérique mérite donc d’être délimitée en se
référant aux travaux de recherche dans ce domaine. En effet ces ressources sont définies
comme « ensemble des services en ligne, des logiciels de gestion, d’édition et de
communication (portails, logiciels outils, plateformes de formation, moteurs de recherche,
applications éducatives, portfolios) ainsi que «l’ensemble des données et informations utiles à
l’enseignant ou à l’apprenant dans le cadre d’une activité d’enseignement ou d’apprentissage
utilisant les TIC, activité ou projet pouvant être présenté dans le cadre d’un scénario
pédagogique».
L’objectif visé par l’usage de la ressource pédagogique numérique diffère selon la
nature de celle-ci.
En effet, certaines ressources visent à informer et outiller l’apprenant afin qu’il exploite
l’information. Certaines soutiennent sa communication, ses échanges et ses activités de
coopération afin de favoriser le développement de sa pensée créatrice. D’autres l’aident à
prendre des décisions et à résoudre des problèmes afin qu’il se dote des méthodes de travail
efficaces en exploitant les TIC.
Face au développement de la technologie d’informations et de communications et plus
particulièrement dans le domaine de l’enseignement, on a décidé de créer une ressource
pédagogique numérique. Cette dernière vise à informer et orienter l’apprenant afin qu’il arrive
à exploiter l’information à bon escient. Cette ressource numérique est incarnée dans un site
web pédagogique dédié aux bacheliers et même aux étudiants.

Chapitre I:
Généralité
Qu’est-ce qu’un site web pédagogique ?
Problématique

1 .Qu’est-ce qu’un site web pédagogique ?
Définition :
Partant de l'intégration active des technologies éducatives dans le cursus scolaire marocain
(installation des salles multimédia dans les établissements scolaires, dotation en matériel
informatique, connexion Internet haut débit, intégration de l'informatique en tant que
discipline à part entière...), du recours massif des élèves à l'Internet en tant que source de
l'information et de la participation active des enseignants dans la réalisation des sites web
pédagogiques destinés le plus souvent aux élèves, nous avons tenté de voir, en analysant
certains sites marocains traitant des programmes scolaires scientifiques au secondaire (collège
et lycée), si les sites en question présentent des activités de nature constructiviste susceptibles
de réaliser les compétences visées par l'école marocaine. Nous avons mis le point sur le
concept « constructivisme » étant donné que les sites consultés devraient permettre à
l'apprenant, qui est face à son ordinateur connecté, de jouer un rôle central dans le processus
de construction, d'élaboration et de raffinement de ses propres connaissances en se situant
dans le milieu des Technologies d'Information et de Communication lui permettant d'agir sur
ses propres savoirs, d'interagir avec son milieu et dialoguer avec autrui.
À la lumière des résultats obtenus nous avons présenté des recommandations d'ordres
ergonomique et didactique pour la conception d'un site présentant des activités de nature
constructiviste
Des constats à la problématique
Des entretiens avec les élèves et les enseignants nous ont permis de noter les constations
suivantes :
 Présence d'un problème vis-à-vis de la pertinence du contenu de la plupart des sites
par rapport aux usages projetés.
 Présence d'un problème au niveau de la structuration du contenu présenté dans le site.
 Les activités présentées ne tiennent pas compte du niveau scolaire des élèves.
 Présence du problème de conformité du contenu surtout dans les sites étrangers, ce qui
pousse les élèves à abandonner la navigation.

 La formulation du contenu telle qu'elle est adoptée dans la plupart des sites ne vise pas
à mobiliser chez l'élève la capacité de lire, d'écrire, d'analyser, de comparer, de
distinguer l'essentiel de l'accessoire.
 La mise en ligne du contenu (lisibilité, couleur, navigation) ne tient pas souvent
compte du niveau informatique de l'élève.
 Les activités proposées sont souvent des exercices que les élèves peuvent consulter sur
des livres sans se connecter sur Internet, et ne leur permettent pas de construire leur
propre savoir d'une façon autonome.
 Les sites sont le plus souvent délaissés par leurs concepteurs (enseignants) et ne sont
pas mis à jour.
 La plupart des sites qui présentent les programmes scolaires scientifiques du
secondaire sont en français.
 Les enseignants (concepteurs de ces sites) ne répondent pas aux questions des élèves
même si les sites sont dotés d'outils de communication.
Analyse de quelques sites
La qualité d'un site pédagogique sur Internet repose principalement sur l'organisation de
l'information, tant textuelle que graphique, sur la flexibilité de la navigation, la nature des
activités proposées et sur l'interactivité.
Dans notre recherche nous nous intéressons principalement à la recherche des activités de
nature constructiviste dans des sites marocains traitant des programmes scolaires scientifiques
en focalisant l'analyse sur les objectifs du site, la façon dont le contenu y est présenté, les
outils de communications du site, la typologie des activités qui ont une relation avec
l'apprentissage collaboratif. Ainsi, une grille a été élaborée pour cette fin selon trois éléments
jugés essentiels :
Informations générales sur le site à analyser
Cet élément de la grille vise à collecter des informations préliminaires sur le site. En effet,
on peut avoir des informations sur :
 L'URL (adresse) du site
 Son hébergeur (gratuit ou payant)
 La discipline traitée

 Le concepteur : son profil et ses intentions
 Le public visé
 La date de conception et de mise à jour.
Design et ergonomie du site
Grâce à cet élément, on peut avoir une idée claire sur l'interface du site et juger du respect
des règles ergonomiques de la conception. Nous nous intéressons dans ce volet plus
particulièrement aux outils de communications, à la navigation et à l'interactivité qui vont
refléter le degré du travail collaboratif et celui de l'autonomie et la motivation des apprenants.
Le contenu présenté par le site
Principal élément de la grille d'analyse, nous donner une idée claire sur ce qu'on cherche
exactement dans le site :
 Types de documents dans le site
 Axes d'apprentissage
 Scénarios pédagogiques
 Stratégies pédagogiques
 Types d'activités
 Projets
Nous avons retenu comme activité de nature constructiviste :
 Toute activité permettant la construction individuelle et collective des connaissances
en opposition à une transmission des savoirs
 Toute activité didactique centrée sur l'apprenant et axée sur les savoirs pratiques lui
permettant de résoudre un problème ou de réaliser un projet.
Qualité du contenu
Une activité est de nature constructiviste lorsqu'elle :
 possède des perspectives multiples,
 est centrée sur l'apprenant,
 implique l'enseignant dans le rôle de facilitateur et collaborateur,

 fait appel à la métacognition,
 induit l'autonomie de l'apprenant,
 est basée sur des tâches et contenus authentiques,
 favorise la construction des connaissances (scaffolding),
 permet la collaboration, la résolution de problèmes et l'utilisation de l'erreur,
 est établie sur une mise en contexte conceptuelle,
 est fondée sur des points de vue multiples.
Compte tenu de la particularité du contenu d'un site web traitant d'un programme scolaire
scientifique (concepts scientifiques complexes, niveaux différents des apprenants...), des
caractéristiques des activités de nature constructiviste et de la formation/enseignement via un
environnement virtuel à distance, l'enseignant concepteur doit faire appel aux opérations
suivantes :
 Transposition didactique (transposition du savoir scientifique en savoir enseignable)
 Trames conceptuelles
 Niveau de formulation d'un concept
 Carte conceptuelle
 Pratiques sociales de référence
 représentations des apprenants à distance
Ainsi il doit impérativement suivre les étapes suivantes pour élaborer les activités de son
site :
 Étude préalable
 Analyse et structuration des contenus
 Élaboration des situations d'apprentissage
 Insertion des outils de formation dans leur contexte d'utilisation
a - Étude préalable
Généralement un projet de formation s'enclenche à partir d'une demande ou d'un besoin. Au
cours de cette phase les besoins et demandes des apprenants (utilisateurs du site) vont être
exprimés, étudiés et analysés en vue de cerner l'idée du projet à concevoir. Ceci peut se
concrétiser par la formulation d'un cahier des charges qui formalisera l'expression de la
demande des apprenants et l'offre de l'enseignant concepteur.

De cette idée il doit se poser les questions suivantes :
 À qui s'adresse la formation ?
 Quels bénéfices les apprenants retireront de la formation ?
 Quelles compétences veut-on installer ?
2.Problématique :
Dans notre projet, nous sommes amenés à réaliser un site web qui a pour
sujet principale l’enseignement. Vu le problème toujours existant, et la difficulté
affrontée lors de l’orientation on a décidé de réaliser un site d’orientation. Et vu notre
situation, étudiants en supérieure, nous trouvons toujours cette difficulté d’accès au
différents cours on a décidé donc de les présentées dans notre site web.
Notre site permettra aux étudiants bacheliers de s’orienter et ceux du
supérieure de savoir où continuer leur formation et leur donne la possibilité d’accéder
à des cours mis sur le site par des enseignants filtrés par écoles.
Dans ce sens, nous avons opté pour réaliser un site web afin de facilité le
parcours supérieurs aux différents étudiants.

Chapitre II:
Planification et
conception
Cycle de vie du projet
Cahier des charges
Outils de réalisation
Modèle Conceptuel de Données

1. Le cycle de vie du projet :
Figure 1 : Cycle de vie
Cahier des charges Formation en PHP5
Livraison
Test d’intégration/unitaire
Etude de faisabilité
Design
Codage
Conception
Formation en MVC

2. Cahier des charges:
 Objectifs :
es étudiants, bacheliers lors de leur orientation.
Les différentes concours d’accès aux écoles supérieures « Des
différentes Domaines ».
Avoir accès aux différents cours posés par des professeurs des établissements
connectés.
Avoir accès à un forum, participer aux réponses des autres, poser vos questions,
vos suggestions…
 Langues :
 Ressources apportées :
 Spécifications techniques :
par plusieurs tableaux.
 Aspect et qualité du site :
Plate-forme simple.
ions rapidement «interfaces organisées ».
 Présentation:

 Contenu:
: Page d’accueil.
Page orientation.
Page concours.
Partie 4 : Page cours.
Partie 5 : Page forum.
Partie 6 : Page A propos.
Partie 7 : Page contactez-nous.
Partie 8 : L’inscription.
Partie 8 : Connexion.
Partie 9 : Back-office du Propriétaire « Paramétrage ».
Partie 10 : Back-office de l’étudiant.
Partie 11 : Back-office du professeur.
 Maintenance :
de l’application pendant 2 mois.
 Délai de livraison :
Non encore précisé.

3. Outils de réalisation:
Pour la réalisation de tous les projets web, on utilise souvent les mêmes
logiciels à distribution libre : PHP 5, la SGBD MySQL et les serveurs « EasyPHP,
WampServer Ou Xampp ».
 PHP 5 :
PHP5 n'est pas une révolution mais une évolution. Cette évolution introduit
quelques changements majeurs tout en conservant une compatibilité totale avec la
version antérieure. Les principales nouvelles fonctionnalités sont:
 SQL ite: Un SGBD embarqué dont nous verrons les principales forces et
faiblesses
 Simple XML: Un nouveau parseur XML très efficace et très simple
 Un nouveau modèle POO: Le modèle objet complètement remanié, l'ancien
restant correctement interprété par PHP.
Figure 2 : Formation en PHP5.

4. Modèle Conceptuel de Données:
Concernant la partie conception de notre projet, j’ai choisi de tracer ma base
de données sous le logiciel PowerAMC, on a commencé par le MCD :
Figure 3 : Le modèle conceptuel de données
a) Modèle Logique de Données:
Après avoir tracé le MCD, on passe à la génération du modèle logique de données,
et voilà le MLD :

Figure 5 : Modèle logique de données
b) Modèle Physique de Données:
A partir du modèle logique de données, on a généré le modèle physique de
données, on peut même le générer à partir du MCD précèdent, mais avant on doit
choisir le SGBD, il existe plusieurs, je vais choisir le MySQL :
Figure 6: Le modèle Physique de données

c) Génération de Script. SQL:
Finalement extraire le Script. SQL : « quelques figures pour montrer le principe du
script ».
Figure 7 :Figure 8 : le Script. SQL

Figure 9: le Script. SQL

5. Importation sous PHPMYADMIN:
Cette étape consiste à copier le script. SQL dans le phpmyadmin et puis faire
apparaitre notre base de données réaliser sous powerAMC, Voilà la base de
données générée :

Figure 12: la base de données MySQL.
6. Méthode MVC:
1. Qu’est-ce qu’une Méthode MVC ?
Le patron MVC est issu de travaux de Trygve Reenskaug en 1978-79. Son but
principal était de proposer une solution générale aux problèmes d'utilisateurs,
manipulant des données volumineuses et complexes. D'abord appelé Model-View-
Editor (Modèle-vue-éditeur), Reenskaug le renomme Modèle-vue-contrôleur après
avoir discuté notamment avec Adele Goldberg1
.
L'organisation d'une interface graphique est délicate. L'architecture MVC ne
prétend pas en éliminer tous les problèmes, mais fournit une première approche pour
le faire. Offrant un cadre normalisé pour structurer une application, elle facilite aussi
le dialogue entre les concepteurs.
L'idée est de bien séparer les données, la présentation et les traitements. Il en
résulte les trois parties énumérées plus haut : le modèle, la vue et le contrôleur.

Le modèle représente le cœur (algorithmique) de l'application : traitements des
données, interactions avec la base de données, etc. Il décrit les données manipulées
par l'application. Il regroupe la gestion de ces données et est responsable de leur
intégrité. La base de données sera l'un de ses composants. Le modèle comporte des
méthodes standards pour mettre à jour ces données (insertion, suppression,
changement de valeur). Il offre aussi des méthodes pour récupérer ces données. Les
résultats renvoyés par le modèle ne s'occupent pas de la présentation. Le modèle ne
contient aucun lien direct vers le contrôleur ou la vue. Sa communication avec la vue
s'effectue au travers du patron Observateur.
C’avec quoi l'utilisateur interagit se nomme précisément la vue. Sa première
tâche est de présenter les résultats renvoyés par le modèle. Sa seconde tâche est de
recevoir toute action de l'utilisateur (hover, clic de souris, sélection d'un bouton radio,
cochage d'une case, entrée de texte, de mouvements, de voix, etc.). Ces différents
événements sont envoyés au contrôleur. La vue n'effectue pas de traitement, elle se
contente d'afficher les résultats des traitements effectués par le modèle et d'interagir
avec l'utilisateur.
Plusieurs vues peuvent afficher des informations partielles ou non d'un même
modèle. Par exemple si une application de conversion de base a un entier comme
unique donnée, ce même entier peut être affiché de multiples façons (en texte dans
différentes bases, bit par bit avec des boutons à cocher, avec des curseurs). La vue
peut aussi offrir à l'utilisateur la possibilité de changer de vue.
Le contrôleur prend en charge la gestion des événements de synchronisation
pour mettre à jour la vue ou le modèle et les synchroniser. Il reçoit tous les
événements de l'utilisateur et enclenche les actions à effectuer. Si une action
nécessite un changement des données, le contrôleur demande la modification des

données au modèle, et ce dernier notifie la vue que les données ont changée pour
qu'elle se mette à jour. D'après le patron de conception observateur/observable, la
vue est un « observateur » du modèle qui est lui « observable ». Certains
événements de l'utilisateur ne concernent pas les données mais la vue. Dans ce cas,
le contrôleur demande à la vue de se modifier. Le contrôleur n'effectue aucun
traitement, ne modifie aucune donnée. Il analyse la requête du client et se contente
d'appeler le modèle adéquat et de renvoyer la vue correspondant à la demande.
Quand un même objet contrôleur reçoit les événements de tous les composants,
il lui faut déterminer quelle est l'origine de chaque événement. Ce tri des événements
peut s'avérer fastidieux et peut conduire à un code peu élégant (un énorme switch).
C'est pourquoi le contrôleur est souvent scindé en plusieurs parties dont chacune
reçoit les événements d'une partie des composants.
Figure 13: Méthode MVC.
2. Utilisation du MVC :
J’ai utilisé la méthode MVC parce qu’elle me permet d’organiser mon code
ainsi de travailler l’application d’une manière plus professionnelle, simple, et
compréhensible.

Figure 14 : Utilisation de la méthode MVC.
7. Design avec le BOOTSTRAP:
Afin de bien organiser les interfaces de mon application, c’est-à-dire la partie vue
de mon projet, j’ai travaillé avec le BOOTSTRAP, qui est un Framework HTML5,
CSS 3 et JavaScript permettant de créer des applications web, responsive ou non,
rapidement et simplement. Il existe actuellement deux versions. J’ai travaillé avec la
version la plus récente : la 3e. Avant d’utiliser le Framework, faut d’abord
comprendre le système de grilles.
Les fichiers les plus importantes de BOOTSTRAP sont :

 bootstrap.css : ou bootstrap.min.css correspond au thème de base
(couleurs, polices, colonnes, icônes…) et se trouve dans le dossier
dist/css.
 bootstrap.js : regroupe l’ensemble des plugins proposés par
Bootsrap (carrousel, modales, alertes…). Ce fichier se trouve dans le
dossier dist/js. Et on peut inclure individuellement chaque plugin
proposé (dans le dossier js à la racine du dossier Bootstrap). Aussi
faut-il inclure jQuery pour faire fonctionner les plugins JavaScript.
 Bootstrap 3 est codé en HTML5, l’HTML 5 n’est pas interprété
correctement sur Internet Explorer inférieur à la version 9. Pour
résoudre ce problème, il vous faudra inclure le plugin html5shiv.js.
Aussi l’appel au fichier respond.min.js.
 Bootstrap propose un CSS déjà complet. Il met à disposition un
certain nombre de classes qui permet de styler intégralement tous les
éléments de l’application.

Chapitre III:
Les fonctionnalités
du projet

1. Les fonctionnalités du site:
Afin d’avoir un site professionnel avec un design assez simple, clair et aussi
bien sophistiqué. Faut respecter la partie qui concerne le back-office ainsi que celle
du front office. Commençant par le back-office : il est représenté selon trois profils
« back-office du propriétaire, Back-office du professeur, Back-office de l’étudiant ».
Puis il y a le front office c’est la partie visible par l’utilisateur, comprend plusieurs
pages riches en informations.
Le front office :
a) Page D’accueil :
Est la page principale d'un site web, elle se distingue des autres pages
du site par le fait qu'elle est censée représenter, à l'internaute visiteur, le site sur
lequel il se trouve de manière claire et forte. Pour notre site « PERDU APRES MON
BAC » la page d’accueil contient des informations sur l’enseignement au Maroc,
différentes rubriques qui intéresse l’étudiant, des vidéos aussi... .
Figure 15: Page D’accueil.

Figure 16: La suite de la Page D’accueil.

b) La connexion et l’inscription :
Cette partie est présentée par deux boutons « figurés dans toutes les pages
de notre site et même ils sont répétés au pied de la page » essentiels « connexion »
pour se connecter selon ton profil et « inscription » si vous êtes non inscris et que vous
voulez naviguez dans notre site ainsi avoir accès au cours, forum…
Figure 19: La partie connexion

Figure 20: La partie inscription
Figure 21: la suite de La partie inscription

c) Page Orientation.
Page Orientation comprend un pop-up, ce dernier contient deux check-box
pour le choix de la filière et du niveau pour les étudiants et qu’un seul check-box de
filière pour les bacheliers.
Figure 22: Page orientation « bachelier »
Figure 23: Page orientation « Etudiant »

d) Page Concours.
Contient Les informations des différents concours récents des établissements
connectés.
Figure 24: Page Concours
e) Page cours :
On ne peut accéder à l’interface des cours que si et seulement si on a effectué
l’inscription sur le site. Après avoir inscrit on peut « ajouter, supprimer ou modifier »
des cours selon notre profil.

Figure 25: Page Cours
f) Page Forum:
Cette a le même principe que la page cours.
Figure 26: Page Forum

g) page A propos :
La page «à-propos de nous » est un composant fondamental de tout site web,
elle a pourtant un important rôle de transformation, soit directe, soit indirecte en
favorisant la mise en contact entre le visiteur et le propriétaire du site.
Figure 27: Page A propos de nous
h) Page contactez-nous :
Souvent négligée, la page de contact des sites web est pourtant assez souvent la
dernière chose vue par l’internaute avant de prendre une décision.
Informations permettant la localisation de l’établissement, numéro de téléphone,
formulaire de contact. Il y a mille façons d’agrémenter cette page.
On a inséré le formulaire dans la page contactez-nous, afin d’aider les
internautes à entrer en contact avec nous
A l’aide de ce formulaire, les internautes peuvent envoyer des messages contenant
leurs coordonnées.

Lorsque le client clique sur envoyer, son message est transféré à l’adresse suivante :
perduapresmonbac@gmail.com
Figure 28: Page contactez-nous
Le back-office :
2. Paramétrage du propriétaire:
C’est la partie administration utilisée par le propriétaire du site, elle n’est pas
visible par les étudiants, les professeurs ou les visiteurs en général. Comprend tous
les informations des établissements, Orientations, concours, cours, forums,
professeurs et les matières « une gestion entière ».

Figure 29: back-office « Admin »
Les interfaces de manipulation « ajout, suppression, modification »
Figure 30: back-office « ajout »

Figure 31: back-office « suppression»
Figure 32: back-office « modification»

3. Back-office du professeur :
C’est la partie du professeur utilisée que par un professeur déjà inscrit ou
ajouté par l’administrateur du site. Elle n’est pas visible par les étudiants ou les
visiteurs en général. Comprend tous les informations des cours et forums que peut
gérer le professeur.
Figure 33: back-office partie cours «Professeur»
Figure 34: back-office partie Forum «Professeur»

4. Back-office de l’étudiant :
C’est la partie qui concerne l’étudiant utilisée que par l’étudiant déjà inscrit.
Elle n’est pas visible par un étudiant non inscrit ou des visiteurs en général.
Comprend tous les informations des cours que peut gérer l’étudiant.
Figure 35: back-office «Etudiant »

Conclusion :
Au terme de ce projet de fin d’années, On a eu la satisfaction d’avoir réalisé un
site web pédagogique permettant d’aider les étudiants. C’est un site finalisé et
accompagnée de toutes les informations réelles et nécessaire à son efficacité.
Par ailleurs, l’objectif principal du projet de fin d’études était la découverte du
monde de la réalisation des projets et dans cette optique, ce projet a totalement
répondus à nos attentes.
Finalement, on a traité toutes les phases nécessaires à la réalisation de
ce site, et dans ces phases on a appris à mieux manipuler les langages PHP,
HTML,CSS et Java Script, ainsi on a approfondi nos connaissances sur le langage
SQL avec le SGBD, MySQL.
: Afin que notre projet soit complet et plus efficace, onLes perfections
souhaite avoir une base de données des CIN et CNE au niveau national pour la
intégrer dans notre plate-forme ainsi, le lancer en ligne «Hébergement » afin qu’in
soit accessible par le public visé et aussi travailler sur l’enregistrement des traces
des étudiants.

Lexique :
– est un langage informatique qui sert à décrire la présentation des
documents HTML et XML.
Les standards définissant CSS sont publiés par le World Wide Web Consortium
(W3C).
Introduit au milieu des années 1990, CSS devient couramment utilisé dans la
conception de sites web et bien pris en charge par les navigateurs web dans les
années 2000.
– est une bibliothèque JavaScript libre qui porte sur l’interaction entre
JavaScript (comprenant Ajax) et HTML, et a pour but de simplifier des commandes
communes de JavaScript. La première version date de janvier 2006.
– Hypertext Preprocessor, plus connu sous son sigle PHP, est un langage de
programmation compilé à la volée libre 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 disposant depuis la

Webographie :
Sources Informations
http://fr.wikipedia.org/wiki/PHP
http://fr.wikipedia.org/wiki/JQuery
http://fr.wikipedia.org/wiki/Mod%C3%A
8le-vue-contr%C3%B4leur
http://fr.openclassrooms.com/informati
que/cours/adopter-un-style-de-
programmation-clair-avec-le-modele-
mvc
http://blog.webnet.fr/tag/responsive-
design/
http://www.laformation.ma/#
http://www.9rayti.com/
http://www.etudiant.ma/
Définition du PHP5.
Définition du JQuery.
Définition du MVC.
Des exemples du MVC.
BOOTSTRAP
Avoir des informations réelles
+
Les sites officiels des établissements

Une plateforme pédagogique d'orientation_Projet de fin d'études

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à Une plateforme pédagogique d'orientation_Projet de fin d'études

Similaire à Une plateforme pédagogique d'orientation_Projet de fin d'études (20)

Une plateforme pédagogique d'orientation_Projet de fin d'études