CSS Shop Management Final Report
CSS Shop Management Final Report
Jondhale Polytechnic
SUBMITTED BY:
1
MAHARASHTRA STATE BOARD OF TECHNICAL
EDUCATION
CERTIFICATE
This is to certify that Mr. Sahil Rangrez (1523), Tejal Ghotekar (1536), Amol
Salunkhe (1537), Roshni Tiwari (1555) of 5th Semester of Diploma in Computer
Engineering of Institute S.H. Jondhale Polytechnic has successfully completed
Micro Project Work in Subject Advanced Java Programming (22517) for the
academic year 2024-2025 as prescribed in I-Scheme Curriculum
Seal of Institute
2
Index
Sr. Topics Page no.
1 Acknowledgement 4
2 Abstract 5
3 Introduction 6
4 Project Objectives 8
5 Source Code 12
7 Conclusion 19
8 Reference 22
3
ACKNOWLEDGEMENT
4
Abstract
The Shop Management System project aims to develop a
comprehensive software solution to streamline and optimize
the operations of a retail business. This system integrates
multiple functionalities including product management,
customer management, sales and billing, order management,
and supplier management. By automating routine tasks and
providing real-time data analytics, the system enhances
operational efficiency, reduces errors, and supports informed
decision-making.
5
Introduction
Introduction to shop management system
A shop management system is a software application
designed to help manage the day-to-day operations of a
retail business. It streamlines processes such as inventory
management, sales tracking, customer management, and
order processing. Here’s a brief overview:
Key Components:
1. Inventory Management:
o Tracks products in stock.
o Monitors inventory levels.
o Generates purchase orders when stock is low.
2. Sales Management:
o Records sales transactions.
o Provides sales reports and analytics.
Benefits:
6
o Facilitates various payment methods.
3. Customer Management:
o Maintains customer profiles and purchase history.
o Supports customer loyalty programs.
o Enables targeted marketing campaigns.
4. Order Management:
o Handles order creation, processing, and tracking.
o Manages returns and exchanges.
o Integrates with suppliers for restocking.
Project Objectives:
1. Streamline Operations:
- Automate and integrate various business processes
such as sales, inventory management, and customer
management.
- Reduce manual efforts and minimize errors in day-to-
day operations.
7
history.
6.Support Decision-Making:
- Provide real-time data and insights through
comprehensive reporting and analytics.
- Enable data-driven decision-making to improve
business performance.
8
- Ensure flexibility to accommodate future
enhancements and integrations.
9. User-Friendly Interface:
- Develop an intuitive and easy-to-use interface for all
users.
- Provide training and support to ensure smooth
adoption of the system.
Functionalities:
1. Search Products
Purpose: The search functionality allows users to
quickly find specific products in the
inventory by typing keywords or product names into a
search bar.
How It Works:
As the user types into the search bar, the system
9
2. Add to Cart
Purpose: This functionality enables users to add selected
products to their shopping cart. It updates the cart display
to reflect the added products.
How It Works:
When a user clicks the "Add to Cart" button for a
Source Code :
<!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>Amazon</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css" integrity="sha512-
iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1
ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
10
<div class="navbar">
<div class="nav-logo border">
<div class="logo"></div>
</div>
</select>
<input placeholder="Search Amazon" class="search-
input">
<div class="search-icon">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</div>
<div class="nav-singin border">
<p><span>Hello, sign in</span></p>
<p>Account and List</p>
</div>
<div class="nav-return border">
<p><span>Returns</span></p>
<p class="nav-second">& Orders</p>
</div>
<div class="nav-cart border">
<i class="fa-solid fa-cart-shopping"></i>
11
cart
</div>
</div>
<div class="panel">
<div class="panel-all">
<i class="fa-solid fa-bars"></i>
All
</div>
<div class="panel-ops">
<p> Today's Deals </p>
<p> Customer Service </p>
<p> Registry </p>
<p> Gift Cards </p>
<p> Sell </p>
</div>
<div class="panel-deals">
Shop deals in Electronics
</div>
</header>
<div class="hero-section">
<div class="hero-message">
<p>You are on amazon.com. You can also shop on
Amazon India for millions of products with fast local
delivery.<a>click here to go to amazon</a></p>
</div>
</div>
<div class="shop-section">
<div class="box1 box">
<div class="box-content">
<h2>Clothes</h2>
<div class="box-img" style="background-image:
url('box1_image.jpg');"></div>
12
<p>See more</p>
</div>
</div>
<div class="box2 box">
<div class="box-content">
<h2>Health & care</h2>
<div class="box-img" style="background-image:
url('box2_image.jpg');"></div>
<p>See more</p>
</div>
</div>
<div class="box3 box">
<div class="box-content">
<h2>Furniture</h2>
<div class="box-img" style="background-image:
url('box3_image.jpg');"></div>
<p>See more</p>
</div>
</div>
<div class="box4 box">
<div class="box-content">
<h2>Electronics</h2>
<div class="box-img" style="background-image:
url('box4_image.jpg');"></div>
<p>See more</p>
</div>
</div>
<div class="box5 box">
<div class="box-content">
<h2>Makeup</h2>
<div class="box-img" style="background-image:
url('box5_image.jpg');"></div>
<p>See more</p>
13
</div>
</div>
<div class="box6 box">
<div class="box-content">
<h2>Pet toys</h2>
<div class="box-img" style="background-image:
url('box6_image.jpg');"></div>
<p>See more</p>
</div>
</div>
<div class="box7 box">
<div class="box-content">
<h2>New arrival</h2>
<div class="box-img" style="background-image:
url('box7_image.jpg');"></div>
<p>See more</p>
</div>
</div>
<div class="box8 box">
<div class="box-content">
<h2>Discover fashion trend</h2>
<div class="box-img" style="background-image:
url('box8_image.jpg');"></div>
<p>See more</p>
</div>
</div>
</div>
<footer>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
14
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Amazon</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css" integrity="sha512-
iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1
ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<div class="navbar">
<div class="nav-logo border">
<div class="logo"></div>
</div>
</select>
<input placeholder="Search Amazon" class="search-
15
input">
<div class="search-icon">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</div>
<div class="nav-singin border">
<p><span>Hello, sign in</span></p>
<p>Account and List</p>
</div>
<div class="nav-return border">
<p><span>Returns</span></p>
<p class="nav-second">& Orders</p>
</div>
<div class="nav-cart border">
<i class="fa-solid fa-cart-shopping"></i>
cart
</div>
</div>
<div class="panel">
<div class="panel-all">
<i class="fa-solid fa-bars"></i>
All
</div>
<div class="panel-ops">
<p> Today's Deals </p>
<p> Customer Service </p>
<p> Registry </p>
<p> Gift Cards </p>
<p> Sell </p>
</div>
<div class="panel-deals">
Shop deals in Electronics
</div>
16
</header>
<div class="hero-section">
<div class="hero-message">
<p>You are on amazon.com. You can also shop on
Amazon India for millions of products with fast local
delivery.<a>click here to go to amazon</a></p>
</div>
</div>
<div class="shop-section">
<div class="box1 box">
<div class="box-content">
<h2>Clothes</h2>
<div class="box-img" style="background-image:
url('box1_image.jpg');"></div>
<p>See more</p>
</div>
</div>
<div class="box2 box">
<div class="box-content">
<h2>Health & care</h2>
<div class="box-img" style="background-image:
url('box2_image.jpg');"></div>
<p>See more</p>
</div>
</div>
<div class="box3 box">
<div class="box-content">
<h2>Furniture</h2>
<div class="box-img" style="background-image:
url('box3_image.jpg');"></div>
<p>See more</p>
</div>
17
</div>
<div class="box4 box">
<div class="box-content">
<h2>Electronics</h2>
<div class="box-img" style="background-image:
url('box4_image.jpg');"></div>
<p>See more</p>
</div>
</div>
<div class="box5 box">
<div class="box-content">
<h2>Makeup</h2>
<div class="box-img" style="background-image:
url('box5_image.jpg');"></div>
<p>See more</p>
</div>
</div>
<div class="box6 box">
<div class="box-content">
<h2>Pet toys</h2>
<div class="box-img" style="background-image:
url('box6_image.jpg');"></div>
<p>See more</p>
</div>
</div>
<div class="box7 box">
<div class="box-content">
<h2>New arrival</h2>
<div class="box-img" style="background-image:
url('box7_image.jpg');"></div>
<p>See more</p>
</div>
</div>
18
<div class="box8 box">
<div class="box-content">
<h2>Discover fashion trend</h2>
<div class="box-img" style="background-image:
url('box8_image.jpg');"></div>
<p>See more</p>
</div>
</div>
</div>
<footer>
</footer>
<section class="products">
<div class="product">
<img
src="https://th.bing.com/th/id/OIP.TqRgd0FAlCJEdKQrIgy
qtAHaE8?w=3888&h=2592&rs=1&pid=ImgDetMain"
alt="Product 1" class="product-image">
<h2 class="product-title">Product 1</h2>
<p class="product-price">₹2900.99</p>
<button class="buy-button">Buy Now</button>
<div><button class="add-to-cart">Add to
Cart</button>
</div>
</div>
<div class="product">
<img src="https://images.unsplash.com/photo-
1542291026-7eec264c27ff?ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
alt="Product 2" class="product-image">
<h2 class="product-title">Product 2</h2>
<p class="product-price">₹1000.99</p>
19
<button class="buy-button">Buy Now</button>
<div><button class="add-to-cart">Add to
Cart</button>
</div>
</div>
<div class="product">
<img
src="https://th.bing.com/th/id/OIP.TIWckpoCSJiDO_8U3q
ewegHaEh?rs=1&pid=ImgDetMain" alt="Product 3"
class="product-image">
<h2 class="product-title">Product 3</h2>
<p class="product-price">₹1900</p>
<button class="buy-button">Buy Now</button>
<div><button class="add-to-cart">Add to
Cart</button>
</div>
</div>
</section>
<section class="products">
<div class="product">
<img
src="https://th.bing.com/th/id/OIP.zRtS3kDls7LXqx281oM
gOgHaKG?rs=1&pid=ImgDetMain" alt="Product 1">
<h2>Product Name 1</h2>
<p class="price">₹2999.99</p>
<button class="buy-button">Buy Now</button>
<div><button class="add-to-cart">Add to
Cart</button>
</div>
</div>
<div class="product">
20
<img
src="https://th.bing.com/th/id/OIP.z9IKNBsoP7hgrkxb3vW
aCAAAAA?rs=1&pid=ImgDetMain" alt="Product 2">
<h2>Product Name 2</h2>
<p class="price">₹899.99</p>
<button class="buy-button">Buy Now</button>
<div><button class="add-to-cart">Add to
Cart</button>
</div>
</div>
<div class="product">
<img
src="https://th.bing.com/th/id/OIP.mgfle0DOagpWAvld49
yWkwAAAA?rs=1&pid=ImgDetMain" alt="Product 3">
<h2>Product Name 3</h2>
<p class="price">₹1299.00</p>
<button class="buy-button">Buy Now</button>
<div><button class="add-to-cart">Add to
Cart</button>
</div>
</div>
<section class="products">
<div class="product">
<img
src="https://i5.walmartimages.com/asr/987e650b-c238-
4faa-bf8a-
7b8d2b9bf103.c912ff9f1f951dab15b18c23f8ff6a2f.jpeg?
odnHeight=450&odnWidth=450&odnBg=ffffff">
<h2>Product Name 1</h2>
<p class="price">₹299.99</p>
<button class="buy-button">Buy Now</button>
21
<div><button class="add-to-cart">Add to
Cart</button>
</div>
</div>
<div class="product">
<img
src=https://th.bing.com/th/id/OIP.X0YSwOck28B_uXekFS
EWFgHaHa?rs=1&pid=ImgDetMain" alt="Product 2">
<h2>Product Name 2</h2>
<p class="price">₹699.99</p>
<button class="buy-button">Buy Now</button>
<div><button class="add-to-cart">Add to
Cart</button>
</div>
</div>
<div class="product">
<img
src="https://www.ikea.com/in/en/images/products/snuttig-
soft-toy-off-white-polar-bear-
cub__1232514_pe916544_s5.jpg?f=xl" alt="Product 3">
<h2>Product Name 3</h2>
<p class="price">₹299.00</p>
<button class="buy-button">Buy Now</button>
<div><button class="add-to-cart">Add to
Cart</button>
</div>
</div>
<section class="products">
<div class="product">
<img
src="https://ae01.alicdn.com/kf/HTB1nSt.QpXXXXcvXFX
22
Xq6xXFXXXD/Face-Foundation-Makeup-Base-Liquid-
Foundation-BB-Cream-Concealer-Whitening-Moisturizer-
Oil-control-Maquiagem.jpg">
<h2>Product Name 1</h2>
<p class="price">₹259.99</p>
<button class="buy-button">Buy Now</button>
<div><button class="add-to-cart">Add to
Cart</button>
</div>
</div>
<div class="product">
<img
src="https://ae01.alicdn.com/kf/HTB1vAW5QXXXXXasX
VXXq6xXFXXXl/New-Arrival-1pcs-Vogue-Women-s-
Cosmetic-Cheek-Makeup-Blusher-Soft-Natural-Blush-
Powder-Beauty.jpg">
<h2>Product Name 2</h2>
<p class="price">₹319.99</p>
<button class="buy-button">Buy Now</button>
<div><button class="add-to-cart">Add to
Cart</button>
</div>
</div>
<div class="product">
<img src="https://www.temptalia.com/wp-
content/uploads/2020/09/rare-beauty_soft-pinch-liquid-
blush_002_product-1.jpg">
<h2>Product Name 3</h2>
<p class="price">₹599.00</p>
<button class="buy-button">Buy Now</button>
<div><button class="add-to-cart">Add to
Cart</button>
23
</div>
</div>
</div> -->
</style>
</head>
<body>
<!-- Parent Section
<section class="parent-section">
<h2>Main Section: Products</h2>
Inner Section 1
<section class="inner-section">
<h3>Featured Product</h3>
<p>This is the featured product of the day!</p>
</section>
Inner Section 2
<section class="inner-section">
<h3>Latest Deals</h3>
<p>Check out the latest offers and discounts!</p>
</section>
</section> -->
24
<!-- <table class="menu-list">
<thead>
<tr>
<th>Item Name</th>
<th>Description</th>
<th>Price</th>
<th>Availability</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bagpack</td>
<td>Gucci</td>
<td class="price">₹3499</td>
<td class="available">In Stock</td>
</tr>
<tr>
<td>toys</td>
<td>buy one get one offer</td>
<td class="price">₹2900.99</td>
<td class="unavailable">Out of Stock</td>
</tr>
<tr>
<td>Product 3</td>
<td>This is a brief description of product 3.</td>
<td class="price">$99.99</td>
<td class="available">In Stock</td>
</tr>
</tbody>
</table> -->
<footer>
<div class="foot-panel1">
25
<div> Back to Top </div>
</div>
<div class="foot-panel2">
<ul>
<p>Get to Know Us</p>
<a>About Amazon</a>
<a>Careers</a>
<a>Press Releases</a>
<a>Amazon Science</a>
</ul>
<ul>
<p>Get to Know Us</p>
<a>About Amazon</a>
<a>Careers</a>
<a>Press Releases</a>
<a>Amazon Science</a>
</ul>
<ul>
<p>Get to Know Us</p>
<a>About Amazon</a>
<a>Careers</a>
<a>Press Releases</a>
<a>Amazon Science</a>
</ul>
<ul>
<p>Get to Know Us</p>
<a>About Amazon</a>
<a>Careers</a>
<a>Press Releases</a>
<a>Amazon Science</a>
</ul>
</div>
26
<div class="foot-panel3">
<div class="logo"></div>
</div>
<div class="foot-panel4">
<div class="pages">
<a>Conditions of use</a>
<a>Privacy Notice</a>
<a>Your ads privacy choices</a>
</div>
<div class="copyright">
©️1996-2024, Amazon.com, Inc. or its affiliates
</div>
</div>
</footer>
</section>
</body>
</html>
</head>
<body>
<!-- Parent Section
<section class="parent-section">
<h2>Main Section: Products</h2>
Inner Section 1
<section class="inner-section">
<h3>Featured Product</h3>
<p>This is the featured product of the day!</p>
</section>
27
Inner Section 2
<section class="inner-section">
<h3>Latest Deals</h3>
<p>Check out the latest offers and discounts!</p>
</section>
</section> -->
<footer>
<div class="foot-panel1">
<div> Back to Top </div>
</div>
<div class="foot-panel2">
<ul>
<p>Get to Know Us</p>
<a>About Amazon</a>
<a>Careers</a>
<a>Press Releases</a>
<a>Amazon Science</a>
</ul>
<ul>
<p>Get to Know Us</p>
<a>About Amazon</a>
<a>Careers</a>
<a>Press Releases</a>
Source Code Output :
29
30
Scope of the project:
Functional Scope
1. Product Management:
- Add, update, and delete product information.
- Categorize products (e.g., groceries, dairy, kitchen
utensils, vegetables, spices).
- Manage inventory levels and notifications for low stock.
2. Customer Management:
- Register new customers and update existing customer
details.
- Maintain purchase history and loyalty points.
- Implement customer segmentation for targeted
marketing.
4. Order Management:
- Create and manage customer orders.
- Track order status from creation to delivery.
- Manage returns and exchanges.
31
5. Supplier Management:
- Maintain supplier information and purchase orders.
- Track deliveries and manage supplier payments.
- Generate reports on supplier performance.
Technical Scope
1. Architecture:
- Design a scalable and modular system architecture.
- Choose appropriate technologies and frameworks (e.g.,
Java, Spring, Hibernate).
2. Database Management:
- Design the database schema for efficient data storage
and retrieval.
- Implement backup and recovery procedures.
3. User Interface:
- Develop an intuitive and user-friendly interface.
- Ensure responsive design for various devices (desktop,
mobile, tablet).
32
4. Integration:
- Integrate with external systems (e.g., payment gateways,
SMS/email services).
- Support APIs for third-party integrations.
Out of Scope
- Customizations beyond the predefined features.
- Hardware procurement and setup.
- Long-term maintenance and support.
Constraints
- Budget and timeline limitations.
- Technical constraints like server capacity and software
licenses.
33
Conclusion:
In conclusion, developing a Shop Management System
involves creating a robust software solution to streamline
and optimize the various operations of a retail business.
With functionalities like product management, customer
management, sales and billing, order management, supplier
management, and comprehensive reporting and analytics,
such a system enhances efficiency, accuracy, and customer
satisfaction.
34
Reference
www.google.com
www.chatgpt.com
35