A

Project I Report
On

“ONLINE GROSERY STORE”

PYTHON APPLICATION

Submitted for Partial Fulfillment of the Award of

Bachelor of Technology (B.Tech) in CSE
Kurukshetra University Kurukshetra

Submitted By:
Rajat Malik (1220272)

Submitted to:
Er. Mamta Gautam
(A.P. CSE)

Department of Computer Science and

Engineering

Seth Jai Parkash Mukand Lal Institute of Engineering & Technology

Affiliated to Kurukshetra University Kurukshetra
 Declaration
I/We hereby certify that the work which is being presented in the Project I/II/III Report entitled,
“Online Grocery Shop” by me/us, (Rajat Malik) (Roll No/s. 1220272) in partial fulfillment
of the requirements for the award of degree of Bachelor of Technology in Computer Science
Engineering submitted in the Department of Computer Science and Engineering at JMIT
Radaur (Affiliated to Kurukshetra University Kurukshetra, Haryana (India)) is an
authentic record of my/our own work carried out under the supervision of Er. Mamta
Gautam. The matter presented in the report has not been submitted in any other
University/Institute for the award of any degree.

(Rajat Malik)

This is to certify that the above statement made by the candidate is correct to the best of my/our
knowledge.

Er. Mamta Gautam

Asstt. Professor Department

of Computer Science
and Engg. JMIT Radaur

Page 4
 Acknowledgement

The writing of this project report has been assisted by the generous help of many people. I/we feel
that I/we was/were very fortunate to receive assistance from them. I/we wish to express
my/our sincere appreciation to them.

First and foremost, I/we am/are indebted to my/our principal supervisor, Er. Mamta Gautam
(Prof./Assoc./Asstt. Professor, Department of Computer Science and Engineering) of JMIT
Radaur, who has been very supportive at every stage of my/our project completion. I/we wish
to express my/our utmost gratitude to him/her for the invaluable advice and patience in
reading, correcting and commenting on the drafts of this report and, more importantly, for his
generosity which I/we has/have received throughout my/our project completion.

I/we would like to acknowledge and extended my/our heartfelt gratitude to Co-guide/
Supportive Person/s
Dr. Gaurav Sharma who helped and encouraged
me/us throughout this journey.

I/we wish to express my/our thanks to all staff members of JMIT Radaur, who also helped me/us in
conducting this study.

Finally, I/we am/are particularly indebted to my/our dearest parents/guardians as without

their generous assistance and love; this project could never have been completed.

Rajat Malik
(1220272)

Page 4
 Table of Contents
Page No.

Chapter 1. Introduction

1) Introduction to the System 4

2) Problem Definition 4
3) Aim 4
4) Objective 4
5) Goal 5
6) Need of System 5

Chapter 2. Hardware and Software requirement

1) Introduction 7
2) System environment 7
3) Software requirement 8
4) Hardware requirements 8

Chapter 3. System Analysis

1) Purpose 9
2) Project Scope 9
3) Existing System 9
4) Proposed System 9
5) System Description 10

Page 4
 Chapter 4.Implementation issues

1) Python 11
2) HTML 13
3) Cascading style sheet(CSS) 16
4) Sqlite

Chapter 5. System Design

1) Introduction 21
2) Conceptual Design 22
3) ER-Diagram 23
4) Logical Design 23
5) Physical Design 24
6) Data Flow Diagram of “Online Grocery Shop”
24

Chapter 6.User Screens

25-32

Chapter 7.Coding
33-113

Chapter 8. Conclusion
7) Features of “Online Grocery Shop” 114
8) Benefits Accrued from “Online Grocery Shop ” 114
9) Limitations of “Online Grocery Shop” 115

Page 4
 Bibliography

CHAPTER # 1

Introduction
Contents:

 Introduction
 Problem Definition
 Aim
 Objective
 Goal
 Need of System

Page 4
Introduction to the System:

The “Online Grocery Shop Project” has been developed to override the problems
prevailing in the practicing manual system. This software is supported to eliminate
and in some cases reduce the hardships faced by this existing system. Moreover this
system is designed for the particular need of the company to carry out operations in a
smooth and effective manner.
This application is reduced as much as possible to avoid errors while entering the
data. It also provides error message while entering invalid data. No formal knowledge
is needed for the user to use this system. Thus by this all it proves it is user-friendly .
Online Grocery Shop Management System, as described above, can lead to error free ,
secure , reliable and fast management system. It can assist the user to concentrate on
their other activities rather to concentrate on the record keeping. Thus it will help
organization in better utilization of resources.

Every food organization, whether big or small, has challenges to overcome and
managing the information of groceries, customer, groceries stock, sells.

Problem Definition:

Managing your online grocery shopping system may seem tricky, but this is part of
Customer service system (application support direct contact with customer)
.

Page 4
 Aim:
“To Manage Online Grocery Shopping”.

Objective:

This software helps customer to find different products according category, price, and
subcategory. It is designed such a way that one can view all the updates of the products from
any place through online. The software will help in easy maintaining and updating products
in the website for the administrator. Also quick and easy comparison of different products for
the customers.

Goal:

The project is basically targeted at those people who would like online shopping and have an
Internet access.
Finally buyers curious in comparing the prices for various products for according our
budget.
To make a database that is consistent, reliable and secure.
To provide correct, complete, ongoing information.
To develop a well-organized information storage system.
To make good documentation so as to facilitate possible future enhancements.

Need of the System:

There is always a need of a system that will perform to purchasing grocery products online
according to customer requirement.
This system will reduce the manual operation required to maintain all the records of booking
information. And also generates the various reports for analysis. Main concept of the project

Page 4
is to enter transaction reports and to maintain customer records. Hence this software can be
used in any grocery shop to maintain their record easily.

CHAPTER #2
Hardware and
Software
Requirements

Contents:

 Introduction
 System environment
 Software requirement
 Hardware requirements

Page 4
Introduction:

In this chapter we mentioned the software and hardware requirements, which

are necessary for successfully running this system. The major element in
building systems is selecting compatible hardware and software. The system
analyst has to determine what software package is best for the “Online
Grocery Shop System” and, where software is not an issue, the kind of
hardware and peripherals needed for the final conversion.

System Environment:

After analysis, some resources are required to convert the abstract system into
the real one. All the resources, which accomplish a robust
The hardware and software selection begins with requirement analysis,
followed by a request for proposal and vendor evaluation.

Software and real system are identified. According to the provided functional
specification all the technologies and its capacities are identified. Basic
functions and procedures and methodologies are prepared to implement. Some
of the Basic requirements such as hardware and software are described as
follows: -

Page 4
 Hardware and Software Specification

Software Requirements:
 Technology: Python Django
 IDE : Pycharm/Atom
 Client Side Technologies: HTML, CSS, JavaScript , Bootstrap
 Server Side Technologies: Python
 Data Base Server: Sqlite
 Operating System: Microsoft Windows/Linux

Hardware Requirements:

 Processor: Pentium-III (or) Higher

 Ram: 64MB (or) Higher
 Hard disk: 80GB (or) Higher

Page 4
 CHAPTER # 3
System Analysis

Contents:

 Purpose
 Project Scope
 Existing System
 Proposed System
 System Overview

Page 4
Purpose:

To manage the online shopping of grocery products. It helps to customer to search and buy
medicines from anywhere. Also make payment on delivery for it. It helps to people to book
desired products at their prefer time.

Project Scope:

The project has a wide scope, as it is not intended to a particular organization. This
project is going to develop generic software, which can be applied by any businesses
organization. More over it provides facility to its customer. Also the software is going
to provide a huge amount of summary data.

Proposed System:

The online grocery shop system is available in the market that can serve customers to
book/purchase grocery products online.

Page 4
System Overview:
The key features required in the system are as follows:

 Login: This module has a drop down list box from where we have to select
ADMIN or USER. The ADMIN has all the rights in the software including updating
the status of his site. The other fields in login are username and password. If the
username and password are correct then it is directed to next page.

 New user: This module is for the users who do not have their account. Here user is al-
lowed to create an account to login. The account creation is done by filling the regis-
tration form with user details such as name, phone, email etc.

 Product: This module has information regarding the medicines such as its name, cat-
egory, subcategory , image , price information, its features etc.The ADMIN has the
authority to Add, Delete, Update etc. The USER can only view the products available
in the stock etc.

 Search: This module helps the customer to ease his search based on his budget or in-
terest. The search can be done on different categories and subcategories like category ,
subcategory , name, price etc

Page 4
 CHAPTER # 4
Implementation issues

Python

Python is a widely used general-purpose, high level programming language. It was initially
designed by Guido van Rossum in 1991 and developed by Python Software Foundation. It
was mainly developed for emphasis on code readability, and its syntax allows programmers
to express concepts in fewer lines of code.
Python is a programming language that lets you work quickly and integrate systems more
efficiently.
Python is dynamically typed and garbage-collected. It supports multiple programming
paradigms, including procedural, object-oriented, and functional programming. Python is
often described as a "batteries included" language due to its comprehensive standard library.

Page 4
HTML

HTML (Hypertext Markup Language) is the set of markup symbols or codes inserted in a file
intended for display on a World Wide Web browser page. The markup tells the Web browser
how to display a Web page's words and images for the user. Each individual markup code is
referred to as an element (but many people also refer to it as a tag). Some elements come in
pairs that indicate when some display effect is to begin and when it is to end.

Page 4
CASCADING STYLE SHEET (CSS)

Cascading Style Sheets (CSS) are a collection of rules we use to define and modify web
pages. CSS are similar to styles in Word. CSS allow Web designers to have much more
control over their pages look and layout. For instance, you could create a style that defines
the body text to be Verdana, 10 point. Later on, you may easily change the body text to Times
New Roman, 12 point by just changing the rule in the CSS. Instead of having to change the
font on each page of your website, all you need to do is redefine the style on the style sheet,
and it will instantly change on all of the pages that the style sheet has been applied to. With
HTML styles, the font change would be applied to each instance of that font and have to be
changed in each spot.

CSS can control the placement of text and objects on your pages as well as the look of those
objects.

HTML information creates the objects (or gives objects meaning), but styles describe how the
objects should appear. The HTML gives your page structure, while the CSS creates the
“presentation”. An external CSS is really just a text file with a .css extension. These files can
be created with Dreamweaver, a CSS editor, or even Notepad.

The best practice is to design your web page on paper first so you know where you will want
to use styles on your page. Then you can create the styles and apply them to your page.

Page 4
Javascript

JavaScript is a programming languagecommonly used in web development. It was originally

developed by Netscape as a means to add dynamic and interactive elements to websites.
While JavaScript is influenced byJava, the syntax is more similar to C and is based on EC-
MAScript, a scripting language developed by Sun Microsystems.
JavaScript is a client-side scripting language, which means the source code is processed by
the client's web browser rather than on the web server. This means JavaScript functions can
run after a webpage has loaded without COMMUNICATING with the server. For example, a
JavaScript function may check a web form before it is submitted to make sure all the re-
quired fields have been filled out. The JavaScript code can produce an error message before
any information is actually transmitted to the server.
Like server-side scripting languages, such as PHP and ASP, JavaScript code can be inserted
anywhere within the HTML of a webpage. However, only the output of server-side code is
displayed in the HTML, while JavaScript code remains fully visible in the source of the web-
page. It can also be referenced in a separate .JS file, which may also be viewed in a browser.

Page 4
Django

Django is a web application framework written in Python programming language. It is based

on MVT (Model View Template) design pattern. The Django is very demanding due to its
rapid development feature. It takes less time to build application after collecting client re-
quirement.

This framework uses a famous tag line:The web framework for perfectionists with deadlines.

Page 4
 CHAPTER # 5
System Design

Contents:
 Use case diagram
 Class Diagram
 Sequence Diagram
 Data flow diagram

Page 4
Use Case Diagram:

 Use case diagram consists of use cases and actors and shows the interaction
between them. The key points are:

 The main purpose is to show the interaction between the use cases and the
actor.

 To represent the system requirement from user’s perspective.

 The use cases are the functions that are to be performed in the module.

Manage
Products

Manage
Feedback


Manage
Booking SYSTEM
ADMIN

Manage Users

Page 4
 Use Case Diagram between ADMIN and SYSTEM:

Booking

Cancel

Search

SYSTEM
USER Feedback
Fig.5.2

Use Case Diagram between USER and SYSTEM:

Page 4
Sequence Diagram For Administrator:-

Login Application Database

Login
:Request

:Validate()
:executeQuery()

Administrator Response
Show Result

Success:hide()
Failed:show()

Fig.5.4

Page 4
 Sequence Diagram For User:-

Login Application Database

Login
:Request

:Validate()
User
:executeQuery()

Response
Show Result

Success:hide()
Failed:show()

Fig.5.5

Page 4
Data Flow Diagram

A Data Flow Diagram (DFD) is a graphical representation of the "flow" of data through an
Information System. A data flow diagram can also be used for the visualization of Data
Processing. It is common practice for a designer to draw a context-level DFD first which
shows the interaction between the system and outside entities. This context-level DFD is then
"exploded" to show more detail of the system being modeled.

A DFD represents flow of data through a system. Data flow diagrams are commonly used
during problem analysis. It views a system as a function that transforms the input into desired
output. A DFD shows movement of data through the different transformations or processes in
the system.

Dataflow diagrams can be used to provide the end user with a physical idea of where the data
they input ultimately has an effect upon the structure of the whole system from order to dis-
patch to restock how any system is developed can be determined through a dataflow diagram.
The appropriate register saved in database and maintained by appropriate authorities.

Data Flow Diagram Notation

Function

File/Database

Input/output

Flow

Page 4
 Data Flow Diagram of the Shopping Site

Level 0

Input Output
Admin/User
Level1 System Database

Enter the site

Authenticate
User

Check Display errors

whether
Admin or
customer
Customer Admin

View product Buy product Check Verify

products customer

Products Customer details

Page 4
Entity Relationship Diagrams (ER-Diagrams):

An entity-relationship (ER) diagram is a specialized graphic that illustrates the

interrelationships between entities in a database. ER diagrams often use symbols to represent
three different types of information. Boxes are commonly used to represent entities.
Diamonds are normally used to represent relationships and ovals are used to represent
attributes

An entity-relationship model (ERM) in software engineering is an abstract and

conceptual representation of data. Entity-relationship modeling is a relational schema
database modeling method, used to produce a type of conceptual schema or semantic data
model of a system, often a relational database, and its requirements in a top-down fashion.

Symbols used in this E-R Diagram:

Entity: Entity is a “thing” in the real world with an independent existence. An entity may be
an object with a physical existence such as person, car or employee. Entity symbol is as
follows

Attribute: Attribute is a particular property that describes the entity. Attribute symbol is

Relationship: Relationship will be several implicit relationships among various entity types
whenever an attribute of one entity refers to another entity type some relationship exits.
Relationship symbol is:

Page 4
 Key attributes: An entity type usually has an attribute whose values are distinct for each
individual entity in the collection. Such an attribute is called key attribute. Key attribute
symbol is as follows

Page 4
 ProID LoginID
DOJ
ProNam
e
Passwor
d
Product Reque Member
ProCom st
p MNam
e
ProCat
Price
dob PhoneN
o
Place Order
User Name Passwor
d OrdNo

Check the
Login Login ID Order Detail
LoginID

Qty Proid

Req. New
Member

Name Addres
s
Registration
Passwor City
d
State
EMail

Phone Pin code

Country

Page 4
CHAPTER # 6
Output Screens

HOME PAGE

Page 4
USER LOGIN PAGE

Page 4
SIGNUP PAGE

Page 4
PRODUCT CATEGORIES PAGE

Page 4
VIEW CART PAGE

BOOKING PAGE

Page 4
Page 4
VIEW PRODUCTS PAGE

PAYMENT PAGE

Page 4
VIEW BOOKING PAGE (Customer)

Page 4
CHANGE PASSWORD PAGE

Page 4
SEND FEEDBACK PAGE

Page 4
VIEW PROFILE PAGE

Page 4
ADMIN HOME PAGE

Page 4
ADD NEW PRODUCT PAGE

Page 4
VIEW PRODUCTS PAGE

Page 4
VIEW CATEGORY PAGE

Page 4
Page 4
 VIEW BOOKING

VIEW USERS PAGE

Page 4
Page 4
 CHAPTER # 7
Coding

USER LOGIN PAGE CODING

{% extends 'navigation.html' %}
{% block body %}
{% load static %}

{% ifequal error "yes" %}

<script>
alert('logged in successfully');
window.location=('{% url 'home' %}');
</script>
{% endifequal %}
{% ifequal error "not" %}
<script>
alert('Username & Password are not Matching');
</script>
{% endifequal %}

<div class="container">
<h2 style="margin-top:20px" align="center">User Login Form</h2><hr>

<div class="container-fluid" style="width:70%;margin-top:10%">

<form method="post" action="">
{% csrf_token %}
<div class="form-group">

Page 4
 <label for="exampleInputEmail1">Username</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp" name="uname" placeholder="Enter Username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password" name="pwd">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button class="btn btn-primary"><a href="{% url 'signup' %}"
style="color:white">Signup</a></button>
</form>
</div>
</div>

{% endblock %}

Page 4
 SIGNUP PAGE CODING
{% extends 'navigation.html' %}
{% block body %}
{% load static %}
<div class="container">
<h2 style="margin-top:20px" align="center">Registration Form</h2><hr>

<div class="container-fluid" style="width:70%;margin-top:10%">

<form method="post" action="" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">First Name</label>
<input type="text" class="form-control" placeholder="Enter First Name"
name="fname" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Last Name</label>
<input type="text" class="form-control" name="lname" placeholder="Enter Last
Name" id="inputPassword4">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">User Name</label>
<input type="text" class="form-control" name="uname" placeholder="Enter User
Name" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" name="pwd"
id="inputPassword4">
</div>
</div>
Page 4
 <div class="form-row">
<div class="form-group col-md-6">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp" name="email" placeholder="Enter Email">
</div>

<div class="form-group col-md-6">

<label for="exampleInputPassword1">Contact</label>
<input type="text" class="form-control" id="exampleInputPassword1"
placeholder="Enter Contact Detail" name="contact">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="exampleInputPassword1">City</label>
<input type="text" class="form-control" id="exampleInputPassword1"
placeholder="Enter City" name="city">
</div>

<div class="form-group col-md-6">

<label for="exampleInputPassword1">Date of Birth</label>
<input type="date" class="form-control" id="exampleInputPassword1"
name="date">
</div>
</div>
<div class="form-row">

<div class="form-group col-md-6">

<label for="exampleInputPassword1">Full Address</label>
<input type="text" class="form-control" id="exampleInputPassword1"
placeholder="Enter Address Detail" name="add">
</div>

Page 4
<div class="form-group col-md-6">
<label for="exampleInputPassword1">Image</label>
<input type="file" class="form-control" id="exampleInputPassword1" name="img"
value="choose file">
</div></div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>
</div>
</div>

{% if error %}
<script>
alert('Regitered Successfully');
window.location = "{% url 'login' %}";
</script>
{% endif %}

{% endblock %}

Page 4
 VIEW CART PAGE CODING

{% extends 'navigation.html' %}
{% block body %}

<center><h2 style="color:red;margin-top:2%">View Cart</h2></center><hr>

{% if not cart %}
<h1 align="center" style="color:blue">{{message}}</h1>
{% else %}
<center><div class="container" style="border:1px solid white">
<div class="row">
<div class="col-md-4" style="height:100px;">
<center><a href="{% url 'view_product' 0 %}" style="margin-
top:1%;width:100%" class="btn btn-lg btn-info text-light text-capitalize"><ion-icon
style="margin-right:8px" name="pricetags"></ion-icon>Continue
Shopping</a></center>
</div>
<div class="col-md-4" style="height:100px;">
<center><a href="{% url 'booking' book %}" style="margin-
top:1%;width:50%" class="btn btn-lg btn-info text-light text-capitalize"><ion-icon
style="margin-right:8px" name="cash"></ion-icon>Buy Now</a></center>
</div>
<div class="col-md-4" style="height:100px;">
<center><a style="margin-top:1%;width:100%;border:1px solid black"
class="btn btn-default btn-lg text-dark text-capitalize">Total : {{total}}</a></center>
</div>
</div>
</div>
</center>
{% for i in cart %}
<center>
<style>
.container{
Page 4
 border:1px solid black;
border-radius:6px;
margin-bottom:5%;
}.container1 ,.contain{
border:1px solid black;
border-radius:6px;
width:70%;
border:1px solid black;

}
</style>
<div class="container" style="margin-top:2%;height:150px;width:80%">
<div class="row" style="height:90%">
<div class="col-md-4" style="height:120px">
<img src="{{i.product.image.url}}" style="width:30%;height:100px;border:1px
solid darkgray;margin-top:5%">
</div>

<div class="col-md-4" style="height:100px">

<h5 style="margin-top:5%">{{i.product.name}}</h5><hr>
<h6>Price : Rs.{{i.product.price}}</h6>
<p>{{i.product.desc}}</p>
</div>
<div class="col-md-4" style="height:100px;">
<center><a href="{% url 'remove_cart' i.id %}" style="margin-top:15%"
class="btn btn-sm btn-danger text-light text-capitalize"><ion-icon
name="trash"></ion-icon>Remove</a></center>
</div>
</div>
</div>
</center>
{% endfor %}
|<div class="container" style="border:1px solid white">
<div class="row">
Page 4
 <div class="col-md-4" style="height:100px;">
<center><a href="{% url 'view_product' 0 %}" style="margin-
top:1%;width:100%" class="btn btn-lg btn-info text-light text-capitalize"><ion-icon
style="margin-right:8px" name="pricetags"></ion-icon>Continue
Shopping</a></center>
</div>
<div class="col-md-4" style="height:100px;">
<center><a href="{% url 'booking' book %}" style="margin-
top:1%;width:50%" class="btn btn-lg btn-info text-light text-capitalize"><ion-icon
style="margin-right:8px" name="cash"></ion-icon>Buy Now</a></center>
</div>
<div class="col-md-4" style="height:100px;">
<center><a style="margin-top:1%;width:100%;border:1px solid black"
class="btn btn-default btn-lg text-dark text-capitalize">Total : {{total}}</a></center>
</div>
</div>
{% endif %}
</div>

{% endblock %}

Page 4
 ADMIN HOME PAGE CODING

{% extends 'navigation.html' %}
{% load static %}
{% block body %}

<style>
.glow {
font-size: 80px;
color: #fff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px
#e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}

to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0
60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}

/* Rounded border */
hr.rounded {
border-top: 8px solid lightblue;
border-radius: 5px;
}
Page 4
</style>
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-
lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
crossorigin="anonymous">
<br>
<center>
<div class="container" style="margin-top:10%;height:150px;width:80%">
<div class="row" style="height:90%">
<div class="col-md-4">
<a href="{% url 'view_user' %}"><h1>Total Customer</h1>
<h2 style="color:blue">{{total_customer}}</h2>
<hr class="rounded"></a>
</div>

<div class="col-md-4">
<a href="{% url 'admin_viewBooking' %}"><h1>Total Booking</h1>
<h2 style="color:blue">{{total_book}}</h2>
<hr class="rounded"></a>
</div>

<div class="col-md-4">
<a href="{% url 'admin_view_product' %}">
<h1>Total Product</h1>
<h2 style="color:blue">{{total_pro}}</h2>
<hr class="rounded"></a>
</div>
</div>
</div>
</center>

Page 4
 <footer class="site-footer">
<div class="container">

<div class="row pt-5 mt-5 text-center">

<div class="col-md-12">
<p style = "font-size : 30pt ; color : #FF0000 ; font-weight : bold">

Copyright &copy;<script>document.write(new Date().getFullYear());</script>

All Rights Reserved <span style = "color : brown">|</span> <span style = "color :
#006400">This website is made with <i class="fas fa-heart icon-heart text-warning"
aria-hidden="true"></i> by </span><a class= "glow" href="#" target="_blank"
>Pankaj Panjwani</a>

</p>
</div>

</div>
</div>
</footer>

{% endblock %}

Page 4
 VIEW BOOKING PAGE CODING
{% extends 'navigation.html' %}
{% block body %}

<center><h2 style="color:red;margin-top:2%">View Booking

Detail</h2></center><hr>

{% for i in product %}
{% if i.id in book %}
<center>
<style>
.container{
border:1px solid black;
border-radius:6px;
margin-bottom:5%;
}.container1 ,.contain{
border:1px solid black;
border-radius:6px;
width:70%;
border:1px solid black;

}
</style>
<div class="container" style="margin-top:2%;height:150px;width:80%">
<div class="row" style="height:90%">
<div class="col-md-4" style="height:120px">
<img src="{{i.image.url}}" style="width:30%;height:100px;border:1px solid
darkgray;margin-top:5%">
</div>

<div class="col-md-4" style="height:100px">

<h5 style="margin-top:5%">{{i.name}}</h5><hr>
<h6>Price : Rs.{{i.price}}</h6>
<p>{{i.desc}}</p>
Page 4
 </div>
<div class="col-md-4" style="height:100px;">
<h4 style="margin-top:15%;color:blue">Booked Successfully</h4>
</div>
</div>
</div> </center>
{% endif %}
{% endfor %}
<div class="container" style="border:1px solid white">
<div class="row">

<div class="col-md-6" style="height:100px;">

<center><a style="margin-top:1%;width:100%;border:1px solid black"
class="btn btn-default btn-lg text-dark text-capitalize">Total :
{{total.total}}</a></center>
</div></div>
<center><h2 style="color:red;margin-top:2%">Customer Detail</h2></center><hr>
<div class="row">
<div class="col-md-6" style="height:100px;"><hr>
<h4>Name : {{profile.user.first_name}} {{profile.user.last_name}}</h4><hr>
<h4>Email : {{profile.user.email}}</h4><hr>
<h4>Address : {{profile.address}}</h4><hr>
<h4>Contact : {{profile.contact}}</h4><hr>
</div>
<div class="col-md-6" style="height:100px;"><hr>
<h4> <img src="{{profile.image.url}}" style="width:150px;height:140px"></h4>
</div>
</div>
</div>
{% endblock %}

Page 4
 VIEW PRODUCTS PAGE CODING

{% extends 'navigation.html' %}
{% block body %}
<center><h2 style="color:red;margin-top:2%">View Product</h2></center><hr>
<div class="container" style="margin-top:4%">
<table class="table table-bordered" id="myTable">
<thead>
<tr>
<th>Product Name</th>
<th>Image</th>
<th> Category</th>
<th>Price</th>
<th> Description</th>
<th>Action</th>

</tr>
</thead>
<tbody>

{% for i in pro %}

<tr>

<td>{{i.name}}</td>
<td><img src="{{i.image.url}}" style="width:50px;height:50px"></td>
<td>{{i.category.name}}</td>
<td>{{i.price}}</td>
<td>{{i.desc}}</td>
<td><a href="{% url 'delete_product' i.id %}" onclick="return confirm('Are you
sure?')"><button class="button button1">Delete</button></a></td>

</tr>

Page 4
 {% endfor %}
</tbody>
{{count}}
</table>

</div>
<script>
{% for i in message %}
alert("{{i}}")
{% endfor %}
</script>

{% endblock %}

ADD PRODUCT PAGE CODING

Page 4
 {% extends 'navigation.html' %}
{% block body %}
{% load static %}
<div class="container">
<h2 style="margin-top:20px" align="center">Add Product</h2><hr>

<div class="container-fluid" style="width:70%;margin-top:10%">

<form method="post" action="" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Product Name</label>
<input type="text" class="form-control" placeholder="Enter First Name"
name="pname" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="exampleInputPassword1">Product Image</label>
<input type="file" class="form-control" id="exampleInputPassword1" name="img"
value="choose file">
</div></div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputState">Category</label>
<select id="inputState" class="form-control" name="cat">
{% for i in cat %}
<option value="{{i.name}}">{{i.name}}</option>
{% endfor %}
</select>
</div>

<div class="form-group col-md-6">

<label for="inputEmail4">Product Price</label>
<input type="number" class="form-control" name="price" placeholder="Enter
Page 4
User Name" id="inputEmail4">
</div></div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Description</label>
<textarea class="form-control" id="exampleFormControlTextarea1" name="desc"
rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>

{% if error %}
<script>
alert('1 Product Added Successfully');
</script>
{% endif %}
{% endblock %}

ADD CATEGORY PAGE CODING

Page 4
 {% extends 'navigation.html' %}
{% block body %}
{% load static %}

{% if error %}
<script>
alert('One New Category Added Successfully');
</script>
{% endif %}

<div class="container">
<h2 style="margin-top:20px" align="center">Add Category</h2><hr>

<div class="container-fluid" style="width:70%;margin-top:10%">

<form method="post" action="">
{% csrf_token %}
<div class="form-group">
<label for="exampleInputEmail1">Category Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp" name="cat" placeholder="Enter Category">
</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>
</div>
</div>

{% endblock %}

Page 4
 USER EDIT PROFILE PAGE CODING

{% extends 'navigation.html' %}
{% block body %}
{% load static %}
<div class="container">
<h2 style="margin-top:20px" align="center">Edit Profile</h2><hr>

<div class="container-fluid" style="width:70%;margin-top:10%">

<form method="post" action="" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">First Name</label>
<input type="text" class="form-control" value="{{pro.user.first_name}}"
name="fname" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Last Name</label>
<input type="text" class="form-control" name="lname"
value="{{pro.user.last_name}}" id="inputPassword4">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="inputEmail4">User Name</label>
<input type="text" class="form-control" name="uname"
value="{{pro.user.username}}" id="inputEmail4" readonly>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="exampleInputEmail1">Email</label>
Page 4
 <input type="email" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp" name="email" value="{{pro.user.email}}">
</div>

<div class="form-group col-md-6">

<label for="exampleInputPassword1">Contact</label>
<input type="text" class="form-control" id="exampleInputPassword1"
value="{{pro.contact}}" name="contact">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="exampleInputPassword1">City</label>
<input type="text" class="form-control" id="exampleInputPassword1"
value="{{pro.city}}" name="city">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="exampleInputPassword1">Date of Birth</label>
<input type="date" class="form-control" id="exampleInputPassword1"
name="date">
</div>
<div class="form-group col-md-6">
<label for="exampleInputPassword1">Date of Birth</label>
<input type="text" class="form-control" id="exampleInputPassword1"
value="{{pro.dob}}" readonly>
</div>
</div>
<div class="form-row">

<div class="form-group col-md-12">

<label for="exampleInputPassword1">Full Address</label>
<input type="text" class="form-control" id="exampleInputPassword1"
Page 4
value="{{pro.address}}" name="add">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="exampleInputPassword1">Image</label>
<input type="file" class="form-control" id="exampleInputPassword1" name="img"
value="choose file">
</div>
<div class="form-group col-md-6">
<img src="{{pro.image.url}}" style="width:150px;height:150px">
</div>
</div>

<button type="submit" class="btn btn-primary" style="margin-

bottom:5%">update</button>
</form>
</div>
</div>

{% if error %}
<script>
alert('Update Successfully');
window.location = "{% url 'profile' %}";
</script>
{% endif %}

{% endblock %}

Page 4
 CHAPTER # 8
Advantages & Limitations

Advantages of “Online Grocery Shop System”:

“Online Grocery Shop System” provides various features, which

complement the information system and increase the productivity of the
system. These features make the system easily usable and convenient. Some of
the important features included are listed as follows:

 Intelligent User Forms Design

 Data access and manipulation through same forms
 Access to most required information
 Data Security
 Restrictive data access, as per login assigned only.
 Organized and structured storage of facts.
.
 Strategic Planning made easy.
 No decay of old Records.
 Exact financial position of the Business.

Page 4
Limitations of “Online Grocery Shop System”:

Besides the above achievements and the successful completion of the project,
we still feel the project has some limitations, listed as below:

1. It is not a large scale system.

2. Only limited information provided by this system.
3. Since it is an online project, customers need internet connection to buy
products.
4. People who are not familiar with computers can’t use this software.

Page 4
 CHAPTER # 8
Future Scope

FUTURE SCOPE

This web application involves almost all the features of the online shopping. The future im-
plementation will be online help for the customers and chatting with website administrator.

CONCLUSION

The project entitled “Online Grocery Shopping” is developed using HTML, CSS and
Bootstrap as front end and Python Django and Sqlite database in back end to computerize the
process of online buying of grocery products. This project covers only the basic features
required.

Page 4
 Bibliography

BIBLIOGRAPHY

 Wikipedia

 https://www.geeksforgeeks.org/python-django/

 https://www.javatpoint.com

 https://www.python.org/

 https://www.tutorialspoint/

Page 4
 REFERENCE BOOKS

Two scoops of Django for 1.11 by Daniel Greenfeld’s and Audrey

Greenfield

Lightweight Django by Elman and Mark Lavin

Page 4