Rapport de Projet de Stage

Développer un Site web location voiture

 Réaliser HOUDA ELBAZA

par : BENGHIB OUISSAL

 Encadrer par  Mr ELGAMRANI

RIAD
:
Mr MOHAMMED
 Maitre de stage
ELIDRISSI

1
 Remerciements
 Nous voulons exprimer par ces quelques lignes de
remerciements nos gratitudes envers tout d’abord
à notre encadreur, Monsieur ELGAMRANI RIAD
pour ses conseils et son encadrement. Après à tous
ceux en qui par leur présence, leur soutien, leur
disponibilité et leurs conseils nous avons trouvé
courage afin d’accomplir ce projet.
 En fin, nous ne peuvent achever ce projet sans
exprimer mes gratitudes à tous les enseignants de
CMC, pour leur dévouement et leur assistance tout
au long de cette formation.

2
 Dédicace

 Je tiens à exprimer ma profonde gratitude envers

toutes les personnes qui ont contribué à la réussite
de mon stage et à l'enrichissement de mon
parcours professionnel.
 je tiens à remercier sincèrement mon meilleur
formateur monsieur Elgamrani Riad pour sa
guidance, son expertise et son soutien constant
tout au long de cette période. Ses conseils éclairés
ont été une source d'inspiration et ont grandement
contribué à mon développement professionnel.
 Enfin, je dédie ce rapport à ma famille qui m'a
soutenu tout au long de ce stage. Leur
encouragement indéfectible a été une source de
motivation et de réconfort. Merci à tous ceux qui
ont fait de cette expérience un chapitre
inestimable de mon parcours académique et
professionnel.

3
 Table des matières
1) Introduction..................................................................................6
2) Présentation entreprise ............................................................... 7
3) Résumé………............................................................................ 8
4) Objectifs de stage .................................................................... 9
5) Tâches secondaires :................................................................ 10
6) Photoshop: ............................................................................... 10
7) Word :........................................................................................11
8) Tâches principales…………………………………………………………………………………12
1.1. Chapitre 01
1.1.1. Technologies développées................................................12
1.1.2. ReactJs.....................................................................12
1.1.3. MYSQL....................................................................13
1.1.4. PHP..........................................................................14
1.1.5. CSS .........................................................................15
1.1.6. Bootstrap…………………........................................15
1.1.7. Analyse et Conception…………………..................16
1.1. Chapitre 02
1.1.1. Introduction……………………..............................16
1.1.1.1. Diagramme de Cas d’utilisation ..............................17
1.1.2. Diagramme de classe. ………………......................18
1.1.3. mind map ………………….…………………………………………19

4
1.1. Chapitre 03
1.2 Implémentation du projet………………………..21
1.2.1 Partie Client…………..………………………………..21
1.2.2 Partie Admin………………………………..…….21
1.2.3 Page Accueil………………………...…………….…..…21
1.2.4 Page Connexion…………………….…………….…..…22
1.2.4 Listes Voitures……………..………….……………...….22
1.2.5 Ajouter des nouvelles voitures……………………..…..23
1.2.6 Gestion des réservation……… …….…….…….………23
1.2.7 Conclusion ............................................................... 24

5
 iNTRODUCTION :
La formation en développement digital, option web full stack, est un
programme éducatif axé sur l'acquisition de compétences dans le
domaine du développement web. "Full stack" signifie que la
formation couvre à la fois le développement côté client (front-end) et
le développement côté serveur (back-end) d'une application web.
Dans cette formation, les participants apprennent les langages de
programmation, les frameworks, les outils et les techniques
nécessaires pour concevoir, développer et déployer des applications
web complètes. Cela inclut la manipulation du code HTML, CSS et
Javascript,React Js ,Bootstrap, pour la partie front-end, ainsi que
l'utilisation de technologies et de langages tels que Node.js, Python,
PHP, Laravel,etc., pour la partie back-end.
Les sujets abordés peuvent également inclure la gestion de bases de
données, le développement d'API (Interfaces de Programmation
d'Applications), la sécurité web, la gestion de projet, et d'autres
compétences pertinentes pour être un développeur web polyvalent.
L'objectif est de former des professionnels capables de travailler sur
tous les aspects d'un projet web, de la conception à la mise en œuvre
complète.
Afin de comprendre le monde de l’entreprise et de prendre part à un
véritable projet, j’ai réalisé un stage avec l’entreprise web sh Service,
stage d’une période de mois, celui-ci commença au Mardi 01/01 et se
termina le mercredi 31/01.
Pendant ce stage, j’ai appris à travailler dans un environnement
technique dans lequel j’ai pu mettre en application des concepts
théoriques et pratiques acquis à la CMC (Cité métier et des
compétences).

6
2. Présentation entreprise :

 Sh Web Service :est une agence de marketing digital à

Laâyoune qui accompagne ses clients dans leur stratégie digitale,

à travers la création des sites internet et la mise en place d'une

stratégie marketing.

 Elles proposons une large gamme de services de marketing

digital de haute qualité à Laâyoune, au Sud et au Maroc,

notamment la Création Sites Internet, GRAPHIC DESIGN,

DÉVLEOPPEMENT APP, SOCIAL MEDIA MANAGEMENT,

RÉFÉRENCEMENT, MARKETING DIGITAL.

Résumé

7
 Un site web de location de voitures avec réservation et paiement en ligne offre une
plateforme pratique pour les utilisateurs souhaitant louer des véhicules de manière
rapide et sécurisée. Voici un résumé des principales fonctionnalités et
caractéristiques d'un tel site :

1. Recherche de véhicules: Les utilisateurs peuvent parcourir une sélection de

véhicules disponibles en fonction de leurs critères de recherche, tels que la marque,
le modèle, la catégorie, la disponibilité et le lieu de prise en charge
2. Comparaison de véhicules: Le site permet aux utilisateurs de comparer plusieurs
véhicules côte à côte en termes de caractéristiques, de prix et d'options disponibles,
afin de les aider à prendre une décision éclairée.
3. Réservation en ligne: Les utilisateurs peuvent effectuer une réservation en ligne en
sélectionnant les dates de location, en choisissant les options supplémentaires telles
que l'assurance et les accessoires, et en procédant au paiement sécurisé.
4. Options de location personnalisées: Le site offre la possibilité aux utilisateurs de
sélectionner des options supplémentaires telles que l'assurance, les accessoires ou
les services supplémentaires lors de la réservation en ligne.
5. Paiement en ligne sécurisé: Le site utilise des méthodes de paiement sécurisées
pour garantir la confidentialité des informations financières des utilisateurs lors du
processus de paiement en ligne.
6. Gestion du parc automobile: L'administrateur peut ajouter de nouveaux véhicules à
la flotte de location, mettre à jour les informations existantes sur les véhicules, définir
les tarifs de location et gérer la disponibilité des véhicules.
7. Gestion des réservations: L'administrateur peut visualiser toutes les réservations
effectuées sur le site, voir les détails des réservations, telles que les dates de
location, les véhicules réservés, les informations sur les clients, et gérer les
réservations en cas de modification ou d'annulation.
8. Gestion des paiements: L'administrateur peut accéder à un tableau de bord de
gestion des paiements pour suivre les transactions financières, vérifier les paiements
reçus, gérer les remboursements éventuels et résoudre les problèmes liés aux
paiements.

3. Projet de stage :

8
  4. Objectifs de stage

=>Les objectifs de ce stage sont multiples et impliquent

plusieurs aspects du développement de logiciels et de la
conception de sites Web. Voici une expansion sur ces objectifs

1. Création d'un projet fonctionnel: Le principal objectif est de

créer un projet de site Web de location de voitures entièrement
fonctionnel. Cela implique de comprendre les besoins et les
exigences du maître de stage et de l'entreprise, puis de
concevoir et de développer le site en conséquence.
2. Imagination et conception du fonctionnement du projet:
Avant de commencer à programmer, il est essentiel d'imaginer
le fonctionnement du projet dans son ensemble. Cela inclut la
définition des fonctionnalités principales, la navigation entre les
pages, le flux utilisateur et toutes les interactions prévues.
3. Structuration du projet: Une fois le concept imaginé, il faut
structurer le projet de manière logique et organisée. Cela
comprend la division du projet en modules ou composants
distincts, la définition de l'architecture globale du site et la
planification des étapes de développement.
4. Programmation du site Web: Le cœur du stage consiste à
programmer le site Web en utilisant les technologies spécifiées,
à savoir ReactJs pour le FrontEnd et PHP pour le BackEnd.
L'utilisation de Bootstrap et CSS permettra de créer une
interface utilisateur attrayante et réactive, tandis que
l'intégration avec une base de données MySQL permettra de
stocker et de gérer les données du site.
5. Respect des délais et des exigences: Un autre objectif
important est de respecter les délais impartis pour le projet et
de s'assurer que le produit final répond aux exigences fixées
par le maître de stage et l'entreprise. Cela nécessite une
gestion efficace du temps et des ressources, et communication
claire et régulière avec les parties prenantes du projet
5. Tâches secondaires :

9
5.1.PhotoShop:

Photoshop est un logiciel de retouche d'image et

de création graphique développée par Adobe Systems. Il est
largement utilisé dans le domaine de la conception graphique, de la
photographie, de l'édition d'images et de la création artistique. Voici
quelques-unes des fonctionnalités clés de Photoshop :

 Édition d'image :
 Masques :
 Travail en 3D :
 Typographie avancée :
 Gestion avancée des couleurs : Etc……..

Avant Apres
 5.1.1.Word :

10
  Microsoft Word est un logiciel de traitement de texte

développé par Microsoft. Il fait partie de la suite Microsoft

Office et est largement utilisé pour la création, l'édition, la
mise en forme et l'impression de documents. Microsoft
Word prend en charge divers formats de documents et
propose de nombreuses fonctionnalités pour la
manipulation de texte, la mise en forme de documents et
la collaboration
=> Chapitre 01
I. Tâches principales :

6.1. Technologies développées :

6.2. ReactJs

11
 ReactJS est une bibliothèque
Javascript open source, développée par Facebook, qui est
utilisée pour construire des interfaces utilisatrices interactives et
dynamiques pour les applications web. Elle est principalement
utilisée pour le développement d'applications à page unique
(SPA), mais elle peut également être utilisée pour créer des
composants d'interface utilisateur réutilisables dans des
applications web plus traditionnelles.

En résumé, ReactJS est largement utilisé dans le développement

web pour sa simplicité, ses performances et sa flexibilité dans la
construction d'interfaces utilisatrices interactives. De plus, elle
bénéficie d'une communauté importante et active, qui fournit
un soutien, des bibliothèques et des outils pour aider les
développeurs à construire des applications puissantes.

6.3.MYSQL :

12
 Pour gérer les données
de notre application doucement nous avons choisi la base de
données MySQL à cause de notre connaissance déjà acquise autour
ce système.

Qui est un Système de Gestion de Bases de Données Relationnelles

(abrégé SGBDR), c'est-à-dire un logiciel qui permet de gérer des bases
de données, et donc de gérer de grosses quantités d'informations. Il
utilise pour cela le langage SQL. Il s'agit d'un des SGBDR les plus
connus et les plus utilisés (YouTube et Wordpress utilisent MySQL, par
exemple).

MySQL peut donc s'utiliser seul, mais est la plupart du temps

combiné à un autre langage de programmation : PHP, par exemple,
pour de nombreux sites web, mais aussi Java, Python, C++, et
beaucoup, beaucoup d'autres.

13
6.4. CSS :

 Le CSS (Cascading Style Sheets) est un langage de

feuilles de style utilisé pour définir la présentation visuelle

des pages web écrites en HTML et XHTML. Il permet de

contrôler la mise en forme, le positionnement, les

couleurs, les polices de caractères et autres aspects

visuels des éléments HTML d'une page web. En résumé,

le CSS permet de rendre les pages web plus attrayantes

et plus esthétiques en stylisant leur apparence.

14
6.5. PHP :

 Le PHP, pour HyperText

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

 Créé au début des années 1990 par le Canadien et Groenlandais

Rasmus Lerdorf, le langage PHP est souvent associé au serveur
de base de données MySQL et au serveur Apache. Avec le
système d'exploitation Linux, il fait partie intégrante de la suite
de logiciels libres LAMP.

 Sur un plan technique, le PHP s'utilise la plupart du temps côté

serveur. Il génère du code HTML, CSS ou encore XHTML, des
données (en PNG, JPG, etc.) ou encore des fichiers PDF. Il fait,
depuis de nombreuses années, l'objet d'un développement
spécifique et jouit aujourd'hui une bonne réputation en matière
de fiabilité et de performances.

15
 => Chapitre 02
7.Analyse et Conception :
7.1.Introduction :

On expose, dans cette partie, la solution conceptuelle que nous avons

proposée et cette conception du système à réaliser qui a pour but de
rendre flexible. En d’autres termes, cette partie devrait répondre à la
question : comment faire ? La structure de cette partie dépend de la
nature de ce projet. Nous avons conçu la phase de conception d’un
site web qui nécessite des méthodes permettant de mettre en place
un modèle. Il existe plusieurs langages d’analyse, le plus Utilisé étant
le langages UML.

16
7.2. Diagramme de Cas d’utilisation :

Les rôles des diagrammes de cas d’utilisation sont de recueillir,

d'analyser et d'organiser les besoins, ainsi que de recenser les
grandes fonctionnalités d'un systeme.il s'agit donc de la première
étape UML pour la conception d'un système.
Différents acteurs du projet :
Clients: cet acteur est un visiteur sont rôles dans le site est crucial,
car ce sont eux qui utilisent les services proposés et qui génèrent des
revenus pour l'entreprise de location de voitures.

Admin : Pour les sites web on l’appelle généralement « le

webmaster ». C’est celui qui assure le dynamisme du site,celui qui
ajouter,supprime, une voiture,et voirs la liste des voiture résrver,plus
celui qui accepter ou annuler une demande de réservation.

Diagramme de Cas d’utilisation de notre Site Web :

17
7.3.Diagramme de classe :

Le diagramme de classes est un schéma utilisé en génie logiciel pour

présenter les classes et les interfaces des systèmes ainsi que les
différentes relations entre celles- ci. Ce diagramme fait partie de la
partie statique d'UML car il fait abstraction des aspects temporels et
dynamiques.
Une classe décrit les responsabilités, le comportement et le type d'un
ensemble d'objets. Les éléments de cet ensemble sont les instances
de la classe.

18
7.4.: MIND MAP

 Ce schéma semble être une carte mentale ou une

représentation visuelle de divers concepts et tâches liés à la

création d'un site Web pour un service de location de voitures

appelé "Site location voiture". Je vais expliquer chacun des

concepts dans le schéma.

 Site Location voiture : Le nom du service de location de voitures.

Réalisation et Conception : La réalisation fait référence au
processus de création du site Web, tandis que la conception fait
référence à la phase de planification et de conception.

19
 Admin et Client : Ce sont deux types d'utilisateurs du site Web.
L'administrateur gère le site Web, tandis que le client l'utilise pour
louer des voitures. Logique et Graphique : La logique fait référence
à la fonctionnalité et à la logique du site Web, tandis que le
graphique fait référence à la conception visuelle et à la disposition.

 la méthode UML : UML signifie Unified Modeling Language, qui

est un langage de modélisation standardisé utilisé en génie
logiciel. FrontEnd et BackEnd : FrontEnd fait référence à la partie
côté client du site Web, qui comprend l'interface utilisateur et
l'expérience utilisateur. BackEnd fait référence à la partie côté
serveur du site Web, qui comprend la base de données et la
logique côté serveur.

 base de données : Cela fait référence à la base de données qui

stockera des informations sur les voitures disponibles à la location,
les informations client et l'historique des locations. Cas
d'utilisation : Un cas d'utilisation est une description d'un scénario
d'utilisation particulier du site Web, tel que la location d'une voiture
ou la gestion des informations client.

 Diagramme de classe : Il s'agit d'un type de diagramme UML qui

montre les classes et leurs relations dans le système.

 Diagramme de Séquence : Il s'agit d'un type de diagramme UML

qui montre la séquence des messages ou des événements entre
les objets dans le système. Création design : Cela fait référence au
processus de création du design visuel du site Web.

 Création de Logo : Cela fait référence au processus de création

d'un logo pour le service de location de voitures.

20
=> 1.1.Chapitre 03
1.2 Implémentation du projet :
Cette partie dénombre la présentation des scenarios applicatifs de site
web. Nous allons présenter dans ce qui suit, les imprimes-écran des
principales interfaces réalisées dans nôtres site web.

Notre site web a deux parties :

Admin Client

Partie Admin :

1.2.3 Page Accueil :

Cette partie comprend : Le lien qui amène l’admin vers la page

de connexion

21
1.2.3 Page Connexion:

Cette page est destinée aux administrateurs du site, car ils ne

peuvent voir aucune page tant qu'ils ne s'inscrire pas .

1.2.4 Listes Voitures:

Cette partie représente la liste des voitures ajoutes par le

webmaster et il y a un bouton Supprimer pour supprimer une
voiture, et autre bouton Ajouter pour ajouter une nouvelle
voiture

22
1.2.4 Ajouter des nouvelles voitures:

L’ajout de nouveaux voitures est l'une de nombreuses taches

affectées aux l’admin de notre site web, cette tache englobe la
saisie des information de voiture comme par exemple Marque,
Matricule, Coût et l'image.
1.2.4 Gestion des réservations:

Cette partie comprend : l'admin de visualiser les demandes de

voitures réservées avec leur informations, et il peut également
accepter ou rejeter les demande

23
1.2.7 Conclusion :

En conclusion, mon stage au sein de SH WEB SERVICE a été

une expérience extrêmement enrichissante. J'ai eu l'opportunité
de mettre en pratique les connaissances théoriques acquises
au cours de mes études et d'explorer de nouveaux domaines
d'apprentissage.

Durant cette période, j'ai été confronté à divers défis qui m'ont
permis de développer mes compétences techniques et
interpersonnelles. J'ai également pu observer de près le
fonctionnement quotidien de l'entreprise et comprendre son rôle
dans son secteur d'activité.

Travailler au sein de l'équipe de SH WEV SERVICE m'a permis

de comprendre l'importance du travail d'équipe et de la
communication efficace dans un environnement professionnel.
J'ai également apprécié l'encadrement et le soutien que j'ai
reçus de la part de mes collègues et de mes superviseurs tout
au long du stage.

Enfin, je tiens à exprimer ma gratitude envers toute l'équipe de

SH WEB SERVICE pour leur accueil chaleureux et leur
mentorat tout au long de mon stage. Leur expertise et leur
soutien ont été inestimables et ont grandement contribué à mon
développement personnel et professionnel.

En somme, ce stage a été une expérience positive et

formatrice, et je suis convaincu qu'elle constituera une étape
importante dans mon parcours professionnel. Je suis impatient
d'appliquer les compétences et les connaissances acquises
dans mes futurs projets et je reste ouvert aux opportunités
d'apprentissage continu.

24
25