Rapport PFE : Réalisation d'une application web back-office de gestion pédagogique avec consultation mobile sous ANDROID

RAPPORT DE PROJET DE FIN D’ETUDES
POUR L’OBTENTION D’UN MASTER PROFESSIONNEL
MICDA
Date de la soutenance : 31/05/2014
Réalisé par : RIAHI Anas
ASRI Mohammed
HAMANE El mehdi
Membres du jury : Chef du jury
EL BEGGAR Omar Encadrant
Examinateur
Année universitaire : 2013/2014
REMERCIEMENTS
Université Hassan
1er Settat
IT-Learning Campus Faculté des Sciences
et Techniques
« Réalisation d'une application web back-office de gestion
pédagogique avec consultation mobile sous ANDROID»
« Réalisation d'une application web back-office de gestion
pédagogique avec consultation mobile sous ANDROID»

On remercie Dieu, le tout-puissant, notre créateur pour l'intelligence, le courage, la santé et la force
qu'il nous a donné, puisse-t-il toujours nous garder.
On tient à remercier également:
• Nos parents; aucun remerciement ne saurait exprimer toute l'affectation qu'ils
portent, Ce travail est le résultat de leur immense sacrifice et de leur tendresse
qu'ils nous ont toujours apportés.
• Nos formateurs sans exception pour leurs soutiens technique et psychologique
et leurs efforts afin de nous assurer une meilleure formation.
• Notre Université au nom du directeur, et de tous les Membres de la direction de
l’FST de Settat et d’IT-Learning.
• Et tous ceux qui nous ont aidé de proche ou de loin.
SOMMAIRE
2

Remerciements.....................................................................................................................................1
Sommaire..............................................................................................................................................2
Liste des figures....................................................................................................................................3
Liste des tableaux.................................................................................................................................4
Introduction..........................................................................................................................................4
Présentation du thème de recherche.....................................................................................................6
Conclusion..........................................................................................................................................53
Bibliographie......................................................................................................................................54
LISTE DES FIGURES
Figure 1 : Schéma global de l’application............................................................................................9
Figure 2 : Diagramme d’acteurs.........................................................................................................11
Figure 3 : Diagramme descriptif d’acteurs.........................................................................................11
Figure 4 : Contexte statique................................................................................................................12
Figure 5 : Diagramme de cas d’utilisation..........................................................................................13
Figure 6 : Diagramme de séquence boite noire (Préinscription)........................................................17
Figure 7 : Diagramme de séquence boite noire (après inscription)....................................................18
Figure 8 : Diagramme de séquence boite noire (note par enseignant)...............................................18
Figure 9 : Diagramme de séquence boite noire (note par administrateur).........................................19
Figure 10 : Diagramme de séquence boite noire (enregistrement des paiements).............................19
Figure 11 : Diagramme de classe d’analyse.......................................................................................20
Figure 12 : Diagramme de séquence boite blanche (abscence)..........................................................21
Figure 13 : Diagramme de séquence boite blanche (ajout des notes)................................................21
Figure 14 : Diagramme de séquence boite blanche (paiements)........................................................22
Figure 15 : Diagramme de séquence boite blanche (upload des cours).............................................22
Figure 16 : Diagramme de séquence boite blanche (upload des plannings)......................................23
Figure 17 : Contenu de la base de données........................................................................................41
3

Figure 18 : Fonctionnement PHP.......................................................................................................44
Figure 19 : Fonctionnement du CakePHP..........................................................................................47
LISTE DES TABLEAUX
Tableau 1 : Tableau d’exigences........................................................................................................12
INTRODUCTION
Le marché de la téléphonie portable connaît actuellement une véritable révolution,
menée par Apple et son iPhone. . Apple a su mettre en avant son produit en ajoutant
au téléphone de nouvelles fonctionnalités et en créant de nouveaux besoins.
Le marché des Smartphones connaît donc un véritable essor dans lequel les acteurs
habituels (Windows et Symbian) essaient de s'engouffrer.
Google, ayant réalisé le potentiel de ce marché, a décidé de s'y introduire en rachetant
une startup travaillant sur un système d'exploitation ouvert pour terminal mobile :
Android.
Les progrès conjoints de la microélectronique, des technologies de transmission sans
fil et des applications embarquées ont permis de produire à coût raisonnable des
terminaux mobiles de haute technologie comme les Smartphones et les tablettes PC.
Actuellement la société Apple à travers son Smartphone « iPhone», sa tablette PC «
iPad » et son système d’exploitation « iPhone OS» est en forte concurrence avec la
communauté Open HandSet Alliance (OHA) qui englobe Google, Motorola, HTC,
Samsung, etc. Cette dernière équipe ses terminaux mobiles par le système
d’exploitation mobile « Android OS».
Cette concurrence a stagné l’évolution des téléphones, alors que les Smartphones sont
en croissance forte.
Durant notre période d’études, nous avons prospecté le marché IT marocain
concluant ainsi la croissance excessive du nombre d’écoles et universités ainsi que les
4

demandes d’informatisation des systèmes d’instruction, donc avons décider afin
d'Approfondir nos connaissances vers la création des applications, services web et
services mobiles de réaliser une application qui soit riche et réalisable.
Nous étions menées à explorer ce nouveau système d'exploitation, Android, et de
faire une application qui permet la gestion pédagogique d’une école avec accès
multiplateforme.
Ce présent rapport sera structuré en six chapitres :
Dans le premier chapitre « Etude préalable », nous nous proposons d’analyser
l’existant et donnons un aperçu sur les différentes plateformes existantes. Et enfin,
nous critiquons l’existant et proposons une solution.
Dans le chapitre « Capture des besoins », nous identifions les acteurs du futur
système, les besoins fonctionnels et non fonctionnels ainsi que le diagramme de cas
d’utilisation général. Des prototypes d’interfaces utilisateurs seront insérés pour
donner un aperçu préliminaire.
Dans le chapitre « Analyse », nous faisons une analyse détaillée et complète des cas
d’utilisation repérés à travers le chapitre précédent.
Dans le chapitre « Conception », nous élaborons une conception détaillée des cas
d’utilisation, les diagrammes de séquence, ainsi que le diagramme de classe complet.
Dans le chapitre intitulé « Implémentation », nous présentons l’environnement
matériel et logiciel, le passage vers le schéma relationnel et quelques composantes
applicatives réalisées.
Enfin, nous clôturons ce mémoire par une conclusion dans laquelle nous résumons
notre solution et exposant quelques perspectives futures.
5

PRÉSENTATION DU THÈME DE RECHERCHE
L’établissement anonyme gère son personnel (administrateur et enseignant) ainsi que
ses étudiants, il exerce multiples taches avec des fiches papiers, envoi des documents
par e-mail ou par courrier postal.
Il n’arrive plus à gérer manuellement son expansion et souhaite utiliser un système
d’information pour lui permettre de répondre à cette croissance et pour gagner en
souplesse de travail.
L’école attend plusieurs services du système d’information comme la gestion
dynamique des personnes, la gestion des affectations des enseignants aux matières et
aux cours, la gestion des étudiants de leur promotion et les affectations des élevés à
leurs cours, en gérant les absences.
L’application qui représente un site front office permet aux étudiants et aux élèves
d’interagir avec la base de données en fonction de leur besoins.
Un site back office est mis en disposition géré par un administrateur permet
d’implémenter la base de données et de la mettre à jour de façon à ce qu’elle répond
exactement aux besoins des différents utilisateurs.
Une application mobile sera mise à disposition des enseignants et des élèves
permettant ainsi à ces derniers d’interagir sans avoir recours à un ordinateur.
6

PARTIE 1 : POSITIONNEMENT ET OBJECTIFS DU PROJET
1.1 OBJECTIFS
Le projet gestion pédagogique se divise en trois parties :
Gestion administrateur :
L’administrateur se charge de cette partie pour garder le contrôle sur le système de
l’établissement
Application mobile :
L’application mobile va permettre à l’étudiant et à l’enseignant de se connecter et
d’effectuer quelques fonctionnalités
Site web :
Le site web lui aussi va permettre aux étudiants et aux enseignants de se connecter et
d’effectuer presque les mêmes fonctionnalités, aussi pour offrir une grande portabilité
du projet
1.2 CONTEXTE / EXISTANT
Dans le cadre de notre projet de fin d’études, il nous a été demandé de concevoir et
réaliser une application web qui va informatiser des taches manuelles comme
l’inscription des étudiants et des enseignants, l’affichage des notes des examens,
préparation des cours pour les étudiants, notation des absences.
7

Ceci a requis l’utilisation de différents langages:
php-html5/css3-javascript-android.
le développement de cette application a été effectué de façon qu’elle soit accessible
de n’importe quel mobile, ceci dit : une application multiplateforme.
Positionnement du projet :
L’application gestion pédagogique se dévisse en trois parties ;
La première et destinée pour l’administrateur qui pourra gérer les notes des étudiants,
les payements des frais de scolarité, l’administration des classes, l’administration des
enseignants.
La deuxième partie est destinée pour les étudiants et les enseignants chacun selon ses
fonctions :
Les enseignants pourront saisir les notes des étudiants, importer les cours dans le
serveur de l’école, saisir les absences et modifier leurs informations personnelles.
Les étudiants peuvent visualiser leurs notes, visualiser leurs nombres d’heures
d’absences et aussi modifier leurs informations personnelles.
La troisième partie qui est la partie mobile va permettre de réaliser plusieurs tâches
similaires à celles dans la partie web sauf qu’elle offrira une portabilité aux
utilisateurs.
Le schéma ci-dessous montre ce fonctionnement:
8

Figure 1 : Schéma global de l’application.
PARTIE 2 : SPÉCIFICATIONS FONCTIONNELLES
2.1 LES BESOINS FONCTIONNELLES :
Pour accompagner le traitement habituel des différents documents de l’école sur
papier on propose les fonctionnalités suivantes sur pc et plateforme mobile,
l’application gestion pédagogique offrira les services suivants:
d- Mode inscription :
Un élève peut s’enregistrer dans une filière.
Les enseignants et les élèves peuvent s’enregistrer dans le site de l’école.
9

e- Mode absence :
L’enseignant doit saisir l’absence des élèves en classe.
L’administrateur peut consulter les absences des élèves en même temps.
L’élève peut consulter ses absences par heures.
f- Mode note :
L’enseignant saisie les notes des élèves après chaque examen.
L’élève peut visualiser ses notes après la correction.
L’administrateur modifie les notes des élèves qui s'absentent.
g- Mode contact :
L’administrateur envoie les notifications par mail aux étudiants et enseignants.
L’étudiant peut envoyer une demande ou un message à l’administration.
h- Mode uploade :
L’enseignant importe les cours dans le serveur de l’école.
L’administrateur importe les plannings pour les étudiants et les enseignants dans le
serveur de l’école.
i- L’application mobile permet de:
• Visualiser le planning.
• Visualiser les absences.
• Visualiser les notes.
• Envoyer des mails.
• Envoyer des messages à l’administrateur.
2.2 ANALYSE DU PROJET :
a. Diagramme d’acteur :
Dans notre projet on a trois acteurs qui interagissent avec le système de gestion
pédagogique :
10

Figure 2 : Diagramme d’acteurs
b. Diagramme descriptive des acteurs :
Dans le diagramme descriptif des acteurs vous trouvez une explication des
différentes tâches que peuvent faire les trois acteurs
Figure 3 : Diagramme descriptif d’acteurs
c. Diagramme de contexte statique :
Le diagramme de contexte statique qui explique le type de relation entre les
acteurs et le système
11

Figure 4 : Contexte statique
d. tableau d’exigences :
Tableau 1 : Tableau d’exigences
N° et nom d’intention Descriptions acteurs
1-INSCRIPTION Les étudiants peuvent s’inscrire dans l’école étudiant
2-UPLOAD DES
COURS
L’enseignant upload les cours dans le
système pour que les étudiants les
téléchargent
enseignant
3-SAISIE DES
NOTES
L’enseignant saisit les notes dans le système enseignant
4-UPLOAD LES
PLANING
L’administrateur uplaod les plannings dans
le système pour les étudiants et les
enseignants
administrateur
5-CONSULTATION
DES NOTES
L’étudiant consulte les notes via son compte étudiant
6-CONSULTATION
DES ABSENCES
L’étudiant consulte les absences via son
compte
étudiant
7-CONSULTATION
DES COURS
L’étudiant a accès aux cours online étudiant
8-SAISIE DES
ABSENCES
L’administrateur saisit l’absence des
étudiants
administrateur
12

9-SAISIE DES
NOTES FINALES
L’administrateur saisit la note finale après la
sanction des heures d’absences
administrateur
10-GESTION DES
CLASSES
L’administrateur s’occupe de la mise à jour
des classes
administrateur
11-ENVOI DE MAIL L’administrateur envoi les notifications aux
utilisateurs
administrateur
12-
ENREGISTREMENT
DES PAIEMENTS
L’administrateur enregistre les frais de
scolarité des étudiants
administrateur
TELECHARGEMENT
DES COURS
L’étudiant télécharge les cours étudiant
e. Diagramme de cas d’utilisation :
Figure 5 : Diagramme de cas d’utilisation
f. Description textuelle haut niveau :
a) Upload des cours par l’enseignant :
Rôle : l’enseignant upload les cours pour un cours spécifique.
13

Acteur principal : l’enseignant
Acteur secondaire : le système
Déclencheur : enseignant
Terminaison : système
Version :1.0
b) saisir les notes par l’enseignant :
Rôle : l’enseignant saisi les notes des matières pour chaque étudiant
Acteur principale : l’enseignant
Déclencheur : l’enseignant
Terminaison : le système
Version : 1.0
c) consulter le planning par l’étudiant:
Rôle: consulté les cours et les classe qu’en a durent la semaine
Acteur principale : l’étudiant
Déclencheur : l’étudiant
Version : 1.0
d) upload des plannings par l’administrateur:
Rôle : l’administrateur upload les plannings pour les enseignants et les étudiants
Acteur principale : l’administrateur
Déclencheur : l’administrateur
Version : 1.0
e) saisir les absences par l’enseignant :
Rôle : l’enseignant saisi les absences pour les étudiants
Acteur principale : enseignant
Déclencheur : enseignant
Version : 1.0
14

f) saisir les notes définitives par l’administrateur :
Rôle : sanctionner des notes par rapport aux absences des élèves pour donner une
note finale
Acteur principale : administrateur
Déclencheur : administrateur
Version : 1.0
g) consulter les cours par l’étudiant :
Rôle : les étudiants peuvent visualiser les cours
Version : 1.0
h) consulter les absences par l’étudiant:
Rôle : l’étudiant peut consulter ses heures d’absences
Version : 1.0
i) saisir l’absence par l’administrateur:
Rôle : l’administrateur sanctionne des notes aux étudiants qui s’absentes
Acteur principale : l’administrateur
Déclencheur : l’administrateur
Version : 1.0
j) gérer les classes des élèves par l’administrateur :
Rôle : l’administrateur gère les classes de l’école
Acteur secondaire : système
Version : 1.0
15

k) service paiement :
Rôle : l’administrateur enregistre les paiements des étudiants
Acteur secondaire : système
Version : 1.0
l) téléchargement des cours par l’étudiant :
Rôle : les étudiants peuvent télécharges les cours
Version : 1.0
g. Diagramme de séquence boite noire:
16

a- préinscription :
Figure 6 : Diagramme de séquence boite noire (Préinscription)
b- après inscription :
17

Figure 7 : Diagramme de séquence boite noire (après inscription)
c- note par enseignant :
Figure 8 : Diagramme de séquence boite noire (note par enseignant)
d- note par administrateur :
18

Figure 9 : Diagramme de séquence boite noire (note par administrateur)
e- enregistrement des paiements :
Figure 10 : Diagramme de séquence boite noire (enregistrement des paiements)
f- diagramme de classe d’analyse :
19

Figure 11 : Diagramme de classe d’analyse
2) diagramme de boite blanche :
1.1 diagramme de boite blanche absence :
20

Figure 12 : Diagramme de séquence boite blanche (abscence)
1.2 Diagramme de boite blanche ajouter note :
Figure 13 : Diagramme de séquence boite blanche (ajout des notes)
1.3Diagramme boite blanche paiement :
21

Figure 14 : Diagramme de séquence boite blanche (paiements)
1.4 Diagramme boite blanche upload des cours :
Figure 15 : Diagramme de séquence boite blanche (upload des cours)
1.5 Diagramme boite blanche upload du planning :
22

Figure 16 : Diagramme de séquence boite blanche (upload des plannings)
2.3 INTERFACES
1.1 partie web administrateur:
La partie web administrateur permet à celui-ci :
D’une coté de mettre à jour les informations concernant les enseignants et les
étudiants en modifiant leurs profils et en leurs attribuant différentes habilitations.
D’une autre coté, l’administrateur effectue plusieurs opérations tels que :
Control, enregistrement et modification de la base de données en tous ce qui concerne
les notes, les filières, les niveaux d’études, les absences et les payements.
1.1.1) interface absence :
L’interface absence permet à l’administrateur de visualiser les absences des
étudiants.
23

1.1.2) interface filière:
l’interface filière permet de gérer les filières de l’école
1.1.3) l’interface nouvelle absence:
l’interface nouveau absence permet à l’administrateur d’ajouter le nouveau
nombre d’heures d’absence accumulés par l’étudiant et les informations qui
24

concernent cette absence
1.1.4) interface ajouter un étudiant:
l’administrateur ajoute un nouveau étudiant si l’étudiant vient pour s’inscrire sur
place
1.1.5) interface ajouter une note:
25

l’interface ajouter note permet à l’administrateur de sélectionné l’étudiant pour lui
ajouter une note dans une matière dans la quelle il étudie
1.1.6) interface connexion:
l’interface connexion qui permet à l’administrateur de s’identifier
26

1.1.7) interface enseignant:
l’interface enseignant permet à l’administrateur de gérer les enseignants et de les
enregistrer dans l’établissement scolaire
27

1.1.8) interface étudiant:
l’interface étudiant permet à l’administrateur de gérer leurs informations
1.1.9) interface matière:
l’interface matière permet à l’administrateur d’ajouter ou supprimer une matière
1.1.10) interface édition absence:
28

L’interface d’édition d’absence permet à l’administrateur de modifier le nombre
d’heures d’absences accumulé dans une matière
1.1.11) interface édition étudiant:
l’interface édition étudiant permet à l’administrateur de modifier les informations
29

qui concernent un étudiant
1.1.12) interface niveau d’étude :
L’interface niveau permet à l’administrateur d’ajouter, de modifier ou de
supprimer un niveau d’étude
30

1.1.13) interface note :
L’interface note permet à l’administrateur de visualiser les notes attribués aux
élèves et de les modifier
1.1.14) interface niveau-étudiant :
L’interface niveau-étudiant permet de voir les étudiants inscrits dans un niveau
31

1.1.15) interface paiement :
L’interface payement permet à l’administrateur de gérer les frais de scolarité
pour chaque élève
1.1.16) interface matière-enseignant :
L’interface matière-enseignant permet à l’administrateur de voir la matière
attribuer à l’enseignant
32

1.1.17) interface état de paiement par élève et ses notes d’examen :
Cette interface permet à l’administrateur de voir les notes d’un élève, son état de
payement des frais de scolarité et ses notes.
1.1.18) interface filière-étudiant :
L’interface filière étudiant permet de voir les étudiants d’une filière
33

1.2 Interface web enseignant-étudiant :
1.2.1 interface accueil :
L’interface accueil permet aux utilisateurs de se connecter ou de s’inscrire
1.2.2 interface menu :
L’accès de l’étudiant au menu lui permet de voir les cours et les notes, modifier
ses informations.
34

1.2.3 interface upload cours:
L’interface upload cours permet à l’enseignant d’exporter les cours vers le
serveur de l’école
1.2.4 interface menu enseignant :
L’interface menu enseignant lui permet d’ajouter des cours, de modifier ses
informations personnelles, de visualiser les cours déjà existant, d’ajouter les notes
des étudiants, d’ajouter les absences des étudiants ou de se déconnecter
35

1.2.5 interface visualisation des cours :
Permet aux étudiants et aux enseignants de visualiser les cours
1.3 interface mobile :
La partie mobile est accessible aux étudiants tout comme enseignants, chacun
d’eux pourra effectuer des tâches précises.
1.3.1 interface choix de compte :
L’interface choix de connexion permet à l’utilisateur de choisir son type de
compte avant d’effectuer une connexion.
36

1.3.2 interface authentification :
L’interface d’authentification se compose de deux champs de saisie «username »
pour le nom d’utilisateur et « password » pour le mot de passe, deux boutons : « se
connecter » pour s’authentifier et « quitter » pour quitter l’application.
1.3.3 interface menu étudiant :
Le menu se compose de plusieurs boutons :
« Toutes les absences »
« Toutes les notes »
« Envoie email »
« Nous contacter »
« Se déconnecter »
Chaque bouton vous enverra vers une forme précise afin d’effectuer la tâche appropriée.
Le menu est comme suite :
37

1.3.4 interface ajouter absence :
L’interface ajouter absence permet à l’enseignant d’ajouter l’heure de l’absence d’un
étudiant tout en précisant la filière et la matière.
1.3.5 interface ajouter note :
Par contre si l’authentification s’est faite en tant qu’enseignant vous aurez la possibilité de saisir des
notes des étudiants qui seront enregistré dans la base de données
38

1.3.6 interface mail :
L’interface mail permet à l’élève d’envoyer un mail à l’école s’il a une demande à
faire ou déclarer une urgence
1.3.7 interface mail-administrateur :
39

L’interface mail-administrateur permet à l’élève de déclarer un problème dans le site
de l’école ou dans l’application mobile
1.3.8 interface absence :
L’activation du bouton « tous les absences » du menu vous envoi vers la forme responsable de
l’affichage des absences, celle-ci affiche une liste dont le nom, la filière, le module et l’heure
d’absence y figure ainsi que le bouton « go back » pour revenir au menu.
1.3.9 interface note :
40

L’activation du bouton « toutes les notes » du menu vous envoi vers la forme responsable de
l’affichage des notes des étudiants, celle-ci affiche une liste dont le nom, la filière, le module et les
notes y figure ainsi que le bouton « go back » pour revenir au menu.
Le contenu de la base de données :
Figure 17 : Contenu de la base de données
41

PARTIE 3 : SPÉCIFICATIONS TECHNIQUES
3.1 TECHNOLOGIE DÉPLOYÉE
3.1.1 LANGAGES DE DÉVELOPPEMENT :
• Java : C'est un langage de programmation orienté objet, développé par Sun
Microsystems. Il permet de créer des logiciels compatibles avec de nombreux
systèmes d’exploitation (Windows, Linux, Macintosh, Solaris). Java donne
aussi la possibilité de développer des programmes pour Android et assistants
personnels. Enfin, ce langage peut être utilisé sur internet pour des petites
applications intégrées à la page web (applet) ou encore comme
langage serveur (jsp).
Figure 4.7 : logo Java
• JSON: est l'acronyme pour JavaScript Object Notion.
C'est un format de données textuel, générique, dérivé de la notation des objets du
langage JavaScipt. Il permet de représenter de l'information structurée.
Sa popularité a suivie celle de l'AJAX, quand le transport et l'organisation des
données est devenu problématique. Il s'est alors présenté comme une alternative
de taille au format XML.
JSON est construit sur deux types d'éléments structurels
1. une liste de paires
2. une liste ordonnée de valeurs
42

Ces mêmes éléments représentent 3 types de données : des objets, des tableaux et
des valeurs génériques (booléens, entiers, ...)
Format des données sous JSON
HTML5 : (HyperText Markup Language 5) est la dernière révision majeure
d'HTML (format de données conçu pour représenter les pages web). Cette version est
en développement en 2013. HTML5 spécifie deux syntaxes d'un modèle abstrait
défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également
une couche application avec de nombreuses API, ainsi qu'un algorithme afin de
pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par
le W3C en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations
travaillent en parallèle sur le même document afin de maintenir une version unique de
la technologie. Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et
43

une finalisation de la spécification en 20141
, et encourage les développeurs Web à
utiliser HTML 5 dès maintenant.
Dans le langage courant, HTML5 désigne souvent un ensemble de technologies Web
(HTML5, CSS3 et JavaScript) permettant notamment le développement
d'applications (cf. DHTML).
• PHP : est un langage utilisé pour le web. 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 ...
Figure 18 : Fonctionnement PHP
44

le mode de fonctionnement du PHP en client serveur
• MVC : Model-View-Controller
"MVC" : "Model-View-Controller" (Modèle / Vue / Contrôleur en
français donc). C'est un design pattern (patron de conception), c'est à dire un
concept d'architecture logicielle pour son application. Il permet d'avoir un code
plus structure, plus évolutif, plus maintenable, permettant de profiter de plusieurs
mécanismes, d'avoir de la persistance de données, et bien d'autres choses encore.
Le "Model" est la représentation interne des données. Il permet comme son
nom l'indique de modéliser les données que l'on va manipuler dans l'application.
Représente les véritables données avec toutes les informations qu'elles
véhiculent.
La "Vue" quant à elle est la représentation visuelle de ces données à l'écran.
Le contrôleur enfin, sert à faire l'interface entre le modèle et la vue. En effet,
puisque le modèle et la vue sont censés être au maximum indépendants, le
contrôleur
sert à faire le lien pour faire communiquer l'un (M) avec l'autre (V).
Ci-dessous, le mode de fonctionnement du MVC :
le mode de fonctionnement du MVC
3.1.2 FRAMEWORK DE DÉVELOPPEMENT :
• Cakephp2 : est un Framework de développement rapide pour PHP qui
fournit une
Architecture extensible pour développer, maintenir et déployer des applications.
Utilisant des motifs de conception bien connus tels MVC et ORM ainsi que le
45

paradigme "convention plutôt que configuration", CakePHP réduit les coûts de
développement et aide à écrire moins de code.
Cake facilite l'utilisation de Bases de données avec Active record. Il encourage
également fortement l'utilisation de l'architecture Modèle-Vue-Contrôleur.
• Compatible avec PHP4 et PHP5.
• Intégration de CRUD pour l'utilisation simplifiée des bases de données SQL.
Utilisation du patron de conception Active record.
• Dispatcheur d'URL permettant d'obtenir des adresses aisément lisibles.
• Rapide et flexible avec un moteur de templates utilisant la syntaxe PHP et
apportant des classes utilitaires (des "helpers") facilitant le formatage (utilisation
de AJAX,JavaScript, HTML, des formulaires et bien d'autres).
• Fonctionne dans n'importe quel sous-répertoire pour peu qu'il y soit accessible
via un serveur HTTP tel que Apache.
• Validation des données.
• Composants de sécurité, de gestion des droits et de gestion des sessions.
• Cache des vues et des actions flexible.
• Scripts en ligne de commande permettant la génération automatique de code à
partir du modèle physique de données.
46

Figure 19 : Fonctionnement du CakePHP
3.1.3 OUTIL DE DÉVELOPPEMENT :
Pacestar: Pacestar UML Diagrammes, permet de créer des diagrammes en UML.
Il dispose d'un module WYSIWYG, supporte l'OMG UML 2.0, des fonctions classiques de diagramme...
Il supporte en import et export les fichiers JPG, GIF, PNG, BMP, GIF, DIB, WMF et EMF.
On peut insérer des liens hypertexte vers d'autres diagrammes et fichiers externes.
Il peut fonctionner à l'aide d'un système de glisser-déposer.
Après avoir présenté les moyens matériels mis à notre disposition dans le cadre de
réalisation de ce projet, nous abordons dans cette partie les moyens logiciels utilises.
Les logiciels utilisés pour la réalisation de ce projet ainsi que pour la rédaction du
rapport sont :
47

• Jetbrains PhpStorm : est un IDE PHP léger et intelligent axé sur la productivité
des développeurs, fournit la complétion intelligente de code, une navigation
rapide et la vérification des erreurs à la volée. Il est toujours prêt à aider et
créer des codes, exécutez des tests et fournir un débogage visuel.
• HeidiSql : est un outil d'administration de base de données possédant un
éditeur SQL et un constructeur de requête. Il a été développé et optimisé pour
être utilisé avec le SGBD relationnel MySQL. En effet, grâce à son interface
simple d'utilisation de type Windows, l'application vous permet
d'administrer et de naviguer au sein de vos bases de données, mais
également de générer des exports SQL, de synchroniser les éléments entre
2 bases, d'importer des fichiers Texte, etc.
. Eclipse est un projet, décliné et organisé en un ensemble de sous-projets de
développements logiciels, de la Fondation Eclipse visant à développer un
environnement de production de logiciels libre qui soit extensible, universel et
polyvalent, en s'appuyant principalement sur Java.
Son objectif est de produire et fournir des outils pour la réalisation de logiciels,
englobant les activités de programmation (notamment environnement de
développement intégré et frameworks) mais aussi
d'AGL recouvrant modélisation, conception, testing, gestion de
configuration, reporting... Son EDI, partie intégrante du projet, vise notamment à
supporter tout langage de programmation à l'instar de Microsoft Visual Studio.
Bien qu'Eclipse ait d'abord été conçu uniquement pour produire des environnements
de développement, les utilisateurs et contributeurs se sont rapidement mis à réutiliser
48

ses briques logicielles pour des applications clientes classiques. Cela a conduit à une
extension du périmètre initial d'Eclipse à toute production de logiciel : c'est
l'apparition du framework Eclipse RCP en 2004.
Figurant parmi les grandes réussites de l'Open source, Eclipse est devenu un standard
du marché des logiciels de développement, intégré par de grands éditeurs
logiciels et sociétés de services. Les logiciels commerciaux Lotus Notes 8, IBM
Lotus Symphony ou WebSphere Studio Application Developer sont notamment basés
sur Eclipse.
.Sublime Text est un éditeur de texte générique codé en C++ et Python, disponible
sur Windows, Mac et Linux. Le logiciel a été conçu tout d'abord comme une
extension pour Vim, riche en fonctionnalités1
.
Depuis la version 2.0, sortie le 26 juin 20122
, l'éditeur prend en charge 44 langages de
programmation majeurs, tandis que des plugins sont souvent disponibles pour les
langages plus rares.
3.1.4 OUTIL DE BASE DE DONNÉE ET SERVEUR :
• WampServer : WampServer 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 les bases de données.
Pour faciliter la création et le déploiement de sites, WampServer intègre
également des outils, tels que XDebug, XDC, SQLBuddy ou encore
49

webGrind. Le logiciel se loge discrètement dans la zone de notification de
Windows et informe l'utilisateur de la mise hors ligne ou en ligne du site
phpMyAdmin (PMA) est une application Web de gestion pour les systèmes de
gestion de base de données MySQL réalisée en PHP et distribuée sous licence GNU
GPL.
Il s'agit de l'une des plus célèbres interfaces pour gérer une base de
données MySQL sur un serveur PHP. De nombreux hébergeurs, qu'ils soient gratuits
ou payants, le proposent ce qui permet à l'utilisateur de ne pas avoir à l'installer.
Cette interface pratique permet d'exécuter, très facilement et sans grandes
connaissances dans le domaine des bases de données, de nombreuses requêtes comme
les créations de table de données, les insertions, les mises à jour, les suppressions, les
modifications de structure de la base de données. Ce système est très pratique pour
sauvegarder une base de données sous forme de fichier .sql et ainsi transférer
facilement ses données. De plus celui-ci accepte la formulation de requêtes SQL
directement en langage SQL, cela permet de tester ses requêtes par exemple lors de la
création d'un site et ainsi de gagner un temps précieux.
• MySQL : est une base de données relationnelle libre 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
50

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 STRUCTURED 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.
PARTIE 4 : MODALITÉ DE DÉROULEMENT DU PROJET
4.1 PLANIFICATION
4.1.1 PLANIFICATION DES TACHES :
Première partie :
Expression des besoins (25/01/2014)
Spécification fonctionnelle :
Rédaction du cahier des charges (10/02/2014)
Spécification technique :
Choix des technologies qui seront utilisé pour créer le projet (15/03/2014)
Deuxième partie :
Création du document de conception (04/05/2014)
Partie trois :
Début de la création du projet
51

1) Création de la partie administration du projet (administrateur) (26/05/2014)
2) Création de la partie mobile (étudiant-enseignant) (29/05/2014)
3) Création de la partie web (étudiant-enseignant) (15/06/2014)
Partie quatre :
Rédaction du rapport de projet (24/05/2014)-(30/05/2014)
4.1.2 RÉPARTITION DES TACHES :
Riahi Anas:
- leadership et orientation de l’équipe lors de la réalisation du projet.
- Répartition des tâches et des responsabilités.
- Création de l’ajout des notes et absences des étudiants et upload des cours sur
android.
- Création de la plateforme back office d’administration.
Hamane el Mehdi :
- Création du site web pour l’inscription des étudiants et des enseignants online,
upload des cours, ajout des notes et des absences des étudiants.
Asri Mohammed :
- L’envoi des emails et messages à l’administrateur.
- Création de la connexion des étudiants et des enseignants sur mobile.
52

CONCLUSION
Nous espérons que ce rapport fournit une idée claire sur le fonctionnement de notre application.
La section spécification technique détaille le fonctionnement de l’application, et a pour but de
faciliter la reprise de ce projet pour de nouvelles évolutions.
Une des points importants que nous avons constaté durant nos travaux, est l’importance de
l’environnement de test, en passant par le téléphone mobile, la connexion internet jusqu’au serveur.
Il est primordial que toutes ces briques soient opérationnelles, car il est souvent impossible de
déterminer la cause de plusieurs difficultés et problèmes de connexion et de communication que
nous avons constatée.
Nous tenons finalement à remercier tous nos encadrants pour leur soutien et leur aide précieuse, que
sans, sera projet n’aurait certainement pas pu aboutir à sa fin.
53

BIBLIOGRAPHIE
http://book.cakephp.org/2.0/fr/index.html
http://www.php.net/docs.php
http://www.androidhive.info/2012/05/how-to-connect-android-with-php-mysql/
http://stackoverflow.com/
http://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal
http://fr.openclassrooms.com/
CakePHP Application Development
Practical CakePHP Projects
Android Recipes, 2nd Edition
Android Native Development Kit Cookbook
learn_html5_and_javascript_for_android
54

Rapport PFE : Réalisation d'une application web back-office de gestion pédagogique avec consultation mobile sous ANDROID

Contenu connexe

Tendances

Similaire à Rapport PFE : Réalisation d'une application web back-office de gestion pédagogique avec consultation mobile sous ANDROID

Rapport PFE : Réalisation d'une application web back-office de gestion pédagogique avec consultation mobile sous ANDROID