Office de la Formation Professionnelle et de la Promotion du Travail Direction Régionale de l’Oriental

Complexe de Formation dans les Métiers des Nouvelles Technologies de l’Information de l’Offshoring et
L’Electronique - Oujda

Rapport de stage de Fin de Formation

Filière : Développement Digital option web full stack

Période : Du 13 Février au 18 Mars 2023
Réalisé par : Malick Diop et Mame Yaram Cissokho
Encadrants à l’école  : M. Zakaria Kaddari &M. Abdelkarim Khelloufi & Mme Souhila El Fakiri
Encadré par : Madame Fatima Zahra Belkadi

Année de formation : 2022/2023

1
 Remerciements

Nous saisissons l’occasion de la rédaction de ce rapport pour exprimer Nos vifs remerciements à
Monsieur le Directeur de CFMNTIOE Oujda et nos formateurs qui nous ont accompagnés durant toute
notre formation. Nous les remercions pour le soutien sans relâche qu’il nous ont assuré durant toute la
durée de Notre formation au cours de laquelle nous avons pu établir et entretenir des relations chaleureuses
avec nos camarades .

Nos remerciements vont tout particulièrement à Monsieur Kaaouachi Abdelali Directeur de l’ENCG
d’Oujda et Madame Fatima Zahra BELKADI responsable du service informatique pour leur confiance de
nous avoir acceptés d’effectuer Notre stage au sein de l’ENCGO et d’avoir créé l’ambiance, le soutien
matériel et technique nécessaires au déroulement du travail. Nous reconnaissons que sans le soutien
technique et matériel de Madame F. Z. BELKADI, chef de service informatique, une grande partie de ce
travail n’aurait pas pu être réalisée. Nous la remercions encore une fois pour la qualité de ses remarques et
la finesse de ses recommandations qui nous ont permis de bien orienter notre travail.

2
 Nous remercions nos parents en reconnaissances à leur soutien inlassable matériel et moral qu’ils
nous ont toujours assurés et qui ont fait preuve de compréhension, d’affection et d’endurance, aucune
expression ne saurait exprimer les sentiments que nous ressentons envers eux.

Enfin tous ceux qui nous ont aidé de près ou de loin dans la réalisation de ce travail qu’il trouve ici nos
sincères reconnaissances.

3
 Liste des abréviations
ENCGO : Ecole Nationale de Commerce et de Gestion d’Oujda
UML : Unified Modeling Language
CSS : Modèle Conceptuel de Données
HTML : Modèle Logique de Données

Technologie utilisé
4
1. Visual Studio Code 
2. Laravel 
3. JavaScript 
4. Html: Hypertext Markup Language
5. Css: Cascading Style Sheets
6. XAMPP
7. UML: Unified Modeling Language
7. Bootstrap

5
 1. Visual Studio Code
Visual Studio Code est un éditeur de code extensible développé par Microsoft pour Windows, Linux et macOS. Les
fonctionnalités incluent la prise en charge du débogage, la mise en évidence de la syntaxe, la complétion intelligente du
code, les snippets, la refactorisation du code et Git intégré.

6
 2. Laravel
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.

7
 3. JavaScript
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 langages HTML et CSS, JavaScript est au cœur des langages
utilisés par les développeurs web.

8
9
 4. HTML : HyperText Markup
Languages
Le HyperText Markup Language, généralement abrégé HTML ou, dans sa dernière version, HTML5, est le langage de
balisage conçu pour représenter les pages web.

10
 5. CSS : Cascading Style Sheets
Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage
informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le
World Wide Web Consortium.

11
 6. XAMPP
XAMPP est un ensemble de logiciels permettant de mettre en place un serveur Web local, un serveur FTP et un serveur de
messagerie électronique. Il s'agit d'une distribution de logiciels libres offrant une bonne souplesse d'utilisation, réputée pour
son installation simple et rapide.

12
 7. UML : Unified Modeling Languages
Le Langage de Modélisation Unifié, de l'anglais Unified Modeling Languages, est un langage de modélisation graphique à
base de pictogrammes conçu comme une méthode normalisée de visualisation dans les domaines du développement logiciel
et en conception orientée objet.

13
14
 8. Bootstrap
Bootstrap est une collection d'outils utiles à la création du design 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.

15
 Table des matières
Introduction...........................................................................................................................................17
Problématique........................................................................................................................................19
Chapitre 1 : Présentation de l’organisme d’accueil.................................................................20
I. PRÉSENTATION DE L’ENCGO.........................................................................................................20
II. PRÉSENTATION DU SERVICE INFORMATIQUE ...............................................................................21
Chapitre 2 : Présentation du projet...............................................................................................22
I. ETUDE PRÉALABLE ............................................................................................................................22
II. MODÉLISATION ET CONCEPTION.....................................................................................................23
1. Identification des acteurs...........................................................................................................23
2. Diagramme de cas d’utilisation................................................................................................24
3. Diagramme de classes...................................................................................................................26
III. RÉALISATION ET MISE EN ŒUVRE.................................................................................................27
1) Définition :....................................................................................................................................27
2) Les interfaces de l’application :..............................................................................................27
Conclusion..............................................................................................................................................39
Annexe......................................................................................................................................................40

16
 Introduction
Au terme de deux années de formation dans le domaine du Développement digitale au sein du Complexe
de Formation dans les Métiers des Nouvelles Technologies de l’Information de l’Offshoring et de
l’Electronique Oujda, un projet de fin d’études est conduit dont l’objectif majeur est de mettre en valeur la
formation théorique que nous avions reçue durant cette formation ce qui nous permettra en outre d’établir
un premier contact avec le monde professionnel.
Après plusieurs contacts et tentatives avec des entreprises et établissements de la région, nous avons eu
de la chance d’être accepté finalement par l’Ecole Nationale de Commerce et de Gestion d’Oujda
(ENCGO). Ce choix trouve ses justifications en raison de la renommée très respectueuse qui caractérise
l’Ecole à l’échelle locale au sein de l’université Mohammed 1er, nationale vis-à-vis des autres ENCG et
internationale. Ainsi nous étions persuadées que Notre stage se déroulera dans des conditions idéales
d’information et au terme duquel, il nous permettra de perfectionner Nos connaissances en matière de
gestion et développement.
Suite à un entretien avec l’ingénieur du Service Informatique, on s’était fixé sur les points suivants :
Sujet du stage : La Gestion des Réclamations des Notes.
Durée du stage : Du 13 Février au 18 Mars 2023.

17
 Ce présent rapport de stage comporte deux chapitres. Le premier est consacré au contexte général
du stage (présentation de l’organisme d’accueil). Le deuxième est consacré aux différentes phases de la
réalisation du projet (étude, modélisation, conception et mise en place de la base de données…). Enfin une
conclusion (récapitulatif des résultats du projet).

18
Problématique
Comme dans la plupart des écoles de formation, après chaque réclamation des résultats de chaque
semestre, l’ENCGO reçoit beaucoup d’étudiants dans la direction pour la réclamation des notes.
Ce qui fait un blocage des jours dans la direction.
Afin d’éviter ce problème dans la direction de l’ENCGO, un sujet nous a été proposé par le service
informatique de l’ENCGO, dont l’objectif et de mettre au point une application qui facilite les réclamations
des notes dont le nom est la Gestion de Réclamation des Notes. Ainsi, nous avons été chargés de modéliser
le système, de mettre en place une base de données et de développer cette application.
Pour répondre à ce besoin, nous avons opté pour le langage UML pour la conception. Enfin pour
entamer une bonne mise en œuvre du projet, nous avons adopté le Framework laravel.
Notre espoir est grand que cette application, une fois mise au point, répondra aux exigences de
l’administration de l’ENCGO. Ainsi ce projet, aura pour but de faciliter la réclamation des notes pour tout
les étudiants, les professeurs, l’administration.

19
 Chapitre 1 : Présentation de l’organisme d’accueil

I. PRÉSENTATION DE L’ENCGO
L’Ecole Nationale de Commerce
et de Gestion (E.N.C.G.O), créée par
le Décret du 21 avril 2006, est un
établissement public de haute
formation à la gestion des
entreprises et des organisations qui
est rattachée à l’Université
Mohammed 1er d’Oujda.

L’E.N.C.G.O fait partie d’un réseau des Ecoles Nationales de Commerce et de Gestion qui compte
actuellement neuf E.N.C.G. Elle a démarré son activité d’enseignement pendant l’année universitaire 2004-
2005 (septembre 2004).

20
 II. PRÉSENTATION DU SERVICE INFORMATIQUE.
Le service informatique de l’ENCGO est placé sous la direction d’un ingénieur d’Etat de l’école. Il joue
le rôle d’un service d’appui à la recherche. Parallèlement à cette mission, il assure le conseil dans le
domaine de l’informatique pour l’administration de l’école.
Ses principales attributions sont :
 Procéder à l’élaboration et à la révision périodique du schéma informatique de l’école et de suivi
de ses applications.
 Elaborer les programmes informatiques.
 Participer à la formation et au perfectionnement du personnel en informatique au niveau de
l’école.
 Assister les services utilisateurs de l’école.
 Participer à l’étude des besoins en informatique.
 Gérer le matériel informatique et les données scientifiques, administratives et de gestion de
l’école.
 Veiller à la sécurité et à la qualité des travaux informatique de l’école.

21
 Chapitre 2 : Présentation du projet
Afin d’éviter toute perturbation et disfonctionnement susceptible d’altérer le bon déroulement du stage,
un planning prévisionnel a été préalablement élaboré. Il comporte les grandes lignes directives du
déroulement du stage. Ce planning obéit un timing de réalisation des principales taches du
travail (Annexe 1).

I. ETUDE PRÉALABLE

Avant d’entamer notre travail, nous avons préféré passer en revue les applications existantes et relever
leurs imperfections afin d’évaluer par la suite les besoins et les actions qui sont nécessaire d’introduire dans
notre projet.

22
 II. MODÉLISATION ET CONCEPTION

La conception idéale d’une application extensible, nécessite un langage très performant. Le langage
UML s’avère l’outil le plus approprié pour la modélisation de ce projet.
Le langage UML, vues ses performances, permet de bien mener la phase d’analyse de conception tout
en bénéficiant de la puissance et de la simplicité de ses diagrammes.

1. Identification des acteurs

Les acteurs, autrement dit les utilisateurs du système, sont définis à base des taches suivantes :
Réclame une note d’une matière.
Email de notification au professeur.
Accès des étudiants.
Gestion des Matières.
Lister les réclamations.
Gestion des professeurs.
Exporter la liste des réclamations.
Notons bien que chaque acteur doit s’authentifier afin d’accéder au système et pouvoir effectuer les
différentes opérations en fonction des droits que l’administrateur lui a accordés.

23
2. Diagramme de cas d’utilisation

24
 Fig.1 : schema du diagramme de cas
d’utilisation

Quelques règles à respecter  :

Chaque acteur ne peut effectuer une opération qu’après s’être authentifié.

Chaque étudiant a le droit de faire la réclamation
L’administrateur peut effectuer toutes les opérations indiquées ci-dessus.

25
3. Diagramme de classes

26
Fig.2 : Schema du diagramme de classes

27
 III. RÉALISATION DE L’APPLICATION  :

Cette partie constitue la phase finale en donnant et expliquant les interfaces réalisées.
1) Définition  :

La Gestion de Réclamation des Notes est une application qui permet de faciliter la réclamation des étudiants.

2) Les interfaces de l’application  :

a) L’interface d’inscription :

Fig.3 : Schema de l’interface d’inscription

28
 L'inscription d'un utilisateur se fait à travers cette interface en introduisant le nom d'utilisateur,
l’email et le mot de passe ainsi que le type d’utilisateur (Administrateur ou Etudiant).
Le login de l’utilisateur doit être unique. Dans le cas où l'utilisateur introduit une référence erronée ou
déjà existante, un message d'erreur s'affiche. Par contre, dans le cas où l'agent de saisie ne remplit pas un
ou plusieurs champs obligatoires, le système lui affiche un message d'erreur pour l’inciter à les saisir.

29
 a) L’interface d’authentification  :

Fig.4 : schema d’Interface d’authentification

L'authentification d'un utilisateur se fait à travers cette interface en introduisant le nom d'utilisateur et
le mot de passe.

30
 b) Interface des réclamations :

Le bouton envoyer permet d’envoyer la réclamation dans la base de données et un email de notification au
professeur de la matière

31
 c) Interface gestion des professeurs  :

Fig.5 : Schema de l’interface gestion des professeurs

L’icône en rouge permet de supprimer un professeur
L’icône en bleu avec le crayon permet de modifier un professeur (Interface modification d’un professeur)
Le dernier icone permet d’attribuer une matière au professeur (Interface attribuer matière)
Le bouton ajouter permet d’ajouter des professeurs (Interface ajouter professeur)

32
c-1) Interface modification d’un professeur  :

Fig.6 : Schema de l’interface modification d’un professeur

33
c-2) Interface attribuer matière  :

AFig.7 : Schema de l’interface attribuer matière

34
c-3) Interface ajouter professeur  :

Fig.8 : Schema de l’interface ajouter professeur

35
 d) Interface gestion des étudiants :

Fig.9 : Schema de l’interface gestion des étudiants 

L’icône en rouge permet de supprimer un étudiant
L’icône en bleu avec le crayon permet de modifier un étudiant (Interface modification d’un étudiant)
Le switch permet de bloqué un étudiant
Le bouton ajouter permet d’ajouter des étudiants (Interface d’ajouter des étudiants)

36
d-1) Interface modification d’un étudiant :

Fig.10 : Schema de l’interface modification d’un étudiant

37
d-2) Interface d’ajouter des étudiants :

Fig.11 : Schema de l’interface ajouter

étudiants

38
 e) Interface liste des réclamations  :

Fig.12 : Schema de l’interface liste des réclamations

L’icône en rouge permet de supprimer une réclamation
Le bouton exporter permet d’exporter la liste des réclamations sous format Word et texte

39
Conclusion
Le présent travail s’inscrit dans le contexte de la fin d’étude en développement digital (technicien
spécialisé) à CFMNTIOE Oujda qui recommande la réalisation d’un projet d’application.
Ce projet a été réalisé à l’Ecole Nationale de Commerce et de Gestion d’Oujda ‘ENCGO’. Cette
application nommée Gestion de Réclamation des notes l’ENCGO a pour de facilité la réclamation des
notes des étudiants de l’ENCGO et la réalisation de l’application en adoptant le PHP.
Pour répondre à ce besoin nous avons au préalable mené un diagnostic sur le contexte général du
projet, après laquelle nous avons entamé une phase de conception en utilisant le langage de modélisation
UML.
La réalisation de cette application nous a permis de mettre en pratique notre esprit d’étude, d’analyse
et de critique et de découvrir la différence entre les projets professionnels et ceux à caractère pédagogique.
Au terme de ce rapport nous pouvons confirmer que ce stage nous a apporté d’autres connaissances
préalablement, une nouvelle méthodologie de travail et une expérience significative grâce au développement
d’une application Web depuis la phase de maîtrise d’ouvrage jusqu’à la partie maîtrise d’œuvre
( Conception, Réalisation, Test et Déploiement ).
Ce stage s’est déroulé dans une ambiance professionnelle décontractée qui nous a permis de bien
comprendre le milieu professionnel.

40
Annexe
Annexe : Planning des taches réalisées
•
Rencontre avec le responsable.
Explication du sujet.
1ère Semaine :
Création du diagramme de use case et diagramme de classe du projet.

Réunion avec le responsable pour discuter sur les diagrammes.

2ème Semaine : Création de la base de données avec les tables nécessaires ainsi que leurs
relations.
Design l’interface de l’application

3ème, 4ème et 5ème Semaine : Le codage.

41
42