36
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.

Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

Embed Size (px)

Citation preview

Page 1: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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.

Page 2: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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

Page 3: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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

Page 4: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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.

Page 5: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

Rapport de stage de fin d’études

Page 5

PARTIE 1 :

Présentation de l’entreprise

Page 6: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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

Page 7: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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 :

Page 8: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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..

Page 9: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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..

Page 10: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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.

Page 11: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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.

Page 12: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

Rapport de stage de fin d’études

Page 12

PARTIE 2 :

La mission du stage

Page 13: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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.

Page 14: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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.

Page 15: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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.

Page 16: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

Rapport de stage de fin d’études

Page 16

PARTIE 3 :

Analyse et conception

Page 17: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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.

Page 18: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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.

Page 19: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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

Page 20: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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.

Page 21: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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

Page 22: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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

Page 23: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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>

Page 24: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

Rapport de stage de fin d’études

Page 24

PARTIE 4 :

Réalisation de l’application

Page 25: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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.

Page 26: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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 :

Page 27: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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 :

Page 28: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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.

Page 29: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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 :

Page 30: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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 :

Page 31: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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 :

Page 32: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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 :

Page 33: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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 :

Page 34: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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 :

Page 35: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

Rapport de stage de fin d’études

Page 35

Il peut aussi consulter sa boite de réception pour voir ses messages reçus :

Page 36: Rapprt Stage fin etudes TAOUFIK Mohamed · Rapport de stage de fin d’études Page 1 Remerciements Je tiens à exprimer ma reconnaissance à toutes les personnes qui de près ou

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..