International Islamic University Chittagong
Project Report
Course Code - CSE-3532
Course Title - Tools and Technologies for Internet
Programming
Project Name- Coffee Shop Management
Submitted To:-
Tasnia Noor Yesmin
Adjunct Faculty, Dept.of CSE,IIUC
Submitted By:-
Name- Kashpia Tasnova
Id No- C221277
Section- 5CF
Semester- 5th
Department- CSE
1
Project Name : Coffee Shop Management
Introduction:
The Coffee Shop Management System is a web-based application designed to
streamline and optimize the operations of a coffee shop. This project leverages
HTML, CSS, JavaScript, PHP and MySQL to create an interactive and user-friendly
interface for both customers and administrators. The primary goal of this system is
to enhance the customer experience by providing a seamless way to explore the
menu, place orders, and communicate with the coffee shop. Simultaneously, it offers
robust administrative functionalities to manage customer interactions, orders, and
overall operations efficiently.
Objective:
The main objectives of this project are:
• Enhance Customer Experience: By providing an intuitive and easy-to-navigate
website, the system aims to improve customer satisfaction and loyalty.
• Streamline Operations: The administrative tools enable efficient management
of customer data, orders, and communications, reducing manual workload and
errors.
• Promote Engagement: Features like the gallery and about page help build a
connection with customers, promoting the coffee shop's brand and values.
Methodology:
▪ Software Used: Visual Studio Code , XAMPP
▪ Programming Languages Used:
• Front-End : HTML , CSS , JavaScript.
• Back-End : PHP.
• Database : MySQL.
▪ Operating System: Windows 11 .
System Design:
The system design for the Coffee Shop Management System involves front-end
and back-end architecture, database design, and the interaction between different
components, ensuring efficient workflow for customers and administrators.
2
1.Architecture Overview
• Multi-Tier Web Application:
▪ Presentation Layer: HTML, CSS, JavaScript .
▪ Application Logic Layer: PHP .
▪ Data Layer: MySQL .
2. Front-End Design
• Pages and Components:
▪ Home Page: Overview of services and offerings.
▪ About Page: Information about the coffee shop.
▪ Gallery Page: Showcase of ambiance, events, and popular items.
▪ Menu Page: List of food and beverages with descriptions and prices.
▪ Contact Page: Form for customer inquiries.
▪ Login Page: Form for users to log into their accounts.
▪ Register Page: Form for new users to create an account.
▪ Order Page: Form for placing orders by selecting items from the menu.
3. Back-End Design
• Core Functionalities:
▪ Login and register management: Storing login and register information.
▪ Order Management: Processing and storing customer orders.
▪ Contact Management: Storing and managing customer inquiries.
▪ Admin Operations: Viewing, adding, editing, and deleting user, order, and
contact information.
4.Database Design
5.Interaction Flow
• User Registration
• User Login
• Menu Browsing and Ordering
• Contact Form Submission’
• Admin Management
3
6.Security Considerations
• Access Control: Role-based access control to differentiate between customer
and admin functionalities.
Implementation:
Home page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Coffee shop</title>
<link rel="shortcut icon" type="image/x-icon"
href="/lab%2520image/home%20page%20logo.jpeg">
<link rel="stylesheet" href="home%20page.css">
</head>
<body background="lab image/coffee 9.jpeg">
<header>
<nav class="navbar">
<a href="#" class="logo">Coffee <span></span></a>
<ul class="menu-links">
<li><a href="home%20page.html">Home</a></li>
<li><a href="about%20us.html">About us</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact%20us.html">Contact us</a></li>
<li><a href="login.html">Log in</a></li>
4
</ul>
<span class="symbols">menu</span>
</nav>
</header>
<section class="content-section">
<div class="content">
<h1>Start Your Day With Fresh Coffee</h1>
<p>
Coffee is a popular and beloved beverage enjoyed by people around the
world.Awaken your senses with a steaming cup of liquid motivation.
</p>
<button><a href="menu.html">Order Now</a></button>
</div>
</section>
</body>
</html>
Menu Page
<div class="menu">
<div class="heading">
<h1>Our Menu</h1>
</div>
<!-- Coffee Item 1 -->
<div class="coffee-item">
5
<img src="lab image/espresso 2.jpeg" alt="" height="150px"
width="150px">
<div class="details">
<div class="details-sub">
<h5>Espresso</h5>
<h5 class="price">$9</h5>
</div>
<a href="order.html" class="button">Buy Now</a>
</div>
</div>
<!-- Coffee Item 2 -->
<div class="coffee-item">
<img src="lab image/cappucino.jpeg" alt="" height="150px"
width="150px">
<div class="details">
<div class="details-sub">
<h5>Cappuccino</h5>
<h5 class="price">$10</h5>
</div>
<a href="order.html" class="button">Buy Now</a>
</div>
</div>
</div>
</body>
</html>
6
Login page
<center>
<form id="loginForm">
<h1>Login</h1>
<div class="inputbox">
<input type="text" id="name" name="username" placeholder="User
Name" required>
</div>
<div class="inputbox">
<input type="password" id="password" name="password"
placeholder="Password" required>
</div>
<input type="submit" value="Login">
<p>or</p>
<div class="signin">
<p>Please <a href="register.html">Sign Up</a></p>
</div>
</form>
</center>
<script>
document.getElementById("loginForm").addEventListener("submit",
function(event) {
event.preventDefault(); // Prevent default form submission
var username = document.getElementById("name").value;
var password = document.getElementById("password").value;
7
if (!username || !password) {
alert("All fields are required.");
return;
}
if (confirm("Do you really want to log in?")) {
if (username === "admin" && password === "admin") {
alert("Login successful. Redirecting to admin board.");
window.location.href = "admin board.html";
} else {
var formData = new FormData(this);
var xhr = new XMLHttpRequest();
xhr.open("POST", "connection_login.php", true);
xhr.onload = function () {
if (xhr.status === 200) {
alert("Login successful");
} else {
alert("Login failed: " + xhr.responseText);
}
};
xhr.send(formData);
}
} else {
alert("Login cancelled");
}
8
});
</script>
Admin Dashboard
<body>
<input type="checkbox" id="check">
<header>
<label for="check">
<i class="fa fa-bars" id="sidebar_btn"></i>
</label>
<div class="left_area">
<h3>Coffee <span>Shop</span></h3>
</div>
<div class="right_area">
<a href="home page.html" class="logout_btn">Logout</a>
</div>
</header>
<!--Sidebar start-->
<div class="sidebar">
<center>
<img src="lab image/profile.png" class="profile_image" alt="">
<h4>Kashpia</h4>
9
</center>
<a href="admin board.html"><i class="fa fa-desktop"></i>
<span>Dashboard</span></a>
<a href="dash_login.php"><i class="fa fa-cogs" ></i>
<span>Login</span></a>
<a href="dash_reg.php"><i class="fa fa-table" ></i>
<span>Register</span></a>
<a href="dash_contact.php"><i class="fa fa-th" ></i>
<span>Contact</span></a>
<a href="dash_order.php"><i class="fa fa-info-circle" ></i>
<span>Order</span></a>
</div>
<!--Sidebar End-->
<div class="content"></div>
</body>
Add User
<?php
include 'con_reg.php'; // Ensure the correct file name
if (isset($_POST['submit'])) {
$fullname = $_POST['fullname'];
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
$sql = "INSERT INTO registration (fullname,username, email, password)
VALUES ('$fullname', '$username','$email', '$password')";
10
$result = mysqli_query($con, $sql);
if ($result) {
// echo "Data inserted successfully";
header('location:dash_reg.php');
} else {
die(mysqli_error($con));
}
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<title>Create User</title>
</head>
<body>
<div class="container my-5">
<form method="post">
<div class="form-group">
11
<label>Fullname</label>
<input type="text" class="form-control" placeholder="Enter Your
Fullname" name="fullname" autocomplete="off">
</div>
<br>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" placeholder="Enter Your
Username" name="username" autocomplete="off">
</div>
<br>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="Enter Your Email"
name="email" autocomplete="off">
</div>
<br>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Enter Your
Password" name="password" autocomplete="off">
</div>
<br>
<button type="submit" class="btn btn-primary"
name="submit">Submit</button>
</form>
12
</div>
</body>
</html>
Update User Information
<?php
include 'con_reg.php';
$id=$_GET['updateid'];
$sql="Select * from registration where id=$id";
$result=mysqli_query($con,$sql);
$row=mysqli_fetch_assoc($result);
$fullname=$row['fullname'];
$username=$row['username'];
$email = $row['email'];
$password=$row['password'];
if (isset($_POST['submit'])) {
$fullname = $_POST['fullname'];
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
13
$sql = "update registration set id=$id ,fullname='$fullname',
username='$username', email='$email' , password='$password'
where id=$id";
$result = mysqli_query($con, $sql);
if ($result) {
//echo "updated successfully";
header('location:dash_reg.php');
} else {
die(mysqli_error($con));
}
}
?>
Delete User
<?php
include 'con_reg.php';
if(isset($_GET['deleteid'])){
$id=$_GET['deleteid'];
$sql="delete from registration where id=$id";
$result=mysqli_query($con,$sql);
if($result){
// echo "Deleted successfully";
header('location:dash_reg.php');
}else{
die(mysqli_error($con));
14
}
}?>
Database Connection
<?php
$fullname = $_POST['fullname'];
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
$conn = new mysqli('localhost','root','','registration');
if($conn->connect_error){
die('connection failed : ' .$conn->connect_error);
// die ("not connected ". mysqli_error());
}
else{
// echo "connected Successfully";
$stmt = $conn->prepare("insert into
registration(fullname,username,email,password)
values(?,?,?,?)");
$stmt->bind_param("ssss",$fullname,$username,$email,$password);
$stmt->execute();
echo "resgistration Completed";
$stmt->close();
$conn->close();
}
?>
15
Result:
The Coffee Shop Management System project developed an interactive web
application for efficient coffee shop operations. It includes Home, About, Gallery,
Menu, Contact, Login, Register, and Order pages, providing a seamless customer
experience. The admin panel allows efficient management of users, orders, and
inquiries. The front-end uses HTML, CSS, and JavaScript, while the back-end
employs PHP and MySQL. Security measures like data validation, SQL injection
prevention, and role-based access control were implemented. This project
significantly enhanced both customer experience and administrative efficiency.
Conclusion:
The Coffee Shop Management System is a comprehensive solution designed to
meet the needs of both customers and administrators. By integrating various
functionalities into a single platform, this project not only enhances the overall
efficiency of the coffee shop but also ensures a superior customer experience. The
use of modern web technologies ensures that the system is both robust and scalable,
capable of adapting to future needs and growth.
16
