Post on 18-Jul-2018
Rapport de stage de fin d’études
Page 1
Remerciements
Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou e loin m’ont
apporté leur aide et qui m’ont permis d’enrichir mes connaissances afin que ce rapport
de stage de fin d’études soit à l’hauteur.
Mr. Hassan ZEROUALI mon tuteur de stage pour sa disponibilité, sa confiance et ses
conseils qui m’ont permis de progresser sans cesse durant ces 2 mois de stage.
Ma famille, pour le soutien et la patience qu’elle m’a témoignée.
Finalement, je remercie Monsieur le Directeur de l’École Supérieure de Technologie
d’Essaouira Blaid BOUGADIR et les enseignants de la filière Génie Informatique pour
la qualité d’enseignement et leurs efforts fournis pour notre formation.
Rapport de stage de fin d’études
Page 2
Table des matières
Remerciements ............................................................................................................... 1
Introduction .................................................................................................................... 4
1. Présentation de la RAMSA ....................................................................................... 6
a) Identification de la RAMSA : ................................................................................ 6
b) Fiche technique : .................................................................................................. 6
c) Organigramme : ................................................................................................... 7
d) Identification des services et divisions: ............................................................... 8
i. Divisions :.......................................................................................................... 8
ii. Services : ......................................................................................................... 10
e) Activités du service informatique : .................................................................... 11
i. Rôle du service : ............................................................................................. 11
2. La mission de stage : .............................................................................................. 13
a) But du projet : .................................................................................................... 13
b) Pourquoi utiliser l’API GOOGLE MAPS ? ........................................................... 14
i. HISTORIQUE SUR L’API : ................................................................................. 14
ii. Définition : ...................................................................................................... 14
iii. Pourquoi utiliser la version 3 ? ....................................................................... 14
Comment implémenter l’API dans l’application ? .................................................... 15
3. Analyse et conception: .......................................................................................... 17
a) Analyse : diagramme de cas d’utilisations ......................................................... 17
i. Méthode UML : .............................................................................................. 17
ii. Le diagramme de cas d’utilisation : ................................................................ 18
b) Conception : ....................................................................................................... 19
i. La méthode merise : ....................................................................................... 19
ii. Le modèle conceptuel de données: ............................................................... 20
iii. Le modèle logique de données : .................................................................... 21
iv. Le modèle physique de données :.................................................................. 22
4. Réalisation de l’application : ................................................................................. 25
Rapport de stage de fin d’études
Page 3
a) Outils utilisés : .................................................................................................... 25
i. MYSQL : .......................................................................................................... 25
ii. PHP : ............................................................................................................... 25
iii. L’API Google MAPS : ....................................................................................... 25
iv. HTML5 / CSS3 / JAVASCRIPT :........................................................................ 25
b) L’interface graphique : ....................................................................................... 26
i. Partie public :.................................................................................................. 26
ii. L’espace client : .............................................................................................. 27
iii. L’espace administrateur : ............................................................................... 30
Conclusion ..................................................................................................................... 36
Rapport de stage de fin d’études
Page 4
Introduction
Ce stage, d'une durée de deux mois, consiste à réaliser une application web de gestion
de clients en utilisant l'API Google maps, c'est essentiellement un projet de carte.
Ce rapport présente le travail que j'ai effectue lors de mon stage au sein de la RAMSA,
il s'est déroulé du 8 mars à 8 mai 2012.
Le projet réalisé s'est avéré très intéressant et très enrichissant pour mon expérience
professionnelle. Grâce a ce stage, j'ai travaillé sur un projet qui m'a permis d'entrevoir
en quoi consiste la profession de développeur informatique.
Le projet se base sur deux axes principaux :
1. Etablir un système de gestion de clients et de zones d’actions de la RAMSA
dans une application WEB en se basant sur la combinaison PHP/MYSQL.
2. Mettre en place un système de localisation des clients et des zones d’actions en
utilisant l’API GOOGLE MAPS pour bénéficier des services gratuits offerts
par cet API en terme de géo localisation et des cartes détaillées présentes par ce
dernier.
Le but de ce rapport est de faire une présentation de tous les aspects techniques que j'ai
pu apprendre ou approfondir durant ma période de stage.
Je vous expose dans ce rapport en premier lieu une présentation de l'entreprise d'accueil
(RAMSA) et du service ou j'ai passé mon stage (Service Informatique).
Ensuite je vous explique les différents aspects de mon travail durant ces 2 mois.
Enfin en conclusion je résume les apports de ce stage.
Rapport de stage de fin d’études
Page 5
PARTIE 1 :
Présentation de l’entreprise
Rapport de stage de fin d’études
Page 6
1. Présentation de la RAMSA
a) Identification de la RAMSA :
La Régie Autonome Multiservices d’Agadir : RAMSA est un organisme semi-public
ayant pour missions principales :
llaa ggeessttiioonn ddeess rréésseeaauuxx ddee ddiissttrriibbuuttiioonn dd’’eeaauu ppoottaabbllee eett dd’’aassssaaiinniisssseemmeenntt
lliiqquuiiddee ddaannss ssoonn tteerrrriittooiirree dd’’aaccttiioonn
llaa ccoommmmeerrcciiaalliissaattiioonn ddeess pprreessttaattiioonnss dd’’ééttuuddee eett dd’’aaccccoommppaaggnneemmeenntt,, aauuxx
ddiifffféérreennttss aacctteeuurrss ((pprroommootteeuurrss,, aaddmmiinniissttrraattiioonnss,, iinndduussttrriieess,, eettcc..)) aassssoocciiééss
àà cceess rréésseeaauuxx..
b) Fiche technique :
Dénomination sociale : Régie Autonome Multiservices d’Agadir (RAMSA)
Date de création : 16/09/1982
Forme juridique : Etablissement semi-public à caractère commercial et industriel doté de la personnalité civile et de l’autonomie financière
Mission : Assurer la distribution de l’eau potable et gérer l’assainissement liquide au sein du Grand Agadir.
Nombre de clients : 164 000 (2009)
Chiffre d’affaires : 375 M Dhs (2009) Eau: 248 M Dhs Assainissement: 127 M Dhs
Nombre d’effectif : 415 dont 53 cadres (2009)
Siège social : Rue 18 novembre, BP 754 QI Agadir
Téléphone : 05 28 22 30 30
Fax : 05 28 22 01 15
Site web : www.ramsa.ma
Rapport de stage de fin d’études
Page 7
c) Organigramme :
Le Conseil d’Administration de la RAMSA a pour mission la détermination de la
stratégie globale et l’approbation du budget et des comptes officiels. La dispose
également d’un Comité de Direction pour l’étude des projets, des marchés et des
projets de budget.
L’établissement est présidé par un Directeur dont la tâche est de gérer l’ensemble des
divisions et des services de la régie.
L’organigramme de la régie est le suivant :
Rapport de stage de fin d’études
Page 8
d) Identification des services et divisions:
i. Divisions :
I. Division d’eau :
La RAMSA a été crée pour assurer en un premier lieu l’alimentation des citoyens du
grand Agadir en eau potable ; l’ONEP étant le producteur.
Afin d’améliorer ses services et de pouvoir desservir une population plus large en
réseau d’eau potable, la RAMSA a engagé un programme d’investissement de grande
envergure afin de renforcer ses infrastructures.
Ce programme qui s’étale sur une période de dix ans stipule :
LLaa ccrrééaattiioonn dd’’ééttaaggeess ddee ddiissttrriibbuuttiioonn ppoouurr ooppttiimmiisseerr lleess ccoonnddiittiioonnss ddee
pprreessssiioonnss..
LLee rreennffoorrcceemmeenntt ddee llaa ccaappaacciittéé ddee ttrraannssffeerrtt eett ddee ssttoocckkaaggee vviiaa llaa
ccoonnssttrruuccttiioonn ddee rréésseerrvvooiirrss eett ddee ssttaattiioonnss ddee ppoommppaaggee..
LLee rreennffoorrcceemmeenntt eett llaa rrééhhaabbiilliittaattiioonn dduu rréésseeaauu ppaarr llaa mmiissee eenn ppllaaccee ddee
ffeeeeddeerrss eett ddee ccoonndduuiitteess..
II. Division d’assainissement :
Cette division est composée de 79 personnes sous la direction d’un chef de division.
Elle se compose de 4 services dirigés par un chef de service. Ces services sont les
suivants :
SSeerrvviiccee ééttuuddeess..
SSeerrvviiccee eennvviirroonnnneemmeenntt..
SSeerrvviiccee ttrraavvaauuxx..
SSeerrvviiccee eexxppllooiittaattiioonn..
Rapport de stage de fin d’études
Page 9
III. Division commerciale :
La division commerciale est celle qui entretient une relation permanente entre les
divers services de la RAMSA et le client. Sa vocation commerciale est l’accueil du
client et la réponse à ses besoins en eau et assainissement.
Cette division est composée d’un effectif de 73 personnes reparties sur huit
sections et à leur tête se trouve un chef de division qui travaille en collaboration avec
un chef de service pour une meilleure répartition des tâches et un meilleur contrôle de
section.
IV. Division d’approvisionnement :
La Division d’Approvisionnement et les moyens Généraux s’acquittent de trois
fonctions principales, à savoir :
GGeessttiioonn ddeess aapppprroovviissiioonnnneemmeennttss..
GGeessttiioonn ddeess ssttoocckkss..
GGeessttiioonn ddeess mmooyyeennss ggéénnéérraauuxx..
Cette division est composée de 23 personnes sous la direction d’un chef de division.
V. Division financière et comptabilité :
Cette division est composée d’un effectif de 33 personnes reparties sur quatre services
dirigés par un chef de division qui travaille en collaboration avec un chef de service.
Les fonctions principales de cette division sont les suivantes :
CCoommppttaabbiilliittéé ggéénnéérraallee..
CCoommppttaabbiilliittéé aannaallyyttiiqquuee..
CCoommppttaabbiilliittéé ddeess mmaattiièèrreess..
TTrrééssoorreerriiee..
Rapport de stage de fin d’études
Page 10
ii. Services :
I. Service personnel :
Le service de personnel a pour mission principale la gestion de carrière du
personnel au sein de la RAMSA. a cet effet, il doit veiller au respect des
réglementations en vigueur, à savoir : la législation du travail, le statut du personnel
des entreprises de production, de transport et de distribution d’électricité au Maroc et
les différentes notes et circulaires administratives.
Par ailleurs, le service du personnel s’occupe des affaires juridiques et des assurances.
II. Service informatique :
Le service informatique est un acteur majeur dans la définition des stratégies
d’évolution de la régie dans un temps où les nouvelles technologies occupent une place
primordiale et incontournable pour préserver la pérennité de l’entreprise et voir même
sa survie.
Ceci se traduit par l’établissement d’un plan de développement de l’informatique au
sein de la régie par l’établissement et l’actualisation d’un schéma directeur avec toutes
ses composantes (matériel, moyens, humains et formation) et de veiller à sa réalisation.
Il a aussi pour mission d’assurer l’exploitation des applications informatiques
existantes, l’assistance aux utilisateurs, l’entretien et la réparation du matériel, le
développement et la maintenance du réseau informatique, la sauvegarde des données,
la réalisation du budget informatique (équipements) et le développement d’application
de gestion.
Rapport de stage de fin d’études
Page 11
e) Activités du service informatique :
i. Rôle du service :
Le rôle du service informatique est d’exercer plusieurs activités dont les
principales sont :
LLee ddéévveellooppppeemmeenntt ddeess aapppplliiccaattiioonnss ppoouurr lleess ddiifffféérreenntteess ddiivviissiioonnss eett
sseerrvviicceess ddee llaa RRAAMMSSAA..
LL’’aassssiissttaannccee aauu cchhooiixx ddeess ssoolluuttiioonnss iinnffoorrmmaattiiqquueess aauu sseeiinn ddee llaa RRAAMMSSAA..
LL’’aassssiissttaannccee aauuxx uuttiilliissaatteeuurrss ppoouurr llaa mmiissee eenn œœuuvvrree ddee ll’’oouuttiill
iinnffoorrmmaattiiqquuee..
LL’’eexxppllooiittaattiioonn ddee cceerrttaaiinneess aapppplliiccaattiioonnss iinnffoorrmmaattiiqquueess ccrriittiiqquueess ((eexx ::
ffaaccttuurraattiioonn ddeess pprroodduuiittss))..
LLaa mmaaiinntteennaannccee dduu ppaarrcc mmaattéérriieell iinnffoorrmmaattiiqquuee ddee llaa RRAAMMSSAA..
Après la présentation des différentes divisions de la RAMSA, du service personnel et
du service informatique, et après la présentation des différentes activités de ce dernier,
la partie suivante de ce rapport va décrire ma mission de stage.
Elle va essayer de donner une vision claire sur le travail qui m’a été confié durant mes
deux mois de stage.
Rapport de stage de fin d’études
Page 12
PARTIE 2 :
La mission du stage
Rapport de stage de fin d’études
Page 13
2. La mission de stage :
a) But du projet :
Ma mission de stage est de réaliser une application WEB qui va avoir comme objectif
d’offrir une solution informatique à la gestion de clients et des zones d’actions de la
RAMSA.
Cette solution est aussi portable car, après son hébergement, l’application sera
accessible partout dans le monde.
L’application se compose de trois espaces :
LL’’eessppaaccee vviissiitteeuurr ::
Cet espace est l’interface publique de l’application, elle offre des informations
générales sur la RAMSA et ces vocations, elle offre aussi la possibilité de visualiser les
différentes zones d’actions et la localisation de tous les clients de la RAMSA sur une
carte dynamique dans la page d’accueil.
LL’’eessppaaccee cclliieenntt ::
Le client devient exigeant dans la rapidité et la qualité des échanges qu’il souhaite
avoir avec son fournisseur, alors cette espace lui fournira la possibilité de contacter
directement la RAMSA au sujet d’une réclamation/suggestion ou juste pour demander
des informations supplémentaires sur sa situation avec l’entreprise.
L’application met en place un système de messagerie à la disposition du client.
LL’’eessppaaccee aaddmmiinniissttrraatteeuurr ::
Cet espace est le plus important dans l’application, son importance se concrétise dans
les différentes fonctionnalités dont dispose l’administrateur à savoir :
o Gestion des clients.
o Gestion des zones.
o Messagerie interne avec tous les clients.
o Accès aux statistiques des zones d’action et des clients.
o Une fonction de recherche avancée sur la base de données des clients.
Rapport de stage de fin d’études
Page 14
b) Pourquoi utiliser l’API GOOGLE MAPS ?
i. HISTORIQUE SUR L’API :
L’API Google Maps vient de fêter ces 7 ans. Désormais, dans sa troisième version,
plus de 350 000 sites web l’utilisent pour afficher des cartes dynamiques.
Google Maps est d’abord connu pour son célèbre site Internet : http://maps.google.fr.
Bien que n’étant pas le premier à proposer un tel service et il est devenu le plus
populaire d’entre eux.
L’API a été proposée aux développeurs en juin 2005. Depuis lors, il s’agit de
l’interface de programmation pour Internet la plus utilisée à travers le monde. En effet,
la vitesse d’affichage, les nombreuses possibilités de l’API, la finesse de la
cartographie et la gratuité commerciale (dans certaines mesures) ont poussé nombre de
développeurs à s’intéresser à ce mode de représentation des données via une
cartographie en ligne dynamique.
ii. Définition :
Une API est une interface de programmation. Dans le cas de Google Maps, il s’agit
d’un ensemble de fonctions et classes JavaScript qui permettent de manipuler une carte
dynamiquement au sein d’un site web.
iii. Pourquoi utiliser la version 3 ?
La troisième version est actuellement conseillée par Google pour tout nouveau
développement et mise en production. La version 2 est maintenant passée en mode
« deprecated ».
Cette nouvelle API, à la différence de la version 2, repose sur le concept MVC
(modèle-vue-contrôleur) qui a permis d’alléger considérablement la taille du code
JavaScript et par conséquent d’améliorer la fluidité de la navigation.
Elle est également spécialement développée pour pouvoir être affichée sur de petits
écrans, tels que ceux qui équipent les Smartphones (iPhone et Android en tête).
Avec cette version, il n’est plus nécessaire de s’enregistrer auprès de Google pour
obtenir une clé d’utilisation de l’API.
Rapport de stage de fin d’études
Page 15
Comment implémenter l’API dans l’application ?
L’API GOOGLE MAPS va être implémenté dans deux opérations principales de
l’application :
L’ajout des clients :
Quand l’administrateur ajoute un nouveau client, il doit spécifier sa location en
utilisant une carte qui contient un marqueur.
En zoomant sur la carte et en déplaçant le marqueur il pourra définir la location exacte
du client.
L’administrateur peut par la suite modifier la location du client sur la carte si ce dernier
change d’adresse.
La gestion des zones :
Le principe est le suivant :
La RAMSA couvre des zones par ses services de distribution d’eau potable et
d’assainissement liquide. Alors l’application offre la possibilité à l’administrateur de
tracer ses zones dans une carte et les ajouter à la base de données.
Par la suite, l’application va lui offrir plusieurs fonctionnalités avancées à savoir :
o Modifier les angles d’une zone, ou la supprimer définitivement.
o avoir des statistiques précises sur les zones, comme le nombre de clients
et la liste de clients de chaque zone.
Rapport de stage de fin d’études
Page 16
PARTIE 3 :
Analyse et conception
Rapport de stage de fin d’études
Page 17
3. Analyse et conception:
La réussite d'un projet WEB dépend de plusieurs paramètres, par exemple :
Choix de meilleurs outils techniques.
Identité visuelle.
Sécurité.
Suivi d’activité.
Conception pertinente.
Alors dans cette partie je vais essayer de donner un aperçu sur la méthode d’analyse,
d’identifier la méthode de conception que j’ai choisie, et citer les différents modèles
qui décrivent l’application de différents points de vus.
a) Analyse : diagramme de cas d’utilisations
i. Méthode UML :
UML est un langage de modélisation graphique à base de pictogrammes.
Il se décompose en plusieurs sous-ensembles :
- Les vues : Les vues sont les observables du système.
- Les diagrammes : Les diagrammes sont des éléments graphiques. Ceux-ci
décrivent le contenu des vues, qui sont des notions abstraites.
- Les modèles d'élément : Les modèles d'élément sont les briques des
diagrammes UML, ces modèles sont utilisés dans plusieurs types de
diagramme.
Rapport de stage de fin d’études
Page 18
ii. Le diagramme de cas d’utilisation :
Dans mon projet je vais me servir du diagramme de cas d’utilisation qui est un
diagramme UML, qui permet de mettre en évidence les relations fonctionnelles entre
les acteurs et le système étudié.
Les acteurs principaux de mon système d’information sont :
o Le client :
Il aura la possibilité de visualiser ses informations, qui sont entrés précédemment par
l’administrateur, il pourra modifier certaines informations comme le numéro de
téléphone, le nom d’utilisateur et le mot de passe. L’application lui offre aussi la
possibilité un système de messagerie qui lui permettra de contacter l’administrateur par
des messages privés.
o L’administrateur :
Il a des fonctionnalités avancées, il est responsable de la création des comptes de
clients et de leur gestion, la gestion des zones d’action de la RAMSA sur des cartes
intégrées dans l’application.il a accès aussi au système de messagerie ou il peut
envoyer des messages à n’importe quel client.
L’acteur secondaire de mon application est le visiteur simple.
Il va voir juste la partie publique qui contient des informations générales sur la
RAMSA et une carte qui contient l’ensemble des zones et des clients.
Rapport de stage de fin d’études
Page 19
Le diagramme est le suivant :
b) Conception :
i. La méthode merise :
La Méthode Merise permet depuis de nombreuses années de construire des systèmes
d'information répondant aux exigences fonctionnelles, aux performances et à la
robustesse attendues des clients les plus difficiles.
Elle se base sue le principe de séparation des données et des traitements.
Le mode de fonctionnement de cette méthode est la décomposition du système
d’information en 3 niveaux principaux :
Client
S . I
Administrateur
<<include>>
Supprimer un clientmodifier un client
Gérer les clients
Créer une zoneModifier une zone
Gérer les zones
Supprimer une zone
rechercher un clientvisualiser les informations des clients<<extend>>
créer un client
effectuer une recherche<<include>>
envoyer un message a un client
uti l iser la messagerie
répondre aux messages des clients
<<include>>
Modifier ceratines infos
Authentification
<<include>>visualiser les infos
envoyer un message a l 'admin
Rapport de stage de fin d’études
Page 20
o Niveau conceptuel : qui décrit le modèle de l’application en utilisant le
modèle conceptuel de données.
o Niveau logique : A ce niveau de préoccupation, les modèles
conceptuels sont précisés et font l'objet de choix organisationnels. On
construit un Modèle Logique des Données (ou MLD), qui reprend le
contenu du MCD précédent, mais précise la volumétrie, la structure et
l'organisation des données telles qu'elles pourront être implémentées.
o Niveau physique : Les réponses apportées à ce dernier niveau
permettent d'établir la manière concrète dont le système sera mis en
place.
ii. Le modèle conceptuel de données:
Le modèle conceptuel de données est un schéma représentant la structure du 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.
Le MCD de l’application est composé de 7 tables, à savoir :
Client.
Admin.
Localité.
Ordre.
Secteur.
Tournée.
Message.
La table client va contenir toutes les informations des clients. La table message va
contenir les messages envoyés et reçus par les deux acteurs (l’Admin et le client).
La table localité contient les cordonnées des zones d’actions de la RAMSA ainsi que
leur noms.la table ordre contient les cordonnées de chaque client, c'est-à-dire
l’emplacement exact de sa maison sur la carte, elle contient aussi le numéro de la
maison.
Les autres tables (secteur et tournée) servent a mieux décrire les zones d’actions et les
découper en petites zones pour avoir une vision claire sur le territoire d’intervention
de la RAMSA.
Rapport de stage de fin d’études
Page 21
Le modèle conceptuel est le suivant :
iii. Le modèle logique de données :
Le modèle logique de données reprend le contenu du Modèle Conceptuel de Données,
mais précise la volumétrie, la structure et l'organisation des données telles qu'elles
pourront être implémentées.
On remarque la présence des clés étrangères dans la majorité des tables et l’absence
des tables de jointures à cause de l’absence des associations de type m-n.
Le modèle logique est la première étape vers la création de la base de données.
1,1
1,n
1,n
1,1
1,n
1,1
1,n
1,1
1,1
1,n
1,1
1,1
0,n
1,1
1,1 0,n
admin
nom_admin
prenom_admin
adresse_admin
tel_admin
email_admin
Login
Pass
Texte
Texte
Texte
Entier
Texte
Texte
Texte
id_admin
...
<pi>
client
nom_client
prenom_client
adresse_client
tel_adresse
Texte
Texte
Texte
Entier
id_client
...
<pi>
localité
l ibele_localite
lat_localite
long_localite
Texte
Réel
Réel
id_localite
...
<pi>
secteur
Libele_secteur Texte
id_secteur <pi>
ajouter
créer
rassembler
se composer
Concerner
tournée
num_tournee Entier
id_tournee <pi>
ordre
num_ordre
lat_ordre
long_ordre
Entier
Réel
Réel
id_ordre
...
<pi>
contenir
message
Text_msg
objet_msg
date_envoi
lu
etat
etat_admin
Texte
Texte
Date
Booléen
Booléen
Booléen
id_message
...
<pi>
envoyer
recevoir
Rapport de stage de fin d’études
Page 22
Le modèle logique de données est le suivant :
iv. Le modèle physique de données :
Le modèle physique de données permet de préciser les systèmes de stockage employés.
C’est une implémentation du Modèle Logique de Données dans le système de Gestion
de Base de Données retenu.
C’est la dernière étape avant la création de la base de données.
Le MPD de l’application contient 9 clés étrangères entre les 7 tables existantes.
ajouter
créer
rassembler
se composer
Concerner
contenir
envoyer
recevoir
admin
#
o
o
o
o
o
o
o
id_admin
nom_admin
prenom_admin
adresse_admin
tel_admin
email_admin
Login
Pass...
Entier
Texte
Texte
Texte
Entier
Texte
Texte
Texte
client
#
*<fi>
o
o
o
o
id_client
id_admin
nom_client
prenom_client
adresse_client
tel_adresse...
Entier
Entier
Texte
Texte
Texte
Entier
localité
#
*<fi>
o
o
o
id_localite
id_admin
libele_localite
lat_localite
long_localite
...
Entier
Entier
Texte
Réel
Réel
secteur
#
*<fi>
o
id_secteur
id_localite
Libele_secteur
...
Entier
Entier
Texte
tournée
#
*<fi>
o
id_tournee
id_secteur
num_tournee
...
Entier
Entier
Entier
ordre
#
*<fi>
o
o
o
id_ordre
id_tournee
num_ordre
lat_ordre
long_ordre
...
Entier
Entier
Entier
Réel
Réel
message
#
*<fi1>
*<fi2>
o
o
o
o
o
o
id_message
id_admin
id_client
Text_msg
objet_msg
date_envoi
lu
etat
etat_admin
...
Entier
Entier
Entier
Texte
Texte
Date
Booléen
Booléen
Booléen
Rapport de stage de fin d’études
Page 23
Le modèle physique de données est le suivant :
Avec ce modèle la partie conception du projet est achevée. La partie suivante dans ce
rapport est la partie de réalisation.
Dans cette partie, je vais essayer de décrire l’application avec des captures d’écran. Il
sera indispensable de mettre quelques commentaires pour bien clarifier les différentes
interfaces de mon application et de citer les outils utilisés pour la réalisation de
l’application.
Je vais commencer par décrire la partie publique de l’application. Ensuite je vais
donner un aperçu sur l’espace client qui n’a que deux changements principales par
rapport a la partie public a savoir :
o La présence de la messagerie.
o La possibilité de voir/modifier les informations personnelles du client
par le client lui même.
Je terminerai cette partie de réalisation par la description de l’espace le plus important
dans mon application à savoir l’espace administrateur.
FK_CLIENT_AJOUTER_ADMIN
FK_LOCALITE_CREER_ADMIN
FK_SECTEUR_RASSEMBLE_LOCALITE
FK_TOURNEE_SE_COMPOS_SECTEUR
FK_CLIENT_CONCERNER_ORDRE
FK_ORDRE_CONCERNER_CLIENT
FK_ORDRE_CONTENIR_TOURNEE
FK_MESSAGE_ENVOYER_ADMIN
FK_MESSAGE_RECEVOIR_CLIENT
admin
id_admin
nom_admin
prenom_admin
adresse_admin
tel_admin
email_admin
Login
Pass...
integer
long varchar
long varchar
long varchar
integer
long varchar
long varchar
long varchar
<pk>
client
id_client
id_ordre
id_admin
nom_client
prenom_client
adresse_client
tel_adresse
...
integer
integer
integer
long varchar
long varchar
long varchar
integer
<pk>
<fk1>
<fk2>
localité
id_localite
id_admin
libele_localite
lat_localite
long_localite
...
integer
integer
long varchar
float
float
<pk>
<fk>
secteur
id_secteur
id_localite
Libele_secteur
...
integer
integer
long varchar
<pk>
<fk>
tournée
id_tournee
id_secteur
num_tournee
...
integer
integer
integer
<pk>
<fk>
ordre
id_ordre
id_client
id_tournee
num_ordre
lat_ordre
long_ordre
...
integer
integer
integer
integer
float
float
<pk>
<fk1>
<fk2>
message
id_message
id_admin
id_client
Text_msg
objet_msg
date_envoi
lu
etat
etat_admin
...
integer
integer
integer
long varchar
long varchar
date
smallint
smallint
smallint
<pk>
<fk1>
<fk2>
Rapport de stage de fin d’études
Page 24
PARTIE 4 :
Réalisation de l’application
Rapport de stage de fin d’études
Page 25
4. Réalisation de l’application :
a) Outils utilisés :
i. MYSQL :
Pour le système de gestion de base de données (SGBD), j’ai choisi MYSQL qui fait
partie des logiciels de gestion de base de données les plus utilisés au monde, autant par
le grand public (applications web principalement) que par des professionnels.
ii. PHP :
Pour le langage d’interrogation de la base de données. J’ai choisi Le PHP. C’est
un langage de scripts libre principalement utilisé pour produire des pages Web
dynamiques via un serveur HTTP.
iii. L’API Google MAPS :
Google Maps est un service partiellement gratuit1 de cartographie en ligne. Le service
a été créé par Google. Ce service permet, à partir de l'échelle d'un pays, de pouvoir
zoomer jusqu'à l'échelle d'une rue. Deux types de vue sont disponibles : une vue en
plan classique, avec nom des rues, quartier, villes et une vue en image satellite, qui
couvre aujourd'hui le monde entier.
iv. HTML5 / CSS3 / JAVASCRIPT :
J’ai utilisé l’ensemble de ces trois langages pour :
- Styler les pages WEB de l’application.
- Ajouter du dynamisme côté client.
Rapport de stage de fin d’études
Page 26
b) L’interface graphique :
i. Partie public :
La première capture montre l’interface de la partie publique :
Cette deuxième image montre l’onglet RAMSA qui présente des informations sur la RAMSA :
Rapport de stage de fin d’études
Page 27
L’image suivante présente la page de contact de la RAMSA qui contient les différents moyens
de Contact.
Passons maintenant a l’espace client qui a deux changements principaux par rapport a la
partie publique, la présence de la messagerie et la possibilité de visualiser/modifier les
informations du client.
ii. L’espace client :
Rapport de stage de fin d’études
Page 28
L’image suivante montre le menu du client, et vous prouvez bien voir la différence :
Ensuite, la page qui contient les informations du client et sa location.
Vous pouvez bien remarquer qu’il a la possibilité de modifier le numéro de téléphone
et son login et son mot de passe.
Rapport de stage de fin d’études
Page 29
Le client a accès au système de messagerie ou il peut contacter l’administrateur, et
voila la page de messagerie :
1- Cette partie donne au client la possibilité de naviguer dans le système de
messagerie.
2- Les statistiques des messages, et les derniers messages envoyés.
3- Pour supprimer le message.
4- Pour voir le message.
Le client a aussi la possibilité d’envoyer des messages l’administrateur et voici la
page d’envoi des messages :
Rapport de stage de fin d’études
Page 30
Enfin l’espace le plus important dans l’application, à savoir l’espace
administrateur.
iii. L’espace administrateur :
Voici l’interface de l’espace Admin :
Rapport de stage de fin d’études
Page 31
L’administrateur a la possibilité d’ajouter des clients, il définit la location du client et
entre ses informations par la suite, et voici la page d’ajout :
Il a aussi la possibilité de modifier ses infos ou bien le supprimer définitivement comme le
montre la page suivante :
Rapport de stage de fin d’études
Page 32
Une autre fonctionnalité que l’application offre à l’administrateur est l’ajout des zones et
voici une capture d’écran qui montre l’Admin entrain de tracer la zone :
Bien sur après la traçer il aura à la nommer avant de valider l’action e l’ajout. L’Admin peut
aussi modifier une zone existante :
Rapport de stage de fin d’études
Page 33
Une page de statistiques a été prévue pour essayer de donner une idée générale sur les
clients et les zones:
Pour chaque zone l’Admin peut visualiser sa liste de clients :
Rapport de stage de fin d’études
Page 34
L’administrateur peut rechercher un client, il doit d’abord choisir le critère de recherche. Voici
la page de recherche :
Le système de messagerie est totalement ouvert pour l’administrateur, car il peut choisir
n’importe quel client pour lui envoyer un message :
Rapport de stage de fin d’études
Page 35
Il peut aussi consulter sa boite de réception pour voir ses messages reçus :
Rapport de stage de fin d’études
Page 36
Conclusion
IIll eesstt ttoouutt àà ffaaiitt éévviiddeenntt eett llooggiiqquuee,, dd’’aavvaannccee,, qquuee ll''eexxppéérriieennccee rreevvêêttee uunnee
iimmppoorrttaannccee ccaappiittaallee ddaannss llaa vviiee dd''uunnee ppeerrssoonnnnee qquuii vviieenntt dd''eennttaammeerr ssaa vviiee
pprrooffeessssiioonnnneellllee.. CCeettttee iiddééee ss''aapppplliiqquuee ppaarrffaaiitteemmeenntt ssuurr mmoonn ccaass ddee
ssttaaggiiaaiirree ppaarrccee qquuee mmoonn ssééjjoouurr aauu ssiieenn ddee llaa RRééggiiee AAuuttoonnoommee
MMuullttiisseerrvviicceess dd’’AAggaaddiirr aa ssiinnccèèrreemmeenntt mmooddiiffiiéé mmaa vviissiioonn ddeess cchhoosseess eett
mmaa ppeerrcceeppttiioonn ddee llaa vviiee aaccttiivvee..
PPoouurr ccoonncclluurree,, jjee ttiieennss àà ddiirree qquuee mmoonn ssttaaggee ééttaaiitt ttrrèèss uuttiillee eett jj’’ aaiimmeerraaiiss
bbiieenn eexxpprriimmeerr,, uunnee ffooiiss ddee pplluuss,, mmaa pprrooffoonnddee ggrraattiittuuddee àà mmoonn eennccaaddrraanntt
HHaassssaann ZZEERROOUUAALLII ppoouurr sseess aappppoorrttss eett sseess ccoonnsseeiillss pprréécciieeuuxx..