Groupe Polytechnique Institut supérieur des

metier de l’energie
ISME

Rapport du projet informatique

THEME :
Conception et réalisation d’une application web pour
la gestion de PFEs

Réalisé par : Encadré par :

21505 Ismail Ahmed Bebekar Dr. Ahmed SEJAD
21509 Abdellahi Mohamed
21514 Sidi Abderrhmane
21531 Idoumou Moulay
21556 Saleck Abderrhmane

Année universitaire : 2022-2023

1
1

2
Contents
Conception et réalisation d’une application web pour la gestion de PFEs................................................................... 1
I. Introduction ............................................................................................................................................................... 5
 Objectif.................................................................................................................................................................. 5
II. 1ère phase : La conception ........................................................................................................................................ 7
1. Définition MCD .................................................................................................................................................... 8
Figure 1 MCD .......................................................................................................................................................... 9
2. Définition MLD .................................................................................................................................................. 11
Figure 2 MLD......................................................................................................................................................... 11
III. 2 éme phase : La réalisation ................................................................................................................................ 12
 Front-end : ........................................................................................................................................................... 12
 Back-end: ............................................................................................................................................................ 12
1. Définition HTML ................................................................................................................................................ 12
2. Définition CSS .................................................................................................................................................... 13
3. Définition JavaScript ........................................................................................................................................... 13
4. Définition MySQL .............................................................................................................................................. 14
5. PYTHON............................................................................................................................................................. 17
6. FLASK ................................................................................................................................................................ 17
IV. PROBELEMATIQUE ......................................................................................................................................... 18
V. LA PAGE D'ACCUEIL .......................................................................................................................................... 19

3
REMERCIEMENTS :

Ce document est le fruit de tant d'étude. Il nous donne l'occasion de remercier tous les enseignants de l'ISME
ayant participé d'une manière ou d'une autre à la réalisation de ce travail. Nos remerciements vont
particulièrement à notre directeur Dr Moustapha Moine qui a pu aménager son temps pour nous assurer
une bonne formation qui est un réalité une formation de qualité à l’ISME. Nos remerciements s'adressent
aussi à notre encadreur Mr. Ahmed Sejad qui nous a permis d'avoir une compétence à pouvoir créé cette
application. Ces mêmes remerciements vont également à l'endroit des parents,
amis(specificmenet mohamed loqmane 20323-ISMS) et camarades étudiants qui n'ont cessé de nous
soutenir dans la réalisation de ce travaill

4
 I. Introduction
Lorsqu'un étudiant termine ses études supérieures, il doit souvent réaliser un projet de fin d'études (PFE)
pour valider son diplôme. Cependant, la gestion de ces projets peut parfois poser des problèmes pour les
étudiants et l'administration de l'institut supérieur. C'est pourquoi l'adoption d'un programme de gestion de
projet peut aider à améliorer la qualité des projets, renforcer la réputation de l'institut, améliorer la
satisfaction des étudiants, augmenter le taux de réussite et améliorer la productivité des étudiants. Dans cette
optique, la création d'une application web de gestion de PFE peut offrir une solution efficace et pratique pour
tous les acteurs impliqués dans le processus de réalisation de ces projets. Dans ce contexte, cette étude se
propose d'explorer les avantages et les limites d'une telle application web pour la gestion des PFE dans les
instituts supérieurs

 Objectif
Les objectifs de l’application, se résument dans les questions suivantes:

 A quoi va servir l’application ?

 A qui rendra-t-elle service ?
 A quel besoins répondra-t-elle ?
 Qui sont les acteurs et que font-ils ?
 Quelles contraintes et difficultés sont à prévoir ?

En essayant de répondre à ces questions, nous avons identifié quelques objectifs que cette
application doit ‘satisfaire’, en rédigeant le cahier des charges suivant :
Le développement de l'application "Gestion des PFE et suivi de déroulement de Formation" a été
conçu exclusivement pour l'administration. Cette application permettra à l'administration de gérer
efficacement tous les aspects liés aux PFEs et aux programmes de formation.

L'application sera accessible uniquement à l'administration et les utilisateurs devront se connecter

en utilisant des identifiants et des mots de passe uniques. Toutes les informations liées aux PFEs,
aux groupes, aux mentors et aux formateurs seront stockées dans une base de données
sécurisée et facilement accessible par les administrateurs.

L'application permettra à l'administration de valider les PFEs et d'affecter les étudiants à leur
groupe et mentor respectif. Les administrateurs auront également la possibilité de nommer des
formateurs pour chaque groupe et de suivre la progression des étudiants tout au long du
programme de formation.

5
L'interface de l'application sera conviviale et intuitive pour l'administration, ce qui leur permettra de
naviguer facilement entre les différentes fonctionnalités et options de l'application. L'application
sera conçue pour être hautement sécurisée et protégera toutes les informations confidentielles
liées aux PFEs et aux programmes de formation.

En résumé, l'application "Gestion des PFE et suivi de déroulement de Formation" a été

développée pour répondre exclusivement aux besoins de l'administration. Elle offre une solution
efficace pour gérer toutes les informations liées aux PFEs et aux programmes de formation, tout
en étant facile à utiliser et hautement sécurisée.

6
II. 1ère phase : La conception
C'est une méthode systémique d'analyse et de conception des systèmes
d'information. Elle privilégie le système d'information en termes d'entité et de
relation pour aboutir à Un modèle cohérent de données. Elle nous permettra
d'avoir le Modèle Conceptuel de Données. Le modèle conceptuel de données
sert à formaliser la description des informations mémorisées par le système
d'information et qui présentent un intérêt pour l le domaine d'étude. Il permet
d'exprimer également les contraintes d'intégrité ainsi que les liens sémantiques
qui doivent être maintenus sur les données qui sont décrits par
les de gestion. Les concepts de base pour cette modélisation sont les suivants:

- le concept de propriété : il caractérise l'information élémentaire qui

doit êtremémorisée dans le système d'information;
- le concept d'entité : ce concept permet de conceptualiser dans le
système d'information des objets matériels ou immatériels qui ont un
intérêt pour le domaine considéré. Une entité définit une classe d'objets
caractérisée par un ensemble de propriétés élémentaires choisies de
manière à représenter une information particulière par rapport au
domaine considéré. Une occurrence d'entité doit être constituée d'une et
une seule occurrence de chacune des propriétés de l'entité. En d'autres
termes, une propriété ne peut pas être omise, ni répétée dans une
occurrence d'entité;
- L'identifiant : est une propriété particulière permettant de déterminer de façon

unique une occurrence d'entité;

-

7
- le concept de relation : il permet de conceptualiser les liens
sémantiques qui peuvent exister entre les occurrences d'entités et qui ont
un intérêt pour le domaine. Une relation est définie entre les entités;
- Le concept de cardinalité : ce concept permet d'associer à chaque lien
entre une entité et une relation une cardinalité minimale et une cardinalité
maximale. La cardinalité minimale indique le nombre minimum de fois
que toute occurrence d'entité peut participer à des occurrences de relations.
La cardinalité maximale indique le nombre maximal de fois que toute
occurrence d'entité peut participer à des occurrences de relation. Nous
pouvons résumer ces concepts par le schéma
de la figure 1.

1. MCD
schéma conceptuel de données, également appelé MCD pour modèle
conceptuel de données, estune représentation claire des données du
système d'information à concevoir. Cette représentationen outre figure les
relations entre ces données

8
Figure 1 MCD

9
7

10
2. MLD
Un modèle logique de données (MLD) est la représentation des données d'un
système d'information. Les données sont représentées en prenant en compte le
modèle technologique qui sera utilisée pour leur gestion. Par exemple : des
fichiers, une structure XML ou encore une basede données orientée objet.

Figure 2 MLD

11
III. 2 éme phase : La réalisation
La réalisation ce la phase dans la quelle on crée notre projet gestion des projets fin d’études

 Front-end :
✓ Html
✓ CSS
✓ Java Script.
 Back-end:
✓ MySQL
✓ Flask-MySQLdb fournit une connexion MySQL pour Flask.

1. Définition HTML
L’HyperText Markup Language, HTML, désigne un
type de langage informatique descriptif. Il s’agit plus
précisément d’un format de données utilisé dans
l’univers d’Internet pour la mise en forme des pages
Web. Il permet, entre autres, d’écrire de l’hypertexte,
mais aussi d’introduire des

ressources multimédias dans un contenu Développé par

le W3C ( WorldWide Web Consortium)et le WHATWG (Web Hypertext Application
Technology Working Group),.

Le format ou langage HTML est apparu dans les années 1990. Il a progressivement subi
desmodifications et propose depuis 2014 une version HTML5 plus aboutie.

L’HTML est ce qui permet à un créateur de sites Web de gérer la manière dont le contenu
de sespages Web va s’afficher sur un écran, via le navigateur.

12
 2. Définition CSS
Le CSS pour Cascading Style Sheets, est un langage
informatique utilisésur Internet pour la mise en forme
de fichiers et de pages HTML.
On le traduit en français par feuilles de style en
cascade.
Apparu dans les années 1990, le CSS se présente comme une alternativeà la
mise en forme via des balises, notamment HTML.
Un peu plus complexe à maîtriser, il permet un gain de temps
considérable dans la mise en forme d’une page web par rapport à ces
balises. Grâce au CSS, vous pouvez en effet appliquer des règles de
mise en forme (titrage, alignement, polices, couleurs, bordures, etc.) à
plusieurs documents simultanément.

3. Définition JavaScript

JavaScript désigne un langage de développement

informatique, et plus précisément un langage de script

orienté objet. On le retrouve principalement dans les pages Internet.
Il permet, entre autres, d’introduire sur une page web ou HTML des petites
animations ou des effets. Créé en 1995 par Brendan Eich, en même temps que la
technologie Java, le langage JavaScript se distingue des langages serveurs par le
fait que l’exécution des tâches est opérée par le navigateur lui-même, sur
l’ordinateur de l’utilisateur, et non sur le serveur web.
13
 Il s’active donc généralement sur le poste client plutôt que côté serveur.

4. Définition MySQL
. MySQL est un système de gestion de bases de données
relationnelles (SGBDR). Il est distribué sous une double
licence GPL et propriétaire. Il fait partie des logiciels de
gestion de base de données les plus utilisés au monde2, autant par le grand public
(applications web principalement) que par des professionnels, en concurrence avec
Oracle, PostgreSQL et Microsoft SQL Server. n nom vient du prénom de la fille du
cocréateur Michael Widenius, SQL fait référence au Structured Query Language, le
langage de requête utilisé.

MySQL AB a été acheté le 16 janvier 2008 par Sun Microsystems pour un milliard de
dollars américains3. En 2009, Sun Microsystems a été acquis par Oracle Corporation,
mettant entre les mains d'une même société les deux produits concurrents que sont
Oracle Database et MySQL. Ce rachat a été autorisé par la Commission européenne le
21 janvier 20104,5.

Depuis mai 2009, son créateur Michael Widenius a créé MariaDB (Maria est le prénom
de sa deuxième fille) pour continuer son développement en tant que projet Open Source.

MySQL est un serveur de bases de données relationnelles SQL développé dans un souci
de performances élevées en lecture, ce qui signifie qu'il est davantage orienté vers le
service de données déjà en place que vers celui de mises à jour fréquentes et fortement
sécurisées. Il est multi-thread et multi-utilisateur.

C'est un logiciel libre6, open source7, développé sous double licence selon qu'il est
distribué avec un produit libre ou avec un produit propriétaire. Dans ce dernier cas, la
licence est payante, sinon c'est la licence publique générale GNU (GPL) qui s'applique.
Un logiciel qui intègre du code MySQL ou intègre MySQL lors de son installation devra
14
donc être libre ou acquérir une licence payante. Cependant, si la base de données est
séparée du logiciel propriétaire qui ne fait qu'utiliser des API tierces (par exemple en C#
ou php), alors il n'y a pas besoin d'acquérir une licence payante MySQL. Ce type de
licence double est utilisé par d'autres produits comme le framework de développement
de logiciels Qt (pour les versions antérieures à la 4.5).

MySQL supporte deux langages informatiques, le langage de requête SQL et le SQL/PSM

(Persistent Stored Modules), une extension procédurale standardisée au SQL incluse dans
la norme SQL:20038. SQL/PSM, introduit dans la version 5 de MySQL, permet de
combiner des requêtes SQL et des instructions procédurales (boucles, conditions…), dans
le but de créer des traitements complexes destinés à être stockés sur le serveur de b

15
Figure 3: Base des donnes

16
5. PYTHON

Python est le langage de programmation open source le plus employépar les

informaticiens.

Ce langage s’est propulsé en tête de la gestiond’infrastructure, d’analyse de

données ou dans le domaine du développement de logiciels. En effet, parmi ses
qualités, Python permet notammentaux développeurs de se concentrer sur ce
qu’ils font plutôt que sur la manière dont ils le font.
Il a libéré les développeurs des contraintes de formes qui occupaient leur temps avec les
langagesplus anciens. Ainsi, développer du code avec Python est plus rapide qu’avec
d’autres langages.

6. FLASK

Flask est un framework web, c'est un module Python qui vous

permet de développer facilement des applications web. Il a un
noyau petit et facile à étendre : c'est un microframework qui
n'inclut pas d'ORM (Object Relational Manager) ou de telles
fonctionnalités.

Il a de nombreuses fonctionnalités intéressantes comme le routage

d'URL, le moteur de modèle. Il s'agit d'un framework d'application Web WSGI.

17
IV. PROBLEMATIQUE
la gestion du PFE peut être un défi pour les administrations universitaires, car elle
implique la coordination de plusieurs parties prenantes, notamment les étudiants, les
enseignants et les encadrants. Sans l'utilisation d'un outil de gestion de projet, les
administrateurs doivent gérer les tâches manuellement, ce qui peut prendre
beaucoup de temps et peut entraîner des erreurs.
Les problématiques de la gestion du PFE peuvent inclure des difficultés dans la
planification et l'organisation des tâches.
L'utilisation d'une application web personnalisée pour la gestion de projet peut aider à
résoudre ces problématiques. Elle offre une plateforme facile à utilisé ainsi que des
fonctionnalités de suivi et de rapport automatisées pour faciliter la gestion
administrative. Cela permet de gagner du temps, d'optimiser les ressources et
d'améliorer la qualité du PFE

18
 V. LA PAGE D'ACCUEIL
La page d'accueil comprend également un champ pour afficher les statistiques, qui permettent de
voir rapidement le nombre d'étudiants, de projets et d'encadrants. Il existe également des options
p Notre page d'accueil contient quatre champs principaux, qui sont l’étudiant, l’encadrant,
l'établissement et le projet. Lorsque l'un de ces champs est cliqué, un tableau s'affiche, avec des
fonctionnalités pour ajouter, modifier, supprimer et afficher les détails pertinents pour ce champ en
particulier.
En outre,notre page our le mode plein écran et le mode sombre.
L'utilisation de ces fonctionnalités peut aider à faciliter la gestion des projets de fin d'études en
permettant aux parties prenantes de visualiser et de gérer les détails des projets de manière
organisée et efficace. Cela peut contribuer à améliorer la qualité des projets de fin d'études et à
renforcer la réputation de l'établissement

19
VI. Conclusion :
En conclusion, la conception et la réalisation d'une application web pour la gestion
des PFEs sont essentielles pour assurer une gestion efficace des programmes de
formation et de tous les aspects liés aux PFEs. Cette application permet de
simplifier et d'automatiser les processus administratifs liés à la gestion des PFEs,
tels que la validation des PFEs, l'affectation des étudiants aux groupes et aux
encadrants, ainsi que le suivi de la progression des étudiants
En fin de compte, l'application web pour la gestion des PFEs permettra à
l'administration de gérer efficacement les programmes de formation et de garantir
que les étudiants sont correctement encadrés tout au long de leur PFE. Cela aura
un impact positif sur la qualité de la formation et permettra aux étudiants de
maximiser leur expérience de formation

20
 VII. BIBLIOGRAPHIE
http://glossaire.infowebmaster.fr/html/
https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1203277-css-cascading-style-sheets-
definition-traduction/
https://www.freecodecamp.org/news/what-is-javascript-definition-of-js/
https://www.futura-sciences.com/tech/definitions/internet-mysql-4640/
https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1445304-python-definition-et-
utilisation-de-ce-langage-informatique/
https://www.base-de-donnees.com/mcd/
https://www.smartmodel.ch/home/questce/mld
https://www.wearecom.fr/dictionnaire/page-daccueil/

https://openai.com/blog/chatgpt

https://fontawesome.com/icons

https://www.geeksforgeeks.org/autocomplete-
input-suggestion-using-python-and-flask/

https://tutorial101.blogspot.com/search/label/Pytho
n-Flask?m=1

21