we’ll build a Blog application with Django that allows users to create, edit, and delete posts. The homepage will list all blog posts, and there will be a dedicated detail page for each individual post.
Creating And Activating A Virtual Environment
While building python projects, it’s a good practice to work in virtual environments to keep your project, and it’s dependency isolated on your machine. There is an entire article on the importance of virtual environments Check it out here: How To A Create Virtual Environment for Python
Windows Users
cd Desktop
virtualenv django
cd django
Scripts\activate.bat
Mac and Unix Users
mkdir django
cd django
python3 -m venv django
source django/bin/activate
Now you should see (django) prefixed in your terminal, which indicates that the virtual environment is successfully activated, if not then go through the guide again.
Installing Django In The Virtual Environment
If you have already installed Django, you can skip this section and jump straight to the Setting up the project section. To Install Django on your virtual environment run the below command
pip install Django
This will install the latest version of Django in our virtual environment. To know more about Django installation read: How To Install Django
Note – You must install a version of Django greater than 2.0
Setting Up The Project
In your workspace create a directory called mysite and navigate into it.
cd Desktop
mkdir mysite
cd mysite
Now run the following command in your shell to create a Django project.
django-admin startproject mysite
This will generate a project structure with several directories and python scripts.
├── mysite
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ ├── wsgi.py
├── manage.py
To know more about the function of the files read: Starting A Django Project
Next, we need the create a Django application called blog. A Django application exists to perform a particular task. You need to create specific applications that are responsible for providing your site desired functionalities.
Navigate into the outer directory where manage.py script exists and run the below command.
cd mysite
python manage.py startapp blog
These will create an app named blog in our project.
├── db.sqlite3
├── mysite
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ ├── wsgi.py
├── manage.py
└── blog
├── __init__.py
├── admin.py
├── apps.py
├── migrations
│ └── __init__.py
├── models.py
├── tests.py
└── views.py
Now we need to inform Django that a new application has been created, open your settings.py file and scroll to the installed apps section, which should have some already installed apps.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
Now add the newly created app blog at the bottom and save it.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blog'
]
Next, make migrations.
python manage.py migrate
This will apply all the unapplied migrations on the SQLite database which comes along with the Django installation.
Let’s test our configurations by running the Django’s built-in development server.
python manage.py runserver
Open your browser and go to this address http://127.0.0.1:8000/ if everything went well you should see this page.
Database Models
Now we will define the data models for our blog. A model is a Python class that subclasses django.db.models.Model, in which each attribute represents a database field. Using this subclass functionality, we automatically have access to everything within django.db.models.Models and can add additional fields and methods as desired. We will have a Post model in our database to store posts.
from django.db import models
from django.contrib.auth.models import User
STATUS = (
(0,"Draft"),
(1,"Publish")
)
class Post(models.Model):
title = models.CharField(max_length=200, unique=True)
slug = models.SlugField(max_length=200, unique=True)
author = models.ForeignKey(User, on_delete= models.CASCADE,related_name='blog_posts')
updated_on = models.DateTimeField(auto_now= True)
content = models.TextField()
created_on = models.DateTimeField(auto_now_add=True)
status = models.IntegerField(choices=STATUS, default=0)
class Meta:
ordering = ['-created_on']
def __str__(self):
return self.title
At the top, we’re importing the class models and then creating a subclass of models.Model Like any typical blog, each blog post will have a title, slug, author name, and the timestamp or date when the article was published or last updated.
Notice how we declared a tuple for STATUS of a post to keep draft and published posts separated when we render them out with templates.
The Meta class inside the model contains metadata. We tell Django to sort results in the created_on field in descending order by default when we query the database. We specify descending order using the negative prefix. By doing so, posts published recently will appear first.
The __str__() method is the default human-readable representation of the object. Django will use it in many places, such as the administration site.
Now that our new database model is created we need to create a new migration record for it and migrate the change into our database.
(django) $ python manage.py makemigrations
(django) $ python manage.py migrate
Now we are done with the database.
Creating An Administration Site
We will create an admin panel to create and manage Posts. Fortunately, Django comes with an inbuilt admin interface for such tasks.
In order to use the Django admin first, we need to create a superuser by running the following command in the prompt.
python manage.py createsuperuser
You will be prompted to enter email, password, and username. Note that for security concerns Password won’t be visible.
Username (leave blank to use 'user'): admin
Email address: admin@gamil.com
Password:
Password (again):
Enter any details you can always change them later. After that rerun the development server and go to the address http://127.0.0.1:8000/admin/
python manage.py runserver
You should see a login page, enter the details you provided for the superuser.
After you log in you should see a basic admin panel with Groups and Users models which come from Django authentication framework located in django.contrib.auth.
Still, we can’t create posts from the panel we need to add the Post model to our admin.
Adding Models To The Administration Site
Open the blog/admin.py file and register the Post model there as follows.
from django.contrib import admin
from .models import Post
admin.site.register(Post)
Save the file and refresh the page you should see the Posts model there.
Now let’s create our first blog post click on the Add icon beside Post which will take you to another page where you can create a post. Fill the respective forms and create your first ever post.
Once you are done with the Post save it now, you will be redirected to the post list page with a success message at the top.
Though it does the work, we can customize the way data is displayed in the administration panel according to our convenience. Open the admin.py file again and replace it with the code below.
from django.contrib import admin
from .models import Post
class PostAdmin(admin.ModelAdmin):
list_display = ('title', 'slug', 'status','created_on')
list_filter = ("status",)
search_fields = ['title', 'content']
prepopulated_fields = {'slug': ('title',)}
admin.site.register(Post, PostAdmin)
This will make our admin dashboard more efficient. Now if you visit the post list, you will see more details about the Post.
Note that I have added a few posts for testing.
The list_display attribute does what its name suggests display the properties mentioned in the tuple in the post list for each post.
If you notice at the right, there is a filter which is filtering the post depending on their Status this is done by the list_filter method.
And now we have a search bar at the top of the list, which will search the database from the search_fields attributes. The last attribute prepopulated_fields populates the slug, now if you create a post the slug will automatically be filled based upon your title.
Now that our database model is complete we need to create the necessary views, URLs, and templates so we can display the information on our web application.
Building Views
A Django view is just a Python function that receives a web request and returns a web response. We’re going to use class-based views then map URLs for each view and create an HTML templated for the data returned from the views.
Open the blog/views.py file and start coding.
from django.views import generic
from .models import Post
class PostList(generic.ListView):
queryset = Post.objects.filter(status=1).order_by('-created_on')
template_name = 'index.html'
class PostDetail(generic.DetailView):
model = Post
template_name = 'post_detail.html'
The built-in ListViews which is a subclass of generic class-based-views render a list with the objects of the specified model we just need to mention the template, similarly DetailView provides a detailed view for a given object of the model at the provided template.
Note that for PostList view we have applied a filter so that only the post with status published be shown at the front end of our blog. Also in the same query, we have arranged all the posts by their creation date. The ( – ) sign before the created_on signifies the latest post would be at the top and so on.
Adding URL patterns for Views
We need to map the URL for the views we made above. When a user makes a request for a page on your web app, the Django controller takes over to look for the corresponding view via the urls.py file, and then return the HTML response or a 404 not found error, if not found.
Create an urls.py file in your blog application directory and add the following code.
from . import views
from django.urls import path
urlpatterns = [
path('', views.PostList.as_view(), name='home'),
path('<slug:slug>/', views.PostDetail.as_view(), name='post_detail'),
]
We mapped general URL patterns for our views using the path function. The first pattern takes an empty string denoted by ' ' and returns the result generated from the PostList view which is essentially a list of posts for our homepage and at last we have an optional parameter name which is basically a name for the view which will later be used in the templates.
Names are an optional parameter, but it is a good practice to give unique and rememberable names to views which makes our work easy while designing templates and it helps keep things organized as your number of URLs grows.
Next, we have the generalized expression for the PostDetail views which resolve the slug (a string consisting of ASCII letters or numbers) Django uses angle brackets < > to capture the values from the URL and return the equivalent post detail page.
Now we need to include these blog URLs to the actual project for doing so open the mysite/urls.py file.
from django.contrib import admin
urlpatterns = [
path('admin/', admin.site.urls),
]
Now first import the include function and then add the path to the new urls.py file in the URL patterns list.
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('blog.urls')),
]
Now all the request will directly be handled by the blog app.
Creating Templates For The Views
We are done with the Models and Views now we need to make templates to render the result to our users. To use Django templates we need to configure the template setting first.
Create directory templates in the base directory. Now open the project’s settings.py file and just below BASE_DIR add the route to the template directory as follows.
TEMPLATES_DIRS = os.path.join(BASE_DIR,'templates')
Now In settings.py scroll to the,TEMPLATES which should look like this.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
Now add the newly created TEMPLATE_DIRS in the DIRS.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
# Add 'TEMPLATE_DIRS' here
'DIRS': [TEMPLATE_DIRS],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
Now save and close the file we are done with the configurations.
Django makes it possible to separate python and HTML, the python goes in views and HTML goes in templates. Django has a powerful template language that allows you to specify how data is displayed. It is based on template tags, template variables, and template filters.
I’ll start off with a base.html file and a index.html file that inherits from it. Then later when we add templates for homepage and post detail pages, they too can inherit from base.html.
Let’s start with the base.html file which will have common elements for the blog at any page like the navbar and footer. Also, we are using Bootstrap for the UI and Roboto font.
<!DOCTYPE html>
<html>
<head>
<title>Django Sohan</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
</head>
<body>
<style>
body {
font-family: "Roboto", sans-serif;
font-size: 17px;
background-color: #fdfdfd;
}
.shadow {
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
}
.btn-danger {
color: #fff;
background-color: #f00000;
border-color: #dc281e;
}
.masthead {
background: #3398E1;
height: auto;
padding-bottom: 15px;
box-shadow: 0 16px 48px #E3E7EB;
padding-top: 10px;
}
</style>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow" id="mainNav">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}">Django sohan</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item text-black">
<a class="nav-link text-black font-weight-bold" href="#">About</a>
</li>
<li class="nav-item text-black">
<a class="nav-link text-black font-weight-bold" href="#">Policy</a>
</li>
<li class="nav-item text-black">
<a class="nav-link text-black font-weight-bold" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
{% block content %}
<!-- Content Goes here -->
{% endblock content %}
<!-- Footer -->
<footer class="py-3 bg-grey">
<p class="m-0 text-dark text-center ">Copyright © Django sohan</p>
</footer>
</body>
</html>
This is a regular HTML file except for the tags inside curly braces { } these are called template tags.
The {% url 'home' %} Returns an absolute path reference, it generates a link to the home view which is also the List view for posts.
The {% block content %} Defines a block that can be overridden by child templates, this is where the content from the other HTML file will get injected.
Next, we will make a small sidebar widget which will be inherited by all the pages across the site. Notice sidebar is also being injected in the base.html file this makes it globally available for pages inheriting the base file.
{% block sidebar %}
<style>
.card{
box-shadow: 0 16px 48px #E3E7EB;
}
</style>
<!-- Sidebar Widgets Column -->
<div class="col-md-4 float-right ">
<div class="card my-4">
<h5 class="card-header">About Us</h5>
<div class="card-body">
<p class="card-text"> This awesome blog is made on the top of our Favourite full stack Framework 'Django', follow up the tutorial to learn how we made it..!</p>
<a href="https://onesohan.com/blog/post/building-blog-application-comments-django/"
class="btn btn-danger">Know more!</a>
</div>
</div>
</div>
{% endblock sidebar %}
Next, create the index.html file of our blog that’s the homepage.
{% extends "base.html" %}
{% block content %}
<style>
body {
font-family: "Roboto", sans-serif;
font-size: 18px;
background-color: #fdfdfd;
}
.head_text {
color: white;
}
.card {
box-shadow: 0 16px 48px #E3E7EB;
}
</style>
<header class="masthead">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class=" col-md-8 col-md-10 mx-auto">
<div class="site-heading">
<h3 class=" site-heading my-4 mt-3 text-white"> Welcome to my awesome Blog </h3>
<p class="text-light">We Love Django As much as you do..!  
</p>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-8 mt-3 left">
{% for post in post_list %}
<div class="card mb-4">
<div class="card-body">
<h2 class="card-title">{{ post.title }}</h2>
<p class="card-text text-muted h6">{{ post.author }} | {{ post.created_on}} </p>
<p class="card-text">{{post.content|slice:":200" }}</p>
<a href="{% url 'post_detail' post.slug %}" class="btn btn-primary">Read More →</a>
</div>
</div>
{% endfor %}
</div>
{% block sidebar %} {% include 'sidebar.html' %} {% endblock sidebar %}
</div>
</div>
{%endblock%}
With the {% extends %} template tag, we tell Django to inherit from the base.html template. Then, we are filling the content blocks of the base template with content.
Notice we are using for loop in HTML that’s the power of Django templates it makes HTML Dynamic. The loop is iterating through the posts and displaying their title, date, author, and body, including a link in the title to the canonical URL of the post.
In the body of the post, we are also using template filters to limit the words on the excerpts to 200 characters. Template filters allow you to modify variables for display and look like {{ variable | filter }}.
Now run the server and visit http://127.0.0.1:8000/ you will see the homepage of our blog.
Looks good..!
You might have noticed I have imported some dummy content to fill the page you can do the same using this lorem ipsum generator tools.
Now let’s make an HTML template for the detailed view of our posts.
Next, Create a file post_detail.html and paste the below HTML there.
{% extends 'base.html' %} {% block content %}
<div class="container">
<div class="row">
<div class="col-md-8 card mb-4 mt-3 left top">
<div class="card-body">
<h1>{% block title %} {{ object.title }} {% endblock title %}</h1>
<p class=" text-muted">{{ post.author }} | {{ post.created_on }}</p>
<p class="card-text ">{{ object.content | safe }}</p>
</div>
</div>
{% block sidebar %} {% include 'sidebar.html' %} {% endblock sidebar %}
</div>
</div>
{% endblock content %}
At the top, we specify that this template inherits from.base.html Then display the body from our context object, which DetailView makes accessible as an object.
Now visit the homepage and click on read more, it should redirect you to the post detail page.
Extending The Application:-
Roadmap To Build A Comment System
1. Create a model to save the comments.
2. Create a form to submit comments and validate the input data.
3. Add a view that processes the form and saves the new comment to the database.
4. Edit the post detail template to display the list of comments and the form to add a new comment.
Building Comment Model
Open The models.py file of blog application and below the Post model create the Comment model.
class Comment(models.Model):
post = models.ForeignKey(Post,on_delete=models.CASCADE,related_name='comments')
name = models.CharField(max_length=80)
email = models.EmailField()
body = models.TextField()
created_on = models.DateTimeField(auto_now_add=True)
active = models.BooleanField(default=False)
class Meta:
ordering = ['created_on']
def __str__(self):
return 'Comment {} by {}'.format(self.body, self.name)
In this comment model first, we have a Foreign key relation that establishes a many-to-one relationship with the Post model, since every comment will be made on a post and each post will have multiple comments.
The related_name attribute allows us to name the attribute that we use for the relation from the related object back to this one. After defining this, we can retrieve the post of a comment object using comment.post and retrieve all comments of a post using post.comments.all() . If you don’t define the related_name attribute, Django will use the name of the model in lowercase, followed by _set (that is, comment_set ) to name the manager of the related object back to this one.
As a traditional comment system, we are accepting the commenter’s name, email and comment body as inputs. Then we have an active boolean field that is set to False to prevent spam we will manually allow all the comments posted.
The Meta class inside the model contains metadata. We tell Django to sort results in the created_on field in descending order by default when we query the database. We specify descending order using the negative prefix. By doing so, comments made recently will appear first.
The __str__() method is the default human-readable representation of the object. Django will use it in many places, such as the administration site.
Next, we need to synchronize this comment model into the database by running migrations to reflects the changes in the database.
(django) $ python manage.py makemigrations
(django) $ python manage.py migrate
We are done with the models, now let’s include the Comment model in our Admin dashboard.
Adding Comments Model To The Administration Site
Open admins.py file and write the following code.
from django.contrib import admin
from .models import Post, Comment
@admin.register(Comment)
class CommentAdmin(admin.ModelAdmin):
list_display = ('name', 'body', 'post', 'created_on', 'active')
list_filter = ('active', 'created_on')
search_fields = ('name', 'email', 'body')
actions = ['approve_comments']
def approve_comments(self, request, queryset):
queryset.update(active=True)
Going over the code @admin.register(Comment) registers the comment into the Admin area. Below the CommentAdmin class to customizes the representation of data on the screen.
The list_display attribute does what its name suggests display the properties mentioned in the tuple in the comments list for each comment.
The list_filter method will filter the comments based on the creation date and their active status and search_fields will simply search the database for the parameters provided in the tuple.
Finally, we have the actions method this will help us for approving many comment objects at once, the approve_comments method is a simple function that takes a queryset and updates the active boolean field to True.
Now create a superuser if you haven’t already and log in to the dashboard you should see the comment model there.
Now click on comments and create your comments.
In case you struck an error like no such table: blog_comment you might wanna delete the SQLite file and run migrations again for a quick fix.
Creating forms from models
Django offers a very rich and secure API to handle forms. Since the form input will be saved in the database models we are gonna use the Django’s ModelForm.
A common practice is to create a forms.py file inside your app directory for all the forms of an app. So create a forms.py file in your app and write the following code.
from .models import Comment
from django import forms
class CommentForm(forms.ModelForm):
class Meta:
model = Comment
fields = ('name', 'email', 'body')
In the model form, we just need to provide the model name in the Meta class of the form Django will handle the form processing and validation on the basis of fields of the model.
By default, Django will generate a form dynamically from all fields of the model but we can explicitly define the fields we want the forms to have, that is what fields attribute is doing here.
Building Views
We will modify the post detail view for form processing using function based view.
from .models import Post
from .forms import CommentForm
from django.shortcuts import render, get_object_or_404
def post_detail(request, slug):
template_name = 'post_detail.html'
post = get_object_or_404(Post, slug=slug)
comments = post.comments.filter(active=True)
new_comment = None
# Comment posted
if request.method == 'POST':
comment_form = CommentForm(data=request.POST)
if comment_form.is_valid():
# Create Comment object but don't save to database yet
new_comment = comment_form.save(commit=False)
# Assign the current post to the comment
new_comment.post = post
# Save the comment to the database
new_comment.save()
else:
comment_form = CommentForm()
return render(request, template_name, {'post': post,
'comments': comments,
'new_comment': new_comment,
'comment_form': comment_form})
This post detail view will show the post and all its comments, let’s break it down to see what’s happening.
First, we assigned the HTML template to a variable name template_name for future reference and we are assigning the Post object inside the post variable.
This comments = post.comments.filter(active=True) queryset retrieves all the approved comments from the database.
Since this is the same page where users will create new comments we initialized the new_comment variable by setting it to none.
Next, we have a conditional statement if a POST request is made, the comment_form variable will hold the data of user input next Django will validate the data using the is_valid() method.
If the form is valid the following actions take place.
- We create a new Comment object by calling the form’s
save()method and assign it to thenew_commentvariable, but withcommit=Flasewhich will prevent it from saving into the database right away because we still have to link it the post object - We assigned the comment object to the current post
- Finally, save the object into the database
Else if it is a GET request we initialize the form object and pass it to the template.
Adding URL patterns for Views
Open the urls.py file of your app and map the view.
path('<slug:slug>/', views.post_detail, name='post_detail')
Creating Templates For The Views
Let’s see what we will do in the templates.
{% for comment in comments %}
<div class="comments" style="padding: 10px;">
<p class="font-weight-bold">
{{ comment.name }}
<span class=" text-muted font-weight-normal">
{{ comment.created_on }}
</span>
</p>
{{ comment.body | linebreaks }}
</div>
{% endfor %}
Here we are using Django’s {% for %} template tag for looping over comments, then for each comment object, we are displaying the user’s name,creation date and the comment body.
<div class="card-body">
{% if new_comment %}
<div class="alert alert-success" role="alert">
Your comment is awaiting moderation
</div>
{% else %}
<h3>Leave a comment</h3>
<form method="post" style="margin-top: 1.3em;">
{{ comment_form.as_p }}
{% csrf_token %}
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</form>
{% endif %}
</div>
When a user makes a new comment we show them a message saying, “Your comment is awaiting moderation” else we render the form.
So putting the entire template all together we have this,
{% extends 'base.html' %} {% block content %}
<div class="container">
<div class="row">
<div class="col-md-8 card mb-4 mt-3 left top">
<div class="card-body">
<h1>{% block title %} {{ post.title }} {% endblock title %}</h1>
<p class=" text-muted">{{ post.author }} | {{ post.created_on }}</p>
<p class="card-text ">{{ post.content | safe }}</p>
</div>
</div>
{% block sidebar %} {% include 'sidebar.html' %} {% endblock sidebar %}
<div class="col-md-8 card mb-4 mt-3 ">
<div class="card-body">
<!-- comments -->
<h2>{{ comments.count }} comments</h2>
{% for comment in comments %}
<div class="comments" style="padding: 10px;">
<p class="font-weight-bold">
{{ comment.name }}
<span class=" text-muted font-weight-normal">
{{ comment.created_on }}
</span>
</p>
{{ comment.body | linebreaks }}
</div>
{% endfor %}
</div>
</div>
<div class="col-md-8 card mb-4 mt-3 ">
<div class="card-body">
{% if new_comment %}
<div class="alert alert-success" role="alert">
Your comment is awaiting moderation
</div>
{% else %}
<h3>Leave a comment</h3>
<form method="post" style="margin-top: 1.3em;">
{{ comment_form.as_p }}
{% csrf_token %}
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</form>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock content %}
If you are working on a completely different project with some other CSS framework then ignore the styling.
Testing The Comment System
Save all the files and run the server and visit http://127.0.0.1:8000/ and visit a post detail page.
Now create your comment and hit the submit button you should see the message. Now login to the Admin dashboard and approve the comment.
Making Comment Form Crispy
Although our form works as expected, yet we can make the form look better without much changing the template using the Django crispy form library. It’s a very popular library for form managing you can check it out here – https://github.com/django-crispy-forms/django-crispy-forms
Install it using
pip install django-crispy-forms
Add it to the installed apps list.
INSTALLED_APPS = [
...
'crispy_forms',
]
If you using Bootstrap 4 for styling add this in settings.py file.
CRISPY_TEMPLATE_PACK = 'bootstrap4'
Now in your template, you just need to load the crispy tag and use the crispy tag beside the form, as follows.
{% load crispy_forms_tags %}
...
<form method="post" style="margin-top: 1.3em;">
{{ comment_form | crispy }}
{% csrf_token %}
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</form>
Save the files and run the server. 
Pagination:-
Adding Pagination Using Class-Based-Views [ ListView ]
The Django ListView class comes with built-in support for pagination so all we need to do is take advantage of it. Pagination is controlled by the GET parameter that controls which page to show.
First, open the views.py file of your app.
from django.views import generic
from .models import Post
class PostList(generic.ListView):
queryset = Post.objects.filter(status=1).order_by('-created_on')
template_name = 'index.html'
class PostDetail(generic.DetailView):
model = Post
template_name = 'post_detail.html'
Now in the PostList view we will introduce a new attribute paginate_by which takes an integer specifying how many objects should be displayed per page. If this is given, the view will paginate objects with paginate_by objects per page. The view will expect either a page query string parameter (via request.GET) or a page variable specified in the URLconf.
class PostList(generic.ListView):
queryset = Post.objects.filter(status=1).order_by('-created_on')
template_name = 'index.html'
paginate_by = 3
Now our posts are paginated by 3 posts a page.
Next, to see the pagination in action, we need to edit the template which for this application is the index.html file paste the below snippet.
{% if is_paginated %}
<nav aria-label="Page navigation conatiner"></nav>
<ul class="pagination justify-content-center">
{% if page_obj.has_previous %}
<li><a href="?page={{ page_obj.previous_page_number }}" class="page-link">« PREV </a></li>
{% endif %}
{% if page_obj.has_next %}
<li><a href="?page={{ page_obj.next_page_number }}" class="page-link"> NEXT »</a></li>
{% endif %}
</ul>
</nav>
</div>
{% endif %}
Note that we are using Bootstrap 4.3 for this project, if you are using any other frontend framework you may change the classes.
Now run the server and visit http://127.0.0.1:8000/ you should see the page navigation buttons below the posts.
Adding Pagination Using Function-Based-Views
Equivalent function-based view for the above PosList class would be.
from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage
def PostList(request):
object_list = Post.objects.filter(status=1).order_by('-created_on')
paginator = Paginator(object_list, 3) # 3 posts in each page
page = request.GET.get('page')
try:
post_list = paginator.page(page)
except PageNotAnInteger:
# If page is not an integer deliver the first page
post_list = paginator.page(1)
except EmptyPage:
# If page is out of range deliver last page of results
post_list = paginator.page(paginator.num_pages)
return render(request,
'index.html',
{'page': page,
'post_list': post_list})
So in the view, we instantiate the Paginator class with the number of objects to be displayed on each page i.e 3. Then we have the request.GET.get('page') parameter which returns the current page number. The page() method is used to obtain the objects from the desired page number. Below that we have two exception statements for PageNotAnInteger and EmptyPage both are subclasses of InvalidPage finally at the end we are rendering out the HTML file.
Now in your templates paste the below snippet.
{% if post_list.has_other_pages %}
<nav aria-label="Page navigation conatiner"></nav>
<ul class="pagination justify-content-center">
{% if post_list.has_previous %}
<li><a href="?page={{ post_list.previous_page_number }}" class="page-link">« PREV </a></li>
{% endif %}
{% if post_list.has_next %}
<li><a href="?page={{ post_list.next_page_number }}" class="page-link"> NEXT »</a></li>
{% endif %}
</ul>
</nav>
</div>
{% endif %}
Save the files and run the server you should see the NEXT button below the post list.
