MÉMOIRE DE PROJET DE FIN D'ÉTUDES

EL HANIFI El Mahdi
El Alaoui Mustapha
juin 2017

Création d'un Site Web

Location de voiture

encadré par :
Mr.Toujgani

1
 DÉDICACE

A Dieu le tout puissant, le Clément, le glorieux, le juste et

le gracieux.

Aux personnes que nous chérissons le plus au monde, vous

avez toujours été le ambeau illuminant notre chemin et
pour toutes les privations et les peines endurées, on ne
trouve que ce modeste travail à vous dédier en espérant
avoir répondu aux espoirs que vous avez fondé en nous.

A mes chers parents.

A ma chère famille.
A mes chers amis.
A tous ceux qui me sont chers,les mots manquent aux
émotions.

2
 REMERCIEMENTS

On remercie tout d'abord Dieu le tout puissant, le

Majestueux,L'imposant, le glorieux et le bienveillant.

On tiens à remercier dans ce volet, toutes les personnes

qui ont contribué au bon déroulement de notre formation.
Dans ce sens, on tiens à adresser notre remerciements
distingués à Mr Toujgani pour son encadrement, son suivi
et son conseil.
On tiens à exprimer tous notre remerciements aux
professeurs de la faculté des sciences de Rabat(FSR) pour
tous les eorts fournis mais aussi pour leurs précieux
conseils et leurs remarques pertinentes, ainsi qu'à toute
personne ayant contribué de prés ou de loin à la
réalisation de ce modeste travail.
Que Dieu me prête un c÷ur rempli de gratitude et de
reconnaissance.

3
 INTRODUCTION

Personne aujourd'hui ne peut contester l'importance de

l'informatique comme moyen de développement et de
progrès. C'est ainsi qu'elle envahit tous les aspects de la
vie quotidienne aussi bien au niveau de l'entreprise qu'au
niveau individuel. Certes, L'établissement où vous étudiez
quelque soit sa performance vous ore un bagage non
négligeable de connaissances se basant sur des théories
préparées et développées par des grands théoriciens qui
n'ont pas hésité à chercher et analyser pour nous fournir
une base d'étude eective.
Ces théories sont actualisées par d'autres chercheurs pour
arriver à suivre les développements innombrables que vit
le monde entier.

4
Néanmoins, ce qui est incapable d'assurer à cent pour cent
est certainement la pratique et l'application eective de
tout cet énorme bagage de connaissances. Les responsables
au monde entier, conscients que la pratique et la théorie
vont de pair.
Le thème proposé par l'encadrant concerne la mise en
place d'une application web de gestion de location de
voitures an d'informatiser ces moyens de transport
(Voitures, Camions, Motos,etc).
Ce Projet permettra de faciliter la communication entre
clients et l'agence de location. En conséquence on a pu
concevoir un projet d'application permettant d'exposer
tout les moyens de transports et les mettre à jour.

5
 SOMMAIRE

CHAPITRE I :PRESENTATION DU SUJET 7

INTRODUCTION AU CHAPITRE 8
PRESENTATION DU SUJET DE PROJET 8
SENARIO POSSIBLES 11
CHAPITRE II :ANALYSE ET CONCEPTION 12
ANALYSE 13
CONCEPTION 13
UML 14
MERISE 16
CHAPITRE III :REALISATION 20
OUTILS ET LANGAGES UTILISES 21
ENVIRONNEMENT DE DEVELOPPEMENT 29
QUELQUES IMPRIMES PAGES DE L'APPLICATION 32
CONCLUSION 44
LISTE DES FIGURES 43
WEBOGRAPHIE 47
ANNEXE 48

6
Chapitre I
Présentation du sujet
(Application Web)

7
1 - Introduction au chapitre :
Ce chapitre expose une présentation de la problématique
du projet au niveau de l'existant et des besoins dans un
premier lieu, et explique les diérentes étapes de la
conception de l'application réalisée dans un second lieu.

2 - Présentation du sujet de projet :

Dans ce présent module, nous allons essayer de faire une
étude, conception et réalisation d'une application pour une
agence de location de voiture"MWs".À l'aide d'une
application Web simple et facile à utiliser vu le besoin
d'une bonne gestion de la location des moyens de
transports et de la communication entre les clients et les
responsables de l'agence.

But à atteindre :

8
Notre projet consiste à concevoir et développer une
application web d'une agence de location de voiture en
ligne.

Dénition de la mission :

Nous souhaitons proposer une solution complète de

location en ligne qui ore les fonctions standard de
fonctionnement d'une société de location de voiture à
savoir réserver une voiture, consulter les réservation ainsi
que gérer les véhicules et les clients. Ce site dispose d'une
interface graphique, et il doit pouvoir aussi connecter à
une base de données.

Objectif à atteindre :

Les principes objectifs à atteindre concernant ce site web

sont les suivants :
* Prévoir un site web assez dynamique et simple pour
assurer la cohérence des processus.
* Accélérer l'élaboration des documents techniques précis
et cohérents.
9
 * Avoir une base de données adéquate an de faciliter la
suivie des demandes de location.
* Appliquer des outils de développements an d'améliorer
la qualité de ce site.
* Faciliter la communication entre client et agence.
* Gérer la location des moyens de transports  Voitures
.
* Gérer les réservations des voitures.
* Utiliser un Bootstrap (framework).

Les règles de gestion :

* Un client a un Numéro unique, un mot de passe unique,

un nom et prénom et une adresse E-mail.
* Un administrateur a un Numéro unique, un mot de
passe unique, un nom et prénom et une adresse E-mail.
* Un utilisateur est soit un utilisateur normal (visiteur
ou client), soit un administrateur (chef de service).
* Un client réserve un ou plusieurs voiture.
* Un véhicule  voiture  a un numéro unique, un nom,
et un prix.
* Une réservation a un code unique, elle possède le nu-
méro du client qui a fait la réservation, la date de début

10
 et la date de n.
* Un administrateur géré les véhicules (ajout/suppression).
* Un administrateur peut aecter une réservation à un
client comme il peut la supprimer.

3 - Scénarios possibles :

* Un utilisateur peut naviguer dans le site sans authen-

tier, il peut consulter la nouvelle actualité, comme il
peut visualiser les véhicules à louer.
* Un utilisateur veut réserver un véhicule, il doit s'au-
thentier avant de faire la réservation.
* Si un utilisateur possède d'un login et un mot de passe
peut faire une réservation, sinon il peut s'inscrire à
l'aide d'un formulaire d'inscription.
* Après l'inscription le utilisateur devient un client il peut
faire sa réservation après l'authentication.
* Le client vérie la disponibilité des véhicules après il
peut faire sa réservation an de choisir la date de début
et n de la réservation.
* Le client peut aussi modier ses informations

11
 personnelles.
* L'administrateur a le privilège d'ajouter, modier ou
supprimer un véhicule, ou une réservation.
* L'administrateur a le droit d'ajouter un nouveau
admin.

12
Chapitre II
Analyse et Conception

13
 I/ Analyse
Solution : Application Web :

Notre location vise à mettre en place une application web

qui répond aux besoins de la société "MWs", elle permet
la gestion des moyens de transports de la société "MWs".
Cette application est composée de 3 rubriques pour se
déplacer dans le site (Accueil, Véhicules, Client). Le
visiteur de site peut naviguer dans tout les endroits du
site et aussi visualiser tout les informations à propos les
véhicules à louer .
Un client a la permission de s'inscrire s'il no possède d'un
login et un mot de passe, à travers un formulaire
d'inscription qu'il doit remplir, il peut aussi accéder à son
compte seulement pour modier ses informations et faire
sa réservation comme il peut l'annuler après s'il veut.
L'accès à l'application est autorisé seulement à
l'administrateur du site après une authentication
assurant la sécurité. Cette authentication se fait par
l'insertion d'un login et d'un mot de passe.

II/ Conception :
14
1. UML :
A. Diagramme de cas d'utilisation :

Côté client :
Cette gure présente les cas d'utilisation en ce qui
concerne le côté client. Ce dernier peut s'inscrire s'il ne
possède pas un login et un mot de passe, réserver une
voiture par la suite après avoir vérier la disponibilité de
la véhicule, consulter ses réservation,et les modier ou les
annuler après.

15
Figure 1 : diagramme de cas d'utilisation du coté client.

Coté administrateur :
La gure ci-dessous présente les cas d'utilisation
concernant le côté administrateur qui ait la possibilité de
gérer les réservations et véhicules an de s'authentier
dans l'application.

16
Figure 2 :diagramme de cas d'utilisation du coté administrateur.
2. MERISE :
La méthode MERISE est une méthode de conception et
de développement du système d'information .Elle
s`adresse à toute information utilisée par l'entreprise,
quelle que soit son domaine d'activité.
Le cycle d'abstraction de la méthode Merise permet de
modéliser le système à chaque étape selon trois niveaux
de description : le niveau conceptuel, organisationnel et
17
opérationnel.
A. Modèle Conceptuel de Données (MCD) :
Cette gure est une représentation statique de notre
système d'information, elle contient 3 entités (Client,
véhicule,réservation) et une association qui représentent
les données utilisées par ce système.

Figure 3 : Model Conceptuel de Données.

18
B. Modèle Logique de Données (MLD) :
* MLD ajoute au MCD la notion d'organisation (com-
ment les données seront organisées dans une Base de
Données)
* Les entités du MCD sont converties en tables dans le
MLD
* Selon les cardinalités, les associations sont converties
en tables ou supprimées.
* Cette gure contient 3 tables qui vont composer la base
de données.

19
Figure 4 : Model Logique de Données.
.

20
Chapitre III
Réalisation

21
 I/ Outils et langages utilisés :
1. HTML5 :

HTML5 (HyperText Markup Language 5), la prochaine

révision majeure d'HTML (L'Hypertext Markup
Language, généralement abrégé HTML, est le format de
données conçu pour représenter les pages web.
C'est un langage de balisage qui permet d'écrire de
l'hypertexte, d'où son nom. HTML permet également de
structurer sémantiquement et de mettre en forme le
contenu des pages, d'inclure des ressources multimédias
dont des images, des formulaires de saisie, et des éléments
programmables tels que des applets).
Cette version est en développement en 2012. HTML5
spécie deux syntaxes d'un modèle abstrait déni en
termes de DOM Document Object Model , il décrit une
interface indépendante de tout langage de programmation
et de toute plate-forme, permettant à des programmes
informatiques et à des scripts d'accéder ou de mettre à
jour le contenu, la structure ou le style de documents
22
XML.

2. CSS : Cascading Style Sheets

Le langage CSS est utilisé pour dénir l'aspect d'une page

web, comme par exemple la couleur du fond de la page ou
le type de police.
Plus concrètement, le CSS (ou feuille de style), est un
petit chier (exemple "style.css") dans lequel on dénit
l'aspect d'une page web.

3. JavaScript :

23
JavaScript est un langage de programmation de scripts
principalement utilisé dans les pages web interactives
mais aussi au niveau du serveur. C'est un langage orienté
objet à prototype, c'est-à-dire que les bases d langage et
ses principales interfaces sont fournies par des objets qui
ne représentent pas des instances de classes, mais qui sont
équipés de constructeurs permettant de créer leurs
propriétés et notamment une propriété de prototypage qui
permet d'en créer des objets héritiers personnalisés.
Le langage a été créé en 1995 par Brendan Eich (membre
du conseil d'administration de la fondation Mozilla) pour
le compte de Netscape Communications Corporation.

4. PHP :

C'est un langage de programmation interprété par le

serveur. Contrairement à FLASH et JAVA, PHP ne
nécessite pas de plugin dans votre navigateur pour
fonctionner.
24
Un site utilise PHP pour rendre sont contenu dynamique.
PHP peut être utilisé pour des formulaires, pour
interroger des bases de données ou pour alléger le travail
d'un webmestre, mais sont utilisation est loin de se résumé
à ça. Ce langage qui est complètement gratuit est utilisé
sur la majorité des sites internet au contenu dynamique.

5. WampServer :

WampServer (anciennement WAMP5) est une plateforme

de développement Web de type WAMP, permettant de
faire fonctionner localement (sans avoir à se connecter à
25
un serveur externe) des scripts PHP.
WampServer n'est pas en soi un logiciel, mais un
environnement comprenant deux serveurs (Apache et
MySQL), un interpréteur de script (PHP), ainsi que
phpMyAdmin pour l'administration Web des bases
MySQL.
Il dispose d'une interface d'administration permettant de
gérer et d'administrer ses serveurs au travers d'un tray
icon (icône près de l'horloge de Windows).

6. phpMyAdmin :

phpMyAdmin (PMA) est une application Web de gestion

pour les systèmes de gestion de base de données MySQL
réalisée en PHP et distribuée sous licence GNU GPL.
Il s'agit de l'une des plus célèbres interfaces pour gérer
une base de données MySQL sur un serveur PHP. De
nombreux hébergeurs, gratuits comme payants, le
26
proposent ce qui évite à l'utilisateur d'avoir à l'installer.
Cette interface pratique permet d'exécuter, très
facilement et sans grandes connaissances en bases de
données, des requêtes comme les créations de table de
données, insertions, mises à jour, suppressions et
modications de structure de la base de données, ainsi que
l'attribution et la révocation de droits et l'import/export.
Ce système permet de sauvegarder commodément une
base de données sous forme de chier .sql et d'y transférer
ses données, même sans connaître SQL.

7. MySQL :

MySQL permet de gérer des bases de données. C'est à

dire qu'il est capable d'enregistrer, modier, rechercher
rapidement des données. Il est utilisable sur de nombreux
système d'exploitation.
MySQL est aujourd'hui utilisé par plus de 11 millions
27
d'utilisateurs à travers le monde, particulièrement dans
les sites web utilisant le langage PHP, où de véritables
utilisations 'complexes' peuvent y être aperçues. MySQL
est distribué sous licence GPL, il s'agit d'un logiciel libre.

8. Sublime Text :

Sublime Text est un éditeur de texte générique codé en

C++ et Python, disponible sur Windows, Mac et Linux.
Ce logiciel vous permet également de colorer les mots
dénis par l'utilisateur.

9. Bootstrap (framework) :

28
Bootstrap est une collection d'outils utile à la création du
design (graphisme, animation et interactions avec la page
dans le navigateur,...) de sites et d'applications web. C'est
un ensemble qui contient des codes HTML et CSS, des
formulaires, boutons, outils de navigation et autres
éléments interactifs, ainsi que des extensions JavaScript
en option. C'est l'un des projets les plus populaires sur la
plate-forme de gestion de développement GitHub.

10. PowerAMC :

Pour le modèle conceptuel de données et le modèle

logique de données. Power AMC permet de réaliser tous
les types de modèles informatiques. Il reste un des seuls
qui permet de travailler avec la méthode Merise. Selon
Ri News, cela permet d'améliorer la modélisation, les
processus, le coût et la production d'applications.

29
II/ L'environnement de développement :
1. Mise en ÷uvre du site :
a. Espace des utilisateurs du site web :
Visiteur : Un visiteur a le droit de naviguer dans les
pages du menu horizontal du site à savoir (Accueil,
Véhicules, Client). Il reçoit aussi les privilèges suivants :

Figure 5 : Les fonctionnalités de visiteur.

Administrateur :
Les fonctions d'une session administrateur sont :

30
 Figure 6 : Les fonctionnalités de l'administrateur.

2. Architecture de navigation du site web :

Le site proposera 3 rubriques :
* Accueil : Présente une vision générale sur l'agence et
les galeries des photos des véhicules.
* Véhicules : C'est la partie la plus importante. Elle re-
présente toutes les véhicules disponibles ainsi les zones
pour sélectionner la date de début et de n de la réser-
vation.
* S'inscrire : c'est la partie réservé pour l'inscription
pour les nouveaux clients et aussi l'authentication.

31
 Figure 7 : schéma de navigation du site web.

3. Elaboration de la base de données :

32
 Figure 8 : la Base de données de site web.

III/ Quelques imprimes pages de l'application commentées :

1. Espace Visiteur :
a. Interface d'accueil :
L'interface suivante contient 3 rubriques pour naviguer
dans le site et aussi des informations sur la société
"MWs".

33
 Figure 9 : la page d'accueil.

b. Interface de Véhicules :
La gure(10) ci-dessous représente la page de Véhicules
où nous trouvons les diérents véhicules.si l'utilisateur
veut réserver un véhicule il faut qu'il possède d'un login
et un mot de passe pour réaliser cette opération, sinon un
message d'erreur s'achera.

34
 Figure 10 : lister les Véhicules.

c. Interface d'inscription :
Cette gure (11) représente l'interface d'inscription ou le
visiteur peut s'authentier à l'aide d'un login et d'un mot
de passe (gure 12), ou s'inscrire dans le cas opposé
(gure 13).

35
 Figure 11 : l'interface client.

Figure 12 : Formulaire d'inscription.

36
 Figure 13 :espace connexion.

d. Interface de Client :
La gure suivante représente l'interface client qui contient
4 rubriques (accueil,Mon compte,Vehicules, réservation)
ou il peut modier ses réservations et ses informations
personnelles.

37
 Figure 14 :espace client.

e. Interface de Réservation :
Dans cet espace le client peut consulter ses réservations,
comme il peut les gérer à l'aide de la liste déroulante qui
contient 3 boutons (Lister,Modier,et Supprimer).

38
 Figure 15 :espace réservation.

f. Interface de modication des informations de client :

Dans cette gure le client a le droit de modier ses
informations personnelles.

39
 Figure 16 :modication des informations personnelles.

g. Interface de réservation de client :

Dans cette gure le client a le droit de réserver une
voiture.

40
 Figure 17 :réservation d'une voiture.
2. Espace administrateur :
a. Interface de connexion :
Cette gure représente l'interface de connexion réservée à
l'administrateur du site.

41
 Figure 18 :Interface de connexion.

b. Interface d'administrateur :
La gure suivante représente l'interface administrateur
qui contient 3 rubriques (réservation, véhicules et clients)
ou il peut gérer les réservations des clients, les véhicules
de l'agence, et les clients.

42
 Figure 19 : la page d'administrateur.

c. Interface de gestion des réservations :

Dans cette gure l'administrateur a le droit de lister,et
supprimer les réservations de chaque client.

43
 Figure 20 :espace de réservation.

d. Interface de gestion des véhicules :

La gure suivante représente l'interface de gestion des
véhicules ou l'administrateur peut supprimer,
ajouter,lister, ou modier un véhicule.

44
Figure 21 : la page de gestion des véhicules.

45
 CONCLUSION
Ce projet nous a tout d'abord permis :
De mettre en ÷uvre et d'intégrer en situation réelle les
capacités en cohérence avec mes projets personnels et
professionnels.

Sur le plan technique :

Mise en ÷uvre et intégration des connaissances techniques
acquises avant et au cours du projet, aboutissement à un
résultat concret.

Sur le plan de l'organisation :

Gestion de projet, Organisation personnelle, résolution
d'un problème avec prise en compte des contraintes de
coût, délai. . . , prise en compte des aspects économiques
et sociaux, utilisation de sources d'information diverses.

Sur le plan humain :

Travail en équipe, innovation, créativité, responsabilité,
éthique, autonomie, ouverture.
Enn,on éspere que ce modeste rapport pourra reéter le
travail sérieux qu'on a fourni pendant ce module.
46
 Listes des gures :

Figure1 :diagramme de cas d'utilisation du coté administrateur. 15

Figure2 :diagramme de cas d'utilisation du coté administrateur. 16
Figure 3 :Model Conceptuel de Données. 17
Figure 4 :Model Logique de Données. 19
Figure 5 :Les fonctionnalités de visiteur. 29
Figure 6 :Les fonctionnalités de l'administrateur. 30
Figure 7 :schéma de navigation du site web. 31
Figure 8 :la Base de données de site web. 32
Figure 9 :la page d'accueil. 33
Figure 10 : lister les Véhicules. 34
Figure 11 :l'interface client. 35
Figure 12 :Formulaire d'inscription. 35
Figure 13 :espace connexion. 36
Figure 14 :espace client. 37
Figure 15 :espace réservation. 38
Figure 16 :modication des informations personnelles. 39
Figure 17 :réservation d'une voiture. 40
Figure 18 :Interface de connexion. 41
Figure 19 :la page d'administrateur. 42
Figure 20 :espace de réservation. 43
Figure 21 :la page de gestion des véhicules. 44
47
 WEBOGRAPHIE :

www.openclassroom.com

www.wikipedia.com

https ://openclassrooms.com/courses/prenez-en-main-bootstrap

48
 ANNEXE :

Abréviation Désignation
SARL Société à
Responsabilité Limitée
HTML5 HyperText Markup
Language 5
CSS3 Cascading Style
Sheets 3
MERISE Méthode d'Etude et de Réalisation
Informatique de Système d'Entreprise
SQL Structured Query
Language
UML Unied Modeling
Language
SGBD Système de Gestion de
Bases de Données

49