A PROJECT REPORT

ON

ELECTRONIC ONLINE SHOP

Submitted to MDS University, Ajmer for the Partial Fulfillment of the

requirement of the award of degree for
Bachelor In Computer Applications (BCA)

Session : 2024 - 2025

Developed by : Submitted by : Guided by :

Abdul Wahid Abdul Wahid Abid
Sir CERTIFICATE

This is certify that the project work entitled Departmental Store”

submitted in Partial fulfillment of requirement of the degree of BCA (MDS
University, Ajmer) at Star Infotech College, Ajmer done by Mr.Abdul Wahid,
Enrollment no. ____is an authentic work carried out by him/her under the
supervision.
The matter embedded in this project work has not been submitted for the
award of any other examination.

Abid_Sir

(Project Guide)

ACKNOWLEDGEMENT

I express thanks and gratitude to almighty God, my parents and other family
members without whose support I could not have made this software project. I
wish to place on my record my deep sense, Mr. Abid Sir for his/her constant
motivation and valuable help throughout the project work. I also extend my
thanks to other faculty members for their co-opration during this course.

Last but not the least, I thankful to my all friends for their support for completing
this project.

Abdul Wahid
C o n t e n t s

1
1. Introduction

2. Platform used

3. Front & Back end used

4. Project Analysis

5. Feasibility study

6. Project design

7. ER Diagram

8. Table Structure

9. DFD’s Data Dictionary, Pert Chart Etc.

10. Form Design

11. Coding

12. Testing mechanisms used

13. Implementation mechanisms

14. Bibliography

INTRODUCTION

2
 Online shopping is a form of electronic commerce which allows consumers to
directly buy goods or services from a seller over the Internet using a web browser or a
mobile app. Consumers find a product of interest by visiting the website of the retailer
directly or by searching among alternative vendors using a shopping search engine,
which displays the same product's availability and pricing at different e-retailers. As of
2020, customers can shop online using a range of different Products and devices,
including Electronics, Groceries , Stationaries ,

3
 PLATFORM USED

 Library

TCPDF: TCPDF is a PHP library facilitating the dynamic generation of PDF

documents. It supports various elements such as fonts and images for creating complex
PDFs.

 IDE

VSCode (Visual Studio Code): Visual Studio Code is a popular source-code editor
developed by Microsoft. It offers a lightweight yet powerful environment for
programming in various languages.

4
 FRONT & BACK End Used

 Backend

• PHP (Hypertext Preprocessor) : PHP is a server-side scripting language widely used

for web development. It allows developers to create dynamic web pages by embedding
PHP code within HTML. PHP is known for its ease of integration with databases,
making it a popular choice for building dynamic and interactive websites.
• MySQL: MySQL is an open-source relational database management system
(RDBMS). It is used to store and manage data, providing a robust and scalable solution
for web applications.
• WAMP: WAMP stands for Windows, Apache, MySQL, PHP/Python/Perl – a software
stack that simplifies the installation of a web development environment on Windows
machines.

 Frontend

• HTML (Hypertext Markup Language): HTML is the standard markup language

used to create the structure of web pages. It consists of elements represented by
tags that define the content and layout of a webpage.

• CSS (Cascading Style Sheets): CSS is a stylesheet language that enhances the
presentation of HTML documents.

• JS (JavaScript): JavaScript is a versatile scripting language primarily used for

clientside web development. It adds interactivity and dynamic behavior to web
pages, allowing developers to create responsive and engaging user interfaces.

Project Analysis
• This system is all about the converting the shopping system from manual
to'snline

• Customer can buy products online after login to the site.

• Administrator is adding product to database.

• Administrator can edit or delete the products from the database

• After buying and making payment the products are send to customer's
address that he has given.

5
 Purpose…
Departmental Store tries to enhance access to care and improve the continuity and
efficiency of services. Depending on the specific setting and locale, case managers
are responsible for a variety of tasks, ranging from linking clients to services to
actually providing intensive shopping and delivery services themselves.

 Main objective:-

•To shop while in the comfort of your own home, without having to step out of the
door.
•Sell at lower rate due to less overhead
•Provide home delivery free of cost.
• No wait to see the product, if someone else is taking that.

 Scope…

This product has great future scope. Online shopping Internet software developed on
and for on the Windows and later versions environments and Linux OS. This project
also provides security with the use of Login-id and Password, so that any
unauthorized users cannot use your account. The only Authorized that will have
proper access authority can access the software

Feasibility Study
 feasibility study is a short, focused study, which aims to answer a number of
questions:

• Does the system contribute to the overall objectives of the organizations?

• Can the system be integrated with systems which are already in place?

 Technical Feasibility:

• Is the project feasibility within the limits of current technology?

• Does the technology exist at all?

• Is it available within given resource constraints (i.c., budget, schedule)?

 Financial Feasibility:

6
 • Is the project possible, given resource constraints?

• Are the benefits that will accrue from the new system worth the costs?

 Operational Feasibility:

Define the urgency of the problem and the acceptability of any solution; if the
system is developed, will it be used? Includes people-oriented and social issues:
internal issues, such as manpower problems, labour objections, manager
resistance, organizational conflicts and policies; also, extemal issues, including
social acceptability, legal aspects and government

Project Design….
1. Project Overview

Project Name: Electronic Online shop

Objective: Develop a fully functional, secure, and user-friendly online store where
customers can browse products, add items to a shopping cart, make purchases, and
track their orders.
Key Features:

• Product Management: Add, update, and delete products from the store.
• User Registration & Login: Secure user authentication and account management.
• Shopping Cart: A persistent cart where users can add or remove items.
• Payment Gateway Integration: Secure payment methods such as credit cards and
PayTm.
• Order Tracking: Users can track the status of their orders.
• Admin Dashboard: For managing products, orders, and customer data. 
Responsive Design: Works across all devices (desktop, tablet, mobile).

2. Functional Design

User Roles:

1. Customer: Can browse products, add items to cart, and make purchases.
2. Admin: Can manage products, orders, and users.

User Stories:

• As a customer, I want to create an account, so I can log in and track my orders.  As

a customer, I want to search for products, so I can find what I need quickly.
• As a customer, I want to view product details, so I can make informed purchase
decisions.

7
 • As an admin, I want to add and manage products, so I can keep the catalog up-to-date.

3. UI/UX Design

The user interface (UI) and user experience (UX) are critical in ensuring ease of use. Design
mockups and wireframes would be created to visualize how the online shop will look and feel.
Here are the core UI components:

• Home Page: Displays featured products, categories, and promotions.

• Product Listing Page: Shows all products or filtered categories with sorting options.
• Product Details Page: Includes product images, descriptions, price, and "Add to Cart"
button.
• Shopping Cart: A page displaying selected products, quantities, and total price.
• Checkout Page: Allows the user to input shipping details and choose a payment
method.
• User Dashboard: Displays past orders, user information, and order tracking.
• Admin Panel: Allows admins to manage products, orders, users, and inventory.

4. System Architecture Design

4.1. Front-end:

• Technologies: HTML5, CSS3, JavaScript, React/Vue.js (or similar).

• Responsive Design: The front-end should be optimized for various screen sizes
(mobile, tablet, desktop).
• Features:
o Dynamic product listings and search functionality. o AJAX
or API calls to interact with the server without reloading pages. o
User-friendly interfaces for adding products to cart and checking
out.

4.2. Back-end:

• Technologies: Node.js, Python (Django), PHP (Laravel), or Java (Spring Boot).

• RESTful API: The back-end should provide an API to handle requests for products,
users, orders, etc.
• Database: Use MySQL, PostgreSQL, or MongoDB to store user data, products, orders,
and payments.
• Security:
o Authentication: Use JWT or OAuth for user authentication. o
Encryption: Secure sensitive data, especially payment information and
passwords. o SSL Certificate: For securing communications between the
client and server.

4.3. Database Design:

8
• Tables:
o Users: Stores user details, including roles (admin, customer).
o Products: Product catalog with name, description, price, and
stock. o Orders: Tracks user orders, status, and shipping details.
o Cart: Manages items added by users for purchase. o
Payments: Stores transaction and payment method details.

5. Technical

Requirements

Hardware:

• Cloud hosting service (e.g., AWS, Google Cloud, or Azure) for scalability.
• Database server for handling large amounts of transactional data.
Software:

• Operating System: Linux-based server for hosting the website.

• Web Server: Nginx or Apache to serve the front-end.
• Version Control: Use Git for managing code across teams.

6. Testing Plan

• Unit Testing: Test individual components (e.g., login functionality, adding items to
cart).
• Integration Testing: Ensure different components (e.g., cart and payment systems)
work together.
• Load Testing: Simulate heavy traffic and ensure the system can handle high volumes.
• Security Testing: Identify and fix vulnerabilities (e.g., SQL injection, CSRF attacks).

7. Security and Compliance

• SSL Encryption: For all user interactions, especially during checkout.

• PCI Compliance: Follow payment industry standards for handling cardholder data.
• Data Privacy: Ensure compliance with regulations like GDPR for user data protection.

ER Diagram

9
 Table Structure
1.Admin table.

10
2.Cart table.

3.Messages table.

4.Orders table.

11
5.Products table.

12
6.Users table.

7.Wishlist table.

Pert Chart

13
 Form Design
1. User Registration Form.

This form is used for creating new user accounts on the website.

2. User Login Form.

For users to access their accounts.

3. Product Search Form.

14
To help users search for products.

4. Checkout Form

The checkout process involves collecting the user's shipping and payment information.

5. Contact Us Form

For users to send messages or inquiries.

6. Wishlist Form

For adding products to a wishlist.

Coding..
files/Index.php : home page of the website.

<?php

include 'components/connect.php';

session_start();

if(isset($_SESSION['user_id']))
{ $user_id = $_SESSION['user_id'];
}else{
$user_id = '';

15
};

include 'components/wishlist_cart.php';

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>home</title>

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />

<!-- font awesome cdn link -->

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.1.1/css/all.min.css">

<!-- custom css file link -->

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<?php include 'components/user_header.php'; ?>

<div class="home-bg">

<section class="home">

<div class="swiper home-slider">

<div class="swiper-wrapper">

<div class="swiper-slide slide">

<div class="image">
<img src="images/home-img-1.png" alt="">
</div>
<div class="content">
<span>upto 50% off</span>
<h3>latest smartphones</h3>
<a href="shop.php" class="btn">shop now</a>
</div>
</div>

<div class="swiper-slide slide">

<div class="image">

16
 <img src="images/home-img-2.png" alt="">
</div>
<div class="content">
<span>upto 50% off</span>
<h3>latest watches</h3>
<a href="shop.php" class="btn">shop now</a>
</div>
</div>

<div class="swiper-slide slide">

<div class="image">
<img src="images/home-img-3.png" alt="">
</div>
<div class="content">
<span>upto 50% off</span>
<h3>latest headsets</h3>
<a href="shop.php" class="btn">shop now</a>
</div>
</div>

</div>

<div class="swiper-pagination"></div>

</div>

</section>

</div>

<section class="category">

<h1 class="heading">shop by category</h1>

<div class="swiper category-slider">

<div class="swiper-wrapper">

<a href="category.php?category=laptop" class="swiper-slide slide">

<img src="images/icon-1.png" alt="">
<h3>laptop</h3>
</a>

<a href="category.php?category=tv" class="swiper-slide slide">

<img src="images/icon-2.png" alt="">
<h3>tv</h3>
</a>

<a href="category.php?category=camera" class="swiper-slide slide">

17
 <img src="images/icon-3.png" alt="">
<h3>camera</h3>
</a>

<a href="category.php?category=mouse" class="swiper-slide slide">

<img src="images/icon-4.png" alt="">
<h3>mouse</h3>
</a>

<a href="category.php?category=fridge" class="swiper-slide slide">

<img src="images/icon-5.png" alt="">
<h3>fridge</h3>
</a>

<a href="category.php?category=washing" class="swiper-slide slide">

<img src="images/icon-6.png" alt="">
<h3>washing machine</h3>
</a>

<a href="category.php?category=smartphone" class="swiper-slide slide">

<img src="images/icon-7.png" alt="">
<h3>smartphone</h3>
</a>

<a href="category.php?category=watch" class="swiper-slide slide">

<img src="images/icon-8.png" alt="">
<h3>watch</h3>
</a>

</div>

<div class="swiper-pagination"></div>

</div>

</section>

<section class="home-products">

<h1 class="heading">latest products</h1>

<div class="swiper products-slider">

<div class="swiper-wrapper">

<?php
$select_products = $conn->prepare("SELECT * FROM products LIMIT 6");
$select_products->execute(); if($select_products-
>rowCount() > 0){

18
 while($fetch_product = $select_products->fetch(PDO::FETCH_ASSOC)){
?>
<form action="" method="post" class="swiper-slide slide">
<input type="hidden" name="pid" value="<?= $fetch_product['id']; ?>">
<input type="hidden" name="name" value="<?= $fetch_product['name']; ?>">
<input type="hidden" name="price" value="<?= $fetch_product['price']; ?>">
<input type="hidden" name="image" value="<?= $fetch_product['image_01']; ?>">
<button class="fas fa-heart" type="submit" name="add_to_wishlist"></button>
<a href="quick_view.php?pid=<?= $fetch_product['id']; ?>" class="fas
faeye"></a>
<img src="uploaded_img/<?= $fetch_product['image_01']; ?>" alt="">
<div class="name"><?= $fetch_product['name']; ?></div>
<div class="flex">
<div class="price"><span>$</span><?= $fetch_product['price'];
?><span>/</span></div>
<input type="number" name="qty" class="qty" min="1" max="99"
onkeypress="if(this.value.length == 2) return false;" value="1">
</div>
<input type="submit" value="add to cart" class="btn" name="add_to_cart">
</form>
<?php
}
}else{
echo '<p class="empty">no products added yet!</p>';
}
?>

</div>

<div class="swiper-pagination"></div>

</div>

</section>

<?php include 'components/footer.php'; ?>

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

<script src="js/script.js"></script>

19
<script>

var swiper = new Swiper(".home-slider", {

loop:true,
spaceBetween: 20,
pagination: { el:
".swiper-pagination",
clickable:true,
},
});

var swiper = new Swiper(".category-slider", {

loop:true, spaceBetween: 20, pagination:
{ el: ".swiper-pagination",
clickable:true,
},
breakpoints: {
0: {
slidesPerView: 2,
},
650: {
slidesPerView: 3,
},
768:
{ slidesPerView: 4,
},
1024: {
slidesPerView: 5,
},
},
});

var swiper = new Swiper(".products-slider", {

loop:true, spaceBetween: 20,
pagination: { el: ".swiper-pagination",
clickable:true,
},
breakpoints:
{ 550: {
slidesPerView: 2,
},
768: {
slidesPerView: 2,
},
1024: {
slidesPerView: 3,
},
},
});

20
</script>

</body>
</html>

files/Login.php : login page of the website.

<?php

include '../components/connect.php';

session_start();

if(isset($_POST['submit'])){

$name = $_POST['name']; $name = filter_var($name,

FILTER_SANITIZE_STRING); $pass = sha1($_POST['pass']); $pass =
filter_var($pass, FILTER_SANITIZE_STRING);

$select_admin = $conn->prepare("SELECT * FROM admins WHERE name = ?

AND password = ?"); $select_admin->execute([$name, $pass]); $row =
$select_admin->fetch(PDO::FETCH_ASSOC);

if($select_admin->rowCount() > 0){

$_SESSION['admin_id'] = $row['id'];
header('location:dashboard.php'); }else{ $message[] =
'incorrect username or password!';
}

?>

21
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
content="width=device-width, initial-scale=1.0"> <title>login</title>

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.1.1/css/all.min.css">

<link rel="stylesheet" href="../css/admin_style.css">

</head> <body>

<?php if(isset($message)){ foreach($message as $message){ echo '

<div class="message"> <span>'.$message.'</span> <i
class="fas fa-times" onclick="this.parentElement.remove();"></i> </div> ';
}
}
?>

<section class="form-container">

<form action="" method="post"> <h3>login now</h3> <p>default username

= <span>admin</span> & password = <span>111</span></p> <input type="text"
name="name" required placeholder="enter your username" maxlength="20"
class="box" oninput="this.value = this.value.replace(/\s/g, '')"> <input
type="password" name="pass" required placeholder="enter your password"
maxlength="20" class="box" oninput="this.value = this.value.replace(/\s/g, '')">
<input type="submit" value="login now" class="btn" name="submit"> </form>

</section>

</body> </html>

files/Category.php : Category page of the website.

<?php

include 'components/connect.php';

session_start();

22
if(isset($_SESSION['user_id']))
{ $user_id = $_SESSION['user_id'];
}else{
$user_id = '';
};

include 'components/wishlist_cart.php';

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>category</title>

<!-- font awesome cdn link -->

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.1.1/css/all.min.css">

<!-- custom css file link -->

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<?php include 'components/user_header.php'; ?>

<section class="products">

<h1 class="heading">category</h1>

<div class="box-container">

<?php
// Check if category is set in the URL
if(isset($_GET['category']) && !empty($_GET['category'])){
$category = $_GET['category'];
$select_products = $conn->prepare("SELECT * FROM products WHERE name
LIKE ?");
$select_products->execute(["%{$category}%"]); if($select_products-
>rowCount() > 0){
while($fetch_product = $select_products->fetch(PDO::FETCH_ASSOC))
{ ?>
<form action="" method="post" class="box">
<input type="hidden" name="pid" value="<?= $fetch_product['id']; ?>">

23
 <input type="hidden" name="name" value="<?= $fetch_product['name']; ?>">
<input type="hidden" name="price" value="<?= $fetch_product['price']; ?>">
<input type="hidden" name="image" value="<?= $fetch_product['image_01']; ?>">
<button class="fas fa-heart" type="submit" name="add_to_wishlist"></button>
<a href="quick_view.php?pid=<?= $fetch_product['id']; ?>" class="fas
faeye"></a>
<img src="uploaded_img/<?= $fetch_product['image_01']; ?>" alt="">
<div class="name"><?= $fetch_product['name']; ?></div>
<div class="flex">
<div class="price"><span>$</span><?= $fetch_product['price'];
?><span>/</span></div>
<input type="number" name="qty" class="qty" min="1" max="99"
onkeypress="if(this.value.length == 2) return false;" value="1">
</div>
<input type="submit" value="add to cart" class="btn" name="add_to_cart">
</form>
<?php
}
}else{
echo '<p class="empty">no products found!</p>';
}
}else{
echo '<p class="empty">No category selected!</p>';
}
?>

</div>

</section>

<?php include 'components/footer.php'; ?>

<script src="js/script.js"></script>

</body>
</html>

files/About.php : About page of the website.

24
<?php

include 'components/connect.php';

session_start();

if(isset($_SESSION['user_id']))
{ $user_id = $_SESSION['user_id'];
}else{
$user_id = '';
};

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>about</title>

<link rel="stylesheet"
href="https://unpkg.com/swiper@8/swiperbundle.min.css" />

<!-- font awesome cdn link -->

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.1.1/css/all.min.css">

<!-- custom css file link -->

<link rel="stylesheet" href="css/style.css">

25
</head>
<body>

<?php include 'components/user_header.php'; ?>

<section class="about">

<div class="row">

<div class="image">
<img src="images/about-img.svg" alt="">
</div>

<div class="content">
<h3>why choose us?</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam veritatis
minus et similique doloribus? Harum molestias tenetur eaque illum quas?
Obcaecati nulla in itaque modi magnam ipsa molestiae ullam consequuntur.</p>
<a href="contact.php" class="btn">contact us</a>
</div>

</div>

</section>

<section class="reviews">

<h1 class="heading">client's reviews</h1>

<div class="swiper reviews-slider">

<div class="swiper-wrapper">

<div class="swiper-slide slide">

<img src="images/pic-1.png" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia tempore
distinctio hic, iusto adipisci a rerum nemo perspiciatis fugiat sapiente.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>

26
 <i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h3>john deo</h3>
</div>

<div class="swiper-slide slide">

<img src="images/pic-2.png" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia tempore
distinctio hic, iusto adipisci a rerum nemo perspiciatis fugiat sapiente.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h3>john deo</h3>
</div>

<div class="swiper-slide slide">

<img src="images/pic-3.png" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia tempore
distinctio hic, iusto adipisci a rerum nemo perspiciatis fugiat sapiente.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h3>john deo</h3>
</div>

<div class="swiper-slide slide">

<img src="images/pic-4.png" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia tempore
distinctio hic, iusto adipisci a rerum nemo perspiciatis fugiat sapiente.</p>

27
 <div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h3>john deo</h3>
</div>

<div class="swiper-slide slide">

<img src="images/pic-5.png" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia tempore
distinctio hic, iusto adipisci a rerum nemo perspiciatis fugiat sapiente.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h3>john deo</h3>
</div>

<div class="swiper-slide slide">

<img src="images/pic-6.png" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia tempore
distinctio hic, iusto adipisci a rerum nemo perspiciatis fugiat sapiente.</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h3>john deo</h3>
</div>

</div>

28
 <div class="swiper-pagination"></div>

</div>

</section>

<?php include 'components/footer.php'; ?>

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

<script src="js/script.js"></script>

<script>

var swiper = new Swiper(".reviews-slider", {

loop:true, spaceBetween: 20, pagination:
{ el: ".swiper-pagination",
clickable:true,
},
breakpoints: {
0: {
slidesPerView:1,
},
768: {
slidesPerView: 2,
},
991: {
slidesPerView: 3,
},
},
});
</script>
files/Order.php : Order page of the website.

29
<?php

include 'components/connect.php';

session_start();

if(isset($_SESSION['user_id']))
{ $user_id = $_SESSION['user_id'];
}else{
$user_id = '';
};

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>orders</title>

<!-- font awesome cdn link -->

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.1.1/css/all.min.css">

<!-- custom css file link -->

<link rel="stylesheet" href="css/style.css">

</head>
<body>
<?php include 'components/user_header.php'; ?>

<section class="orders">

30
 <h1 class="heading">placed orders</h1>

<div class="box-container">

<?php
if($user_id == ''){
echo '<p class="empty">please login to see your orders</p>';
}else{
$select_orders = $conn->prepare("SELECT * FROM orders WHERE user_id =
?");
$select_orders->execute([$user_id]); if($select_orders-
>rowCount() > 0){
while($fetch_orders = $select_orders->fetch(PDO::FETCH_ASSOC))
{ ?>
<div class="box">
<p>placed on : <span><?= $fetch_orders['placed_on']; ?></span></p>
<p>name : <span><?= $fetch_orders['name']; ?></span></p>
<p>email : <span><?= $fetch_orders['email']; ?></span></p>
<p>number : <span><?= $fetch_orders['number']; ?></span></p>
<p>address : <span><?= $fetch_orders['address']; ?></span></p>
<p>payment method : <span><?= $fetch_orders['method']; ?></span></p>
<p>your orders : <span><?= $fetch_orders['total_products']; ?></span></p>
<p>total price : <span>$<?= $fetch_orders['total_price']; ?>/-</span></p>
<p> payment status : <span style="color:<?php if($fetch_orders['payment_status']
== 'pending'){ echo 'red'; }else{ echo 'green'; }; ?>"><?=
$fetch_orders['payment_status']; ?></span> </p>
</div>
<?php
}
}else{
echo '<p class="empty">no orders placed yet!</p>';
}
}
?>

</div>

</section>

<?php include 'components/footer.php'; ?>

<script src="js/script.js"></script>

</body>
</html>

files/Shop.php : Shop page of the website.

31
<?php

include 'components/connect.php';

session_start();

if(isset($_SESSION['user_id']))
{ $user_id = $_SESSION['user_id'];
}else{
$user_id = '';
};

include 'components/wishlist_cart.php';

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>shop</title>

<!-- font awesome cdn link -->

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.1.1/css/all.min.css">

<!-- custom css file link -->

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<?php include 'components/user_header.php'; ?>

<section class="products">

32
 <h1 class="heading">latest products</h1>

<div class="box-container">

<?php
$select_products = $conn->prepare("SELECT * FROM products");
$select_products->execute(); if($select_products-
>rowCount() > 0){
while($fetch_product = $select_products->fetch(PDO::FETCH_ASSOC)){
?>
<form action="" method="post" class="box">
<input type="hidden" name="pid" value="<?= $fetch_product['id']; ?>">
<input type="hidden" name="name" value="<?= $fetch_product['name']; ?>">
<input type="hidden" name="price" value="<?= $fetch_product['price']; ?>">
<input type="hidden" name="image" value="<?= $fetch_product['image_01']; ?>">
<button class="fas fa-heart" type="submit" name="add_to_wishlist"></button>
<a href="quick_view.php?pid=<?= $fetch_product['id']; ?>" class="fas
faeye"></a>
<img src="uploaded_img/<?= $fetch_product['image_01']; ?>" alt="">
<div class="name"><?= $fetch_product['name']; ?></div>
<div class="flex">
<div class="price"><span>$</span><?= $fetch_product['price'];
?><span>/</span></div>
<input type="number" name="qty" class="qty" min="1" max="99"
onkeypress="if(this.value.length == 2) return false;" value="1">
</div>
<input type="submit" value="add to cart" class="btn" name="add_to_cart">
</form>
<?php
}
}else{
echo '<p class="empty">no products found!</p>';
}
?>

</div>

</section>
<?php include 'components/footer.php'; ?>

<script src="js/script.js"></script>

</body>
</html>

files/Contact.php : Contact page of the website.

33
<?php

include 'components/connect.php';

session_start();

if(isset($_SESSION['user_id']))
{ $user_id = $_SESSION['user_id'];
}else{
$user_id = '';
};

if(isset($_POST['send'])){

$name = $_POST['name'];
$name = filter_var($name, FILTER_SANITIZE_STRING);
$email = $_POST['email'];
$email = filter_var($email, FILTER_SANITIZE_STRING);
$number = $_POST['number'];
$number = filter_var($number, FILTER_SANITIZE_STRING);
$msg = $_POST['msg'];
$msg = filter_var($msg, FILTER_SANITIZE_STRING);

$select_message = $conn->prepare("SELECT * FROM messages WHERE name =

? AND email = ? AND number = ? AND message = ?");
$select_message->execute([$name, $email, $number, $msg]);

if($select_message->rowCount() > 0)
{ $message[] = 'already sent message!'; }else{

34
 $insert_message = $conn->prepare("INSERT INTO messages(user_id, name,
email, number, message) VALUES(?,?,?,?,?)");
$insert_message->execute([$user_id, $name, $email, $number, $msg]);

$message[] = 'sent message successfully!';

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>contact</title>

<!-- font awesome cdn link -->

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.1.1/css/all.min.css">

<!-- custom css file link -->

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<?php include 'components/user_header.php'; ?>

<section class="contact">

<form action="" method="post">

<h3>get in touch</h3>
<input type="text" name="name" placeholder="enter your name" required
maxlength="20" class="box">
<input type="email" name="email" placeholder="enter your email" required
maxlength="50" class="box">
<input type="number" name="number" min="0" max="9999999999"
placeholder="enter your number" required onkeypress="if(this.value.length == 10)
return false;" class="box">
<textarea name="msg" class="box" placeholder="enter your message" cols="30"
rows="10"></textarea>
<input type="submit" value="send message" name="send" class="btn">
</form>
</section>

35
<?php include 'components/footer.php'; ?>

<script src="js/script.js"></script>

</body>
</html>

files/Search.php : Search page of the website.

<?php

include 'components/connect.php';

session_start();

if(isset($_SESSION['user_id']))
{ $user_id = $_SESSION['user_id'];
}else{
$user_id = '';
};

include 'components/wishlist_cart.php';

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>search page</title>

36
 <!-- font awesome cdn link -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.1.1/css/all.min.css">

<!-- custom css file link -->

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<?php include 'components/user_header.php'; ?>

<section class="search-form">
<form action="" method="post">
<input type="text" name="search_box" placeholder="search here..."
maxlength="100" class="box" required>
<button type="submit" class="fas fa-search" name="search_btn"></button>
</form>
</section>

<section class="products" style="padding-top: 0; min-height:100vh;">

<div class="box-container">

<?php
if(isset($_POST['search_box']) OR isset($_POST['search_btn'])){
$search_box = $_POST['search_box'];
$select_products = $conn->prepare("SELECT * FROM products WHERE name
LIKE '%{$search_box}%'"); $select_products-
>execute(); if($select_products->rowCount() > 0){
while($fetch_product = $select_products->fetch(PDO::FETCH_ASSOC)){
?>
<form action="" method="post" class="box">
<input type="hidden" name="pid" value="<?= $fetch_product['id']; ?>">
<input type="hidden" name="name" value="<?= $fetch_product['name']; ?>">
<input type="hidden" name="price" value="<?= $fetch_product['price']; ?>">
<input type="hidden" name="image" value="<?= $fetch_product['image_01']; ?>">
<button class="fas fa-heart" type="submit" name="add_to_wishlist"></button>
<a href="quick_view.php?pid=<?= $fetch_product['id']; ?>" class="fas
faeye"></a>
<img src="uploaded_img/<?= $fetch_product['image_01']; ?>" alt="">
<div class="name"><?= $fetch_product['name']; ?></div>
<div class="flex">
<div class="price"><span>$</span><?= $fetch_product['price'];
?><span>/</span></div>
<input type="number" name="qty" class="qty" min="1" max="99"
onkeypress="if(this.value.length == 2) return false;" value="1">
</div>

37
 <input type="submit" value="add to cart" class="btn" name="add_to_cart">
</form>
<?php
}
}else{
echo '<p class="empty">no products found!</p>';
}
}
?>

</div>

</section>

<?php include 'components/footer.php'; ?>

<script src="js/script.js"></script>

</body>
</html>

files/Wishlist.php : Wishlist page of the website.

<?php

include 'components/connect.php';

session_start();

if(isset($_SESSION['user_id']))
{ $user_id = $_SESSION['user_id'];
}else{
$user_id = '';

38
 header('location:user_login.php');
};

include 'components/wishlist_cart.php';

if(isset($_POST['delete'])){
$wishlist_id = $_POST['wishlist_id'];
$delete_wishlist_item = $conn->prepare("DELETE FROM wishlist WHERE
id = ?");
$delete_wishlist_item->execute([$wishlist_id]);
}

if(isset($_GET['delete_all'])){
$delete_wishlist_item = $conn->prepare("DELETE FROM wishlist WHERE
user_id = ?");
$delete_wishlist_item->execute([$user_id]);
header('location:wishlist.php');
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wishlist</title>

<!-- font awesome cdn link -->

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.1.1/css/all.min.css">

<!-- custom css file link -->

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<?php include 'components/user_header.php'; ?>

39
<section class="products">

<h3 class="heading">your wishlist</h3>

<div class="box-container">

<?php
$grand_total = 0;
$select_wishlist = $conn->prepare("SELECT * FROM wishlist WHERE
user_id = ?");
$select_wishlist->execute([$user_id]); if($select_wishlist-
>rowCount() > 0){
while($fetch_wishlist = $select_wishlist->fetch(PDO::FETCH_ASSOC)){
$grand_total += $fetch_wishlist['price']; ?>
<form action="" method="post" class="box">
<input type="hidden" name="pid" value="<?= $fetch_wishlist['pid']; ?>">
<input type="hidden" name="wishlist_id" value="<?= $fetch_wishlist['id']; ?
>">
<input type="hidden" name="name" value="<?= $fetch_wishlist['name']; ?
>">
<input type="hidden" name="price" value="<?= $fetch_wishlist['price']; ?
>">
<input type="hidden" name="image" value="<?= $fetch_wishlist['image']; ?
>">
<a href="quick_view.php?pid=<?= $fetch_wishlist['pid']; ?>" class="fas
faeye"></a>
<img src="uploaded_img/<?= $fetch_wishlist['image']; ?>" alt="">
<div class="name"><?= $fetch_wishlist['name']; ?></div>
<div class="flex">
<div class="price">$<?= $fetch_wishlist['price']; ?>/-</div>
<input type="number" name="qty" class="qty" min="1" max="99"
onkeypress="if(this.value.length == 2) return false;" value="1">
</div>
<input type="submit" value="add to cart" class="btn" name="add_to_cart">
<input type="submit" value="delete item" onclick="return confirm('delete
this from wishlist?');" class="delete-btn" name="delete">
</form>
<?php
}
}else{

40
 echo '<p class="empty">your wishlist is empty</p>';
}
?>
</div>

<div class="wishlist-total">
<p>grand total : <span>$<?= $grand_total; ?>/-</span></p>
<a href="shop.php" class="option-btn">continue shopping</a>
<a href="wishlist.php?delete_all" class="delete-btn <?= ($grand_total >
1)?'':'disabled'; ?>" onclick="return confirm('delete all from wishlist?');">delete
all item</a>
</div>

</section>

<?php include 'components/footer.php'; ?>

<script src="js/script.js"></script>

</body>
</html>

files/Update user.php : Update user page of the website.

<?php

include 'components/connect.php';

session_start();

if(isset($_SESSION['user_id']))
{ $user_id = $_SESSION['user_id'];
}else{
$user_id = '';
};

if(isset($_POST['submit'])){

$name = $_POST['name'];
$name = filter_var($name, FILTER_SANITIZE_STRING);
$email = $_POST['email'];

41
 $email = filter_var($email, FILTER_SANITIZE_STRING);

$update_profile = $conn->prepare("UPDATE users SET name = ?, email = ?

WHERE id = ?");
$update_profile->execute([$name, $email, $user_id]);

$empty_pass = 'da39a3ee5e6b4b0d3255bfef95601890afd80709';
$prev_pass = $_POST['prev_pass'];
$old_pass = sha1($_POST['old_pass']);
$old_pass = filter_var($old_pass, FILTER_SANITIZE_STRING);
$new_pass = sha1($_POST['new_pass']);
$new_pass = filter_var($new_pass, FILTER_SANITIZE_STRING);
$cpass = sha1($_POST['cpass']);
$cpass = filter_var($cpass, FILTER_SANITIZE_STRING);

if($old_pass == $empty_pass){
$message[] = 'please enter old password!';
}elseif($old_pass != $prev_pass){
$message[] = 'old password not matched!';
}elseif($new_pass != $cpass){
$message[] = 'confirm password not matched!';
}else{
if($new_pass != $empty_pass){
$update_admin_pass = $conn->prepare("UPDATE users SET password =
? WHERE id = ?");
$update_admin_pass->execute([$cpass, $user_id]);
$message[] = 'password updated successfully!';
}else{
$message[] = 'please enter a new password!';
}
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

42
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>register</title>

<!-- font awesome cdn link -->

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.1.1/css/all.min.css">

<!-- custom css file link -->

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<?php include 'components/user_header.php'; ?>

<section class="form-container">

<form action="" method="post">

<h3>update now</h3>
<input type="hidden" name="prev_pass" value="<?=
$fetch_profile["password"]; ?>">
<input type="text" name="name" required placeholder="enter your
username" maxlength="20" class="box" value="<?= $fetch_profile["name"];
?>">
<input type="email" name="email" required placeholder="enter your email"
maxlength="50" class="box" oninput="this.value = this.value.replace(/\s/g, '')"
value="<?= $fetch_profile["email"]; ?>">
<input type="password" name="old_pass" placeholder="enter your old
password" maxlength="20" class="box" oninput="this.value =
this.value.replace(/\s/g, '')">
<input type="password" name="new_pass" placeholder="enter your new
password" maxlength="20" class="box" oninput="this.value =
this.value.replace(/\s/g, '')">
<input type="password" name="cpass" placeholder="confirm your new
password" maxlength="20" class="box" oninput="this.value =
this.value.replace(/\s/g, '')">
<input type="submit" value="update now" class="btn" name="submit">
</form>

</section>

43
<?php include 'components/footer.php'; ?>

<script src="js/script.js"></script>

</body>
</html>

files/Userlogin.php : User login page of the website.

<?php

include 'components/connect.php';

session_start();

if(isset($_SESSION['user_id']))
{ $user_id = $_SESSION['user_id'];
}else{
$user_id = '';
};

if(isset($_POST['submit'])){

$email = $_POST['email'];
$email = filter_var($email, FILTER_SANITIZE_STRING);
$pass = sha1($_POST['pass']);
$pass = filter_var($pass, FILTER_SANITIZE_STRING);

$select_user = $conn->prepare("SELECT * FROM users WHERE email = ?

AND password = ?");
$select_user->execute([$email, $pass]);
$row = $select_user->fetch(PDO::FETCH_ASSOC);

if($select_user->rowCount() > 0)
{ $_SESSION['user_id'] = $row['id'];
header('location:home.php');
}else{
$message[] = 'incorrect username or password!';
}

44
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>login</title>

<!-- font awesome cdn link -->

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.1.1/css/all.min.css">

<!-- custom css file link -->

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<?php include 'components/user_header.php'; ?>

<section class="form-container">

<form action="" method="post">

<h3>login now</h3>
<input type="email" name="email" required placeholder="enter your email"
maxlength="50" class="box" oninput="this.value = this.value.replace(/\s/g, '')">
<input type="password" name="pass" required placeholder="enter your
password" maxlength="20" class="box" oninput="this.value =
this.value.replace(/\s/g, '')">
<input type="submit" value="login now" class="btn" name="submit">
<p>don't have an account?</p>
<a href="user_register.php" class="option-btn">register now</a>
</form>

</section>
<?php include 'components/footer.php'; ?>

45
<script src="js/script.js"></script>

</body>
</html>

files/Checkout.php : Checkout page of the website.

<?php

include 'components/connect.php';

session_start();

if(isset($_SESSION['user_id']))
{ $user_id = $_SESSION['user_id'];
}else{
$user_id = '';
header('location:user_login.php');
};

if(isset($_POST['order'])){

$name = $_POST['name'];
$name = filter_var($name, FILTER_SANITIZE_STRING);
$number = $_POST['number'];
$number = filter_var($number, FILTER_SANITIZE_STRING);
$email = $_POST['email'];
$email = filter_var($email, FILTER_SANITIZE_STRING);
$method = $_POST['method'];
$method = filter_var($method, FILTER_SANITIZE_STRING);
$address = 'flat no. '. $_POST['flat'] .', '. $_POST['street'] .', '. $_POST['city'] .',
'. $_POST['state'] .', '. $_POST['country'] .' - '. $_POST['pin_code'];
$address = filter_var($address, FILTER_SANITIZE_STRING);
$total_products = $_POST['total_products'];
$total_price = $_POST['total_price'];

$check_cart = $conn->prepare("SELECT * FROM cart WHERE user_id = ?");

$check_cart->execute([$user_id]);

if($check_cart->rowCount() > 0){

46
 $insert_order = $conn->prepare("INSERT INTO orders(user_id, name,
number, email, method, address, total_products, total_price)
VALUES(?,?,?,?,?,?,?,?)");
$insert_order->execute([$user_id, $name, $number, $email, $method,
$address, $total_products, $total_price]);

$delete_cart = $conn->prepare("DELETE FROM cart WHERE user_id =

?");
$delete_cart->execute([$user_id]);

$message[] = 'order placed successfully!';

}else{
$message[] = 'your cart is empty';
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>checkout</title>

<!-- font awesome cdn link -->

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.1.1/css/all.min.css">

<!-- custom css file link -->

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<?php include 'components/user_header.php'; ?>

<section class="checkout-orders">

47
 <form action="" method="POST">

<h3>your orders</h3>

<div class="display-orders">
<?php
$grand_total = 0;
$cart_items[] = '';
$select_cart = $conn->prepare("SELECT * FROM cart WHERE user_id =
?");
$select_cart->execute([$user_id]); if($select_cart-
>rowCount() > 0){ while($fetch_cart = $select_cart-
>fetch(PDO::FETCH_ASSOC)){
$cart_items[] = $fetch_cart['name'].' ('.$fetch_cart['price'].' x '.
$fetch_cart['quantity'].') - ';
$total_products = implode($cart_items);
$grand_total += ($fetch_cart['price'] * $fetch_cart['quantity']);
?>
<p> <?= $fetch_cart['name']; ?> <span>(<?= '$'.$fetch_cart['price'].'/- x '.
$fetch_cart['quantity']; ?>)</span> </p>
<?php
}
}else{
echo '<p class="empty">your cart is empty!</p>';
}
?>
<input type="hidden" name="total_products" value="<?=
$total_products; ?>">
<input type="hidden" name="total_price" value="<?= $grand_total; ?>"
value="">
<div class="grand-total">grand total : <span>$<?= $grand_total;
?>/</span></div>
</div>

<h3>place your orders</h3>

<div class="flex">
<div class="inputBox">
<span>your name :</span>

48
 <input type="text" name="name" placeholder="enter your name"
class="box" maxlength="20" required>
</div>
<div class="inputBox">
<span>your number :</span>
<input type="number" name="number" placeholder="enter your
number" class="box" min="0" max="9999999999"
onkeypress="if(this.value.length == 10) return false;" required>
</div>
<div class="inputBox">
<span>your email :</span>
<input type="email" name="email" placeholder="enter your email"
class="box" maxlength="50" required>
</div>
<div class="inputBox">
<span>payment method :</span>
<select name="method" class="box" required>
<option value="cash on delivery">cash on delivery</option>
<option value="credit card">credit card</option>
<option value="paytm">paytm</option>
<option value="paypal">paypal</option>
</select>
</div>
<div class="inputBox">
<span>address line 01 :</span>
<input type="text" name="flat" placeholder="e.g. flat number"
class="box" maxlength="50" required>
</div>
<div class="inputBox">
<span>address line 02 :</span>
<input type="text" name="street" placeholder="e.g. street name"
class="box" maxlength="50" required>
</div>
<div class="inputBox">
<span>city :</span>
<input type="text" name="city" placeholder="e.g. mumbai" class="box"
maxlength="50" required>
</div>
<div class="inputBox">

49
 <span>state :</span>
<input type="text" name="state" placeholder="e.g. maharashtra"
class="box" maxlength="50" required>
</div>
<div class="inputBox">
<span>country :</span>
<input type="text" name="country" placeholder="e.g. India" class="box"
maxlength="50" required>
</div>
<div class="inputBox">
<span>pin code :</span>
<input type="number" min="0" name="pin_code" placeholder="e.g.
123456" min="0" max="999999" onkeypress="if(this.value.length == 6) return
false;" class="box" required>
</div>
</div>

<input type="submit" name="order" class="btn <?= ($grand_total >

1)?'':'disabled'; ?>" value="place order">

</form>

</section>

<?php include 'components/footer.php'; ?>

<script src="js/script.js"></script>

</body>
</html>

files/AdminCss.php : Admin Css page of the website

@import
url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700
&display=swap');

:root{
--main-color:#2980b9;
--orange:#f39c12;
--red:#e74c3c;
--black:#444;

50
 --white:#fff;
--light-color:#777;
--light-bg:#f5f5f5;
--border:.2rem solid var(--black);
--box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}
*{
font-family: 'Nunito', sans-serif;
margin:0; padding:0; box-
sizing: border-box; outline:
none; border:none;
text-decoration: none;
}

*::selection{
background-color: var(--main-color);
color:var(--white);
}

::-webkit-
scrollbar{ height: .5rem;
width: 1rem;
}

::-webkit-scrollbar-track{
background-color: transparent;
}

::-webkit-scrollbar-thumb{
background-color: var(--main-color);
}

html{ font-size:
62.5%;
overflow-x: hidden;
}

body{
background-color: var(--light-bg);
/* padding-bottom: 10rem; */
}

section{ padding:2re
m; max-width:
1200px;
margin:0 auto;
}

51
.heading{ font-size:
4rem; color:var(--
black); margin-
bottom: 2rem; text-
align: center;
text-transform: uppercase;
}

.btn,
.delete-btn, .option-
btn{ display: block;
width: 100%; margin-top:
1rem; border-
radius: .5rem;
padding:1rem 3rem;
font-size: 1.7rem; text-
transform: capitalize;
color:var(--white); cursor:
pointer;
text-align: center;
}

.btn:hover,
.delete-btn:hover, .option-btn:hover{
background-color: var(--black);
} .btn{
background-color: var(--main-color);
}

.option-btn{
background-color: var(--orange);
}

.delete-btn{ background-
color: var(--red);
}

.flex-
btn{ display:
flex; gap:1rem;
}

.message{
position: sticky; top:0; max-
width: 1200px; margin:0 auto;
background-color: var(--light-bg);
padding:2rem;
display: flex; align-
items: center; justify-

52
 content: space-
between; gap:1.5rem;
z-index: 1100;
}

.message span{
font-size: 2rem;
color:var(--black);
}

.message
i{ cursor: pointer;
color:var(--red);
font-size: 2.5rem;
}

.message i:hover{
color:var(--black);
}

.empty{ padding:1.5rem;
background-color: var(--white);
border: var(--border); box-
shadow: var(--box-shadow);
text-align: center; color:var(--
red); border-radius: .5rem;
font-size: 2rem;
text-transform: capitalize;
}

@keyframes
fadeIn{ 0%{
transform: translateY(1rem);
}
}

.form-container{ min-
height: 100vh; display:
flex; align-items: center;
justify-content: center;
}

.form-container
form{ padding:2rem;
text-align: center; box-shadow:
var(--box-shadow); background-
color: var(--white); border-
radius: .5rem; width: 50rem;
border:var(--border);

53
}

.form-container form h3{ text-

transform: uppercase;
color:var(--black); margin-bottom:
1rem;
font-size: 2.5rem;
}

.form-container form p{ font-

size: 1.8rem; color:var(--light-
color); margin-bottom: 1rem;
border-radius: .5rem;
}

.form-container form p span{

color:var(--orange);
}

.form-container form .box{ width:

100%; margin:1rem 0; border-
radius: .5rem; background-color:
var(--light-bg); padding:1.4rem;
font-size: 1.8rem;
color:var(--black);
}

.header{ positio
n: sticky;
top:0; left:0; right:0; background-
color: var(--white); box-shadow: var(--
box-shadow);
z-index: 1000;
}

files/Footer.php : Footer page of the website.

<footer class="footer">

<section class="grid">

<div class="box">
<h3>quick links</h3>
<a href="home.php"> <i class="fas fa-angle-right"></i> home</a>
<a href="about.php"> <i class="fas fa-angle-right"></i> about</a>
<a href="shop.php"> <i class="fas fa-angle-right"></i> shop</a>

54
 <a href="contact.php"> <i class="fas fa-angle-right"></i> contact</a>
</div>

<div class="box">
<h3>extra links</h3>
<a href="user_login.php"> <i class="fas fa-angle-right"></i> login</a>
<a href="user_register.php"> <i class="fas fa-angle-right"></i> register</a>
<a href="cart.php"> <i class="fas fa-angle-right"></i> cart</a>
<a href="orders.php"> <i class="fas fa-angle-right"></i> orders</a>
</div>

<div class="box">
<h3>contact us</h3>
<a href="tel:1234567890"><i class="fas fa-phone"></i> +123 456
7899</a>
<a href="tel:11122233333"><i class="fas fa-phone"></i> +111 222
3333</a>
<a href="mailto:[email protected]"><i class="fas fa-envelope"></i>
[email protected]</a>
<a href="https://www.google.com/myplace"><i class="fas fa-map-
markeralt"></i> mumbai, india - 400104 </a>
</div>

<div class="box">
<h3>follow us</h3>
<a href="#"><i class="fab fa-facebook-f"></i>facebook</a>
<a href="#"><i class="fab fa-twitter"></i>twitter</a>
<a href="#"><i class="fab fa-instagram"></i>instagram</a>
<a href="#"><i class="fab fa-linkedin"></i>linkedin</a>
</div>

</section>

<div class="credit">&copy; copyright @ <?= date('Y'); ?> by <span>mr. web

designer</span> | all rights reserved!</div>

</footer>

Testing Mechanisms Used

55
 1. Functional Testing

• Objective: Ensures that all functionalities of a website operate according to

requirements.
• Examples: o Testing user login, registration, form submissions, and payment
gateways. o Verifying if each link, button, and feature performs its designated
function.

2. Usability Testing

• Objective: Evaluates the website’s user-friendliness, efficiency, and overall

experience.
• Examples: o Testing navigation flows. o Assessing how easily users can
complete tasks like searching for products or completing a checkout process.

3. Performance Testing

• Objective: Measures how the website performs under different loads, ensuring
reliability and responsiveness.
• Examples:
o Load Testing: Determines how the website behaves with a large number of
simultaneous users or transactions.
o Stress Testing: Pushing the website beyond its limits to identify its breaking
points.
o Speed Testing: Measuring page load times and ensuring they meet
performance standards.

Implementation Mechanisms..

56
 1. Frontend Development

• Technologies: HTML, CSS, JavaScript (including libraries and frameworks like React,
Vue.js, or Angular)
• Purpose: Creates the visual interface and the client-side logic that users interact with.
• Key Aspects:
o HTML (Hypertext Markup Language): Structures the content (text, images,
forms) on the website. o CSS (Cascading Style Sheets): Styles the
layout, fonts, colors, and responsiveness of the website. o JavaScript:
Adds interactivity, enabling dynamic content updates, form validation, and
API interactions without refreshing the page.
o Frameworks & Libraries: React, Angular, and Vue.js help build complex
user interfaces, manage state, and improve development efficiency.

2. Backend Development

• Technologies: Node.js, Python (Django, Flask), PHP (Laravel), Ruby on Rails, Java
(Spring Boot)
• Purpose: Manages the server-side logic, databases, user authentication, and business
logic.
• Key Aspects:
o Routing: Controls how requests from the user are handled and directs them to
the appropriate responses.
o Database Interactions: Implements CRUD operations (Create, Read, Update,
Delete) for user data, products, orders, etc.
o Session Management: Handles user sessions, keeping users logged in and
managing user-specific data across pages. o APIs (Application
Programming Interfaces): Provides data from external services or enables
communication between different parts of the system.

3. Database Layer

• Technologies: MySQL, PostgreSQL, MongoDB, Oracle, SQLite

• Purpose: Stores and manages data for the website, including user information, product
details, transactions, and more.
• Key Aspects:
o Relational Databases: MySQL, PostgreSQL for structured data with defined
relationships (e.g., products and categories).

BIBLOGRAPHY
Google: Swift information access for coding projects.

57
Stack Overflow: Collaborative coding problem-solving.

WSchools: Comprehensive coding tutorials and documentation.

YouTube: Rich coding tutorials via videos

58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98