🍜 Stage 2025 – MOMO HUT

🎯 Objectif du projet

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.

📐 Conception du projet

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 :

đŸ› ïž Outils utilisĂ©s

J’ai organisĂ© le projet en dossiers :

đŸ§± Structure HTML

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.

🎹 Design CSS – Choix visuels

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 :

📐 Responsive design

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.

đŸ’Ÿ Base de donnĂ©es – Structure & crĂ©ation

J’ai utilisĂ© phpMyAdmin pour crĂ©er une base de donnĂ©es appelĂ©e momohut. Elle contient deux tables principales : messages et reservations.

📋 Table messages

📅 Table reservations

Voici 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
  );
    

🧠 Explication de chaque ligne

📬 PHP – Formulaire de contact

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);
  }
  ?>
    

🧠 Explication de chaque ligne

🌐 HĂ©bergement du site

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.

💬 RĂ©sumĂ©:

"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."

đŸ§Ș Tests & corrections

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 :

📾 Galerie du projet

Accueil du site À propos Contact RĂ©servation phpMyAdmin

🧠 Bilan personnel

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.

💬 RĂ©sumĂ© final:

"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."

âŹ…ïž Retour aux projets