RAPPORT DE

STAGE

Mme. Salma HALLA

Mr. Saad BELOUAD

Du 15 Aout au 14 September 2020

 2

Université Chouaib Doukkali – ESTSB

Stage d’initiation sous le thème :

La Gestion scolaire :
Développer un système informatique pour que les écoles
stockent et gèrent toutes les données et registres liés à l'école.

Filière :
Génie Informatique

Encadrant :
Mr. MABROUK Abdelfettah

Réalisé par :
Mme. HALLA Salma
Mr. BELOUAD Saad

Année Universitaire :
2019/2020
3
 4

Remerciement
Au terme de notre projet de stage, notre gratitude et nos sincères remerciements vont à tous
ceux dont l’intervention au cours de ce projet, a favorisé son aboutissement.

Ainsi, nous exprimons notre ample reconnaissance et notre haute considération envers
notre encadrant Mr. MABROUK Abdelfattah de l’ESTSB, qui n’a ménagé aucun effort pour
nous aider et nous orienter tout au long de ce projet.

Nous tenons également à adresser nos plus sincères remerciements à l’ensemble du corps
enseignant de l’ESTSB, pour avoir porté un vif intérêt à notre formation, et pour nous avoir
accordé le plus clair de leur temps, leur attention et leur énergie et ce dans un cadre agréable de
complicité et de respect.

Nous sommes reconnaissant également à nos amis, pour leur aide, leur collaboration et leur
assistance durant le déroulement du projet.

Que les membres du jury qui nous feront l’honneur d’accepter de juger notre travail
trouvent ici nos vifs remerciements.

Par la même occasion , nous ne permettons pas d'oublier de remercier tous les
professionnels de santé qui sont en première ligne et les assurons de notre soutien et de notre
reconnaissance devant leur engagement et leur mobilisation sans faille.

Nous tenons également à souligner l’héroïsme, le courage, l’abnégation et la mobilisation

des forces de l’ordre, gendarmerie, polices nationale et municipale, qui œuvrent sur le terrain pour
notre protection.
 5

Enfin, nous remercions l’ensemble des agents des services de l’État, de la Délégation
Régionale de Santé et les sapeurs-pompiers pour leur engagement et leur disponibilité dans la gestion
de cette crise.
 6

Sommaire
Introduction générale __________________________________________________ 10
Chapitre 1 : Cahier de charge et capture des besoins _________________________________ 12

1. Introduction ________________________________________________________________ 13
2. Besoins du client ____________________________________________________________ 13
3. Besoins fonctionnels _________________________________________________________ 14
4. Besoins non fonctionnels _____________________________________________________ 14
5. Risques du projet ____________________________________________________________ 15
6. Conclusion _________________________________________________________________ 15
Chapitre 3 : Démarche du projet _________________________________________________ 16

1. Introduction ________________________________________________________________ 17
2. Gestion du projet ___________________________________________________________ 17
a. Planification ________________________________________________________ 17

3. Equipe de réalisation du projet_______________________________________________ 18

4. Conclusion _________________________________________________________________ 19
Chapitre 4 : Analyse et conception _______________________________________________ 20

1. Introduction ________________________________________________________________ 21
2. UML ________________________________________________________________________ 21
b. Choix d’UML ______________________________________________________ 21
c. Pourquoi modéliser ? _________________________________________________ 22

3. Présentation des outils _______________________________________________________ 22

4. Identification des acteurs ____________________________________________________ 23
5. Diagramme de cas d’utilisation ______________________________________________ 24
a. Diagramme de cas d'utilisation d'acteur «Administrateur» ____________________ 25
b. Diagramme de cas d’utilisation d’acteur «Étudiant»_________________________ 26
c. Diagramme de cas d'utilisation d'acteur «Enseignant» _______________________ 26
d. Diagramme de cas d'utilisation d'acteur «Membre du personnel» ______________ 27

6. Diagramme de séquence ___________________________________________________ 27

a. Fiche de description « Authentification » : ________________________________ 27
b. Fiche de description « Inscription d’un étudiant » : _________________________ 29
c. Fiche de description « Ajouter enseignant » : ______________________________ 31
d. Fiche de description « Affectation des matières aux niveaux» : ________________ 33
e. Fiche de description « Ajouter matière» : _________________________________ 35
 7

7. Diagramme de classes ______________________________________________________ 36

a. Diagramme de classe « gestion d’étudiants » ______________________________ 37
b. Diagramme de classe « gestion des étudiants » _____________________________ 38

8. Conclusion _________________________________________________________________ 38
Chapitre 5 : Réalisation ________________________________________________________ 39

1. Introduction ________________________________________________________________ 40
2. Description de l’environnement de développement intégré ___________________ 40
a. Environnement de développement technologies adoptées : ___________________ 40
b. Les phases de développement : _________________________________________ 42
c. Les scénarios de développement : _______________________________________ 43

3. Principales interfaces graphiques ____________________________________________ 45

a. Authentification _____________________________________________________ 45
b. Inscription _________________________________________________________ 46
c. Liste des étudiants ___________________________________________________ 47
d. Ajouter élément _____________________________________________________ 47
e. Affectation des éléments aux filières _____________________________________ 48

4. Conclusion _________________________________________________________________ 49
Conclusion __________________________________________________________ 50
Webographie ________________________________________________________ 51
 8

Liste des figures

FIGURE 1 : EXEMPLE DE REPRESENTATION D'UN ACTEUR ................................................................................ 23

FIGURE 2 : EXEMPLE DE REPRESENTATION D'UN CAS D'UTILISATION ............................................................. 23

FIGURE 3 : DIAGRAMME DE CAS D’UTILISATION D’ACTEUR ADMINISTRATEUR. .......................................... 25

FIGURE 4 : DIAGRAMME DE CAS D’UTILISATION D’ACTEUR ETUDIANT. ........................................................ 26

FIGURE 5 : DIAGRAMME DE CAS D'UTILISATION D'ACTEUR ENSEIGNANT. .................................................. 26

FIGURE 6 : DIAGRAMME DE CAS D'UTILISATION D'ACTEUR MEMBRE DU PERSONNEL. .............................. 27

FIGURE 7 : DIAGRAMME DE SEQUENCE AUTHENTIFICATION ......................................................................... 28

FIGURE 8 : DIAGRAMME DE SEQUENCE D'INSCRIPTION D'UN ETUDIANT. .................................................... 30

FIGURE 9 : DIAGRAMME DE SEQUENCE D'AJOUT D'UN ENSEIGNANT . ........................................................ 32

FIGURE 10 : DIAGRAMME DE SEQUENCE D'AFFECTATION DES MATIERES AUX NIVEAUX. ........................ 34

FIGURE 11 : DIAGRAMME DE SEQUENCE D'AJOUT DES MATIERES ................................................................ 36

FIGURE 12 : DIAGRAMME DE CLASSE GESTION D’ETUDIANT. ........................................................................ 37

FIGURE 13 : DIAGRAMME DE CLASSE GESTION DES ENSEIGNANTS . ........................................................... 38

FIGURE 14 : LE MODELE DE CYCLE DE VIE EN CASCADE. ............................................................................... 43

FIGURE 15 : SCHEMA D'EVALUATION DES SCENARIOS. .................................................................................. 44

FIGURE 16 : PAGE D'AUTHENTIFICATION « ADMINISTRATEUR » ...................................................................... 45

FIGURE 17 : PAGE D'ACCUEIL ............................................................................................................................. 46

FIGURE 18 : PAGE D'INSCRIPTION DES ETUDIANTS . ........................................................................................ 46

FIGURE 19 : PAGE DE LA LISTE DES ETUDIANTS. ................................................................................................ 47

FIGURE 20 : PAGE AJOUTER ELEMENT. ............................................................................................................... 48

FIGURE 21 : PAGE AFFECTATION DES ELEMENTS AUX FILIERES ...................................................................... 48

 9

Liste des tableaux

TABLEAU 1 : LES RISQUES DU PROJET. ................................................................................................................ 15
TABLEAU 2 : EQUIPE DE REALISATION DU PROJET. ........................................................................................... 18
TABLEAU 3 : ACTEURS PRIMAIRES. ...................................................................................................................... 24
TABLEAU 4 : DESCRIPTION TEXTUEL D'AUTHENTIFICATION .............................................................................. 28
TABLEAU 5 : DESCRIPTION TEXTUEL D'INSCRIPTION D'UN ETUDIANT ............................................................. 29
TABLEAU 6 : DESCRIPTION TEXTUEL D'AJOUT D'UN ENSEIGNANT. ................................................................. 31
TABLEAU 7 : DESCRIPTION TEXTUEL D'AFFECTATION DES MATIERES AUX NIVEAUX.................................... 33
TABLEAU 8 : DESCRIPTION TEXTUEL D'AJOUT D'UNE MATIERE ........................................................................ 35
10
 11

Introduction générale
L'administration d'un établissement scolaire comporte un certain nombre de tâches
indispensables que les responsables ont toujours essayé d'optimiser.

L'arrivée d'ordinateurs a fait naître l'espoir d'améliorer de façon significative

l'ensemble de ces tâches. Depuis peu, les données du problème ont considérablement
changé. Les micro-ordinateurs dotés d'un disque dur ont sensiblement baissé du coût. En
alliant souplesse et efficacité, les compatibles PC permettent aujourd'hui d'envisager avec
beaucoup plus de réalisme la possibilité de gérer informatiquement une école. Il est
opportun de proposer aux utilisateurs potentiels un outil performant dans ce domaine.
C'est ce que nous allons faire en développant récemment l’application BH-GESTION.

La naissance de cette idée est due pour répondre à l’ensemble des besoins
notamment : gestion des étudiants (inscription – modification – suppression – assiduité -
note); gestion des enseignants (inscription – modification – suppression - gestion des
informations et diplômes - affectation aux classes et modules – gestion des taches);
gestion du personnel (ajout – modification – suppression - gestion des taches ); ...

Pour ce qui concerne le volet technique, nous utiliserons un ensemble d’outils tels
que :Php, JQuery, Ajax, Html, Css , Bootstrap , JavaScript .

Ayant présenté les outils et les méthodes adoptés, nous allons exposer maintenant le plan de
ce rapport de mémoire de fin d’étude, qui se subdivise en cinq chapitres principaux :
 Chapitre 1 : cahier de charge et capture des besoins.
 Chapitre 2 : démarche du projet.
 Chapitre 3 : analyse et conception.
 Chapitre 4 : réalisation.
Enfin, une conclusion sera donnée enfin de ce rapport.
 12

Chapitre 1 :
Cahier de charge
et capture des
besoins
 13

Introduction

Ce chapitre a pour rôle de montrer les besoins du client, ainsi que les besoins fonctionnels et non
fonctionnels de l’application, de préciser les risques les plus critiques du projet.

Besoins du client

Au cours de notre stage d’initiation nous souhaitons établir la mise en œuvre d’un portail-web sur
la gestion d’une école qui comporte un ensemble de modules :

 Gestion des étudiants :

Ce module contient trois volets qui sont : l’inscription, l'assiduité ainsi que les notes.
Les nouveaux étudiants s’inscrivent à condition d’avoir une place vacante dans le niveau souhaité,
les étudiants intéressés doivent présenter à l’école une photo de l’étudiant, une copie de sa CIN, le
diplôme du baccalauréat et le relevé de note ainsi que les cordonnées des parents ou tuteurs.

Le traitement des absences des étudiants est réglementé par le code interne de l’établissement.
Les absences peuvent être justifiés ou non, dans le deuxièmes cas : les parents ou tuteurs doivent
recevoir un rapport pour ne pas donner la totalité de la responsabilité à l’école vis-à-vis de
l’absence non justifié de l’étudiant.

L’exploitation et le traitement des notes obtenues par les étudiants dans les contrôles et examens
visent à suivre et à mieux contrôler le travail de l’étudiant, son évolution est l’une des
préoccupations de l’administration.

 Gestion des enseignants:

La gestion des enseignants consiste à tenir compte de leur dossier professionnel (diplômes,
ancienneté, …..).

Deux catégories de enseignants sont à mentionner :

Les vacataires : ceux qui travaillent par heure.
Les permanents : sont ceux qui sont engagés mensuellement par contrat.
 14

Les enseignants n’auront accès qu’aux élèves qui figurent dans les classes et groupes où ils sont
affectés .Ils peuvent suivre les présences et saisir les notes et les notes obtenues par l'étudiant aux
examens.

 Gestion du personnel:

Le directeur de l’école gère le personnel de l’école et détermine les tâches et responsabilités de

chaque membre du personnel. Les personnels n’auront donc accès qu’aux taches qui leurs sont
affectées.

Besoins fonctionnels

Avant d’imposer une solution, il faut se tourner vers le demandeur, pour aboutir de manière
structurée à la solution. En effet, le but du projet est de satisfaire le besoin. Il faut exprimer
clairement les objectifs à atteindre du projet, afin d'éviter toute confusion entre nous et le
demandeur.
Le futur système doit permettre à l’utilisateur de gérer un ensemble de modules, dont nous
trouvons :
 Gestion des étudiants
 Gestion du personnel
 Gestion des enseignants

Besoins non fonctionnels

Les besoins non fonctionnels décrivent les objectifs liés aux performances du système et aux
contraintes de son environnement. Ses exigences techniques sont souvent exprimées sous forme
d’objectifs spécifiques que doit atteindre le système :

 La maintenabilité : le code doit être compréhensible par simple lecture, notamment en

respectant les règles de gestion et les normes de développement.

 Exploitabilité : les impacts en termes de performances doivent être pris en compte lors de
développement, ainsi que la consommation des ressources (CPU, mémoire, etc.) qui doit
être minimisée.

 Sécurité : Chaque utilisateur, pour accéder à l’application, est obligé de s’authentifier par
 15

un nom d’utilisateur et un mot de passe. Il ne pourra accéder qu’aux pages qui lui sont
permises par son profil ou les droits d’accès qui lui sont affectés par l’administrateur. Les
mots de passe ne sont enregistrés dans la base qu’après un chiffrement (MD5).

Risques du projet

Les risques Le type Impact Action correctives

Cahier des charges Risque non bloquant Créer une ambigüité ce Prévoir des réunions et
qui pourra générer un des points de validation
retard qui influencera avec l’encadrant au fur
probablement la date de et à mesure de
livraison. l’avancement du projet.

Les pannes inattendues Risque non bloquant Ralentissement des Utiliser les autres
du Matériel travaux matériaux disponibles.
Recours à une
réparation rapide.

Absence ou maladie Risque non bloquant Ralentissement des Doubler l’effort et

travaux travailler un temps
extra.

Tableau 1 : Les risques du projet.

Conclusion

A la fin de ce chapitre, nous avons bien étudié les besoins du client ; nous avons présente
l’ensemble des fonctionnalités du futur portail de manière organisée dans les différents cycles de
l’application soit fonctionnel ou non fonctionnel et les risques du projet.
 16

Chapitre 3 :
Démarche du
projet
 17

Introduction

Le présent chapitre a pour objectif de présenter la manière dont nous avons géré le projet. Nous
allons présenter dans un premier temps comment le projet a été découpé en tâches afin d’assurer
son bon déroulement.

Gestion du projet

Cette partie a pour objectif de présenter la manière dont nous avons géré le projet. Nous allons
présenter dans un premier temps comment le projet a été découpé en tâches afin d’assurer son bon
déroulement.
Pour cela, pendant la première semaine, nous avons pris connaissance du sujet, établi les fonctions
nécessaires pour remplir les besoins, fait des recherches sur les technologies que nous pourrons
utiliser et déterminer les tâches à accomplir.

Planification

Le projet s’étale sur un mois où nous avons commencé par :

 Analyse du problème : un projet ne peut pas être entrepris sans connaître l'environnement
et sans avoir analysé en détail le sujet, afin de pouvoir dégager les fonctionnalités à
développer.

 Rédaction du cahier des charges : est un document qui doit être respecté lors de la
réalisation d'un projet.

 Spécification des besoins fonctionnels et non fonctionnels : dégager les fonctionnalités du

système, afin de décrire de la façon la plus précise possible les besoins auxquels le nouveau
système doit répondre.

 Etude technique : le choix des outils de développement.

 Conception de l’application.

Après ces cinq taches, nous avons débuté la réalisation de la future application, mais d'une manière
découpée. C’est-à-dire nous avons divisé la réalisation de l’application sur des modules pour que
 18

l'on puisse à la fin avoir un projet complet à livrer. Donc pour cela, nous avons découpé le projet
sur trois modules :

 Module 1 : gestion des étudiants – gestion des enseignants – gestion du personnel.

 Module 2 : gestion des niveaux et classes – gestion des éléments enseigner – gestion des
taches.
 Module 3 : gestion des notes des évaluations – gestion de l’assiduité des étudiants.

Dans chaque module nous trouvons quatre sous taches :

 planning: nous allons décomposer le besoin en tache et ces taches nous allons leur donner
une durée.
 exécution: là où nous allons faire le développement de l’application, et de réaliser les
incréments de fonctionnalités.
 review: dans lequel, nous passons en revue ce qui a été réalisé pendant l’itération.
 Vérification : nous vérifions ce qui a fonctionné ou ce qui n’a pas fonctionné

 Teste et livraison du projet.

 Rédaction du rapport.

Equipe de réalisation du projet

Nom & prénom Fonction / Rôle dans le projet

HALLA Salma Stagiaire / développeur

BELOUAD Saad Stagiaire / développeur

MABROUK Abdelfettah Encadrant

Tableau 2 : Equipe de réalisation du projet.

Développeur :
 Elaboration du dossier de gestion de projet.
 Réalisation de la spécification détaillée.
 Codage de l’application.
 Effectuation des tests unitaires.
 19

Conclusion

Dans ce chapitre, nous avons organisé notre projet en faisant un planning bien détaillé avec la
définition d’équipe de projet.
 20

Chapitre 4 :
Analyse et
conception
 21

Introduction

Dans cette partie, on va analyser et modéliser les besoins du client avec le langage UML.
L’activité d’analyse et de conception permet de traduire les besoins fonctionnels et les contraintes
issues du cahier des charges et de la spécification des exigences dans un langage plus professionnel
et compréhensible par tous les individus intervenants dans la réalisation et l’utilisation de
l’application.

UML

Choix d’UML

UML, c’est l’acronyme anglais pour « Unified Modeling Language ». On le traduit par « Langage
de modélisation unifié ». La notation UML est un langage visuel constitué d’un ensemble de
schémas, appelés des diagrammes, qui donnent chacun une vision différente du projet à traiter.
UML nous fournit donc des diagrammes pour représenter le logiciel à développer : son
fonctionnement, sa mise en route, les actions susceptibles d’être effectuées par le logiciel, etc.
Pourquoi modéliser ? De la même façon qu'il vaut mieux dessiner une maison avant de la
construire, il vaut mieux modéliser un système avant de le réaliser. Modéliser, c’est décrire de
manière visuelle et graphique les besoins, les solutions fonctionnelles et techniques du projet.
Modéliser pour :
 Obtenir une modélisation de très haut niveau indépendante des langages et des
environnements.
 Faire collaborer des participants de tous horizons autour d'un même document de synthèse.
 Faire des simulations avant de construire un système.
 22

Pourquoi modéliser ?

De la même façon qu'il vaut mieux dessiner une maison avant de la construire, il vaut mieux
modéliser un système avant de le réaliser. Modéliser, c’est décrire de manière visuelle et graphique
les besoins, les solutions fonctionnelles et techniques du projet.
Modéliser pour :
 Obtenir une modélisation de très haut niveau indépendante des langages et des
environnements.
 Faire collaborer des participants de tous horizons autour d'un même document de synthèse.
 Faire des simulations avant de construire un système.

Présentation des outils

PowerDesigner (anciennement PowerAMC) est un logiciel de conception créé par la société SAP,
qui permet de modéliser les traitements informatiques et leurs bases de données associées.
PowerAMC propose différentes techniques de modélisation, chacune accessible aux informaticiens
de tout niveau, parmi elles : Merise, UML, Data Warehouse, et processus métiers. Simple
d'utilisation, personnalisable et dotée d'une interface intuitive, cette application optimise les
productivités individuelle et collective. Elle intègre en outre des fonctions de génération de code
pour plus de 45 bases de données et divers langages de programmation.
 23

Identification des acteurs

 Acteur

Un acteur est l'idéalisation d'un rôle joué par une personne externe, un processus ou une chose qui
interagit avec un système.
Il se représente par un petit bonhomme avec son nom inscrit dessous.

Figure 1 : Exemple de représentation d'un acteur

 Cas d’utilisation

Un cas d’utilisation est un service rendu à un acteur : c’est une fonctionnalité de son point de vue.
Un cas d'utilisation se représente par une ellipse contenant le nom du cas.

Figure 2 : Exemple de représentation d'un cas d'utilisation

 Acteur direct

Les acteurs directs, ce sont les utilisateurs de l’application, qui touchent directement l’application.
 24

Type d’acteur Description fonctionnelle

L’acteur qui aura les fonctionnalités
suivantes :
Etudiant
 Consulter ses notes.
 Voir ses absences .
A pour fonctionnalités :
enseignant  Saisir les notes.
 Marquer l’absence.
Ce type d’acteur aura les fonctionnalités
suivantes :
Administration  Gestion des étudiants.
 Gestion des enseignants.
 Gestion des personnels.
A pour fonctionnalités :
Membre du personnel
 Consulter ses taches.

Tableau 3 : Acteurs primaires.

Diagramme de cas d’utilisation

Les diagrammes de cas d'utilisation donne une vision globale du comportement fonctionnel d'un
système logiciel.
Dans les figures qui suivent, nous présenterons les cas d’utilisation qui mettent en évidence les
principales fonctionnalités de chaque acteur dans le système.
 25

Diagramme de cas d'utilisation d'acteur «Administrateur»

Figure 3 : Diagramme de cas d’utilisation d’acteur administrateur.

 26

Diagramme de cas d’utilisation d’acteur «Étudiant»

Figure 4 : Diagramme de cas d’utilisation d’acteur étudiant.

Diagramme de cas d'utilisation d'acteur «Enseignant»

Figure 5 : Diagramme de cas d'utilisation d'acteur enseignant.

 27

Diagramme de cas d'utilisation d'acteur «Membre du personnel»

Figure 6 : Diagramme de cas d'utilisation d'acteur membre du personnel.

Diagramme de séquence

Pour mieux concrétiser les interactions entre les acteurs du système vis-à-vis de l’application et la
base de données, nous sommes amenés à traduire nos scénarios en diagrammes de séquence.
Les diagrammes de séquence servent à illustrer les cas d’utilisation.
Ils permettent de représenter des collaborations entre les objets selon un point de vue temporel, on
y met l'accent sur la chronologie des envois des messages.

Fiche de description « Authentification » :

Sommaire d’identification :

 Titre : Authentification.

 Objectif : Permettre à chaque utilisateur de l’application, de s’authentifier vers ses rôles,

à travers un login et mot de passe.

 Acteurs : administrateur – système.

Description des enchainements :

 28

 Enchainements

 Scenario :

1. Saisie le login et mot de passe.

2. Envoyer login et mot de passe.

3. Traitement des informations envoyées.

4. En cas d’erreur, l’authentification est rejetée.

5. Si non, redirection d’utilisateur vers ses rôles.

Tableau 4 : Description textuel d'authentification

Figure 7 : Diagramme de séquence authentification

 29

Fiche de description « Inscription d’un étudiant » :

Sommaire d’identification :

 Titre : Inscription d’un étudiant.

 Objectif : Permettre à l’administration d’ajouter toutes les informations concernant un

étudiant et l’affectation de ce dernier dans une niveau précis .

 Acteurs : administrateur – système.

Description des enchainements :

 Pré conditions :

 Authentification.

 L’inscription d’un élève doit répondre aux conditions d’inscription établie par

la direction.

 Enchainements :

 Scenario :

1. Saisie les informations de l’étudiant.

2. Contrôle des données en temps réel en cas de duplication.

3. Validation de la saisie.

4. Traitement des informations envoyé.

5. En cas d’une anomalie, l’inscription est rejetée on précisant l’erreur effectuée.

6. Si non, l’inscription est effectuée avec succès avec redirection d’utilisateur vers la liste

d’élèves.

Tableau 5 : Description textuel d'inscription d'un étudiant

 30

Figure 8 : Diagramme de séquence d'inscription d'un etudiant.

 31

Fiche de description « Ajouter enseignant » :

Sommaire d’identification :

 Titre : Ajouter enseignant.

 Objectif : Permettre à l’administration d’ajouter toutes les informations concernant

le enseignant, y compris les informations personnelles, et la possibilité d’ajouter les

diplômes obtenus par le enseignant.

 Acteurs : administrateur – système.

Description des enchainements :

 Pré conditions :

 Authentification.

 L’ajout d’un enseignant doit répond aux conditions de recrutement établie par

la direction régionale.

 Enchainements :

 Scenario :

1. Saisie des informations concernant l’enseignant.

2. Contrôle des données en temps réel, en cas de duplication.

3. Validation de la saisie.

4. Traitement des informations envoyées.

5. En cas d’une anomalie, l’ajout est rejeté en précisant l’erreur effectuée.

6. Si non, l’ajout est effectué avec succès avec redirection d’utilisateur vers la liste des

enseignants.

Tableau 6 : Description textuel d'ajout d'un enseignant.

 32

Figure 9 : Diagramme de séquence d'ajout d'un enseignant .

 33

Fiche de description « Affectation des matières aux niveaux» :

Sommaire d’identification :

 Titre : Affectation des disciplines aux niveaux.

 Objectif : Permettre à l’administration d’affecter à chaque niveau ses disciplines.

 Acteurs : administrateur – système.

Description des enchainements :

 Pré conditions :

 Authentification.

 Enchainements :

 Scenario :

1. Choisir le niveau.

2. Choisir la matière.

4. Valider les choix.

5. En cas d’une erreur, l’ajout est rejeté en précisant l’erreur effectuée.

6. Si non, l’ajout est effectué avec succès.

Tableau 7 : Description textuel d'affectation des matières aux niveaux.

 34

Figure 10 : Diagramme de séquence d'affectation des matières aux niveaux.

 35

Fiche de description « Ajouter matière» :

Sommaire d’identification :

 Titre : Ajouter discipline.

 Objectif : Permettre à l’administration un ajout rapide du matière.

 Acteurs : administrateur – système.

Description des enchainements :

 Pré conditions :

 Authentification.

 Enchainements :

 Scenario :

1. Saisie de la matière.

2. Validation d’ajout.

3. Traitement des informations.

4. En cas d’erreur, l’ajout est annulé.

5. Si non, l’ajout est effectué avec succès avec redirection d’utilisateur vers la liste des

matières.

Tableau 8 : Description textuel d'ajout d'une matière

 36

Figure 11 : Diagramme de séquence d'ajout des matières

Diagramme de classes

Le diagramme de classe est une description statique du système focalisé sur le concept de classe et
d’association. Une classe représente un ensemble d’objets qui possèdent des propriétés similaires et
des comportements communs décrivant en terme d‘attributs et d’opérations.
Une association consiste à présenter les liens entre les instances de classe. Durant cette section,
nous allons présenter les diagrammes de classes entités à notre application.
 37

Diagramme de classe « gestion d’étudiants »

Figure 12 : Diagramme de classe gestion d’etudiant.

 38

Diagramme de classe « gestion des étudiants »

Figure 13 : Diagramme de classe gestion des enseignants .

Conclusion

Dans ce chapitre, nous avons conçu et documenté le code que nous devons produire. Dans cette
phase, toutes les questions concernant la manière de réaliser le système à développer ont été
élucidées. Le produit obtenu est un modèle graphique (ensemble de diagrammes) prêt à être codé.
Dans le chapitre suivant nous allons étudier en détails les outils et les langages utilisés durant la
phase de construction.
 39

Chapitre 5 :
Réalisation
 40

Introduction

Après avoir achevé l’étape d’analyse et conception de l’application, nous allons entamer dans ce
chapitre la partie réalisation et implémentation dans laquelle on s’assure que le système est prêt
pour être exploité par les utilisateurs finaux.

Description de l’environnement de développement intégré

La principale raison pour laquelle nous avant choisit un développement d’application Web
est l’accessibilité. Elle offre une grande mobilité et un accès facile à partir de n’importe quel
appareil mobile, n’importe où et à tout moment avec une simple connexion Internet.
La possibilité de ne pas compter sur un seul PC pour accéder aux informations que vous avez
stockées dans l’application est également un plus.

Environnement de développement technologies adoptées :

Système de gestion de base de données MYSQL :

MySQL est un système de gestion de bases de
données relationnelles (SGBDR) fonctionnant
sous Windows et Linux. Il fait partie des logiciels
de gestion de base des données les plus utilisées au
monde, autant par le grand public (applications
web principalement) que par des professionnels,
en concurrence avec Oracle, Informix et Microsoft
SQL Server.

Bootstrap :
Bootstrap est une collection d'outils utile à la création du design
(graphisme, animation et interactions avec la page dans le navigateur ...
etc. ...) de sites et d'applications web. C'est un ensemble qui contient des
codes HTML et CSS, des formulaires, boutons, outils de navigation et
autres éléments interactifs, ainsi que des extensions JavaScript en option.
 41

JavaScript :
JavaScript est un langage de programmation de scripts principalement
employé dans les pages web interactives et à ce titre est une partie
essentielle des applications web. Avec les technologies HTML et CSS,
JavaScript est parfois considéré comme l'une des technologies cœur du
World Wide Web.

JQUERY :
JQuery est un Framework développé en JavaScript qui permet notamment
de manipuler aisément la DOM, d'utiliser AJAX, de créer des animations...,
La vocation première de ce Framework est de gagner du temps dans le
développement des applications: « write less, do more ».

PHP :
PHP Hypertext Preprocessor est un "langage de programmation" libre,
principalement utilisé pour produire des pages Web dynamiques via un
serveur HTTP, mais pouvant également fonctionner comme n'importe quel
langage interprété de façon locale. PHP est un langage impératif orienté
objet.

HTML :
HTML HyperText Markup Language est le langage de balisage conçu pour
représenter les pages web. C’est un langage permettant d’écrire de
l’hypertexte, d’où son nom.

CSS :
CSS Cascading Style Sheets (feuilles de styles en cascade), servent à mettre en
forme des documents web, type page HTML ou XML. Par l'intermédiaire de
propriétés d'apparence (couleurs, bordures, polices, etc.) et de placement
(largeur, hauteur, côte à côte, dessus-dessous, etc.), le rendu d'une page web
peut être intégralement modifié sans aucun code supplémentaire dans la page
 42

web. Les feuilles de styles ont d'ailleurs pour objectif principal de dissocier le contenu de la page de
son apparence visuelle.

AJAX :
AJAX est une architecture informatique qui permet de
construire des applications Web et des sites web dynamiques
interactifs sur le poste client en se servant de différentes
technologies ajoutées aux navigateurs web entre 1995 et 2005.

PHPmyadmin :
PHPmyadmin est une application Web de gestion
pour les systèmes de gestion de base de données
MySQL réalisée principalement en PHP et distribuée
sous licence GNU GPL.

Les phases de développement :

Afin d'être en mesure d'avoir une méthodologie commune entre le client et la société de service
réalisant le développement, des modèles de cycle de vie ont été mis au point définissant les étapes
du développement ainsi que les documents à produire permettant de valider chacune des étapes
avant de passer à la suivante.
Pour notre projet nous avons adopté le modèle de cycle de vie en cascade. Ce modèle définit des
phases séquentielles à l'issue de chacune d’elles des documents sont produits pour en vérifier la
conformité avant de passer à la suivante.
 43

Figure 14 : Le modèle de cycle de vie en cascade.

Les scénarios de développement :

La formulation des scénarios de développement : C’est un processus créatif qui permet d’identifier
la façon participative et intégrée les tendances des systèmes de production.
 Le scénario 1 : « Mise à jour de la base de données : saisie, modification et
suppression » :
 Cette étape est préliminaire et obligatoire pour le démarrage de l’application. Le
magasinier/admin remplit les différents tableaux de la base pour un lancement primaire de
 44

la gestion de stock, utilisateurs, et droits d’accès. Nous pouvons modifier notre stock lors
d’une entrée d’un nouveau produit en l’ajoutant à la base.

Lorsqu’un produit est inutile on le supprime. Aussi lors de l’inscription d’un nouveau client nous
vérifions ces coordonnées et on peut le supprimer de notre base de données s’il n’appartient pas à
l’association.
 Le scénario2 : « Inscription » :

L’inscription est indépendante et très importante pour « la gestion des droits d’accès ». Il faut
attribuer à chaque utilisateur un mot de passe et un pseudo qui sera stocké dans la base de données
pour bien gérer les accès.
 Le scénario3 : « Authentification » :

L’authentification est la clé pour accéder aux différentes fonctionnalités de l’application.

 Le scénario 4 : « Consultation » :

Plusieurs utilisateurs peuvent consulter notre application, mais non pas avec le même degré
d’intervention .
En réalité, un Utilisateur normale (enseignent/étudiant/membre du personnel) peut:
 Consulter son profil personnel seulement;

Alors qu’un Administrateur peut :

 Consulter tous les profils de tous les utilisateurs ;
 Posséder l’accès à la base de données ;
 Contrôler tous les autres utilisateurs (ajouter, modifier, supprimer) ;
 Répondre aux questions des membres ;

Figure 15 : Schema d'évaluation des scenarios.

 45

Principales interfaces graphiques

La conception des interfaces de l’application est une étape très importante puisque toutes les
interactions avec le cœur de l’application passent à travers ces interfaces, nous doit alors guider
l’utilisateur avec les messages d’erreurs et de notification si besoin, ainsi présenter un système
complet. Dans cette partie, nous allons présenter quelques interfaces de l’application, répondant
aux recommandations ergonomiques de compatibilité, de guidage, de clarté, d’homogénéité et de
souplesse. Nous avons choisi l’administration comme utilisateur vu qu’il présente à travers ces
interactions la majeure partie des principales fonctionnalités de l’application.

Authentification

Pour l’authentification nous avants opté de créer quatre pages d’authentification, une pour
l’administration et la deuxième pour les enseignants, la troisième pour les élèves , et la dernière
pour les membre du personnel . Les quatre pages d’authentification permettent aux utilisateurs de
l’application de s’identifier par leurs login et leurs mots de passe. La figure ci-dessous représente la
page de l’authentification pour l’administration.

Figure 16 : Page d'authentification « administrateur »

Si les coordonnés de l’utilisateur sont erronées, le système affiche un message d’erreur et l’invite à
ressaisir ses coordonnés.
 46

Sinon l’utilisateur est redirigé vers sa page d’accueil, dans lequel on trouve un menu de tous les
modules de l’application et chacun de ces modules contient un ensemble des fonctionnalités sous
forme des sous menus relatifs à ce module.

Figure 17 : Page d'accueil

Inscription

Les figures suivantes est visualisée lorsque le choix de l’utilisateur, a porté sur le sous menu «
Ajouter un étudiant » du menu « Etudiants».
Cet écran permet à l’administration d’ajouter les informations d’un nouvel élève, y compris : les
informations personnelles comme la photo d’identité, le nom, prénom, cne (code national
d’élève)…
puis l’affectation d’élève vers le niveau d’étude.

Figure 18 : Page d'inscription des étudiants .

 47

Après la saisie de toutes ces informations, l’utilisateur clique sur le bouton ajouter, dans le cas
d’une erreur, l’enregistrement est annulé en précisant l’erreur effectuée.
L’utilisateur se redirige vers la liste d’élèves dont nous allons voir les détails dans la partie qui suit
par le sous menu « gérer les étudiants » du menu « Etudiants».

Liste des étudiants

Cette interface qui contient l’ensemble des élèves, avec un certain nombre d’options :
 La recherche rapide.
 La possibilité de voir toutes les informations concernant un étudiant.
 Modifier les données d’un étudiant.
 Supprimer un étudiant en bloquant son statut d’étudiant .

Figure 19 : Page de la liste des étudiants.

Ajouter élément

Cette interface permet à l’administration d’ajouter les matières d’une manière rapide et de les
affecter aux semestres et filières dont elles vont être enseignées.
Dans le cas où la matière existe, il suffit de choisir la matière et de lui ajouter à un semestre ou une
filière.
 48

Figure 20 : Page ajouter élément.

Affectation des éléments aux filières

Dans cette interface nous allons voir comment on peut affecter les éléments aux filières , en
précisant dans chaque filières le semestre ( A= premier semestre / B= deuxième semestre / C=
troisième semestre …). Ceci se fait à partir du sous menu « créer une classe » du menu « Classes ».
Pour afficher ces éléments on se dirige vers le sous menu « Classes ».

Figure 21 : Page affectation des éléments aux filières

 49

Conclusion

A travers ce chapitre, nous avons présenté la réalisation de l’application en justifiant nos choix
technologiques, en représentant quelques interfaces graphiques que nous avons jugées les plus
importantes.
 50

Conclusion
L’objectif de notre projet d’initiation était de concevoir et implémenter une
application de gestion d’école.

Le point de départ de la réalisation de ce projet était une récolte

d’informations nécessaires pour dresser un état de l’existant, présenter un
aperçu sur la problématique ainsi que l’architecture utilisée au sein des
réseaux des établissements.

Par la suite, nous nous sommes intéressés à l’analyse et la spécification des

besoins qui nous a permis de distinguer les différents acteurs interagissant
avec l’application visée.
L’objectif de la partie suivante était la conception détaillée, dans laquelle
nous avons fixé la structure globale de l’application. Le dernier volet de
notre projet était la partie réalisation qui a été consacrée à la présentation
des outils du travail et les interfaces les plus significatives de notre
application.
L’apport de ce travail a été d’une importance très considérable. En effet, il
nous a permis : de suivre une méthodologie de travail bien étudiée,
d’approfondir nos connaissances dans le monde de développement des
applications .
La réalisation d’un tel projet, nous a permis d’apprendre et de toucher du
doigt une partie des divers aspects du métier de développeur et de celui du
concepteur.
 51

Webographie
Régis pouiller, (19 mai 2014), « Réalisation d'application Web simple avec Spring »

[Link]

Thomas Risberg, Rick Evans, Portia Tung « Développement d'une application MVC

Spring Framework étape par étape »

[Link]

Pankaj, (12 OCTOBRE 2016), « Spring MVC File Upload »

[Link]

Mkyong, (23 août 2011), « Spring security »

[Link]

Sivateja, (4 mai 2011), « Mapping et configuration des fichiers dans Hibernate »

[Link]

OpenClassrooms, (9 mars 2017), « Prenez en main Bootstrap »

[Link]

Agustin Camino, (17 Avril 2017), « SMS and MMS Notifications avec Java et Spring »

[Link]

Pierre Emmanuel, (2009), « Team Foundation Server »

[Link]

foundation-server-partie2-msbuild-tfsbuild/?page=page_6