PPPPPPP

MAHARASHTRA STATE BOARD OF TECHNICAL
EDUCATION
The Shetkari Shikshan Mandal’s

BHIVARABAI SAWANT COLLEGE OF ENGINEERING &
RESEARCH POLYTECHNIC
YEAR: 2023-2024
PROJECT REPORT
ON
“Online Shopping System”
BY
Pawan Mohite
Nakul Sharma
Shrawan Bora
Saket Ambede
PROGRAM: COMPUTER PROGRAM CODE: CO6I

COURSE: CPE COURSE CODE: 22060
MAHARASHTRA STATE
BOARD OF TECHNICAL EDUCATION
Certificate
This is to certify that Mr.Pawan Mohite , Nakul Sharma, Shrawan Bora,
Saket Ambede from TSSM’s Bhivarabai Sawant College of Engineering and Research,
Polytechnic, Narhe, Pune having Enrollment number2116060067 has completed Project
Planning Report having title “Online Shopping System” in group consisting of 4
Candidates under the guidance of the faculty Guide Prof. Sahajrao P.S.
Project Guide Head Of Dept Principal

Online Shopping System
TABLE OF CONTENTS
ABSTRACT i
LIST OF FIGURE ii
LIST OF TABLES iv
ACKNOWLEDGEMENT v
1. INTRODUCTION PAGE
1.1 PROJECT OBJECTIVES 1
1.2 PROJECT OVER VIEW 2
1.3 PROJECT SCOPE 2
1.4 STUDY OF SYSTEMS 3
1.4.1 MODULES 3
1.4.1.1 ADMIN 3
1.4.1.2 MODERATOR 11
1.4.1.3 USER 12
2. SYSTEM ANALYSIS 15
2.1 EXISTING SYSTEM 15
2.2 PROPOSED SYSTEM 16
2.3 SYSTEM REQUIREMENT SPECIFICATION 16
2.3.1 GENERAL DESCRIPTION 16
2.3.2 SYSTEM OBJECTIVES 17
2.3.3 SYSTEM REQUIREMENTS 17
2.3.3.1 NON FUNCTIONAL REQUIREMENT 18
2.3.3.2 FUNCTIONAL REQUIREMENT 19
3. SYSTEM DESIGN 23
3.1 INPUT AND OUTPUT DESIGN 24
3.1.1 INPUT DESIGN 24
3.1.2 OUTPUT DESIGN 24
3.2 DATABASE 25
3.3 SYSTEM TOOLS 25
3.3.1 FRONT END 26
3.3.2 BACK END 27
3.4 TABLES 28
3.5 E-R DIAGRAMS 30
3.6 DATA FLOW DIAGRAMS (DFD) 32
3.7 SCREEN SHOTS
3.8 SAMPLE CODE 39

4. CONCLUSION 67
REFERENCES 69
ABSTRACT
This project is a web based shopping system for an existing shop.

The project objective is to deliver the online shopping application into web
based platform.
This project is an attempt to provide the advantages of online shopping to

customers of a real shop. It helps buying the products in the shop
anywhere through internet by using an device. Thus the customer will get
the service of online shopping and home delivery of cloth.
.
LIST OF FIGURES
1.1 ADMIN MODULE 5
1.2 MANAGE MODERATORS 6
1.3 MANAGE PRODUCTS 8
1.4 MANAGE USERS 9
1.5 MANAGE ORDERS 10
1.5 MODERATOR MODULE 11
1.7 USER MODULE 12
E-R DIAGRAMS & DFD
3.5 LOGIN 30
3.6 USER DETAILS 30
3.7 PRODUCT DETAILS 31
3.8 PRODUCT ORDERS 31
3.9 COMPLETE DIAGRAM 32
ii
3.10 LOGIN DFD 35
3.11 REGISTRATION DFD 36
3.12 ADMIN DFD 37
3.13 MODERATOR DFD 38
iii
LIST OF TABLES
3.1 LOGIN TABLE 28
3.2 USER DETAILS 28
3.3 PRODUCT DETAILS 29
3.4 PRODUCT ORDERS 29
iv
ACKNOWLEDGEMENT
I take this occasion to thank God, almighty for blessing us with
his grace and taking our endeavor to a successful culmination. I extend
my sincere and heartfelt thanks to our esteemed guide, Prof. Sahajrao
P.S, for providing me with the right guidance and advice at the crucial
junctures and for showing me the right way. I extend my sincere thanks to
our respected Head of the department, for allowing us to use the facilities
available. I would like to thank the other faculty members also, at this
occasion. Last but not the least, I would like to thank my friends and family
for the support and encouragement they have given me during the course
of our work.
v
CHAPTER 1
INTRODUCTION
This project is a web based shopping system for an existing shop.
The project objective is to deliver the online shopping application into and
web based platform.
Online shopping is the process whereby consumers directly buy cloths or

services from a seller in real-time, without an intermediary service, over
the Internet. It is a form of electronic commerce. This project is an attempt
to provide the advantages of online shopping to customers of a real shop.
It helps buying the products in the shop anywhere through internet by
using an any device. Thus the customer will get the service of online
shopping and home delivery .
1.1 PROJECT OBJECTIVE:
The objective of the project is to make an application in web based

platform to purchase items in an existing shop. In order to build such an
application complete web support need to be provided. A complete and
efficient web application which can provide the online shopping
experience is the basic objective of the project. The web application can
be implemented in the form of an application with web view.
Page 11
1.2 PROJECT OVER VIEW:
The central concept of the application is to allow the customer to shop

virtually using the Internet and allow customers to buy the items and
articles of their desire from the store. The information pertaining to the
products are stores on an MongoDBMS .
The Server process the customers and the items are shipped to the
address submitted by them. The application was designed into two
modules first is for the customers who wish to buy the articles. Second is
for the storekeepers who maintains and updates the information pertaining
to the articles and those of the customers. The end user of this product is
a departmental store where the application is hosted on the web and the
administrator maintains the database. The application which is deployed
at the customer database, the details of the items are brought forward
from the database for the customer view based on the selection through
the menu and the database of all the products are updated at the end of
each transaction. Data entry into the application can be done through
various screens designed for various levels of users. Once the authorized
personnel feed the relevant data into the system, several reports could be
generated as per the security.
1.3 PROJECT SCOPE:
Page 12
This system can be implemented to any shop in the locality or to

multinational branded shops having retail outlet chains. The system
recommends a facility to accept the orders 24*7 and a home delivery
system which can make customers happy.
If shops are providing an online portal where their customers can
enjoy easy shopping from anywhere, the shops won’t be losing any more
customers to the trending online shops such as flipcart or ebay. Since the
application is available in the Smartphone it is easily accessible and
always available.
1.4 STUDY OF THE SYSTEM
1.4.1 MODULES:
The system after careful analysis has been identified to be presented with
the following modules and roles.
The modules involved are:
➢ Administrator
➢ Moderators
➢ Users
1.4.1.1 ADMINISTRATOR:
Page 13
The administrator is the super user of this application. Only admin

have access into this admin page. Admin may be the owner of the shop.
The administrator has all the information about all the users and about all
products.
This module is divided into different sub-modules.
1. Manage Moderators
2. Manage Products
3. Manage Users
4. Manage Orders
Page 14
Fig 1.1: Admin module
MANAGE MODERATOR
Page 15
Fig 1.2: Manage Moderator

➢ Add Moderator
Only admin is having the privilege to add a moderator. A moderator can

be considered as a staff who manages the orders or owner of a group of
products.
➢ Block moderator
Page 16
Admin can restrict a moderator from managing the orders by blocking

them. Admin can unblock a blocked user if needed.
➢ Remove Moderator
Admin has privilege to delete a moderator who was added.
➢ Search moderator:
All existing moderators can be viewed by the administrator as a list. If

there is number of moderators and admin need to find one of them, the
admin can search for a moderator by name.
MANAGE PRODUCTS
Page 17
Fig 1.3: Manage Products
➢ Add Products
The shopping cart project contains different kind of products. The products
can be classified into different categories by name. Admin can add new
products into the existing system with all its details including an image.
➢ Delete Products
Administrator can delete the products based on the stock of that particular
product.
➢ Search products
Page 18
Admin will have a list view of all the existing products. He can also search
for a particular product by name.
MANAGE USER
Fig 1.4: Manage User
Page 19
➢ View Users
The admin will have a list view of all the users registered in the system.
Admin can view all the details of each user in the list except password.
➢ Add Users
Admin has privileges to add a user directly by providing the details.
➢ Delete &Block Users

Administrator has a right to delete or block a user. The default status of a
new user registered is set as blocked. The admin must accept the new
user by unblocking him.
MANAGE ORDERS
Fig 1.5: Manage Orders

Page 20
➢ View Order
Administrator can view the Orders which is generated by the users. He
can verify the details of the purchase.
➢ Delete order
Admin can delete order from the orders list when the product is taken for
delivery.
1.4.1.2 MODERATORS
Fig 1.6: Moderator Module
A moderator is considered as a staff who can manage orders for the time
being. As a future update moderator may give facility to add and manage
his own products . Moderators can reduce the work load of admin. Now
moderator has all the privilege an admin having except managing other
Page 21
moderators. He can add products and users. He can also check the
orders and edit his profile.
➢ Manage products
➢ Manage users
➢ Manage orders
1.4.1.3 USERS
Fig 1.7: User Module
➢ Registration
Page 22
A new user will have to register in the system by providing essential

details in order to view the products in the system. The admin must accept
a new user by unblocking him.
➢ Login
A user must login with his user name and password to the system after
registration.
➢ View Products
User can view the list of products based on their names after successful
login. A detailed description of a particular product with product name,
products details, product image, price can be viewed by users.
➢ Search Product
Users can search for a particular product in the list by name.
➢ Add to cart:
The user can add the desired product into his cart by clicking add to cart
option on the product.
He can view his cart by clicking on the cart button. All products added by
cart can be viewed in the cart. User can remove an item from the cart by
clicking remove.
Page 23
➢ Submit Cart:
After confirming the items in the cart the user can submit the cart by
providing a delivery address.On successful submitting the cart will become
empty.
➢ History
In the history the user will have a view of pending orders.
➢ Edit Profile
The user can view and edit the profile.
Page 24
CHAPTER 2
SYSTEM ANALYSIS
System analysis is the process of gathering and interpreting facts,

diagnosing problems and using the information to recommend
improvements on the system. System analysis is a problem solving
activity that requires intensive communication between the system users
and system developers.
System analysis or study is an important phase of any system

development process. The system is viewed as a whole, the inputs are
identified and the system is subjected to close study to identify the
problem areas. The solutions are given as a proposal. The proposal
is reviewed on user request and suitable changes are made. This loop
ends as soon as the user is satisfied with the proposal.
2.1 EXISTING SYSTEM
The current system for shopping is to visit the shop manually and from the
available product choose the item customer want and buying the item by
payment of the price of the item .
1. It is less user-friendly.
Page 25
2. User must go to shop and select products.

3. It is difficult to identify the required product.
4. Description of the product limited.
5. It is a time consuming process
6. Not in reach of distant users.
2.2 PROPOSED SYSTEM
In the proposed system customer need not go to the shop for

buying the products. He can order the product he wish to buy through the
application in his Smartphone. The shop owner will be admin of the
system. Shop owner can appoint moderators who will help owner in
managing the customers and product orders. The system also
recommends a home delivery system for the purchased products.
2.3 SYSTEM REQUIREMENT SPECIFICATION
2.3.1 GENERAL DESCRIPTION
Product Description:
The system consists of parts .A web application which can provide the
online shopping service and an application for the customer to
Page 26
access the web service from his Smartphone. Web application should be
able to help the customer for selecting his item and to help the owner in
managing the orders from the customers.
Problem Statement:
As online shopping became a trend nowadays the regular shops are

losing their customers to online brands. Customers have effortless
shopping experience and saving time through shopping online. For
competing with those online brands , If shops are providing an online
portal where their customers can shop through internet and get the
products at their doors it will increase the number of customers.
2.3.2 SYSTEM OBJECTIVES
➢ To provide an web based application for online shopping of

products in an existing shop.
➢ To provide a online shopping web site.
2.3.3 SYSTEM REQUIREMENTS
Page 27
2.3.3.1 NON FUNCTIONAL REQUIREMENTS
i. EFFICIENCY REQUIREMENT
When an online shopping cart web based application implemented

customer can purchase product in an efficient manner.
ii. RELIABILITY REQUIREMENT
The system should provide a reliable environment to both customers and

Moderator. All orders should be reaching at the admin without any errors.
iii. USABILITY REQUIREMENT
The Web-Based application is designed for user friendly environment and

ease of use.
iv. IMPLEMENTATION REQUIREMENT
Implementation of the system using ReactJs in front end with

MongoDBMS as back end and it will be used for database connectivity..
Responsive web designing is used for making the website compatible for
any type of screen.
v. DELIVERY REQUIREMENT
The whole system is expected to be delivered in four months of time with
Page 28
a weekly evaluation by the project guide.
2.3.3.2 FUNCTIONAL REQUIREMENTS
USER
➢ USER LOGIN
Description of feature
This feature used by the user to login into system. A user must login
with his user name and password to the system after registration. If they
are invalid, the user not allowed to enter the system.
Functional requirement
- Username and password will be provided after user registration is

confirmed.
- Password should be hidden from others while typing it in the field
➢ REGISTER NEW USER
Page 29
A new user will have to register in the system by providing essential

details in order to view the products in the system. The admin must accept
a new user by unblocking him.
- System must be able to verify and validate information.

- The system must encrypt the password of the customer to provide
security.
➢ PURCHASING AN ITEM
The user can add the desired product into his cart by clicking add to cart
option on the product. He can view his cart by clicking on the cart button.
All products added by cart can be viewed in the cart. User can remove an
item from the cart by clicking remove. After confirming the items in the cart
the user can submit the cart by providing a delivery address. On
successful submitting the cart will become empty.
- System must ensure that, only a registered customer can purchase

items.
Page 30
ADMIN
➢ MANAGE USER
The administrator can add user, delete user, view user and block user.
➢ MANAGE MODERATOR
The administrator can add moderator, delete moderator, block moderator

and search for a moderator.
➢ MANAGE PRODUCTS
The administrator can add product, delete product and view product.
➢ MANAGE ORDERS
The administrator can view orders and delete orders.
Functional requirements
-The system must identify the login of the admin.
Page 31
-Admin account should be secured so that only owner of the shop can
access that account
MODERATOR
Description of features
A moderator is considered as a staff who can manage orders for the time
being. As a future update moderator may give facility to add and manage
his own products. Moderators can reduce the work load of admin. Now
moderator has all the privilege of an admin having except managing other
moderators. He can manage users and manage products. He can also
check the orders and edit his profile.
-The system must identify the login of a moderator.
Page 32
CHAPTER 3
SYSTEM DESIGN
System design is the solution for the creation of a new system.

This phase focuses on the detailed implementation of the feasible system.
It emphasis on translating design. Specifications to performance
specification. System design has two phases of development
➢ Logical design
➢ Physical design
During logical design phase the analyst describes inputs (sources),

output s(destinations), databases (data sores) and procedures (data
flows) all in a format that meets the user requirements. The analyst also
specifies the needs of the user at a level that virtually determines the
information flow in and out of the system and the data resources. Here
the logical design is done through data flow diagrams and database
design. The physical design is followed by physical design or coding.
Physical design produces the working system by defining the design
specifications, which specify
exactly what the candidate system must do. The programmers write
the necessary programs that accept input from the user, perform
Page 33
necessary processing on accepted data and produce the required report

on a hard copy or display it on the screen.
3.1 INPUT AND OUTPUT DESIGN
3.1.1 INPUT DESIGN:
Input design is the link that ties the information system into the world of its
users. The input design involves determining the inputs, validating the
data, minimizing the data entry and provides a multi-user facility.
Inaccurate inputs are the most common cause of errors in data
processing. Errors entered by the data entry operators can be
controlled by input design. The user-originated inputs are converted to a
computer based format in the input design. Input data are collected and
organized into groups of similar data. Once identified, the appropriate
input media are selected for processing. All the input data are validated
and if any data violates any conditions, the user is warned by a
message. If the data satisfies all the conditions, it is transferred to
the appropriate tables in the database. In this project the student details
are to be entered at the time of registration. A page is designed for this
purpose which is user friendly and easy to use. The design is done
such that users get appropriate messages when exceptions occur.
3.1.2 OUTPUT DESIGN:
Page 34
Computer output is the most important and direct source of information to

the user. Output design is a very important phase since the output needs
to be in an efficient manner. Efficient and intelligible output design
improves the system relationship with the user and helps in decision
making. Allowing the user to view the sample screen is important
because the user is the ultimate judge of the quality of output. The output
module of this system is the selected notifications.
3.2 DATABASE
DATABASE DESIGN:
Databases are the storehouses of data used in the software systems. The
data is stored in tables inside the database. Several tables are
created for the manipulation of the data for the system. Two essential
settings for a database are.
.
3.3 SYSTEM TOOLS
The various system tools that have been used in developing both the front end and the
back end of the project are being discussed in this chapter.
Page 35
3.3.1. FRONT END:
REACTJS, are utilized to implement the frontend.
REACTJS:-
React.js is a popular JavaScript library for building user interfaces, particularly single- page
applications. It's widely used in e-commerce for creating dynamic and responsive frontends its
component-based architecture, which allows developers to build reusable UI elements
Here are some key features and considerations for using React.js in an e-commerce
frontend:
1. Component-Based Architecture : React allows developers to break down the UI

into reusable components, making it easier to manage complex UI elements such
as product listings, shopping carts, and checkout forms.
2. Virtual DOM: React utilizes a virtual DOM, which is a lightweight copy of the
actual DOM. This enables efficient updating of the UI by only re-rendering
components that have changed, resulting in better performance, especially for
large e-commerce websites with frequent updates.
3. State Management: React provides a straightforward way to manage the state of
components using useState and useReducer hooks or state management libraries
like Redux or MobX. State management is crucial in e-commerce applications for
handling user interactions such as adding items to the cart, applying filters, and
managing authentication status.
Page 36
4. Server-Side Rendering (SSR) and Static Site Generation (SSG): For better SEO
and performance, consider implementing server-side rendering or static site
generation with React. Libraries like Next.js provide support for SSR and SSG,
allowing you to pre-render pages on the server and serve them as static HTML
files.
5. Integration with Backend APIs: E-commerce frontends often need to
communicate with backend APIs to fetch product data, handle user authentication,
and process transactions. React makes it easy to interact with RESTful APIs or
GraphQL endpoints using libraries like Axios, Fetch API, or Apollo Client.
6. Responsive Design: With the increasing use of mobile devices for online
shopping, it's essential to build responsive user interfaces that adapt to different
screen sizes. React, along with CSS frameworks like Bootstrap or Material-UI, can
help create responsive designs for e-commerce websites.
7. Accessibility: Ensure that your e-commerce frontend is accessible to users with
disabilities by following best practices for accessibility. React offers tools like aria-*
attributes and focus management to improve accessibility.
Page 37
3.3.2 BACK END
The back end is implemented using MongoDBMS for website which is

used to design the databases.
MongoDB:-
MongoDB is a popular NoSQL database that is commonly used in the backend of online
shopping systems due to its flexibility, scalability, and ease of use. MongoDB stores data
in a flexible, JSON-like format called BSON (Binary JSON), which allows for easy storage
and retrieval of complex data structures commonly found in e-commerce applications.
Here's how MongoDB can be used in the backend of an online shopping system:
1. Product Catalog Management: MongoDB can store product data such as

product name, description, price, inventory levels, images, and other attributes in
collections within the database. Each product can be represented as a document in
a collection, making it easy to query and update product information.
2. User Management: MongoDB can store user data such as user profiles, login
credentials, shipping addresses, payment information, and order history. User data
can be stored in a separate collection or embedded within other collections
depending on the data model chosen for the application.
3. Order Management: MongoDB can store order data such as order details, order
status, shipping information, and payment details. Orders can be represented as
documents in a collection, and MongoDB's rich querying capabilities allow for
efficient retrieval and manipulation of order data.
Page 38
3.4 TABLES
➢ LOGIN
Fig 3.1: Login Table
➢ USER DETAILS
Page 39
Fig 3.2: User Details Table
➢ PRODUCT DETAILS
Fig 3.3: Product Details Table
➢ PRODUCT ORDERS
Fig 3.4: Product Orders table
Page 40
3.5 E-R DIAGRAMS
➢ LOGIN
Fig 3.5: Login
➢ USER DETAILS
Fig 3.6: User Details
Page 41
➢ PRODUCT DETAILS
Fig 3.7: Product Details
➢ PRODUCT ORDERS
Fig 3.8: Product Orders
Page 42
➢ COMPLETE DIAGRAM
Fig 3.9: Complete Diagram
3.6 DATA FLOW DIAGRAM
A Data Flow Diagram (DFD) is a structured analysis and design

tool that can be used for flowcharting. A DFD is a network that
describes the flow of data and the processes that change or
transform the data throughout a system. This network is constructed by
using a set of symbols that do not imply any physical
implementation. It has the purpose of clarifying system
Page 42
requirements and identifying major transformations. So it is the starting

point of the design phase that functionally decomposes the requirements
specifications down to the lowest level of detail. DFD can be considered
to an abstraction of the logic of an information-oriented or a
process-oriented system flow-chart. For these reasons DFD’s are
often referred to as logical data flow diagrams.
EXTERNAL ENTITY
An external entity is a source or destination of a data flow. Only those

entities which originate or receive data are represented on a data flow
diagram. The symbol used is a rectangular box.
PROCESS
A process shows a transformation or manipulation of data flow within the

system. The symbol used is an oval shape.
DATAFLOW
Page 43
The data flow shows the flow of information from a source to its
destination. Data flow is represented by a line, with arrowheads
showing the direction of flow. Information always flows to or from a
process and may be written, verbal or electronic. Each data flow
may be referenced by the processes or data stores at its head and
tail, or by a description of its contents.
DATA STORE
A data store is a holding place for information within the system: It is

represented by an open ended narrow rectangle. Data stores may be
long-term files such as sales ledgers, or may be short-term
accumulations: for example batches of documents that are waiting to be
processed. Each data store should be given a reference followed by an
arbitrary number.
➢ LOGIN DFD
Page 44
Fig 3.10: Login DFD
➢ REGISTRATION DFD
Page 45
Fig 3.11: Registration DFD
➢ ADMIN DFD
Page 46
Fig 3.12: Admin DFD
Page 47
➢ MODERATOR DFD
Fig 3.13: Moderator DFD
Page 48
3.7 SCREEN SHOTS
➢ Home Page
Page 49
Cart Page:-
Page 50
DashBoard:-
Page 51
Sign-in-Page:-
Page 52
Sign-up-Page:-
Page 53
➢ Create Category:-
Page 54
Create Product:-
Page 55
Manage Product:-
Page 56
Manage Categories:-
Page 57
3.8Code:-
Admin:
import React from "react";
import Base from "../core/Base"
import { isAuthenticated } from "../auth/helper";
import { Link } from "react-router-dom/cjs/react-router-dom.min";
const AdminDashBoard=()=>{
const {user:{name,email,role}}=isAuthenticated()
const adminLeftSide=()=>{
return (
<div className="card">
<h4 className="card-header bg-dark text-white">Admin
Navigation</h4>
<ul className="list-group">
<li className="list-group-item">
<Link to="/admin/create/category" className="nav-link text-
success">
Create Categories
</Link>
</li>
<Link to="/admin/categories" className="nav-link text-success">
Manage Categories
</Link>
</li>
<Link to="/admin/create/product" className="nav-link text-
success">
Create Product
</Link>
</li>
Page 58
<Link to="/admin/products" className="nav-link text-success">
Manage Products
</Link>
</li>
<Link to="/admin/orders" className="nav-link text-success">
Manage Orders
</Link>
</li>
</ul>
</div>
);
}
const adminRightSide = () => {

return (
<div className="card mb-4">
<h4 className="card-header bg-dark">Admin Information</h4>
<ul className="list-group">
<span className="badge badge-success mr-2">Name:</span> <span
className="text-dark">{name}</span>
</li>
<span className="badge badge-success mr-2">Email:</span> <span
className="text-dark">{email}</span>
</li>
<span className="badge badge-danger">Admin Area</span>
</li>
</ul>
</div>
);
};
return (
Page 59
<Base title="Welcome to admin area" description="Manage all of your
products here">
<div className="row">
<div className="col-3">{adminLeftSide()}</div>
<div className="col-9">{adminRightSide()}</div>
</div>
</Base>
)
}
export default AdminDashBoard;
signin:
import React,{useState} from "react";
import {Link,Redirect} from "react-router-dom"
import {signin,isAuthenticated,authenticate} from "../auth/helper"
const Signin=()=>{
const [values, setValues] = useState({

email:"",
password:"",
error:"",
loading:false,
didRedirect:false
})
const {email,password,error,loading,didRedirect}=values
const {user}=isAuthenticated()
const handleChange = name=> event=>{

setValues({...values,error:false,[name]:event.target.value})
}
Page 60
const onSubmit=event=>{
event.preventDefault();
setValues({...values, error:false,loading:true})
signin({email,password})
.then((data)=>{
if(data.error != null){
setValues({...values,error:data.error,loading:false})
}
else{
authenticate(data,()=>{
setValues({...values,didRedirect:true})
})
}
})
.catch(console.log("signin request failed"))
}
const performRedirect =()=>{

if(didRedirect){
if(user && user.role===1){
return <Redirect to="/admin/dashboard"/>
}
else{
return <Redirect to="/user/dashboard"/>
}
}
/* if(isAuthenticated() != null){
return <Redirect to="/"></Redirect>
}*/
}
const loadingMessage=()=>{
return(
loading&&(
Page 61
<div className="alert alert-info">
<h4>Loading...</h4>
</div>
)
)
}
const errorMessage=()=>{
return (
<div className="col-md-6 offset-sm-3 text-left">
<div className="alert alert-success" style={{display: error ?"":"none"}}>
{error}
</div>
</div>
</div>
)
}
const signInForm=()=>{
return (
<form>
<div className="form-group">
<label className="text-light">Email</label>
<input onChange={handleChange("email")} className="form-
control" type="email" value={email}/>
</div>
<label className="text-light">password</label>
<input onChange={handleChange("password")}
className="form-control" type="password" value={password}/>
</div>
<button onClick={onSubmit}className="btn btn-success btn-
Page 62
block">Submit</button>
</form>
</div>
</div>
)
}
return (
<Base title="Sign in page" description="A page for user to sign in !!">
{loadingMessage()}
{errorMessage()}
{signInForm()}
{performRedirect()}
<p className="'text-white text-center">{JSON.stringify(values)}</p>
</Base>
)
}
export default Signin;
signup:
import React,{useState} from "react"
import {Link} from "react-router-dom"
import {signup} from "../auth/helper"
const Signup=()=>{
const [values,setValues]=useState({
name:"",
email:"",
password:"",
error:"",
success:false
});
Page 63
const {name,email,password,error,success}=values
const handleChange = name=> event=>{

setValues({...values,error:false,[name]:event.target.value})
}
const onSubmit=event=>{
event.preventDefault()
setValues({...values, error:false})
signup({name,email,password})
.then(data=>{
if(data.error != null){
setValues({...values, error:data.error, success:false})
}
else{
setValues({
...values,
name:"",
email:"",
password:"",
error:"",
success:true
})
}
})
.catch(console.log("error in signup"))
const signUpForm=()=>{
return (
<form>
Page 64
<label className="text-light">Name</label>
<input className="form-control"
onChange={handleChange("name")} type="text" value={name}/>
</div>
<label className="text-light">Email</label>
onChange={handleChange("email")} type="email" value={email}/>
</div>
<label className="text-light">password</label>
onChange={handleChange("password")} type="password" value={password}/>
</div>
<button onClick={onSubmit} className="btn btn-success btn-
block">Submit</button>
</form>
</div>
</div>
)
}
const successMessage=()=>{
return (
<div className="alert alert-success" style={{display: success
?"":"none"}}>
New Account Created Successfully.Please {" "} <Link to="/signin">Login
here</Link>
</div>
</div>
</div>
)
}
Page 65
const errorMessage=()=>{
return (
<div className="alert alert-success" style={{display: error ?"":"none"}}>
{error}
</div>
</div>
</div>
)
}
return (
<Base title="Sign up Page" description="page for user to sign up !!">
{successMessage()}
{errorMessage()}
{signUpForm()}
<p className="text-white text-center">{JSON.stringify(values)}</p>
</Base>
)
}
export default Signup;
home page:
import React,{useEffect,useState} from "react";
import "../styles.css";
import { API } from "../backend";
import Base from "./Base";
import Card from "./Card";
import { getProducts } from "./helper/coreapicalls";
export default function Home() {
const [products, setProducts] = useState([]);
const [error, setError] = useState(false);
Page 66
const loadAllProduct = () => {

getProducts().then(data => {
if (data.error) {
setError(data.error);
} else {
setProducts(data);
}
});
};
useEffect(() => {
loadAllProduct();
}, []);
return (
<Base title="Home Page" description="Welcome to T-shirt store">
{products.map((product, index) => {
return (
<div key={index} className="col-4 mb-4">
<Card product={product}/>
</div>
);
})}
</div>
</Base>
);
}
Controllers:
const Category=require("../models/category")
exports.getCategoryById=(req,res,next,id)=>{
Category.findById(id).exec((err,cate)=>{
Page 67
if(err){
res.status(400).json({
error:"Category not found in DB"
})
}
req.category=cate
next()
})
}
exports.createCategory=(req,res)=>{
const category=new Category(req.body)
category.save((err,category1)=>{
if(err) {
error:"Not able to save category in DB"
})
}
res.json({category1})
})
}
exports.getCategory=(req,res)=>{
return res.json(req.category)
}
exports.getAllCategory=(req,res)=>{
Category.find().exec((err,categories)=>{
if(err) {
error:"categories not found"
})
}
return res.json(categories)
})
Page 68
}
exports.updateCategory=(req,res)=>{
console.log(req.body)
Category.findByIdAndUpdate(
{_id:req.category._id},
{$set:req.body},
{new:true,useFindAndModify:false},
(err,categ)=>{
if(err){
return res.status(400).json({
error:"category not updated"
})
}
res.json(categ)
}
)
}
exports.updateCategory=(req,res)=>{
let form = new formidable.IncomingForm();
form.keepExtensions = true;
form.parse(req, (err, fields, file) => {

if (err) {
error: "problem with image",
});
}})
}
*/
exports.removeCategory=(req,res)=>{
const category=req.category
category.remove((err,category)=>{
if(err){
error:"Failed to delete category"
})
Page 69
}
res.json({
message:"Category Deleted successfully"
})
})
}
const User=require("../models/user")
const Order=require("../models/order")
exports.getUserById=(req,res,next,id)=>{
User.findById(id).exec((err,user)=>{
if(err || !user)
{
error:"No user found in DB"
})
}
req.profile=user
next()
})
}
exports.getUser=(req,res)=>{
req.profile.salt=undefined,
req.profile.encry_password=undefined,
req.profile.createdAt=undefined,
req.profile.updatedAt=undefined
return res.json(req.profile)
}
exports.updateUser=(req,res)=>{
User.findByIdAndUpdate(
Page 70
{_id:req.profile._id},
{$set:req.body},
{new:true,useFindAndModify:false},
(err,user)=>{
if(err){
error:"You are not authorized to update this
user"
})
}
user.salt=undefined
user.encry_password=undefined
res.json(user)
}
)
}
exports.userPurchaseList=(req,res)=>{
Order.find({user:req.profile._id})
.populate("user","_id name")
.exec((err,order)=>{
if(err){
error:"No order in this account"
})
}
return res.json(order)
})
}
exports.pushOrderInPurchaseList=(req,res,next)=>{
let purchases=[]
req.body.order.products.forEach(product =>{
purchases.push({
_id:product._id,
Page 71
name:product.name,
description:product.description,
category:product.category,
quantity:product.quantity,
amount:req.body.order.amount,
transaction_id:req.body.order.transaction_id
});
});
User.findByIdAndUpdate({_id:req.profile._id},
{$push:{purchases:purchases}},
{new:true},
(err,purchases)=>{
if(err){
error:"Unable to save in user purchase list"
});
}
next();
}
);
}
const {check,validationResult}=require("express-validator")
const User = require("../models/user");
const jwt=require("jsonwebtoken")
const expressJwt=require("express-jwt")
exports.signup = (req, res) => {

const errors=validationResult(req) //checking for validation in
request
Page 72
if(!errors.isEmpty()){
//error:errors.array()[0].location,
error:errors.array()[0].msg,
//error:errors.array()[0].param
})
}
const user = new User(req.body);
user.save((err, user) => {
if (err) {
err: "NOT able to save user in DB"
});
}
res.json({
name: user.name,
email: user.email,
id: user._id
});
});
};
exports.signin = (req, res) => {

const errors = validationResult(req);
const { email, password } = req.body;
if (!errors.isEmpty()) {
error: errors.array()[0].msg
});
}
User.findOne({ email }, (err, user) => {
if (err) {
error: "USER email does not exists"
Page 73
});
}
if(!user){
error: "USER email not registered"
})
}
if (!user.autheticate(password)) {
error: "Email and password do not match"
});
}
//create token
const token = jwt.sign({ _id: user._id },
process.env.SECRET);
//put token in cookie
res.cookie("token", token, { expire: new Date() + 9999 });
//send response to front end

const { _id, name, email, role } = user;
return res.json({ token, user: { _id, name, email, role } });
});
};
exports.signout = (req, res) => {

res.clearCookie("token")
res.json({
message: "User signout"
});
};
exports.isSignedIn=expressJwt({
secret:process.env.SECRET,
userProperty:"auth"
Page 74
})
//custom middleware
exports.isAuthenticated=(req,res,next)=>{
let checker=req.profile && req.auth && req.profile._id ==
req.auth._id
if(!checker)
{
error:"ACCESS DENIED"
})
}
next()
}
exports.isAdmin=(req,res,next)=>{
if(req.profile.role===0)
{
error:"You are not admin ,ACCESS DENIED"
})
}
next()
}
Page 75
CHAPTER 4
CONCLUSION
The project entitled Online shopping system was completed

successfully.
The system has been developed with much care and free of errors and at
the same time it is efficient and less time consuming. The purpose of this
project was to develop a web application for purchasing items.
This project helped us in gaining valuable information and practical

knowledge on several topics like designing web pages using reactjs
usage of responsive templates, designing of android applications, and
management of database using Mongodbms . The entire system is
secured. Also the project helped us understanding about the
development phases of a project and software development life cycle.
This project has given us great satisfaction in having designed an

application which can be implemented to any nearby shops or branded
shops selling various kinds of products by simple modifications.
There is a scope for further development in our project to a great extend.

A number of features can be added to this system in future like providing
Page 88
moderator more control over products so that each moderator can

maintain their own products. Another feature we wished to implement was
providing classes for customers so that different offers can be given to
each class. System may keep track of history of purchases of each
customer and provide suggestions based on their history. These features
could have implemented unless the time did not limited us.
Page 89
REFERENCES
1]. React Quickly – basics to mastering, a little note.
2]. Mastering React – Advanced theory and explanation.
3] The road to React – Up-to-date and Sequential.
4]. "MongoDB: The Definitive Guide" by Kristina Chodorow.
5] "MongoDB Applied Design Patterns" by Rick Copeland
Page 90

PPPPPPP

Uploaded by

Copyright:

Available Formats

PPPPPPP

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PPPPPPP

Uploaded by

Copyright:

Available Formats

MAHARASHTRA STATE BOARD OF TECHNICAL

The Shetkari Shikshan Mandal’s

PROGRAM: COMPUTER PROGRAM CODE: CO6I

BOARD OF TECHNICAL EDUCATION

Project Guide Head Of Dept Principal

3.1 INPUT AND OUTPUT DESIGN 24

3.1.1 INPUT DESIGN 24

3.1.2 OUTPUT DESIGN 24

3.3 SYSTEM TOOLS 25

3.3.1 FRONT END 26

3.3.2 BACK END 27

3.5 E-R DIAGRAMS 30

3.6 DATA FLOW DIAGRAMS (DFD) 32

3.7 SCREEN SHOTS

3.8 SAMPLE CODE 39

This project is a web based shopping system for an existing shop.

This project is an attempt to provide the advantages of online shopping to

1.2 MANAGE MODERATORS 6

1.3 MANAGE PRODUCTS 8

1.4 MANAGE USERS 9

1.5 MANAGE ORDERS 10

1.5 MODERATOR MODULE 11

1.7 USER MODULE 12

E-R DIAGRAMS & DFD

3.6 USER DETAILS 30

3.7 PRODUCT DETAILS 31

3.8 PRODUCT ORDERS 31

3.9 COMPLETE DIAGRAM 32

3.10 LOGIN DFD 35

3.11 REGISTRATION DFD 36

3.12 ADMIN DFD 37

3.13 MODERATOR DFD 38

3.1 LOGIN TABLE 28

3.2 USER DETAILS 28

3.3 PRODUCT DETAILS 29

3.4 PRODUCT ORDERS 29

I take this occasion to thank God, almighty for blessing us with

his grace and taking our endeavor to a successful culmination. I extend

my sincere and heartfelt thanks to our esteemed guide, Prof. Sahajrao

Online shopping is the process whereby consumers directly buy cloths or

1.1 PROJECT OBJECTIVE:

The objective of the project is to make an application in web based

1.2 PROJECT OVER VIEW:

The central concept of the application is to allow the customer to shop

1.3 PROJECT SCOPE:

This system can be implemented to any shop in the locality or to

1.4 STUDY OF THE SYSTEM

The administrator is the super user of this application. Only admin

This module is divided into different sub-modules.

Fig 1.1: Admin module

Fig 1.2: Manage Moderator

Only admin is having the privilege to add a moderator. A moderator can

Admin can restrict a moderator from managing the orders by blocking

Admin has privilege to delete a moderator who was added.

All existing moderators can be viewed by the administrator as a list. If

Fig 1.3: Manage Products

Fig 1.4: Manage User

Admin has privileges to add a user directly by providing the details.

➢ Delete &Block Users