Mon stage s'est déroulé chez MOMO HUT, un restaurant spécialisé dans la cuisine tibétaine situé à Briançon. Mon objectif était de concevoir, développer et livrer un site web complet, permettant de :
Lâun des critĂšres imposĂ©s Ă©tait de ne pas utiliser de framework ou de CMS. Jâai donc tout dĂ©veloppĂ© Ă la main avec HTML, CSS, PHP et MySQL, hĂ©bergĂ© localement via XAMPP
.
Avant de coder, jâai dâabord dĂ©fini les besoins du client (structure, fonctionnalitĂ©s, style). Jâai rĂ©alisĂ© un mini cahier des charges simple avec les pages suivantes :
index.php
â page dâaccueilabout.php
â prĂ©sentation du restaurantmenu.php
â galerie des platscontact.php
â formulaire de contactreserve.php
â formulaire de rĂ©servationJâai organisĂ© le projet en dossiers :
/imgs-projects
â images du menu et du site/css
â fichiers CSS (gĂ©nĂ©raux + spĂ©cifiques projets)/php
â fichiers de traitement pour les formulaires
Toutes les pages sont codĂ©es avec une base commune : un en-tĂȘte <header>
, une section <main>
et un <footer>
. Voici un extrait de la structure HTML utilisée :
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MOMO HUT</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <nav>...</nav> <main> <section class="hero">...</section> <section class="content">...</section> </main> <footer>© 2025 MOMO HUT</footer> </body> </html>
Jâai utilisĂ© des classes CSS cohĂ©rentes comme .hero
, .btn
, .section-title
pour uniformiser le design. Le site est Ă©galement responsive, donc il sâadapte aux Ă©crans PC, tablette et mobile.
Jâai conçu un design moderne, simple et Ă©lĂ©gant avec un fond sombre, du texte clair, et des accents colorĂ©s pour les boutons et les liens. Ce contraste amĂ©liore la lisibilitĂ© et donne un aspect professionnel.
Jâai structurĂ© mes feuilles de style de cette façon :
GrĂące Ă flexbox
et grid
, jâai pu organiser les Ă©lĂ©ments de la page de façon claire et adaptable.
Flexbox sert à placer les éléments en ligne ou en colonne facilement (comme aligner des boutons).
Grid permet de créer une sorte de tableau invisible pour positionner les éléments plus précisément.
Jâai aussi utilisĂ© des tailles flexibles pour que tout sâadapte aux petits et grands Ă©crans.
Jâai utilisĂ© phpMyAdmin pour crĂ©er une base de donnĂ©es appelĂ©e momohut
. Elle contient deux tables principales : messages et reservations.
messages
id
â INT, clĂ© primaire auto-incrĂ©mentĂ©enom
â VARCHAR(255) : nom de lâexpĂ©diteuremail
â VARCHAR(255) : adresse emailmessage
â TEXT : contenucreated_at
â TIMESTAMP : date automatiquereservations
id
â INT, clĂ© primairenom
â nom du clientemail
â emaildate
â date de rĂ©servationheure
â heurepersonnes
â nombre de couvertsVoici un exemple de requĂȘte SQL utilisĂ©e dans phpMyAdmin :
CREATE TABLE reservations ( id INT AUTO_INCREMENT PRIMARY KEY, nom VARCHAR(255), email VARCHAR(255), date DATE, heure TIME, personnes INT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );
CREATE TABLE reservations
: crée une nouvelle table appelée reservations dans la base de données.id INT AUTO_INCREMENT PRIMARY KEY
: identifiant unique pour chaque rĂ©servation, qui sâincrĂ©mente automatiquement Ă chaque nouvelle ligne.nom VARCHAR(255)
: champ texte (jusquâĂ 255 caractĂšres) pour enregistrer le nom de la personne.email VARCHAR(255)
: champ texte pour stocker lâadresse email.date DATE
: stocke la date de réservation (au format AAAA-MM-JJ).heure TIME
: stocke lâheure de la rĂ©servation (HH:MM:SS).personnes INT
: nombre de personnes pour la réservation (valeur entiÚre).created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
: enregistre automatiquement la date et lâheure de crĂ©ation de chaque ligne.Le formulaire envoie les donnĂ©es en POST Ă un script PHP :
<?php if (isset($_POST['submit'])) { $nom = htmlspecialchars($_POST['nom']); $email = htmlspecialchars($_POST['email']); $message = htmlspecialchars($_POST['message']); $conn = mysqli_connect("localhost", "root", "", "momohut"); if (!$conn) { die("Erreur de connexion : " . mysqli_connect_error()); } $sql = "INSERT INTO messages (nom, email, message) VALUES ('$nom', '$email', '$message')"; if (mysqli_query($conn, $sql)) { echo "â Message envoyĂ©"; } else { echo "â Erreur : " . mysqli_error($conn); } mysqli_close($conn); } ?>
isset($_POST['submit'])
: vérifie si le formulaire a été soumis (via le bouton "submit").htmlspecialchars()
: empĂȘche les failles XSS (une faille de sĂ©curitĂ© qui permet Ă un pirate dâinjecter du code malveillant) en dĂ©sactivant les balises HTML envoyĂ©es dans le formulaire.mysqli_connect()
: établit une connexion à la base de données MySQL (ici : serveur local, utilisateur root, base "momohut").if (!$conn)
: vĂ©rifie si la connexion a Ă©chouĂ©, et affiche un message dâerreur si câest le cas.INSERT INTO
: requĂȘte SQL pour insĂ©rer le nom, lâemail et le message dans la table messages
.mysqli_query()
: exĂ©cute la requĂȘte SQL.echo
: affiche un message selon que la requĂȘte a rĂ©ussi ou Ă©chouĂ©.mysqli_close()
: ferme la connexion Ă la base de donnĂ©es (bonne pratique).Le site MOMO HUT est hĂ©bergĂ© localement avec XAMPP. Ce nâest pas un hĂ©bergement en ligne, mais une simulation de serveur local sur mon ordinateur. XAMPP me permet dâavoir un environnement Apache (pour le serveur) et MySQL (pour la base de donnĂ©es) afin de dĂ©velopper et tester toutes les fonctionnalitĂ©s sans connexion Internet.
"Quand le formulaire est soumis, les donnĂ©es sont rĂ©cupĂ©rĂ©es, sĂ©curisĂ©es et insĂ©rĂ©es dans la base de donnĂ©es grĂące Ă une requĂȘte SQL. Si la connexion Ă©choue, un message dâerreur sâaffiche."
Une fois le site terminĂ©, jâai rĂ©alisĂ© de nombreux tests pour mâassurer que chaque fonctionnalitĂ© fonctionne correctement :
Les erreurs les plus frĂ©quentes que jâai corrigĂ©es :
Ce projet mâa permis dâappliquer tout ce que jâai appris en cours et bien plus. Jâai dĂ©couvert lâimportance :
Jâai Ă©galement gagnĂ© en autonomie et en rigueur. MĂȘme sans expĂ©rience pro avant ce stage, jâai rĂ©ussi Ă crĂ©er un site complet, fonctionnel et utilisable. Je sais maintenant utiliser un environnement local (XAMPP), crĂ©er une base avec phpMyAdmin, et connecter le tout avec PHP.
"Pendant mon stage, jâai conçu un site web complet pour un restaurant. Jâai utilisĂ© HTML, CSS, PHP et MySQL pour gĂ©rer le contenu, les rĂ©servations, et les messages. Jâai tout testĂ© localement avec XAMPP et phpMyAdmin, corrigĂ© des bugs, et amĂ©liorĂ© le design. Ce projet mâa vraiment permis de progresser et de tout faire moi-mĂȘme du dĂ©but Ă la fin."