LYCEE TECHNIQUE MAGHREB

ㅤㅤ ARABE QUALIFIANT
ㅤ
Bd HASSAN- 60 010 -OUJDA

Brevet de Technicien Supérieur

Filière ; Développement des Systèmes d’Informations
Niveau : 2éme année

Rapport de Projet
Fin d’étude

Réaliser par : Encadré par :

Mohammed El Fallahi M.Ali Gouni
M.Fdal Amghad

Promotion 2024/2025
 Sommaire

1. Remerciements
2. Introduction
o Contexte et justification du projet.
o Objectifs généraux et spécifiques.
o Méthodologie adoptée.
3. Problématique
4. Solution
5. Analyse des Besoins
o Identification des utilisateurs cibles (clients et
administrateurs).
o Définition des fonctionnalités attendues.
o Étude des contraintes techniques et fonctionnelles.
6. Conception du Système
Modélisation UML :
 Diagramme de Composants.
 Diagramme de cas d'utilisation.
 Diagramme de classes.
 Diagramme de séquence.
7. Développement du Site Web
o Choix des technologies (Frontend, Backend, Base de
données).
 o Implémentation des fonctionnalités principales :
 Consultation du menu.
 Réservation en ligne.
 Commande en ligne.
 Interface d'administration.
o Gestion de la sécurité et de l'authentification.
8. Tests et Validation
o Stratégie de test adoptée.
o Résultats des tests fonctionnels et techniques.
o Corrections et améliorations apportées.
9. Déploiement et Maintenance
o Procédure de mise en ligne du site.
o Plan de maintenance et de mise à jour.
o Formation des administrateurs à l'utilisation du système.
10. Conclusion
o Bilan du projet.
o Perspectives d'évolution et d'amélioration.
o Retour d'expérience.
11. Annexes
o Code source.
o Captures d'écran du site.
o Documentation technique.
o Références bibliographiques.

1.Remerciements
Je tiens à exprimer ma profonde gratitude à toutes les personnes
qui ont contribué à la réalisation de ce Projet de Fin d’Etudes
Je remercie tout particulièrement mon encadrant, M. ALI GOUNI ,
M.FDAL AMGHAD, M.OMARI RACHID et MME.BOUJTAT
BOUCHRA pour son accompagnement, ses conseils avisés et sa
disponibilité tout au long de ce travail.
Je souhaite également remercier l'ensemble du corps enseignant
du BTS Lycée Technique Maghreb Arabe Qualifiant pour la
qualité de l'enseignement dispensé et leur soutien constant.
Ma reconnaissance s'adresse aussi à mes camarades de classe
pour leur collaboration et les échanges enrichissants qui ont
jalonné ce projet.
Enfin, je remercie ma famille et mes proches pour leur soutien
moral et leur encouragement tout au long de cette aventure.
 2. Introduction
Contexte et justification du projet
À l’ère du numérique, la présence en ligne est devenue
indispensable pour les entreprises, y compris dans le secteur de
la restauration. Les clients recherchent de plus en plus des
informations sur les établissements via Internet avant de faire
leur choix. Le restaurant Elfallahi, soucieux de répondre aux
attentes de sa clientèle et de renforcer sa visibilité, envisage la
création d’un site web. Ce projet vise à offrir une plateforme
intuitive permettant aux clients de consulter le menu, de réserver
une table et de passer des commandes en ligne, tout en facilitant
la gestion interne pour les administrateurs.
Objectifs généraux et spécifiques
Objectif général :
 Développer un site web fonctionnel et ergonomique pour le
restaurant Elfallahi, intégrant les fonctionnalités essentielles
pour les clients et les administrateurs.
Objectifs spécifiques :
 Permettre aux clients de consulter le menu en ligne de
manière claire et attractive.
 Offrir une fonctionnalité de réservation de table avec
sélection de la date, de l’heure et du nombre de personnes.
 Intégrer un système de commande en ligne avec choix des
plats et saisie de l’adresse de livraison.
  Fournir une interface d’administration sécurisée pour la
gestion du menu, des réservations et des commandes.
 Assurer une expérience utilisateur optimale sur différents
appareils (ordinateurs, tablettes, smartphones).DSpace
Université de Temouchent
Méthodologie adoptée
La réalisation de ce projet suivra une démarche méthodique en
plusieurs étapes :
1. Analyse des besoins : Identification des attentes des
utilisateurs (clients et administrateurs) et définition des
fonctionnalités requises.
2. Conception : Élaboration des maquettes de l’interface
utilisateur et modélisation des données à l’aide de
diagrammes UML (cas d’utilisation, classes, séquences,
composants).
3. Développement : Implémentation du site web en utilisant
des technologies web adaptées (HTML, CSS, JavaScript
pour le frontend ; PHP ou Node.js pour le backend ; MySQL
pour la base de données).
4. Tests et validation : Vérification du bon fonctionnement des
fonctionnalités, correction des éventuelles anomalies et
optimisation des performances.
5. Déploiement : Mise en ligne du site web et formation des
administrateurs à son utilisation.
Cette méthodologie vise à garantir la qualité, la fiabilité et la
pérennité du site web du restaurant Elfallah
 3. Problématique du Projet
À l'ère du numérique, les habitudes des consommateurs évoluent
rapidement, notamment dans le secteur de la restauration. Les
clients recherchent désormais des solutions simples et rapides
pour accéder aux services des restaurants, comme la
consultation du menu, la réservation de tables ou la commande
en ligne. Cependant, de nombreux établissements, notamment
dans des régions comme Oujda, ne disposent pas encore d'une
présence en ligne efficace pour répondre à ces nouvelles
attentes.
 4. Solution
Afin de répondre efficacement aux besoins identifiés et aux
nouvelles attentes des clients dans le secteur de la restauration,
la création d’un site web dynamique et interactif pour le
restaurant Elfallahi s’impose comme la solution la plus adaptée.
Cette plateforme en ligne permettra de centraliser plusieurs
services essentiels, facilitant ainsi à la fois le travail des
administrateurs et l’expérience des clients. Le site offrira une
interface moderne, ergonomique et compatible avec tous les
types d’appareils (ordinateurs, smartphones, tablettes).
Les fonctionnalités principales de cette solution seront :
 ✅ Consultation du menu en ligne : accès facile et attractif aux
différents plats proposés par le restaurant, accompagnés
d’images et de descriptions détaillées.
 ✅ Réservation de tables : formulaire intuitif permettant aux
clients de choisir la date, l’heure et le nombre de convives.
 ✅ Commande en ligne : système complet pour commander
les plats avec choix des quantités et saisie de l’adresse de
livraison.
 ✅ Espace administrateur sécurisé : interface réservée à la
gestion du site (ajout/modification des plats, gestion des
réservations et des commandes, mise à jour des
informations générales).
  ✅ Système d’authentification : sécurité renforcée pour
protéger les données personnelles et les opérations
sensibles.
Cette solution permettra donc au restaurant Elfallahi de :
1. Renforcer sa visibilité sur Internet.
2. Améliorer la relation client par un service simple, rapide et
pratique.
3. Optimiser la gestion interne grâce à des outils numériques
fiables.
 5. Analyse des Besoins
Identification des utilisateurs cibles
Le site web s'adresse principalement à deux catégories
d'utilisateurs :
 Clients : individus souhaitant consulter le menu, réserver
une table ou passer une commande en ligne.
 Administrateurs : personnel du restaurant responsable de
la gestion du contenu du site, des réservations et des
commandes.
Définition des fonctionnalités attendues
Pour répondre aux besoins des utilisateurs identifiés, les
fonctionnalités suivantes sont prévues :
Pour les clients :
 Consultation du menu avec descriptions et images des plats.
 Réservation en ligne avec sélection de la date, de l'heure et
du nombre de personnes.
 Passation de commandes en ligne avec choix des plats et
saisie de l'adresse de livraison.
 Suivi de l'état des commandes en temps réel.
 Accès aux informations de contact et horaires d'ouverture du
restaurant.
Pour les administrateurs :
 Gestion du menu : ajout, modification et suppression de
plats.
  Gestion des réservations : visualisation, confirmation et
annulation.
 Gestion des commandes : suivi des commandes en cours et
archivage.
 Mise à jour des informations générales du site (horaires,
coordonnées, etc.).
Étude des contraintes techniques et fonctionnelles
Contraintes techniques :
 Compatibilité multiplateforme : le site doit être accessible
et fonctionnel sur divers appareils (ordinateurs, tablettes,
smartphones).
 Sécurité : mise en place de protocoles sécurisés pour la
protection des données des utilisateurs.
 Performance : temps de chargement optimisé pour une
navigation fluide.
 Maintenance : facilité de mise à jour et de maintenance du
site.
Contraintes fonctionnelles :
 Ergonomie : interface utilisateur intuitive facilitant la
navigation et l'accès aux différentes fonctionnalités.
 Accessibilité : respect des normes d'accessibilité pour les
personnes en situation de handicap.
 Personnalisation : possibilité d'adapter certaines
fonctionnalités selon les besoins spécifiques du restaurant.
 6. Conception du Projet
Diagramme de Composants :
1. Frontend (Interface utilisateur)
Le frontend est la partie du site avec laquelle les utilisateurs
interagissent directement.
 HTML : Structure le contenu de la page web.
 CSS : Gère la présentation et le design du site.
 JavaScript : Ajoute de l'interactivité et des fonctionnalités
dynamiques.
Relations :
 HTML dépend de CSS pour le style.
 HTML dépend de JavaScript pour les fonctionnalités
interactives.
2. Backend (Serveur et logique métier)
Le backend traite les requêtes des utilisateurs et gère la logique
du site.
 Module Réservations : Gère les réservations effectuées par
les clients.
 Module Commandes : Gère les commandes en ligne et leur
traitement.
 Module Menu : Gère l'affichage et la mise à jour du menu du
restaurant.
Relations :
 JavaScript du frontend interagit avec les modules du
backend pour effectuer des actions comme réserver une
table ou passer une commande.
3. Base de Données
La base de données stocke toutes les informations nécessaires
au fonctionnement du site.
 Table Plats : Contient les informations sur les plats proposés
(nom, description, prix, etc.).
 Table Réservations : Stocke les détails des réservations
effectuées par les clients.
 Table Commandes : Enregistre les commandes passées, y
compris les plats choisis et les informations de livraison.
Relations :
 Les modules du backend interagissent avec les tables de la
base de données pour récupérer ou enregistrer des
informations.
Diagramme de cas d’utilisation :
 Client : visiteur du site qui interagit avec les services
disponibles (lecture, réservation, commande,
personnalisation).
 Administrateur : responsable de la gestion du contenu et
des fonctionnalités du site.
Diagramme de classes :
Client
Représente un utilisateur du site (un client du restaurant).
 Il peut consulter le menu, faire une réservation de table,
ou passer une commande pour livraison.

Administrateur
C’est la personne qui gère le site (comme le propriétaire ou un
employé).
 Il peut gérer le menu, les réservations et les commandes
des clients.

PageAccueil
C’est la page principale du site web.
 Elle affiche les différentes sections : menu, réservation,
livraison, etc.

Menu
Contient une liste de plats que le restaurant propose.
 Il peut être affiché ou filtré par catégorie (entrées, desserts,
etc.).
Plat
Décrit un plat : nom, description, prix, image, catégorie.

Reservation
Permet à un client de réserver une table à une date, une heure
et pour un nombre de personnes.

Livraison
Contient les informations d’une commande à livrer :
 adresse du client
 liste des plats commandés

Relations
 Le client peut voir le menu, faire une réservation ou
passer une commande.
 L’administrateur peut gérer le menu, les réservations et
les commandes.
 La page d’accueil affiche les modules comme menu,
réservation et livraison.
 Le menu contient plusieurs plats.
 Une livraison contient aussi une liste de plats
Diagramme de Séquence :
Éléments clés du diagramme de séquence
1. Lignes de vie (lifelines) :
o Représentent les participants à l'interaction (acteurs ou
objets).
 o Chaque ligne de vie est une ligne verticale qui indique la
durée de vie de l'objet pendant l'interaction.
2. Messages :
o Représentent la communication entre les objets.
o Illustrés par des flèches horizontales entre les lignes de
vie.
o Peuvent être synchrones (l'expéditeur attend une
réponse) ou asynchrones (l'expéditeur continue sans
attendre)
3. Activations :
o Représentent la période pendant laquelle un objet est
actif ou exécute une opération.
o Illustrées par des rectangles verticaux sur la ligne de
vie.
4. Cadres d'interaction (fragments combinés) :
o Permettent de modéliser des structures de contrôle
comme les conditions (if/else), les boucles (loop) ou les
options (opt).
o Encadrent une partie du diagramme pour indiquer une
logique spécifique.
🔹 Exemple simplifié : Réservation en ligne dans un
restaurant

Imaginons le scénario où un client réserve une table via le site

web du restaurant. Le diagramme de séquence pourrait se
dérouler ainsi :
1. Client → Interface : Clique sur "Réserver".
2. Interface → Système : Affiche le formulaire de réservation.
3. Client → Interface : Remplit le formulaire avec la date,
l'heure et le nombre de personnes.
4. Interface → Système : Soumet les données de réservation.
5. Système → Base de Données : Vérifie la disponibilité.
6. Base de Données → Système : Retourne la disponibilité.
7. Système → Interface : Confirme la réservation.
8. Interface → Client : Affiche la confirmation.

Utilité du diagramme de séquence

 Visualiser l'ordre des interactions entre les composants
du système.
 Identifier les responsabilités de chaque objet ou acteur.
 Détecter les problèmes potentiels dans la logique
d'interaction.
 Faciliter la communication entre les membres de l'équipe
de développement.
 7. Développement du Site Web
Choix des technologies

Implémentation des fonctionnalités principales

1. Consultation du menu
 Section Menu déjà réalisée dans le code HTML.
 Affichage dynamique possible avec PHP + MySQL (lecture
depuis une table menus).
2. Réservation en ligne
 Page dédiée : reservation.html
 Formulaire avec champs : Nom, Email, Téléphone, Date,
Heure, Nombre de personnes.
 Traitement en PHP (reservation.php) :
o Insertion des données dans une table reservations.
o Message de confirmation.
✅ 3. Commande en ligne
 Page livraison.html
 Formulaire avec sélection de plats, quantité, informations
client.
 Stockage dans une table commandes.
 Envoi email de confirmation (optionnel).
✅ 4. Interface d'administration
  Accès sécurisé par login/mot de passe (admin.php).
 Gestion des menus, réservations, commandes.
 CRUD basique en PHP + MySQL :
o Ajouter/modifier/supprimer des plats
o Voir les réservations / commandes.

Gestion de la sécurité et de l'authentification

 8 . Tests et Validation
Stratégie de test adoptée

Méthode :
 Tests manuels sur les pages HTML/PHP.
 Navigateurs testés : Google Chrome, Firefox, Microsoft
Edge.
 Formats testés : PC.
Résultats des tests fonctionnels et techniques
Résultat Résultat
Fonctionnalité État
attendu obtenu
Le menu s’affiche ✔️Affichage
Consultation du menu Réussi
correctement correct

Réservation ✔️
Réservation en ligne enregistrée dans la base Enregistrement Réussi
de données confirmé

Commande
Commande en ligne ✔️Fonctionne Réussi
enregistrée

Connexion admin +
Interface administration ✔️Fonctionne Réussi
CRUD

Protection contre
Sécurité formulaire ✔️Fonctionne Réussi
entrées invalides

Affichage correct
Responsive design ✔️Fonctionne Réussi
sur tous écrans
 Corrections et améliorations apportées
Problème détecté Correction apportée
Problème d’affichage mobile Amélioration des marges CSS, flexibilité renforcée

Champs réservation non

Ajout de l’attribut required dans les formulaires
obligatoires

Passage aux requêtes préparées avec

Risque d’injection SQL
mysqli_prepare()

Ergonomie des boutons Agrandissement et amélioration de leur visibilité

 Conclusion
La réalisation de ce projet m’a permis de mettre en pratique
l’ensemble des compétences acquises durant ma formation en
BTS Développement des Systèmes d’Information. De l’analyse
des besoins à la mise en ligne du site, chaque étape a été
l’occasion d’approfondir mes connaissances en développement
web (HTML, CSS, PHP) et en gestion de projet.
Le site Elfallahi Restaurant offre aujourd’hui aux clients une
plateforme moderne, intuitive et fonctionnelle, permettant de
consulter le menu, réserver une table, commander en ligne et
localiser facilement le restaurant. L’intégration d’une interface
d’administration simplifie également la gestion quotidienne pour
l’équipe du restaurant.
Enfin, ce projet m’a également sensibilisé à l’importance des
tests, de la sécurité et de la maintenance continue d’un site web
professionnel.
Cette expérience a été enrichissante tant sur le plan
technique que personnel et constitue un atout majeur dans la
suite de mon parcours professionnel.
 Bilan du projet
La réalisation du site web Elfallahi Restaurant a permis
d’atteindre les objectifs fixés au départ : offrir une vitrine
professionnelle au restaurant, faciliter la réservation en ligne,
proposer un système de commande efficace, et simplifier la
gestion via une interface d’administration. Le site est fonctionnel,
ergonomique et adapté aux besoins des clients comme du
personnel administratif. Ce projet a représenté un défi technique
enrichissant, mêlant développement frontend, backend et gestion
de base de données.
Perspectives d'évolution et d'amélioration
Plusieurs pistes d’amélioration peuvent être envisagées pour
enrichir et optimiser le site :
 Intégration d’un système de paiement en ligne sécurisé.
 Mise en place d’une section “Avis clients” pour renforcer
l’interaction avec les utilisateurs.
 Développement d’une version mobile sous forme
d’application Android/iOS.
 Optimisation du référencement naturel (SEO) pour
augmenter la visibilité en ligne.
 Intégration d’un tableau de bord statistique pour
l’administrateur (commandes, réservations, visites…).
Retour d'expérience
Ce projet a été une excellente opportunité pour développer
mes compétences en développement web, en gestion de projet
 ,
ainsi qu’en conception de bases de données. J’ai
particulièrement appris l’importance de l’organisation, des tests
réguliers, et de la communication avec le “client” pour bien cerner
les besoins. Il a également renforcé mon autonomie, ma rigueur
et mon esprit critique face aux choix techniques.
Cette expérience m’encourage à poursuivre dans le domaine
du développement web et à me perfectionner dans des
technologies plus avancées.