Vous êtes sur la page 1sur 37

UNIVERSITE CADI AYYAD-MARRAKECH

ECOLE NORMALE SUPERIEURE DE MARRAKECH


DEPARTEMENT INFORMATIQUE

Rapport de projet de fin d’études


Diplôme Universitaire de Technologie – Génie Informatique

Conception et développement d’un site web d’une école.

Réalisé par : Encadré par :


BADDOU MOHAMED AMINE Mr. ZAHID Noureddine
BOUZIYANI MOHAMMED
Année universitaire 2021-2022
DEDICACE
Ce modeste travail nous a couté des efforts assez importants, par
conséquences nous le dédie à tous ceux qui ont depuis toujours sacrifié
pour notre bonheur et notre réussite, à ceux qui ont vécus nos
souffrances durant tout notre trajet des études assez dures et pénible :
Nos chères parents.

Nous le dédions également à tous les membres de nos familles et


tous nos amis de la filière DUT-Génie Informatique.

Notre dédicace est aussi adressée à nos professeurs d’école normale


supérieure de Marrakech, qui ont toujours suivi notre formation durant
les deux années du DUT.
REMERCIEMENTS

Premièrement nous remercions Dieu source de toute connaissance.

Avant d’entamer ce présent rapport, nous tenons tout d’abord à


exprimer nos sincères sentiments et remerciements à tous ceux qui ont
participé de manière directe ou indirecte à l’élaboration de ce Rapport.

Nous adressons nos remerciements dans un premier temps à


Monsieur Noureddine ZAHID. Pour son encadrement, ainsi que le
temps et les précieux conseils qu’il nous a prodigués tout au long de ce
travail.

Également, mes remerciements s’adressent à madame EL HARIRI


Khadija la directrice de l’école normale supérieure de Marrakech et
Monsieur AITOUNNEJAR Lahoucine le responsable de notre filière,
et au corps professoral du Département d’informatique de l’Ecole
Normale supérieure.
Sommaire
INTRODUCTION : ...................................................................................................................................................................... 1
CHAPITRE 1 : Contexte général de projet................................................................................................................................... 2
1- PROBLEMATIQUE :....................................................................................................................................................... 3
2- PRESENTATION DE PROJET : ..................................................................................................................................... 3
3- ETUDE DE L’EXISTANT : ............................................................................................................................................. 4
4- CRITIQUES ET SOLUTIONS : ...................................................................................................................................... 4
CHAPITRE 2 : Cahier des charges............................................................................................................................................... 5
1- EQUIPE DE TRAVAIL : ................................................................................................................................................. 6
2- REPARTITION DES TACHES : ..................................................................................................................................... 6
3- DIAGRAMME DE GANTT : .......................................................................................................................................... 7
4- MODELISATION : .......................................................................................................................................................... 7
CHAPITRE 3 : Conception et La réalisation de projet............................................................................................................... 10
1- LES LANGAGES ET LES OUTILS UTILISEES : ....................................................................................................... 11
2- INTERFACES CLIENT : ............................................................................................................................................... 16
3- INTERFACE ADMIN : .................................................................................................................................................. 20
1- Admin part ...................................................................................................................................................................... 20
2- Student part..................................................................................................................................................................... 26
CONCLUSION........................................................................................................................................................................... 29

TABLE DE FIGURES

Figure 1: Les différentes tâches de projet ..................................................................................................................... 6


Figure 2 : Diagramme de GANTT de projet ................................................................................................................ 7
Figure 3: Diagramme de cas d’utilisation d’administrateur : ....................................................................................... 8
Figure 4: Diagramme de cas d’utilisation du visiteur................................................................................................... 8
Figure 5: Diagramme de séquence inscription ............................................................................................................. 9
Figure 6 : Diagramme de séquence d’ajout enfant ....................................................................................................... 9
Figure 7: Interface de l'éditeur Visual Studio Code ................................................................................................... 11
Figure 8: Interface de XamppServer .......................................................................................................................... 12
Figure 9:Logo de langage HTML5 ............................................................................................................................. 12
Figure 10: Logo de CSS3 ........................................................................................................................................... 13
Figure 11: Représentation de fonctionnement de PHP ............................................................................................... 13
Figure 12: Logo de JAVASCRIPT ............................................................................................................................. 14
Figure 13: Logo de BOOTSTRAP ............................................................................................................................. 14
Figure 14: Logo de MYSQL ...................................................................................................................................... 15
Figure 15: Home Page ................................................................................................................................................ 16
Figure 16: About Page ................................................................................................................................................ 16
Figure 17: Classes Page .............................................................................................................................................. 17
Figure 18: Teachers Page ........................................................................................................................................... 17
Figure 19: Blog Page .................................................................................................................................................. 18
Figure 20: Contact Page ............................................................................................................................................. 18
Figure 21: Login Page ................................................................................................................................................ 19
Figure 22: Register Page............................................................................................................................................. 19
Figure 23: Forget Password Page ............................................................................................................................... 20
Figure 24: Admin Login Page .................................................................................................................................... 20
Figure 25: Admin Info Page ....................................................................................................................................... 21
Figure 26: Teachers Information ................................................................................................................................ 21
Figure 27: Subject Information................................................................................................................................... 22
Figure 28: Change Admin Information ...................................................................................................................... 22
Figure 29: Add Student............................................................................................................................................... 23
Figure 30: Student Informations ................................................................................................................................. 23
Figure 31: Add Teacher .............................................................................................................................................. 24
Figure 32: Edit Teacher .............................................................................................................................................. 24
Figure 33: Teacher Information .................................................................................................................................. 25
Figure 34: Delete Teacher .......................................................................................................................................... 25
Figure 35: Edit General Informations ......................................................................................................................... 26
Figure 36: Student Login ............................................................................................................................................ 26
Figure 37: Student Information .................................................................................................................................. 27
Figure 38: Subject Informations ................................................................................................................................. 27
Figure 39: Teacher Information .................................................................................................................................. 28
Figure 40: Change Password ...................................................................................................................................... 28
INTRODUCTION :
À l’heure du tout digital, créer un site web pour une école sonne comme une évidence. Le
fait de créer un site pour une école va permettre à celle-ci d’être visible 365 jours par an. Avec un
site web, l’école permettre à ses adhérents de s’informer sur ses activités, les actualités de l’école.

À l’issue de la deuxième année à l’Ecole Normale Supérieure – Marrakech, les étudiants


sont amenés à réaliser des projets de fin d’étude, dans le cadre de l’obtention de diplôme
universitaire de technologie-Génie informatique.

Pour cela le département informatique nous a donné l’opportunité de mettre en valeur nos
compétences techniques acquises durant ces deux ans de formation en option génie informatique, en
nous offrant l’occasion de choisir un thème, avec lequel nous pouvons apprendre de nouvelles
connaissances et nouveaux concepts, qui nous seront utiles que ce soit pour nos carrières
professionnelles ou pour la suite de nos études.

Dans ce sens, notre projet a pour but de réaliser un site web d’une école.

Autrement dit, notre projet consiste à trouver une solution complète qui offre les fonctions
standards de présenter l’école à ses spectateurs, gestion des inscriptions à l’école.

Le site devra notamment permettre aux utilisateurs de s’inscrire à l’école, de consulter les
classes, les profs, les articles qui permettent aux utilisateurs de bien connaitre notre école (BLOG).

Ce rapport se compose de 3 chapitres :

Le premier chapitre « Contexte général de projet », présente la problématique,


présentation générale de projet, étude de l’existant et les critiques et les solutions.

Le deuxième chapitre « Analyse et conception », présente les outils et les technologies


web utilisés, la modélisation de projet par UML.

Le troisième chapitre « la réalisation de projet », nous allons donner un aperçu sur les
interfaces réalisées.

Page | 1
CHAPITRE 1 : Contexte général de projet

Page | 2
1- PROBLEMATIQUE :
Le problème pose actuellement au niveau de l’école, c’est la présentation des activités et
l’enregistrement des informations concernant la gestion des inscriptions à l’école.

Alors, de quelle manière peut-on présenter ces activités ?

Comment enregistrer les informations des étudiants ?

En outre, comment gérer les inscriptions à l’école ?

2- PRESENTATION DE PROJET :
2.1- Identification de projet :
Thème : Conception et développement d’un site web et la gestion d’une école.

But : L’optimisation de la gestion de la base de données et apprentissage de langages de


programmation web.
Les Objectifs du projet : L’objectif du projet consiste à développer un site web dynamique
d’une école.
Ce site permettra de réaliser les opérations suivantes :

• Présenter les informations sur l’école.

• Publier les activités de l’école

• Gérer les inscriptions de l’école.

• Publier des articles.

Bénéfices potentiels :

• Savoir comment réaliser et organiser un projet quelconque à l’aide des étapes à suivre.
• L’appréhension des langages ou des logiciels qui vont nous aider lors de la réalisation
des sites et applications web.

Page | 3
2.2- Etapes de planification de site web :

La planification de notre site web est basée sur 3 étapes principales :

- Partie d’analyse : décrire les différents outils, logiciels, méthodes et environnements de


développement.
- Partie conception : représenter les différents niveaux de conception de l’application.

- Partie réalisation : exposer la réalisation de l’application.

3- ETUDE DE L’EXISTANT :
Pour s’inscrire à l’école, l’utilisateur doit se déplacer directement au local de l’école
afin de satisfaire ses besoins. Ses déplacements peuvent être inutiles et même peuvent provoquer un
gaspillage de temps.

D’ailleurs, l’école n’a aucun moyen pour publier les annonces de ses activités, à
l’exception des supports traditionnels tels que les petites affiches.

Vu l’accroissement de la technologie Internet, la conception d’un site web d’une


association sportive est devenu une nécessité incontournable pour l’association.

4- CRITIQUES ET SOLUTIONS :
Critique de l’existant :
La solution actuelle est manuelle, posant ainsi des problèmes différents :
+ Risque de perdre les dossiers et les informations des adhérant inscris l’école.
+ Risque de manque d’un dossier dans le stock, ce qui perdra la confiance de client.
Solutions proposées :
La création d’un site web pour but de valoriser l’image de l’école. La plupart des
personnes utilisent aujourd’hui Internet pour faire des inscriptions.
Ce projet consiste donc à la mise en place d’un site web dynamique qui présente l’école et
gère les inscriptions.

Page | 4
CHAPITRE 2 : Cahier des charges

Page | 5
1- EQUIPE DE TRAVAIL :

L’équipe qui travaille sur la conception et le développement de site est compose de deux
personnes, avec les spécifications du rôle de chacun

Nom et Prénom Diplôme Rôles

BADDOU MOHAMED AMINE


DUT-Génie Développeur web (BACK END)
informatique

BOUZIYANI MOHAMMED DUT-Génie Développeur web (FRONT


informatique END) & Designer

2- REPARTITION DES TACHES :

Figure 1: Les différentes tâches de projet

Page | 6
3- DIAGRAMME DE GANTT :

Figure 2 : Diagramme de GANTT de projet

4- MODELISATION :
Diagramme de cas d’utilisation :
Représente un ensemble de séquence d'action qui sont réalisées par le système et qui produisent un
résultat observable intéressant pour un acteur particulier. Pour illustrer les cas d'utilisation de mon système
je vous présente les différents acteurs qui interviennent dans notre site (administrateur et visiteur).
• Administrateur :
L'administrateur c’est le responsable qui gère le site, il fait toutes les tâches suivantes :
- Accepter /refuser les demandes d’inscription.
- Ajout un enfant à l’école.
- Supprimer un enfant de l’école.
- modifier les informations d’un enfant.
- Gestion de contenu de site.

Page | 7
Figure 3: Diagramme de cas d’utilisation d’administrateur :

Un visiteur peut consulter le site et envoyer une demande d’inscription.

Figure 4: Diagramme de cas d’utilisation du visiteur

Page | 8
4-2 Diagramme de séquence :
Les diagrammes de séquence sont représentation graphique des interactions entre les acteurs et le système
selon un ordre chronologique dans la formulation Unifined Modeling Language. Je vous présenter par la
suite l’ensemble des diagrammes de séquence et les interactions avec notre site.

• Inscription:

Figure 5: Diagramme de séquence inscription

Ce diagramme de séquence représente le scénario de l’inscription pour envoyer une demande d’inscription,
le visiteur doit remplir le formulaire, le responsable (administrateur) va accepter ou refuser cette demande.

• Ajout d’un enfant à l’école :

Figure 6 : Diagramme de séquence d’ajout enfant

Ce diagramme de séquence représente le scénario d’ajout un enfant, le responsable entre les données du
formulaire et valide tous les attributs, le système ajoute l’enfant au BD.

Page | 9
CHAPITRE 3 : Conception et La réalisation
de projet

Page | 10
1- LES LANGAGES ET LES OUTILS UTILISEES :
Environnement de développement :

- Visual Studio Code :

Il existe une grande quantité d’éditeurs de texte pour créer un site web, nous avons choisis Visual
studio code, l’un des plus utilises parmi ceux disponibles pour Windows.
Visual Studio Code est un éditeur de code multiplateforme édité par Microsoft. Cet outil destiné aux
développeurs supporte plusieurs dizaines de langages de programmation comme le HTML, C++, PHP,
JavaScripts, CSS, etc.

Figure 7: Interface de l'éditeur Visual Studio Code

Page | 11
- Xampp server :
XamppServer est une plateforme de développement Web de type XAMPP, permettant de faire
fonctionner localement (sans se connecter à un serveur externe) des scripts PHP. XamppServer n’est pas en soi
un logiciel, mais un environnement comprenant deux serveurs (Apache et MySQL), un interpréteur de script
PHP, ainsi que phpMyAdmin pour l’administration Web des bases MySQL.

Figure 8: Interface de XamppServer

Les technologies de web :

- HTML (Hyper Text Markup Language)

HTML est le format de données conçu pour représenter les pages web. C’est un langage de balisage
permettant d’écrire de l’hypertexte, d’où son nom.HTML permet également de structurer sémantiquement et
de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des
formulaires de saisie, et des programmes informatiques. Il permet de créer des documents interopérables avec
des équipements très variés de manière conforme aux exigences de l’accessibilité du web.

Figure 9:Logo de
langage HTML5

Page | 12
- CSS3 (Cascading Style Sheets)

CSS3 est la dernière version du CSS, qui apporte des fonctionnalités particulièrement
attendues comme les bordures arrondies, les dégradés, les ombres. En fait, la version CSS3 n'est
pas encore totalement finalisée (ce n'est pas encore une version officielle). Cependant, elle est
bien avancée et aujourd'hui déjà bien prise en charge par de nombreux navigateurs, ce qui fait
qu'on peut déjà s'en servir.

Figure 10: Logo de


CSS3

PHP (Personal Home Pages)

PHP est un langage de programmation web côté serveur, ce qui veut dire que c'est le serveur
qui va interpréter le code PHP et générer du code qui pourra être interprété par votre navigateur.
Pour décrire une page PHP, on pourrait dire que c'est un fichier avec l'extension .PHP, lequel contient
une combinaison de balises HTML et de scripts qui tournent sur un serveur web.

Figure 11: Représentation de fonctionnement de PHP

Page | 13
- JAVASCRIPT

JavaScript est un langage de programmation principalement utilisé pour créer des pages web
interactives. Ce langage, incorporé dans un document HTML, n'est pas visible dans la fenêtre du navigateur.
Il sert à améliorer le Langage html en effet, il permet d'exécuter des commandes du côté client
(c'est-à-dire au niveau du navigateur et non du serveur web). Ce code qui est exécuté par le navigateur Web
est utile pour toutes les interactions du client sur la page Web.
Ce langage permet de manipuler des objets au sens informatique : créer des fenêtres spécifiques, contrôler
les données saisies dans les formulaires, redimensionner certains objets, rediriger des liens…

Figure 12: Logo de


JAVASCRIPT

- BOOTSTRAP

Bootstrap est une collection d’outils utiles à 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. C’est l’un des projets les plus populaires sur la plateforme de gestion de
développement GitHub.

Figure 13: Logo de BOOTSTRAP

Page | 14
- MYSQL

MySQL est un système de gestion de base de données relationnelle (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 monde, autant par le grand public (applications web principalement) que par des professionnels.

Figure 14: Logo de MYSQL

Nous avons réussi à réaliser un site web de l’école pour la présenter au public et faciliter la
gestion de demandes d’inscriptions et les commandes.

Page | 15
2- INTERFACES CLIENT :
1. Home Page
Cette illustration représente la première page de notre site web nommé Med School qui permet de visualiser les différentes
parties de notre site brièvement.

Figure 15: Home Page

2. About Page
Celle-ci montre le nom utilisé de notre école avec plusieurs informations qui vont ter permettre de bien comprendre le but,
le système et aussi les activités de notre école.

Figure 16: About Page

Page | 16
3.Classes Page
En outre ,cette image aborde les différentes classes existées dans notre ecole avec la date d ajout de chaque classe et si la
classe et presentiel ou bien distanciel .

Figure 17: Classes Page

4. Teachers Page
Ensuite ,celle-ci montre les divers professeurs de cette école avec leurs exprtises et leurs photo pour donner a lutilistauer
une vision globale sur notre ecole .

Figure 18: Teachers Page

Page | 17
5. Blog Page
Idem il existe aussi dans ce site web des blogs qui permet aux utilisatuers de consulter les differents activites et information
recentes de notre ecole .

Figure 19: Blog Page

6. Contact Page
Dans l'illustration ci-dessous , on trouve tout ce qui est en relation à nos contacts tels que les numéros de téléphone , les
temps de travail et les adresses.

Figure 20: Contact Page

Page | 18
7. Login Page
En ce qui concerne le login où l'utilisateur va s'identifier avec son adresse mail et son mot de passe pour qu'il puisse avoir
accès.

Figure 21: Login Page

8. Register Page
La représentation suivante permet à créer votre compte privé qui se compose du nom et prénom de l'utilisateur, son
adresse mail ,son mot de passe, le nom de votre enfant et puis la classe.

Figure 22: Register Page

Page | 19
9. Forget Password Page
En cas d'oublier votre mot de passe, vous pouvez le récupérer juste avec votre adresse mail comme la représente l'image ci-
dessous .

Figure 23: Forget Password Page

3- INTERFACE ADMIN :
1- Admin part
1. Login Page
Pour avoir l'accès à ce site web, l’utilisateur doit s'identifier avec son propre nom d'utilisateur et son mot de passe.

Figure 24: Admin Login Page

Page | 20
2. Information About Admin
On consacre une partie pour les informations relativement à l'administrateur voire : le numéro de téléphone, l'adresse mail, et
même quelques détails sur leurs parents.

Figure 25: Admin Info Page

3. Information About Teacher


La partie suivante est consacrée aux professeurs, leurs adresses, adresses mails, contacts et leurs genres etc.

Figure 26: Teachers Information

Page | 21
4. Information About Subject
Autre case, mais maintenant à propos des matières et les professeurs qui se chargent de ces matières, et
aussi la plage horaire dédiée pour chacune.

Figure 27: Subject Information

5. Change Admin Information


La photo ci-dessous montre comment modifier les informations d'administrateur.

Figure 28: Change Admin Information

Page | 22
6. Add Student
Cette illustration explique comment remplir ce formulaire afin d'ajouter un nouvel élève.

Figure 29: Add Student

7. Student Information
La représentation suivante donne toutes informations sur les étudiants tels que leurs noms complets,
photos, adresses etc.

Figure 30: Student Informations

Page | 23
8. Add Teachers
Ainsi, pour ajouter un nouveau professeur, il faut remplir un formulaire qui se compose de son nom, son
adresse, son adresse mail, son mot de passe et autres informations, voir l'image ci-dessous.

Figure 31: Add Teacher

9. Edit Teacher
Pour modifier les informations d'un professeur qui est déjà ajouté, il suffit de suivre ces étapes :

Figure 32: Edit Teacher

Page | 24
10. Teacher Information
Cette partie-là est destinée pour toutes informations relativement aux professeurs.

Figure 33: Teacher Information

11-Teacher Delete
En cas d'éliminer un des professeurs, il faut aller vers cette portion pour supprimer toutes ces
informations.

Figure 34: Delete Teacher

Page | 25
12-View and Edit General Information
Cette illustration montre comment modifier les informations générales du site.

Figure 35: Edit General Informations

2- Student part
1. Login Page
Pour avoir l'accès à ce site web, l’utilisateur doit s'identifier avec son propre nom d'utilisateur et son
mot de passe.

Figure 36: Student Login

Page | 26
2. Student Information
On consacre une partie pour les informations relativement à l'étudiant pour voire : le nom, l'adresse, et
même quelques détails sur leurs parents.

Figure 37: Student Information

3. Subject Information
Autre cas, mais maintenant à propos des matières et les professeurs qui se chargent de ces matières.

Figure 38: Subject Informations

Page | 27
4. Teacher Information
La partie suivante est consacrée aux professeurs, leurs adresses, adresses mails, contacts et leurs genres
etc.

Figure 39: Teacher Information

5. Change Password
Pour changer votre mot de passe, vous pouvez le changer juste avec votre ancien mot de passe comme
la représente l'image ci-dessous.

Figure 40: Change Password

Page | 28
CONCLUSION

En guise de conclusion, ce projet nous a permis de mettre en


pratique nos connaissances acquises pendant notre formation au sein de
l’école normale supérieure-Marrakech, apprendre l’esprit de travail en
groupe et également de développer nos compétences techniques en
informatique, en réalisant un site web permettant de présenter l’école et
ses activités au public et gérer les inscriptions, en utilisant différentes
langages de programmation et logiciels pour le réussir malgré tous les
obstacles qu’on a vécu.

Ce projet ce n’est qu’un début pour notre carrière, une expérience


pour nous et une

Initiation pour réaliser d’autres projets informatiques, afin de


maitriser les outils informatiques et les langages de programmation.

Nous souhaitons, enfin que ce modeste travail soit en mesure de


satisfaire ses lecteurs et récolter ainsi leurs félicitations.

Page | 29
BIBLIOGRAPHIE ET
WEBOGRAPHIE

BIBLIOGHRAPHIE :

• Cours programmation Web, Mr. ZAHID Noureddine 2021


• Pr. Ahmed Ibannain Base de Données.
• Pr. Abdellatif Zakaria La Modélisation en UML.

WEBOGHRAPHIE :
• www.commentcamarche.com
• www.getuikit.com
• www.getbootstrap.com
• www.developpez.com
• https://Michalsnik.github.io/aos

Vous aimerez peut-être aussi