Rapport Final Gestion Des Paiements Emines PDF

Rapport du projet informatique
Gestion des paiements des étudiants

EMINES
Année scolaire 2019/2020
Réalisé par : Encadré par :
 DOBAN Inza Soro

 BOUCHIKHI Réda
 ELBOURTIAA Houssam-Eddine Clients :

 TALIBI Ayoub
 AIT HADOUCH Khadija
 BOUCHIKHI Réda
Table des matières
I. INTRODUCTION : ...................................................................................................................................................... 5
II. CAHIER DE CHARGE .................................................................................................................................................. 6
1. INTRODUCTION : ....................................................................................................................................................... 6
2. DESCRIPTION DU CONTEXTE GENERAL DU PROJET ............................................................................................................... 6
 Contexte général du projet :.............................................................................................................................. 6
 Description de l’entreprise : .............................................................................................................................. 6
 Description des clients : .................................................................................................................................... 6
 Besoins fonctionnels : ....................................................................................................................................... 7
 Les utilisateurs : ................................................................................................................................................ 7
 Les contraintes ................................................................................................................................................. 8
 La solution proposée : ....................................................................................................................................... 8
III. DESCRIPTION FONCTIONNELLE : ............................................................................................................................... 8
1. MODULE/FONCTIONNALITE : ....................................................................................................................................... 8
 L’authentification : ........................................................................................................................................... 8
 Gestion des étudiants : ..................................................................................................................................... 9
 Gestion des reçus : ............................................................................................................................................ 9
2. LES ACTEURS : .......................................................................................................................................................... 9
3. MATRICE ACTEURS /FONCTIONNALITES : ....................................................................................................................... 10
4. LES CAS D’UTILISATION : ............................................................................................................................................ 11
IV. DESCRIPTION TECHNIQUE : ................................................................................................................................ 12
5. ARCHITECTURE GLOBALE : ......................................................................................................................................... 12

6. MODELISATION DES DONNEES : .................................................................................................................................. 13
 Diagramme de classe : .................................................................................................................................... 13
 Diagramme de séquence :............................................................................................................................... 14
V. REALISATION : ........................................................................................................................................................ 17
1. CHOIX TECHNIQUE : ................................................................................................................................................. 17
 SGBD : MySQL :............................................................................................................................................... 17
 Langages : ...................................................................................................................................................... 17
 Librairies :....................................................................................................................................................... 19
2. ARCHITECTURE MODULAIRE DU PROGRAMME : ............................................................................................................... 20
3. LES SPECIFICATIONS DU PROGRAMME ET LES SOUS-PROGRAMMES: ...................................................................................... 20
 LA PARTIE DE LA BASE DE DONNEES : ............................................................................................................................ 20
 LA CONNEXION EN PHP : .......................................................................................................................................... 21
VI. EXPERIMENTATION : .......................................................................................................................................... 23
1. AUTHENTIFICATION : ................................................................................................................................................ 23
2
Gestion Paiements EMINES

2. PAGE D’ACCUEIL : .................................................................................................................................................... 24
O ADMINISTRATEUR : .................................................................................................................................................. 24
....................................................................................................................................................................................... 27
 UTILISATEUR : ........................................................................................................................................................ 28
VII. CONCLUSION :.................................................................................................................................................... 31
VIII. BIBLIOGRAPHIE: ................................................................................................................................................. 32
1. PHP & MYSQL : ..................................................................................................................................................... 32
2. HTML / CSS: ........................................................................................................................................................ 32

Table de figures :
FIGURE 1:DIAGRAMME DE GANTT PROJET GPPE ............................................................................................................... 5
FIGURE 2:MATRICE ACTEURS/FONCTIONNALITES ............................................................................................................ 10
FIGURE 3: DIAGRAMME DES CAS D'UTILISATION ............................................................................................................. 11
FIGURE 4:ARCHITECTURE GLOBALE DU PROJET ............................................................................................................... 12
FIGURE 5:DIAGRAMME DE CLASSE .................................................................................................................................. 13
FIGURE 6:DIAGRAMME DE SEQUENCE ADMINISTRATEUR................................................................................................ 14
FIGURE 7:DIAGRAMME DE SEQUENCE UTILISATEUR ........................................................................................................ 15
FIGURE 8:MAQUETTE ADOBE XD ..................................................................................................................................... 16
FIGURE 9:ARCHITECTURE MODULAIRE DU PROGRAMME ................................................................................................ 20
FIGURE 10:STRUCTURE DE LA BASE DE DONNEES ............................................................................................................ 20
FIGURE 11:MODELE PHYSIQUE DES DONNEES ...............................................................ERROR! BOOKMARK NOT DEFINED.
FIGURE 12:SCRIPT CONNEXION AVEC LA BASE DE DONNEES ........................................................................................... 21
FIGURE 13:REQUETE SQL EN PHP .................................................................................................................................... 22
FIGURE 14:FORMULAIRE REÇU ........................................................................................................................................ 22
FIGURE 15:TABLEAU D’AFFICHAGE DANS L’APPLICATION................................................................................................. 23
FIGURE 16:PAGE DE CONNEXION .................................................................................................................................... 23
FIGURE 17:PAGE DE CONSULTATION ............................................................................................................................... 24
FIGURE 18 :L’HISTOGRAMME DE REPARTITION DES ETUDIANTS SELON LES FRAIS DE SCOLARITE ..................................... 24
FIGURE 19:DIAGRAMME DES BOURSES ........................................................................................................................... 25
FIGURE 20: TABLEAU D’INFORMATIONS .......................................................................................................................... 25
FIGURE 21:LEGENDE DES COULEURS ............................................................................................................................... 25
FIGURE 22:FORMULAIRE DE MODIFICATION.................................................................................................................... 26
FIGURE 23:TABLEAU DE LA GESTION DES PAIEMENTS...................................................................................................... 26
FIGURE 24:TABLEAU MODIFIER/SUPPRIMER ................................................................................................................... 26
FIGURE 25:MESSAGE DE VERIFICATION ........................................................................................................................... 26
FIGURE 26:TABLEAU DE GESTION DES REÇUS .................................................................................................................. 27
FIGURE 27:FORMULAIRE POUR AJOUTER UN REÇU ......................................................................................................... 27
FIGURE 28:PAGE DE LA LISTE DES REÇUS ......................................................................................................................... 27
FIGURE 29:MODELE DE REÇU .......................................................................................................................................... 28
FIGURE 30:SCRIPT CONNEXION ....................................................................................................................................... 32
FIGURE 31:SCRIPT REÇU PDF ........................................................................................................................................... 33
FIGURE 32:SCRIPT LDAP .................................................................................................................................................. 33

I. Introduction :
Dans le cadre du projet informatique, nous sommes amenés à conduire un travail complet en
autonomie à travers un projet à finalité professionnelle, en effet on devra satisfaire le besoin de
notre client et répondre à ses attentes. Nous avons opté pour la réalisation d’une plateforme dédiée
à l’EMINES, qui sera l’entreprise avec laquelle nous serons mis en contact. Ce travail est
particulièrement basé sur la mise en œuvre d’une application qui véhicule les paiements au sein de
l’entreprise, donc par le biais de ce projet, nous comptons lever le défi d’améliorer le processus de la
gestion des encaissements à l’EMINES.
A l’encontre des autres projets, nous avons deux clients, qui agissent sur deux domaines tout
à fait différents, ainsi économique et informatique, c’est pour cela que nous serons sous la
contrainte de bâtir une plateforme solide de tous les niveaux pour qu’elle soit à la fin digne de leur
confiance.
Dans les lignes suivantes, nous allons détailler la partie analytique tout en étant le plus précis
possible pour que le lecteur soit éclairé sur les différentes fonctionnalités de notre application et
pour qu’il comprenne ses enjeux.
La figure ci-dessous représente le diagramme de Gantt de notre projet, ce qui nous a permis
de bien planifier le travail.
Figure 1:diagramme de Gantt Projet GPPE

II. Cahier de charge
1. Introduction :
Dans le cadre de l’enseignement de l’informatique, nous serions amenés à réaliser un projet vers la fin de
chaque semestre. Cette année nous avons l’opportunité de travailler sur un projet réel pour répondre aux
attentes de notre client.
Il s’agit du dépôt d’une application pour aider à la gestion des flux informationnels liés à la gestion des
encaissements à l’EMINES
2. Description du contexte général du projet
 Contexte général du projet :
Face à une difficulté de gestion des paiements des étudiants ,au sein de l’EMINES – School of Industrial
Management, l’assistante de la direction, qui assure les encaissements des frais de scolarité,
d’hébergement et de restauration, est dans le besoin d'une plateforme de gestion pour faciliter la saisie
des informations relatives aux paiements.
Notre projet : « Gestion des paiements des étudiants Emines », est alors une plateforme sous forme
d’une application Web qui facilitera la tâche au responsable qui aura la possibilité de consulter toutes les
données des étudiants tout en ayant une possibilité d'imprimer un reçu d'une manière automatique tout
en ajustant les informations du paiement.
 Description de l’entreprise :
L’EMINES - School of Industrial Management - a pour vocation de former des ingénieurs, des diplômes
maîtrisant les savoirs et savoir-faire scientifiques et techniques de base, et préparés à devenir les
managers des entreprises nationales et internationales.
L'EMINES comprend plusieurs départements, entre autres le département financier; qui a pour rôle la
gestion des paiement, donc nous seront principalement en contact direct avec ce dernier pour répondre à
ses attentes.
 Description des clients :

Notre 1er client est Mme Khadija Ait Hadouch, l’assistante de la direction générale de l’Emines school of
Industrial Management, ; elle est la responsable de toutes les transactions qui se déroulent au sein de
l'EMINES ,et notre second client est Mr.Reda Bouchikhi qui est un Ingénieur Exploitation IT, et Chargé de
mission d'enseignement IT chez Université Mohammed VI Polytechnique., Il occupe récemment le poste
de responsable de logistique chez l'Emines.

3. Introduction au problème posé :
Etant donné que le nombre des étudiants et des dossiers traités ne cesse pas d'augmenter, la gestion
des paiements devient un "casse-tête" pour les responsables. En effet, un traitement manuel de tous les
dossiers ainsi que la gestion du temps du travail passé sur les dossiers, ne sont réalisés que par une
personne.
D'autre part, la saisie d'un reçu pose également un problème vu que le processus n’est en quelque
sorte pas intégré au niveau du système. D’où la complexité d’avoir un suivi complet des différentes
factures ainsi que l’archivage des paiements
Finalement, le souci repose principalement sur l’automatisation de quelques processus et rendre la

tache de gestion sur tous les niveaux plus accessibles.
4. Fonctionnalités demandées :
 Besoins fonctionnels :
Avant de détailler les différentes fonctionnalités ,notre principale ambition s'incarne dans le fait qu'on
prévoit concevoir une application automatisée , c'est à dire que le responsable va occuper juste la fonction
de la rectification des données; A titre d'exemple, quant aux frais de scolarités , on essaiera de lier
l'application de la simulation de bourse, si c'est possible, à notre plateforme pour éviter la saisie manuelle ,
donc il reste juste la modification des information des personnes qui n'ont pas les même résultats.
Les fonctionnalités de l’application conformément aux attentes notre client est :
- Saisir les données (nom, prénom du parent et de l’élève ; le montant) concernant le paiement de frais de
scolarité, restauration et de logement automatiquement.
-Générer et imprimer automatique des reçus de paiement
-Calculer des frais de scolarité, restauration et de logement (Montant et reste au fur et à mesure).
 Les utilisateurs :
Madame Khadija AIT HADOUCH et les caissières : la saisie des données, l’impression des reçus de
paiement et l’accès aux frais de scolarité, restauration et de logement.
Monsieur Nicolas CHEIMANOFF : l’accès aux frais de scolarité, restauration et de logement.

 Les contraintes
Au sein de la réalisation du projet, il y a plusieurs contraintes qu’on peut éventuellement

affronter comme :
 La nécessité de deux interfaces WEB une pour administrateur et l’autre pour les utilisateurs.
 La complexité au niveau de la variété de type de paiement : scolarité, logement, restauration avec
des pourcentages de bourses différents, ainsi le grand nombre des étudiants au sein de l’EMINES.
 La complexité de lier la base des données à l’application Web.
 Autoformation au niveau de plusieurs langages : PHP, Ldap, HTML/CSS.
 Le manque du temps.
 Etude de l’existant :
Jusqu’à présent Madame Khadija saisie et génère les données d’une façon manuelle à l’aide d’un Excel, et
elle ne dispose d’aucun outils informatique qui lui facilite la tâche et lui permet de gérer facilement les
paiements, ainsi qu’imprimer les reçues automatiquement.
 La solution proposée :
Dans l’intention de gérer les paiements de scolarité, logement et de restauration des étudiants de
l’EMINES, on propose une plateforme qui facilite à l’administrateur de saisir les données de paiements de
chaque étudiant, afin de générer et imprimer les reçus d’une manière automatique. Qui sera une
alternative de la méthode actuelle qui consiste à saisir et générer les données manuellement sur des
feuilles d’EXCEL. Dès lors la solution proposée va minimiser le temps d’entrée les données ainsi de les
sauvegarder dans une base de données.
III. Description fonctionnelle :

1. Module/Fonctionnalité :
Notre plateforme servira à satisfaire les fonctionnalités suivantes :
 L’authentification :
Mettre en place une authentification pour renforcer la sécurité des comptes. Cette authentification
consiste à exiger deux méthodes d'identification pour se connecter à votre compte : vos identifiants de
connexion (le mail) ainsi qu'un mot de passe unique. Ensuite, l’interface vérifiera les données saisies par
l’utilisateur afin de déterminer ses accessibilités (un administrateur ou un consultant). Dans la suite,
chaque utilisateur va consulter sa propre interface en fonction de ses accessibilités.

 Gestion des étudiants :
Les données d’authentification des utilisateurs seront vérifiées à partir de l’annuaire LDAP. S’il est
administrateur il aura le droit de modifier, ajouter ou supprimer les données , sinon pour un étudiant il n’a
le droit qu’à consulter ses propres données.
 Gestion des paiements :
Sur l’interface administrateur, celui-ci saisira toutes les données des paiements de chaque étudiant (les
frais de scolarité, le montant payé, méthode de paiement, numéro de compte …) au niveau de l’interface.
Ensuite, les informations vont être stockées dans la base de données qui est liée directement à notre
plateforme. L’administrateur aura le droit de modifier et de supprimer les données après leurs
enregistrements.
Sur l’interface consultant, l’étudiant a le seul droit de consulter ses propres informations de paiement,
et ne peut ni effectuer des modifications ni consulter les données des autres étudiants.
 Gestion des reçus :

L’application WEB sert à générer les reçus d’une manière automatique, pour ce faire, la plateforme va
récupérer les données nécessaires stockées dans la base de données et les implémenter dans les reçus
pour pouvoir les générer et les imprimer après qu’ils soient consultés par l’administrateur et modifiés en
cas d’erreur. Le consultant n’a droit qu’imprimer ses propres reçues.
2. Les acteurs :
Notre plateforme est utilisée par deux types d’acteurs et chacun d’entre eux a accès à des
fonctionnalités différentes :
 L’administrateur (Madame Khadija AIT HADOUCH) : ses accessibilités sont bien détaillées dans la
partie des fonctionnalités.
 Le consultant (L’étudiant) : a seulement le droit de consulter ses propres données en utilisant
l’interface du consultant, et pourra aussi imprimer ses reçus.

3. Matrice Acteurs /Fonctionnalités :
Acteurs
Administrateur Etudiant
Fonctionnalités
Authentification
Accès a la plateforme X X
Authentification X X
Gestion des étudiants
Consultation de ses propres données X
Récupération /Consultation des données X
personnelles de chaque étudiant
Gestion des paiements
Consultation de ses propres paiements X
Consultation des paiements personnels de X
chaque étudiant
Modification des X
paiements/Suppression/Insertion
consultation de ses propres montants X
restants
Consultation des montants restants de tous X

les étudiants
Gestion des reçus
visualisation des reçus de paiements X X
Modification de la structure des reçus X
L'impression des reçus X X
Figure 2:matrice acteurs/fonctionnalités
10

4. Les cas d’utilisation :
Figure 3: diagramme des cas d'utilisation
 Cas d’utilisation 1 : s’authentifier, c’est la première fonctionnalité que l’utilisateur doit effectuer pour
avoir accès au site WEB.
 Package 1 : gestion des étudiants :
o Cas d’utilisation 2 : Récupération des données de LDAP, cette fonctionnalité permet à
l’administrateur de récupérer les données personnelles de chaque étudiant à partir du serveur
LDAP, ainsi qu’effectuer des recherches afin de filtrer ces derniers.
o Cas d’utilisation 3 : Consultation des données, cette fonctionnalité donne à l’utilisateur l’accès
à ses propres données (le cas du consultant) ou bien à toutes les données (le cas de
l’administrateur).
 Package 2 : gestion des paiements :
o Cas d’utilisation 4 : saisir les données des paiements, cette fonctionnalité permet à
l’administrateur d’insérer les données des paiements de chaque étudiant dans une
11

base de données lier à la plateforme via l’interface administrateur, ainsi de les modifier ou les
supprimer.
o Cas d’utilisation 5 : consultation des données de paiement, cette fonctionnalité permet à

l’utilisateur de consulter les paiements (si c’est l’étudiant qui consulte les données, donc il va
consulter ses propres données, si c’est l’administrateur qui consulte les données, il aura l’accès
à toutes les données.)
 Cas d’utilisation 6 : Imprimer les reçus, cette fonctionnalité permet aux utilisateurs d’imprimer les
reçus via l’application. (L’administrateur a le droit d’imprimer les reçus de tous les étudiants.
L’étudiant ne peut imprimer que ses propres reçus).
IV. Description technique :
5. Architecture globale :
Figure 4:architecture globale du projet
12

L’image ci-dessus représente l’architecture globale de notre projet. L’événement de début est
l’authentification, suivi d’un événement intermédiaire qui sert à déterminer si l’utilisateur est un
administrateur ou un consultant avant d’accéder à la session correspondante.
Comme vous pouvez le constatez, on aura une base de données principale pour notre application web qui sera
l’hôte de toutes les données qui circulent. En plus d’un serveur LDAP, duquel on va extraire les détails relatifs
aux étudiants de l’EMINES. Quant à la saisie des informations, elle sera faite par Madame Khadija.
L’impression des reçus sera la dernière étape après la saisie des informations, ils seront archivés et mis à la
disposition de l’administrateur à tout moment.
6. Modélisation des données :

 Diagramme de classe :
Notre diagramme de classe englobe l’ensemble des données de notre projet montrant la structure de notre
système de gestion des paiements étudiants EMINES ainsi ce diagramme montre clairement les différentes
relations entre les objets intervenants dans le processus de gestion.
Figure 5:diagramme de classe
13

 Diagramme de séquence :
Afin de modéliser les traitements effectués par l’application web, on a établi le diagramme de séquence qui
représente les différentes interactions entre les acteurs et le système selon un ordre chronologique.
Pour bien comprendre sa structure, on a divisé le diagramme en deux sous-diagrammes ; le premier dont
l’acteur principal est l’administrateur et le deuxième est lié à l’utilisateur.
a. Administrateur
Figure 6:diagramme de séquence administrateur
L’administrateur commence tout d’abord par s’authentifier. Après la vérification des données saisies par ce
dernier, l’application affiche l’interface administrateur. Cette interface permet le remplissage de la base de
données ainsi que la modification et l’affichage des différentes informations stockées dans cette base.
Après avoir établi les différentes modifications, l’administrateur peut se déconnecter.
14

b. Consultant :
Figure 7:diagramme de séquence utilisateur
Le consultant peut avoir accès à l’application web via « l’interface consultant » en s’authentifiant en premier
lieu. La différence entre « l’interface administrateur » et « l’interface consultant » est le fait que la deuxième
ne permet à son utilisateur que la consultation de ses propres données sans pouvoir les modifier.
Après avoir consulté et visualisé les différentes informations, le consultant se déconnecte de l’application web.
15

 Maquette :
Avant de se pencher à mettre en œuvre la réalisation de la plateforme, il est indéniable de réaliser un

prototype de la maquette afin de de schématiser les différentes fonctionnalités de l’application web. Voici le
model que nous avons conçus :
Le lien suivant permet l’accès à notre conception de l’application « Gestion des paiements des étudiants
EMINES » :
https://xd.adobe.com/spec/ed8763e5-de7d-44ed-4cbc-f0a3fb879fe0-9bb6/
Figure 8:maquette adobe XD
16

V. Réalisation :
1. Choix technique :
 SGBD : MySQL :
Nous avons choisi MySQL comme Système de Gestion de Base de Données. En effet, MySQL est la base de
données open source embarquée la plus populaire au monde qui donne une satisfaction totale pour ce que
l'on en attend que ce soit sauvegarde, modification et manipulation des données. Le couple PHP/MySQL est
très utilisé par les sites Web et les applications web et il est proposé par la majorité des hébergeurs. On a alors
opté pour ce SGBD du fait qu’il est facilement interrogeable via PHP et facilement administré avec
PhpMyAdmin. C’est aussi une solution très courante en hébergement public avec une facilité de déploiement
et de prise en main. Pour gérer notre base de données MYSQL sur un serveur PHP, on a choisi PhpMyAdmin
qui est un outil qui nous permet de visualiser rapidement l'état de notre base de données ainsi que de la
modifier, sans avoir à écrire de requêtes SQL, et ceci grâce à une interface web. Cette plateforme pratique
permet d'exécuter très facilement des requêtes comme les créations de table de données, insertions, mises à
jour, suppressions et modifications de structure de la base de données, ainsi que l'attribution et la révocation
de droits et l'import/export. Ce système permet de sauvegarder commodément une base de données sous
forme de fichier .sql et d'y transférer ses données.
 Langages :
a. PHP :
Définition :
Hypertext Preprocessor, plus connu sous son sigle PHP, est un langage de programmation libre, principalement
utilisé pour produire des pages Web dynamiques via un serveur HTTP. PHP est un langage impératif orienté
objet. Il s'agit d'un langage de script interprété côté serveur.
Il est considéré comme une des bases de la création de sites web dits dynamiques mais également des
applications web. PHP a permis de créer un grand nombre de sites web célèbres, comme Facebook, Wikipédia,
etc.
Justification du choix :
On a été amené, dans notre projet informatique, à créer une application Web dynamique. Pour ceci, on a
décidé d’utiliser le langage PhP, c’est un langage de programmation rapide, libre et gratuit .il est aussi simple
d’apprentissage et ne nécessite pas de compilation ni d’utilisation de balises. En outre, Le PHP gère très bien,
depuis les origines, les requêtes SQL. On peut donc facilement écrire des programmes qui affichent des
données extraites de bases SQL, ou qui stockent des données postées par un formulaire dans une table SQL.
17

b. JavaScript :
Définition :
JavaScript (« JS » en abrégé) est un langage de programmation dynamique complet qui, appliqué à un
document HTML, peut fournir une interactivité dynamique sur les sites Web.
Avec les technologies HTML et CSS, JavaScript est parfois considéré comme l'une des technologies cœur
du World Wide Web5. Le langage JavaScript permet des pages web interactives, et à ce titre est une partie
essentielle des applications web. Une grande majorité des sites web l'utilisent6, et la majorité des navigateurs
web disposent d'un moteur JavaScript dédié pour l'interpréter, indépendamment des considérations de
sécurité qui peuvent se poser le cas échéant.
On a eu recours au langage Javascript au sein de notre code pour réaliser quelques fonctionnalités qui nous
ont posés des problèmes en PHP. JavaScript est, en fait, un langage de programmation de scripts
principalement employé dans les pages web interactives. Le JavaScript peut à la fois être utilisé côté client,
c’est-à-dire interprété par le navigateur web de l’internaute, et côté serveur avec l’utilisation de Node.js. Le
JavaScript est le langage de prédilection pour interagir avec le HTML permettant ainsi d’apporter du
dynamisme à l’intérieur des pages web.
c. HTML /CSS :
Définition :
Le HTML est un langage qui a été créé en 1991. Les sigles « HTML » sont l’abréviation de « HyperText Markup
Language » ou « langage de balisage hypertexte » en français.
Le HTML est donc un langage de balisage, c’est-à-dire un langage qui va nous permettre de définir les
différents contenus d’une page.
Le CSS a été créé en 1996, soit 5 ans après le HTML. Les sigles « CSS » sont l’abréviation de « Cascading
StyleSheets » ou « feuilles de styles en cascade » en français.
Le CSS vient résoudre un problème bien différent du HTML : en effet, le HTML sert à définir les différents
éléments d’une page, à leur donner du sens. Le CSS, lui, va servir à mettre en forme les différents contenus
définis par le HTML en leur appliquant des styles.
Le HTML va donc créer la structure des pages tandis que le CSS va nous permettre de modifier l’apparence des
contenus de la page.
18

En ce qui concerne le design du site, on a eu recours au langage HTML et CSS, qui sont deux véritables
standards. HTML est le langage de description de documents. Le balisage HTML est incorporé dans le texte du
document et est interprété par un navigateur Web. Tandis que le CSS est un système destiné à mettre en
forme les contenus Rapport | projet informatique 16 Records Management de pages Web. La partie CSS d'un
document Web se contente de définir les différents styles de textes ou de blocs qui seront utilisés pour la mise
en forme. Les codes HTML et CSS sont, en fait, séparés. L'avantage principal de cette séparation est de faciliter
la maintenance du site, c'est-à-dire ses capacités d'évolution dans le temps.
 Librairies :
a. Serveur : Apache :
Nous avons choisi le logiciel Apache (Apache HTTP Server). En fait, c’est un serveur HTTP Open Source et
gratuit largement utilisé pour héberger les applications Web. C’est un logiciel fiable et stable avec
différentes fonctionnalités implantées comme la possibilité d'utiliser un unique serveur Internet pour
héberger plusieurs sites, l'utilisation de différents langages et la flexibilité grâce à sa structure basée sur
des modules.
b. Librairie TCPDF :
TCPDF est une classe PHP, d'utilisation répandue, permettant de créer des documents PDF. Elle est libre
et open source.
TCPDF est actuellement la seule bibliothèque PHP de génération PDF offrant un support complet de
l'encodage UTF-8 et des langues s'écrivant de droite à gauche, incluant le texte bidirectionnel.
19

2. Architecture modulaire du programme :
Figure 9:architecture modulaire du programme
3. Les spécifications du programme et les sous-programmes:
 La partie de la base de données :

Création de la base de données :
Nous avons créé notre base de données dans MYSQL en utilisant l’interface développée par PHP
« phpMyAdmin », avec les différentes tables et les relations étrangères entre eux. La figure ci-dessous
illustre la structure de notre base de données.
Figure 10:structure de la base de données
20

Nous avons par la suite utilisé les index pour fixer les différentes associations. La figure ci-dessous montre le
MCD en utilisant le concepteur :
Figure 11 :modèle physique des données
 La connexion en PHP :
L'extension « MySQLi » est l’abréviation de MySQL Improved, c'est-à dire MySQL Amélioré. C’est un pilote
qui permet d'interfacer des programmes écrits dans le langage de programmation PHP avec les bases de
données MySQL, depuis la version 4.1.
Avant d’exécuter des requêtes sur la base de données, il faut tout d’abord se connecter avec notre serveur
SQL et si la connexion est interrompue alors le serveur nous enverra l’erreur. Pour se faire, il faut inclure les
instructions suivantes dans le code :
Figure12 : script connexion avec la base de données 21

Affichage, Stockage, Modification et Suppression :
Afin de manipuler les données de notre base SQL, nous devrons utiliser les requêtes de MYSQL, on les exécute
avec des instructions en PHP. Ces dernières nous facilitent la liaison entre notre application et la base de
données utilisée. Celle-là fonctionne avec l’utilisation des formulaires dans notre interface pour stocker et
modifier les données, et des tableaux pour l’affichage. Ces outils de front-end sont codés avec HTML et CSS.
Figure 12:requête SQL en PHP
Dans les scripts PHP, il faut stocker les requêtes dans des variables pour les exécuter avec la fonction de
l’extension MYSQLi « mysqli_query () ; » et s’il y a une erreur dans les requêtes, le code va nous informer en
envoyant un message d’erreur avec la fonction « mysqli_error() ; ».
Figure 13: formulaire reçu
22

Figure 14:tableau d’affichage dans l’application
VI. Expérimentation :
1. Authentification :
L’administrateur doit s’authentifier pour pouvoir accéder à l’application. Nous avons lié l’application à LDAP du
coup l’administrateur peut se connecter en utilisant Nom.Prénom et son mot de passe usuel de sa session.
Ainsi, Chaque utilisateur est dirigé vers sa propre session avec les fonctionnalités correspondantes.
:page de connexion
Figure 15 : interface d'authentification
23

2. Page d’accueil :
o Administrateur :
Une fois que l’administrateur s’authentifie, une interface contenant les options suivantes est affichée, en haut
à gauche.
a. Consultation :
Figure 16:Page de consultation
Cette page permet à l’administrateur de s’imprégner de l’évolution des frais de scolarité des étudiants, elle
comporte l’histogramme de répartition des étudiants selon les frais de scolarité, un diagramme des bourses et
un tableau des informations relatif à chaque étudiant :
Figure 17 :l’histogramme de répartition des étudiants selon les frais de scolarité
24

Figure 18:diagramme des bourses
Figure 19: tableau d’informations

b. Gestion des paiements :
Pour la gestion des frais, l’administrateur, dispose d’une barre de recherche et d’un tableau d’indicateur
coloré :
Vert a tout payé

Blue a payé une somme partielle
Orange Boursier(ne paye rien)
Rouge Alerte(n’a rien payé)
Figure 20:Legende des couleurs
25

Figure 20:tableau de la gestion des paiements
i. Modifier :
Lorsque l’administrateur clique sur

l’action, elle reçoit un formulaire pour
modifier les frais de scolarité, restauration
et logement.
Figure 21:formulaire de modification
ii. Supprimer :
Figure 22:Tableau modifier/supprimer
L’administrateur peut supprimer un étudiant. Cependant pour des

suppressions causées par une fausse manipulation un message de
vérification est envoyé à l’administratrice.
Figure 23:message de vérification

26

c. Gestion des reçus :
Cette fonctionnalité est de loin la plus importante de notre application, elle permet à la fois d’ajouter un reçu,
afficher, modifier et supprimer les reçus déjà existants.
L’administrateur clique sur Gestion des reçus à droite en haut de la page ,pour accéder à une page qui affiche
la liste des étudiants avec le bouton Find qui permet de parcourir la liste des reçus de l’étudiant choisi.
Figure 24:tableau de gestion des reçus
i. Ajouter un reçu :
L’administrateur peut créer un nouveau reçu en cliquant

sur le bouton ajouter en bas du tableau et en remplissant
ensuite le formulaire ci-contre :
ii. Bouton Find :

Une fois qu’il clique sur le bouton Find ,
l’administrateur accède à la page des reçus:
Figure 26:Formulaire pour ajouter un

reçu
Figure 25:page de la liste des reçus

27

iii. Affichage du reçu en format PDF:
L’affichage du reçu s’effectue en cliquant sur le reçue

en aperçu, voici un modèle de reçu :
Figure 27:modèle de reçu
 Utilisateur :
Nous avons réalisé une application web utilisateur dédiée aux étudiants de l’EMINES pour qu’ils puissent
vérifier à tout moment leur situation financière.
Dans la suite on détaillera les fonctionnalités de l’application utilisateur.
a. Authentification:
Idem pour l’utilisateur, il peut s’authentifier via LDAP dans la même page de connexion citée
précédemment (Figure 28).
28

b. Consultation:
Cette fois-ci l’utilisateur n’a pas accès à visualiser les données des autres ou les modifier. En fait, il est dirigé
vers sa page de consultation des données où il peut voir ses propres frais de scolarité, restauration, logement.
Ainsi que le total à payer, comme le présente la figure ci-dessous
Figure 29:page d'accueil utilisateur
c. Affichage des reçus :
La deuxième partie est dédiée l’affichage des reçus, chaque étudiant à le droit d’accéder à ses propres reçus.
29

Figure 30:afficghage des reçus
30

VII. Conclusion :
L’objectif de notre travail était de créer une application Web qui permet la gestion des paiements des
étudiants de l’EMINES-School of Industrial Management. En effet, nos clients cherchaient un moyen
traitement efficace des paiements des frais de scolarité, restauration, logement et surtout la génération
automatique du reçu de paiement.
Après l’authentification de l’administrateur, l’application lui permet de connaitre le statut, les
paiements des étudiants, d’enregistrer les nouveaux paiements et générer automatiquement les reçus. Nous
avons également relié notre application web à la base de données MySQL qui contient des tables avec toutes
les informations nécessaires sur les étudiants et qu’elle peut consulter et modifier à tout moment.
La réalisation de ce projet nous a permis de sentir à quoi ressemble le travail sur un projet réel et
avec un client réel, la présence d’un cahier de charge à respecter et des livrables à réaliser (analyse
fonctionnelle, analyse technique). Le travail en groupe, et la présence d’un encadrant et un client, nous ont
poussé à améliorer notre esprit d’écoute et de partage et le refus de l’échec. On a rencontré plusieurs
problèmes tout au long du projet qu’on a dû surmonter grâce à nos recherches et aux indications de notre
encadrant.
31

VIII. Bibliographie:
1. PHP & Mysql :

https://www.w3schools.com/php/php_mysql_connect.asp
https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-mysql
2. HTML / CSS:
https://fr.khanacademy.org/computing/computer-programming/html-css
https://www.w3schools.com/html/html_css.asp
3. LDAP :
http://igm.univ-mlv.fr/~dr/XPOSE2009/ldap/content/ldap_directory_service.html
IX. Annexe :
1. Création du diagramme de Gantt :
Afin de planifier notre projet, nous avons utilisé l’application GanttProject : https://www.ganttproject.biz/ b.
2. Création des diagrammes :
Afin de créer les diagrammes use case, diagramme de classe et diagramme de séquence nous avons utilisé
UML.
3. Architecture générale et architecture modulaire : Afin de modéliser l’architecture générale

et l’architecture modulaire, nous avons opté pour le logiciel Bizagi Modeler : https://bizagi-
modeler.fr.softonic.com/
4. Environnement de développement (IDE) :
Concernant tous les programmes que nous avons développés, nous avons travaillé avec l’IDE Netbeans (PHP,
HTML, CSS…).
5. Code source :
 Partie connexion MySQL :
Figure 31:Script connexion 32

 Génération du reçu en PDF :
Figure 32:Script reçu PDF
Figure 33:Script LDAP

33

Rapport Final Gestion Des Paiements Emines PDF

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

Rapport Final Gestion Des Paiements Emines PDF

Transféré par

Droits d'auteur :

Formats disponibles

Rapport du projet informatique

Gestion des paiements des étudiants

Année scolaire 2019/2020

Réalisé par : Encadré par :

 DOBAN Inza Soro

 ELBOURTIAA Houssam-Eddine Clients :

5. ARCHITECTURE GLOBALE : ......................................................................................................................................... 12

Gestion Paiements EMINES

Gestion Paiements EMINES

Gestion Paiements EMINES

Figure 1:diagramme de Gantt Projet GPPE

Gestion Paiements EMINES

2. Description du contexte général du projet

 Contexte général du projet :

 Description des clients :

Gestion Paiements EMINES

Finalement, le souci repose principalement sur l’automatisation de quelques processus et rendre la

Les fonctionnalités de l’application conformément aux attentes notre client est :

-Générer et imprimer automatique des reçus de paiement

Monsieur Nicolas CHEIMANOFF : l’accès aux frais de scolarité, restauration et de logement.

Gestion Paiements EMINES

Au sein de la réalisation du projet, il y a plusieurs contraintes qu’on peut éventuellement

III. Description fonctionnelle :

Notre plateforme servira à satisfaire les fonctionnalités suivantes :

Gestion Paiements EMINES

 Gestion des paiements :

 Gestion des reçus :

Gestion Paiements EMINES

Consultation des montants restants de tous X

Figure 2:matrice acteurs/fonctionnalités

Gestion Paiements EMINES

Figure 3: diagramme des cas d'utilisation

Gestion Paiements EMINES

o Cas d’utilisation 5 : consultation des données de paiement, cette fonctionnalité permet à

IV. Description technique :

Figure 4:architecture globale du projet

Gestion Paiements EMINES

6. Modélisation des données :

Figure 5:diagramme de classe

Gestion Paiements EMINES

Figure 6:diagramme de séquence administrateur

Après avoir établi les différentes modifications, l’administrateur peut se déconnecter.

Gestion Paiements EMINES

Figure 7:diagramme de séquence utilisateur

Gestion Paiements EMINES

Avant de se pencher à mettre en œuvre la réalisation de la plateforme, il est indéniable de réaliser un

Figure 8:maquette adobe XD

Gestion Paiements EMINES

Gestion Paiements EMINES

Gestion Paiements EMINES

Gestion Paiements EMINES

Figure 9:architecture modulaire du programme

3. Les spécifications du programme et les sous-programmes:

 La partie de la base de données :

Figure 10:structure de la base de données

Gestion Paiements EMINES

Figure 11 :modèle physique des données

Figure12 : script connexion avec la base de données 21

Gestion Paiements EMINES

Figure 12:requête SQL en PHP

Figure 13: formulaire reçu

Gestion Paiements EMINES

Figure 15 : interface d'authentification