Site icon FahmidasClassroom

How to Create a simple responsive restaurant front page

Fahmida Yesmin
Img 20250329 083613

This tutorial will guide you in creating a restaurant front page using Bootstrap for styling, PHP for backend logic, and MySQL for storing dynamic content like menu items and customer reviews.

Prerequisites

Before starting, ensure you have:

1. Setting Up the Project

Step 1: Create a Project Folder

Navigate to your htdocs folder (if using XAMPP) and create a folder named restaurant.

Step 2: Start XAMPP

  1. Open XAMPP.
  2. Start Apache (for PHP) and MySQL (for database).

2. Creating the Database

Step 1: Open phpMyAdmin

  1. Go to http://localhost/phpmyadmin/.
  2. Click Databases, then create a database called restaurant_db.

Step 2: Create Tables

Run the following SQL queries in phpMyAdmin:

Table for Menu Items

CREATE TABLE menu (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    description TEXT NOT NULL,
    price DECIMAL(10,2) NOT NULL,
    image VARCHAR(255) NOT NULL
);

Table for Customer Reviews

CREATE TABLE reviews (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    review TEXT NOT NULL,
    rating INT NOT NULL CHECK (rating BETWEEN 1 AND 5)
);

3. Designing the Front Page with Bootstrap

Step 1: Create index.php

Inside the restaurant folder, create a file named index.php and add the following Bootstrap-based template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Restaurant Name</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Restaurant Name</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link" href="#menu">Menu</a></li>
                <li class="nav-item"><a class="nav-link" href="#reviews">Reviews</a></li>
                <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- Hero Section -->
<header class="bg-primary text-white text-center py-5">
    <h1>Welcome to Our Restaurant</h1>
    <p>Delicious Food, Great Atmosphere</p>
</header>

<!-- Menu Section -->
<div class="container my-5" id="menu">
    <h2 class="text-center">Our Menu</h2>
    <div class="row">
        <?php
        include 'config.php';
        $query = "SELECT * FROM menu";
        $result = mysqli_query($conn, $query);

        while ($row = mysqli_fetch_assoc($result)) {
            echo '<div class="col-md-4">';
            echo '<div class="card mb-4">';
            echo '<img src="uploads/' . $row['image'] . '" class="card-img-top" alt="Food Image">';
            echo '<div class="card-body">';
            echo '<h5 class="card-title">' . $row['name'] . '</h5>';
            echo '<p class="card-text">' . $row['description'] . '</p>';
            echo '<p class="fw-bold">$' . $row['price'] . '</p>';
            echo '</div>';
            echo '</div>';
            echo '</div>';
        }
        ?>
    </div>
</div>

<!-- Reviews Section -->
<div class="container my-5" id="reviews">
    <h2 class="text-center">Customer Reviews</h2>
    <div class="row">
        <?php
        $query = "SELECT * FROM reviews ORDER BY id DESC LIMIT 5";
        $result = mysqli_query($conn, $query);

        while ($row = mysqli_fetch_assoc($result)) {
            echo '<div class="col-md-4">';
            echo '<div class="card p-3 mb-3">';
            echo '<h5>' . $row['name'] . '</h5>';
            echo '<p>' . $row['review'] . '</p>';
            echo '<p>⭐ ' . $row['rating'] . '/5</p>';
            echo '</div>';
            echo '</div>';
        }
        ?>
    </div>
</div>

<!-- Contact Section -->
<div class="container text-center my-5" id="contact">
    <h2>Contact Us</h2>
    <p>Email: contact@restaurant.com</p>
    <p>Phone: (123) 456-7890</p>
</div>

<!-- Footer -->
<footer class="bg-dark text-white text-center py-3">
    <p>&copy; <?php echo date("Y"); ?> Restaurant Name</p>
</footer>

</body>
</html>

4. Connecting to MySQL Database

Step 1: Create config.php

Inside restaurant folder, create config.php to connect PHP with MySQL:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "restaurant_db";

$conn = mysqli_connect($servername, $username, $password, $database);

if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
?>

5. Adding an Admin Panel to Manage Menu Items

Step 1: Create admin.php

Create admin.php to allow adding new menu items:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin Panel</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <h2>Admin Panel - Add Menu Item</h2>
    <form action="upload.php" method="post" enctype="multipart/form-data">
        <div class="mb-3">
            <label class="form-label">Dish Name</label>
            <input type="text" name="name" class="form-control" required>
        </div>
        <div class="mb-3">
            <label class="form-label">Description</label>
            <textarea name="description" class="form-control" required></textarea>
        </div>
        <div class="mb-3">
            <label class="form-label">Price</label>
            <input type="number" name="price" class="form-control" required>
        </div>
        <div class="mb-3">
            <label class="form-label">Upload Image</label>
            <input type="file" name="image" class="form-control" required>
        </div>
        <button type="submit" class="btn btn-primary">Add Dish</button>
    </form>
</div>

</body>
</html>

Conclusion

Now, you have a fully functional restaurant front page with a Bootstrap design, PHP backend, and MySQL database to store menu items and customer reviews.

To improve:
✅ Add user authentication for the admin panel.
✅ Implement order functionality.
✅ Make it more responsive with CSS animations.

Exit mobile version