Université Mohammed Premier ‫جـــامعة محــمد األول‬

Ecole Supérieure de Technologie ‫المدرسة العليا للتكنولوجيا وجدة‬

Département : Génie Informatique

Filière DUT : Informatique de Gestion

Projet de Fin d’Etude

Filière DUT : Informatique de Gestion

Présenté par :

AFRASSI Imane

EL ALI Meryem

Conception et réalisation d’un site web de gestion des notes

Encadré par : Pr. OUBRAHIM.Rachid

Année universitaire : 2022/2023

 REMERCIEMENT

En préambule à ce mémoire, nous remercions Dieu qui nous a donné la

puissance, la patience et le courage pour que nous puissions terminer ce travail
dans une période chargée, malgré les difficultés rencontrées.

Nous souhaitons adresser nos remerciements les plus sincères aux

personnes qui nous ont apporté leur aide et qui ont contribué à l’élaboration de
ce mémoire ainsi qu’à la réussite de cette formidable année universitaire.
Ces remerciements vont tout d’abord à notre encadreur Mr. OUBRAHIM
Rachid pour son aide, sa disponibilité tout en long de la réalisation de ce projet
et sa compréhension, aussi pour sa confiance et ses encouragements.

Nos remerciements iront également aux professeurs qui ont accepté avec
bienveillance de participer au jury de ce mémoire.

Enfin, nous ne pouvons conclure sans remercier du fond du cœur nos

familles pour leurs encouragements continus et leur inestimable soutien.

Projet Fin d’Etude 2

 Table de Matière

Table de Figure......................................................................................................................................................... 5

Introduction............................................................................................................................................................... 6

Chapitre 1 : Présentation du projet................................................................................................................... 7

1. Introduction du chapitre :............................................................................................................................................................ 8

2. Définition de site web :................................................................................................................................................................ 8

3. Problématique................................................................................................................................................................................... 8

4. Déroulement du projet :................................................................................................................................................................ 9

5. L’organigramme de l’application :.........................................................................................................................................10

6. Les outils de développement :.................................................................................................................................................11

a. HTML :............................................................................................................................................................................... 11
b. CSS :.................................................................................................................................................................................... 12
c. PHP :................................................................................................................................................................................... 13
d. Java script :...................................................................................................................................................................... 13
e. Xampp :............................................................................................................................................................................. 14
f. PhpMyAdmin :................................................................................................................................................................ 14
g. Localhost.......................................................................................................................................................................... 15
h. Visual Studio Code (VSC) :........................................................................................................................................15

i. Visual Studio Code...........................................................................................................................................................15

ii. Installation VSC................................................................................................................................................................15
iii. Langue de l’interface....................................................................................................................................................16
iv. Interface et fonction de base.....................................................................................................................................16

Projet Fin d’Etude 3

Chapitre 2 : La conception.................................................................................................................................. 18

1. conception UML :.......................................................................................................................................................................... 19

2. Diagramme de classe :................................................................................................................................................................. 20

3. Diagramme de sequence :..........................................................................................................................................................22

4. Diagramme de cas d’utilisation :............................................................................................................................................ 24

Chapitre 3 : Réalisation du projet.................................................................................................................... 25

1. Accueil :............................................................................................................................................................................................. 26

2. Login:.................................................................................................................................................................................................. 27

3. Espace Etudiant(e) :.................................................................................................................................................................... 28

4. Espace Professeur:...................................................................................................................................................................... 30

5. Contactez-nous………………………………………………………………………………………………………………………………………33

6. A propos de nous…………………………………………………………………………………………………………………………………34

Conclusion............................................................................................................................................................... 35

Bibliographie.......................................................................................................................................................... 35

Projet Fin d’Etude 4

 Table de figure

Figure 1 :Time-line--------------------------------------------------------------------------------------------------------------------------9
Figure 2 : organigramme----------------------------------------------------------------------------------------------------------------10
Figure 3: HTML-pic------------------------------------------------------------------------------------------------------------------------11
Figure 4 : CSS-pic---------------------------------------------------------------------------------------------------------------------------12
Figure 5 : PHP-pic--------------------------------------------------------------------------------------------------------------------------13
Figure 6 : JavaScript-pic------------------------------------------------------------------------------------------------------------------13
Figure 7 : Xampp-pic----------------------------------------------------------------------------------------------------------------------14
Figure 8: phpMyAdmin-pic---------------------------------------------------------------------------------------------------------------14
Figure 9 : Localhost-pic-------------------------------------------------------------------------------------------------------------------15
Figure 12 : VSC-----------------------------------------------------------------------------------------------------------------------------16
Figure 10 :UML-----------------------------------------------------------------------------------------------------------------------------19
Figure 11 : Diagramme de classe------------------------------------------------------------------------------------------------------20
Figure 12 : Diagramme de sequence---------------------------------------------------------------------------------------------------22
Figure 13 :Digramme de cas d’utilisation--------------------------------------------------------------------------------------------24

Figure 14: Screenshot- Acceuil----------------------------------------------------------------------------------------------------------26

Figure 15 : Screenshot- Login-----------------------------------------------------------------------------------------------------------27
Figure 16: : Screenshot- Espace Etudiant-------------------------------------------------------------------------------------------28
Figure 17 : : Screenshot-professeur-------------------------------------------------------------------------------------------------30
Figure 18 : Screenshot-Contacrez-nous-----------------------------------------------------------------------------------------------33
Figure 19 : Screenshot- A propos-------------------------------------------------------------------------------------------------------34

Projet Fin d’Etude 5

 Introduction

L’informatique représente la révolution la plus importante et la plus innovante

qui a marqué la vie de l'humanité ces dernières décennies. En effet, loin d'être
un éphémère phénomène de mode, ou une tendance passagère, l'informatique
vient nous apporter de multiples conforts à notre mode de vie. Aucun domaine
n'est resté étranger à cette stratégie qui offre tant de services aussi bien pour
l’enseignement ou l'administration que pour le personnel et c'est dans ce cadre
d'idées que s'inscrit notre projet de fin d’études.

L’objectif ciblé dans notre projet de fin d’études est la conception d'un
site web de gestion des notes de l’Ecole Supérieur de Technologie. Notre
travail consiste à informatiser les importantes tâches (consultation des notes,
ajouter des notes, modification des notes, suppression des notes…). Les
avantages souhaités de ce site web sont d’avoir un accès rapide à toutes les
informations qui concernent les étudiants, et une bonne organisation des
informations.
Pour le faire, on utilise une méthode d’analyse dans la phase d’analyse et de
conception et on utilise un langage de programmation pour réaliser ce site web.
Ce dernier devra tout d'abord être extrêmement fiable, et son utilisation
quotidienne ne devra pas laisser place à l'éventuel point faible.

Projet Fin d’Etude 6

 Chapitre 1 : Présentation du projet

Projet Fin d’Etude 7

 1. Introduction du chapitre :

C'est grâce à ce projet de fin d’étude que nous avons eu l'opportunité de cumuler
les connaissances théoriques avec celles de la pratique. Ceci permet également
de rentrer dans la vie active et de découvrir plus précisément le milieu
professionnel.

Ce projet consiste à développer un site web de gestion de note, en utilisant la

programmation Web on a développé un site Web qui permet de :

 Faciliter l’ajout des notes.

 Faciliter la modification des notes.
 Faciliter suppression des notes.
 Faciliter la consultation des notes.

2. Définition de site web :

En informatique, une site Web est un logiciel applicatif manipulable grâce à un

navigateur Web. Un site Web est généralement placée sur un serveur et se
manipule en actionnant des widgets à l'aide d'un navigateur Web, via un réseau
informatique (Internet, intranet, réseau local, etc…).

3. Problématique

Le traitement des notes, la répartition (des classes, étudiants, modules, matières,

départements, filières, spécialités), calcul des moyennes et résultats se font dans
l'école supérieure de technologie d’une façon semi-automatique, une faute de
frappe peut mener à des problèmes et des erreurs.

Projet Fin d’Etude 8

 4. Déroulement du projet

La planification est parmi les phases d'avant-projet les plus importantes. Elle
consiste à déterminer et à planifier les tâches du projet et à estimer leurs charges
respectives. Parmi les outils de planification de projet, nous avons utilisé le
diagramme Gant projet, il permet de planifier le projet et de rendre plus simple
le suivi de son avancement. Ce diagramme permet aussi de visualiser
l'enchainement et la durée estimé de la fin des différentes tâches durant le PFE
comme il est illustré par la figure qui suit :

Figure 1 : Time-line

Projet Fin d’Etude 9

 5. L’organigramme de site web

Figure 2 : organigramme

Donc notre organigramme est comme ci-dessus, une fois la connexion est faite,
on se trouve dans la page d’accueil, un menu de 6 éléments pour décrire notre
projet.

Projet Fin d’Etude 10

 6. Les outils de développement :

Pour faire notre projet nous avons utilisé plusieurs logiciels et langages de
programmation, parmi eux ceux qui ont mentionné ci-dessous :

a. HTML :

Figure 3 : HTML-pic

Figure 3 : HTML-pic

Projet Fin d’Etude 11

 L'HTML est un langage informatique utilisé sur l'internet. Ce langage est utilisé
pour créer des pages web. L'acronyme signifie HyperText Markup Langage, ce
qui signifie en français "langage de balisage d'hypertexte". Cette signification
porte bien son nom puisqu'effectivement ce langage permet de réaliser de
l'hypertexte à base d'une structure de balisage.

b. CSS :

Figure 4 : CSS-pic

CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie « feuille de

style en cascade ».
Le CSS correspond à un langage informatique permettant de mettre en forme
des pages web (HTML ou XML).
Ce langage est donc composé des fameuses « feuilles de style en cascade »
également appelées fichiers CSS (.css) et contient des éléments de codage.

c. PHP :

Projet Fin d’Etude 12

 PHP (officiellement, sigle est un acronyme récursif pour PHP HyperText
Préprocesseur) est un langage de scripts généraliste et Open Source,
spécialement conçu pour le développement d'applications web. Il peut être
intégré facilement au HTML.

d. Java script :

Figure 6 : JavaScript-pic

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.

e. Xampp :

Projet Fin d’Etude 13

Figure 7 : Xampp-pic
 XAMPP est un ensemble de logiciels servant à mettre en place aisément un
serveur Web, un serveur FTP et un serveur de messagerie électronique. C'est
une distribution de logiciels libres (X Apache MySQL Perl PHP) offrant une
bonne souplesse d'utilisation.

f. PhpMyAdmin :

Figure 8 : phpMyAdmin-pic

phpMyAdmin (PMA) est une application Web de gestion pour les systèmes de
gestion de base de données MySQL et Maria DB, réalisée principalement
en PHP et distribuée sous licence GNU GPL.

g. Localhost

Figure 9 : Localhost-pic
Projet Fin d’Etude 14
 Dans le domaine des réseaux informatiques, localhost est le nom habituel qui
désigne une interface logique de l’ordinateur local. En informatique, on travaille
souvent en mode client-serveur : une ou plusieurs machines envoient des
requêtes à un serveur central qui envoie les réponses appropriées.

h. Visual Studio Code (VSC) :

Visual studio code (VSC) est un logiciel, un environnement de programmation

très efficace, facile à traiter, c’était un outil très puissant le long de notre
parcours dans ce projet, donc c’est nécessaire de le mentionner.

i. Visual Studio Code

Visual Studio Code est un éditeur de code open-source développé par Microsoft
supportant un très grand nombre de langages grâce à des extensions. Il supporte
l’autocomplétions, la coloration syntaxique, le débogage, et les commandes git.
ii. Installation VSC

VSC peut être installé facilement sous Windows, Mac et Linux. Le download
fait moins de 100MB et l'espace occupé sur le disque est d'environ 200MB, le
logiciel n'a pas de besoins particuliers en ce qui concerne le hardware, il est
censé marcher sur la plupart des machines.
Pour le download vous pouvez choisir :

 La page d'accueil du site officiel qui vous suggère la version adaptée à

votre système
 La page de download qui illustre toutes les versions disponibles

Projet Fin d’Etude 15

 iii. Langue de l’interface

VSC s'installe automatiquement dans la langue de votre système d'exploitation.

La plupart des informations contenues dans cette page, cependant, concerne la
version anglaise du logiciel (car c'est plus simple de suivre la documentation
officielle ou trouver de l'aide).

iv. Interface et fonction de base

Lors du premier accès, VSC propose une page d'accueil (i.e. Welcome) qui propose
déjà quelques informations utiles, par exemple :

 Dans la section Learn vous pouvez accéder à une explication de l'interface

(voir également plus bas dans cette page) et à un playground interactif
dans lequel on peut tester certaines fonctionnalités d'édition du logiciel.
 Dans la section Help vous avez des liens de support, parmi lesquels
des vidéos introductifs
Projet Fin d’Etude 16
Projet Fin d’Etude 17
 Chapitre 2 : La conception

1. Analyse de la base de données :

Projet Fin d’Etude 18

 Figure 10: UML

La modélisation UML (Unified Modeling Langage) est une méthode de conception et de

représentation visuelle des systèmes logiciels. Elle permet de décrire les différents aspects
d'un système, tels que sa structure, son comportement et ses interactions avec les utilisateurs
et les autres systèmes.
UML est composé de différents types de diagrammes, chacun représentant un aspect
spécifique du système. Les principaux types de diagrammes UML sont :
1.Les diagrammes de classes : ils représentent la structure du système en montrant les
classes et leurs relations.

2.Les diagrammes de séquence : ils montrent l'interaction entre les objets du système dans
une séquence chronologique.

La modélisation UML permet de mieux comprendre les exigences du système, de concevoir

et de documenter le système de manière claire et précise, de communiquer efficacement avec
les parties prenantes et de faciliter la maintenance et l'évolution du système

Projet Fin d’Etude 19

2. Diagramme de classe :

Figure 11 : Diagramme de classe

Un diagramme de classe UML pour la gestion des notes de l'école supérieure de technologie
Oujda pourrait inclure des classes telles que :

Classe "Etudiant" : Cette classe contiendrait des attributs tels que le nom de l'étudiant, son
adresse e-mail, son numéro d'identification étudiant, etc.

Classe "Cours" : Cette classe contiendrait des attributs tels que le nom du cours, la
description, l'enseignant qui donne le cours, etc.

Projet Fin d’Etude 20

Classe "Enseignant" : Cette classe contiendrait des attributs tels que le nom de l'enseignant,
l'adresse e-mail, le numéro d'identification de l'enseignant, etc.

Classe "Note" : Cette classe contiendrait des attributs tels que la note elle-même, la date à
laquelle la note a été attribuée, le cours pour lequel la note a été attribuée, l'étudiant qui a
reçu la note, etc.

Classe "Matière" : Cette classe contiendrait des attributs tels que le nom de la matière, la
description, les crédits, etc.

Il pourrait également y avoir des relations entre ces classes, telles que :

Une relation de "Composition" entre la classe "Etudiant" et la classe "Note", indiquant que
chaque étudiant peut avoir plusieurs notes.

Une relation de "Composition" entre la classe "Cours" et la classe "Note", indiquant que
chaque cours peut avoir plusieurs notes.

Une relation d’ "Association" entre la classe "Enseignant" et la classe "Cours", indiquant que
chaque enseignant peut donner plusieurs cours.

Une relation de "Composition" entre la classe "Matière" et la classe "Cours", indiquant que
chaque cours est associé à une matière.

Projet Fin d’Etude 21

3. Diagramme de séquence

Figure 12 : Diagramme de séquence

Le diagramme de séquence UML montre les interactions entre l'utilisateur de l'application de

gestion des notes et le système.

Les interactions comprennent :

Ajouter une note : l'utilisateur demande l'ajout d'une note pour un étudiant, le système
vérifie d'abord l'existence de l'étudiant, demande ensuite les détails de la note et ajoute la
note.

Projet Fin d’Etude 22

Consulter une note : l'utilisateur demande la consultation d'une note pour un étudiant, le
système vérifie d'abord l'existence de la note et renvoie les détails de la note.

Modifier une note : l'utilisateur demande la modification d'une note pour un étudiant, le
système vérifie d'abord l'existence de la note, demande ensuite les détails modifiés de la note
et modifie la note.

Supprimer une note : l'utilisateur demande la suppression d'une note pour un étudiant, le
système vérifie d'abord l'existence de la note et supprime la note.

Notez que ce diagramme de séquence UML est également très simplifié et peut être étendu
pour inclure des interactions supplémentaires en fonction des besoins de l’école.

4.Diagramme de cas d’utilisation :

Projet Fin d’Etude 23

 Figure 13 : Diagramme de cas d’utilisation

Projet Fin d’Etude 24

 Chapitre 3 : Réalisation du projet

Projet Fin d’Etude 25

 1. Accueil :

Une fois la connexion est faite, la première page à traiter c’est la page
d’accueil, il est formé d’un titre (Gestion des notes). En cliquant sur la
touche commencez le system accède directement sur le login pour se
connecter.
Figure 4 : Screenshot-Accueil

Figure 14 : : Screenshot-Accueil

2. Login :

La page login qui permet à un utilisateur de se connecter à un site web ou à une

application en fournissant des informations d'identification valides, telles qu'un nom
d'utilisateur et un mot de passe. Une fois que l'utilisateur a fourni les informations
d'identification correctes et qu'elles ont été vérifiées par le serveur, l'utilisateur est autorisé
à accéder aux fonctionnalités du site web.

Projet Fin d’Etude 26

 Figure15: : Screenshot-login

3. Espace Etudiant :

Projet Fin d’Etude 27

 Figure16: : Screenshot-Espace Etudiant

Projet Fin d’Etude 28

 4. Espace Professeur :
Projet Fin d’Etude 29
 Lorsque le professeur entre son nom et son mot de passe, il peut choisir le semestre
et la matière et il clique sur le bouton ajouter pour la saisie des notes des étudiants :

Figure17: : Screenshot-Espace professeur

Projet Fin d’Etude 30

Projet Fin d’Etude 31
 Lorsque le professeur appuie sur le bouton ajouter, un formulaire apparaît, afin qu'il
puisse saisir les notes de chaque étudiant :

Projet Fin d’Etude 32

 5. Contactez-Nous :

Cette interface contient notre informations (e-mail, numéro de téléphone, nos

pages sur les réseaux).
Un formulaire se trouve à droite de la page qui permet le contact direct au
propriétaire le cas d’un problème technique.

Figure18: : Screenshot-Contactez-nous

6. A propos de nous :

Projet Fin d’Etude 33

 Figure19: : Screenshot-A propos de nous

Projet Fin d’Etude 34

 Conclusion

Ce projet s'est avéré très enrichissant dans la mesure où il consiste en une

approche concrète du métier de développeur. En effet, la prise d'initiative, le
respect des délais et le travail d'équipe seront des aspects essentiels d'une future
carrière.
De plus, cela nous a permis d'appliquer nos connaissances en programmation
web pour améliorer nos compétences.
Les principaux problèmes que nous avons rencontrés avec le langage de
programmation étaient PHP, mais nous avons atteint notre objectif grâce à un
travail acharné et à la persévérance, et nous n'oublierons pas les encouragements
de nos parents, enseignants et amis, qui nous ont toujours soutenus tout au long
de cette période.

Projet Fin d’Etude 35

 Bibliographie
[1] Pr. Hafida ZROURI, Programmation web,2023
[2] https://openclassrooms.com/fr/
[3] https://www.w3schools.com/tags/ref_language_codes.asp
[4] Mr. Greg LIM, Beginning Node.js, Express&MongoDB
Development

Projet Fin d’Etude 36