RAPPORT DE PROJET DE FIN D’ETUDES
POUR L’OBTENTION D’UN MASTER PROFESSIONNEL
MICDA
Date de la soutenance : 31/05/2014
Réal...
On remercie Dieu, le tout-puissant, notre créateur pour l'intelligence, le courage, la santé et la force
qu'il nous a donn...
Remerciements................................................................................................................
Figure 18 : Fonctionnement PHP...............................................................................................
demandes d’informatisation des systèmes d’instruction, donc avons décider afin
d'Approfondir nos connaissances vers la cré...
PRÉSENTATION DU THÈME DE RECHERCHE
L’établissement anonyme gère son personnel (administrateur et enseignant) ainsi que
ses...
PARTIE 1 : POSITIONNEMENT ET OBJECTIFS DU PROJET
1.1 OBJECTIFS
Le projet gestion pédagogique se divise en trois parties :
...
Ceci a requis l’utilisation de différents langages:
php-html5/css3-javascript-android.
le développement de cette applicati...
Figure 1 : Schéma global de l’application.
PARTIE 2 : SPÉCIFICATIONS FONCTIONNELLES
2.1 LES BESOINS FONCTIONNELLES :
Pour ...
e- Mode absence :
L’enseignant doit saisir l’absence des élèves en classe.
L’administrateur peut consulter les absences de...
Figure 2 : Diagramme d’acteurs
b. Diagramme descriptive des acteurs :
Dans le diagramme descriptif des acteurs vous trouve...
Figure 4 : Contexte statique
d. tableau d’exigences :
Tableau 1 : Tableau d’exigences
N° et nom d’intention Descriptions a...
9-SAISIE DES
NOTES FINALES
L’administrateur saisit la note finale après la
sanction des heures d’absences
administrateur
1...
Acteur principal : l’enseignant
Acteur secondaire : le système
Déclencheur : enseignant
Terminaison : système
Version :1.0...
f) saisir les notes définitives par l’administrateur :
Rôle : sanctionner des notes par rapport aux absences des élèves po...
k) service paiement :
Rôle : l’administrateur enregistre les paiements des étudiants
Acteur principale : administrateur
Ac...
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...
Figure 9 : Diagramme de séquence boite noire (note par administrateur)
e- enregistrement des paiements :
Figure 10 : Diagr...
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 : Diagr...
Figure 14 : Diagramme de séquence boite blanche (paiements)
1.4 Diagramme boite blanche upload des cours :
Figure 15 : Dia...
Figure 16 : Diagramme de séquence boite blanche (upload des plannings)
2.3 INTERFACES
1.1 partie web administrateur:
La pa...
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:...
concernent cette absence
1.1.4) interface ajouter un étudiant:
l’administrateur ajoute un nouveau étudiant si l’étudiant v...
l’interface ajouter note permet à l’administrateur de sélectionné l’étudiant pour lui
ajouter une note dans une matière da...
1.1.7) interface enseignant:
l’interface enseignant permet à l’administrateur de gérer les enseignants et de les
enregistr...
1.1.8) interface étudiant:
l’interface étudiant permet à l’administrateur de gérer leurs informations
1.1.9) interface mat...
L’interface d’édition d’absence permet à l’administrateur de modifier le nombre
d’heures d’absences accumulé dans une mati...
qui concernent un étudiant
1.1.12) interface niveau d’étude :
L’interface niveau permet à l’administrateur d’ajouter, de m...
1.1.13) interface note :
L’interface note permet à l’administrateur de visualiser les notes attribués aux
élèves et de les...
1.1.15) interface paiement :
L’interface payement permet à l’administrateur de gérer les frais de scolarité
pour chaque él...
1.1.17) interface état de paiement par élève et ses notes d’examen :
Cette interface permet à l’administrateur de voir les...
1.2 Interface web enseignant-étudiant :
1.2.1 interface accueil :
L’interface accueil permet aux utilisateurs de se connec...
1.2.3 interface upload cours:
L’interface upload cours permet à l’enseignant d’exporter les cours vers le
serveur de l’éco...
1.2.5 interface visualisation des cours :
Permet aux étudiants et aux enseignants de visualiser les cours
1.3 interface mo...
1.3.2 interface authentification :
L’interface d’authentification se compose de deux champs de saisie «username »
pour le ...
1.3.4 interface ajouter absence :
L’interface ajouter absence permet à l’enseignant d’ajouter l’heure de l’absence d’un
ét...
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éclare...
L’interface mail-administrateur permet à l’élève de déclarer un problème dans le site
de l’école ou dans l’application mob...
L’activation du bouton « toutes les notes » du menu vous envoi vers la forme responsable de
l’affichage des notes des étud...
PARTIE 3 : SPÉCIFICATIONS TECHNIQUES
3.1 TECHNOLOGIE DÉPLOYÉE
3.1.1 LANGAGES DE DÉVELOPPEMENT :
• Java : C'est un langage ...
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...
une finalisation de la spécification en 20141
, et encourage les développeurs Web à
utiliser HTML 5 dès maintenant.
Dans l...
le mode de fonctionnement du PHP en client serveur
• MVC : Model-View-Controller
"MVC" : "Model-View-Controller" (Modèle /...
paradigme "convention plutôt que configuration", CakePHP réduit les coûts de
développement et aide à écrire moins de code....
Figure 19 : Fonctionnement du CakePHP
3.1.3 OUTIL DE DÉVELOPPEMENT :
Pacestar: Pacestar UML Diagrammes, permet de créer de...
• Jetbrains PhpStorm : est un IDE PHP léger et intelligent axé sur la productivité
des développeurs, fournit la complétion...
ses briques logicielles pour des applications clientes classiques. Cela a conduit à une
extension du périmètre initial d'E...
webGrind. Le logiciel se loge discrètement dans la zone de notification de
Windows et informe l'utilisateur de la mise hor...
par sujets (table des clients, table des fournisseurs, table des produits, par
exemple). Les tables sont reliées entre ell...
1) Création de la partie administration du projet (administrateur) (26/05/2014)
2) Création de la partie mobile (étudiant-...
CONCLUSION
Nous espérons que ce rapport fournit une idée claire sur le fonctionnement de notre application.
La section spé...
BIBLIOGRAPHIE
http://book.cakephp.org/2.0/fr/index.html
http://www.php.net/docs.php
http://www.androidhive.info/2012/05/ho...
55
Prochain SlideShare
Chargement dans…5
×

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

2 747 vues

Publié le

Projet fin d’étude, en génie logiciel

Publié dans : Logiciels
1 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 747
Sur SlideShare
0
Issues des intégrations
0
Intégrations
16
Actions
Partages
0
Téléchargements
0
Commentaires
1
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. 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»
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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 Acteur secondaire : le système 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 Acteur secondaire : le système Déclencheur : l’étudiant Terminaison : le système 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 Acteur secondaire : le système Déclencheur : l’administrateur Terminaison : le système Version : 1.0 e) saisir les absences par l’enseignant : Rôle : l’enseignant saisi les absences pour les étudiants Acteur principale : enseignant Acteur secondaire : le système Déclencheur : enseignant Terminaison : le système Version : 1.0 14
  15. 15. 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 Acteur secondaire : le système Déclencheur : administrateur Terminaison : le système Version : 1.0 g) consulter les cours par l’étudiant : Rôle : les étudiants peuvent visualiser les cours Acteur principale : l’étudiant Acteur secondaire : le système Déclencheur : l’étudiant Terminaison : le système Version : 1.0 h) consulter les absences par l’étudiant: Rôle : l’étudiant peut consulter ses heures d’absences Acteur principale : l’étudiant Acteur secondaire : le système Déclencheur : l’étudiant Terminaison : le système 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 Acteur secondaire : le système Déclencheur : l’administrateur Terminaison : le système 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 principale : administrateur Acteur secondaire : système Déclencheur : administrateur Terminaison : système Version : 1.0 15
  16. 16. k) service paiement : Rôle : l’administrateur enregistre les paiements des étudiants Acteur principale : administrateur Acteur secondaire : système Déclencheur : administrateur Terminaison : système Version : 1.0 l) téléchargement des cours par l’étudiant : Rôle : les étudiants peuvent télécharges les cours Acteur principale : l’étudiant Acteur secondaire : le système Déclencheur : l’étudiant Terminaison : le système Version : 1.0 g. Diagramme de séquence boite noire: 16
  17. 17. a- préinscription : Figure 6 : Diagramme de séquence boite noire (Préinscription) b- après inscription : 17
  18. 18. 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
  19. 19. 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
  20. 20. Figure 11 : Diagramme de classe d’analyse 2) diagramme de boite blanche : 1.1 diagramme de boite blanche absence : 20
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. • 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
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. 55

×