PREFACE

Training is an integral part of B.voc (software Development) and each and every student has to
undergo the training for 6 month in a company.

This record is concerned about our practical training during the Summer Vacations after the
3rd year We have taken our Practical training in During this training, we got to learn many new
things about the industry and the current requirements of companies. This training proved to
be a milestone in our knowledge of present industry. Every say and every moment was an
experience in itself, an experience which theoretical study can't provide.
 To Whom It May Concern
It is certified that: Gursewak Singh S/O: Balwinder Singh student of class B.voc (Software
Development) semester: 6th bearing University Roll No. 903112 in session: 2023 is carried out his
six month training at Apptunix Mohali on the project on online shopping to fulfil the requirements
for the award of degree of "B.voc (Software Development)"Professor Rekha Kalra Head Of
Department Of Computer Science Guru Nanak College, Budhlada

Prof. Rekha Kalra

(H.O.D)
 Certificate of Originality
It is certified that the project report intitled online shopping submitted to Guru Nanak College
Budhlada affliated to Punjabi University Patiala in Partial fulfillment of the requirement for
the award of degree Bvoc (Software development) is original work carried out by Mr
Gursewak
Singh, Roll No.903112 respectively under my guidance The matter embedded in this project
genuin work done by the students and has not been submitted to this university or to any
university
institutes for the fulfillment of the requirement of any course of study.

Signature of Students
Signature of The Guide

Date:

Name & Address

Name, Designation & address of The Guide
 ACKNOWLEDGEMENT
It is my pleasure to be indebted to various people, who directly or indirectly contributed in the
development of this work and who influenced my thinking, behavior and acts during the course of
study.

I express my sincere gratitude to Mr. Narinder Singh Asst professor department of computer
science Guru Nanak College for her kind support and inspiration given to me till the end of my
project we thank Mrs REKHA KALARA head, department of computer science, Mr. Narinder Singh ,
principle ,Guru Nanak college for their constant support and encouragemet given throughout the
development of the project Training & Placement Incharge for providing me an opportunity to
undergo summer training at SOFTWIZ PVT LTD

I am thankful to Mr. ASHWINI for his support cooperation and motivation provided to me during
the training for constant inspiration presence and blessings

I also extend my sincere appreciation to Mr. ASHWINI who provided his valuable suggestions and
precious time in accomplishing my training report

Lastly, I would like to thank the almighty and my parents for their moral support and my friends
with whom I shared my day-to day experience and received lots of suggestions that my quality of
work.

Online shopping System

 Index
SERIAL No. Topic Title
1 Title of the project
2 Index
3 Introduction of the Project
4 Requirement
5 Front end used
6 Back end used
7 Abstract of the Project
8 Objective & Scope of the Project
9 Reports & Modules of the project
10 Features of the project
11 Limitations & Conclusion of the
Project
12 Project Report
13 References And Bibliography
 Introduction of the Project
The "Online Shopping System" 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. The 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 Shopping 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 organization, whether big or small, has
challenges to overcome and managing the information of Product, Shopping, Payment, Delivery,
Customer. Every Online Shopping System has different Shopping needs, therefore we design
exclusive employee
management systems that are adapted to your managerial requirements. This is designed to assist
in strategic planning, and will help you ensure that your organization is equipped with the right
level of information and details for your future goals. Also, for those busy executive who are
always on the go, our systems come with remote access features, which will allow you to manage
your workforce anytime, at all times. These systems will ultimately allow you to better manage
resources
 REQUIREMENTS
Hardware Requirements
• MEMORY SPACE:
Minimum - 32 MB
Recommended - 64 MB

• HDD - To install the software at least 1 GB and the data

storage is depending upon the organizational
setup.

• PROCESSOR - Intel core Processor, 1GHZ

• RAM - 256 MB

• VIDEO - 1024x768, 24-bit colors

• KEYBOARD - Standard 104 Keys

• PRINTER - DMP/Inkjet/Laser Jet

Blank writable CD to keep the backup of the Package.

 Software Requirements

• OPERATING SYSTEM - Windows

• DEVELOPING LANGUAGE - Python 3.11.2

• WEB SERVER - WSGI

• DATABASE - Django4.2
 PLATFORM USED
Windows

Windows (Operating System)

• Window derived from its name from the on-screen “WINDOWS” that it used
to display information’s.

• Windows XP Professional is a multi-user operating system. It has been

designed and developed by Microsoft Co-operation.

• When a computer is switch on for working, it needs the operating system

because all the activities of a system are supervised by the operating
system.

The features of the operating system are:-

• Provides an interactive environment.

• Graphical user interfaces.

• The Commands are displayed on the screen and we don’t have to

remember all commands.

• GUI makes it easy to work with disks and directories. It can display
tree like diagram of directories, sub-0 directories on hard disk.

• Point and Click.

• User friendly.
• Several programs at the same.
 FRONT END USED
VISUAL STUDIO CODE
Introduction to Visual Studio Code
Visual Studio Code is a code editor in layman’s terms. Visual Studio Code is “a
free-editor that helps the programmer write code, helps in debugging and
corrects the code using the intelli-sense method ”. In normal terms, it
facilitates
users to write the code in an easy manner. Many people say that it is half of an
IDE and an editor, but the decision is up to to the coders. Any program/software
that we see or use works on the code that runs in the background. Traditionally
coding was used to do in the traditional editors or even in the basic editors like
notepad! These editors used to provide basic support to the coders.
Some of them were so basic that it was very difficult in writing basic English level
programs in them. As time went by, some programming languages needed a
specific framework and support for further coding and development it, which was
not possible using these editors. VI Editor, Sublime Text Editor, is one of the many
kinds of editors that came into existence. The most prominent and which
supports almost every coding language is VISUAL STUDIO CODE. Its features let
the user modify the editor as per the usage, which means the user is able to
download the libraries from the internet and integrate it with the code as per his
requirements.
What can Visual Studio Code do?
Visual Studio Code has some very unique features. They are listed as below :
 Support for multiple programming languages: Supports multiple
programming languages. So earlier, programmers needed Web-Support:
a different editor for different languages, but it has built-in multi-
language support. This also means it easily detects if there’s any fault or
cross-
language reference, it’ll be able to detect it easily.
 Intelli-Sense: It can detect if any snippet of code is left incomplete. Also,
common variable syntaxes and variable declarations are made
automatically. Ex: If a certain variable is being used in the program and
the user has forgotten to declare, intelli-sense will declare it for the user.
 Cross-Platform Support: Traditionally, editors used to support
either Windows or Linux or Mac Systems. But Visual Studio Code is cross-
platform. So it can work on all three platforms. Also, the code works on all
 three platforms; else, the open-source and proprietary software codes
used to be different.
 Extensions and Support: Usually supports all the programming languages
but, if the user/programmer wants to use the programming language
which is not supported then, he can download the extension and use it.
And
performance-wise, the extension doesn’t slow down the editor as it rums
as a different process.
 Repository: With the ever-increasing demand for the code, secure and
timely storage is equally important. It is connected with Git or can be
connected with any other repository for pulling or saving the
instances.
 Web-Support: Comes with built-in support for Web applications. So
web applications can be built and supported in VSC.
 Hierarchy Structure: The code files are located in files and folders. The
required code files also have some files, which may be required for
other complex projects. These files can be deleted as per convenience.
 Improving Code: Some code snippets can be declared a bit
differently, which might help the user in the code. This function
prompts the user, wherever necessary, to change it to the suggested
option.
 Terminal Support: Many of the times, the user needs to start from the
root of the directory to start with a particular action, in-built terminal or
console provides user support to not to switch in-between two screens for
the same.
 Multi-Projects: Multiple projects containing multiple files/folders can
be opened simultaneously. These projects/folders might or might not
be
related to each other.
 Git Support: Resources can be pulled from Git Hub Repo online and
vice- versa; saving can be done too. Resource pulling also means cloning
the code which is made available on the internet. This code can later be
changed and saved.
 Commenting: A common feature, but some of the languages do
not support it. Commenting on the code helps the user to recall or
track according to the sequence he wants.
Advantages and Why should we use Visual Studio Code
There are many advantages over any other IDE; they are as follow:
1. Cross-platform support :
 Windows
 Linux
 Mac
2. Light-weight
3. Robust Architecture
4. Intelli-Sense
5. Freeware: Free of Cost- probably the best feature of all for all the
programmers out there, even more for the organizations.
6. Many users will use it or might have used it for desktop applications only, but
it also provides great tool support for Web Technologies like; HTML, CSS, JSON.
There are a few things that one can find a bit odd compared with so many
features. It mainly helps the front-end developers as compared with the back-end
developers. But as per some user’s opinions, it is equally helpful. It supports most
of the languages used by most of the programmers, but other languages might
have to download, or extensions may have to be used for them. Along with this
common zoom-in, zoom-out brightness, theme selection features too are made
available.
Visual Studio Scope
The most common languages are :
 C#
 Visual Basic
 Java-Script
 R
 XML
 Python
 CSS
 GO
 PERL
Another feature that naïve-users or anyone can see instantly different from
other editors is the user-friendliness of the Visual Studio Code. The usability is
very easy to handle. The file is arranged hierarchically and has regular software
like a
toolbar, status bar, and a sidebar. It also has a floating windows explorer window,
which can be fixed at one place according to convenience, which consists of the
directory structure of files. These files (code files, image folders, etc.) can be
opened or renamed from here, and changes will automatically get reflected in the
storage.
Why do we need Visual Studio Code?
Till recent times, there’s hardly been an IDE or code editor that has been so user-
friendly that even first-time users can use each and every feature without any
hassles. The coding-friendly feature and code error recognition also helps users a
long way into making the code more efficient and error-less.
How will this technology help you in career growth?
With new and emerging technologies, and new frameworks being used by the
software, this brings into play a great variety of code effectiveness. These
emerging technologies are a sure thing that is to be added into the Visual Studio
Code and its extensions. The developers, testers, data administrators, both old
and newbies, can equally use it, and that too very effectively. The people who are
into this industry might find it a bit tough to learn this new technology,
considering their use of more manual modes of code logic.
Conclusion
With advancements in technology day-by-day, Visual Studio Code is going to play
a pivotal role in the development of software. With its ever-evolving features and
soon-to-be-added new settings, which will enable users to work with it from
anywhere, it is certainly “THE THING” to keep one ahead of everyone in this ever-
increasing IT market.
 BACK END USED
DJANGO
Introduction of Django
What is Django?
Django is a Python-based web framework which allows you to quickly create web
application without all of the installation or dependency problems that you normally
will find with other frameworks.
When you’re building a website, you always need a similar set of components: a
way to handle user authentication (signing up, signing in, signing out), a
management panel for your website, forms, a way to upload files, etc. Django gives
you ready-made components to use.
Why Django?
1. It’s very easy to switch database in Django framework.
2. It has built-in admin interface which makes easy to work with it.
3. Django is fully functional framework that requires nothing else.
4. It has thousands of additional packages available.
5. It is very scalable.
Popularity of Django
Django is used in many popular sites like as: Disqus, Instagram, Knight Foundation,
MacArthur Foundation, Mozilla, National Geographic etc. There are more than 5k
online sites based on the Django framework. ( Source )
Sites like Hot Frameworks assess the popularity of a framework by counting the
number of GitHub projects and StackOverflow questions for each platform, here
Django is in 6th position. Web frameworks often refer to themselves as
“opinionated” or “un-opinionated” based on opinions about the right way to handle
any particular task. Django is somewhat opinionated, hence delivers the in both
worlds( opinionated & un-opinionated ).
Features of Django
Versatility of Django
Django can build almost any type of website. It can also work with any client-side
framework and can deliver content in any format such as HTML, JSON, XML etc.
Some sites which can be built using Django are wikis, social networks, new sites etc.
Security
Since Django framework is made for making web development easy, it has been
engineered in such a way that it automatically do the right things to protect the
website. For example, In the Django framework instead of putting a password in
cookies, the hashed password is stored in it so that it can’t be fetched easily by
hackers.
Scalability
Django web nodes have no stored state, they scale horizontally – just fire up more of
them when you need them. Being able to do this is the essence of good scalability.
Instagram and Disqus are two Django based products that have millions of active
users, this is taken as an example of the scalability of Django.
Portability
All the codes of the Django framework are written in Python, which runs on many
platforms. Which leads to run Django too in many platforms such as Linux,
Windows and Mac OS.
Installation of Django
 Install python3 if not installed in your system ( according to configuration
of your system and OS) from here . Try to download the latest version of
python it’s python 3.11.0 this time.
Note- Installation of Django in Linux and Mac is similar, here I am showing
it in windows for Linux and mac just open terminal in place of command
prompt and go through the following commands.
 Install pip- Open command prompt and enter following command-
python -m pip install -U pip

 Install virtual environment- Enter following command in cmd-

pip install virtualenv
 Set Virtual environment- Setting up the virtual environment will allow
you to edit the dependency which generally your system wouldn’t allow.
Follow these steps to set up a virtual environment-
1. Create a virtual environment by giving this command in cmd-
virtualenv env_site


1. Change directory to env_site by this command-
cd env_site
 
1. Go to Scripts directory inside env_site and activate virtual
environment-
cd
Scripts
activate


 Install Django- Install django by giving following command-
pip install django
 Return to the env_site directory-
cd ..

 Start a project by following command-

django-admin startproject geeks_site
 Change directory to geeks_site
cd geeks_site

 Start the server- Start the server by typing following command in cmd-
python manage.py runserver
 To check whether server is running or not go to web browser and
enter http://127.0.0.1:8000/ as url.

Benefits of Django Architecture –

1. Rapid Development
2. Loosely Coupled
3. Ease of Modification
Drawbacks of MVC Architecture –
4. Too much load on Model Component
5. Development Complexity is high
6. Two components are controlling View
 Abstract of the Project
The purpose of Online Shopping System is to automate the existing manual
system by the help of computerized equipment and full-fledged computer
software, fulfilling their requirements, so that their valuable data/information can
be stored for a longer period with easy accessing and manipulation of the same.
The required software and hardware are easily available and easy to work with.
Online Shopping 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. The organization can maintain
computerized records without redundant entries. That means that one need not
be distracted by information that is not relevant, while being able to reach
the information. The aim is to automate its existing manual system by the help of
computerized equipment and full-fledged computer software, fulfilling their
requirements, so that their valuable data/information can be stored for a longer
period with easy accessing and manipulation of the same. Basically the project
describes how to manage for good performance and better services for the clients
 Objective of the Project
The main objective of the Project on Online Shopping System is to manage
the details of Shopping, Product, Internet, Payment, Customer. It manages all
the
information about Shopping, Delivery, Customer, Shopping. The project is totally
built at administrative end and thus only the administrator is guaranteed the
access. The purpose of the project is to build an application program to
reduce the manual work for managing the Shopping, Product, Delivery, Internet.
It tracks all the details about the Internet, Payment, Customer.

Scope of the project

It may help collecting perfect management in details. In a very short time, the
collection will be obvious, simple and sensible. It will help a person to know the
management of passed year perfectly and vividly. It also helps in current all works
relative to Online Shopping System. It will be also reduced the cost of collecting
the management & collection procedure will go on smoothly. Our project aims at
Business process automation, i.e. we have tried to computerize various processes
of Online Shopping System
. • In computer system the person has to fill the various forms & number of
copies of the forms can be easily generated at a time.
• In computer system, it is not necessary to create the manifest but we
can directly print it, which saves our time.
• To assist the staff in capturing the effort spent on their respective
working areas.
• To utilize resources in an efficient manner by increasing their
productivity through automation.
• The system generates types of information that can be used for
various purposes.
 Reports of the project
• It generates the report on Shopping, Product, Delivery

• Provide filter reports on Internet, Payment, Customer

• You can easily export PDF for the Shopping, Delivery, Payment
• Application also provides excel export for Product, Internet, Customer
• You can also export the report into csv format for Shopping, Product, Customer

Modules of Online Shopping

System:
• Shopping Management Module: Used for managing the Shopping details.
• Customer Module : Used for managing the details of Customer
• Delivery Module : Used for managing the details of Delivery
• Product Management Module: Used for managing the information and details
of the Product.
• Internet Module : Used for managing the Internet details
• Payment Module : Used for managing the Payment information
• Login Module: Used for managing the login details
• Users Module : Used for managing the users of the system
 Features of the project
• Product and Component based
• Creating & Changing Issues at ease
• Query Issue List to any depth
• Reporting & Charting in more comprehensive way
• User Accounts to control the access and maintain security
• Simple Status & Resolutions
• Multi-level Priorities & Severities.
• Targets & Milestones for guiding the programmers
• Attachments & Additional Comments for more information
• Robust database back-end
• Various level of reports available with a lot of filter criteria’s
• It contain better storage capacity.
• Accuracy in work.
• Easy & fast retrieval of information.
• Well designed reports.
• Decrease the load of the person involve in existing manual system.
• Access of any information individually.
• Work becomes very speedy.
• Easy to update information
 Limitation of the Project
Although I have put my best efforts to make the software flexible, easy to operate
but limitations
cannot be ruled out even by me. Though the software presents a broad range of
options to its users
some intricate options could not be covered into it; partly because of logistic and
partly due to lack of
sophistication. Paucity of time was also major constraint, thus it was not possible
to make the
software foolproof and dynamic. Lack of time also compelled me to ignore some
part such as storing
old result of the candidate etc.

Considerable efforts have made the software easy to operate even for the people
not related to the
field of computers but it is acknowledged that a layman may find it a bit
problematic at the first
instance. The user is provided help at each step for his convenience in working
with the software.

Conclusion of the Project

Our project is only a humble venture to satisfy the needs to manage their project
work. Several user
friendly coding have also adopted. This package shall prove to be a powerful
package in satisfying all
the requirements of the school. The objective of software planning is to provide a
frame work that
enables the manger to make reasonable estimates made within a limited time
frame at the beginning
of the software project and should be updated regularly as the project progresses.
 Project Report on
Online Shopping
System
Online Shopping is a very popular project in web development. It is mostly used
as a business model to earn capital. Famous ecommerce websites are amazon,
flipkart, etc. Let us develop Online Shopping System in Django.

About the Online Shopping System:

All the users can view various products, if they wish to buy any then they have to
register and then login to add that product inside their cart. The users or
customers can also read the reviews about a product posted by other users
before buying it.

The users can add how many products he/she wants to their shopping cart.
Then the users are able to set the quantity of each added product inside the
cart.
Finally, while checkout the users can give their address and the mode of payment
and place the respective order. Then the admin can see the customer details with
his/her order details and the address where the order should be delivered.

Python Online Shopping System project:

The main purpose of this project is to build a platform where the buyers and
sellers can connect with each other online. These kinds of projects or websites
are used to sell products and gain some money out of it.

Project Prerequisites and Features

Prerequisites to develop Online Shopping System in Django:
Html, Css, JavaScript, Bootstrap, Python Django.

Features:
 User Authentication (register and login)
  Session of each user is saved using cookies.
 All Products with their view, key features and reviews by other users.
 Users are able to search for any product.
 Cart Functionality.
 Proper Order Summary Before Placing Order.
 Change Password Facility.
 Contact Us.
Download Online Shopping System Django
Project
Please download the source code of python online shopping system from the
following link: Online Shopping System Python Django Project
Project File Structure
Steps for Online Shopping System Python Project:

Models.py :
class Customer(models.Model):
user = models.OneToOneField(User, on_delete=models.CASCADE)
name = models.CharField(max_length=100)
email = models.CharField(max_length=100)
phone_number = models.CharField(max_length=10, null=True, blank=True)
def str (self):
return self.name
class Product(models.Model):
name = models.CharField(max_length=100)
price = models.FloatField()
image = models.ImageField(upload_to="images", default="")
def str (self):
return self.name
class Feature(models.Model):
product = models.ForeignKey(Product, on_delete=models.CASCADE)
feature = models.CharField(max_length=1000, null=True, blank=True)
def str (self):
return str(self.product) + " Feature: " + self.feature
class Review(models.Model):
customer = models.ForeignKey(Customer, on_delete=models.CASCADE)
product = models.ForeignKey(Product, on_delete=models.CASCADE)
content = models.TextField()
datetime = models.DateTimeField(default=now)
def str (self):
return str(self.customer) + " Review: " + self.content
class Order(models.Model):
customer = models.ForeignKey(Customer, on_delete=models.SET_NULL, null=True)
date_ordered = models.DateTimeField(auto_now_add=True)
complete = models.BooleanField(default=False)
transaction_id = models.CharField(max_length=100)
def str (self):
return str(self.id)
@property
def get_cart_total(self):
orderitems = self.orderitem_set.all()
total = sum([item.get_total for item in orderitems])
return total
@property
def get_cart_items(self):
orderitems = self.orderitem_set.all()
total = sum([item.quantity for item in orderitems])
return total
class OrderItem(models.Model):
product = models.ForeignKey(Product, on_delete=models.SET_NULL, null=True)
order = models.ForeignKey(Order, on_delete=models.SET_NULL, null=True)
quantity = models.IntegerField(default=0)
date_added = models.DateTimeField(auto_now_add=True)
def str (self):
return str(self.order)
@property
def get_total(self):
total = self.product.price * self.quantity
return total
class CheckoutDetail(models.Model):
customer = models.ForeignKey(Customer, on_delete=models.SET_NULL, null=True)
order = models.ForeignKey(Order, on_delete=models.SET_NULL, null=True)
phone_number = models.CharField(max_length=10, blank=True, null=True)
total_amount = models.CharField(max_length=10, blank=True,null=True)
address = models.CharField(max_length=300)
city = models.CharField(max_length=100)
state = models.CharField(max_length=100)
zipcode = models.CharField(max_length=100)
date_added = models.DateTimeField(auto_now_add=True)
def str (self):
return self.address
Code Explanation:
So, there are a total of 7 models created for this project.

Customer model:
It saves the basic data of the customers when they register themselves.

Product model:
It saves the data of the product. The admin can add a new product very
easily using this model.

Feature model:
The admin can select the product and write any features about it. And all the
features of that product will be visible to the users when they view a specific
product.

Review model:
All the customers can write a review about a product which the customers
can read before buying it.

Order model:
It stores the order details about the customer, mainly the order id.

OrderItems model:
It stores the order id of the customer from the order model and the products with
their quantity.

Checkout Details model:

It stores mainly the exact address where the order is to be delivered.

Create superuser:
After creating the models, we need to go to the admin panel to access the created
models. Hence, we need a superuser who can access the models from the admin
panel. The superuser can make any changes inside the models.

Creating superuser :
For creating the superuser use the following command:

python manage.py createsuperuser

Then, you can give the username, email and password.

Urls.py file
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("cart/", views.cart, name="cart"),
path("checkout/", views.checkout, name="checkout"),
path("update_item/", views.updateItem, name="update_item"),
path("product_view/<int:myid>/", views.product_view, name="product_view"),
path("search/", views.search, name="search"),
path("contact/", views.contact, name="contact"),
path("loggedin_contact/", views.loggedin_contact, name="loggedin_contact"),
path("register/", views.register, name="register"),
path("change_password/", views.change_password, name="change_password"),
path("login/", views.Login, name="login"),
path("logout/", views.Logout, name="logout"),
]

Code Explanation:
Above mentioned are the app urls. Hence, create a file for the urls inside the
app. The last three urls are for the user authentication that is register, login and
logout. The other urls consist of the entire project.

1. Home Page (index.html):

<div class="container mt-2 mb-3">
<div class="row">
{% for product in products %}
<div class="col-lg-4 my-4">
<div class="card shadow align-items-center" style="width: 20rem; height: 25rem;">
<img src="/media/{{product.image}}" class="card-img-top" style="width: 170px; height: 260px;" alt="...">
<div class="card-body">
<h5 class="card-title">{{product.name}}</h5>
<hr>
{% if request.user.is_authenticated %}
<button data-product="{{product.id}}" data-action="add" class="btn add-btn update-cart"
style="background-color: #8c5d4f; color: white;">Add To Cart</button>
<a href="/product_view/{{product.id}}/" class="btn btn-outline-secondary">View</a>
{% else %}
<button class="btn" style="background-color: #8c5d4f; color: white;">Login to add the item</button>
{% endif %}
<h4 style="display: inline-block; float: right;">&nbsp;₹{{product.price}}</h4>
</div>
</div>
</div>
{% endfor %}
</div>
</div>

Views.py:
def index(request):
data = cartData(request)
items = data['items']
order = data['order']
cartItems = data['cartItems']
products = Product.objects.all()
return render(request, "index.html", {'products':products, 'cartItems':cartItems})

Home page with the customer logged in:

Code Explanation:
From the Product model, using a for loop all the products are displayed on the
home screen with the image, name and price of the products. Two buttons are
also created, one is for adding the item inside the cart and the other is to view the
product. If the customers are not logged in then they are not able to add the item
inside their cart. They can just see all the products. On the add to cart button,
login to add the item will be written.

2. Search Product functionality (search.html):

<div class="container mt-2 mb-3">
<div class="row">
{% for product in products %}
<div class="col-lg-4 my-4">
<div class="card shadow" style="width: 20rem; height: 23rem;">
<img src="/media/{{product.image}}" class="card-img-top" alt="..." height="230px">
<div class="card-body">
<h5 class="card-title">{{product.name}}</h5>
<hr>
{% if request.user.is_authenticated %}
<button data-product="{{product.id}}" data-action="add" class="btn add-btn update-cart" style="background-
color: #8c5d4f; color: white;">Add To Cart</button>
<a href="/product_view/{{product.id}}/" class="btn btn-outline-success">View</a>
{% else %}
<button class="btn" style="background-color: #8c5d4f; color: white;">Login to add the item</button>
{% endif %}
<h4 style="display: inline-block; float: right;">₹{{product.price}}</h4>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
<h1>You forgot to search</h1>
{% endif %}

Views.py:
def search(request):
data = cartData(request)
items = data['items']
order = data['order']
cartItems = data['cartItems']
if request.method == "POST":
search = request.POST['search']
products = Product.objects.filter(name contains=search)
return render(request, "search.html", {'search':search, 'products':products, 'cartItems':cartItems})
else:
return render(request, "search.html")

Code Explanation:
The customers can directly search for the product that they want on the search
option given on the navigation bar. Whatever the customers write on the search
bar will be sent through a post request and then saved inside a variable.

search = request.POST['search']
products = Product.objects.filter(name contains=search)

Afterwards, from the Product model the product name is filtered to the search
value. The result is then displayed in the same cards as on the home page.

3. Product View Page (product_view.html):

<div class="container mt-4">
<div class="row">
<div class="col-md-4">
<div class="row">
<img src="/media/{{product.image}}" alt="" style="width: 300px; height: 400px;">
</div>
<br>
<div class="row">
<button data-product="{{product.id}}" data-action="add" class="btn add-btn update-cart"
style="background-color: #8c5d4f; color: white; width: 15rem;">Add To Cart</button> </div>
</div>
<div class="col-md-8">
<h3>{{product.name}}</h3>
<p style="font-size: 25px;"><b>₹ {{product.price}}</b></p>
<br>
<h5>Key Features:</h5>
<ul>
{% for i in feature %}
<li>{{i.feature}}</li>
{% endfor %}
</ul>
<br>
<h2>Add Reviews Here</h2>
<form method="POST" action="/product_view/{{product.id}}/"> {% csrf_token %}
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px" id="content" name="content"></textarea>
<label for="floatingTextarea2">Leave a feedback about the {{product.name}} here.</label>
<br>
<button type="submit" class="btn btn-primary">Add Review</button>
</div>
</form>
</div>
</div>
<div class="container mt-2">
<h2>All Reviews ({{reviews.count}})</h2>
{% for review in reviews %}
<div class="card">
<div class="card-header">
<span style="font-size: 22px;">{{review.customer}} </span> <span
style="font-size: 12px;">{{review.datetime | naturaltime}}</span>
</div>
<div class="card-body">
<h6 class="card-text">{{review.content}}</h6>
</div>
</div>
<br>
{% endfor %}
</div>
</div>
</div>

Views.py:
def product_view(request, myid):
product = Product.objects.filter(id=myid).first()
feature = Feature.objects.filter(product=product)
reviews = Review.objects.filter(product=product)
data = cartData(request)
items = data['items']
order = data['order']
cartItems = data['cartItems']
if request.method=="POST":
content = request.POST['content']
review = Review(customer=customer, content=content, product=product)
review.save()
return redirect(f"/product_view/{product.id}")
return render(request, "product_view.html", {'product':product, 'cartItems':cartItems, 'feature':feature,
'reviews':reviews})

Product View:
Code Explanation:
After clicking on the view button, the customers can view the specific product
with their key features and reviews. After reading the key features and the
reviews about the product, the customer can buy the product by clicking on the
add to cart button. The customer who has brought that specific product can write
their review about the product which the other customer is able to read.

4. Cart Page (cart.html):

<div class="container-fluid row">
<div class="col-lg-12">
<div class="box-element">
<a href="/" class="btn btn-outline-dark">&#x2190 Continue Shopping</a>
<br><br>
<table class="table">
<tr>
<th>
<h5>Items: <strong>{{order.get_cart_items}}</strong></h5>
</th>
<th>
<h5>Total: <strong>₹{{order.get_cart_total}}</strong></h5>
</th>
<th><a href="/checkout/" class="btn btn-success" style="float: right; margin: 5px;">Checkout</a>
</th>
</tr>
</table>
</div>
<br>
<div class="box-element">
<div class="cart-row">
<div style="flex: 2;"><strong>Image</strong></div>
<div style="flex: 2;"><strong>Item</strong></div>
<div style="flex: 1;"><strong>Price</strong></div>
<div style="flex: 1;"><strong>Quantity</strong></div>
<div style="flex: 1;"><strong>Total</strong></div>
</div>
{% for item in items %}
<div class="cart-row">
<div style="flex: 2;"><img class="row-image" src="{{item.product.image.url}}" alt=""></div>
<div style="flex: 2;">{{item.product.name}}</div>
<div style="flex: 1;">₹{{item.product.price}}</div>
<div style="flex: 1;">
<p class="quantity">{{item.quantity}}</p>
<div class="quantity">
<img data-product="{{item.product.id}}" data-action="add" src="{% static 'up-arrow.png' %}" class="chg-
quantity update-cart" alt="">
<img data-product="{{item.product.id}}" data-action="remove" src="{% static 'down-arrow.png' %}"
class="chg-quantity update-cart" alt="">
</div>
</div>
<div style="flex: 1;">₹{{item.get_total}}</div>
</div>
{% endfor %}
</div>
</div>
</div>
Views.py:
def cart(request):
data = cartData(request)
items = data['items']
order = data['order']
cartItems = data['cartItems']
try:
cart = json.loads(request.COOKIES['cart'])
except:
cart = {}
print('Cart:', cart)
for i in cart:
try:
cartItems += cart[i]["quantity"]
product = Product.objects.get(id=i)
total = (product.price * cart[i]["quantity"])
order["get_cart_total"] += total
order["get_cart_items"] += cart[i]["quantity"]
item = {
'product':{
'id':product.id,
'name':product.name,
'price':product.price,
'image':product.image,
},
'quantity':cart[i]["quantity"],
'get_total':total
}
items.append(item)
except:
pass
return render(request, "cart.html", {'items':items, 'order':order, 'cartItems':cartItems})

Cart Page:
Code Explanation:
By clicking on the shopping cart icon on the navigation bar, customers can see all
the added items in the cart. The users can then increase or decrease the
quantity of the products according to their requirements.

5. Checkout Page (checkout.html):

<div class="container-fluid row">
<div class="col-lg-12">
<div class="box-element">
<a class="btn btn-outline-dark" href="/cart/">← Back to Cart</a>
<hr>
<h3>Order Summary</h3>
<hr>
{% for item in items %}
<div class="cart-row">
<div style="flex:2"><img class="row-image" src="{{item.product.image.url}}"></div>
<div style="flex:2">
<p>{{item.product.name}}</p>
</div>
<div style="flex:1">
<p>₹{{item.product.price}}</p>
</div>
<div style="flex:1">
<p>x{{item.quantity}}</p>
</div>
</div>
{% endfor %}
<h5>Items: {{order.get_cart_items}}</h5>
<h5>Total: ₹{{order.get_cart_total}}</h5>
</div>
</div>
<div class="col-lg-12">
<div class="box-element" id="form-wrapper">
<form method="POST"> {% csrf_token %}
<div id="shipping-info">
<hr>
<h4>Checkout Details:</h4>
<hr>
<div class="">
<input class="form-control" type="text" name="address" placeholder="Address..">
</div>
<div class="form-field">
<input class="form-control" type="text" name="city" placeholder="City..">
</div>
<div class="form-field">
<input class="form-control" type="text" name="state" placeholder="State..">
</div>
<div class="form-field">
<input class="form-control" type="text" name="zipcode" placeholder="Zip code..">
</div>
<div class="form-field">
<input class="form-control" type="text" name="phone_number" placeholder="Phone Number..">
</div>
</div>
<hr>
<input type="submit" value="Place Order" id="form-button" class="btn btn-success">
</form>
</div>
<br>
</div>
</div>

Views.py:
def checkout(request):
data = cartData(request)
items = data['items']
order = data['order']
cartItems = data['cartItems']
total = order.get_cart_total
if request.method == "POST":
address = request.POST['address']
city = request.POST['city']
state = request.POST['state']
zipcode = request.POST['zipcode']
phone_number = request.POST['phone_number']
payment = request.POST['payment']
shipping_adress = CheckoutDetail.objects.create(address=address, city=city, phone_number=phone_number,
state=state, zipcode=zipcode, customer=customer, total_amount=total, order=order, payment=payment)
shipping_adress.save()
if total == order.get_cart_total:
order.complete = True
order.save()
alert = True
return render(request, "checkout.html", {'alert':alert})
return render(request, "checkout.html", {'items':items, 'order':order, 'cartItems':cartItems})

Code Explanation:
Then finally on the checkout page the customer can see their order summary
before placing the order which is very much important. At last, the customers
need to fill in the checkout details that includes the exact address, city, zip code
etc and also choose the mode of payment. Then the customers can place their
orders.

6. Change Password (change_password.html):

<form class="container mt-3" method="POST" name="change_password" onsubmit="return
checkPassword()">
{% csrf_token %}
<div class="row mt-4">
<div class="form-group col-md-6">
<label><i style="font-weight: bold;">Username</i></label>
<input type="text" class="form-control mt-2" name="username" value="{{request.user}}" readonly>
</div>
<div class="form-group col-md-6">
<label><i style="font-weight: bold;">Current Password</i></label>
<input type="password" class="form-control mt-2" name="current_password" placeholder="Current
Password">
</div>
</div>
<div class="row mt-4">
<div class="form-group col-md-12">
<label><i style="font-weight: bold;">New Password</i></label>
<input type="password" class="form-control mt-2" name="new_password" placeholder="Enter the new
password">
</div>
</div>
<div class="row mt-4">
<div class="form-group col-md-12">
<label><i style="font-weight: bold;">Confirm Password</i></label>
<input type="password" class="form-control mt-2" name="confirm_password" placeholder="Confirm the new
password">
</div>
</div>
<input type="submit" class="btn mt-3" style="background-color: #8c5d4f; color: white;">
</form>

Views.py:
def change_password(request):
if not request.user.is_authenticated:
return redirect('/login')
data = cartData(request)
items = data['items']
order = data['order']
cartItems = data['cartItems']
if request.method == "POST":
current_password = request.POST['current_password']
new_password = request.POST['new_password']
try:
u = User.objects.get(id=request.user.id)
if u.check_password(current_password):
u.set_password(new_password)
u.save()
alert = True
return render(request, "change_password.html", {'alert':alert})
else:
currpasswrong = True
return render(request, "change_password.html", {'currpasswrong':currpasswrong})
except:
pass
return render(request, "change_password.html", {'cartItems':cartItems})
Code Explanation:
All the customers can change their password by going to the change password
option. To check the current password (check_password) method is used and
(set_password) method is used to set the new password as current password.

7. Contact Us (contact.html):
<div class="container py-2 mt-3">
<h2>Contact Us</h2>
<form method="post">{% csrf_token %}
<div class="form-group mt-2">
<label>Name</label>
<input type="text" class="form-control mt-2" id="name" name="name" placeholder="Enter Your Name">
</div>
<div class="form-group mt-2">
<label>Email</label>
<input type="email" class="form-control mt-2" id="email" name="email" placeholder="Enter Your Email">
</div>
<div class="form-group mt-2">
<label>Phone</label>
<input type="number" class="form-control mt-2" id="phone" name="phone" placeholder="Enter Your Phone
Number">
</div>
<div class="form-group">
<div class="form-group mt-2">
<label>How May We Help You ?</label>
<textarea class="form-control mt-2" id="desc" name="desc" rows="3"></textarea>
</div>
<button type="submit" style="background-color: #8c5d4f; color: white; width: 8rem;" class="btn mt-
4">Submit</button>
</form>

Views.py:
def contact(request):
if request.method=="POST":
name = request.POST['name']
email = request.POST['email']
phone = request.POST['phone']
desc = request.POST['desc']
contact = Contact(name=name, email=email, phone=phone, desc=desc)
contact.save()
alert = True
return render(request, 'contact.html', {'alert':alert})
return render(request, "contact.html")

Code Explanation:
The customers can ask their queries or can contact us by filling a small form.
There are two different forms one for the logged in users and others who haven’t
registered themselves but want to contact us. If the user is a logged in user then
the user just have to write the message directly else the user needs to first give
his name, email and phone before contacting.

8. Track Order (tracker.html):

<div class="container py-5">
<div class="col mt-4">
<h2>Enter your Order Id to track your order.</h2>
<form method="post">{% csrf_token %}
<div class="form-row">
<div class="form-group col-md-6">
<input type="number" class="form-control mt-3" name="order_id" placeholder="Order Id">
</div>
<button type="submit" class="btn btn-primary mt-4">Track Order</button>
</div>
</div>
<div class="col my-4">
<h4>Order Items:</h4>
<div class="my-4">
{% for i in order_items %}
<ol class="list-group">
<li class="list-group-item d-flex justify-content-between ">
<div class="ms-2 me-auto">
<div class="fw-bold">{{forloop.counter}}. {{i.product}}</div>
</div>
<span class="badge bg-primary rounded-pill">Qty: {{i.quantity}}</span>
</li>
</ol>
{% endfor %}
</div>
<h4>Your Order Details:</h4>
<div class="my-4">
{% for i in update_order %}
<ol class="list-group">
<li class="list-group-item d-flex justify-content-between ">
<div class="ms-2 me-auto">
<div class="fw-bold">{{i.desc}}</div>
</div>
<span class="badge bg-primary rounded-pill">Date: {{i.date}}</span>
</li>
</ol>
{% endfor %}
</div>
</div>
</div>

Views.py:
def tracker(request):
if not request.user.is_authenticated:
return redirect('/login')
data = cartData(request)
items = data['items']
order = data['order']
cartItems = data['cartItems']
if request.method == "POST":
order_id = request.POST['order_id']
order = Order.objects.filter(id=order_id).first()
order_items = OrderItem.objects.filter(order=order)
update_order = UpdateOrder.objects.filter(order_id=order_id)
print(update_order)
return render(request, "tracker.html", {'order_items':order_items, 'update_order':update_order})
return render(request, "tracker.html", {'cartItems':cartItems})

Code Explanation:
After placing the required order you will get an order id. That id can be further
used for tracking the order. In the track order menu you have to give your order
id for viewing the status of the order.

Summary:
We have successfully developed an Online Shopping System in Python Django
Framework. With this project, I think you will be understanding and loving Django
a lot more. You can download the entire source code which is mentioned at the
start of the project.
 References and Bibliography
• Google
• http://www.javaworld.com/javaworld/jw-01-1998/jw-01-Credentialreview.html
• Django and rest webframework
• Head First Java 2nd Edition
• https://www.w3schools.com/python/
• Java and Software Design Concepts by Apress
• https://www.tutorialspoint.com/java/
• http://www.javatpoint.com/java-tutorial
• https://docs.oracle.com/javase/tutorial
• https://code.visualstudio.com/
• http://www.tutorialspoint.com/mysql/