Coding With Nyemmal Watch on YouTube

Complete Coffee Shop Website Tutorial Using HTML , CSS , JS , PHP & MySQL Part 2

3 min read 1 hour ago

Published on Apr 19, 2026 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, we will build the Products Page for a Coffee Shop Website using HTML, CSS, JavaScript, PHP, and MySQL. This page is crucial for displaying products dynamically from a database and includes essential features such as "Add to Cart" and "Add to Wishlist" functionalities. By the end of this guide, you'll have a responsive and visually appealing product page ready for your coffee shop website.

Step 1: Set Up Your Environment

Ensure you have a local server environment like XAMPP or WAMP installed.
Create a new folder for your Coffee Shop project in the server's htdocs directory.
Download the images and database file from this link.
Import the database file into your MySQL database using phpMyAdmin.

Step 2: Create the Products Page

In your project folder, create a new file named products.php.

Use the following HTML structure to set up the basic layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Products - Coffee Shop</title>
</head>
<body>
    <header>
        <h1>Our Products</h1>
    </header>
    <main id="product-list"></main>
    <script src="script.js"></script>
</body>
</html>

Step 3: Connect to the Database

In products.php, establish a connection to your MySQL database:

<?php
$conn = new mysqli('localhost', 'username', 'password', 'database_name');
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>

Replace username, password, and database_name with your actual database credentials.

Step 4: Fetch and Display Products

Write a PHP script to fetch products from the database and display them:

<?php
$sql = "SELECT * FROM products";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<div class='product'>";
        echo "<img src='" . $row['image'] . "' alt='" . $row['name'] . "' />";
        echo "<h2>" . $row['name'] . "</h2>";
        echo "<p>" . $row['description'] . "</p>";
        echo "<p>$" . $row['price'] . "</p>";
        echo "<button class='add-to-cart' data-id='" . $row['id'] . "'>Add to Cart</button>";
        echo "<button class='add-to-wishlist' data-id='" . $row['id'] . "'>Add to Wishlist</button>";
        echo "</div>";
    }
} else {
    echo "No products found.";
}
?>

Step 5: Implement JavaScript for User Interaction

In script.js, set up event listeners for the "Add to Cart" and "Add to Wishlist" buttons:

document.addEventListener('DOMContentLoaded', () => {
    const cartButtons = document.querySelectorAll('.add-to-cart');
    const wishlistButtons = document.querySelectorAll('.add-to-wishlist');

    cartButtons.forEach(button => {
        button.addEventListener('click', () => {
            const productId = button.getAttribute('data-id');
            // Code to handle adding to cart
            console.log(`Product ${productId} added to cart`);
        });
    });

    wishlistButtons.forEach(button => {
        button.addEventListener('click', () => {
            const productId = button.getAttribute('data-id');
            // Code to handle adding to wishlist
            console.log(`Product ${productId} added to wishlist`);
        });
    });
});

Step 6: Make the Page Responsive

Add CSS styles in styles.css to ensure the page looks good on various devices:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

#product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.product {
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
    width: 200px;
    text-align: center;
}

@media (max-width: 600px) {
    .product {
        width: 100%;
    }
}

Conclusion

You have successfully created a Products Page for your Coffee Shop website! This page dynamically displays products from your database and includes interactive features for users to add items to their cart or wishlist. For further enhancements, consider integrating payment gateways or user authentication. Keep experimenting with designs and functionalities to make your website even more engaging!

Table of Contents

Recent