Rapp Pfe [PDF]

Zitiervorschau

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 BOUZIYANI MOHAMMED Année universitaire 2021-2022

Mr. ZAHID Noureddine

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

DUT-Génie

Développeur web (BACK END)

BADDOU MOHAMED AMINE informatique

BOUZIYANI MOHAMMED

DUT-Génie informatique

Développeur web (FRONT 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 cidessous .

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