ONLINE SHOPPING

WEBSITE
DISSERTION SUBMITTED
IN PARTIAL FULFILMENT OF THE REQUIREMENT FOR
THE AWARD OF THE DEGREE OF
BACHELOR OF SCIEENCE
IN
COMPUTER SCIENCE
By
SHIBSANKAR SHOW
ANIMESH MAITY
SAMARESH MANNA

UNDER THE GUIDANCE OF

DR. ARINDAM ROY
ASSISTANT PROFESSOR

DEPARTMENT OF COMPUTER SCIENCE

AND
APPLICATION
PRABHAT KUMAR COLLEGE, CONTAI-721401
 ACKNOWLEDGEMENT

With a deep sense of gratitude I hereby acknowledge my respected teacher and guide
Dr. Arindam Roy. Asst. professor, Department of Computer Science and Computer
Application, P.K. College, ContaI, under whose active guidance, supervision, inspiration and
support I have carried out my project successfully .

I would like to thank all my teachers, classmates and all staff members of the Department of
Computer Science and Computer Application, P.K. College, ContaI.

Date:

(Shibsankar Show)

(Samaresh Manna)

(Animesh Maity)

B.Sc (Computer Science)

P.K College, Contai
 CERTIFICATE

This is to certify that the dissertation entitled "ONLINE SHOPPING WEBSITE" has been carried
out by Shibsankar Show, Samaresh Manna and Animesh Maity, at the Department of
Computer Science and Computer Application, P.K. College, contai under my guidance and
supervision in the partial fulfillment of the requirement for the award of the degree of
BACHELOR OF SCINCE IN COMPUTER SCIENCE.

This is their original work and the work has not been presented elsewhere to any
degree.

(Dr. Arindam Roy)

Assistant Professor (HOD)
Dept. of Computer Science
And
Computer Application
Prabhat Kumar College
Contai-721401
 ABSTRACT

The Online Shopping is a web based application intended for online retailers. The main
objective of this application is to make it interactive and its ease of use. It would make
searching, viewing and selection of a product easier. It contains a sophisticated search
engine for user's to search for products specific to their needs. The search engine
provides an easy and convenient way to search for products where a user can Search
for a product interactively and the search engine would refine the products available
based on the user’s input. The user can then view the complete specification of each
product. They can also view the product reviews and also write their own reviews. The
application also provides a drag and drop feature so that a user can add a product to
the shopping cart by dragging the item in to the shopping cart. The main emphasis lies
in providing a user-friendly search engine for effectively showing the desired results
and its drag and drop behavior.
 INDEX

Table of Content:

INTRODUCTION
1.1 Project Overview
1.2 Project Scope
1.3 Tools and Technology
REQUIREMENT ANALYSIS AND DFD
2.Requirement Analysis
2.1 Requirement Analysis
2.2 Data Requirement
2.3 Process Requirement
3. Diagram
3.1 First Level DFD
3.2 Second Level DFD
4 System Requirement Analysis
4.1 Information Gathering
4.2 System Feasibility
4.2.1 Economic Feasibility
4.2.2 Technical Feasibility
4.2.3 Behavioral Feasibility
5.0 Design specification
5.1.1 Coustomer Interface
5.1.2 Home Page
5.1.3 Coustomer Login and Registration Page
5.1.4 Add to Cart Page
5.1.5 Cart Product Before checkout
5.1.6 Final Checkout and Shopping information
5.1.7 Select Payment Methods
5.1.8 Coustomer Shopping information
6.0 Admin Page
6.1 Admin Login
6.2 Admin Home Page
6.3 Add Category
6.4 Manage Category
6.5 View Category
6.6 Edit Category
6.7 Delete Category
7.0 System Analysis
7.1 ER diagram
7.2 Use case Diagram
 INTRODUCTION

Online shopping website is the buying and selling of goods and services, or the transmitting
of funds or data, over an electronic network, primarily the internet. These business
transactions occur either as business-to-business, business-toconsumer, consumer-to-
consumer or consumer-to-business.E-commerce shops have become part of our daily lives.
Technological advancement has made it possible for people to sit in the convenience of their
homes and still shop online without going to a physical shop. Africans have also joined the
trend of e-commerce business, so this project is meant to design an eCommerce online shop
so that the people in Ghana (Africa)will be able to purchase their goods and services online.
This project is mainly divided into two main categories: The Administrators and the
Customers/Users. The store manager and the staff members operate as the administrators.
They can add, edit, update products or, delete products thus they able to change the names
of products, change prices and, add or remove products. The customer can search for
products selection, update the cart, remove products from the cart and check out from the
shop. The customer is also able to update his information such as names, address and other
data. The User is only able to browse the online shop and add a product to the cart. The user
is limited to the use of the shop.This thesis contains eight chapters to explain the project. The
first chapter introduces the project; the second chapter defines the tools and technology
used for the project, and the third chapter describes the application and description of the
process. The fourth chapter represents the MVC layout, the fifth defines the database and
the Gui designs, the sixth chapter explains the implementation process,and the seventh
chapter describes the testing of the shop and its features,the eight chapter describes the
conclusion of the whole project. The ninth chapter illustrates possible future improvement to
the shop.
 1.1 Project Overview

The Online Shopping Website project is designed to create

a fully functional e-commerce platform that allows users to
browse, search, and purchase products online. This project
leverages Python and the Django web framework for the
backend, along with HTML, CSS, and JavaScript for the
frontend development. The main purpose of this project is
to provide a seamless online shopping experience for users
and a robust management system for administrators and
sellers.
Purpose:
The primary purpose of this project is to offer an efficient
and user-friendly online shopping platform where users
can: Register and log in to their accounts.
Browse through a variety of product categories.
Search for specific products using keywords.
Add products to their shopping cart.
Place orders and track their purchase history.
Provide ratings and reviews for products.
Importance:
In today’s digital age, online shopping has become an
integral part of daily life. An increasing number of
consumers prefer to shop online due to the convenience and
time savings it offers. This project aims to address this
demand by providing a comprehensive and easy-to-use
online shopping solution.
The importance of this project includes:
Convenience: Users can shop from the comfort of their
homes, reducing the need for physical store visits.
Accessibility: The platform is accessible 24/7, allowing
users to shop at any time.
Efficiency: The system streamlines the shopping process,
from browsing to checkout, ensuring a smooth user
experience.
Scalability: The platform can be scaled to include a wide
range of products and categories, accommodating business
growth.
Analytics: The platform allows administrators to track user
behavior and sales patterns, aiding in better decision-
making and marketing strategies.
By integrating key features like user authentication,
product management, shopping cart functionality, and
order processing, this project demonstrates the practical
application of web development technologies to solve real-
world problems. The project not only serves as a learning
experience for the developers but also creates a valuable
tool for businesses looking to expand their online presence.
 1.2 PROJECT SCOPE

User Management:
User registration and login.
Profile management.
Password recovery and reset functionality.

Product Management:
Adding, editing, and deleting products.
Categorization of products.
Product detail pages with images, descriptions, and prices.

Shopping Cart:
Adding and removing products.
Viewing the cart with a summary of selected items.
Updating product quantities in the cart.

Order Management:
Placing orders and processing payments.
Viewing order history and tracking orders.
Order management interface for administrators.

Search and Filter:

Search functionality for finding products.
Filtering products by categories, price range, and ratings.

User Interaction:
Product ratings and reviews.
Wishlist functionality.
 1.3 TOOLS AND
TECHNOLOGIES

2.1 Programming Languages and Frameworks

Python: For backend logic and server-side programming.

Django: Web framework for the backend.
HTML/CSS: For structuring and styling the web pages.
JavaScript: For client-side scripting and interactivity.

2.2 Database

Specify the database used (e.g., SQLite, PostgreSQL,

MySQL).
 CONCLUSION
The ‘Online Shopping’ is designed to provide a web based
application that would make searching, viewing and selection
of a product easier. The search engine provides an easy and
convenient way to search for products where a user can Search
for a product interactively and the search engine would refine
the products available based on the user’s input. The user can
then view the complete specification of each product. They can
also view the product reviews and also write their own reviews.
Use of Ajax components would make the application interactive
and prevents annoying post backs. Its drag and drop feature
would make it easy to use.
 System Requirement Analysis

2.1 Information Gathering

As the goal of the application is ease of use and to provide an
interactive
interface, extensive research has been done to gain an insight
into the needs and
behaviors of various users. The working of the application is
made convenient and easy
to use for the end user. Dr Andresen, Associate Professor, CIS
provided regular feedback
on the project.
Users can be classified into two types based on their knowledge
of the products
that suit their needs. They can be classified as users who know
about the product that
would satisfy their needs and users who have to figure out the
product that would satisfy
their needs. Users who know about the product should be able
to find the product easily
with the click of a button. Such users can search for the product
by using the product
name as the search term. Users who have to figure out the
product that would satisfy their
needs could use a search term to find a list of products and then
should be able to filter
the results based on various parameters like product type,
manufacturer, price range,
platform supported etc.
The users should be able to view the complete specification of
the product and
various images at different Zoom levels. The user should be
able to read the customer
reviews for the product and the ratings provided. They should
be able to write their own
reviews. They should be able to print out the specifications for a
product or email the
product page to a friends etc.
To increase the ease of use the user should be able to add a
product to the
shopping cart by dragging a product and dropping it in the
shopping cart. A user should
able to edit the contents of a shopping cart. They should be able
to update the quantities
of the products added to the cart and remove the products from
the cart. The user should
be able to remove the product from the shopping cart by
dragging the product and
dropping it outside the cart.
The application can be made interactive by pop up messages
when a product has
been dropped in to the shopping cart or out of the shopping cart.
The user can be notified
4
if the cursor enters a drop area and the object that could be
dropped. Also users are
impatient making it important to load pages soon.
Other than this, I did a lot of research on various other methods
of building this
application which and was able to incorporate a few stronger
features into the application.
The tools and controls used in the application are recommended
ASP.NET controls and
AJAX Toolkit controls which improves the navigation and
usability and interactivity.
2.2 System Feasibility
The system feasibility can be divided into the following sections:
2.2.1 Economic Feasibility
The project is economically feasible as the only cost involved is having a
computer with the minimum requirements mentioned earlier. For the
users to access the
application, the only cost involved will be in getting access to the
Internet.
2.2.3 Behavioral Feasibility
The application requires no special technical guidance and all the views
available
in the application are self explanatory. The users are well guided with
warning and failure
messages for all the actions taken.
Coustomer Login Page and Registration Page

Customer have to login before adding product in cart. In this page existing
customer can login to buy product and new user can create an account for
buying the product.

Figure of user login and registration page given below

ADD TO CART PAGE
To buy a product the customer have to add product to cart. Also customer
can view the product details, as well as large view by putting the cursor
over the product image. The

figure of adding product to cart given below:

CHECKOUT AND ADD SHIPPING
INFORMATION

From the customer panel before adding shipping information he can see the
product details, also have to add.

Shipping information. The figure of Final Checkout and Add Shipping

Information method given below:
PAYMENT METHOD
There are only cash on delivery method of payment to pay to product cost. After selecting the
payment method customer have to confirm the order.

The figure of payment method given below:

 ADMIN HOME PAGE

Admin will get different menu in his panel after login with valid user id and
password. The menu admin will get are Category, under category will get submenu
Add Category, Manage Category and Archive Category. He will also get
Manufacturer menu, under Manufacturer menu will get submenu Add
Manufacturer, Manage Manufacturer. He will get Add product, Manage Product
and Archive Product submenu under product menu. The customer request for
product will show on Manager Order menu.

Figure of Admin Home Page is given below:

 ADD PRODUCT
From admin panel admin Add Product that will show in home page if admin select the
publication status as published, and will not show if he select publication status as
unpublished. Figure of Add Product given below:
 MANAGE PRODUCT

Manage Product is an important part of admin panel, for setting status that the Product will
show or not in home page, admin can select this. He can view, edit and delete the product
from Manage Product submenu. Figure of Manage Product given below:
 DELETE PRODUCTS
Unused Product or the product the company decided to stop sell permanently can delete,
before deleting it, a notification will come to reconfirm that admin sure he wants to delete it.
Figure of Delete Product given below:
 ΜΑΝAGE ORDER
The product which were ordered by the customer can manage from this menu. When a
product delivered to the customer, and customer paid for this, then need to change product
order status to delivered and paid, that can be done from this menu.
Figure of Manage Order given below:
 EDIT ORDER STATUS

The product that delivered the customer have to change the product deliver status as
delivered and as a result the product will not display at admin page.
 System Analysis

After carefully analyzing the requirements and functionality of the web

application, I had two important diagrams by the end of the analysis phase. They
are the
ER diagram and data flow diagram which were the basis for finding out entities
and
relationships between them, the flow of information.

ER Diagram:

Figure : Entity RelationShip Diagram

 Data Flow Diagram
Level-0

Figure: A Context Level Diagram

Data Flow Diagram

Level-1

Figure: A Context Level Diagram

 Data Flow Diagram
Level-2

Figure: A Context Level Diagram

Use Case Diagram

Figure : Use Case Diagram

 CODE OF HTML

{% extends 'app/base.html' %}
{% load static %}
{% block title %}Address{% endblock title %}
{% block main-content %}
<div class="container my-5">
<div class="row">
<h3>Welcome <span class="text-capitalize">{{request.user}}</span></h3>
<div class="col-sm-2 border-end">
<ul class="list-unstyled">
<li class="d-grid"><a href="{% url 'profile' %}" class="btn">Profile</a></li>
<li class="d-grid"><a href="{% url 'address' %}" class="btn
{{active}}">Address</a></li>
</ul>
</div>
<div class="col-sm-9 offset-sm-1">
<div class="row">
{% for ad in add %}
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h3>Address: {{ forloop.counter }}</h3>
<p>Name: {{ad.name}}</p>
<p>Locality: {{ad.locality}}</p>
<p>City: {{ad.city}}</p>
ADD TO CART:

{% extends 'app/base.html' %}
{% load static %}
{% block title %}Cart{% endblock title %}
{% block main-content %}
<div class="container my-5">
{% comment %} Below Code will be used by add_to_cart view {% endcomment %}
{% if messages %}
{% for message in messages %}
<p {% if message.tags %} class="alert alert-{{message.tags}} mb-5" {% endif
%}>{{message}}</p>
{% endfor %}
{% endif %}
<div class="row">
<h1 class="text-center mb-5">Shopping Cart</h1>
<div class="col-sm-8">
<div class="card">
<div class="card-body">
<h3>Cart Items</h3>
{% for cart in carts %}
<hr>
<div class="row">
<div class="col-sm-3 text-center align-self-center"><img
src="{{cart.product.product_image.url}}" alt=""
srcset="" class="img-fluid img-thumbnail shadow-sm" height="150"
width="150"> </div>
<div class="col-sm-9">
<div>
<h5>{{cart.product.title}}</h5>
<p class="mb-2 text-muted small">{{cart.product.description}}</p>
<div class="my-3">
<label for="quantity">Quantity:</label>

<a class="minus-cart btn" pid="{{cart.product.id}}"><i class="fas fa-minus-

square fa-lg"></i></a>
<span id="quantity">{{cart.quantity}}</span>
<a class="plus-cart btn" pid="{{cart.product.id}}"><i class="fas fa-plus-
square fa-lg"></i></a>

</div>
<div class="d-flex justify-content-between">
 <a class="btn btn-sm btn-secondary mr-3 remove-cart"
pid={{cart.product.id}}>Remove item </a>
<p class="mb-0"><span><strong>Rs.
{{cart.product.discounted_price}}</strong></span></p>
</div>
</div>

</div>
</div>

{% endfor %}
</div>
</div>
</div>

<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h3>The Total Amount of</h3>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center
border-0 px-0 pb-0">
Amount<span>Rs. <span id="amount">{{amount|floatformat:2}}</span>
</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center
border-0 px-0">
Shipping<span>Rs. 70.00</span></li>
<hr>
<li class="list-group-item d-flex justify-content-between align-items-center
border-0 px-0 mb-3">
<div>
<strong>Total</strong> <small>(including VAT)</small>
</div>
<span><strong>Rs. </strong><strong id="totalamount">
{{totalamount|floatformat:2}}</strong></span>
</li>
</ul>
<div class="d-grid"><a href="{% url 'checkout' %}" class="btn btn-danger fw-
bold">Place Order</a></div>
</div>
</div>
</div>

</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="card">
<div class="card-body">
<h5 class="mb-4">Cash on delivery available</h5>
</div>
</div>
</div>
</div>
</div>
{% endblock main-content %}

<!doctype html>
{% load static %}
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]
beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-
giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">

<!-- Font Awesome CSS -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css"
integrity="sha512-
iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgy
AHIhR35VZc2oM/gI1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />

<!--Owl Carousel CSS-->

<link rel="stylesheet" href="{% static 'app/css/owl.carousel.min.css' %}">

<!--FontAwesome CSS-->
<link rel="stylesheet" href="{% static 'app/css/all.min.css' %}">
 <!--Custom CSS-->
<link rel="stylesheet" href="{% static 'app/css/style.css' %}">

<title>Online Shopping | {% block title %} {% endblock title %} </title>

</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<div class="container">
<a class="navbar-brand" href="/">Online Shopping</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#"
id="electronicsDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Electronics
</a>
<ul class="dropdown-menu" aria-labelledby="electronicsDropdown">
<li><a class="dropdown-item" href="{% url 'mobile' %}">Mobile</a></li>
<li><a class="dropdown-item" href="{% url 'laptop' %}">Laptop</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#"
id="fashionDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Fashion
</a>
<ul class="dropdown-menu" aria-labelledby="fashionDropdown">
<li><a class="dropdown-item" href="{% url 'top_were' %}">Top
Wear</a></li>
 <li><a class="dropdown-item" href="{% url 'bottom_were' %}">Bottom
Wear</a></li>
</ul>
</li>
</ul>
<form method="GET" action="{% url 'search' %}" class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-
label="Search" name="search"
id="search">
<button class="rounded-3" type="submit"><i class="fas fa-
search"></i></button>
</form>
<div>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
{% if request.user.is_authenticated %}
<li class="nav-item dropdown mx-2">
<a class="nav-link dropdown-toggle text-white" href="#"
id="profileDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
{{request.user.username|capfirst}}
</a>
<ul class="dropdown-menu" aria-labelledby="profileDropdown">
<li><a class="dropdown-item" href="{% url 'profile' %}">Profile</a></li>
<li><a class="dropdown-item" href="{% url 'orders' %}">Orders</a></li>
<li><a class="dropdown-item" href="{% url 'passwordchange' %}">Change
Password</a></li>
<li><a class="dropdown-item" href="{% url 'logout' %}">Logout</a></li>
</ul>
</li>
<li class="nav-item mx-2">
<a href="{% url 'showcart' %}" class="nav-link text-white"><span
class="badge bg-danger">{{totalitem}}</span> Cart </a>
</li>
{% else %}
<li class="nav-item mx-2">
<a href="{% url 'login' %}" class="nav-link text-white">Login</a>
</li>
<li class="nav-item mx-2">
<a href="{% url 'customerregistration' %}" class="nav-link text-
white">Registration</a>
</li>
{% endif %}
</ul>
</div>
 </div>
</div>
</nav>
{% block banner_slider %} {% endblock banner_slider %}
{% block livesale %} {% endblock livesale %}
{% block main-content %} {% endblock main-content %}

<!-- Start Footer -->

<footer class="container-fluid bg-dark text-center p-2 mt-5">
<small class="text-white">Copyright &copy; 2024 </small>
</footer> <!-- End Footer -->

<!-- Jquery -->

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]
beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous">
</script>
<!-- Font Awesome Js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/js/all.min.js"
integrity="sha512-
RXf+QSDCUQs5uwRKaDoXt55jygZZm2V++WUZduaU/Ui/9EGp3f/2KZVahFZBKGH0s77
4sd3HmrhUy+SgOFQLVQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="{% static 'app/js/owl.carousel.min.js' %}"></script>

<script src="{% static 'app/js/all.min.js' %}"></script>
<script src="{% static 'app/js/myscript.js' %}"></script>
</body>

</html>
<p>State: {{ad.state}}</p>
<p>Pin Code: {{ad.zipcode}}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock main-content %}
{% extends 'app/base.html' %}
{% load static %}
{% block title %}Buttom_Ware{% endblock title %}
{% block main-content %}
<div class="container my-5">
<div class="row">
{% for product in bottomWere %}
<div class="col-sm-4 text-center mb-4">
<a href="{% url 'product-detail' product.id %}" class="btn">
<div class="item">
<img src="{{product.product_image.url}}" alt="" height="300" class="">
<div class="fw-bold">{{product.title}}</div>
<div class="fw-bold">Rs. {{product.discounted_price}} <small
class="fw-light text-decoration-line-
through">{{product.selling_price}}</small></div>
</div>
</a>
</div>
{% endfor %}
</div>
</div>

{% endblock main-content %}
CSS CODE

.owl-carousel .item{
/* border: 1px solid black; */
font-size: 24px;
text-align: center;
margin-top: 20px;;
}

.owl-next{
float:right;
}
.owl-prev{
float:left;
}
.owl-prev span{
font-size: 24px;
font-weight: bold;
}
.owl-next span{
font-size: 24px;
font-weight: bold;
}

Javascripts:

$("#slider1, #slider2, #slider3, #slider4").owlCarousel({

loop: true,
margin: 20,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: false,
autoplay: true,
},
600: {
items: 3,
nav: true,
 autoplay: true,
},
1000: {
items: 5,
nav: true,
loop: true,
autoplay: true,
},
},
});

$(".plus-cart").click(function () {
var id = $(this).attr("pid").toString();
var eml = this.parentNode.children[2];
console.log(eml);
$.ajax({
type: "GET",
url: "/pluscart",
data: {
prod_id: id,
},
success: function (data) {
console.log(data);
eml.innerText = data.quantity;
document.getElementById("amount").innerText = data.amount.toFixed(2);
document.getElementById("totalamount").innerText =
data.totalamount.toFixed(2);
},
});
});

$(".minus-cart").click(function () {
var id = $(this).attr("pid").toString();
var eml = this.parentNode.children[2];
$.ajax({
type: "GET",
url: "/minuscart",
data: {
prod_id: id,
},
success: function (data) {
console.log(data);
eml.innerText = data.quantity;
document.getElementById("amount").innerText = data.amount.toFixed(2);
 document.getElementById("totalamount").innerText =
data.totalamount.toFixed(2);
},
});
});

$(".remove-cart").click(function () {
var id = $(this).attr("pid").toString();
var elm = this;
$.ajax({
type: "GET",
url: "/removecart",
data: {
prodii_id: id,
},
success: function (data) {
console.log(data);
document.getElementById("amount").innerText = data.amount;
document.getElementById("totalamount").innerText = data.totalamount;
console.log("**********");
console.log(elm.parentNode.parentNode.parentNode.parentNode);
console.log("#############");
elm.parentNode.parentNode.parentNode.parentNode.remove();
debugger;
location.reload();
},
});
});
Python code:
from django.contrib import admin
from django.utils.html import format_html
from django.urls import reverse
from .models import (
Customer,
Product,
Cart,
OrderPlaced
)
@admin.register(Customer)
class CustomerModelAdmin(admin.ModelAdmin):
list_display = ['id', 'user', 'name', 'locality', 'city', 'zipcode', 'state']

@admin.register(Product)
class ProductModelAdmin(admin.ModelAdmin):
list_display = ['id', 'title', 'selling_price', 'discounted_price', 'description',
'brand', 'category', 'product_image']

@admin.register(Cart)
class CartModelAdmin(admin.ModelAdmin):
list_display = ['id', 'user', 'product', 'quantity']

@admin.register(OrderPlaced)
class OrderPlacedModelAdmin(admin.ModelAdmin):
list_display = ['id', 'user', 'customer', 'customer_info', 'product',
'product_info', 'quantity', 'ordered_date', 'status']

def product_info(self, obj):

link = reverse("admin:app_product_change", args=[obj.product.pk])
return format_html('<a href="{}">{}</a>', link, obj.product.title)

def customer_info(self, obj):

link = reverse("admin:app_customer_change", args=[obj.customer.pk])
return format_html('<a href="{}">{}</a>', link, obj.customer.name)
from django import forms
from django.contrib.auth.forms import UserCreationForm,
AuthenticationForm, PasswordChangeForm, UsernameField,
PasswordResetForm, SetPasswordForm
from django.contrib.auth.models import User
from django.utils.translation import gettext, gettext_lazy as _
from .models import Customer
from django.contrib.auth import password_validation
from django.forms import ValidationError

class CustomerRegistrationForm(UserCreationForm):
password1 = forms.CharField(label='Password',
widget=forms.PasswordInput(attrs={'class':'form-control'}))
password2 = forms.CharField(label='Confirm Password (again)',
widget=forms.PasswordInput(attrs={'class':'form-control'}))
email = forms.CharField(required=True,
widget=forms.EmailInput(attrs={'class':'form-control'}))
class Meta:
model = User
fields = ['username', 'email']
labels = {'email': 'Email'}
widgets = {'username':forms.TextInput(attrs={'class':'form-control'})}

# Email Validation
def clean_email(self):
email=self.cleaned_data['email']
print(email)
user=None
try:
user=User.objects.get(email=email)
except:
return email
if(user is not None):
raise ValidationError("Email Already Exists")
class LoginForm(AuthenticationForm):
username = UsernameField(widget=forms.TextInput(attrs={'autofocus':
True, 'class':'form-control'}))
password = forms.CharField(label=_("Password"), strip=False,
widget=forms.PasswordInput(attrs={'autocomplete': 'current-password',
'class':'form-control'}))

class MyPasswordChangeForm(PasswordChangeForm):
old_password = forms.CharField(label=_("Old Password"), strip=False,
widget=forms.PasswordInput(attrs={'autocomplete': 'current-password',
'autofocus':True, 'class':'form-control'}))
new_password1 = forms.CharField(label=_("New Password"),
strip=False, widget=forms.PasswordInput(attrs={'autocomplete': 'new-
password', 'class':'form-control'}),
help_text=password_validation.password_validators_help_text_html())
new_password2 = forms.CharField(label=_("Confirm New Password"),
strip=False, widget=forms.PasswordInput(attrs={'autocomplete': 'new-
password','class':'form-control'}))

class MyPasswordResetForm(PasswordResetForm):
email = forms.EmailField(label=_("Email"), max_length=254,
widget=forms.EmailInput(attrs={'autocomplete': 'email', 'class':'form-
control'}))

class MySetPasswordForm(SetPasswordForm):
new_password1 = forms.CharField(label=_("New Password"),
strip=False, widget=forms.PasswordInput(attrs={'autocomplete': 'new-
password', 'class':'form-control'}),
help_text=password_validation.password_validators_help_text_html())
new_password2 = forms.CharField(label=_("Confirm New Password"),
strip=False, widget=forms.PasswordInput(attrs={'autocomplete': 'new-
password','class':'form-control'}))

class CustomerProfileForm(forms.ModelForm):
class Meta:
 model = Customer
fields = ['name', 'locality', 'city', 'state', 'zipcode']
widgets = {'name':forms.TextInput(attrs={'class':'form-
control'}),'locality':forms.TextInput(attrs={'class':'form-control'}),
'city':forms.TextInput(attrs={'class':'form-control'}),
'state':forms.Select(attrs={'class':'form-control'}),
'zipcode':forms.NumberInput(attrs={'class':'form-control'})}

from django.db import models

from django.contrib.auth.models import User
from django.core.validators import MaxValueValidator,
MinValueValidator
STATE_CHOICES = (
('Andaman & Nicobar Islands', 'Andaman & Nicobar Islands'),
('Andhra Pradesh', 'Andhra Pradesh'),
('Arunachal Pradesh', 'Arunachal Pradesh'),
('Assam', 'Assam'),
('Bihar', 'Bihar'),
('Chandigarh', 'Chandigarh'),
('Chhattisgarh', 'Chhattisgarh'),
('Dadra & Nagar Haveli', 'Dadra & Nagar Haveli'),
('Daman and Diu', 'Daman and Diu'),
('Delhi', 'Delhi'),
('Goa', 'Goa'),
('Gujarat', 'Gujarat'),
('Haryana', 'Haryana'),
('Himachal Pradesh', 'Himachal Pradesh'),
('Jammu & Kashmir', 'Jammu & Kashmir'),
('Jharkhand', 'Jharkhand'),
('Karnataka', 'Karnataka'),
('Kerala', 'Kerala'),
('Lakshadweep', 'Lakshadweep'),
('Madhya Pradesh', 'Madhya Pradesh'),
('Maharashtra', 'Maharashtra'),
('Manipur', 'Manipur'),
('Meghalaya', 'Meghalaya'),
('Mizoram', 'Mizoram'),
 ('Nagaland', 'Nagaland'),
('Odisha', 'Odisha'),
('Puducherry', 'Puducherry'),
('Punjab', 'Punjab'),
('Rajasthan', 'Rajasthan'),
('Sikkim', 'Sikkim'),
('Tamil Nadu', 'Tamil Nadu'),
('Telangana', 'Telangana'),
('Tripura', 'Tripura'),
('Uttarakhand', 'Uttarakhand'),
('Uttar Pradesh', 'Uttar Pradesh'),
('West Bengal', 'West Bengal'),
)

class Customer(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
name = models.CharField(max_length=200)
locality = models.CharField(max_length=200)
city = models.CharField(max_length=50)
zipcode = models.IntegerField()
state = models.CharField(choices=STATE_CHOICES, max_length=50)

def __str__(self):
# return self.user.username
return str(self.id)

CATEGORY_CHOICES = (
('M', 'Mobile'),
('L', 'Laptop'),
('TW', 'Top Wear'),
('BW', 'Bottom Wear'),
)

class Product(models.Model):
 title = models.CharField(max_length=100)
selling_price = models.FloatField()
discounted_price = models.FloatField()
description = models.TextField()
brand = models.CharField(max_length=100)
category = models.CharField(choices=CATEGORY_CHOICES,
max_length=2)
product_image = models.ImageField(upload_to='productimg')

def __str__(self):
return str(self.id)

class Cart(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
product = models.ForeignKey(Product, on_delete=models.CASCADE)
quantity = models.PositiveIntegerField(default=1)

def __str__(self):
return str(self.id)

# Below Property will be used by checkout.html page to show total

cost in order summary
@property
def total_cost(self):
return self.quantity * self.product.discounted_price

STATUS_CHOICES = (
('Accepted', 'Accepted'),
('Packed', 'Packed'),
('On The Way', 'On The Way'),
('Delivered', 'Delivered'),
('Cancel', 'Cancel')
)
class OrderPlaced(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
customer = models.ForeignKey(Customer,
on_delete=models.CASCADE)
product = models.ForeignKey(Product, on_delete=models.CASCADE)
quantity = models.PositiveIntegerField(default=1)
ordered_date = models.DateTimeField(auto_now_add=True)
status = models.CharField(
max_length=50, choices=STATUS_CHOICES, default='Pending')

# Below Property will be used by orders.html page to show total cost

@property
def total_cost(self):
return self.quantity * self.product.discounted_price

from django.urls import path

from app import views
from django.conf import settings
from django.conf.urls.static import static
from django.contrib.auth import views as auth_views
from .forms import LoginForm, MyPasswordChangeForm,
MyPasswordResetForm, MySetPasswordForm
urlpatterns = [
path('', views.ProductView.as_view(), name="home"),

path('product-detail/<int:pk>/', views.ProductDetailView.as_view(),
name='product-detail'),
path('add-to-cart/', views.add_to_cart, name='add-to-cart'),
path('buy-now/', views.buynow, name='buy-now'),
# path('checkoutbuy/', views.checkout_buy, name='checkoutbuy'),
path('cart/', views.show_cart, name='showcart'),
path('pluscart/', views.plus_cart),
path('minuscart/', views.minus_cart),
path('removecart/', views.remove_cart),
path('checkout/', views.checkout, name='checkout'),
path('address/', views.address, name='address'),
path('orders/', views.orders, name='orders'),
 path('paymentdone/', views.payment_done, name='paymentdone'),

path('mobile/', views.mobile, name='mobile'),

path('mobile/<slug:data>', views.mobile, name='mobiledata'),
path('laptop/', views.laptop, name='laptop'),
path('top_were/', views.top_were, name='top_were'),
path('bottom_were/', views.bottom_were, name='bottom_were'),
path('search/',views.scarch, name='search'),

# ------------------------------------------------------------
path('accounts/login/',
auth_views.LoginView.as_view(template_name='app/login.html',
authentication_form=LoginForm), name='login'),
# path('profile/', views.profile, name='profile'),
path('profile/', views.ProfileView.as_view(), name='profile'),
path('logout/', auth_views.LogoutView.as_view(next_page='login'),
name='logout'),
path('passwordchange/',
auth_views.PasswordChangeView.as_view(template_name='app/passwo
rdchange.html', form_class=MyPasswordChangeForm,
success_url='/passwordchangedone/'), name='passwordchange'),
path('passwordchangedone/',
auth_views.PasswordChangeDoneView.as_view(template_name='app/p
asswordchangedone.html'), name='passwordchangedone'),

path("password-reset/",
auth_views.PasswordResetView.as_view(template_name='app/passwor
d_reset.html', form_class=MyPasswordResetForm),
name="password_reset"),
path("password-reset/done/",
auth_views.PasswordResetDoneView.as_view(template_name='app/pas
sword_reset_done.html'), name="password_reset_done"),
path("password-reset-confirm/<uidb64>/<token>/",
auth_views.PasswordResetConfirmView.as_view(template_name='app/p
assword_reset_confirm.html', form_class=MySetPasswordForm),
name="password_reset_confirm"),
 path("password-reset-complete/",
auth_views.PasswordResetCompleteView.as_view(template_name='app
/password_reset_complete.html'), name="password_reset_complete"),

path('registration/', views.CustomerRegistrationView.as_view(),
name='customerregistration')
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
 FUTURE SCOPE
➢ In our project Online Payment System is not available. In
future developer may be include this service.
➢ In our Project Users verification is not available, In future
developer can update it.
➢ The current system can be extended to allow the users to
create accounts and
➢ save products in to wish list.
➢ The users could subscribe for price alerts which would
enable them to receive
➢ messages when price for products fall below a particular
level.
➢ The current system is confined only to the shopping cart
process. It can be
➢ extended to have an easy to use check out process.
➢ Users can have multiple shipping and billing information
saved. During
➢ checkout they can use the drag and drop feature to select
shipping and billing