Remerciments

Au terme de la réalisation de ce rapport, je souhaite adresser nos sincères remerciments aux

personnes qui ont contribué de près ou de loin à sa réussite.

Je profite l'occasion pour exprimer ma sincère gratitude envers mon encadrant, M. Zakaria Naouis,
ainsi que tous les membres du service Systèmes d'Information, Télécommunications et de la
Transformation Digitale (SSITTD), pour leur précieuse contribution et leur soutien tout au long de
mon stage.

M. Zakaria, je tiens tout particulièrement à vous remercier pour votre accompagnement tout au long
de mon projet. Votre présence, votre disponibilité ont été d'une valeur inestimable. Grâce à vous,
j'ai pu relever les défis et terminer mon projet avec succès. Vos conseils avisés, votre patience et
votre bienveillance m'ont permis de progresser et de développer mes compétences professionnelles.

Nous souhaitons également adresser nos remerciements au corps administratif de l'École Supérieure
de Technologie à Essaouira pour leur soutien et leurs précieux conseils. Nous sommes
reconnaissants pour la qualité de l'enseignement offert et l'intérêt qu'ils portent à notre formation,
tout particulièrement ceux de département informatique qui nous ont apporté un soutien inestimable
tout au long de la réalisation de ce projet.

Enfin, nous tenons à remercier nos familles et nos amis pour leur soutien et leurs encouragements
pendant cette période de travail intensif. Leur soutien moral a été une source de motivation
essentielle pour nous tout au long de la rédaction de ce rapport.

1
 Résumé
Ce rapport décrit un stage d’initiation en génie informatique au sein de la province de Safi.
L'objectif de ce stage était de développer une application web pour la gestion des incidents pour
résoudre les problèmes techniques d’une manière facile. Le rapport présente les différentes étapes
du développement de l'application, les fonctionnalités mises en place, ainsi que les résultats
obtenus.

2
 Sommaire

Table des matières :

Remerciements:..............................................................................................................................1

Résumé : ........................................................................................................................................2

Sommaire: ......................................................................................................................................3

Liste des abréviations ....................................................................................................................5

Table des figures : ..........................................................................................................................6

Introduction générale:.....................................................................................................................8

Chapitre 01 : Contexte général du projet .......................................................................................9

Introduction:....................................................................................................................................9

I- Présentation de la province: .............................................................................…………….9

1. Présentation de la province de Safi: ..................................................................................9

2. Les rôles essentiels de SSITTD: .........................................................................................9

3. L’organigramme de la province de Safi…………………………………………………10

II-contexte du projet…………………………………………………………………………..10

1.contexte du projet………………………………………………………………………....10

Chapitre 02 : Analyse et Conception...............................................................................................11

Introduction:.................................................................................................................................. 11

I- Analyse et Spécifications des besoins :............................................................................... 11

1. Besoins fonctionnels : …...................................................................................................11

2. Besoins non fonctionnels :.................................................................................................11

II- Conception :..........................................................................................................................12

1. Diagramme de flux..............................................................................................................12

2. Modèle conceptuel de données:...........................................................................................13

3. Modèle logique de données :............................................................................................. 14

Chapitre 03 : Outils utilisés..................................................................................................... 15

3
Introduction:............................................................................................................................ 15

1. Environnement matériel:................................................................................................ 15
2. Environnement logiciel :................................................................................................ 15
3. Langages de programmation:......................................................................................... 17

Chapitre 04 : Mise en œuvre ...................................................................................................19

Introduction:.............................................................................................................................19

I- Interface Admin……………………………………………………………….....19

1. Page d’accueil…………………………………………………………………………19
2.Page login ………………………………………………………………...……………..20

3.Message d’erreur ……………………………………………………………………...20

4.Page « liste de déclarations » (Admin)………………………………………………...21

5.Page «Répondre »……………………………………………………………………..21

6.Page « liste des utilisateurs »………………………………………………………….22

7.Page «Ajouter un utilisateur »……………………………………………………….…22

8.Page «supprimer un utilisateur »……………………………………………………….23

9.Page «menu » ……………………………………………………………………….....23

10.logout………………………………………………………………………………….23

II- interface utilisateur:.............................................................................................................23

1.Page login …………………………………………………………………………….....24

2.Page sign up……………………………………………………………………………...24

3.Messsage d’erreur (sign up)…………… ………………………..……………………....24

4.Page Home (utilisateur)………………………………………………………………......25

5.Page « déclarer »…………………………………………………………………..……..26

6.Page « réponse »………………………………………………………………...………..26

7.Page « «contact »…………………………………………………………........................27

Conclusion:...............................................................................................................................27

Conclusion générale:.................................................................................................................28

4
 Liste des abréviations :
SSITTD: service des systèmes d'Information ,Télécommunication et de la Transformation
Digital

MCD : modèle conceptuel de données

MLD : modèle logique de données

MCC : modèle conceptuel de communication

HTML : Hyper Text Markeup Language

CSS : Cascading Style Sheets

PHP: Hyper Text Preprocessor

XAMPP: Cross platform apache MYSQL PHP PERL

5
Listes des figures
Figure 1 : logo de la province de Safi

Figure 2 : L’organigramme de la province de Safi

Figure 3 : Diagramme de flux

Figure 4 : modèle conceptuel de données

Figure 5 : modèle logique de données

Figure 6 : visual studio code logo

Figure 7 : powerAMC logo

Figure 8 : XAMPP logo

Figure 9 : HTML5 logo

Figure 10: CSS logo

Figure 11: PHP logo

Figure 12: BOOTSTRAP logo

Figure 13:page d’accueil

Figure 14: page login

Figure 15 :Message d’erreur

Figure 16 :page « liste de déclarations »

Figure 17 : page « Répondre »

Figure 18 : page « liste des utilisateurs »

Figure 19 : page « Ajouter un utilisateur »

Figure 20 : page « supprimer un utilisateur »

Figure 21 :page « menu »

Figure 22 :page login

Figure 23 :page « Sign up »

Figure 24 :Message d’erreur (Sign up »

Figure 25 :page home (utilisateur)

Figure 26 :page « déclarer »

Figure 27 : page « Réponse »

6
Figure 28 :page « contact »

7
 Introduction générale
Dans notre société de plus en plus dépendante de la technologie, la gestion des incidents techniques
est devenue une préoccupation majeure pour les organisations. Les pannes informatiques, les
défaillances du réseau et les interruptions des services en ligne peuvent avoir un impact
considérable sur les activités quotidiennes et entraîner des pertes financières importantes.

C'est avec enthousiasme que nous avons saisi l'opportunité offerte par notre stage pour développer
une application web visant à faciliter la gestion administrative des incidents techniques.

Notre stage nous a permis de mettre en pratique nos connaissances et d'utiliser notre expertise pour
concevoir et développer une application web fonctionnelle et performante.

Ce rapport se constitue de quatre chapitres, chaque chapitre et composée des sous-rubriques dont la
première chapitre sera consacré à la présentation de la province et l’étude de l’existant ,et pour la
deuxième chapitre il va traiter les étapes d’analyse et de conception de notre système qui satisfont
les spécifications du cahier des charges. La troisième chapitre abordera les outils de
développements utilisés pour la mise en œuvre de notre projet et la dernière traitera en détaillant les
résultats de notre application web. Enfin une conclusion permettra de dresser un bilan final du
projet, en faisant une projection sur l’utilisation et l’évolution des résultats.

8
Chapitre 01 : contexte général du projet
Introduction

Dans ce chapitre, on va présenter la province de Safi , et on va parler ensuite à propos du

contexte du projet.

I-Présentation de la Province

1. Présentation de la province de Safi:

Figure 1 : Logo de la province de Safi

La province ou préfecture, respectivement à dominante rurale ou urbaine, est une

collectivité territoriale de droit public dotée de la personnalité morale et l’autonomie
financière. Elle gère les affaires de la collectivité par l’intermédiaire d’une assemblée dont
le nombre des membres varie selon le nombre des habitants et fonction du découpage
administratif.

2. Les rôles essentiels de SSITTD:

Le service des Systèmes d'Information,Télécommunications et de la Transformation

Digital (SSITTD) joue un rôle essentiel au sein de la province de Safi en offrant une
assistance et un accompagnement de qualité. Il est chargé de la gestion des comptes et
d'accès pour tous les employés travaillant dans la province, veillant à ce que leurs besoins
en termes de technologies de l'information et des communications soient satisfaits de
manière optimale. De plus, le service SSITTD supervise l'annexe administrative locale
(AAL) à travers deux applications web, WhatsApp Gold et un système de gestion des
incidents. Ces outils permettent de garantir une communication fluide et rapide entre les
différents départements et d'assurer une résolution efficace des problèmes rencontrés.
Enfin, le service SSITTD joue un rôle proactif en développant des applications web
locales en réponse aux besoins spécifiques des différents services au sein de la province.
Ces applications sont conçues pour faciliter les opérations internes et améliorer l'efficacité
globale des processus au sein de la province de Safi.

3. L’organigramme de la province de Safi

9
 Figure 2 : organigramme de la province de Safi

II-Contexte du projet

Durant mon stage ‘un mois au sein de SSITTD de la province de Safi , il mon demander de
réaliser une Application-web « Système de Gestion des incidents » ; qui vise a simplifier le
signale des problèmes techniques prenant en considération que cette application-web ayant
deux interfaces «Utilisateurs» et « Administrative » .

10
Chapitre 02 : Analyse et conception
Introduction

J’expose, dans ce chapitre, la solution conceptuelle que j’ai proposée, et cette conception
du système à réaliser qui a pour but de rendre flexible la tâche de la gestion. J’ai conçu la
phase de conception d’un système d’information qui nécessite des méthodes permettant de
mettre en place un modèle. Il existe plusieurs méthodes d’analyse, j’ai choisi d'utiliser la
méthode MERISE.

Je tiens a réaliser trois modèles:

-Diagramme de flux;

- Modèle conceptuel de données ;

- Modèle logique de données ;

I- Analyse et Spécifications des besoins

1. Besoins fonctionnels :

Côté Administratif :

 Connexion /déconnexion : l’admin entre son Email et son mot de passe pour accéder à
la page qui affiche la liste des déclarations.

 Liste des incidents: l’admin vérifiée la liste des incidents ajouté par les utilisateurs.

 Page Répondre : l’admin envoie une réponse à l’utilisateur pour lui informer l’état de
son problème.

 Pages gestion des utilisateurs : l’admin ayant le droit de gérer les utilisateurs par ajouter
ou supprimer .

 Page menu : représente dans un tableau liste des incidents qui sont traités.

Côté Utilisateur :

 Connecter : l’utilisateur ayant la possibilités de se connecter par un login crée et

enregistrer par l’admin, en accédant directement à la page home.

 Déclarer un incident : Ici l’utilisateur remplie les champs pour envoyer une déclaration.

 Page réponse :Après avoir que l’utilisateur entre son Email il apparait l’état de sa
déclaration avec une petite description dans un tableau , l’état prend une seule valeur soit
traités ,non traités ou bien au cours de traitement.

2. Besoins non fonctionnels :

 Performance : L'application doit être performante et réactive, en permettant un temps de

11
 réponse rapide lors de l'accès aux, même avec une grande quantité d'informations

stockées.

 Fiabilité : L'application doit être fiable, en minimisant les erreurs, les plantages et les
interruptions de service. Elle doit être conçue de manière à garantir une disponibilité
maximale et une gestion efficace des erreurs.

 Sécurité des données : L'application devrait garantir la confidentialité et la sécurité des

données sensibles en mettant en place des mesures de protection telles que
l'authentification des utilisateurs et les autorisations d'accès.

II- Conception

1. Diagramme de flux

Ce modèle consiste à recenser la liste de tous les acteurs intervenants dans le système
d'information et à schématiser les flux d'information qu’ils échangent .

Figure 3 : Diagramme de flux

2. Modèle conceptuel de données

Le modèle conceptuel des données (MCD) a pour but d'écrire de façon formelle les données
qui seront utilisées par le système d'information. Cette étape consiste à déterminer les
différentes relations entre les entités de la base de données.

12
 Figure 4 :Modèle conceptuel de données

3. Modèle logique de données

13
Figure 5 : Modèle logique de données

14
 Chapitre 03 : Outils utilisés
Introduction

L’objectif de ce chapitre est de présenter les différents outils que j’ai utilisé lors de la
réalisation de mon site web, à savoir les langages de programmation PHP, HTML/CSS et
MySQL….

1. Environnement matériel:

Pour développer l’application, nous avons utilisé comme environnement matériel un

ordinateur portable qui possède les caractéristiques suivant :

Marque :HP

 Processeur Intel(R) Core(TM) i5-7300U CPU @ 2.60GHz 2.71 GHz

 Mémoire: 8 GO

 Système d’exploitation: Windows 10 Professionnel

2. Environnement logiciel :

a. Visual Studio code :

Visual Studio Code est un éditeur de code source gratuit et léger, développé par
Microsoft. Il offre un environnement de développement intégré (IDE) qui permet aux
développeurs d'écrire, de modifier et de déboguer du code dans différents langages de
programmation. Visual Studio Code propose de nombreuses fonctionnalités telles que la
coloration syntaxique, l'autocomplétion, la navigation intelligente dans le code, la gestion
des versions avec Git, le débogage, les extensions et bien plus encore. Il est Figure 10:
StarUML Logo 20 hautement personnalisable grâce à un large éventail d'extensions
disponibles, ce qui permet aux utilisateurs d'adapter l'éditeur à leurs besoins spécifiques.

Figure 6 : visual studio code logo

15
b. PowerAMC
PowerAMC (anciennement connu sous le nom de PowerDesigner) est un logiciel de
modélisation de données et de conception de bases de données. Il est largement utilisé
par les professionnels de l'informatique et les analystes pour concevoir, modéliser et
gérer des bases de données, des architectures d'entreprise et d'autres systèmes
d'information

Figure 7: powerAMC logo

c. XAMPP

XAMPP est un ensemble de logiciels servant à mettre en place serveur C'est une
distribution de logiciels libres (X Apache MySQL Perl PHP) offrant une bonne
souplesse d'utilisation, reconnue pour son installation simple et rapide.

Figure 8 : XAMPP logo

16
3. Langages de programmation :
a. HTML5 :

 “L'HyperText Markup Language“ en anglais et “langage de balises pour l’hypertexte“

en français est un langage informatique utilisé sur internet. Ce langage est utilisé pour
créer des pages web. L'acronyme signifie Hyper Text Markup Language, ce qui signifie
en français "langage de balisage d'hypertexte".

Figure 9: HTML5 logo

b. CSS:
CSS (Cascading Style Sheets ou en français "Feuilles de style en cascade") est utilisé
pour styliser et mettre en page des pages Web - par exemple, pour modifier la police,
la couleur, la taille et l'espacement de votre contenu, le scinder en plusieurs colonnes
ou ajouter des animations et autres éléments décoratifs.

Figure 10 : CSS logo

c. PHP

17
 Le PHP, pour Hypertext Preprocessor, désigne un langage informatique, ou un langage de
script, utilisé principalement pour la conception de sites web dynamiques. Il s'agit d'un
langage de programmation sous licence libre qui peut donc être utilisé par n'importe qui
de façon totalement gratuite.

Figure 11 : PHP logo

d. Bootstrap :

Bootstrap est un framework open source largement utilisé pour le développement web. Il
fournit un ensemble de composants et d'outils pré-conçus pour faciliter la création d'interfaces
web responsives et esthétiques.

Figure 12 : Bootstrap logo

18
Chapitre 04 : Mise en œuvre
Introduction

Dans ce chapitre nous allons présenter les interfaces et les différents pages de notre projet.

I- Interface admin
1. Page d’accueil

page d’accueil de notre application web est la porte d’entrée vers une expérience utilisateur
immersive .C’est la première page qui sera affichée ,permettant aux utilisateurs d'accéder
facilement à notre système d'authentification sécurisé.

Figure 13:page d’accueil

2.Page login

L’admin entre son email avec le mot de passe , pour passer à la page qui affiche les
déclarations.

19
 Figure 14 : page login

3.Message d’erreur :

Si l’admin a entré un mot de passe erroné , il va lui s’afficher le message d’erreur.

Figure 15 : Message d’erreur

4.Page « liste des déclarations » (Admin) :

Lorsque l’admin fait entrer son email et son mot e passe avec succès , il va directement vers la
page qui affiche les déclarations dans un tableau .

20
 Figure 16 : page « liste de déclarations »

5.Page «Répondre » :

La page répondre permet à l’admin de mettre une observation à l’utilisateur dont l’email est
écrit dans le champ email ,cette observation contient l’état de la déclarations qui va être soit
traité ,non traité ou bien au cours de traitement et un message .

Figure 17 : page « répondre »

6.Page « liste des utilisateurs » :

Cette page affiche dans un tableau la liste des utilisateurs(le nom , le prénom et aussi l’email).

21
 Figure 18: page « liste des utilisateurs »

7.Page «Ajouter un utilisateur » :

Cette page permet à l’admin d’ajouter un utilisateur en remplissant les champs ci-dessous .

Figure 19: page « Ajouter un utilisateur »

8.Page «supprimer un utilisateur » :

Lorsque l’admin entre l’email d’utilisateur à supprimer et clique sur le bouton supprimer ,
l’utilisateur va être enlevé de la liste des utilisateurs et supprimé de la base de données.

22
 Figure 20 : page « supprimer un utilisateur »

9.Page «menu » :

Cette page indique dans un tableau les utilisateurs qui ont l’état traité pour leurs déclarations.

Figure 21 : page « menu »

10.logout :

Lorsqu’on clique sur le bouton logout , il ne rend vers la page d’accueil.

II- interface utilisateur:

23
1.Page login :

Si l’utilisateur a déjà un compte il va s’authentifier en entrant son email et mot de passe.

Figure 22 : page login

2.Page sign up :

Dans le cas contraire (s’il n’a pas un compte) il va créer un compte en remplissant les
champs ci-dessous.

Figure 23 : page sign up

3.Messsage d’erreur (sign up) :

24
Lors de la création du compte , si l’utilisateur met une erreur lors de la confirmation du mot
de passe unmessage d’erreur concernant le mot de passe qui est non identique au premier sera
affiché, ou bien s’il existe déjà un compte dans la base de données avec la même adresse
email un autre message d’erreur sera affiché.

Figure 24 : Message d’erreur(sign up)

4.Page Home (utilisateur) :

Lorsque l’utilisateur entre ses données avec succès , la page home va être affiché qui donne
une idée sur l’application web .

Figure 25: page home(utilisateur)

25
 5.Page « déclarer » :

La page déclarer permet aux utilisateurs de faire une déclaration en remplissant les champs
concernant la déclaration.

Figure 26 : page « déclarer »

6.Page « réponse » :

Lorsque l’utilisateur entre son email , l’observation qu’a met l’admin pour la déclaration
d’utilisateur s’affiche dans un tableau , s’il n y a pas d’observation un petit message sera
affiché informant l’utilisateur que aucune réponse existe .

Figure 27 : page « Répondre »

26
 7.Page « «contact » :

La page contact affiche aux utilisateurs les contacts disponibles pour contacter les
responsables de la province .

Figure 28 : page « contact »

Conclusion

Les interfaces ci-dessus se sont les interfaces graphique de notre application web , ils donnent
aussi une idée plus claire sur l’application .finalement avec ce chapitre je termine la partie
développement de cette application web.

27
 Conclusion générale
Ce projet consiste à développer une application web dynamique qui permet de traiter des
problèmes techniques , afin de faciliter la tache sur les utilisateurs.

Au cours de ce rapport nous avons fait rappel à la conception de ce projet qui est basé sur la
méthode merise en réalisant les trois modèles (MCC ,MCD,MLD) , aussi on a montré les
interfaces de l’application des deux côtés (admin et utilisateur) afin de clarifier l’utilisation de
l’application web.

Par ailleurs, l’objectif principal de ce stage était la découverte des contraintes du monde de
l’entreprise et dans cette optique, il a totalement répondus à ces attentes.

Ce projet de stage d'initiation a été une bonne opportunité pour apprendre des nouvelles
technologies et cette expérience ma permis de se familiariser à la vie professionnelle et au travail
d'équipe.

28