RAPPORT PROJET FIN D’ETUDE

ENCADRANT : Mme EL ALAMI NAIMA

MISE EN ŒUVRE D’UNE APPLICATION WEB

DE RESTAURATION MANAGEMENT
ET COMMANDE ‘RESTOWEB’

Présenté par
HANAE ENNAJI

Devant le jury

Mme El Alami naima Formatrice à NTIC 2 SIDI MAAROUF Encadrant

Année : 2024- 2025

 DEDICACE

Je dédie ce travail

À mes chers parents, pour leur amour, leur soutien et leur patience tout au long de mes études.
Vous m'avez apporté de tendresse, de soutien et d’appuie sans épargne. Quoique je fasse, je
ne saurais vous faire graine de vos sacrifices.

À mes chers enseignants de mémoire, pour leurs conseils, leurs encadrements et leurs
disponibilités.

Je souhaite exprimer ma gratitude sincère envers mes frères pour leur soutien précieux tout au
long de mon projet de fin d'études.

À mes amis, pour leur soutien moral et leur aide précieuse pendant cette période de travail
intensif. A toutes les personnes qui ont participé de près ou de loin à la réalisation de ce travail.
 REMERCIEMENT

Je tiens à exprimer mes sincères remerciements à toutes les personnes qui m'ont soutenu tout au long

de la réalisation de ce projet de fin d'études. Mohammed Hakiki, pour sa disponibilité, ses conseils et

son expertise précieuse, m'a été d'une grande aide pour mener à bien ce travail. Je souhaite

également exprimer ma gratitude envers toutes les autres personnes impliquées pour leur soutien

constant et leurs conseils précieux tout au long du projet. Leur encouragement et leur confiance ont

été essentiels pour surmonter les défis rencontrés. Sans leur soutien, cette réussite n'aurait pas été

possible. Merci encore à tous pour votre contribution à la réussite de ce travail.

Résumé

RESUME

Le présent document résume le projet que j'ai développé en solitaire dans le cadre de mon stage
de fin d'études pour une durée de deux mois, en vue de l'obtention de mon diplôme de licence
professionnelle en Génie Informatique. Le projet, nommé "RestoWeb", est une application web
de restauration destinée à faciliter le processus de commande de nourriture en ligne pour un
restaurant spécifique.

L'objectif de RestoWeb est de fournir une plateforme conviviale et intuitive aux clients du
restaurant, leur permettant de passer des commandes en ligne et de découvrir les différents plats
et menus proposés. L'application vise à améliorer l'expérience des clients en offrant une
solution pratique et efficace pour commander leur nourriture préférée. En utilisant RestoWeb,
les clients peuvent accéder au notre application, explorer le menu, visualiser les descriptions et
les prix des plats, et passer des commandes en quelques clics. L'application permet également
aux clients de personnaliser leurs commandes en ajoutant des notes spéciales.

Du côté du restaurant, RestoWeb offre un tableau de bord intuitif pour gérer les commandes
entrantes, gérer les catégories et gérer les menus. Le restaurant peut facilement mettre à jour les
plats disponibles et ajuster les prix.

En tant que développeur de RestoWeb, j'ai pris en charge la conception et le développement

de l'ensemble de l'application, y compris la base de données, l'interface utilisateur et les
fonctionnalités de commande en ligne. Le projet a été développé en utilisant des technologies
web telles que HTML, CSS, JavaScript et LARAVEL comme framework de développement
web. Ce rapport détaillera le cadre général du projet, présentera l’organisme d’accueil décrira
les fonctionnalités clés de l'application, expliquera l'architecture technique utilisée, et mettra en
évidence les défis auxquels j'ai été confronté et les solutions mises en place
Introduction Générale

INTRODUCTION GENERALE

L'industrie de la restauration évolue rapidement avec l'avènement des technologies numériques,

et les applications web jouent un rôle de plus en plus important dans la façon dont les clients
interagissent avec les restaurants. Dans ce contexte, notre projet de fin d'études (PFE) consiste
en la conception et le développement d'une application web de restauration innovante.

L'objectif principal de cette application est de simplifier le processus de commande de nourriture,

que ce soit en ligne ou en direct dans les restaurants, tout en offrant aux établissements les
moyens de gérer efficacement leurs commandes et clients de passer cette commande.

Dans le premier chapitre, nous présenterons le cadre général de notre projet de fin d'études, ainsi
que l'organisme d'accueil dans lequel nous avons réalisé notre travail. Nous détaillerons les
objectifs de notre application web de restauration

Dans le deuxième chapitre, nous nous pencherons sur la partie conceptuelle de notre
application web de restauration. Nous décrirons en détail l'environnement de travail dans lequel
nous avons développé l'application, y compris les outils et les technologies utilisés.

De plus, nous aborderons spécifiquement le choix du framework Laravel pour le

développement de notre application. Plusieurs raisons ont motivé ce choix, et nous souhaitons
les mettre en avant.

Dans ce dernier chapitre, nous aborderons les différentes interfaces qui composent notre projet.
Nous définirons le but spécifique de chaque interface, en mettant en évidence leur rôle dans
l'expérience utilisateur globale.

6
Tables des matières

TABLES DES MATIERES

INTRODUCTION GENERALE...................................................................................................................6
LISTE DES FIGURES..................................................................................................................................9
LISTE DES TABLEAUX............................................................................................................................11
CHAPITRE 1 : CONTEXTE GENERAL...................................................................................................12
I. Introduction..........................................................................................................................................12
CHAPITRE 2: ÉTUDE CONCEPTUELLE ET ENVIRONNEMENT DE TRAVAIL.............................16
I. Introduction..........................................................................................................................................16
II. Analyse fonctionnelle..........................................................................................................................16
II.1 Diagramme de cas d’utilisation « Use Case»................................................................................16
II.2 Diagramme de séquence.......................................................................................................21
III. Analyse conceptuelle.........................................................................................................................26
III.1 Diagramme de classes : « Module Bases»............................................................................26
III.2 Modèle physique de données..............................................................................................28
IV. Le model MVC..................................................................................................................................29
IV.1. Définition:..................................................................................................................................29
V. Environnement et outils de travail..............................................................................................30
V.1. Les outils de travail..............................................................................................................30
V.2. L'environnement de développement Microsoft Visual Studio...............................................33

7
 Tables des matières

VI. Conclusion.................................................................................................................................34
CHAPITRE 3: MISE EN ŒUVRE DU PROJET.......................................................................................35
I. Introduction..........................................................................................................................................35
II. Mise en œuvre des interfaces..............................................................................................................35
III. Conclusion:........................................................................................................................................57
IV.................................................................................................................................................................
CONCLUSION GENERALE ET PERSPECTIVES.....................................................................................58

8
Liste des figures

LISTE DES FIGURES

Figure 1:Cas d’utilisation (Module Bases)....................................................................................................17

Figure 2: Cas d’utilisation des clients (Module Gestion interne)..................................................................18
Figure 3:Cas d'utilisation d'admin(Module gestion interne)......................................................................20
Figure 4: Diagramme de séquence (Authentification)...............................................................................22
Figure 5 Diagramme de séquence(Client)..................................................................................................23
Figure 6: Diagramme de séquence(Admin).................................................................................................24
Figure 7: Diagramme de séquence de paiement Credit cart.......................................................................25
Figure 8: Diagramme de séquence de paiement espèce..............................................................................25
Figure 9: Diagramme de classe...................................................................................................................27
Figure 10: Model MVC................................................................................................................................29
Figure 11: statistiques des 9 Meilleurs Framework PHP............................................................................32
Figure 12:Welcome Page...........................................................................................................................35
Figure 13:Registre Page............................................................................................................................36
Figure 14:Login Page.................................................................................................................................36
Figure 15:Forget password Page...............................................................................................................37
Figure 16:mail reset mot de passe Page...................................................................................................37
Figure 17: Nouveau mot de passe Page....................................................................................................38
Figure 18: home page................................................................................................................................38
Figure 19: confirmation Page....................................................................................................................39
Figure 20: succès confirmationn alert........................................................................................................39
Figure 21: Paiement avec carte crédit Page...............................................................................................40
Figure 22: Paiement succès Page...............................................................................................................40
Figure 23: Paramètre.................................................................................................................................41
Figure 24: help page..................................................................................................................................42
Figure 25: Sécurité page............................................................................................................................42
Figure 26: A propos page...........................................................................................................................43
Figure 27: Notification client page.............................................................................................................43
Figure 28: Dashboard admin page.............................................................................................................44
Figure 29: client page................................................................................................................................45
Figure 30: chercher client..........................................................................................................................45
Figure 31: Supprimer client........................................................................................................................46
Figure 32: table de notification..................................................................................................................46
Figure 33:Paramètre admin page..............................................................................................................48
Figure 34: les tables de restaurant..............................................................................................................49
Figure 35: listes des tables.........................................................................................................................49
Figure 36: Ajouter des tables.....................................................................................................................49

9
Figure 37: Commande d'une table.............................................................................................................50
Figure 38: Gestion des produits.................................................................................................................50
Figure 39: Modifier Plats...........................................................................................................................51
Figure 40: Ajouter Plats.............................................................................................................................51
Figure 41: Listes des catégories menues....................................................................................................52
Figure 42: Ajouter des catégories au menues............................................................................................52
Figure 43: Succès menu ajouter.................................................................................................................52
Figure 44:Succès menu modifié.................................................................................................................53
Figure 45: Succès menu supprimé..............................................................................................................53
Figure 46: Affichages des employées.........................................................................................................54
Figure 47: Ajouter des employées..............................................................................................................55
Figure 48: Ajouter avec succès alert (employe)..........................................................................................55
Figure 49: Modifier employées..................................................................................................................56
Figure 50: Modifier succès alert employée................................................................................................56
Figure 51: Profile employée.......................................................................................................................56
Figure 52: Suppression aler employée.......................................................................................................57

10
 Chapitre 1 : Présentation de l’organisme d’accueil

CHAPITRE 1 : CONTEXTE GENERAL

I. Cadre général du projet:

Le cadre général de notre projet consiste en une application web de restauration qui vise à faciliter
la commande de nourriture en ligne ou en direct dans les restaurants, tout en permettant aux
restaurants de gérer efficacement les commandes, les menus et les promotions. Notre objectif est
de fournir une expérience utilisateur conviviale et intuitive. Grâce à cette application,

nous cherchons à réduire les erreurs de commande, à rationaliser les processus de commande et

de livraison, à diminuer les coûts d'exploitation et à améliorer la satisfaction des clients en leur

offrant des promotions ciblées.

11
Chapitre 2: Étude conceptuelle et environnement de travail
CHAPITRE 2: ÉTUDE CONCEPTUELLE ET ENVIRONNEMENT DE
TRAVAIL

I. Introduction:
Au sein de ce chapitre, On s’intéresse à la partie conceptuelle ainsi que l'environnement de
travail de notre application web de restauration, laquelle a été développée en utilisant le
framework Laravel. L'objectif de ce chapitre est de vous donner un aperçu détaillé des
principaux aspects de cette application, et de poser les bases nécessaires pour les discussions à
venir.

II. Analyse fonctionnelle:

Pour examiner le fonctionnement et les principales fonctionnalités de notre application , nous
utiliserons l'approche UML pour effectuer une analyse.

II.1 Diagramme de cas d’utilisation « Use

Case» II.1.1:diagramme de cas
d’utilisation

12
Chapitre 2: Étude conceptuelle et environnement de travail

Figure 1: Cas d’utilisation (Module Bases)

13
Chapitre 2: Étude conceptuelle et environnement de travail
II.1.2 :diagramme de cas d’utilisation client:

Figure 2: Cas d’utilisation des clients (Module Gestion interne)

 Commentaires :
L’acteur principal:
Dans le diagramme de cas d'utilisation au dessus proposé pour notre application web de
restauration, il y a un acteur principal :

 L'utilisateur : il s'agit de la personne qui utilise l'application pour passer une commande,
consulter le menu, suivre une commande, créer un compte ou modifier son profil
existant.

Les acteurs secondaires:

14
 Chapitre 2 : Étude conceptuelle et environnement de travail
Un acteur secondaire dans un cas d'utilisation est un acteur qui interagit de manière occasionnelle
ou indirecte avec le système, mais qui n'est pas considéré comme un acteur principal ou central.
Dans notre cas, nous avons identifié, la carte de crédit et le caissier comme des acteurs
secondaires impliqués dans le processus de paiement. Ces acteurs secondaires interagissent de
manière indirecte avec le système pour faciliter les transactions financières.

 système banque.
 caissier.

Les cas d’utilisations:

Voici une description textuelle des cas d'utilisation du diagramme proposé :

 Authentification
 Passer une commande
 Consulter le menu
 Choisir le type de livraison.
 Effectuer le paiement.
 Aide: le client peut consulter l'aide en cas de problèmes rencontrés lors de la
commande. L'aide est une ressource mise à sa disposition pour obtenir des
informations supplémentaires, des instructions ou des solutions aux problèmes courants
liés au processus de commande.
 Déconnexion.

II.1.3 :diagramme de cas d’utilisation Admin :

15
Chapitre 2 : Étude conceptuelle et environnement de travail

Figure 3:Cas d'utilisation d'admin(Module gestion interne)

L’acteur principal:
Dans le diagramme de cas d'utilisation au dessus proposé pour notre application web de restauration, il
y a un acteur principal :

 L'administrateur : il s'agit d'un utilisateur spécial qui a des droits supplémentaires par
rapport à l'utilisateur standard. L'administrateur peut créer, modifier ou supprimer
des plats dans le menu proposé par le restaurant.

Les cas d’utilisations:

Voici une description textuelle des cas d'utilisation du diagramme proposé :

 Authentification
 Gérer un menu
 Un administrateur gérer menu
 Suivre une commande

16
Chapitre 2 : Étude conceptuelle et environnement de travail

 Gérer les promotions:(Ajouter/ Modifier/Supprimer).

 Consulter dashboard.
 Gérer les utilisateurs d’application:(Ajouter/ Modifier/Supprimer).
 Logout
 Il peut hériter toutes les actions que le client peut faire.

II.2 Diagramme de séquence:

Le diagramme de séquence permet de visualiser les interactions entre les acteurs et les objets
dans une dimension temporelle.

II.2.1 :diagramme de séquence d’authentification des utilisateurs:

17
Chapitre 2 : Étude conceptuelle et environnement de travail

Figure 4: Diagramme de séquence (Authentification)

 Commentaires :

Dans ce diagramme, l'utilisateur entre ses identifiants (nom d'utilisateur et mot de passe) dans le
système d'authentification. Le système d'authentification vérifie ces identifiants en les
recherchant dans la base de données. La base de données renvoie le résultat de la recherche au
système d'authentification, qui vérifie ensuite si les identifiants sont valides. Finalement, le
résultat de l'authentification est renvoyé à l'utilisateur, qui l'affiche.

II.2.2 :diagramme de séquence Client:

18
Chapitre 2 : Étude conceptuelle et environnement de travail

Figure 5 Diagramme de séquence(Client)

II.2.3 :diagramme de séquence Admin:

Dans ce diagramme de séquence, nous avons simplifié les tâches que l'administrateur
peut effectuer dans l'application.

19
Chapitre 2 : Étude conceptuelle et environnement de travail

Figure 6: Diagramme de séquence(Admin)

20
Chapitre 2 : Étude conceptuelle et environnement de travail
II.2.4 :diagramme de séquence Paiement:

Figure 7: Diagramme de séquence de paiement Credit cart

Figure 8: Diagramme de séquence de paiement espèce

21
Chapitre 2 : Étude conceptuelle et environnement de travail

III. Analyse conceptuelle:

III.1 Diagramme de classes : « Module Bases»:

Le diagramme de classe de notre application web de restauration nous offre une vision claire de
la structure et du fonctionnement du système. Il nous permet de visualiser les différentes
classes et les relations entre elles, ce qui facilite la conception, le développement et la
maintenance de notre application. Grâce à ce diagramme, nous pouvons mieux comprendre
comment les différentes classes interagissent et coopèrent pour offrir les fonctionnalités de
commande, de gestion des menus, des promotions, etc. Cela nous aide à prendre des décisions
éclairées lors de la mise en œuvre de nouvelles fonctionnalités ou de l'optimisation du système
existant. En somme, le diagramme de classe est un outil précieux pour assurer la cohérence et
la stabilité de notre application web de restauration.

22
Figure 9: Diagramme de classe

23
Chapitre 2 : Étude conceptuelle et environnement de travail
III.2 Modèle physique de données:

Figure 10: aperçu du base de donnée

24
Chapitre 2 : Étude conceptuelle et environnement de travail

IV. Le model MVC :

IV.1. Définition:
L'architecture MVC (Modèle-Vue-Contrôleur) est un puissant concept utilisé dans le
développement d'applications. Son principal avantage réside dans la séparation claire des
données (Modèle), de l'affichage (Vue) et des actions (Contrôleur). Cela facilite la maintenance
et l'amélioration du projet pour les développeurs en assurant une structure claire et organisée.
Les différentes interactions entre le modèle, la vue et le contrôleur sont résumées par le schéma
de la figure :

Figure 11: Model MVC

Model: représente le cœur de l'application et gère les traitements et les interactions liés
aux données, y compris l'accès à la base de données. Il définit la structure des données

25
 Chapitre 2 : Étude conceptuelle et environnement de travail
manipulées et assure leur intégrité. Cela inclut des méthodes pour mettre à jour les
données (insertion, suppression, modification) ainsi que pour les récupérer. Le modèle ne
se soucie pas de la présentation des données et n'a aucun lien direct avec la vue.
 View:est responsable de l'interaction avec l'utilisateur. Sa première tâche consiste à
afficher les résultats renvoyés par le modèle. Sa deuxième tâche est de recevoir les actions
de l'utilisateur telles que les clics de souris, les sélections de boutons radio, les cases à
cocher, etc. Ces événements sont ensuite transmis au contrôleur. La vue ne réalise aucun
traitement, elle se limite à afficher les résultats des traitements effectués par le modèle et à
interagir avec l'utilisateur.
 Controller: gère la gestion des événements, synchronisant la mise à jour de la vue ou du
modèle. Il reçoit tous les événements de l'utilisateur et déclenche les actions nécessaires.
Si une action nécessite une modification des données, le contrôleur demande au modèle de
mettre à jour les données, puis les transmet à la vue appropriée pour affichage.
Le choix de l'architecture MVC comme méthodologie d'analyse est motivé par les
avantages suivants :
 Une conception claire et efficace : La séparation des données, de la vue et du contrôleur
permet d'avoir une structure bien définie et organisée, ce qui facilite la compréhension et
la maintenance du code.
 Une plus grande souplesse pour organiser le développement du site entre différents
développeurs (indépendance des données, de l’affichage et des actions).

V. Environnement et outils de travail :

V.1. Les outils de travail:

V.1.1. Les technologies Web :

 HTML: (Hypertext Markup Language) est un langage de balisage utilisé pour la

création et la structuration des pages web. Il s'agit d'un langage de base utilisé pour
définir la structure et le contenu d'une page web en utilisant des balises et des éléments
prédéfinis.

26
Chapitre 2 : Étude conceptuelle et environnement de travail

 CSS:(Cascading Style Sheets) permet de définir l'apparence visuelle des éléments d'une
page web, tels que la couleur, la police, la mise en page, les marges, les bordures, les
arrière-plans, etc. Avec CSS, les styles peuvent être appliqués de manière sélective à
des éléments spécifiques ou à des groupes d'éléments, en utilisant des sélecteurs CSS.
Cela permet de séparer la structure d'une page web.
 PHP: est un langage de script côté serveur qui a été conçu spécifiquement pour le Web.
Le code PHP est inclus dans une page HTML et sera exécuté à chaque fois qu’un
visiteur affichera la page. Le code PHP est interprété au niveau du serveur web et génère
du code HTML ou toute autre donnée affichable dans le navigateur de l’utilisateur.
 JS: JavaScript est un langage de programmation polyvalent et orienté objet utilisé
principalement pour le développement web. Il permet d'ajouter des fonctionnalités
interactives et dynamiques aux pages web en manipulant le contenu, la structure et
le comportement de ces pages.
 JQuery : est une bibliothèque JavaScript rapide, légère et multiplateforme. Elle
simplifie l'interaction et la manipulation des documents HTML, l'ajout d'animations, la
gestion des événements et la création d'effets visuels sur une page web.
 Datatables: est une bibliothèque JavaScript open-source qui permet de gérer, trier,
filtrer et afficher des données tabulaires dans des pages web de manière interactive et
conviviale. Elle offre une grande flexibilité pour manipuler et présenter des ensembles
de données complexes.
 MySQL: est un système de gestion de base de données relationnelle (SGBDR). Il
est distribué sous une double licence GPL et propriétaire. Il fait partie des logiciels
de gestion de base de données les plus utilisés au monde

V.1.2. Framework de développement utilisé :

27
Chapitre 2 : Étude conceptuelle et environnement de travail
Lors du choix du framework, nous avons pris en compte plusieurs critères. Tout d'abord, nous
avons effectué une recherche sur les tendances de popularité des frameworks PHP actuels.
D'après les statistiques, présentées dans la figure au dessous nous avons constaté que parmi les 9
principaux frameworks PHP gratuits, Laravel est le plus populaire.

En se basant sur cette information, nous avons considéré que Laravel était un choix solide
pour notre projet. Sa popularité témoigne de sa robustesse, de sa communauté active et de sa
grande adoption dans l'industrie.

Figure 12: statistiques des 9 Meilleurs Framework PHP

Laravel est un framework open-source de développement d'applications web en PHP, offrant
un large éventail de fonctionnalités. Voici les principales caractéristiques de Laravel :

 Gestion des dépendances : Laravel utilise Composer comme gestionnaire de

dépendances, ce qui permet d'ajouter facilement des packages spécifiques
provenant

 Eloquent ORM : Laravel fournit une mise en œuvre avancée du pattern ActiveRecord
appelée Eloquent. Cela permet de manipuler les données de la base de données à
28
traver

29
 Chapitre 2 : Étude conceptuelle et environnement de travail
 s des objets PHP, en fournissant des méthodes internes pour gérer les relations entre

les objets.

 Moteur de templates Blade : Laravel dispose d'un moteur de template appelé Blade,
qui permet de combiner des modèles avec des données pour générer des vues. Blade
traduit les modèles en code PHP mis en cache pour améliorer les performances de rendu.

 Migrations : Laravel propose un système de migrations pour gérer les modifications de

schéma de base de données. Cela facilite le contrôle des versions des schémas de base
de données, en permettant d'associer les changements dans le code source de
l'application avec les modifications nécessaires à la structure de la base de données. Cela
simplifie considérablement le déploiement et la mise à jour des applications.

En plus de ces fonctionnalités clés, Laravel offre un système de routage avancé, un ORM
puissant pour gérer les requêtes SQL, un système d'authentification flexible (Jetstream), un
système de validation, de pagination, d'envoi d'e-mails, de gestion des sessions, de mise en
cache, et bien plus encore. L'ensemble de ces fonctionnalités facilite le développement
d'applications web performantes, sécurisées et évolutives avec Laravel.

Bootstrap: est un framework front-end open-source très populaire, développé par Twitter. Il est
utilisé pour créer des interfaces web réactives et est largement adopté dans le développement
web moderne. Pour bootstrap on a l’utiliser juste pour générer des tableaux.

V.2. L'environnement de développement Microsoft Visual Studio :

Visual Studio est un environnement de développement intégré (IDE) développé par Microsoft. Il
offre une large gamme d'outils pour développer différents types de solutions

informatiques, notamment des applications web, des applications de bureau, des applications
mobiles, des jeux, des services et de l'intelligence artificielle. Visual Studio comprend de
nombreuses fonctionnalités puissantes, telles qu'un éditeur de texte avancé, IntelliSense (qui

fournit des suggestions contextuelles pendant la saisie), un concepteur de vues, un débogueur

intégré, un gestionnaire de packages NuGet, et bien plus encore.

30
Chapitre 2 : Étude conceptuelle et environnement de travail

VI. Conclusion:
Dans ce chapitre on a souligné l'importance de la phase d'analyse des besoins et de réflexion
pour la conception de notre application web. Cette étape est cruciale dans le cycle de
développement informatique, car elle permet de définir la meilleure structure et les
fonctionnalités nécessaires pour répondre aux exigences du projet. De plus, il est essentiel de
sélectionner les outils de travail appropriés pour la mise en œuvre du développement. Les
choix effectués jusqu'à présent, en termes d'architecture, de frameworks et d'environnement de
développement, joueront un rôle déterminant dans la suite du projet.
La prochaine étape de réalisation du projet sera donc basée sur le travail accompli jusqu'à
présent. Les décisions prises lors de cette phase d'analyse et de conception serviront de base
solide pour le développement de notre application web.

31
Chapitre 3: Mise en Œuvre du Projet

CHAPITRE 3: MISE EN ŒUVRE DU PROJET

I. Introduction:
L'objectif est d'examiner ces interfaces en détail et d'explorer leurs fonctionnalités. . Notre
objectif sera d'analyser ces interfaces et d'approfondir leur fonctionnement, en mettant l'accent
sur leurs caractéristiques et leurs capacités spécifiques.

II. Mise en œuvre des interfaces :

La première page de l'application RestoWeb présente une barre de navigation avec des options
de connexion et d'inscription. Les utilisateurs peuvent choisir de se connecter s'ils ont déjà un
compte ou de s'inscrire s'ils sont nouveaux sur l'application.

Figure 13:Welcome Page

Registre :

32
Chapitre 3: Mise en Œuvre du Projet

Figure 14:Registre Page

Login :
Si l'utilisateur a complètement oublié son mot de passe, il a la possibilité de cliquer sur
"Mot de passe oublié". Il recevra alors un e-mail contenant un lien pour réinitialiser son
mot de passe ou pour créer un nouveau mot de passe qu'il pourra utiliser pour se
connecter à l'application.

Figure 15:Login Page

33
Chapitre 3: Mise en Œuvre du Projet

Figure 16:Forget password Page

Figure 17:mail reset mot de passe Page

34
Chapitre 3: Mise en Œuvre du Projet

Figure 18: Nouveau mot de passe Page

Partie Client:

Home Page :

Figure 19: home page

35
Chapitre 3: Mise en Œuvre du Projet

Lorsque le client clique sur My Order , une nouvelle page s'ouvre, présentant le panier du
client qui contient les détails de sa commande en cours, tels que les articles sélectionnés,
les quantités, les prix et les options supplémentaires.

Confirmation /paiement pages :

Figure 20: confirmation Page

Sur la page de confirmation de commande, les clients de l'application RestoWeb peuvent

confirmer leur commande en fournissant leur numéro de table s'ils sont présents sur place. Ils ont
également la possibilité de choisir le mode de récupération de la commande : à emporter,
livraison ou consommation sur place. De plus, les clients peuvent ajouter des instructions
supplémentaires en entrant une note spécifique. Une fois la commande confirmée, les clients
recevront une alerte indiquant que leur commande a été confirmée avec succès.

Figure 21: succès confirmation alert

36
Chapitre 3: Mise en Œuvre du Projet

Une fois la commande confirmée, le client doit payer leur commande dans ce cas le client a la
possibilité de choisir le mode de paiement qui lui convient le mieux. Il peut opter pour le
paiement par carte de ou PayPal, ou choisir de régler en espèces.

Paiement par carte crédit :

Figure 22: Paiement avec carte crédit Page

Figure 23: Paiement succès Page

Paiement en espèce :
Le paiement en espèces dans RestoWeb permet aux clients de régler leur commande
directement en utilisant de l'argent liquide lors de la livraison ou lorsqu'ils se trouvent sur
place dans le restaurant

37
Chapitre 3: Mise en Œuvre du Projet
Paramètre:
Les clients de RestoWeb ont accès à un menu Paramètres où ils peuvent trouver différentes
options. Ils peuvent consulter la section d'Aide en cas de problème rencontré lors de la
commande, trouver des réponses à leurs questions fréquentes et obtenir de l'assistance. De plus,
ils ont la possibilité de consulter les options de sécurité pour modifier leur mot de passe et
assurer la confidentialité de leur compte. Les clients peuvent également accéder à la page À
Propos pour obtenir des informations détaillées sur l'application RestoWeb, son fonctionnement,
ses fonctionnalités et son objectif.

Figure 24: Paramètre

38
Chapitre 3: Mise en Œuvre du Projet

Figure 25: help page

Figure 26: Sécurité page

39
Chapitre 3: Mise en Œuvre du Projet

Figure 27: A propos page

NB:

Dans l'application RestoWeb, le client n'a pas accès à la fonctionnalité de tableau de bord
réservée à l'administrateur. Si un client essaie d'accéder à la page du tableau de bord, il sera re
dirigé vers la page de connexion. Si un client essaie d'accéder à la page de notifications dans
l'application RestoWeb sans avoir les autorisations appropriées, il sera redirigé vers une page
vide ne contient aucune notification.

Figure 28: Notification client page

40
Chapitre 3: Mise en Œuvre du Projet

Cela signifie qu'il ne pourra pas afficher les notifications réservées à d'autres rôles ou
fonctionnalités spécifiques de l'application. Cette différenciation des rôles est mise en œuvre en
utilisant des mécanismes de gestion des autorisations dans le framework Laravel.

Partie Admin:

Dans l'application RestoWeb, la partie administrative comprend des interfaces similaires à celles
des clients. Cela est rendu possible grâce à l'utilisation du mécanisme de gestion des
autorisations dans le framework Laravel. Ainsi, l'administrateur peut également accéder à la
page d'accueil, à la page de confirmation de commande et de paiement, tout comme les clients.
Cela permet à l'administrateur d'effectuer les mêmes tâches que les clients, telles que passer des
commandes, consulter les détails de la commande et effectuer des paiements. Cependant,
l'administrateur a également accès à des fonctionnalités supplémentaires liées à la gestion du
restaurant, telles que la gestion des menus, des employees, des utilisateurs etc.

Dashboard:
Une fois que le client s'est authentifié avec succès, il est redirigé vers le tableau de bord de
l'application.

Figure 29: Dashboard admin page

41
Chapitre 3: Mise en Œuvre du Projet

Le tableau de bord affiche également les commandes dans un tableau, avec des détails. Le statut
de la commande peut être "En attente", "Préparée" ou "Complétée". L'administrateur a le droit
de modifier le statut de la commande pour indiquer son avancement, en le passant à "Complétée"
lorsque la commande est prête à être livrée.

De plus, le tableau de bord comporte un autre tableau qui affiche le nombre de fois où chaque
plat a été commandé, catégorisé par type de plat. Cela permet à l'administrateur de visualiser les
plats populaires et de prendre des décisions éclairées concernant le menu et les promotions.

L'administrateur a la possibilité de cliquer sur la carte "Clients" pour afficher un tableau

contenant des informations détaillées sur les clients, tels que leurs noms, adresses e-mail, et role.

Figure 30: client page

Figure 31: chercher client

42
Chapitre 3: Mise en Œuvre du Projet

Figure 32: Supprimer client

Notification:

xle tableau de bord affiche également une section de notifications pour informer l'administrateur
lorsque de nouvelles commandes sont en cours de traitement. Ces notifications sont
généralement accompagnées d'une alerte visuelle utilisant SweetAlert pour attirer l'attention de
l'administrateur sur les actions [Link] par la suite L'administrateur peut cliquer sur la
notification pour accéder à la page de notifications.

Figure 33: table de notification

43
Chapitre 3: Mise en Œuvre du Projet

Figure 34: statistique RestoWeb

Dans cette page, nous présentons les statistiques de notre application RestoWeb. Nous affichons
un tableau qui indique le nombre de fois que chaque plat a été commandé. De plus, nous
utilisons un graphique pour représenter l'utilisation de trois méthodes de réception de
commandes : sur place, livraison et emporter. Enfin, nous utilisons un autre diagramme
interactif qui affiche les cinq meilleurs menus en se basant sur les commandes des clients. Ces
éléments visuels fournissent des informations précieuses sur l'activité de notre application et
aident à prendre des décisions éclairées.

Home page :

Figure 35: home admin page

44
Chapitre 3: Mise en Œuvre du Projet

Figure 36:Paramètre admin page

Les options d'aide, de sécurité et à propos sont les mêmes que celles disponibles dans les
paramètres du client. Cela est possible grâce à l'utilisation du mécanisme de gestion des
autorisations, permettant de partager les fonctionnalités communes entre les différents rôles
d'utilisateurs de l'application.

Votre restaurant:

L'interface d'administration permet à l'administrateur d'afficher les tables du restaurant, d'ajouter

une nouvelle table, de modifier les informations d'une table existante et de supprimer une table si
nécessaire. De plus, l'administrateur peut également afficher les commandes associées à chaque
table

45
Chapitre 3: Mise en Œuvre du Projet

Figure 37: les tables de restaurant

Figure 38: listes des tables

Figure 39: Ajouter des tables

46
Chapitre 3: Mise en Œuvre du Projet

Figure 40: Commande d'une table

Gestion des produits:
La fonctionnalité de gestion des produits permet à l'administrateur de gérer les catégories
et les plats du restaurant. Ajouter, modifier et supprimer.

Figure 41: suppression des produits

Gérer Plat :

47
Chapitre 3: Mise en Œuvre du Projet

Figure 42: Modifier Plats

Figure 43: Ajouter Plats

Gérer Menu:

48
Chapitre 3: Mise en Œuvre du Projet

Figure 44: Listes des catégories menues

Figure 45: Ajouter des catégories au menues

Figure 46: Succès menu ajouter

49
Chapitre 3: Mise en Œuvre du Projet

Figure 47:Succès menu modifié

Figure 48: Succès menu supprimé

Gestion des employées:

L'administrateur est responsable de la création des comptes des employés dans l'application. En
utilisant l'adresse e-mail et le mot de passe fournis, les employés peuvent se connecter à
l'application avec leurs identifiants. Cela permet à l'administrateur de gérer l'accès des employés
à l'application et de leur attribuer les autorisations appropriées en fonction de leurs rôles et
responsabilités. L'administrateur peut également gérer les comptes des employés en effectuant
des modifications ou des suppressions si nécessaire. Cette fonctionnalité assure une gestion
centralisée et sécurisée des comptes des employés dans l'application de restauration.

50
Chapitre 3: Mise en Œuvre du Projet

Figure 49: Affichages des employées

 Lorsque l'administrateur clique sur "Ajouter un employé", un formulaire s'affiche, lui

permettant de saisir les informations nécessaires pour créer un nouveau compte
employé.
 Pour modifier les informations d'un employé, l'administrateur peut simplement cliquer
sur le bouton "Modifier" correspondant à cet employé. Cela lui permettra d'accéder à un
formulaire
 De même, pour supprimer un employé, l'administrateur peut cliquer sur le

bouton "DELETE" associé à cet employé.

 Enfin, si l'administrateur souhaite simplement afficher les informations détaillées d'un

employé, il peut cliquer sur le bouton "Show" correspondant à cet employé. Cela
affichera un profil simplifié de l'employé, où les informations telles que le nom,
l'adresse e-mail, le rôle et d'autres détails pertinents seront affichés à des fins de
consultation.

51
Chapitre 3: Mise en Œuvre du Projet

Figure 50: Ajouter des employées

Figure 51: Ajouter avec succès alert (employe)

52
Chapitre 3: Mise en Œuvre du Projet

Figure 52: Modifier employées

Figure 53: Modifier succès alert employée

Figure 54: Profile employée

53
Chapitre 3: Mise en Œuvre du Projet

Figure 55: Suppression aler employée

III. Conclusion:
En conclusion de ce chapitre, nous avons passé en revue les différentes interfaces de notre
application de restauration RestoWeb. Ces interfaces comprennent la page d'accueil, la page de
commande, la page de confirmation de commande et le tableau de bord de l'administrateur.

Chacune de ces interfaces a été conçue pour offrir une expérience conviviale et intuitive aux
utilisateurs, en leur permettant de passer des commandes, de gérer leurs préférences et de
surveiller les activités liées à la restauration. Ces interfaces sont essentielles pour assurer une
interaction fluide et efficace entre les utilisateurs et l'application.

54
Conclusion générale et perspectives

En résumé, notre projet de développement de l'application web RestoWeb pour la restauration

a été une expérience stimulante et enrichissante. Nous avons réussi à concevoir et à mettre en
œuvre une application qui simplifie la commande de nourriture tout en fournissant aux
restaurants des outils de gestion efficaces.

Pendant la réalisation de notre projet, nous avons utilisé le framework Laravel pour développer
l'application. Cela nous a permis de bénéficier de ses fonctionnalités avancées, de sa
modularité et de sa robustesse.

En ce qui concerne les perspectives futures, plusieurs améliorations et évolutions peuvent être
envisagées pour notre application. Par exemple, nous pourrions ajouter une fonctionnalité
permettant la personnalisation des commandes, intégrer des services de livraison tiers et mettre
en place un système de fidélité pour récompenser les clients réguliers. De plus, il serait
intéressant d'étendre l'application à d'autres plateformes, comme les applications mobiles, afin
d'atteindre un public plus large.

Ce rapport présente le travail accompli lors du développement de RestoWeb, une application

web dédiée à la restauration. Nous avons abordé divers aspects tels que le cadre général du
projet, l'analyse et la conception, les techniques et outils utilisés, les fonctionnalités offertes aux
clients ainsi qu'à l'administrateur, et enfin les possibilités d'extension de l'application à d'autres
plateformes.

55
Bibliographie

CONCLUSION GENERALE ET PERSPECTIVES

BIBLIOGRAPHIE

1. Laravel Documentation - Site officiel de Laravel:

[Link] [consulté le 28/ 06/ 2023, [Link]

2. Bootstrap Documentation - Site officiel de Bootstrap:

[Link] [consulté le 28/ 06/ 2023, [Link]

Stack Overflow - Plateforme de questions-réponses pour les développeurs :

[Link] [consulté le 28/06/ 2023, [Link]

3. MVC image model:

[Link]
[Link] [consulté le 30 /05/ 2023, [Link]

4. Statistique 9 Meilleurs Framework PHP :

[Link]
content/uploads/2020/12/23063828/[Link] [consulté le 30 /05/
2023, [Link]

56