lOMoARcPSD|40642605
Rapport de stage estnnn
Système D'Information (Université Cadi Ayyad)
Scan to open on Studocu
Studocu is not sponsored or endorsed by any college or university
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Rapport de
stage
La régie autonome de distribution d’eau et d’électricité de Marrakech
Département systèmes d’information
Division études et intégration
Année universitaire
2021/2022
Analyse, conception et réalisation
d’un référentiel des articles achetés par la
RADEEMA
Réalisé par :
M. YAHYA LEMKHARBECH
Encadré par :
M. YASSINE BOULMANE
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Je dédie ce trava
gratitude, et de rec
A mes parents, mes frères, ma sœur, mes amis
qui m’ont soutenu et encouragé durant cette année d’études.
A mon oncle Mostapha Lemkharbech qui a partagé avec moi tous les moments d’émotion
A ma famille, mes proches et a ceux qui me
donnent de l’encouragement et de la vivacité.
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Remerciements
Premièrement, je tiens mes sincères considérations à Madame NADIA EL HILALI la
Directrice Générale de la RADEEMA pour avoir bien voulu me faire profiter de cette
formation de qualité.
Je remercie aussi M. MOHAMMED BELHOUIDEG Chef de département systèmes
d'information pour m’avoir accordé ce stage, M. BOULMANE YASSINE chef division
études et intégration et mon encadrant pour tout l’effort qui m’a permis de bénéficier
amplement de ce stage et pour tous ses conseils et ses orientations durant ce stage.
J’adresse aussi mes remerciements à Mme OMAIMA BOUGTAYA, Mr. HAMZA
ELAATMANI les responsables de services étude et développement des ERPS. Un grand
merci pour leur accueil chaleureux, ainsi que pour leur patience et leurs précieux conseils. Ils
ont su me faire confiance lors de cette aventure dans le monde professionnel et ont partagé
avec moi leurs connaissances de manière très pédagogique.
Je les remercie aussi pour leur disponibilité et la qualité de leur encadrement.
Je voudrais également remercier tous les membres du département systèmes d'information
pour leur support, leurs conseils et leurs directives qui m’ont permis de mener à bien mon
stage.
Enfin, je tiens à remercier également tout le corps professoral et administratif de l’école
supérieure de technologie SAFI pour leur disponibilité, efforts et conseils tout au long de
cette année.
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Résumé
Le stage est une activité pédagogique fondamentale de prise de contact avec le milieu
professionnel et nous aide à acquérir une expérience de travail dans un cadre d’activités
normales d’une entreprise.
Pour les étudiants de filière génie informatique à EST-Safi le stage est une activité de formation
obligatoire dans le programme d’études et une occasion unique d’avoir
une formation pratique en réalisation de projet.
Dans ce rapport je vais rapporter l’essentiel de ce que j’ai effectué durant la période de stage.
Au début je vais présenter l’environnement et l’historique de la RADEEMA et traiter d’une
façon synthétique les activités des services de département systèmes d’information que j’ai
visité.
Enfin, je vais présenter les aspects analyse, conception et réalisation de mon projet
« application de gestion des articles achetés par la RADEEMA ».
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
SOMMAIRE
DEDICACES..............................................................................................................................................1
Remerciements:...................................................................................................................................... 2
Résumé................................................................................................................................................... 3
Organisme d’accueil.............................................................................................................................. 7
I. Présentation de la RADEEMA....................................................................................................... 7
I.1. Avant-propos................................................................................................................................. 7
I.2. Introduction................................................................................................................................... 7
I.3. Présentation................................................................................................................................... 8
I.4. Historiques.................................................................................................................................... 8
I.5. Mission de la RADEEMA............................................................................................................. 9
I.6. Objectif de la RADEEMA............................................................................................................ 9
I.7. L’organigramme de la RADEEMA............................................................................................ 10
I.8. La présentation du département systèmes d’information........................................................... 10
I.9. L’objectif du département systèmes d’information RADEEMA............................................... 11
Contexte de projet................................................................................................................................ 14
II. Présentation du projet................................................................................................................... 14
III. Analyse des besoins.................................................................................................................. 14
III.1. Besoins fonctionnels................................................................................................................. 14
III.2. Besoins non fonctionnels.......................................................................................................... 15
IV. Conception................................................................................................................................ 15
IV.1. Dictionnaire des données......................................................................................................... 15
IV.2. Modèle conceptuel des données.............................................................................................. 16
IV.3. Modèle logique des données.................................................................................................... 17
IV.4. Modèle physique des données................................................................................................. 18
V. Réalisation.................................................................................................................................... 19
V.1. Les technologies informatiques utilisées pour la réalisation de l’application............................ 19
V.2. Description d’application........................................................................................................... 21
V.2.1. Page d’authentification....................................................................................................... 21
V.2.2. Page d’accueil................................................................................................................... 21
V.2.3. Gestion des utilisateurs....................................................................................................... 22
V.2.4. Gestion des métiers............................................................................................................. 23
V.2.5. La page de la gestion des groupes....................................................................................... 25
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
V.2.6. Gestion des familles............................................................................................................ 26
V.2.7. Gestion des segments......................................................................................................... 28
V.2.8. Gestion des articles............................................................................................................. 29
CONCLUSION GENERALE.............................................................................................................. 32
Annexe.................................................................................................................................................. 33
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
LISTE DES FIGURES
Figure 1:Organigramme de la RADEEMA.......................................................................................... 10
Figure 2 : Organigramme de département systèmes d’information...................................................... 11
Figure 3:modèle conceptuel des données............................................................................................. 17
Figure 4:modèle logique des données................................................................................................... 17
Figure 5: modèle physique des données............................................................................................... 18
Figure 6:La page d’authentification...................................................................................................... 21
Figure 7:La page d’accueil................................................................................................................... 22
Figure 8: La page de gestion des utilisateurs........................................................................................ 22
Figure 9:Le formulaire d’ajout d’un utilisateur.................................................................................... 23
Figure 10:Le formulaire de modification d’un utilisateur.................................................................... 23
Figure 11:La page de gestion des métiers............................................................................................. 24
Figure 12:Le formulaire d’ajout d’un métier....................................................................................... 24
Figure 13:Le formulaire de modification d’un métier.......................................................................... 25
Figure 14:La page de gestion des groupes............................................................................................ 25
Figure 15:Le formulaire d’ajout d’un groupe...................................................................................... 26
Figure 16:Le formulaire de modification d’un groupe......................................................................... 26
Figure 17:La page de la gestion des familles........................................................................................ 27
Figure 18: Le formulaire d’ajout d’une famille................................................................................... 27
Figure 19:Le formulaire de modification d’une famille....................................................................... 28
Figure 20:La page de la gestion des segments...................................................................................... 28
Figure 21: Le formulaire d’ajout d’un segment................................................................................... 29
Figure 22:Le formulaire de modification d’un segment....................................................................... 29
Figure 23:La page de la gestion des articles......................................................................................... 30
Figure 24: Le formulaire d’ajout d’un article...................................................................................... 30
Figure 25:Le formulaire de modification d’un article.......................................................................... 31
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Organisme d’accueil
I. Présentation de la RADEEMA
I.1. Avant-propos
Ces dernières années, la RADEEMA n'a cessé de croître grâce à une politique dominée par
l’audace et l’ambition de compter parmi les grandes entreprises du royaume, et ce malgré les
nombreux obstacles inhérents à toute institution humaine.
Son objectif est d'accompagner et de soutenir le développement important que connaisse
la ville de Marrakech et de se doter d'infrastructures de qualité. Ceci, dans l'optique de
répondre à la demande de plus en plus exigeante de la population de Marrakech, cette
nouvelle vision ne saurait réaliser sans la mobilisation de tous de l’adoption d’une culture
cohérente avec nos ambitions.
Une culture qui a trouvé ses racines dans notre mission de service public et notre statut qui
exigent de nous une citoyenneté exemplaire et une ligne de conduite marquée par l'équité
dans nos décisions, l'éthique et la transparence dans nos relations.
Une culture qui ne nourrit de notre conviction profonde qui rien ne pourra exister dans un
esprit d'appartenance et de collaborations et que nous devons tous, femmes et hommes de la
RADEEMA, contribuer pour faire de notre Régie un exemple de réussite dans un esprit de
solidarité, de collaboration de d’équité dans nos relations les uns envers les autres.
I.2. Introduction
La RADEEMA a su confirmer son positionnement comme entreprise citoyenne grâce à une
dynamique volontariste de développement articulée autour des bonnes pratiques de
gouvernance répondant à la charte nationale des bonnes pratiques des entreprises et
établissement publics marocains En effets, la RADEEMA est prise comme pilote pour la mise
en œuvre de ladite charte.
Cette dernière est également inscrite dans une perspective de crédibilisation en tenues de
santé, de sécurité et de d’environnement, ce qui fut récompensé par une triple certification et
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
la validation d’un système de management intégré et opérationnel. La RADEEMA a pu
également accréditer sans laboratoire d’analyse d’eau potable ce qui représente une
reconnaissance de la crédibilité de ladite structure quant à l’auto surveillance de la potabilité
de l’eau.
I.3. Présentation
La régie autonome de distribution d’eau et d’électricité de Marrakech, la RADEEMA :
un établissement public qui assure la distribution de l’eau potable, de l’électricité et du service
d’assainissement liquide dans la vile Marrakech sur un territoire de plus 24 000 ha et une
population dépassant 1 000 000 d’habitants. C’est une régie communale a assise territoriale
qui est investie de la mission de service public à caractère industriel et commercial,
caractérisé par les principes e continuité de service, d’adaptabilité aux évolutions
technologies, économiques et sociales, ainsi que par l’égalité des usagers.
I.4. Historiques
La société d’électricité de Marrakech est constituée le 27 juin 1992.
La 17 juillet 1964, la ville Marrakech signé un protocole pour le rachat de la
concession, laquelle fut confiée à la société Marocaine de distribution (SDM).
Le 26 décembre 1970 et suites aux délibérations du conseil communal de la ville de
Marrakech, il a été décidé de créer à partir du 1er janvier 1971, la Régie Autonome de
distribution d’Eau et d’Electricité de Marrakech, dénommée RADEEMA et ce en
vertu du décret n° 2-64-394 du 29 septembre 1964 relatif aux régies communales.
Le 1er janvier 1998, la RADEEMA a pris en charge la gestion du service de
l’assainissement liquide suite aux délibérations de la communauté urbaine de
Marrakech.
Avril 2009, mise en service de la 1ére phase de la station d’épuration des eaux usées
de Marrakech.
Le 09 juillet 2010, la RADEEMA est passée au contrôle d’accompagnement en
substitution du contrôle préalable conformément aux dispositions de l’article 18 de la
loi 69.00 pour un mandant de 2 ans soit 2010-2012.
Le 29 décembre 2011, inauguration de la 2éme phase de de la station d’épuration des
eaux usée de Marrakech par S.M le roi Mohammed 6.
2012 : 1er triple certification QSE soit, ISO 9001 v 2008, ISO 14001 v 2004,
OHSAS 18001 v 2007.
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
2013-2016 : 2émé mandant du contrat de programme avec l’état.
2016 : Renouvellement de la triple certification QSE dans ses nouvelles versions,
soit ISO 9001 v 2015, ISO 14001 v 2015 et OHSAS 180001 V 2007.
2017-2019 : 3émé mandant du contrat de programme avec l’état.
2018 : mise en exploitation de l’unité de séchage solaire des boues issues de la
STEP.
2022(Mars) : COVID-19 Gestion de pandémie et généralisation des mesures
préventives.
2020(aout) : Signature du nouveau contrat de programme 2020-2022.
I.5. Mission de la RADEEMA
La mission principale de la RADEEMA est la distribution d’eau portable et d’énergie
électrique ainsi que la gestion du service public d’assainissement liquide conformément
aux dispositions des cahiers de charge et des normes en vigueur.
Le traitement des eaux usées collectées notamment dans l’objectif de permettre une
réutilisation des eaux usées aux fins d’irrigation des espaces vers.
L’exploitation et l’entretien des réseaux, des équipements et des ouvrages.
La réalisation des branchements et des accordements.
La réalisation des études et des travaux d’infrastructure, de renouvellement et d’extension.
I.6. Objectif de la RADEEMA :
L’objectif stratégique le plus important de la [Link] est de satisfaire au mieux les
besoins de ses abonnés en eau, électricité et en assainissement liquide.
En effet elle essaie de répondre aux préoccupations suivantes :
Un abonnement dans un délai de 48 heures.
Satisfaire les attentes de son personnel.
Gérer l’entreprise de façon à obtenir progressivement la
rentabilité nécessaire.
La mission de la RADEEMA et sa préoccupation majeure sont d’accompagner le
développement important que connaît la ville de Marrakech, assurer la sécurité de
l’approvisionnement et la gestion des services rendus à la clientèle.
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
I.7. L’organigramme de la RADEEMA
La RADEEMA se constitue de quatre directions, qui sont les suivantes :
o Direction ingénieure et investissements.
o Direction clientèle.
o Direction administrative et financière
o Direction Exploitation.
Figure 1:Organigramme de la RADEEMA
J’ai effectué mon stage au sein du département du systèmes d’ information
I.8. La présentation du département systèmes d’information
Un système d’information (SI) est un système qui traite et gère des informations à partir de
données qui lui sont fournies et qui émet à son tour, à la suite d’un certain nombre de
traitement internes, des informations susceptibles d’être utilisées par d’autres systèmes.
D’une façon générale, le DSI dirige une organisation, des services, des structures
d’informatiques, télécoms et fixe les évolutions des systèmes d’information et de
télécommunications, selon les besoins fonctionnels et la stratégie de l’entreprise. Supervise la
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
conception, la mise en œuvre et le maintien opérationnel (qualité, sécurité, fiabilité, couts,
délais) des prestations informatiques produits et des systèmes d’information et télécoms.
I.9. L’objectif du département systèmes d’information RADEEMA
L’objectif du département système d’information au sein de la RADEEMA est d’assurer un
appui technique à la direction clientèle en vue de développement du portail clientèle,
l’équipement des agences créées ou réaménagées et la mise à niveau de plateforme des
canaux de paiement, d’améliorer la disponibilité des différents systèmes, d’assurer l’appui
technique aux différentes entités de la RADEEMA, d’améliorer la solution décisionnelle et
d’implémenter les processus du référentiel ITIL.
Le premier but du système d’information est d’apporter de la valeur à la RADEEMA. Cela
doit se faire à l’aide d’un système d’information soutenant les processus métiers (alignement
du système d’information sur la stratégie de la RADEEMA).
Le département Système d’information est constitué de quatre divisions, chaque division
contient des services comme décrit dans l’organigramme ci-dessous :
Figure 2 : Organigramme de département systèmes d’information
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Division Méthodes, Qualité et Sécurité du SI :
Cette division s’occupe du maintien d’une meilleure qualité du système d’information et sa
sécurité afin de réduire le risque de perte d’information ou la divulgation des informations
confidentielles, cela en procédant à des mesures de protection telles que : la vérification de
l’existence des virus, l’installation des patchs de sécurité, la réalisation des tests d’intrusion,
etc.
Division mise à disposition des infrastructures (MDI) :
Cette division s’occupe de la gestion de deux éléments :
Premièrement la gestion des bases de données qui sont par définition une collection de
données organisées de façon à être facilement accessibles, administrées et mises à
jour.
Ces bases de données hébergent les différentes données de la régie ;
Deuxièmement elle prend en charge la gestion et l’administration des systèmes ainsi
que la gestion des sauvegardes et des restaurations des plateformes critiques de la
régie.
L’infrastructure système centrale est hébergée au niveau du Data Center
principal aménagé au siège et que j’ai eu l’occasion de la visiter.
Division Support et assistance aux Utilisateurs :
Cette division se charge de la gestion du parc informatique de la régie et de la dotation du
personnel du matériel dont il a besoin, notamment, les téléphones portables, les ordinateurs,
les imprimantes..., et des systèmes d'exploitation. Également elle se charge d'effectuer
l'inventaire annuel, de la gestion et du suivi des marchés d'achat et de location du matériel et
de prestation de service, et le traitement des réclamations du personnel par rapport aux
différentes pannes au niveau des outils informatiques (software et hardware).
Division Etude et intégration :
Cette division est responsable de l’ensemble des activités de développement informatiques
réalisées en interne ou en commandités auprès de prestataires externes par LA RADEEMA.
Elle est chargée du suivi des projets informatiques tout au long du cycle de vie des projets de
développement ou d’acquisition, depuis la spécification des besoins jusqu’à la mise en
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
production effective en passant par les tests d’exploitation. Elle couvre en outre, la gestion des
changements apportés aux applications en exploitation.
Cette division est subdivisée en deux services :
Service Etudes en Intégration des projets Techniques :
Ce service a pour mission de définir, mettre en œuvre et conduire les projets SI relatifs au
domaine SIG et métiers techniques (eau, électricité et assainissement) depuis la conception
jusqu’à la réception dans le but d’obtenir un résultat optimal et conforme au cahier des
charges exprimé par le maitre d’ouvrage au point de vue qualité, performances, cout, délai et
sécurité.
Service Etudes et Développement des ERPs :
Ce service a pour mission de définir, mettre en œuvre et conduire un projet SI relatif au
domaine métiers (achats, stock, clientèle, etc.) depuis sa conception jusqu’à sa réception dans
le but d’obtenir un résultat optimal et confiance au cahier des charges exprimé par le maitre
d’ouvrage au point de vue qualité, performance, cout, délai et sécurité.
Ainsi, c’est dans le service Etudes et Développements des ERPs que j’ai effectué mon stage
de première année.
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Contexte de projet
I. Introduction
Le référentiel des articles est une systématique utilisée par la régie autonome de distribution
d'eau et d'électricité du Marrakech (RADEEMA), afin de gérer les articles achetés par cette
dernière.
Ce référentiel a pour but de gérer les données des articles, ainsi que comme un historiques
des achats pour construire une base de données des articles qui va permettre d’établir
rapidement et d'une façon fiable les estimations financières des nouveaux projets, Ça va aussi
permettre de connaitre par métier, famille et segment les articles achetés donc e construire des
indicateurs riches et significatifs qui permettent d'avoir une idée sur l'exploitation des budgets
d'investissement.
C’est ainsi que le département des achats a décidé de répondre à ce besoin en impliquant le
service étude et développement des ERPs pour le développement d’une application
fonctionnelle, remplissant les besoins principaux des utilisateurs.
Dans la suite de ce document, on détaillera les différents aspects fonctionnels et non
fonctionnels de l’application, en partant de la spécification des besoins jusqu’à la construction
du dossier de conception et sa réalisation complète.
II. Présentation du projet
Le projet consiste en la réalisation d’une solution pour le référencement maitrisé des articles
achetés, elle doit donc répondre parfaitement au processus interne et construire un outil et de
gestion des articles au temps souhaité.
III. Analyse des besoins
III.1. Besoins fonctionnels
- Maitrise d'ouvrage : Département des achats
- Maitrise d'œuvre : Le service études et développement des ERPS.
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
L’application doit permettre et fournir les fonctionnalités suivantes :
- Saisir les informations de chaque utilisateur par l’administrateur d’application ;
- Chaque utilisateur est caractérisé par nom, Login, prénom, mot de passe et son profil ;
- Il existe trois profils qui ont le droit d’accès à l’application :
Administrateur : a le droit de modifier, ajouter, supprimer des utilisateurs et
définir ses profils ainsi que de gérer toutes les données de l’application ;
Opérateur : a le droit de saisir, modifier et supprimer les données de
l’application. A l’exception de la gestion des utilisateurs ;
Observateur : a le droit de consulter toutes les données de l’application sans les
modifier. A l’exception de la gestion des utilisateurs.
- Chaque utilisateur appartient a un seul métier ;
- On peut classer chaque article par son segment ;
- Chaque segment fait partie d’une famille ;
- Une famille appartient à un seul groupe ;
- Chaque métier contient un ou plusieurs groupes.
III.2. Besoins non fonctionnels
Ce sont les besoins qui caractérisent le système en matière de performance :
- Un temps de réponse minimale ;
- Un contrôle d’accès aux utilisateurs ;
- Une interface conviviale et facile à utiliser ;
- La mise à jour instantanée de la base de données ;
- La disponibilité et minimisation des blocages et plantages.
IV. Conception
IV.1. Dictionnaire des données
Ce tableau est utilisé pour donner une vision sur les informations qui seront stockées dans
chaque champ de la base de données de l’application :
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Code mnémonique Désignation Nature Type de donnée Description
id_user Identifiant d’utilisateur Paramètre Numérique Clé primaire
matricule_user Matriclue d’utilisateur Paramètre Alphabétique Doit être unique
nom_user Nom d’utilisateur Paramètre Alphabétique
prenom_user Prénom d’utilisateur Paramètre Alphabétique
login_user Login d’utilisateur Paramètre Alphanumérique
mdp_user Mot de passe Paramètre Alphanumérique IV.2. M
d’utilisateur o
profil_user Profile d’utilisateur Paramètre Alphabétique d
id_metier Identifiant du métier Paramètre Numérique Clé primaire è
code_metier Code du métier Paramètre Alphanumérique Doit être unique l
e
libele_metier Libele du métier Paramètre Alphabétique
Id_grp identifiant du groupe Paramètre Numérique Clé primaire
code_grp Code du groupe Paramètre Alphanumérique Doit être unique
libele_grp Libele du groupe Paramètre Alphabétique
Id_fam identifiant de la Paramètre Numérique Clé primaire
famille
code_fam Code de la famille Paramètre Alphanumérique Doit être unique
libele_fam Libele de la famille Paramètre Alphabétique
Id_segm identifiant du segment Paramètre Numérique Clé primaire
code_segm Code du segment Paramètre Alphanumérique Doit être unique
libele_segm Libele du segment Paramètre Alphabétique
Id_artcl identifiant d’article Paramètre Numérique Clé primaire
code_artcl Code d’article Paramètre Alphanumérique Doit être unique
prix_artcl Prix d’article Paramètre Numérique
libele_artcl Libele d’article Paramètre Alphabétique
conceptuel des données
Le Modèle Conceptuel de données est un schéma représentant la structure d’un système
d'information, du point de vue des données, c'est-à-dire les dépendances ou relations entre les
différentes données du système d'information, Il repose sur les notions d'entité et d'association
et sur les notions de relations. Le modèle conceptuel des données s'intéresse à décrire la
sémantique du domaine.
LE MCD obtenu, après analyse des fonctionnalités et règles de gestion demandées est le
suivant :
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Figure 3:modèle conceptuel des données
IV.3. Modèle logique des données
Un MLD permet de modéliser la structure selon laquelle les données seront stockées dans la
future base de données Pour aboutir au MLD, il suffit de suivre les règles de passage du MCD
au MLD, Les entités et les différentes associations du MCD précédent deviendront des
Tables. Et l’on aura le schéma MLD suivant :
Figure 4:modèle logique des données
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
IV.4. Modèle physique des données
L’étape de création du MPD est presque une formalité comparée à la création du MCD. En
s’appuyant sur des règles simples (et qui fonctionnent à tous les coups), l’analyste fait évoluer
sa modélisation de haut niveau pour la transformer en un schéma plus proche des contraintes
des logiciels de bases de données. Il s’agit de préparer l’implémentation dans un SGBDR.
Figure 5: modèle physique des données
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
V. Réalisation
V.1. Les technologies informatiques utilisées pour la réalisation de
l’application
HTML5 :
HTML5 : signifie « Hyper Text Markup Langage » qu'on
peut traduire par « langage de balises pour l'hypertexte ».
Il est utilisé afin de créer et de représenter le contenu d'une
page web et sa structure. D'autres technologies sont
utilisées avec HTML pour décrire la présentation d'une
page et/ou ses fonctionnalités interactives.
CSS3 :
CSS3 : Cascading Style Sheets (feuilles de styles en
cascade), servent à mettre en forme des documents web,
type page HTML ou XML. Par l'intermédiaire de
propriétés d'apparence (couleurs, bordures, polices, etc.) et
de placement (largeur, hauteur, côte à côte, dessus-
dessous, etc.), le rendu d'une page web peut être
intégralement modifié sans aucun code supplémentaire
dans la page web. Les feuilles de styles ont d'ailleurs pour
objectif principal de dissocier le contenu de la page de son
apparence visuelle.
BOOTSTRAP :
Bootstrap est un Framework développé par l'équipe du
réseau social Twitter. Proposé en open source (sous
licence MIT), ce Framework utilisant les langages HTML,
CSS et JavaScript fournit aux développeurs des outils pour
créer un site facilement. Ce Framework est pensé pour
développer des sites avec un design responsive, qui
s'adapte à tout type d'écran, et en priorité pour les
Smartphones. Il fournit des outils avec des styles déjà en
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
place pour des typographies, des boutons, des interfaces
de navigation et bien d'autres encore.
JavaScript :
Souvent abrégé en « JS », c’un langage de script léger,
orienté objet, principalement connu comme le langage de
script des pages web. Mais il est aussi utilisé dans de
nombreux environnements extérieurs aux navigateurs
web tels que [Link],. Le code JavaScript est interprété ou
compilé à la volée. C'est un langage à objets utilisant le
concept de prototype, disposant d'un typage faible et
dynamique qui permet de programmer suivant plusieurs
paradigmes de programmation : fonctionnelle, impérative
et orientée objet.
PHP :
PHP : HyperText Preprocessor, un langage de
programmation côté serveur. Principalement utilisé pour
produire des pages Web dynamiques via un serveur
HTTP. Mais pouvant également fonctionner comme
n'importe quel langage interprété de façon locale.
MySQL :
MySQL est un système de gestion de bases de données
relationnelles SQL open source développé et supporté par
Oracle. Une base de données n’est qu’une collection
structurée de données qui est organisée pour en faciliter
l’utilisation et la récupération.
WAMP :
WampServer est une plate-forme de développement Web
sous Windows pour des applications Web dynamiques à
l’aide du serveur Apache2, du langage de scripts PHP et
d’une base de données MySQL. Il possède également
PHPMyAdmin pour gérer plus facilement vos bases de
données.
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
V.2. Description d’application
V.2.1. Page d’authentification
Cette interface représente la page d’authentification, elle permet aux trois profils d’utilisateurs
d’accéder à la page d’accueil si les informations saisies sont correctes.
Figure 6:La page d’authentification.
V.2.2. Page d’accueil
Cette interface affiche le menu principal de l’application, elle contient aussi les statistiques
(nombre des utilisateurs, familles et articles) ainsi que le bouton de déconnexion permettant
de retourner à la page d’authentification.
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Figure 7:La page d’accueil.
V.2.3. Gestion des utilisateurs
Cette interface permet d’ajouter, supprimer ou modifier un utilisateur. Elle est visible
uniquement par le profil Admin :
Figure 8: La page de gestion des utilisateurs.
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Lorsque vous cliquez sur le bouton dans l'en-tête "Ajouter" le formulaire de l’ajout sera
affiché :
Figure 9:Le formulaire d’ajout d’un utilisateur.
La même chose pour le bouton modifier :
Figure 10:Le formulaire de modification d’un utilisateur.
V.2.4. Gestion des métiers
Cette page permet d’ajouter, supprimer ou modifier les métiers :
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Figure 11:La page de gestion des métiers.
Lorsque vous cliquez sur le bouton dans l'en-tête "Ajouter" le formulaire de l’ajout sera
affiché :
Figure 12:Le formulaire d’ajout d’un métier.
La même chose pour le bouton modifier :
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Figure 13:Le formulaire de modification d’un métier.
V.2.5. La page de la gestion des groupes
Cette page permet d’ajouter, supprimer ou modifier les groupes :
Figure 14:La page de gestion des groupes.
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Lorsque vous cliquez sur le bouton dans l'en-tête "Ajouter" le formulaire de l’ajout sera
affiché :
Figure 15:Le formulaire d’ajout d’un groupe
La même chose pour le bouton modifier :
Figure 16:Le formulaire de modification d’un groupe.
V.2.6. Gestion des familles
Cette page permet d’ajouter, supprimer ou modifier les familles :
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Figure 17:La page de la gestion des familles.
Lorsque vous cliquez sur le bouton dans l'en-tête "Ajouter" le formulaire de l’ajout sera
affiché :
Figure 18: Le formulaire d’ajout d’une famille.
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
La même chose pour le bouton modifier :
Figure 19:Le formulaire de modification d’une famille.
V.2.7. Gestion des segments
Cette page permet d’ajouter, supprimer ou modifier les segments :
Figure 20:La page de la gestion des segments.
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Lorsque vous cliquez sur le bouton dans l'en-tête "Ajouter" le formulaire de l’ajout sera
affiché :
Figure 21: Le formulaire d’ajout d’un segment.
La même chose pour le bouton modifier :
Figure 22:Le formulaire de modification d’un segment.
V.2.8. Gestion des articles
Cette page permet d’ajouter, supprimer ou modifier les articles :
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Figure 23: La page de la gestion des articles.
Lorsque vous cliquez sur le bouton dans l'en-tête "Ajouter" le formulaire de l’ajout sera
affiché :
Figure 24: Le formulaire d’ajout d’un article.
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
La même chose pour le bouton modifier :
Figure 25:Le formulaire de modification d’un article
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
CONCLUSION GENERALE
Pour conclure ce rapport, je peux affirmer que ce stage se situe comme prolongement de ma
première année de formation. Il plonge l'étudiant dans un monde novateur où la pratique
dépasse souvent la théorie. Une capacité d'autonomie est mise en avant pour progresser et
faire face à de nombreux problèmes.
Et Afin de mettre en valeur toutes mes connaissances acquises durant mon parcours, et pour
tester mes connaissances dans le monde de l’entreprise, j’étais amené à effectuer un stage
d’une durée d’un mois. De ce fait, j’ai pu réaliser un projet sous forme d’une application web
permettant la gestion les articles achetés par la RADEEMA.
Ce projet a encerclé toutes les connaissances acquises durant la formation au sein de l’EST-
Safi. Les moments de blocages et les erreurs qui apparaissent à la console ont été bénéfiques
pour la bonne compréhension du métier de développeur. Aussi, cela m’a permis d'améliorer
ma capacité d’analyse et de conception et de résoudre les problèmes techniques, en trouvant la
solution optimale pour chacune de ces situations.
Comme perspective, je propose d’améliorer la sécurité de l’application par l’ajout d’un
ensemble de mécanismes à savoir, le cryptage des mots de passe au niveau de la base de
données que je n’ai pas pu effectuer faute de temps.
Downloaded by Naima Echkaou (naimaechkaou02@[Link])
lOMoARcPSD|40642605
Annexe
Bibliographie :
- Openclassroom, [Link]
- WayToLearnX, [Link]
- Stackoverflow, [Link]
- Github, [Link]
- W3schools, [Link]
Downloaded by Naima Echkaou (naimaechkaou02@[Link])