1
ONLINE SHOPPING
PAGE
DEPARTMENT OF COMPUTER
ENGINEERING
B. S. Patel Polytechnic, Ganpat University,
Mehsana
CERTIFIC
ATE
This is to certify that Mr. Kalp Patel, Mr. Viral Kapadia and Mr. Ayush Patel from
B. S. Patel Polytechnic having Enrollment No. 19291341094, 19171341036
19291341094 have completed project documentation and partial development on the
project definition of semester during the academic year 2022 having title Online
Shopping Page in a group consisting of 3 persons.
1|Page
1
ONLINE SHOPPING
PAGE
Online Shopping System
Index
[Link]. Topic Name Page No.
1 Problem Identification,
3-10
Definition &
Modification
1.1 Abstract 4
1.2 Existing System 6
1.3 Project Profile 7
1.4 Technology Overview 8
2 System Requirement Speciation 11-12
2.1 Requirement Gathering & Analysis 11
2.2 Software Requirement Specification 11
2.3 Feasibly Study 12
2.4 Software & Hardware Specification 11
3 Problem Solution Outline 13-15
3.1 Modules Description 13
3.2 Entity Relationship Diagram 13
3.3 Flow Chart 14
3.5 Data Floe Diagram 15
2|Page
1
ONLINE SHOPPING
PAGE
3|Page
1
ONLINE SHOPPING
PAGE
CHAPTER:1
PROBLEM IDENTIFICATION,
DEFINITION AND
MODIFICATION
4|Page
1
ONLINE SHOPPING
PAGE
5|Page
1
ONLINE SHOPPING
PAGE
Definition: -
Online shopping is the activity or action of buying products or
services over the Internet. It means going online, landing on a
seller’s page, selecting something, and arranging for its delivery.
The buyer either pays for the good or service online with a credit
or debit card or upon delivery.
1.1 Abstract: -
1. Convenience of online shopping
Customers can purchase items from the comfort of their own homes or work
place. Shopping is made easier and convenient for the customer through internet. It
is also easy to cancel the transactions. The following table depicts the factors
which motivate the online shoppers to buy products online.
Top 7 reasons given by shoppers in buying through internet
1. You get an electronic record of the receipt of your purchase,
which makes record-keeping much easier.
2. Saves time and efforts.
3. Convenience of shopping at home.
4. Wide variety / range of products are available.
5. Good discounts / lower prices.
6. Get detailed information of the product.
7. We can compare various models / brands.
2. No pressure shopping
Generally, in physical stores, the sales representatives try to influence the buyers to
buy the product. There can be some kind of pressure, whereas the customers are not
pressurized in anyway in online stores.
3. Online shopping saves time
Customers do not have to stand in queues in cash counters to pay for the
products that have been purchased by them. They can shop from their home or
work place and do not have to spend time traveling. The customers can also look
for the products that are required by them by entering the key words or using
search engines.
4. Comparisons
Companies display the whole range of products offered by them to attract
customers with different tastes and needs. This enables the buyers to choose from a
variety of models after comparing the finish, features and price of the products on
display, Sometimes, price comparisons are also available online.
5. Availability of online shop
The mall is open on 365 x 24 x 7. So, time does not act as a barrier,
wherever the vendor and buyers are.
6|Page
1
ONLINE SHOPPING
PAGE
6. Online tracking
Online consumers can track the order status and delivery status tracking of
shipping is also available.
7. Online shopping saves money
To attract customers to shop online, e-tailers and marketers offer discounts
to the customers. Due to elimination of maintenance, real-estate cost, the retailers
are able to sell the products with attractive discounts through online. Sometimes,
large online shopping sites offer store comparison
1.2 EXISTING SYSTEM
Existing system is people normally to go shops and malls to buy anything they need or
want, but now during this pandemic we can't go out to buy thing which are needed. But in
case you have go out to buy anything there is a chance you may or may not find the
anything you want to buy from the store or it is also possible you less option in that thing
to from. So, you can find these types of problem while buying thing from local stores. If
any person who can't go to the store because of any reason have face problem and it is
difficult.
7|Page
1
ONLINE SHOPPING
PAGE
1.3 PROJECT PROFILE
Collage Name: B.S. Patel Polytechnic
Semester: 6th sem.
Department: Computer Engineering
Technology: Java script, Tailwind CSS.
Group Number: AB-17
Group
Members
Group Member: 3
Mr. Patel Kalp
Name & Enrollment:
19291341094
(BSPP)
Mr. Viral Kapadia
19171341036
(IOT)
Mr. Ayush Patel
19291341094(BSP
P)
Guide Name
Internal Guide: Pratik Mevada
8|Page
1
ONLINE SHOPPING
PAGE
1.4 Technology Overview: -
Introduction to Tailwind CSS: -
Tailwind CSS can be used to make websites in the fastest and the easiest way.
Tailwind CSS is basically a utility-first CSS framework for rapidly building custom
user interfaces. It is a highly customizable, low-level CSS framework that gives you all
of the building blocks you need to build bespoke designs without any annoying
opinionated styles you have to fight to override.
The beauty of this thing called tailwind is it doesn’t impose design specification or how
your site should look like, you simply bring tiny components together to construct a
user interface that is unique. What Tailwind simply does is take a ‘raw’ CSS file,
processes this CSS file over a configuration file, and produces an output.
Why Tailwind CSS?
Faster UI building process.
It is a utility-first CSS framework which means we can use utility classes to build custom
designs without writing CSS as in traditional approach.
Advantages of Tailwind CSS: -
No more silly names for CSS classes and Id’s.
Minimum lines of Code in CSS file.
We can customize the designs to make the components.
Makes the website responsive.
Makes the changes in the desired manner.
Introduction to JavaScript: -
JavaScript is a dynamic computer programming language. It is lightweight and most
commonly used as a part of web pages, whose implementations allow client-side script to
interact with the user and make dynamic pages. It is an interpreted programming
language with object-oriented capabilities
JavaScript was first known as Live Script, but Netscape changed its name to JavaScript,
possibly because of the excitement being generated by Java. JavaScript made its first
appearance in Netscape 2.0 in 1995 with the name Live Script. The general-purpose
core of the language has been embedded in Netscape, Internet Explorer, and other web
browsers.
The ECMA-262 Specification defined a standard version of the core JavaScript language.
JavaScript is a lightweight, interpreted programming language.
Designed for creating network-centric applications.
Complementary to and integrated with Java.
Complementary to and integrated with HTML.
Open and cross-platform.
9|Page
1
ONLINE SHOPPING
PAGE
Advantages of JavaScript
Less server interaction: You can validate user input before sending the page off to
the server. This saves server traffic, which means less load on your server.
Immediate feedback to the visitors: They don't have to wait for a page reload to
see if they have forgotten to enter something.
Increased interactivity: You can create interfaces that react when the user hovers
over them with a mouse or activates them via the keyboard.
Richer interfaces: You can use JavaScript to include such items as drag-and
drop components and sliders to give a Rich Interface to your site visitors.
Introduction to Firebase: -
Firebase evolved from Envolve, a prior startup founded by James Tamplin and Andrew
Lee in 2011. Envolve provided developers an API that enables the integration of online
chat functionality into their websites. After releasing the chat service, Tamplin and Lee
found that it was being used to pass application data that were not chat messages.
Developers were using Envolve to sync application data such as game state in real time
across their users. Tamplin and Lee decided to separate the chat system and the real-
time architecture that powered it. They founded Firebase as a separate company in 2011
and it launched to the public in April 2012.
Firebase's first product was the Firebase Realtime Database, an API that synchronizes
application data across iOS, Android, and Web devices, and stores it on Firebase's
cloud. The product assists software developers in building real-time, collaborative
applications.
In 2014, Firebase launched two products. Firebase Hosting and Firebase
Authentication. This positioned the company as a mobile backend as a
service.
In October 2014, Firebase was acquired by Google. A year later, in October 2015,
Google acquired Divshot, an HTML5 web-hosting platform, to merge it with the
Firebase team.
Advantages of Firebase
Database options. Firestore and Realtime are database options one can choose to
build their product.
Reliable & Extensive Databases.
Fast & safe hosting
Provides a free start to newbies
Google analytics
Free use of Firebase Dynamic Link
10 | P a g e
1
ONLINE SHOPPING
PAGE
11 | P a g e
1
ONLINE SHOPPING
PAGE
CHAPTER:2
System Requirement
Specification
12 | P a g e
1
ONLINE SHOPPING
PAGE
2.1 Requirement Gathering and Analysis
-Requirement gathering is usually the first part of any Software.
-Requirement gathering stage starts when you are thinking about developing software.
-The main aim of this stage is to gather a requirement about what he/she wants from the
software.
Adding a new user
Function: Sign up with a google account as a new user.
Requirement: To sign up user needs to have a google account already setup with a
valid id user just have to insert email id and correct password of that account then
the user can use the website to shop whatever they want to buy.
❖ Use the website for shopping:
Function: shop anything from the website.
Requirement: When the user once login the website he/she can see so many options
to buy from and they can see photos and specification of the product given in the
webpage and also order that or any product for themselves.
2.2Software Requirement Speciation
❖ Objective
To introduce the concepts of user and system requirements, to describe
functional and nonfunctional requirements and to explain how software requirements may
be organized in a requirements document. A software requirement is a condition or
capability needed byauser to solve a problem or achieve an objective and that must be met
or possessed by a system or system component to satisfy a contract, standard,
specification, or other formally imposed document. Two classes of requirements:
Functional requirements - What the program does Non-functional requirements--
Attributes about the program.
❖ Overview
The SRS document explains the purpose and features of the software, the
interfaces of the software, what the software will do, the constraints under which it must
operates and how the software will react to the external stimuli. This SRS document is
intended for both the end-users and to the developers of the software. The SRS also
functions as a blueprint for completing a project with as little cost growth as possible. The
SRS is often referred to as the "parent" document because all subsequent project
management documents, such as design specifications, statements of work, software
architecture specifications, testing and validation plans, and documentation plans, are
related to it. The SR Subapically an organization’s understanding (inwriting)of a
customer or potential client's system requirements and dependencies at a particular point
in time (usually) prior to any actual design or development work. It’s two-way insurance
policy that assures that.
13 | P a g e
1
ONLINE SHOPPING
PAGE
2.3Feasibility Study
Online Shopping Page works close with its suppliers in order to get the
best quality products in the market. Utmost convenience: Online Shopping
Page strives to provide the best experience possible for its costumers how
Online Shopping Page Go works Online Shopping Page go relies on their
“Just walk out technology”.
2.4 Software & Hardware Requirement
❖ Software requirements: -
Web server Fire base
Frame work React java, Visual Studio code
Web browser Mozilla Firefox, Chrome, Opera
Operating system Windows, Mac os
❖ Hardware requirements: -
Processor Dual quad core processor (min req.)
Operating System Windows, MAC OS, Linux
Ram 4gb.
Internet connection
14 | P a g e
1
ONLINE SHOPPING
PAGE
CHAPTER:3
Problem Solution Outline
15 | P a g e
1
ONLINE SHOPPING
PAGE
3.1 Modules Description
❖ Administrator Module: -
Seller details: - In this part of the module the seller has to gives their
own detailed according to the rules in the seller detail section seller must have to
give the location or address of the place or the shop from where he/she is selling the
product from, and also their contact information as well as their email id.
Product details: - In this section seller have to give the details and
specification of the product the selling to the buyers and they must upload some
photos of the specific product so that the buyer can understand how the product
looks like and is it good for them to buy.
Report details: - Report section is generally used by user to report any
seller or product if user get scammed or something went wrong with the product the
user can report to the seller and also Report the seller to the customer care of the
shopping website.
User details: - User can also do so many things instead of just surfing
around on the website they can buy Anything they like and also give their opinion
of any product they bought, they can give Good or bad opinion according to them
and sent it so that the seller can understand the Product he/she is selling is good or
bad or the user.
3.2 Entity Relationship Diagram
16 | P a g e
1
ONLINE SHOPPING
PAGE
3.3 Flow Chart
17 | P a g e
1
ONLINE SHOPPING
PAGE
3.4 Data Floe Diagram
DFD Level 0: -
18 | P a g e
1
ONLINE SHOPPING
PAGE
19 | P a g e
1
ONLINE SHOPPING
PAGE
Account Creation Page.
1|Page
1
ONLINE SHOPPING
PAGE
Account Creation Successfully.
2|Page
1
ONLINE SHOPPING
PAGE
Log-in Page.
3|Page
1
ONLINE SHOPPING
PAGE
Main web Page.
4|Page
1
ONLINE SHOPPING
PAGE
Shopping Cart Page.
5|Page
1
ONLINE SHOPPING
PAGE
Delivery Address Page.
6|Page
1
ONLINE SHOPPING
PAGE
Payment & Review order Page.
7|Page
1
ONLINE SHOPPING
PAGE
Order Conformation Page.
8|Page
