RAPPORT DE STAGE TECHNIQUE 

Gestion d’un Garage Automobile.

Filière :

Génie informatique

2021/2022

:
Réalisé par Encadré par :
-
ECH-CHAOUY
Page 1 of 28 Jaouad -Pr EL RHOUBARI Zineb
 Remerciements
Avant tout développement sur cette expérience, il apparaît opportun de commencer ce
rapport de stage par des remerciements, à ceux qui m’ont beaucoup appris au cours de ce
stage, et même à ceux qui ont eu la gentillesse de faire de ce stage un moment très profitable.
Aussi, je remercie Mme EL RHOUBARI Zineb, mon encadrante de stage qui m’a
formé et accompagné tout au long de cette expérience avec beaucoup de patience et de
pédagogie. Enfin, je remercie l’ensemble des membres de la direction de l’école supérieure de
technologie Sidi Bennour, et spécialement Monsieur NAJIB SABER et tous mes professeurs.

Page 2 of 28
 Introduction
Le sujet de mon projet est très important car la plupart des garages ont des
problèmes de gestion des clients, des stocks et des ouvriers.
Le but ultime de ce projet est de faciliter la gestion des stocks, des
travailleurs et des clients, et aussi les caractéristiques restantes très importantes
de ce projet est de connaître l'étape de l'entretien des véhicules.

LISTE DES FIGURES :

Figure 1:logo JavaScript.............................................................................................................11

Page 3 of 28
Figure 2:logo HTML/CSS..........................................................................................................11
Figure 3:logo Java.......................................................................................................................13
Figure 4:logo php........................................................................................................................13
Figure 5:logo NetBeans..............................................................................................................15
Figure 6: logo SQLite.................................................................................................................15
Figure 7:logo noTepad++...........................................................................................................16
Figure 8: logo Visual Studio Code.............................................................................................16
Figure 9:logo XAMPP................................................................................................................16
Figure 10: Page d'accueil............................................................................................................18
Figure 11: Interface des Clients..................................................................................................19
Figure 12: Interface de Gestion de Stock....................................................................................20
Figure 13: Page d'accueil Publique.............................................................................................21
Figure 14: Formulaire de demande.............................................................................................22
Figure 15: Login administrateur.................................................................................................22
Figure 16: Table de Bord............................................................................................................23
Figure 17: Interface des Mechanicus..........................................................................................23
Figure 18: tableau des demandes................................................................................................24
Figure 19: la liste des catégories.................................................................................................24
Figure 20: liste des services........................................................................................................25
Figure 21:liste des administrateurs.............................................................................................25
Figure 22: la base des données...................................................................................................26
Figure 23:présentation de base des données...............................................................................26

Page 4 of 28
TABLE DES MATIERES 
Remerciements........................................................................................................................................2
Introduction.............................................................................................................................................3
LISTE DES FIGURES :.................................................................................................................................4
TABLE DES MATIERES...............................................................................................................................5
Chapitre 1 :..............................................................................................................................................6
1-problematique :......................................................................................................................7

2-Cahier des charges :...............................................................................................................7

2-1 : Application web :.........................................................................................................7

2-1 : Application desktop :....................................................................................................7

3- Étude du cahier des charges :...............................................................................................8

4- Présentation de l’application :..............................................................................................8

Chapitre 2 :............................................................................................................................................10
1 – Les langages :....................................................................................................................11

Front-end.............................................................................................................................11

Back-end.............................................................................................................................13

2 - Outils :...............................................................................................................................15

Chapitre 3 :............................................................................................................................................17
1-Application desktop :...........................................................................................................18

1-1 - Partie d’accueil :.........................................................................................................18

2-1- Partie de client :...........................................................................................................19

3-1-partie de gestion de stock :...........................................................................................20

2-Application web :................................................................................................................21

2-1- Partie d’accueil publique :...........................................................................................21

2-2- Partie d’administration :..............................................................................................22

Conclusion..............................................................................................................................................27
Webographie :.......................................................................................................................................28

Page 5 of 28
 Chapitre 1 :
Analyse et présentation de Projet

Page 6 of 28
1-problematique :
De nombreux ateliers d'entretien automobile sont confrontés au problème de la
communication avec les clients, ce qui entraîne une perte de temps.
Gestion de l'entretien des véhicules est une application de gestion d’un garage automobile

Ce stage a été pour nous l'occasion de remettre en cause notre technique de travail, et
Notamment de corriger les erreurs faites durant le premier stage.

C'est ainsi que j’ai mis en œuvre la planification des travaux à effectuer, ce qui m’a
vraiment permis de réaliser le temps et le volume de travail qu'un tel projet pouvait nécessiter.

Grâce à cette application, elle devrait être résiliée à temps si tout se passe bien.

2-Cahier des charges :

2-1 : Application web :
Pages :

 Page d'accueil publique :

 Détails du service modal.
 Formulaire de demande de service modal.
 Nos services.
 A qui fournissons-nous nos services
 Page panneau d'administration :
 Tableau de bord.
 Liste des mécaniciens.
 Les demandes de services.
 Panneau de rapport.
 Panneau d'entretien.
 Liste des catégories.
 Liste de services.
 Liste d'utilisateur.
 Panneau de réglage.

2-1 : Application desktop :

Pages :

Page 7 of 28
  Page d'accueil publique :
 Description :
 Panneau de Réparation.
 Panneau de Gestion de stock.
 Panneau de client.
 Page de Gestion de stock :
 Button d’ajouter.
 Button de supprimer.
 Button d’actualiser.
 Button d’imprimer.
 Page de Client :
 Button de nouveau
 Button d’enregistrer
 Button de modifier
 Button de supprimer
 Button d’actualiser
 Tableau de client

3- Étude du cahier des charges :

Le cahier des charges étant très permissif, il fallait plutôt se fixer des limites, ou tout du
moins, avoir une idée plus précise de ce que serait le site internet.

C'est pour ça, avec ce cahier des charges, j’ai réalisé des dessins, pour améliorer
plusieurs points et avoir une idée générale de la structure du site et application.

4- Présentation de l’application :
Le sujet de mon projet consiste à développer une application desktop qui a comme
fonctionnalités :

 Page d’accueil :
Dans ce page il y a deux boutons sont bouton de gestion de stock pour visiter
l’interface de gestion de stock, bouton client pour laisser une demande et Bouton pour
quitter l’application et il y a une partie de description.
 Page de client :
Pour chaque client, il y a plusieurs champs pour envoyer une demande et un
tableau pour les clients qui ont déjà laissé une demande.
Et pour les boutons il y a cinq boutons sont enregistrer, nouveau pour nouveau
demande, modifier pour modifier les informations d’un ancien client, supprimer et
actualiser pour voir que les nouveaux clients sont bien enregistrer dans le tableau.
 Page de gestion de stock :

Page 8 of 28
 Dans cette interface il y a plus de huit combo box chaque combo box pour un
équipement de stock et il y a un tableau pour enregistrer les équipements inexistants,
pour cette fonction d’enregistrer il y a un bouton d’enregistrement.
Il y a aussi trois boutons, bouton d’ajouter pour ajouter équipement que vous
avez choisi, bouton d’actualiser pour vider touts les champs de tableau et un bouton très
important d’imprimer pour imprimer la facture des équipements inexistants.

Et pour le site web :

 L’interface d’administration :
Dans cette interface il y a une barre latérale sur cette barre il y a une barre
‘dashboard’, ‘mechanic List’, ‘service request’, ‘report’ et une partie de maintenance
sur cette partie il y a une barre d’ajouter nouvelle catégorie, nouveau service et nouveau
utilisateur.
Pour accéder à cette interface doit donner login.
 L’interface d’accueil publique :
Dans cette interface il y a le bouton ‘send service request’ pour laisser une
demande d’un service et un bouton ‘about us’ qui donne une description de service et il
y a une partie des types de véhicule et des services.

Page 9 of 28
 Chapitre 2 :
Benchmarking des technologies

Page 10 of 28
1 – Les langages :
Dans mes projets j’ai choisi d’utiliser les langages suivants :

Front-end
C’est quoi le front-end  :
Le front-end c’est la partie du code qui est reçue par le client. Je rappelle que le client c’est notre
navigateur Web. Il s’agit finalement des éléments du site web que l’on aperçoit à l’écran et avec
lesquels on pourra interagir.
Les technologies utilisées dans le front-end  :

Figure 1:logo JavaScript

JavaScript : est un langage de programmation de scripts principalement employé

dans les pages web interactives et à ce titre est une partie essentielle des applications web.
Avec les langages HTML et CSS, JavaScript est au cœur des langages utilisés par
les développeurs web3. Une grande majorité des sites web l'utilisent4, et la majorité
des navigateurs web disposent d'un moteur JavaScript5 pour l'interpréter.

Figure 2:logo HTML/CSS

Le CSS : a été créé en 1996, soit 5 ans après le HTML. Les sigles « CSS » sont
l’abréviation de « Cascading StyleSheets » ou « feuilles de styles en cascade » en français. Le
CSS vient résoudre un problème bien différent du HTML : en effet, le HTML sert à définir les
différents éléments d’une page, à leur donner du sens. Le CSS, lui, va servir à mettre en forme
les différents contenus définis par le HTML en leur appliquant des styles.

Page 11 of 28
 Le HTML : est un langage qui a été créé en 1991. Les sigles « HTML » sont
l’abréviation de « HyperText Markup Language » ou « langage de balisage hypertexte » en
français. Le HTML est donc un langage de balisage, c’est-à-dire un langage qui va nous
permettre de définir les différents contenus d’une page.

Page 12 of 28
Back-end
C’est quoi le back-end  :
Le développement Back-end (ou Backend) a pour objectif de permettre à un site ou à une
application de fonctionner. Il s’agit donc de mettre en place la programmation au niveau du
serveur, pour exécuter les requêtes qui sont réalisées sur le site web par les internautes. Pour
résumer les choses très simplement, le développeur Back-End doit faire en sorte qu’à chaque
clic d’un utilisateur sur le site internet, l’action correspondante se réalise.

Figure 3:logo Java

Java :est un langage de programmation orienté objet créé par James

Gosling et Patrick Naughton, employés de Sun Microsystems, avec le soutien de Bill
Joy (cofondateur de Sun Microsystems en 1982), présenté officiellement
le 23 mai 1995 au SunWorld.
La société Sun a été ensuite rachetée en 2009 par la société Oracle qui détient et
maintient désormais Java.

Figure 4:logo php

PHP: Hypertext Preprocessor :plus connu sous son sigle PHP (sigle auto-

référentiel), est un langage de programmation libre29, principalement utilisé pour produire
des pages Web dynamiques via un serveur HTTP28, mais pouvant également fonctionner

Page 13 of 28
comme n'importe quel langage interprété de façon locale. PHP est un langage impératif orienté
objet.

Page 14 of 28
2 - Outils :
Dans ce paragraphe nous décrivons les différents outils et logiciel utilisés pour la mise
en œuvre du projet :

Figure 5:logo NetBeans

NetBeans : est un environnement de développement intégré (IDE) pour Java, placé en

open source par Sun en juin 2000 sous licence CDDL (Common Development and Distribution
License). En plus de Java, NetBeans permet également de supporter différents autres langages,
comme Python, C, C++, XML et HTML. Il comprend toutes les caractéristiques d'un IDE
moderne (éditeur en couleur, projets multi-langage, factoring, éditeur graphique d'interfaces et
de pages web).
NetBeans est disponible sous Windows, Linux, Solaris (sur x86 et SPARC), Mac OS X et
Open VMS.

Figure 6: logo SQLite

SQLite :est une bibliothèque écrite en langage C qui propose un moteur de base de

données relationnelle accessible par le langage SQL. SQLite implémente en grande partie le
standard SQL-92 et des propriétés ACID.
Contrairement aux serveurs de bases de données traditionnels,
comme MySQL ou PostgreSQL, sa particularité est de ne pas reproduire le schéma
habituel client-serveur mais d'être directement intégrée aux programmes. L'intégralité de
la base de données (déclarations, tables, index et données) est stockée dans
un fichier indépendant de la plateforme.

Page 15 of 28
 Figure 7:logo noTepad++

Notepad++ : est un éditeur de texte libre générique, fonctionnant sous Windows,

codé en C++, qui intègre la coloration syntaxique de code source pour les langages et
fichiers C, C++, Java, C#, XML, HTML, PHP, JavaScript, makefile, art ASCII, doxygen, .bat,
MS fichier ini, ASP, Visual Basic/VBScript, SQL, Objective-
C, CSS, Pascal, Perl, Python, R, MATLAB, Lua, TCL, Assembleur, Ruby, Lisp, Scheme,
Properties, Diff, Smalltalk, PostScript et VHDL ainsi que pour tout autre langage informatique,
car ce logiciel propose la possibilité de créer ses propres colorations syntaxiques pour un
langage quelconque.

Figure 8: logo Visual Studio Code

Visual Studio Code : est un éditeur de code source qui peut être utilisé avec une
variété de langages de programmation, notamment Java, JavaScript, Go, Node. js et C++. Il
est basé sur le cadre Electron, qui est utilisé pour développer des applications Web Node.

Figure 9:logo XAMPP

XAMPP : est un ensemble de logiciels permettant de mettre en place un serveur Web

local, un serveur FTP et un serveur de messagerie électronique. Il s'agit d'une distribution de
logiciels libres (X (cross) Apache MariaDB Perl PHP) offrant une bonne souplesse
d'utilisation, réputée pour son installation simple et rapide.

Page 16 of 28
 Chapitre 3 :
Réalisation et Mise en place

Page 17 of 28
1-Application desktop :
1-1 - Partie d’accueil :

Figure 10: Page d'accueil

Dans cette interface, vous pouvez choisir la prochaine interface que vous
souhaitez visiter en appuyant sur l’un des trois boutons ou sortir par le bouton exit.

Page 18 of 28
 2-1- Partie de client :

Figure 11: Interface des Clients

Dans cette interface, vous remplissez les données de client et après vous pouvez choisir
le traitement que vous voulez par cliquer sur l’un des quatre boutons que ce soit enregistrer,
modifier ou supprimer. Après actualiser pour assurer que le traitement et bien appliquer .et en
fin cliquer sur le bouton nouveau pour vider tous les champs.

Et dons le tableau il y a un champ important qui donner le statut de véhicule ça veut

dire l’état d’avancement.

Page 19 of 28
 3-1-partie de gestion de stock :

Figure 12: Interface de Gestion de Stock

Pour cette interface, vous pouvez choisir l’équipement inexistant dans chaque combo
box et après cliquer sur le bouton ajouter et en fin tu cliquer sur imprimer pour donner la
facture sinon si vous voulez supprimer l’un des équipements, vous pouvez choisir l’un et
cliquer sur le bouton supprimer.

Page 20 of 28
2-Application web :
2-1- Partie d’accueil publique :

Figure 13: Page d'accueil Publique

Dans cette interface, vous pouvez laisser une demande de traitement à partir de remplir
la fiche suivante.

Il y a une bouton ‘about us‘ qui affiche une description générale de notre service, aussi
il y a une partie de nos services.

Page 21 of 28
 Figure 14: Formulaire de demande

Dans cette fiche, il y a les champs obligatoires que vous remplissez pour laisser une
demande de traitement et après cliquer sur le bouton ‘submit request’ pour valider la demande.

2-2- Partie d’administration :

Figure 15: Login administrateur

Avant de passer à la partie d’administration vous voulez donnée le nom d’utilisateur et

mot de passe pour démarrer votre session en appuyant sur le bouton ‘sign in’ pour passer a
l’interface d’administrateur ou ‘go to website’ pour retourne à l’accueil.
Page 22 of 28
 Figure 16: Table de Bord

Après l’accès a l’interface, admin vous trouvez les statistiques des services, des
mécaniques, des catégories et des demandes.

Figure 17: Interface des Mechanicus

Dans cette interface, des mécaniques il y a un tableau caractérisé par une date de
création, le nom, contact, statut et le travail de mécanique.

Il y a aussi un bouton ‘create new’ pour ajouter nouveau mécanique.

Page 23 of 28
 Figure 18: tableau des demandes

Dans cette interface, il y a un tableau des demandes ce tableau caractérisé par date de
création, le nom de client, le service qui va demander, le statut et l’action pour voir l’état
d’avancement de traitement.

 Pour maintenance :

Figure 19: la liste des catégories

Dans cette interface, vous avez le choix d’ajouter une nouvelle catégorie à votre service
tout ça bien expliquer dans le tableau par les champs suivants : date de création, catégorie, le
statut et l’action.

Page 24 of 28
 Figure 20: liste des services

Dans cette interface, vous avez le droit d’ajouter un nouveau service par le bouton
‘cérate new’ et donner le nom de service, description et le statut.

Figure 21:liste des administrateurs

Dans cette interface, vous pouvez ajouter un nouvel utilisateur ça veut dire vous pouvez
donnée l’accès à un autre utilisateur.

 La base de données :

Page 25 of 28
 Figure 22: la base des données

J’ai choisi d’utiliser ‘phpMyAdmin’ pour la création de base de données qui s’appelle
‘vehicle_service_db’ et j’ai créé les tableaux suivantes catégories, mécaniques.

Figure 23:présentation de base des données

Dans cette figure il y a tous les tableaux que j’ai crée dans la base de données.

Page 26 of 28
 Conclusion
L’objectif de notre projet technique était de concevoir et implémenter une application web qui
sera une automatisation des tâches des admins et un outil pour rapprocher les acteurs d’un garage
automobile. Le point de départ de la réalisation de ce projet était une récolte d’informations nécessaires
pour dresser un état de l’existant, présenter un aperçu sur la problématique.

Par la suite, je me suis intéressé à l’analyse et la spécification des besoins qui m’a permis de
distinguer les différents acteurs interagissant avec les deux applications visées.

L’objectif de la partie suivante était la conception détaillée, dans laquelle j’ai fixé la structure
globale de l’application. Le dernier volet de mon projet était la partie réalisation qui a été consacrée à
la présentation des outils du travail et les interfaces de nos applications.

L’apport de ce travail a été d’une importance très considérable. En effet, il m’a permis : de
suivre une méthodologie de travail bien étudiée, d’approfondir mes connaissances dans le monde de
développement des applications.

La réalisation d’un tel projet, m’a aussi permis d’apprendre et de toucher du doigt une partie
des divers aspects du métier de développeur et de celui du concepteur.

Page 27 of 28
Webographie :
https://www.wikipedia.org/
https://github.com/
https://stackoverflow.com/

Page 28 of 28