Université Abdelmalek Essaadi Faculté des

Sciences et techniques de Tanger Département

Génie Informatique
Cycle Ingénieur : LSI
Demi-Module :
Frameworks

Projet Fin
Module
APPLICATION DE LA GESTION DU DEPARTEMENT
INFORMATIQUE
Réalisé par : Encadré par :
YOUSSEFI Nora Pr.Laachak Lotfi
Application web basée sur MVC et
MELLOUK Ahmed

Standards JEE

1
 Tables des matières

Remerciement : -------------------------------------------------------------------------3
Définition du système d’information : ---------------------------------------------4

A-Spécification des besoins :

1. Spécification des besoins fonctionnels : ------------------------------4
a. Étude fonctionnelle du module : Gestions d’utilisateurs : 4
b. Étude fonctionnelle du module : Gestion des Notes : ------4
2. Spécification des besoins techniques---------------------------------- 4
a. Ergonomie : ---------------------------------------------------------- 4
b. Administration : ------------------------------------------------------4
c. Sécurité et intégrité : ------------------------------------------------4
3. analyse du contexte : ------------------------------------------------------5
B-Conception :
1.diagramme de package : ---------------------------------------------------- 6
2.diagramme de use cases : --------------------------------------------------- 7
3.diagramme de class : ------------------------------------------------------- 10

C-front-End :
I. Axios : ----------------------------------------------------------------------------11
II. Front_vueJs : --------------------------------------------------------------------12
D- Base de donnée :
1. Création de la base de donnée : --------------------------------------------20
2. Migration : ----------------------------------------------------------------------21
3. Base de donne : -----------------------------------------------------------------25
I. Authentification : -------------------------------------------------------26
II. Explication du back_End : --------------------------------------------28
Les outils et langages utilisée : ------------------------------------------------52

2
 Remerciements :

A la remise du présent rapport, nous tenons non seulement par nécessite

ms par respect et gratitude d’exprimer nos vifs et sincères remerciements à
Mr LOTFI LAACHAK notre professeur et encadrant tout au long de
ce projet.
Nous remercions aussi le corps enseignant du Département Génie
Informatique au sein de la Faculté des Sciences et Techniques à Tanger
qui a assuré notre formation

3
 Définition du système d’information:
Ce projet vise à effectuer un site web qui traite un system d’information du
département informatique d’une université, en utilisant la modélisation orientée
objet UML et puis Laravel et vueJs comme frameworks.
Ce projet prendra en compte toutes les contraintes qui peuvent survenir
lorsqu’un administrateur veut gérer les différents couloirs du département.
Ainsi, On va traiter trois types d’utilisateurs : l’étudiant, le professeur et puis
l’admin, et alors on va spécifier les différents accès attribuer à chacun de ces 3
utilisateurs.

A-Spécification des besoins :

1. Spécification des besoins fonctionnels :

a. Étude fonctionnelle du module : Gestions des étudiants :

La solution ciblée envisagée doit assurer toutes les opérations de gestion en vigueur
sur une entité étudiant, notamment :
• La création d’un nouvel étudiant.
• La réinscription d’un étudiant,
• L’application doit aussi permettre de garder toutes les informations
pertinentes qui contiennent les données personnelles des étudiants (date et

4
 lieu de naissance, adresse, numéro de téléphone, nom et prénom de
l’étudiant…)

b. Étude fonctionnelle du module : Gestion du personnel administratif et

pédagogique :
La gestion des enseignants doit permettre d’assurer toutes les opérations en vigueur
sur une entité employée, notamment :

 La création d’un nouveau

professeur.

 Affecter les modules a ce

professeur

2. Spécification des besoins techniques

• Ergonomie :
L’ergonomie de l’application doit favoriser la lisibilité et l’accessibilité des
informations, ainsi que leur réutilisation.
L’interface doit être conviviale, facile à manipuler par des utilisateurs simples (non
informaticiens).
• Administration :
Le système doit permettre aux administrateurs de gérer les utilisateurs et groupes,
leurs rôles et fonctions par module, et également de surveiller et gérer la liste des
utilisateurs en ligne.
• Sécurité et intégrité :
• La solution doit avoir une interface d’authentification unique.
• Tous les modules font partie de la même solution avec le principe de saisie
unique.
• L’accès aux fonctions du système et aux données sera permis seulement à
base d’authentifications par email d’utilisateur et mot de passe.
• Les utilisateurs, les groupes d’utilisateurs et les fonctions doivent être gérés
par les administrateurs à l’aide des interfaces appropriées.

3. Analyse du contexte
L’analyse du contexte a pour objectif l’identification des différents acteurs qui
interagiront avec le système. Ces acteurs seront regroupés par la suite sous forme
de rôles dont chacun englobe un ensemble d’entités. Le regroupement sera effectué
en se basant sur les interactions.

5
 a. Les rôles
Un rôle réfère à une mission et à des responsabilités assumées par les acteurs du
système étudié. Un acteur (utilisateur, dispositif matériel ou autre système) interagit
directement avec le système et peut consulter et/ou modifier directement l’état du
système, par émission et/ou réception de messages éventuellement porteurs de
données.

b. Les acteurs que nous avons identifiés sont :

 Enseignants : Consultation des listes des étudiants, éditions des notes
 Étudiant : Consultation des notes, des informations personnelles.
 Administrateurs : Administration du système et gestion des rôles et des
utilisateurs.

B-Conception :

6
1-Diagramme de package :

7
 2-Diagramme de use cases:
A - Diagramme des cas d'utilisation pour package gestion utilisateur :

B - Diagramme des cas d'utilisation pour package gestion modules :

8
C - Diagramme des cas d'utilisation pour package gestion notes :

D - Diagramme des cas d'utilisation pour package gestion PFE :

9
E - Diagramme des cas d'utilisation pour package gestion Emploi

3-Diagramme de Class:

10
C – Front-End:

I. Axios:

La librairie axios est une librairie javascript qui nous donne la possibilité de
connecter notre backend et frontend avec un Rest Api.

A l'aide de axios on peut envoyer des requêtes au contrôleur du backend, et

de recevoir des données.

● Configuration axios avec vuejs:

II. Front End : Vue JS

Puisque Vue JS est un framework front end qui se base sur le concept du
templating.

Chaque page sera construite par plusieurs components qui sont situés dans
le dossier correspondant.

Les components utilisées pour toutes les pages, seront situées dans le
dossier général.

11
1. components:

2. views:

Les views sont les pages finals de chaque utilisateur qui sont
constituées par toutes les components.

12
 3. Log In Page:

A. Admin:

➔ Page Initial:

13
 ● Admin View:

<Template>: Composées des components déjà créés.

● Les boutons de CRUD contiennent un “div” changée dynamiquement une fois

l’un des boutons est créé, afin de rendre la page visible et les autres
invisibles.

14
 ● Côte Script:

Cette on appelle au méthode de user-profile qui rend les données de l’utilisateur

actuellement authentifié, afin de peupler la page.

15
 ➔ CRUD Professeur:

Une fois l’un des boutons CRID est cliqué, les autres sont plus visibles, et seul le
CRUD du bouton cliqué est visible.

Toutes les pages CRUD de l’admin, sont manipulées avec les props et emit de
vuejs.

Ce sont deux méthodes qui nous permettent d’envoyer des données entre
components, père et fils, et vice versa.

16
 ➔ ADD Event:

Ce bouton, sert à ajouter un événement au emploi du temps, ou on peut spécifier la

date de début de l'événement, titre et Réservation salle.

17
 B. Professeur:

➔ Page Initial:

18
➔ CRUD note :

➔ Add Event:

19
 C. Etudiant:

➔ Page Initial:

➔ Consulter Note:

20
D- Base de données:

-----------------MAPPING--------------------

1) Création du Base de données :

A l’aide de phpmyAdmin on peut créer une base de données, avec le nom

‘gestionetudiant’.

Et après on modifie le fichier .env pour connecter laravel et la base de

données.

2) Migrations
a) Structure Des Fichiers :

21
 b) Migrations :

Laravel nous donne la possibilité de créer une base de données avec les
migrations.

Chaque classe de migration aura deux fonctions:

● up(): créer la table, cette méthode contient les attributs de la table.
● down(): Supprime la table s’il existe
●
En représentant les attributs avec la classe Blueprint.

➔ Table ‘users’:

➔ Table ‘etudiants’:

22
Les clés étrangères sont representee par, il référence la table ‘users’ :

➔ Table ‘admin’:

➔ Table ‘professeurs’:

23
➔ Table ‘modules’:

➔ Table ‘notes’:

➔ Table ‘events’:

24
 ➔ Table ‘pfe’:

3) Base de données:

Après avoir exécuter la commande: « php artisan migrate »

La base de données sera construite:

25
 I. Authentification:

1) Json Web Token

JWT: (Json Web Token ), est parmis les méthodes les plus sécurisées
d'échanges d’informations entre client et serveur.

Une fois qu'un nouvel utilisateur est connecté (logged in), le serveur lui assigne un
code dite Token JWT.

JWT est sauvegardée dans le côté client.

JWT a un temps d’expiration qui peut être précisé.

Une fois que l'utilisateur envoie une requête au serveur, JWT va accompagner cette
requête, s’il est connu par le serveur, la requête passe sinon la requête sera rejetée.

Une JWT token est constituée de trois partie:

● Header:

● Payload:

● Signature: Un code crypté généré par la combinaison du payload et

header.

26
 2) Contrôleur d’authentification:
Le contrôleur d’authentification nous permet de faire cinq actions principales pour
l’authentification d’un utilisateur:

● Registration (Sign Up):

Cette méthode permet de valider les données de la registration, à l’aide du classe

validator.
Si la validation est refusée, une erreur 400 sera envoyée.
Sinon, un nouvel utilisateur sera créé.

● Connection (Log In):

On valide les informations entrées par l’utilisateur avec la classe validator.

Si la validation est un succès,on crée un Token JWT et on l’associe avec
l’utilisateur.

27
● Déconnecter (Log out):

● User - Profile:

Cette méthode retourne les données de l’utilisateur actuellement authentifié.

28
 3) Authentifier les requêtes:

Afin d’authentifier les requêtes envoyées par chaque utilisateur.

Il suffit d’ajouter le constructeur suivant dans chaque classe contrôleur de chaque
utilisateur.

Une fois qu'une requête est envoyée par l’utilisateur à un contrôleur, Il passe par le
middleware ‘auth:api’ qui vérifie si l’utilisateur est bien authentifié . Si oui il vérifie le
token JWT, Si oui, la requête va passer.

● Authentifier par type:

Si la requête est bien validée par, On doit filtrer selon le type de l’utilisateur.

Un étudiant ne peut pas faire les fonctions d’un admin, etc.

Afin de faire ça, il suffit d’ajouter la condition dans la méthode de chaque contrôleur,
qui va contenir le code à exécuter.

Pour L’admin:

29
Pour Professeur:

Pour l’étudiant:

II. Explication du Backend:

1) Admin:

L’Admin est l’acteur principal dans le package de gestion d’utilisateur, ses fonctions
principales sont la manipulation des utilisateurs et en plus il possède un accès total à
toute autre fonctionnalité propres aux autres utilisateurs.

A. Tableau de Fonctions:

Fonctions Description Package

getEtud() Sélectionner tous les étudiants Gestion Utilisateur
getProf() Sélectionner tous les Gestion Utilisateur
professeurs
getAllPfe() Sélectionner le pfe et son Gestion Pfe
étudiant et encadrant
correspondant
getNotes() Sélectionner la note de Gestion Note
chaque étudiant dans chaque
module
getmodules() Sélectionner le modules et Gestion module
son professeur

30
getEvents() Sélectionner tous les Gestion d’emploi de temps
événements de l’emploi du
temps
updatePFE() Modifier sujet, commentaire et Gestion Pfe
deadline
updateNOTE() Modifier la note d’un module Gestion Note
pour un étudiant.
updateProf() Modifier les attribut d’un prof Gestion Utilisateur

updateEtud() Modifier les attribut d’un Gestion Utilisateur

étudiant
updateMOD() Modifier module Gestion module
deletePFE() Supprimer un pfe Gestion Pfe

deleteMODULE Supprimer un module Gestion module

()

destroyEtud() Supprimer un étudiant Gestion Utilisateur

destroyProf() Supprimer un professeur Gestion Utilisateur

destroyNote() Supprimer une note Gestion Note

store() Créer un Professeur ou Gestion Utilisateur

étudiant
createEvent() Ajouter un événement au Gestion d’emploi de temps
emploi du temps

ajouterModule Ajouter un Module pour un Gestion module

s() professeur creer

31
 B. Explication des Fonctions:

1. Package: “Gestion d’utilisateur” :

➔ getEtud():

A l’aide de l’ORM Eloquent fourni par Le framework Laravel, on peut faire la

sélection de tous les éléments de la table Etudiant aisément avec la requête:

return Etudiant::all();

➔ getProf():

32
➔ store():

Cette méthode sert à créer un nouvel utilisateur et l’ajouter, selon son type,
au table correspondante, soit Etudiants ou Professeurs.

L’admin, une fois authentifié, il appelle la méthode “register” du contrôleur

“Authcontroller” et passe comme argument les informations soumis par
l’administrateur, sauvegardée dans la variable “$request”.

33
● La deuxième partie consiste à ajouter le nouvel utilisateur a son table
correspondante:

➔ updateProf():

34
Une fois l’ID du professeur est soumis avec les nouveaux données, on modifie les
données dans la table d’utilisateur, à l'aide de la clé étrangère du professeur:

Et puis dans la table des professeurs.

➔ updateEtud():

Une fois l’ID du l’étudiant est soumis avec les nouveaux données, on modifie les
données dans la table d’utilisateur, à l'aide de la clé étrangère de l'étudiants:

Et puis dans la table des étudiants.

35
 ➔ destroyProf():

Une fois l’ID du professeur est passée, on supprime l’utilisateur dans la table “users”
et automatiquement à l'aide de “onDelete(‘cascade’)”, le professeur correspondant
sera supprimé.

➔ destroyEtud():

36
 2. Package: “Gestion Note”:

➔ getNotes():

Dans cette méthode on sélectionne les notes et le module et l'étudiant auquel il

correspond.

37
 ➔ updateNOTES():

On peut modifier les notes avec le query “->update([ ])”

➔ destroyNotes():

3. Package: “Gestion Modules” :

38
➔ getmodules():

➔ deleteMODULE():

➔ ajouterMODULE():

39
 4. Package: “Gestion PFE” :

➔ getAllPfe():

Afin de sélectionner les PFEs avec l'étudiant et l’encadrant correspondant, On peut

créer notre propre objet JSON, contenant ces informations.

Après avoir sélectionné toutes les pfes:

A l’aide d’un loop foreach, et array_push on va créer notre propre objet json.

40
L'objet final retournée sera sous la forme:

➔ updatePFE():

41
➔ deletePFE():

5. Package: “Gestion d’emploi de temps” :

➔ getEvents():

42
 ➔ createEvent():

2) Professeur:

Le Professeur est considéré comme acteur dans tous les packages sauf les gestion
d’utilisateurs.
Et il a la possibilité de:

● Consulter Étudiant, modules, pfe, emploi.

● Ajouter des événement au emploi.
●
C. Tableau de Fonctions:

Fonctions Description Package

getModules() Sélectionner tous les modules Gestion modules
propres au professeur.
getPfe() Sélectionner tous les PFEs ou Gestion PFE
le professeur est un encadrant
getNote() Sélectionner les notes des Gestion notes
étudiant pour les modules du
professeur
ajouterNote() Ajouter une note à un étudiant Gestion notes
pour un module spécifique.

43
 deleteNote() Supprimer la note d’un Gestion notes
étudiant
getEvent() Sélectionner les événements Gestion emploi de temps
creer par le prof
createEvent Créer de nouvel événement Gestion emploi de temps

D. Explication de Fonctions:

6. Package: “Gestion Note” :

➔ getNote():

On construit un objet de la même façon avec array_push , cet objet va contenir l’ID
de la note, nom d'étudiant,note, nom de module et la mention correspondante.

44
 ➔ ajouterNote():

➔ deleteNote():

On peut supprimer une note avec le query de l’ORM Eloquent, ->delete()

45
 7. Package: “Gestion modules” :

➔ getModules():

Retourne tous les modules du professeur:

46
 8. Package: “Gestion PFE” :

➔ getPfe():

A l’aide des clés étrangères dans la table du pfe, qui correspond au encadrant, on
peut sélectionner tous les profs ou le prof est en tant qu’un encadrant.

47
 9. Package: “Gestion emploi de temps” :

➔ geEvent():

➔ createEvent():

3) Etudiant:

L’étudiant a la possibilité de:

● Consulter notes, modules, pfe, emploi.

E. Tableau de Fonctions:

48
 Fonctions Description Package
getModules() Sélectionner tous les modules. Gestion modules
getPfe() Sélectionner le PFE de Gestion PFE
l'étudiant.
getNotes() Sélectionner les notes de Gestion notes
chaque module.
getEvent() Sélectionner les événements Gestion emploi de temps
créer par tous les professeurs

F. Explication de Fonctions:

➔ getModules():

On fait une sélection simple de tous les éléments du tableau Modules.

➔ getPfe():

On sélectionne le PFE qui correspond au étudiante avec la clé étrangère

49
 ➔ getNotes():

On crée un objet contenant la note de l'étudiant, de chaque module.

50
 ➔ getEvents():

On sélectionne toutes les événements qui constitue la table ‘events’ dans la base de
donnée.

51
E-Les outils et les languages utilisées:

Laravel 8:

Laravel est un framework web open-source écrit en PHP respectant le principe

modèle-vue-contrôleur et entièrement développé en programmation orientée objet.
Laravel est distribué sous licence MIT, avec ses sources hébergées sur GitHub.

VueJs 3 :

Vue.js, est un framework JavaScript open-source utilisé pour construire des

interfaces utilisateur et des applications web monopages. Vue a été créé par Evan
You et est maintenu par lui et le reste des membres actifs de l'équipe principale
travaillant sur le projet et son écosystème.

HTML 5:

52
 HTML est un langage informatique utilisé sur l'internet. Ce langage est utilisé pour
créer des pages web. L'acronyme signifie HyperText Markup Language, 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.

CSS 3:

Le terme CSS est l'acronyme anglais de Cascading Style Sheets qui peut se traduire
par "feuilles de style en cascade". Le CSS est un langage informatique utilisé sur
l'internet pour mettre en forme les fichiers HTML ou XML. Ainsi, les feuilles de style,
aussi appelé les fichiers CSS, comprennent du code qui permet de gérer le design
d'une page en HTML.

Bootstrap 5:

Bootstrap est un Framework CSS qui permet de garantir un aspect unique quel que
soit le navigateur grâce à une compatibilité totale intégrée ce qui permet de disposer
d’une application responsive.

JavaScript:

53
JavaScript (souvent abrégé JS) est un langage de programmation de scripts créé en
1995 par Brendan Eich, principalement employé pour améliorer l'ergonomie d'un site
Internet et/ou d'une interface applicative utilisateur. C'est un langage orienté objet à
prototype, c'est-à-dire que les bases du langage et ses principales interfaces sont
fournies par des objets qui ne sont pas des instances de classes, mais qui sont
chacun équipés de constructeurs permettant de créer leurs propriétés, et notamment
une propriété de prototypage qui permet d'en créer des objets héritiers
personnalisés.

JQuery:

JQuery est un Framework JavaScript sous licence libre qui permet de faciliter des
fonctionnalités communes de JavaScript. L'utilisation de cette bibliothèque permet
de gagner du temps de développement lors de l'interaction sur le code HTML d'une
page web. JQuery possède par la même occasion l'avantage d'être utilisable sur
plusieurs navigateurs web (cf. Internet Explorer, Firefox, Chrome, Safari ou Opera).

AJAX:

54
 AJAX est l'acronyme d'Asynchronous JavaScript And XML, ce qui transcrit en
français, signifie « JavaScript et XML asynchrones ». Derrière ce nom se cache un
ensemble de technologies destinées à réaliser de rapides mises à jour du contenu
d'une page Web, sans qu'elles nécessitent le moindre rechargement visible par
l'utilisateur de la page Web. Les technologies employées sont diverses et dépendent
du type de requêtes que l'on souhaite utiliser, mais d'une manière générale le
JavaScript est constamment présent.

55