Online Bookstore Management

System in Python Django with Source

Code
We offer you a brighter future with FREE online courses - Start Now!!
Let us develop a bookstore management system using Python Django where
the customers can buy the books online and an admin panel to handle the
entire system. You will also be able to gain much knowledge in Django and
how to handle back-end databases.

About the Django Bookstore Management

System Project
With this project, it will be very easy to manage all the records in a bookstore.
All the customers can buy books from the books list visible to them and also
are able to request for a book which is not available in the books list. The
admin of the bookstore can add new books or delete a book from the list. The
admin can also see all the requested books by the customers and try to make
them available. Lastly, the admin can see all the customers listed with their
orders.

Django Bookstore Management System

Project
The objective of the project is to implement a bookstore management system
where users can buy books and also can request for a book if that particular
book is not available in the table displayed to the users. The admin should be
able to manage the entire system. Basic knowledge of the front-end part and a
good knowledge of Django is required to complete and understand the project.

Project Prerequisites
Must have created 2 to 3 very easy projects using Django Python Framework
so that you have the basic knowledge.

Download Bookstore Management Django

Project Code
Please download the source code of python django bookstore management
system from the following link: Bookstore Management System Python Django
Project
Project File Structure
Steps for Bookstore Management System in Django Project:

1. Create a project and inside the project create an app.

2. Then you need to create 3 folders for templates, static (css and javascript
files) and media (images uploaded through back end).

3. You can then run the migrate command and then create the superuser for
the project.

4. Then you are good to go and start making the urls and views as per required
for the project.

Let’s start.

1. First of all we create the first page of our project

which a contains a navigation bar and a carousel
(index.html):
Navigation bar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/">ProjectGurukul Bookstore</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">
<a class="nav-link" href="/for_users/">Users</a>
</li>
</ul>
{% if user.is_authenticated %}
<form class="d-flex" >
<a class="nav-link" href="#">Welcome {{request.user}}</a>
<a href="/logout/" class="btn btn-outline-success mx-4" type="submit">Logout</a>
{% else %}
<form class="d-flex" >
<a href="/signup/" class="btn btn-outline-dark" type="submit">Sign Up</a>
<a href="/user_login/" class="btn btn-outline-dark mx-4" type="submit">Login</a>
</form>
{% endif %}
</div>
</div>
</nav>

Carousel:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 " height="500px" src="{% static 'Bookstore image04.jpg' %}" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 " height="500px" src="{% static 'Bookstore image02.jpg' %}" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 " height="500px" src="{% static 'Bookstore image04.jpg' %}" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Code Explanation:
A simple bootstrap navigation bar is created and a carousel. Carousel is a set
of slideshow or rotating images. Generally, two or three images are used in a
carousel.

Models.py:
from django.db import models
from django.contrib.auth.models import User
class Book(models.Model):
CATEGORY = (
('Mystery', 'Mystery'),
('Thriller', 'Thriller'),
('Sci-Fi', 'Sci-Fi'),
('Humor', 'Humor'),
('Horror', 'Horror'),
)
book_name = models.CharField(max_length=100)
author = models.CharField(max_length=100, default="")
category = models.CharField(max_length=100, choices=CATEGORY)
price = models.FloatField()
stock = models.IntegerField(default=2)
def __str__ (self):
return self.book_name
class Order(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE, default=1)
items_json = models.CharField(max_length=5000, blank=True)
price = models.IntegerField(default=0)
name = models.CharField(max_length=100, blank=True)
email = models.CharField(max_length=100, blank=True)
address = models.CharField(max_length=100, default="")
phone = models.CharField(max_length=100, blank=True)
date = models.DateTimeField(auto_now_add=True)
def __str__ (self):
return str(self.user)
class Request_Book(models.Model):
book_name = models.CharField(max_length=100)
author = models.CharField(max_length=100)
user = models.ForeignKey(User, on_delete=models.CASCADE, default=1)
def __str__ (self):
return self.book_name

Code Explanation:
Three models are being created: Book, Order, Request_Book. Book table
consists of all the books. Request_Book table contains all the requested books
from the customers and the Order table consists of all the orders of the books
by different users.

Then user registration page is created (signup.html)

<form action="/signup/" method="post" class="forming"> {% csrf_token %}
<h1>Sign Up</h1>
<label for="name">First Name:</label>
<input type="text" id="first_name" name="first_name" required>
<label for="name">Last Name:</label>
<input type="text" id="last_name" name="last_name" required>
<label for="name">Username:</label>
<input type="text" id="username" name="username" required>
<label for="mail">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password1" name="password1" required>
<label for="password">Confirm Password:</label>
<input type="password" id="password2" name="password2" required>
<button class="signup" type="submit">Sign Up</button>
</form>
Views.py
def Usersignup(request):
if request.user.is_authenticated:
return redirect('/')
else:
if request.method=="POST":
username = request.POST['username']
email = request.POST['email']
first_name=request.POST['first_name']
last_name=request.POST['last_name']
password1 = request.POST['password1']
password2 = request.POST['password2']
if password1 != password2:
messages.info(request, "Passwords do not match.")
return redirect('/signup')
user = User.objects.create_user(username, email, password1)
user.first_name = first_name
user.last_name = last_name
user.save()
return render(request, 'user_login.html')
return render(request, "signup.html")

Code Explanation:
For creating a new user, we have to create a registration method. In this, we
take the related information from the user and if the information is valid then
it is saved in the Django User model. We can also extend this model with a
new model.

3. Then user login page is created only for the

registered users (user_login.html)
<form action="/user_login/" method="post" class="forming"> {% csrf_token %}
<h1>User Login</h1>
<label for="name">Username:</label>
<input type="text" id="user_username" name="user_username">
<label for="password">Password:</label>
<input type="password" id="user_password" name="user_password">
<button class="login" type="submit">Login</button>
</form>
Views.py
def User_login(request):
if request.user.is_authenticated:
return redirect('/')
else:
if request.method=="POST":
user_username = request.POST['user_username']
user_password = request.POST['user_password']
user = authenticate(username=user_username, password=user_password)
if user is not None:
login(request, user)
messages.success(request, "Successfully Logged In")
return redirect("/for_users")
else:
messages.error(request, "Please provide a valid username and password")
return render(request, "user_login.html")

Code Explanation:
Login is very important. Using the username and password the users can login
into their accounts. Using the Django authenticate function the user details
are matched with the saved details of the same user taken while registering.

4. After the login users can see all the available books
list in the bookstore (for_users.html) :
<li class="nav-item">
<a class="nav-link btn btn-light" href="/checkout/" aria-current="page" >Cart
(<span id="cart">0</span>)</a>
</li>

Code Explanation:
A cart option is made in the navigation bar cart(0). Zero specifies the cart
items which are given the id of the cart.

<div class="row">
<div class="col-md">
<div class="card card-body">
<h5>All Books ({{total_books}})</h5>
</div>
<div class="card card-body">
<table class="table">
<thead>
<tr>
<th>Book Name</th>
<th>Author</th>
<th>Category</th>
<th>Price</th>
<th>Stock</th>
<th>Add To Cart</th>
<th>Quantity</th>
</tr>
</thead>
{% for book in books %}
<tr>
<td id="namepr{{book.id}}">{{book.book_name}}</td>
<td id="authorpr{{book.id}}">{{book.author}}</td>
<td id="categorypr{{book.id}}">{{book.category}}</td>
<td> ₹<span id="pricepr{{book.id}}">{{book.price}}</span></td>
<td id="stock{{book.id}}">{{book.stock}}</td>
<td><button id="pr{{book.id}}" class="btn btn-info cart">Buy Now</button></td>
<td class="divpr" id="divpr{{book.id}}"></td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>

Views.py
@login_required(login_url = '/user_login')
def Users(request):
books = Book.objects.all()
total_books = books.count()
return render (request, "for_user.html", {'books':books, 'total_books':total_books})

Code Explanation:
A table is created which contains the book name, author name, category of
book, price of the book, the stock available of that book, a buy now button and
finally quantity of that book the user wants. Whenever a new book will be
added by the admin it will automatically get displayed in this table as a for
loop is used.

total_books = books.count()

This line saves the total count of the books in total_books variable which can
be used in the templates later.

if (localStorage.getItem('cart') == null) {
var cart = {};
} else {
cart = JSON.parse(localStorage.getItem('cart'));
updateCart(cart);
}

Code Explanation:
If the cart does not exist then it will create a new cart else it will add the item
in the existing cart and update the cart.

function updateCart(cart) {
for(var items in cart){
document.getElementById('div' + items).innerHTML = "<button id='minus" + items + "' class='btn btn-primary
minus'>-</button> <span id='val" + items + "''>" + cart[items][0] + "</span> <button id='plus" + items + "' class='btn btn-
primary plus'> + </button>";
}
localStorage.setItem('cart', JSON.stringify(cart));
console.log(cart);
document.getElementById('cart').innerHTML = Object.keys(cart).length;
}

Code Explanation:
In the update cart function, it will save the quantity that the user selects and
according to it will update the cart.

$('.quantity').on("click", "button.minus", function() {

a = this.id.slice(7, );
cart['pr' + a][0] = cart['pr' + a][0] - 1;
cart['pr' + a][0] = Math.max(0, cart['pr' + a][0])
document.getElementById('valpr' + a).innerHTML = cart['pr' + a][0];
updateCart(cart);
});

Code Explanation:
The class quantity is given to the minus button, so when the user clicks on the
minus button it will decrement the item quantity. Using the Math class item
quantity cannot take a negative number it can go up to zero.

$('.quantity').on("click", "button.plus", function() {

a = this.id.slice(6, );
stock = document.getElementById('stock' + a).innerHTML;
cart['pr' + a][0] = cart['pr' + a][0] + 1;
cart['pr' + a][0] = Math.min(cart['pr' + a][0], stock)
document.getElementById('valpr' + a).innerHTML = cart['pr' + a][0];
updateCart(cart);
});

Code Explanation:
Class quantity is also given the plus button, so when the user clicks on the plus
button it will increment the item quantity. Using the Math class the item
quantity can go up to the stock variable that is the number of the same book
available in the bookstore currently.

5. Admin can add new books (add_books.html):

<div class="container">
<form action="/add_books/" method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-light">Submit</button>
</form>
</div>

Views.py
def Add_Books(request):
if request.method=="POST":
form = BookForm(request.POST)
if form.is_valid():
form.save()
return render(request, "add_books.html")
else:
form=BookForm()
return render(request, "add_books.html", {'form':form})

Forms.py
class BookForm(forms.ModelForm):
class Meta:
model = Book
fields = '__all__'

Code Explanation:
A form is created that includes all the fields in the Book model. The admin can
add new books by submitting this form.

6. Admin can see all the requested books that the

users have requested for
(see_requested_books.html):
<div class="row">
<div class="col-md">
<div class="card card-body">
<h5>All Books</h5>
</div>
<div class="card card-body">
<table class="table">
<tr>
<th>Customer</th>
<th>Book Name</th>
<th>Author</th>
<th>Delete</th>
</tr>
{% for i in requested_book %}
<tr>
<td>{{i.user}}</td>
<td>{{i.book_name}}</td>
<td>{{i.author}}</td>
<td><a href="/delete_requested_books/delete_{{i.id}}/" class="btn btn-danger">Delete</a></td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>

Views.py
def see_requested_books(request):
requested_book = Request_Book.objects.all()
return render(request, "see_requested_books.html", {'requested_book':requested_book})

Code Explanation:
All the requested books from the users will be visible to the admin in the form
of a table. All the requested books will be saved in the Request_Book model.
Using a for loop all the data will be displayed inside a table where the admin
can see the requested books from the users and delete those requests after
making it available.

7. Admin can see all the customers list that have

ordered any books (customers_list.html):
<div class="row">
<div class="col-md">
<div class="card card-body">
<h5>All Customers</h5>
</div>
<div class="card card-body">
<table class="table">
<tr>
<th>Customer Name</th>
<th>Email Id</th>
<th>Phone No</th>
<th>Address</th>
<th>Update</th>
</tr>
{% for customer in customers %}
<tr>
<td>{{customer.name}}</td>
<td>{{customer.email}}</td>
<td>{{customer.phone}}</td>
<td>{{customer.address}}</td>
<td><a href="/customers_list/orders_{{customer.id}}/" class="btn btn-warning">View Orders</a></td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>

Views.py :
def customers_list(request):
customers = Order.objects.all()
customer_count = customers.count()
return render(request, "customers_list.html", {'customers':customers, 'customer_count':customer_count})

Code Explanation:
Admin can see all the customers’ lists in the form of a table with the basic
information that is name, email, phone number, address that the users give
while placing the order. Finally, the table consists of a button (view orders) in
each row.

8. On clicking on the view orders button admin can

see all the orders of a particular customer.
(orders_list.html):
{% block body %}
<div class="row">
<div class="col-md">
<div class="card card-body">
<h5>{{customer.name}}</h5>
</div>
<div class="card card-body">
<table class="table">
<tr>
<th>Book Name</th>
<th>Author</th>
<th>Category</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tbody id="myTable"></tbody>
</table>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
var myArray = []
const url = window.location.href;
$.ajax({
method: 'GET',
url: `${url}data`,
success: function(response){
myArray = response.data
myArray1 = JSON.parse(myArray);
console.log(myArray1)
buildTable(myArray1)
},
error: function(error){
console.log(error);
}
});
function buildTable(data){
var table = document.getElementById('myTable')
for(var items in data){
var row = `<tr>
<td>${data[items][1]}</td>
<td>${data[items][2]}</td>
<td>${data[items][3]}</td>
<td>${data[items][0]}</td>
<td>${data[items][4]}</td>
`
table.innerHTML += row
}
}
</script>
{% endblock %}

Views.py :
def orders_list(request, myid):
customer = Order.objects.filter(id=myid)
return render(request, "orders_list.html", {'customer':customer})
def data_view(request, myid):
orders = Order.objects.get(id=myid)
return JsonResponse({'data':orders.items_json})

Code Explanation:
A table is created to display the orders of the customers. Since the orders are
being stored in json inside the database, ajax is used to fetch the json data
from the database and render it into the template.

Python Bookstore Management Project

Output:
Home page for Bookstore Management System in Django:
Home page with user or admin logged in:
Login page:
Customers can buy books:
Checkout:
All requested books (admin):
Customers List (admin):
Summary
With this project in Django, we have successfully developed a Bookstore
Management System with proper front-end and back-end. It is very easy to
manage all the data by the admin of the entire bookstore with saving a lot of
time and hard work.