Système de Gestion D'une École & Suivi Parental CHEMAMOU

UNIVERSITÉ MOULAY ISMAIL
FACULTÉ DES SCIENCES ET TECHNIQUE

D’ERRACHIDIA
Département d’informatique - LST Génie logiciel
PROJET DE FIN D’ETUDE (PFE) :

SYSTEME DE GESTION D’UNE ECOLE & SUIVI
PARENTAL « CHEMAMOU »
Réalisation Encadrant
SANTARA CHEICKNA HAMALA Pr IMAD ZEROUAL
BOUBACAR HAMMA MOUSTAPHA
TRAORE MAHAMADOU
Membres du jury
Pr AGOUJIL SAID (Président)
Pr AZROUR MOURADE (Membre)
ANNEE UNIVERSITAIRE : 2020-2021

DEDICACE
Une pensée forte,
À nos familles respectives, nos parents,

ceux-là qui ont cru en nous et nous ont poussé à
devenir meilleur, à ne jamais baisser les bras
quelque soit la difficulté en face.
À tous ceux qui ont de près ou de loin contribué

dans l’accomplissement des hommes que nous
sommes aujourd’hui.
À ces professeurs, amis et connaissances de

tous les jours qui de part leur simple présence
nous apprennent la persévérance.
C’est là une façon pour nous de vous montrer le

fruit de vos bénédictions, toute notre gratitude,
notre amour et notre plus haute considération !
REMERCIEMENTS
Tout d’abord nous remercions Allah le tout puissant, le très miséricordieux, le tout
miséricordieux, qui nous a gratifié d’un bon état de santé et nous a permis de réaliser cette tâche
ardue dans des conditions les meilleures.
Nous remercions nos pères, mères, frères et sœurs qui nous ont toujours soutenus dans nos
choix et les moments les plus difficiles.
Nous remercions également notre professeur encadrant Pr IMAD ZEROUAL qui n’a ménagé
aucun effort pour nous accompagner tout au long de la réalisation de notre projet en nous
prodiguant des sages conseils et nous aidant à surmonter nos erreurs.
De plus nos remerciements vont à l’endroit de tout le personnel administratif et le corps
enseignants de l’Université Moulay Ismaël en général et de la Faculté des Sciences et
Techniques d’Errachidia en particulier pour leur combat de tous les jours : " Transmettre leur
savoir à ces jeunes gens en dépit de leurs provenances ou origines".
Nous ne terminerons pas sans remercier les imminents membres du jury qui ont bien voulu
évaluer ce modeste travail.
Enfin nous remercions tous ceux qui nous ont honoré de leur présence, sachez que cela nous
touche profondément.
SOMMAIRE
Dédicace..................................................................................................................................... 1
Remerciements ......................................................................................................................... 2
Liste des tableaux ..................................................................................................................... 6
Liste des figures ........................................................................................................................ 7
Liste des abréviations ............................................................................................................... 8
Introduction Générale.............................................................................................................. 9
Chapitre I : Cadre général du projet ................................................................................... 10
Introduction ................................................................................................................... 10
Etude préliminaire ......................................................................................................... 10
2.1. Les applications web .............................................................................................. 10
2.2. Les applications mobiles ........................................................................................ 11
Etude de l’existant ......................................................................................................... 12
Objectifs et spécifications de besoins............................................................................ 13
4.1. Points forts du système .......................................................................................... 13
a. Points forts de l’application Web ........................................................................... 13
b. Points forts de l’application mobile ....................................................................... 14
4.2. Points faibles du système ....................................................................................... 14
a. Points faibles de l’application web ........................................................................ 14
b. Points faibles de l’application mobile .................................................................... 15
Présentation du projet .................................................................................................... 15
5.1. Plan de travail ........................................................................................................ 16
5.2. Diagramme de GANTT ......................................................................................... 16
Conclusion ..................................................................................................................... 17
Chapitre II : Conception de projet ....................................................................................... 19
Introduction ................................................................................................................... 19
Analyse et conception ................................................................................................... 19
2.1. Cycle de vie............................................................................................................ 19
Modélisation avec le langage UML .............................................................................. 20
3.1. Langage UML ........................................................................................................ 20
3.2. Identification des acteurs ....................................................................................... 21
3.3. Diagramme de cas d’utilisation ............................................................................. 22
3.4. Diagramme de séquence ........................................................................................ 25
3.5. Diagramme de classe ............................................................................................. 36
Modélisation avec la méthode Merise ........................................................................... 42
4.1. Définition ............................................................................................................... 43
4.2. Dictionnaire de base de données ............................................................................ 43
4.3. Modèle Conceptuel de données (MCD)................................................................. 44
4.4. Modèle Logique de données (MLD)...................................................................... 46
Conclusion ..................................................................................................................... 48
Chapitre III : Réalisation du projet...................................................................................... 49
Introduction ................................................................................................................... 49
Langages et outils de développement ............................................................................ 49
2.1. Langages et scripts ................................................................................................. 49
a. HTML .................................................................................................................... 49
b. CSS3 ...................................................................................................................... 49
c. JavaScript ............................................................................................................... 49
d. PHP ........................................................................................................................ 49
e. MySQL .................................................................................................................. 50
f. FPDF ...................................................................................................................... 50
g. Java ........................................................................................................................ 50
h. XML ....................................................................................................................... 50
2.2. Outils de développement ........................................................................................ 50
a. Sublime Text .......................................................................................................... 50
b. Android Studio ....................................................................................................... 51
c. XAMPP /WampServer........................................................................................... 51
d. StarUML ................................................................................................................ 51
e. Adobe Illustrator .................................................................................................... 51
f. Adobe Photoshop ................................................................................................... 51
g. PicPick ................................................................................................................... 52
h. Microsoft Word, PowerPoint, Project .................................................................... 52
2.3. Technologies .......................................................................................................... 52
a. Play service vision ................................................................................................. 52
b. PHPMailer.............................................................................................................. 52
Le schéma de navigation ............................................................................................... 53
Maquettes de l’application ............................................................................................ 57
Conclusion ..................................................................................................................... 62
Conclusion générale & perspectives ..................................................................................... 63
Bibliographie & Webographie .............................................................................................. 64
Bibliographie ................................................................................................................. 64
Webographie ................................................................................................................. 64
LISTE DES TABLEAUX
Tableau 1 - Enchainement des tâches du projet ....................................................................... 16
Tableau 2 - dictionnaire de base de données ............................................................................ 44
LISTE DES FIGURES
Figure 1 - Diagramme de GANTT ........................................................................................... 17
Figure 2 - Cycle de vie en spirale (source img: https://fr.wikipedia.org/wiki) ........................ 20
Figure 3 - Les diagrammes d'UML 2.5 .................................................................................... 21
Figure 4 - héritage entre les différents acteurs ......................................................................... 22
Figure 5 - diagramme de cas d'utilisation................................................................................. 23
Figure 6 - détails sur les cas d'utilisation de personne inscrite................................................. 24
Figure 7 - détail sur les cas d'utilisation de professeur ............................................................. 24
Figure 8 - détail sur les cas d'utilisation de membre direction ................................................. 25
Figure 9 - Diagramme de séquence du cas d’utilisation “Ajouter_cours et évaluations” ........ 26
Figure 10 - Diagramme de séquence du cas d’utilisation “ajouter_notes” .............................. 27
Figure 11 - Diagramme de séquence du cas d’utilisation “modifier_notes” ............................ 28
Figure 12 - diagramme de séquence du cas d'utilisation "inscrire" .......................................... 29
Figure 13 - Diagramme de séquence du cas d'utilisation gérer profil ...................................... 30
Figure 14 - Diagramme de séquence du cas d’utilisation “Suivi_enfant” ............................... 31
Figure 15 - Diagramme de séquence du cas d’utilisation “Effectuer demande”...................... 32
Figure 16 - Diagramme de séquence du cas d'utilistation 'Envoyer Diffusion '....................... 33
Figure 17 - Diagramme de séquence du cas d'utilisation 'Envoyer Message ' ......................... 34
Figure 18 - Diagramme de séquence du cas d'utilication creer classe ..................................... 35
Figure 19 - Diagramme de séquence du cas d'utilication publier article ................................. 36
Figure 20 - Mise en évidence de la relation d’héritage entre les classes du système............... 38
Figure 21 - Mise en évidence des relations entre Matiere, Professeur, Directeur, Classe et
Eleve ......................................................................................................................................... 39
Figure 22 - Les relations entre classes intervenant dans demande et traitement de demande . 40
Figure 23 - Les relations entre les classes intervenant dans l’envoi du message ..................... 40
Figure 24 - Mise en évidence de la relation entre Cours, Professeur et Eleve ......................... 41
Figure 25 - Le diagramme regroupant les classes et les relations entre elles ........................... 42
Figure 26 - Modèle conceptuel de données .............................................................................. 45
Figure 27 - Schéma de navigation pour une personne non connectée ..................................... 53
Figure 28 - Schéma de navigation pour un élève connecté ...................................................... 53
Figure 29 - Schéma de navigation pour un parent connecté .................................................... 54
Figure 30 - Schéma de navigation pour un professeur connecté .............................................. 54
Figure 31 - Schéma de navigation pour le directeur connecté ................................................. 55
Figure 32 - Schéma de navigation de l’espace directeur .......................................................... 55
Figure 33 - Schéma de navigation du menu Opération ............................................................ 56
Figure 34 - Schéma de navigation pour les membres de la direction ...................................... 56
Figure 35- Schéma de navigation de l’espace membre direction ............................................. 57
Figure 36 - Schéma de navigation de l’espace membre direction ............................................ 57
LISTE DES ABREVIATIONS
Moodle: Modular Object-Oriented Dynamic Learning Environment
MS Project: Microsoft Project
UML: Unified Modified Language
CU: Cas d’utilisation
UseCaseD : Diagramme de cas d’utilisation
SequenceD : Diagramme de séquence
ClassD : Diagramme de classe
MCD : Modèle Conceptuel de données
MLD : Modèle Logique de données
HTML: HyperText MarkupLanguage
CSS: Cascading Style Sheets
PHP: Hypertext Preprocessor
MySQL : My fait référence au prénom de la fille du Co-créateur Michael Widenius et
SQL : Structured Query Language
SGBD : Système de Gestion de Base de Données
FPDF : le F du début signifie Free et PDF veut dire Portable Document Format
SMTP : Simple Mail Transfer Protocol
IDE : Integrated Development Environment (environnement de développement intégré)
Introduction générale
INTRODUCTION GENERALE
De nos jours, tout parent voudrait à ce que son enfant acquière une très bonne formation
scolaire. Les parents inscrivent leurs enfants dans des écoles. Mais ils n’ont pas assez de temps
pour s’y rendre tout le temps afin d’obtenir des informations sur les enfants et effectuer
correctement un suivi rigoureux de ceux-ci, et même s’ils le faisaient cela constituerai un
véritable problème pour l’administration de l’école car ils auront du mal à gérer tous ces rendez-
vous. Et lorsque les enfants sont inscrits, les parent ont souvent besoin de documents les
concernant. La demande et l’obtention de ces documents prend souvent du temps.
Du côté administration et des enseignants, les démarches administratives, la gestion des
archives, les remplissages des bulletins et leurs éditions constituent un réel casse-tête au sein
des écoles depuis toujours. Ces derniers ne demandent plus que d’accomplir leurs missions dans
un climat des plus agréables en leur épargnant ces travaux fastidieux précités.
Comment gérer tous ces problèmes et apporter une solution optimale qui pourra permettre de
réaliser toutes ces tâches ? Nous avons pris le temps de bien réfléchir sur la question et nous
avons essayé de trouver des solutions qui pourront remédier à tous ces problèmes.
Le numérique étant incontournable, c’est ainsi que nous avons pensé à concevoir un
système qui permet de gérer une école à l’instar des plateformes des facultés et universités.
Ce système permettrait de moderniser la façon de faire dans nos écoles, ainsi une gestion plus
optimale. Cette solution permettra de quitter les modèles archaïques prédéfinies. C’est dans ce
sens que « CHEMAMOU » se présente comme la voix de la félicité.
Ce projet devrait permettre de gérer les écoles qui est un grand problématique qui se pose
aujourd’hui. Vu l’avancée de la technologie et du numérique, qui ne font que faciliter les tâches
quotidiennes de jours en jours, il serait vraiment dommage de passer à côté d’une telle
opportunité
C’est dans ce cadre que s’inscrit notre projet de fin d’étude.
AU 2020-2021 – PFE : CHEMAMOU 9

Chapitre I : Cadre général du projet
CHAPITRE I : CADRE GENERAL DU PROJET

Introduction
Un peu de culture générale…
Aujourd'hui Internet est devenu un nouvel outil d'information et de communication qui évolue
dans tous les domaines du monde. C'est devenu un formidable moyen pour communiquer,
partager, et même pour travailler. Nous pouvons dire que le web est le moyen le plus utilisé
pour la diffusion des informations. En informatique, on peut retrouver les sites web et les
applications web. Une application Web (aussi appelée Web App) est aussi un site web, mais
encore plus dynamique. De la même manière que les sites Web, une application Web est
généralement placée sur un serveur et se manipule en actionnant des widgets à l’aide d’un
navigateur Web.
Revenons-en au sujet…
Pour réussir un projet de développement d’une application (application web & mobile dans
notre cas), il est primordial d’analyser et de bien spécifier les besoins du client. Alors d’entrer
en jeux nous nous devons de réussir cette phase qui permettrait d’aboutir à un bon logiciel. Un
logiciel doit répondre à tous les critères d’un bon logiciel.
Nous présenterons le projet en précisant les points forts, les limites de notre système et toutes
les bases nous permettant d’atteindre notre objectif qui est la réalisation d’une application web
comme prédéfini en introduction générale.
Etude préliminaire
Pour ce projet, et compte tenu du temps, nous avons réalisé un site web (dynamique) et
une application mobile pour Android.
Un site web est accessible depuis un navigateur et une application mobile est accessible
depuis un magasin d’applications.
2.1. Les sites web
Qu’est-ce qu’un site web ?

Un site Web est un ensemble de fichiers qui est stocké sur un serveur et manipulable
directement dans un navigateur via un réseau (internet, intranet …).
On distigne deux principaux types de site web :

• Les sites web statiques : C’est un ensemble de pages qui s’affichent de la même
manière pour chaque utilisateur.
• Les sites web dynamiques : Ces sont des pages web dynamiques, stockés sur
un serveur, lié à une base de données et, qui changent en fonction de
l’utilisateur ; c’est-à-dire des sites web interactifs.

Un site web (dynamique) peut être développée avec des langages serveurs tels que :
PHP, JavaScript (Node.js), Java(J2E), python (Django, Flask).
2.2. Les applications mobiles
Qu’est-ce qu’une application mobile ?

Une application mobile est une application destinée aux appareils mobiles.
Elle est généralement développée à l’aide des langages natif aux systèmes
correspondants.
Tout d’abord, il est important de distinguer les différents types d’applications mobiles
qu’il y a sur le marché. Il y a :
• Les Web Apps : Ce sont des sites internet développés pour s’adapter à plusieurs
types d’écrans (particulièrement on met l’accent sur les téléphones mobiles).
• Les applications Hybrides : Ce sont des applications mobiles qui utilisent le
contenu d’une web App grâce à un système de webview 1 et peuvent fonctionner
sur tous les types de système d’exploitation (Exemple : l’application mobile
Facebook lite sur PlayStore)
• Les applications Natives : Ce sont des applications conçues spécialement pour
un système d’exploitation spécifique. (Exemple l’application mobile Facebook
sur PlayStore)
Les applications Natives et Hybrides sont des applications que l’on retrouve dans les
stores des différents OS (Apple Store/ Google Play/ Microsoft Store). Néanmoins, leurs
développements diffèrent des Web Apps.
Il est aussi possible de développer des applications mobiles avec des langages communs
à plusieurs système mobile (avec JavaScript par exemple) : c’est le développement
hybride c’est-à-dire écrire une seule fois le code puis le compiler pour chaque système.
On distingue trois principaux types d’application mobile qui sont les applications
mobiles pour les systèmes d’exploitation :
• Android (langage natif : Java et kotlin)
• iOS (langage natif : Swift et Objective-C)
• Windows Phone (langage natif : C#)
Ici on ne s’intéresse qu’à l’application mobile pour Android.
Qu’est-ce que Android ?

Android est un système d'exploitation Open Source, C'est une startup rachetée par
Google en juillet 2005. Cet OS (Operating System) se différencie principalement de ses
concurrents par le fait qu'il est ouvert.
1
Webview : C’est un composant qui permet d’afficher le contenu d’un site web dans une application mobile

Pour la communication de l’application mobile avec la base de données distant on utilise

la librairie OKHTTP3 (elle permet de faire des requêtes POST et GET depuis le code
java).
La librairie Picasso a été aussi utilisée pour charger des images depuis un lien.
Nous avons utilisé la librairie Play-services-vision de google pour la détection faciale
(détecter si les yeux sont ouverts ou fermés pour ainsi mettre la vidéo en pause ou de
jouer la vidéo).
Dans Android il existe plusieurs manières d’afficher une liste d’éléments (liste des
contacts, des messages, d’emails ou liste d’article) on a les ListView, les GridView et
les RecyclerView. La différence majeure entre les deux premiers et le troisième se situe
au niveau de la gestion de la mémoire.
La listView et le GridView chargent tous les items de la liste en mémoire dès le début
ce qui peut être problème lorsqu’on a un nombre important d’éléments dans la liste à
afficher sur l’écran car la mémoire (RAM) risque d'être saturée et de rendre l’appareil
lent et instable.
C'est pour cette raison que nous avons utilisé le RecyclerView qui contrairement aux
autres, recycle les éléments graphiques comme son nom l'indique c’est-à-dire seuls les
items de la liste visible à l’écran sont logés dans la mémoire. Lorsqu’on fait défiler les
items, l’item qui sort de l’écran est réutilisé pour créer celui qui vient d’apparaitre.
Exemple : en défilant vers le haut, l’élément qui quitte l’écran vers le haut est utilisé
pour créer l’élément qui apparait en bas de l’écran. Ainsi cela permet de n’avoir dans la
mémoire que les éléments visibles.
Etude de l’existant
On peut dire que l’analyse de l’existant est un point qui comporte l’analyse de la situation ; elle
permet de faire ressortir la problématique à résoudre ou la situation à améliorer.
La gestion des écoles est une problématique d’actualité. En effet l’avancée technologique
impose aux écoles une certaine obligation pour pouvoir suivre l’avancée du numérique. Dans
ce cadre la plupart des écoles ont conçu des sites web qui leurs permettaient de faire des
publications et de présenter leurs écoles. Cependant cela ne répond pas vraiment à toutes les
exigences des acteurs intervenants au sein d’une école tels que l’édition des bulletins
semestriels, la saisie des notes par les professeurs, le suivi de l’avancée académique et des
comportements des élèves par les parents ou tuteurs de ces derniers, pour ne citer que ceux-là.
Pour pallier à ces problèmes nous proposons un système de gestion permettant de répondre à
toutes les exigences des intervenants ou du moins les principales attentes des acteurs au sein
d’une école.
On peut trouver des plateformes similaires comme evalbox.fr, Moodle.

Objectifs et spécifications de besoins

4.1. Points forts du système
a. Points forts de l’application Web
Le système que nous voudrons réaliser est à convoiter par toute école désirant une
gestion dynamique et optimale de ses ressources de par les fonctionnalités qu’il offre.
Nous avons vraiment misé sur la rapidité et la facilité de traitement des données.
Les quelques points forts du système, de façon résumée sont entre autres :
Interaction entre les différents acteurs au sein de l’établissement ;
Une gestion plus efficace et dynamique des écoles ;
Un traitement plus rapide, sûre et efficace des documents administratifs des

élèves ;
Permettre aux professeurs de saisir les notes dans le système & de suivre les
élèves à distance ;
Faciliter le calcul des notes et une élaboration plus rapide des bulletins
scolaires après les devoirs et compositions ;
Une diffusion plus rapide des informations à travers la page d’accueil du site
web ;
Un moyen rapide pour un visiteur de communiquer et d’obtenir des

informations sans se déplacer ;
Permettre aux élèves de revoir les cours dispensés par chacun de ses
professeurs ;
Informer le tuteur de chacun des faits et gestes de l’enfant ;
Permettre au parent de faire suivi régulier des enfants à travers un système

de messagerie et d’email entre l’administration, les professeurs et les
parents ou tuteurs ;
Assurer la confidentialité et la sécurité des données transmises via le système
Et oui, toutes ces fonctionnalités sont offertes par CHEMAMOU…

b. Points forts de l’application mobile

Pour l’application mobile, on retrouve les mêmes points forts que l’application web, à
la différence que l’application mobile possède un lecteur vidéo qui utilise un algorithme
de détection faciale.
Ce système de lecteur avec détection faciale permet :
• Au professeur de savoir si ses cours vidéo partagés ont été regardé par ses
élèves ;
• D’empêcher la lecture lorsque l’élève ne regarde plus la vidéo ;
• D’empêcher la lecture lorsque l’élève ferme les yeux ou s’endort devant l’écran.
4.2. Points faibles du système

CHEMAMOU est un système qui devrait être composé de l’application web,
l’application desktop pour Windows & MAC et les applications mobile ANDROID &
iOS. Aussi, le système a été construit en une seule langue qui est le français. Ce côté
pourrait pénaliser des utilisateurs qui ne comprennent pas langue et qui voudraient
naviguer sur les deux plateformes.
a. Points faibles de l’application web
Notre système de gestion bien que remplissant plusieurs fonctionnalités n’exclut pas
une certaine limite. En effet ce système regroupe beaucoup de fonctionnalités,
cependant pas toutes les exigences pouvant exister au sein d’une école. Par analogie à
d’autres systèmes de gestion comme Moodle, on remarque l’absence de certaines
fonctionnalités.
Moodle est une plateforme d'apprentissage en ligne (en anglais : Learning
Management System ou LMS) libre distribuée sous la Licence publique générale
GNU 2 écrite en PHP. Développée à partir de principes pédagogiques, elle permet de
créer des communautés s'instruisant autour de contenus et d'activités. Le mot
« Moodle » est l'abréviation de Modular Object-Oriented Dynamic Learning
Environment : « Environnement orienté objet d'apprentissage dynamique modulaire »
(https://fr.wikipedia.org/wiki/Moodle).
Moodle propose des fonctionnalités plus avancées plus poussés comme :

• Les tableaux de bord plus dynamiques et plus pointus ;
• Un espace pour le conseil des parents ;
• La possibilité pour un professeur de voir la progression de ses élèves à travers
les cours suivi par ce dernier.
2 La licence publique générale GNU, ou GNU General Public License (son seul nom officiel en anglais,
communément abrégé GNU GPL, voire simplement « GPL »), est une licence qui fixe les conditions légales de
distribution d'un logiciel libre du projet GNU.

b. Points faibles de l’application mobile

Bien que l’application mobile soit existante, elle ne dispose pas encore totalement de toutes
les fonctionnalités qui se trouvent dans l’application web.
Aussi l’algorithme de détection faciale n’est pas efficace à 100% car les clignotements de
yeux, la couleur de la peau ainsi que l’éclairage de l’environnement peuvent être des facteurs
qui peuvent encombrer le fonctionnement de cet algorithme.
Les fonctionnalités manquantes dans notre système ne remettent

nullement en question l’efficacité de celui-ci car toutes ces
fonctionnalités peuvent être ajoutées avec le temps et les moyens
nécessaires !
Présentation du projet
Notre projet de fin d’étude se porte sur la réalisation d’un système de gestion d’un lycée
« CHEMAMOU ». Le système comporte une application web et une application
mobile pour Android.
Le système est scindé en cinq (5) grands volets :
• Volet administratif : Ce volet regroupe les administrateurs du site (membres de
la direction et un administrateur). Ces derniers effectuent des opérations
(inscription, modification et suppression) sur les autres utilisateurs du site à
savoir les élèves, les parents ou tuteurs d’élèves, les professeurs et certains
membres même de la direction en fonction de leurs grades. De plus
l’administration établit les attestations d’inscriptions, les bulletins semestriels et
les cartes d’élèves.
• Volet professeur : Il regroupe le corps enseignant de l’école. Ceux-ci ajoutent,
modifient des notes ; ajoutent des cours et anciennes évaluations.
• Volet parent : Il regroupe les parents ou tuteurs des élèves qui peuvent suivre
l’avancée académique de leurs enfants inscrit dans cet établissement à travers la
réception direct de leurs résultats académiques par mail et aussi leur régularité
au cours et différentes sanctions.
• Volet élève : Ce sont les élèves inscrit dans cet établissement. Ils peuvent
consulter les cours et évaluations postés par les professeurs.
• Volet visiteur : les visiteurs non-inscrits à la base de données de l’école peuvent
voir, les annonces mis sur la page d’accueil et les informations générales de
l’école.
Tous ces utilisateurs mis à part les visiteurs non-inscrits dans la base de données de
l’école peuvent s’envoyer des emails, ainsi que des messages à travers un système de
messagerie propre au système CHEMAMOU.

5.1. Plan de travail

Ce projet a été réalité pendant plusieurs jours. Il a été découpé en des tâches de durée
de 8 heures par jour soit de 09h à 17h. Il a débuté par une phase d’analyse et d’étude de
la faisabilité, puis une validation. L’application web en elle-même a été découpée en 4
interfaces (interface des membres de la direction, interface des professeurs, interface de
l’élève et de celle du parent) qui ont été réalisés les uns après les autres.
L’application mobile pour Android a été réalisée après la plateforme web dans la durée
d’une semaine.
Des réunions avec l’encadrant ont été réalisées des fois pour valider chaque prototype
utilisable de la plateforme.
Le tableau suivant regroupe l’enchainement des tâches réalisées avec MS Project (Voir
chapitre Réalisation du projet pour plus de détails sur ce logiciel).
Tableau 1 - Enchainement des tâches du projet
5.2. Diagramme de GANTT

Le diagramme de GANTT est une représentation graphique de l’enchaînement des
tâches d’un projet en fonction du temps.

Il permet de voir graphiquement :

• L’évolution des tâches ;
• Le taux d’avancement des tâches ;
• L’’impact des avances et des retards sur le projet ;
• Les ressources affectées à chaque tâche ;
• & d’autres évènements tel que les réunions et les tests.
Le diagramme de GANTT de notre projet se présente comme suit :
Figure 1 - Diagramme de GANTT
Légende du diagramme de GANTT :
Conclusion
Dans cette première partie du projet nous avons d’entrer de jeu fait une étude de l’existant, nous
permettant ainsi de voir les différentes améliorations et innovations à apporter dans le domaine
des systèmes de gestion en générale et celui des écoles en particulier. Puis nous définîmes les

différents paramètres de notre logiciel à savoir les points forts du projet et leurs limites, le plan
de travail et le diagramme de GANTT qui y est affilié. Cette partie initiale est primordiale dans
la réussite de tout bon logiciel étant donné que le projet se base dessus pour voir le jour.

Chapitre II : Conception du projet
CHAPITRE II : CONCEPTION DE PROJET

Introduction
Située entre la définition initiale et la conduite à proprement parler du projet, l’étape de la
conception tient une place centrale, au propre comme au figuré dans la démarche. En effet, sa
finalité est la préparation et l'organisation de la mise en œuvre des éléments précédemment
définis. Elle structure, organise, planifie le projet.
Analyse et conception
2.1. Cycle de vie
Le cycle de vie d'un logiciel (en anglais software life cycle), désigne toutes les étapes
du développement d'un logiciel, de sa conception à sa disparition. L'objectif d'un tel
découpage est de permettre de définir des jalons intermédiaires permettant
la validation du développement logiciel, c'est-à-dire la conformité du logiciel avec les
besoins exprimés, et la vérification du processus de développement, c'est-à-dire
l'adéquation des méthodes mises en œuvre. Il y’a plusieurs modèles de cycle de vie selon
le type du logiciel et les besoins exprimés par le client (la maitrise d’ouvrage).
Pour notre projet, nous avons adopté le modèle de cycle de vie en spirale car le projet
est d’une grande taille et que le système est régulièrement mis à jour en fonction des
nouvelles fonctionnalités à y ajouter ou améliorer.
Le modèle en spirale (spiral model) est un modèle de Cycle de développement
logiciel qui reprend les différentes étapes du cycle en V. Par l'implémentation de
versions successives, le cycle recommence en proposant un produit de plus en plus
complet et dur. Le cycle en spirale met cependant plus l'accent sur la gestion des risques
que le cycle en V. (source : https://fr.wikipedia.org/wiki)

Figure 2 - Cycle de vie en spirale (source img: https://fr.wikipedia.org/wiki)
Modélisation avec le langage UML

3.1. Langage UML
UML signifie « Unified Modeling Language » (langage de modélisation objet unifié).
UML est issu de la fusion des méthodes :
• Booch : Grady Booch (1991) ;
• OMT (Object Modelling Technique): James Rumbaugh (1991) et
• OOSE (Object Oriented Software Engineering): Ivar Jacobson (1992).
UML est né dans les années 1990. On assiste à la normalisation d’UML1.0 en janvier
1997 par Object Managment Group (OMG) ; UML 2.0 a été adopté par l'OMG en juillet
2005. La dernière version de la spécification validée par l'OMG est UML 2.5.1 (2017).
Le langage de modélisation UML est destiné à faciliter la conception des documents
nécessaires au développement d'un logiciel, comme standard de modélisation de
l'architecture logicielle. UML 2.0, propose 14 types de diagrammes dont six structurels
et huit comportementaux. Les diagrammes sont dépendants hiérarchiquement et se
complètent, de façon à permettre la modélisation d'un projet tout au long de son cycle
de vie. (Source https://fr.wikipedia.org/wiki)

Figure 3 - Les diagrammes d'UML 2.5
3.2. Identification des acteurs
Qu’est-ce qu’un acteur ?

Un acteur représente le rôle de l’utilisateur qui interagit avec le système.
L’acteur peut être un utilisateur humain, une organisation, une machine ou un autre
système externe.
Dans notre système, les acteurs sont :
• Admin : c’est l’administrateur (ou les administrateurs) de la plateforme.
L’admin permet de faire toutes les opérations possibles sur le système. Il peut
également améliorer la plateforme en ajoutant de nouvelles fonctionnalités et
de corriger des erreurs éventuelles qui peuvent survenir ;
• Membre direction : qui permet de gérer les inscriptions, modifications et
suppressions des autres utilisateurs du système (professeur, parent et élève), de
publier des articles, d’éditer les documents administratifs ainsi que leurs
traitements et de publier des articles, après identification ;
• Directeur : Un directeur est aussi un membre de la direction. Il peut faire tout
ce qu’un membre de la direction peut faire, mais il peut aussi créer une classe,
et également effectuer des opérations sur les autres membres de la direction
comme ajouter, modifier et supprimer membre direction.
• Visiteur : il peut consulter les informations du site, voir des actualités mis sur
la page d’accueil ;
• Professeur : il peut ajouter, modifier des notes, des cours et évaluations en
faveur des élèves inscrits dans cet établissement, modifier certaines de ses

informations personnelles saisi lors de son inscription, envoyer et recevoir des

messages, après identification ;
• Parent : il peut suivre de façon régulière le travail de son enfant inscrit dans cet
établissement, modifier certaines de ses informations personnelles saisi lors de
l’inscription de son enfant, faire des demandes de documents (comme
attestation de scolarité, bulletin) et suivre l’état d’avancement de ces demandes
ainsi qu’envoyer et recevoir des messages, après identification ;
• Elève : il peut consulter les cours ajoutés sur le site par un professeur, modifier
son avatar et son mot de passe, envoyer et recevoir des messages après s’être
identifié.
Figure 4 - héritage entre les différents acteurs
Cette figure met en évidence les relations d’héritage qui existent les différents acteurs
de la plateforme. Par exemple, la relation entre membre direction et directeur signifie
que le directeur est un membre de direction.
• Une Personne inscrite est un Visiteur.
• Un Elève, Parent, Professeur ou Membre direction est une Personne inscrite.
• Un directeur est un membre direction.
• Et un admin représente tous ces acteurs.
On remarque que celui qui peut faire le moins d’action est visiteur et l’acteur qui peut
faire le plus d’actions est l’admin 3.
3.3. Diagramme de cas d’utilisation
3
Admin : c’est l’administrateur du site. C’est lui qui s’occupe de la maintenance et de la mise à jour du site. Il
est le plus souvent considéré comme celui qui a conçu la plateforme.

Qu’est-ce qu’un cas d’utilisation (CU) ?

Un cas d’utilisation est un service offert par le système, à un acteur.
Le diagramme de cas d’utilisation (UseCaseD) est une représentation contextuelle de

haut niveau du système modélisé. Il permet de faire ressortir les grandes
fonctionnalités du système. C’est un des diagrammes UML utilisés pour une
représentation du comportement fonctionnel d'un système logiciel. Le UseCaseD est
utile pour des présentations auprès de la direction ou des acteurs d'un projet, mais pour
le développement, les cas d'utilisations sont plus appropriés. En effet, un cas
d'utilisation (use case) représente une unité discrète d'interaction entre un utilisateur
(humain ou machine) et un système (source https://fr.wikipedia.org/wiki).
Figure 5 - diagramme de cas d'utilisation
Un peu plus détails sur les CU de personne inscrite, professeur et membre direction.

Figure 6 - détails sur les cas d'utilisation de personne inscrite
Ce diagramme explique de façon un peu plus détaillé les cas d’utilisation d’une personne
inscrite. Il met en évidence les relation d’extension « extend » sur la figure.
Figure 7 - détail sur les cas d'utilisation de professeur

Figure 8 - détail sur les cas d'utilisation de membre direction
Comme pour les précédents, on retrouve ici aussi un peu plus détails sur les cas
d’utilisation un membre de la direction. Il met en évidence les relations d’extension
« extend » sur la figure et de généralisation entre les cas d’utilisation.
3.4. Diagramme de séquence

Un diagramme de séquence comprend un groupe d'objets 4, représentés par des lignes
de vie 5, et les messages que ces objets échangent lors de l'interaction.
Il permet de montrer les interactions d’objets dans le cadre d’un scénario 6 d’un
diagramme de cas d’utilisation.
On distingue les messages synchrones, asynchrones et réflexive.
Définitions :
4
Objet : c’est une instance d’une classe.
5
Ligne de vie : représente un participant à une interaction (objet ou acteur)
6
Scénario : c’est une instance d’un cas d’utilisation

• Message : définit une communication particulière entre des lignes de vie (objets
ou acteurs)
• Message synchrone : bloque l’expéditeur du message jusqu’à la réponse du
destinataire.
• Message asynchrone : l’expéditeur du message ne reste pas bloqué en attendant
la réponse du destinataire.
• Message réflexive : c’est un message d’un objet vers lui-même.
Ci-dessous quelques diagrammes de séquences relatifs à notre système :
Figure 9 - Diagramme de séquence du cas d’utilisation “Ajouter_cours et évaluations”

Ce diagramme nous présente un scénario du cas d’utilisation “Ajouter_cours et évaluations”.

Le professeur après connexion au système ajoute des cours et ses anciennes évaluations. Nous
avons utilisé l’opération “alt” pour montrer les exécutions possibles après connexion ou non
d’un professeur qui est déterminé après saisi de ses identifiants.
Figure 10 - Diagramme de séquence du cas d’utilisation “ajouter_notes”
Par analogie au précédent diagramme, celui-ci également est une exécution du cas d’utilisation
“ajouter_notes”. Il décrit un scénario au cours duquel un professeur attribut une note à un élève
donné.

Figure 11 - Diagramme de séquence du cas d’utilisation “modifier_notes”
Après attribution d’une note à un élève, le professeur a la possibilité de la modifier. Alors ce

diagramme montre une exécution du cas d’utilisation “modifier_notes” avec les mêmes
principes que les diagrammes précédents.

Figure 12 - diagramme de séquence du cas d'utilisation "inscrire"
Dans ce diagramme on retrouve les scénarios qui surviennent lors de l’inscription d’une
personne. Tout comme dans les autres diagrammes, l’opérateur « alt » été utilisé ainsi que
l’opérateur « loop » qui permet de faire une boucle.

Figure 13 - Diagramme de séquence du cas d'utilisation gérer profil
Dans ce diagramme, on observe les scénarios concernant la gestion de profil d’un utilisateur
inscrit dans le système

Figure 14 - Diagramme de séquence du cas d’utilisation “Suivi_enfant”
Ce diagramme met en exergue l’exécution d’un scénario du cas d’utilisation “Suivi_enfant”,

qui permettrait à un parent ou un tuteur d’avoir un suivi régulier des agissements et résultats
académiques de ses enfants inscrits dans cet établissement.

Figure 15 - Diagramme de séquence du cas d’utilisation “Effectuer demande”
Pour ce qui est de ce diagramme, il représente une exécution du cas d’utilisation “Effectuer
demande” qui permet au directeur d’éditer les bulletins semestriels après s’être connecté au
système grâce à ces identifiants.

Figure 16 - Diagramme de séquence du cas d'utilistation 'Envoyer Diffusion '
Ce diagramme décrit les scénarios du cas d’utilisation “Envoyer Diffusion” qui permet
d’envoyer une diffusion à un ensemble de personne par exemple aux professeurs de l’école.

Figure 17 - Diagramme de séquence du cas d'utilisation 'Envoyer Message '
Le diagramme ci-dessus nous présente les scénarios du cas d’utilisation “Envoyer Message”,
qui permet d’envoyer des messages entre les différents utilisateurs du système.

Figure 18 - Diagramme de séquence du cas d'utilication creer classe
Ce diagramme décrit le scénario du cas d’utilisation “Créer classe”, qui permet d’attribuer des
élèves et professeurs à un niveau donné pour en faire une classe.

Figure 19 - Diagramme de séquence du cas d'utilication publier article
Ce diagramme montre un scénario du cas d’utilisation “publier article”, qui permet à un

membre de la direction de publier un article sur le système.
3.5. Diagramme de classe
Qu’est-ce qu’une classe ?

Une classe représente un objet ou un ensemble d'objets qui partagent des attributs et des
comportements (méthodes) communs. C’est une abstraction des choses du monde réel.
Une classe possède :

• Un nom (le nom est placé dans la première sur la figure d’une classe) ;
• Des attributs (le(s) attributs dans la deuxième partie sur la figure d’une classe) ;
• Des méthodes (elles sont placées dans la troisième partie sur la figure d’une
classe)

Un diagramme de classe permet de modéliser les objets qui constituent le système, pour
afficher les relations entre les objets, pour décrire ce que ces objets font et les services
qu'ils fournissent.
C’est le diagramme le plus importance et indispensable dans la modélisation UML d’un
système réalisé avec le concept Orienté Objet.
Il est représenté par un rectangle divisé en trois (3) parties la première contient le nom
de la classe, la seconde la liste des attribues avec leurs types et visibilité (public +, privée
-, protégée # ou package dans le cas où rien n’est mentionné) et la troisième partie
contient les méthodes (ou Opérations).
Les diagrammes qui suivront vont mettre en évidence certaines relations qui peuvent
exister entre les différentes classes d’un diagramme de classes telles que l’héritage 7,
l’agrégation et la notion de package l’équivalent des dossiers dans la programmation
(java par exemple)
Légende
7
L'héritage : permet de factoriser les éléments (attributs et méthodes) qui sont communs à un ensemble de
classe et de les mettre dans une autre classe plus générale appelée classe mère à partir de laquelle on peut avoir
d'autre classe plus spécialisée (Classe fille ou classe dérivée).

Figure 20 - Mise en évidence de la relation d’héritage entre les classes du système
Les classes Eleve, Parent, Professeur et Membre_direction ont tous des attributs
communs tel que nom, prenom, adresse. . ., et aussi des méthodes communes telles que
se_Connecter, se_Deconnecter, lire_Article . . ., l'héritage nous permet de regrouper ces
attributs et méthodes dans une classe mère de base Personne ainsi de ne garder dans les
classes dérivées que des attributs particuliers.
De même pour Message tous les messages ont comme attributs texte (le corps du
message), destinataire, code_expediteur, dateEnv et date_Recep, la Diffusion a en plus
liste_destinateur, nbre_Livraison et etat.
Le Bulletin et l'Attestation_de_scolarité sont de type Document.

Figure 21 - Mise en évidence des relations entre Matiere, Professeur, Directeur, Classe et Eleve

Figure 22 - Les relations entre classes intervenant dans demande et traitement de demande
Figure 23 - Les relations entre les classes intervenant dans l’envoi du message

Figure 24 - Mise en évidence de la relation entre Cours, Professeur et Eleve

Figure 25 - Le diagramme regroupant les classes et les relations entre elles
Légende
1 signifie Un et Un seul
1.. * signifie Un ou plusieurs
* signifie Zéro, Un ou plus
Modélisation avec la méthode Merise

4.1. Définition
La méthode Merise est une méthode d'analyse, de conception et de réalisation
de systèmes d'informations. Merise a été très utilisée dans les années 1970 et 1980 pour
l'informatisation massive des organisations. Cette méthode reste adaptée pour la gestion
des projets internes aux organisations, se limitant à un domaine précis. Elle est en
revanche moins adaptée aux projets transverses aux organisations, qui gèrent le plus
souvent des informations à caractère sociétal (environnemental et social) avec
des parties prenantes.
4.2. Dictionnaire de base de données

Les données sont représentées dans le tableau ci-dessous :
Nom symbolique Type Description
C’est le numéro d’enregistrement d’une

id pers Entier personne. Il permet de stocker l’ordre dans
lequel les personnes ont été inscrits.
Il représente CNE pour un élève et CNI pour

code pers Caractère variable (200)
toutes les autres personnes
type cours Caractère variable (200) Peut-être soit vidéo ou PDF
type note Caractère variable (200) Peut-être soit composition ou devoir
C'est le type de poste auquel est destiné la

type diffusion Caractère variable (200) diffusion (le message) : exemple élève si le
message est destiné aux élèves
C'est le poste qui envoie la diffusion exemple

poste diffuseur Caractère variable (200)
poste professeur ou poste directeur
Peut-être une demande d’information ou une

type demande Caractère variable (200)
demande de document
C'est pour savoir si la demande est en attente, en

etat demande Caractère variable (200)
cours de traitement ou bien traiter
C’est le nombre de personne qui reçut le

nbre livré Entier
message diffuser
type absence sanction Caractère variable (200) Peut-être soit une absence ou une sanction
C’est la photo de profil c’est le chemin qui est

avatar Caractère variable (200)
mentionné ici et pas l’image lui même
pers id pers Entier Identifiant d’une personne
par id pers Entier Identifiant d’un parent
elv id pers Entier Identifiant d’un élève
prof id pers Entier Identifiant d’un professeur
mem id pers Entier Identifiant d’un membre de la direction

dir id pers Entier Identifiant du directeur
Tableau 2 - dictionnaire de base de données
4.3. Modèle Conceptuel de données (MCD)

Le modèle conceptuel des données (MCD) a pour but d'écrire de façon formelle les
données qui seront utilisées par le système d'information. Il s'agit donc d'une
représentation des données, facilement compréhensible, permettant de décrire le
système d'information à l'aide d'entités. 8
Le MCD de notre système est représentée dans le schéma ci-dessous :
8
Entité : C’est la représentation d'un élément matériel ou immatériel ayant un rôle dans le système que l'on
désire décrire.

Figure 26 - Modèle conceptuel de données

Légende
Dans le modèle, on constate une entité personne qui est une généralisation des entités
élève, parent, professeur et membre direction qui est elle-même une généralisation du
directeur.
On remarque aussi que les associations « envoyer diffusion » et « envoyer message »
sont des associations porteuses d’informations 9.
4.4. Modèle Logique de données (MLD)

Le modèle logique de données est la traduction du MCD en tenant compte des principes
d'organisation.
Passage du MCD au MLD
Le passage du modèle conceptuel au Modèle Logique des Données est purement
mécanique, il suffit de respecter quelques règles citées ci-dessous. Il n’y a plus de
travail de conceptualisation ou de réflexion proprement dit. Lorsque nous réalisons un
Modèle Logique des Données nous ne faisons que « détruire » un Modèle Conceptuel
des Données pour recréer un autre modèle.
Règles de passage du MCD au MLD
Pour passer du MCD au MLD, on procède de la manière suivante :
1 2
• Toute entité conceptuelle se • Dans une association binaire (1,
transforme en une table, n), l'identifiant de l'entité père
l'identifiant devient une clé ; est incorporée dans l'entité fils.
Cet identifiant est alors
appelé la clé étrangère (ou
foreign key en anglais) ;
3 4
• Toute association (n, n) devient • Déterminer le type de chaque
une table. La clé est obtenue en attribut des tables.
concaténation des clés des
entités collections ;
9
Association porteuse d’information : c’est une association qui comporte aussi des attributs.

Représentation du MLD
Les clés primaires sont soulignées et les clés secondaires sont précédées par le symbole
‘ # ’.
• Personne (id pers, code pers, mot de passe, nom, prenom, sexe, date naissance,
lieu naissance, adresse, date inscription, avatar) ;
• Parent (#par id pers, email parent, num telephone parent) ;
• Professeur (#prof id pers, email prof, adresse prof, num telephone, specialite
prof) ;
• Eleve (#elv id pers, #par id pers, #id classe, adresse eleve, niveau eleve) ;
• Membre direction (#mem id pers, #dir id pers, email membre direction, adresse
membre direction, num telephone membre direction, poste membre direction) ;
• Directeur (#dir id pers) ;
• Article (id article, titre article, photo couverture article, contenu article, date
article, #mem id pers)
• Note (id note, note, type note, semestre, #id matiere, #prof id pers, #elv id pers)
• Enseigner (#prof id pers, #id classe) ;
• Cours (id cours, type cours, date partage cours, semestre cours, niveau cours,
#prof id pers) ;
• Absence sanction (id absence sanction, type absence sanction, date absence
sanction, #elv id pers, #mem id pers) ;
• Classe (id classe, nom classe, date creation classe);
• Matiere (id matière, #id classe, nom matière, code matière, coeff);
• Diffusion (#mem id pers, #id pers, date envoi diffusion, poste diffuseur, date fin
diffusion, contenu diffusion, type diffusion, nbre livre);
• Envoyer message (#pers id pers, #pers id pers, date envoi msg, date vu msg,
contenu msg, id msg) ;
• Demande (id demande, #id document, #par id pers, type demande, etat
demande, date demande, date debut traitement demande, date fin traitement
demande) ;
• Document (id document, #elv id pers, type document, nom eleve doc, prenom
eleve doc, annee scolaire, nom ecole, date delivrance) ;
• Bulletin (#id document) ;
• Attestation scolarite (#id document) ;
• Carte eleve (#id document) ;
On remarque que dans le MLD, les associations ‘enseigner’, ‘diffusion’, ‘envoyer
message’ se transforment en une table, comme le stipule la troisième règle citée haut,
et dont les clés primaires sont composées de plusieurs attributs.

Conclusion
En sommes, cette partie présente tout ce qui concerne la partie conception(diagrammes) relatif
à notre projet. La phase de la conception permet au client et au prestataire même de se retrouver
à travers le projet. Elle présente les différents diagrammes permettant de répondre aux questions
relatives à la structure statique et globale du système, la visualisation des classes et des relations
entre elles, les différentes fonctionnalités du système, les acteurs de ce dernier et les interactions
entre le système et ces acteurs

CHAPITRE III : REALISATION DU PROJET
Introduction
Nous présentons ici la description des outils et environnements qui permettent de réaliser ce
projet. Il s’agit de langages informatiques, de scripts, de bibliothèques, et de logiciels tels que
les éditeurs de texte, les logiciels de gestion de projets, les logiciels de présentation.
Tous les outils et technologies qui seront cités ici sont soient libres de droit, soient possèdent
une version d’essai ou une alternative libre qui sera citée.
Langages et outils de développement

2.1. Langages et scripts
a. HTML
Le terme signifie « HyperText Markup Language » qu'on peut traduire
par « langage de balises pour l'hypertexte ». Il est utilisé afin de créer et
de représenter le contenu d'une page web et sa structure. La dernière
révision majeure du HTML est le HTML5. Cette version a été finalisée
le 28 octobre 2014 et apporte beaucoup de nouveauté tel les formats
date, email et les balises footer, header, section...
b. CSS3
Les feuilles de style en cascade1, généralement appelées CSS de l'anglais
Cascading Style Sheets, forment un langage informatique qui décrit la
présentation des documents HTML et XML. Elles permettent d’ajouter
les couleurs, et d’avoir une mise en forme plus poussée, les feuilles de
style peuvent même ajouter des petites animations aux pages web.
c. JavaScript
JavaScript est un langage de script principalement employé au début
dans les pages web pour le rendre plus interactives. Mais devenu très
vite populaire grâce à ces nombreuses librairies (Node.js, jQuery et
React par exemple). Le langage JavaScript peut être utilisé côte
serveur.
d. PHP
Le PHP, pour Hypertext Preprocessor, est un langage de
programmation très utilisé pour produire des pages Web

Chapitre III : Réalisation du projet
dynamique. C'est un langage très abordable qui permet de créer des site web
dynamiques.
Le PHP est un langage de script côté serveur. Il est sous licence libre ce qui veut dire
qu’il peut donc être utilisé par n'importe qui de façon totalement gratuite. On peut
programmer en PHP de façon impérative et/ou orienté objet.
e. MySQL
MySQL est un Système de Gestion de Base de Données (SGBD)
parmi les plus populaires au monde. Il est distribué sous double
licence, une licence publique générale GNU et une propriétaire
selon l’utilisation qui en est faites. La première version de
MySQL est apparue en 1995 et l’outil est régulièrement
entretenu. SQL fait référence au Structured Query Language, le langage de requête
utilisé.
f. FPDF
FPDF est une classe PHP libre qui permet de créer des fichiers PDF directement depuis
PHP sans dépendre d'une librairie extérieure. Le projet, commencé en 2001 par Olivier
Plathey, en est aujourd'hui à la version 1.82 en date du 7 décembre 2019.
g. Java
Java est un langage de programmation orienté objet et semi-compilé, il
s’exécute sur la machine virtuelle JVM (Java Virtual Machine) ce qui fait
de lui un langage portable. En plus du mobile, le langage java est utilisé
dans plusieurs domaines tels que la programmation système, la
programmation embarquée, l’intelligence artificiel, la programmation
d’application distribuée (avec JEE),
h. XML
L'Extensible Markup Language, généralement appelé XML est un
métalangage informatique de balisage générique. Dans ce projet il
nous a permis de faire la partie graphique de l’application mobile.
2.2. Outils de développement

Logiciels
a. Sublime Text
Sublime text est un éditeur de texte pour les langages de
programmation. C’est juste un éditeur de texte et non pas un IDE
(Environnement de Développement Intégrité) L’éditeur propose
cependant des fonctions plus avancées, dont :
• Sélection et édition dans plusieurs sections de code en
parallèle ;

• Marque-page au sein même des fichiers ; Sauvegarde automatique ;

• Recherche et remplacement par expressions régulières ;
• Support des macros et de plugins en Python ;
• Personnalisation des raccourcis clavier.
b. Android Studio
Android Studio est un environnement de développement pour
développer des applications mobiles Android. Il est basé sur
IntelliJ IDEA (Il est développé par JetBrains) et utilise le moteur
de production Gradle (le successeur de Maven). Il peut être
téléchargé sous les systèmes d’exploitation Windows, macOS, Chrome OS et Linux.
Plusieurs langages peuvent être utiliser dans Android studio parmi lesquels on peut
citer : Java, kotlin, flutter, dart . ..
c. XAMPP /WampServer
Ils sont composés d’un ensemble de logiciel : apache le serveur HTTP ;
MySQL le SGBD comme cité plus haut et PHP l’interpréteur PHP)
permettant de faire fonctionner localement (sans avoir à se connecter à
un serveur externe) des scripts PHP.
d. StarUML
StarUML est un outil spécialisé dans la modélisation UML Utilisé dans
le développement logiciel et dans la conception orientée objet, la
modélisation UML est un langage reposant sur une représentation en
diagrammes et pictogrammes. Elle permet une visualisation et une
représentation de l’architecture d'un projet en montrant les acteurs, les processus et les
composants. Le logiciel permet de concevoir des classes, des objets et des acteurs et d'y
définir beaucoup d'attributs. C’est un logiciel payant mais il existe un alternatif gratuit
et open source UNLet.
e. Adobe Illustrator
Adobe Illustrator est un logiciel de création graphique vectorielle
permettant de réaliser des logos et des illustrations. Il fait partie de la suite
adobe. Les images vectorielles sont constituées de courbes générées par
des formules mathématiques ce qui permet de zoomer l’image sans avoir
les effets de flou (contours peu net) ou de pixellisation (le logiciel possède une version
d’essai de 30 jours).
f. Adobe Photoshop
Adobe Photoshop est un logiciel de création graphique permettant de
réaliser des logos et des illustrations. A la différence de Illustrator
Photoshop manipule des pixels et non des vecteurs.

g. PicPick
Picpik est un logiciel de capture d’écran très complet. Il contient
un outil complet de capture d'écran, un éditeur d'image intuitif, une
pipette de prélèvement des couleurs, une règle à pixels, un
rapporteur, un curseur en croix, un tableau blanc.
h. Microsoft Word, PowerPoint, Project
Word est un logiciel de traitement de texte (pas pour de la
programmation) qui permet de réaliser les document et
PowerPoint est un logiciel qui permet de réaliser des
présentations avec un système de diapositives (utilisation des
transparences). Tous deux sont des logiciels bureautiques et ils font partie de la suite
Microsoft office (ils ont tous leurs équivalents dans la suite OPEN OFFICE qui est un
logiciel libre).
Project généralement appelé MS Project est un logiciel de gestion de projets édité par
Microsoft. Il permet aux chefs de projet et aux planificateurs de planifier et piloter les
projets, de gérer les ressources et le budget, ainsi que d'analyser et communiquer les
données des projets.
2.3. Technologies
a. Play service vision
C’est une API faisant partie des Play-services (disponible depuis la version 4.1
d’Android) de google, elle permet la détection d’objet en temps réel dans les images
(photo et vidéo). Elle possède un ensemble de classes, de méthode et de constantes qui
servent de façade par laquelle on peut utiliser ses services, de détection d’objet en
particulier la détection faciale et plus précisément la détection des yeux et de leurs états
(fermés ou ouverts).
Elle permet d’accéder à la caméra de l’appareil, puis informe via ses interfaces si l’objet
attendu est détecté ou non et avec quelle probabilité on peut se fier au résultat retourné,
ainsi en fonction de la précision on peut exécuter l’action souhaitée.
Dans notre cas il s’agit tout simplement de mettre pause la vidéo si les yeux (aucun des
deux) ne sont détectés ou s’ils sont fermés et jouer la vidéo sinon.
b. PHPMailer
PHP Mailer est une classe PHP facilitant la génération et l'envoi d'e-
mails.
Avec PHP Mailer, il y a deux méthodes pour envoyer des e-mails :
• La méthode SMTP 10 permettant de se connecter à un serveur de mail distant ;
• La méthode "mail" lorsque le serveur de mail est local
10
SMTP : Simple Mail Transfer Protocol est un protocole de communication utilisé pour transférer le courrier
électronique vers les serveurs de messagerie électronique. SMTP est un protocole assez simple.

La méthode SMTP peut également être utilisée avec un serveur local mais il est
préférable de privilégier la méthode "mail" avec un serveur local car elle est plus rapide.
Le schéma de navigation
Le schéma de navigation est un organigramme qui montre les différentes pages d’un site web
sous forme d’arborescence. Il permet de se retrouver dans les menus et d’accéder directement
et facilement à l’endroit qu’on souhait visiter sur le site web, c’est comme la carte du site web.
Le schéma de navigation donne une idée de la grandeur du site et de sa structure hiérarchique.
Figure 27 - Schéma de navigation pour une personne non connectée
Pour les visiteurs non connectés seul les menu Accueil, Le lycée et Se connecter seront
présent. L'accueil est la page par défaut, les sous menus Nos Professeur et, Membres
de la direction sont aussi accessible ils permettent d’accéder respectivement à la liste
des professeurs et la liste des membres de la direction.
Figure 28 - Schéma de navigation pour un élève connecté

En plus des menus cités précédemment l’élève lorsqu’il se connecte à accès aux menus
Espace élève (dans laquelle se trouvent deux sous menus Mes cours et Mes
évaluation), Messages et un menu lui permettant de voir et de modifier les informations
sur son profile et de se déconnecter.
Figure 29 - Schéma de navigation pour un parent connecté
Les sous menus Suivi enfant et Mes demandes se trouve dans l’espace parent, ces deux
menus lui permet de voir les informations relatives à ces enfants telle que leurs absences,
lui permet de faire des demandes et de suivre l’état de ses demandes.
Figure 30 - Schéma de navigation pour un professeur connecté
L'Espace professeur contient les sous menus suivants : Mes classes pour voir la liste
des classes qui lui sont associées, Mes cours pour voir tous les cours qu’il a ajouté et
lui permet aussi d’en ajouter, Mes évaluations pour accéder à ces évaluations ou de

créer une autre évaluation et Messages aux élèves lui permet d’envoyer des messages
(sous forme de diffusion) à ces élèves.
Figure 31 - Schéma de navigation pour le directeur connecté
Le directeur peut accéder à l’espace administrateur du site grâce au menu Espace

directeur
Figure 32 - Schéma de navigation de l’espace directeur
Dans l’espace directeur, toutes les commandes importantes se trouve dans le menu
Opération

Figure 33 - Schéma de navigation du menu Opération
Les opérations tel que l’inscription des élèves, des professeurs et autre membre de la
direction. Afficher leurs listes et modifier leurs informations.
Les menus Opérations membre et Opération sur classe sont réservés au directeur.
Ces lui permet de créer une classe, afficher la liste des classes, ou envoyer des diffusions
aux membres de la direction.
Figure 34 - Schéma de navigation pour les membres de la direction
Comme pour le directeur les membres de la direction ont accès à tous les menus sauf
ceux réservés au directeur

Figure 35- Schéma de navigation de l’espace membre direction
Figure 36 - Schéma de navigation de l’espace membre direction
Maquettes de l’application
Nous présentons ici quelque captures d’écran du site web et de l’application mobile

Figure 37 - L’espace de connexion pour les membres de la direction
Figure 38 - L’espace de connexion pour les professeurs, les parent, et les élèves

Figure 39 -L’accueil et la barre de navigation après la connexion d’un professeur
Figure 40 - La liste des professeurs pour les visiteurs

Figure 41 - Liste des élèves vue par le directeur

Figure 42 - L’écran de chargement et la page de connexion de l’application mobile
Il est aussi possible en cliquant sur le bouton OUVRIR DANS LE NAVIGATEUR

d’ouvrir directement le site dans votre navigateur.
Figure 43 - La page d’accueil et le menu de l’application mobile

Figure 44 - Déconnexion de l’application mobile
Il existe bien d’autre page ceci n’est qu’une sélection, nous n’avons pas voulu mettre
énormément afin de ne pas surcharger le rapport.
Conclusion
Dans cette partie nous avons présenté les différents outils de développement, langages, les
schémas de navigation et les maquettes de l’application. Ces outils et langages nous ont
permis de mettre au point notre projet tant sur la partie théorique que pratique.

Conclusion générale & perspectives
CONCLUSION GENERALE &

PERSPECTIVES
Dans le cadre de notre projet de fin d’étude nous avons été amenés à réaliser une application
web permettant de gérer une école. Ce projet nous a permis de mettre en pratique nos
connaissances acquises au cours de notre cursus universitaire à la Faculté des Sciences et
Techniques d’Errachidia en plus de nos recherches effectuées sur les différents sites de
développement personnel.
De plus ce travail tout en élargissant nos connaissances, nous a permis de développer l’esprit
d’équipe et d’entraide.
Nous avons encore beaucoup d’ambitions et d’idées pour ce projet. Nous n’avons pas pu
implémenter certaines fonctionnalités par contrainte de temps ou de moyen. Mais avec le temps
nous prévoyons d’ajouter encore plus de fonctionnalités pour rendre ce système encore plus
puissant qu’il ne l’est déjà. Avec ce système qui possède déjà une plateforme web et
l’application mobile pour Android, nous prévoyons de créer l’application desktop pour
Windows, mac ainsi que l’application pour iOS car la plupart des utilisateurs de nos jours
utilisent des écrans de petites tailles.
Pour finir, nous espérons que ce travail contribuera non seulement au progrès et au renouveau
dans le domaine des systèmes de gestion des écoles mais servira également de modèle pour
toute personne morale ou physique s’y intéressant.

Bibliographie & Webographie
BIBLIOGRAPHIE & WEBOGRAPHIE

Bibliographie
 Concevez votre site web avec PHP et MySQL,
• Auteur : Mathieu Nebra
• Éditeur : Eyrolles
• Date de parution : 02/11/2017
 Réalisez votre site web avec HTML5 et CSS3,
• Auteur : Mathieu Nebra,
• Éditeur : Eyrolles
• Date de parution : 07/09/2017
Webographie
 [Site web IBM] https://www.ibm.com/docs/fr/
 [Site web openclassroom] https://openclassrooms.com/
 [Site web W3schools] https://www.w3schools.com
 [Site web WIKIPEDIA] https://fr.wikipedia.org/wiki/
 [Site web Stack Overflow] https://stackoverflow.com/

Système de Gestion D'une École & Suivi Parental CHEMAMOU

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Système de Gestion D'une École & Suivi Parental CHEMAMOU

Transféré par

Droits d'auteur :

Formats disponibles

UNIVERSITÉ MOULAY ISMAIL

FACULTÉ DES SCIENCES ET TECHNIQUE

PROJET DE FIN D’ETUDE (PFE) :

Pr AZROUR MOURADE (Membre)

ANNEE UNIVERSITAIRE : 2020-2021

Une pensée forte,

À nos familles respectives, nos parents,

À tous ceux qui ont de près ou de loin contribué

À ces professeurs, amis et connaissances de

C’est là une façon pour nous de vous montrer le

AU 2020-2021 – PFE : CHEMAMOU 9

CHAPITRE I : CADRE GENERAL DU PROJET

2.1. Les sites web

Qu’est-ce qu’un site web ?

On distigne deux principaux types de site web :

AU 2020-2021 – PFE : CHEMAMOU 10

2.2. Les applications mobiles

Qu’est-ce qu’une application mobile ?

Qu’est-ce que Android ?

AU 2020-2021 – PFE : CHEMAMOU 11

Pour la communication de l’application mobile avec la base de données distant on utilise

AU 2020-2021 – PFE : CHEMAMOU 12

Objectifs et spécifications de besoins

Interaction entre les différents acteurs au sein de l’établissement ;

Une gestion plus efficace et dynamique des écoles ;

Un traitement plus rapide, sûre et efficace des documents administratifs des

Un moyen rapide pour un visiteur de communiquer et d’obtenir des

Informer le tuteur de chacun des faits et gestes de l’enfant ;

Permettre au parent de faire suivi régulier des enfants à travers un système

Assurer la confidentialité et la sécurité des données transmises via le système

Et oui, toutes ces fonctionnalités sont offertes par CHEMAMOU…

AU 2020-2021 – PFE : CHEMAMOU 13

b. Points forts de l’application mobile

4.2. Points faibles du système

Moodle propose des fonctionnalités plus avancées plus poussés comme :

AU 2020-2021 – PFE : CHEMAMOU 14

b. Points faibles de l’application mobile

Les fonctionnalités manquantes dans notre système ne remettent

AU 2020-2021 – PFE : CHEMAMOU 15

5.1. Plan de travail

Tableau 1 - Enchainement des tâches du projet

5.2. Diagramme de GANTT

AU 2020-2021 – PFE : CHEMAMOU 16

Il permet de voir graphiquement :

Figure 1 - Diagramme de GANTT

Légende du diagramme de GANTT :

AU 2020-2021 – PFE : CHEMAMOU 17

AU 2020-2021 – PFE : CHEMAMOU 18

CHAPITRE II : CONCEPTION DE PROJET

AU 2020-2021 – PFE : CHEMAMOU 19

Figure 2 - Cycle de vie en spirale (source img: https://fr.wikipedia.org/wiki)

Modélisation avec le langage UML

AU 2020-2021 – PFE : CHEMAMOU 20

Figure 3 - Les diagrammes d'UML 2.5

3.2. Identification des acteurs

Qu’est-ce qu’un acteur ?

AU 2020-2021 – PFE : CHEMAMOU 21

informations personnelles saisi lors de son inscription, envoyer et recevoir des

Figure 4 - héritage entre les différents acteurs

3.3. Diagramme de cas d’utilisation

AU 2020-2021 – PFE : CHEMAMOU 22

Qu’est-ce qu’un cas d’utilisation (CU) ?

Le diagramme de cas d’utilisation (UseCaseD) est une représentation contextuelle de