Rapport de projet de fin d’Etude

D.U.T informatique

Sous le thème
Construire un système qui géré les dates
et les horaires de voyage pour toutes les
gares
de transport nationale

Réalisé par :
ELFANIDI Redouan

Encadré par :
Mr. IDDAROU Ali

Soutenu le 08 Juin 2020, devant le jury composé de:

Mr. IDDAROU Ali Mr. ZEBARRA Khalid
Année Universitaire: 2019-2020

1
 Dédicace
Je dédie cet effort à :

Nos respectueux parents pour leur patience et leur soutien moral et

matériel.

Nos FRERES et SŒURS pour l’aide qu’ils ont fourni tout au long de
nos années d’études.

Nos FAMILLES et AMIS et tous ceux qui ont contribué au bon

déroulement de ce travail.

A ceux qui m’ont aidé toute ma vie

Et enfin à tous ceux qui me connaissent.

2
 Remerciement
Nous tenons à exprimer notre profonde reconnaissance et
gratitude à Mr. Le professeur IDARROU Ali qui nous a accompagné
de prés durant ce travail pour sa disponibilité pour la confiance qu’il a
accordée et les conseils précieux qu’il nous a prodigués tout au long
de la réalisation de ce projet.

Nous tenons aussi à remercies tous les personne qui ont

contribué de prés et de loin à la réalisation de ce projet de fin
d’études.

3
 Sommaire
Dédicace.................................................................................................................................................1
Remerciement........................................................................................................................................3
Liste des figure.......................................................................................................................................5
Introduction générale..............................................................................................................................7
Chapitre 1 : Outils et environnement de développement........................................................................8
I. Outils et environnement de développement :...............................................................................8
1 Outils de développement...............................................................................................................8
1.1 MySQL....................................................................................................................................8
1.2 Notepad++..............................................................................................................................8
1.3 WampServer :.........................................................................................................................9
2 Les langages de programmation...................................................................................................10
2.1 Langage PHP.........................................................................................................................10
2.2 Langage HTML......................................................................................................................10
2.3 Langage CSS..........................................................................................................................11
Chapitre 2 : Analyse Et Conception.....................................................................................................12
I. Cahier de charges.........................................................................................................................12
1 Analyse du projet.........................................................................................................................12
1.1 Description des besoins........................................................................................................12
1.2 Présentation de projet..........................................................................................................12
1.3 Définition des objectifs.........................................................................................................13
1.4 Cible......................................................................................................................................13
1.5 Les privilèges........................................................................................................................13
1.6 Les contraintes de projet :....................................................................................................14

4
 1.7 Diagramme des cas:..............................................................................................................14
II. Conception...................................................................................................................................15
2.1 Les tableaux:..............................................................................................................................15
2.2 Model de conception de donnée (MCD) :..................................................................................16
2.3 Model logique de donnée (MLD) :............................................................................................17
Chapitre 3 : L’implémentation.............................................................................................................19

Liste des figure

Figure 1 : les droits d'utilisateur...........................................................................................................14

Figure 2 : les droits d’administrateur................................................................................................14
Figure 3 : les tableaux.........................................................................................................................15
Figure 4 : MCD.....................................................................................................................................16
Figure 5 : MLD.....................................................................................................................................17
Figure 6 : l’interface de notre projet..................................................................................................18
Figure 7 : la suite d’interface..............................................................................................................18
Figure 8 : une barre pour choisir.......................................................................................................19
Figure 9 : bus Daily............................................................................................................................19
Figure 10 : quelque informations sur bus Daily................................................................................20
Figure 11 : acheter un ticket..............................................................................................................20
Figure 12 : la possibilité de faire un commentaire...........................................................................21
Figure 13 : exemple des commentaires.............................................................................................21
Figure 14 : bus « Weekly ».................................................................................................................22
Figure 15 : quelque information sur bus « Weekly »........................................................................23
Figure 16 : acheter un ticket..............................................................................................................23
Figure 17 : la possibilité de faire un commentaire...........................................................................24
Figure 18 : bus « Night ».....................................................................................................................24
Figure 19 : quelque information sur bus « Night »...........................................................................25
Figure 20 : acheter un ticket..............................................................................................................25
Figure 21 : la possibilité de faire un commentaire...........................................................................26
Figure 22 : chercher un bus................................................................................................................26
Figure 23 : contacter les administrateurs.........................................................................................27
Figure 24 : Catégories des bus...........................................................................................................27
Figure 25 : interface de connexion....................................................................................................27
Figure 26 : barre d’option..................................................................................................................28
Figure 27 : Registre.............................................................................................................................28
Figure 28 : inscrire..............................................................................................................................28
Figure 29 : le nom d’admin.................................................................................................................29

5
Figure 30:le chois de déconnecter ou avoir le profile......................................................................29
Figure 31 : avoir le profile d’admin...................................................................................................29
Figure 32 : les détails personnels d’admin........................................................................................30
Figure 33 : «Tickets Booked »............................................................................................................30
Figure 34 : modifier les détails personnels.......................................................................................31
Figure 35 : page admin.......................................................................................................................31
Figure 36 : page d’admin....................................................................................................................32
Figure 37 : Option « Buses »...............................................................................................................32
Figure 38 : Option « All Buses ».........................................................................................................33
Figure 39 : Option « Add Bus »...........................................................................................................34
Figure 40 : Option « Categories ».......................................................................................................34
Figure 41 : ajouter et l'affichage des catégories................................................................................34
Figure 42 : options  « comments ».....................................................................................................35
Figure 43 : les commentaires.............................................................................................................35
Figure 44 : options users....................................................................................................................36
Figure 45 : utilisateurs.......................................................................................................................36
Figure 46 : Le profile..........................................................................................................................36
Figure 47 : avoir le profile d’admin...................................................................................................37
Figure 48 : rapport..............................................................................................................................37
Figure 49 : tableau de statistique.......................................................................................................37
Figure 50 : nom d’utilisateur..............................................................................................................38
Figure 51 : le chois de déconnecter ou avoir le profile.....................................................................38
Figure 52 : le profile d’utilisateur......................................................................................................38
Figure 53 : détails personnel.............................................................................................................39
Figure 54 : modifier les détails personnels.......................................................................................40
Figure 55 : Option « Tickets Booked »...............................................................................................41

6
 Introduction générale

Ce rapport est le résultat de notre travail au cours de notre projet de

fin d’étude .le but de ce projet est la réalisation d’une application qui facilite
la gestion de bus.

Durant ce projet nous avions pour mission de comprendre le sujet et

de définir le cahier de charge selon les besoins de notre encadrant. Nous
avons mis l’accent sur différents gestion et puis précisément la gestion.

De surcroit nous avons effectué dans la premier chapitre les outils et

environnement de développement après on a passé à Les langages de
programmation  et après l’analyse et la conception du problème posé avec
la méthode MERISE dans la deuxième chapitre pour passer ensuite à la
deuxième étape qui s’agit de l’implémentation dans la troisième chapitre.

7
 Chapitre 1 : Outils et environnement
de développement
I. Outils et environnement de développement :

1 Outils de développement 
1.1 MySQL

MySQL : est un système de gestion de bases de données relationnelles SQL open

source développé et supporté par Oracle.

MySQL n’est qu’un système populaire qui peut stocker et gérer ces données pour
vous, et c’est une solution de base de données particulièrement populaire pour les sites
WordPress.

8
 1.2 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, HTML, PHP …..

Aussi est un éditeur de texte très léger, très puissant et libre

(licence GPL). Il est parfait pour programmer avec des langages ne nécessitant
pas d'environnement de développement (HTML, CSS, JavaScript,
processing…), ou pour du traitement de données. Il prend en charge par
défaut une cinquantaine de langages différents, et vous laisse libre d'en
ajouter d'autres

1.3 WampServer :

 WampServer (anciennement WAMP5) est une plateforme de développement

Web de type WAMP, permettant de faire fonctionner localement (sans se connecter à 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 trayicon (icô ne près de l'horloge de Windows).
La grande nouveauté de WampServer réside dans la possibilité d'y installer et
d'utiliser n'importe quelle version de PHP, Apache ou MySQL en un clic. Ainsi, chaque
développeur peut reproduire fidèlement son serveur de production sur sa machine
locale.

9
2 Les langages de programmation 

2.1 Langage PHP 

PHP est un langage programmation libre, principalement utilisé pour produire
des  pages web dynamiques via un serveur HTTP, mais pouvant également fonctionner
comme n'importe quel langage interprété de façon locale. PHP est un langage impératif
orienté objet.

PHP a permis de créer un grand nombre de sites web célèbres,

comme facebook . wikipédia etc. Il est considéré comme une des bases de la
création de sites web dits dynamiques mais également des applications web.

2.2 Langage HTML 

Est un
langage informatique utilisé sur l'internet. Ce langage est utilisé pour créer des pages
web. L'acronyme signifie « HyperText Mark up Langage » , ce qui signifie en français
"langage de balisage d'hypertexte". Cette signification porte bien son nom

10
puisqu'effectivement ce langage permet de réaliser de l'hypertexte à base d'une
structure de balisage.

2.3 Langage CSS 

Le CSS est un langage informatique utilisé sur l'internet pour mettre en forme les
fichiers HTML ou XML. Ainsi, les feuilles de style, aussi appelé les fichiers CSS,
comprennent du code qui permet de gérer le design d'une page en HTML.

11
 Chapitre 2 : Analyse Et Conception

Ce chapitre expose une analyse de la problématique du projet au

niveau de l’existant et des besoins dans un premier lieu, et explique les
différentes étapes de conception de l’application réalisée dans un second lieu.
Dans ce présent module, nous allons essayer de faire une étude,
conception et réalisation d’une application pour la gestion de bus, à l’aide
d’une application simple et facile à utiliser.

I. Cahier de charges 

1 Analyse du projet
2.4 Description des besoins
Actuellement les clients trouve un problème d’acheter leur billets car
ils sont obligés d’aller au gars, pas seulement, aussi pour acheter leurs billets
mais pour savoir aussi les horaire de départ des autocars.

12
 Un exemple de cela est que j'habite dans la ville d'Agadir, et j'ai du mal
à voyager entre les deux villes, par exemple, les temps de trajet et l'achat de
billets….

2.5 Présentation de projet

Notre projet est une application web d’utilisation simple et capable de

gérer les temps de trajet, bus disponibles, les billets et tout ce qui concerne le
voyage d’une manière flexible  et aussi pour trouver des solutions de notre
problématique. Cette application a été programmée en PHP, HTML et en
utilisant SGBD MySQL.

2.6 Définition des objectifs

Notre projet a des objectifs pour faciliter l’opération de réservation au

gars, un outil permettant :

• D’acheter leur billet.

• De suivre leur itinéraire.
• Les horaires de départs.
• Les horaires d’arrivées.
• Les bus qui sont disponibles pour le voyage.

2.7 Cible
• Cible principale : ouvert au grand public.

• Notre projet réalisé pour la catégorie qui utilisée autobus pour

mobilité entre les villes.

2.8 Les privilèges

Administrateur 

L’administrateur a tout les droits :

• l’insertion
• la modification

13
 • la suppression.

Les dates de retour, le prix des billets, date d’aller, les horaire de départ et
d’arrivées ….

Utilisateur  :

L’utilisateur a aussi des droits :

 Inscrive ou connecter, déconnecter.

 Contacter les administrateurs.
 Ecrire des commentaires.
 Le chois de l’heure, bus .le prix pour son voyage.

2.9 Les contraintes de projet :

 Contrainte du temps
En fait, notre plus grande crainte était le problème du temps. Nous
avions peur que le projet ne soit pas terminé à temps pour vous le présenter,
nous avons donc travaillé dur pour le terminer à temps et le présenter de la
plus belle manière.

 Contraint de sécurité :
Le deuxième problème concerne la sécurité, malheureusement nous
n'avons pris aucune mesure de précaution qui aide l'application à se
protéger, donc je pense qu'elle est facile à pénétrer

2.10Diagramme des cas:

14
Figure 1 : les droits d'utilisateur

15
 Figure 2 : les droits d’administrateur

II. Conception

2.1 Les tableaux:

Dans ce qui suit je vais présenter les tables qui sont déjà réalisés dans la base de
données de mon application, et tous ce qui concerne création de tables et relations entre
elles.

16
 Figure 3 : les tableaux

2.2 Model de conception de donnée (MCD) :

Le modèle conceptuel des données (MCD) a pour but de représenter de façon

structurée les données qui seront utilisées par le système d'information. Le modèle
conceptuel des données décrit la sémantique c’est à dire le sens attaché à ces données et
à leurs rapports et non à l’utilisation qui peut en être faite.

17
 Figure 4 : MCD

2.3 Model logique de donnée (MLD) :

Le modèle logique des données consiste à décrire la structure de données utilisée

sans faire référence à un langage de programmation. Il s'agit donc de préciser le
type de données utilisées lors des traitements.

18
 Figure 5 : MLD

Chapitre 3 : L’implémentation

19
 Figure 6 : l’interface de notre projet

Figure 7 : la suite d’interface

Voilà l'interface de notre projet, et bien sur on va expliquer chaque button dans les
figures suivant.

20
 Figure 8 : une barre pour choisir

Cette barre à vous donne le droit de choisir entre les catégories de bus (Daily,
Weekly, Night).

Si vous avez cliqué sur chaque catégorie, le système doit affiche tout les bus qui
sont disponible pour chaque catégorie.

On totale on a sept bus distribué comme suit : quatre pour catégorie « Daily »

Deux pour catégorie « Weekly »

Une pour categorie « Night »

Mais dans les figures suivante on va expliquer Just trois bus, un pour « Daily »,
un pour « Weekly » et un pour Night d'éviter la répétition.

On va commencer par la première catégorie «  Daily Buses ».

Figure 9 : bus Daily

Type de bus qui circulent chaque jour, le trajet de ce bus est de Guelmim à Agadir.

21
 Figure 10 : quelque informations sur bus Daily

Voici quelques informations sur le bus comme les sièges maximum, les sièges
disponibles et toute station avec son temps.

Figure 11 : acheter un ticket

Cette option vous donne le droit d'acheter un billet, entrez simplement le nombre de
billets de bus que vous choisissez et la ville d'origine et de destination.

22
 Figure 12 : la possibilité de faire un commentaire

Aussi le système a vous donnez la possibilité de crée un commentaire, Just saisir

votre email, et crée votre commentaire, et aussi clique sur le bouton « Submit ».

Figure 13 : exemple des commentaires

Ceci des exemples des utilisateurs sont créé des commentaires.

23
Maintenant on va passer à la deuxième catégorie  « Weekly ».

Figure 14 : bus « Weekly »

24
Voila le type de bus qui circule chaque semaine, le trajet de ce bus est de Sidi-Ifni à
Agadir.

Figure 15 : quelque information sur bus « Weekly »

Le même concept de figure 10.

Figure 16 : acheter un ticket

Le même concept de figure 11.

25
 Figure 17 : la possibilité de faire un commentaire

Le même concept de figure 12

Maintenant on va passer à la dernière catégorie  « Night».

Figure 18 : bus « Night »

26
Voila le type de bus qui circule Just en nuit, le trajet de ce bus est de Laayoune à Agadir.

Figure 19 : quelque information sur bus « Night »

Le même concept de figure 10.

Figure 20 : acheter un ticket

Le même concept de figure 11.

27
 Figure 21 : la possibilité de faire un commentaire

Le même concept de figure 12.

Figure 22 : chercher un bus

28
 Figure 23 : contacter les administrateurs

Cette fonction donnée à l’utilisateur le droit de contacter les administrateurs, s’il

a des problèmes au niveau de la réservation ….

Figure 24 : Catégories des bus

Cette interface vous affiche les types de bus disponible.

Figure 25 : interface de connexion

Une interface de connexion tant qu'administrateur. L'administrateur doit entrer

le "le nom d’utilisateur " et le "mot de passe" corrects pour se connecter.

Figure 26 : barre d’option

Si l'administrateur se connecte, le système augmentera de deux autres options

« le nom d’admin » et « Admin ».

29
 Figure 27 : Registre

Figure 28 : inscrire

Un espace spécifique à l'utilisateur pour créer un compte et s'inscrire dans

l'application, Si vous souhaitez créer votre propre compte utilisateur, il vous suffit de
saisir vos informations privées comme indiqué sur la figure

Figure 29 : le nom d’admin

Cette option vous donne le droit de choisir entre deux autre option (Profile ou Log Out).

30
 Figure 30:le chois de déconnecter ou avoir le profile

Si vous avez cliquez sur «  logout » donc vous n’êtes pas un administrateur

Figure 31 : avoir le profile d’admin

L’option de Profile donne le droit de avoir le profile avec sont détailles et aussi donne le
droit de choisir entre trois autre choix « Personal Détail , Tickets Booked et Edit
Details ».

31
 Figure 32 : les détails personnels d’admin

L’option de (Personale Détails)  vous affiche les détailles personnelles d’administrateur.

Si vous avez cliqué sur l’option « Tickets Booked » le système affiche la figure suivant.

32
 Figure 33 : «Tickets Booked »

Cette option vous donne le droit de voir toutes les réservations précédentes.

33
 Figure 34 : modifier les détails personnels

Cette option vous donne le droit de changer et modifié de les détailles personnelle.

Figure 35 : page admin

Si vous cliquez sur « Admin » Vous serez redirigé vers la page d'admin.

34
 Figure 36 : page d’admin

La page affiche un message «Welcome To A admin nom_admin  », et aussi donne

le droit à l’admin d’ ajouter des bus , des categories , des users …

Figure 37 : Option « Buses »

Il donne à l’admin le droit de choisir entre ajouter un bus ou bien afficher tous les bus.

35
 Figure 38 : Option « All Buses »

Le système affichera tout les bus disponible dessus avec ses informations et aussi le
droit de supprimer, mise à jour et cloner les bus.

36
 Figure 39 : Option « Add Bus »

Le système affichera une formulaire pour saisir informations d'un nouveau

bus.

Figure 40 : Option « Categories »

Figure 41 : ajouter et l'affichage des catégories

Le système vous donne la possibilité d'ajouter ou de supprimer les catégories , en

plus de voir les catégories disponibles.

37
 Figure 42 : options  « comments »

Figure 43 : les commentaires

Le système affiche les commentaires déjà écrits avec les informations des utilisateurs
qui les ont écrits et il donne a l’admin la possibilité de supprimer ou de voir le
commentaire sur la page, tout ca en forma d'un tableau.

Figure 44 : options users

38
 Figure 45 : utilisateurs

Cette option affiche les utilisateurs et les administrateurs avec ses informations et
il donne la possibilité de supprimer, éditer  et aussi rendre l'utilisateur administrateur
ou supprimer un admin

Figure 46 : Le profile

39
 Figure 47 : avoir le profile d’admin

Le même concept de figure 31.

Figure 48 : rapport

Figure 49 : tableau de statistique

Ce tableau comme un rapport de notre projet, il donne des statistiques, comme les
nombres des bus, les administrateurs ....

40
Mais si vous avez connecté tant qu’un utilisateur dans l’interface de connexion le
système donnée une autre option à cote de l’option de « Regester Here ! »

Figure 50 : nom d’utilisateur

Cette option vous donne le droit de choisir entre avoir le profile ou déconnecter

Figure 51 : le chois de déconnecter ou avoir le profile

Figure 52 : le profile d’utilisateur

L’option de Profile donne le droit de avoir le profile d’utilisateur avec sont détailles
et aussi donne le droit de choisir entre trois autre choix « Personal Détail , Tickets
Booked et Edit Details ».

41
 Figure 53 : détails personnel

L’option de (Personale Détails)  vous affiche les détailles personnelles d’administrateur.

42
 Figure 54 : modifier les détails personnels

Cette option vous donne le droit de changer et la modification de les détailles

personnelle.

Figure 55 : Option « Tickets Booked »

43