Creating Comment Section for Blog in Django

Almost each blog has comment section for each post below, and because of that I want to add this too. Let's think about comment. Each post contains none or one comment or one more comments. If the post is deleted then all comments related must be deleted. I will try to make this with model called Comment. Let's create this model at first:

class Comment(models.Model):
    username = models.CharField(max_length=30)
    comment_content = models.TextField()
    pub_date = models.DateTimeField(auto_now_add=True)
    post = models.ForeignKey(Post, on_delete=models.CASCADE)

Now, we have to save and apply this model in the database:

../mysite> python manage.py makemigrations
../mysite> python manage.py migrate

Add this model to admin panel in admin.py that is in the application folder:

from django.contrib import admin
from .models import Category, Post, Comment

# Register your models here.
admin.site.register(Post)
admin.site.register(Category)
admin.site.register(Comment)

I'm going to admin panel and I created some comments as examples for posts. Now, let's create a template for comment section called comment.html:

<div class="comment-area">
    <div class="comment-header">
        <h5 class="comment-main-title">Comments</h5>
    </div>
    <div class="comment-content">
        <!-- will be edit -->
    </div>
</div>

But we can not get comments from models if we don't give this model to the detail view as context element:

from django.shortcuts import render, get_object_or_404
from .models import Post, Comment

# Create your views here.
...

def detail(request, pk):
    post = get_object_or_404(Post, pk=pk)
    comments = Comment.objects.filter(post__pk = pk)

    context = {
        'post' : post,
        'comments' : comments,
    }
    return render(request, 'detail.html', context)
    
...

Let's edit our template called comment.html:

<div class="comment-area">
    <div class="comment-header">
        <h5 class="comment-main-title">Comments</h5>
    </div>
    <div class="comment-content">
        <ul>
        {% for comment in comments %}
            <li>{{ comment.content }}</li>
        {% endfor %}
        </ul>
    </div>
</div>

That works:

They don't look good. I want to add this each comment in media component from Bootstrap:

<div class="comment-area">
    <div class="comment-header">
        <h5 class="comment-main-title">Comments</h5>
    </div>
    <div class="comment-content">
        {% for comment in comments %}
            <div class="media border p-3">
                <img src="img_avatar3.png" alt="{{ comment.username }}" class="mr-3 mt-3 rounded-circle" style="width:60px;">
                <div class="media-body">
                <h6> {{ comment.username }} <small><i>Posted on February 19, 2016</i></small></h6>
                <p>{{ comment.content }}</p>      
                </div>
            </div>
        {% endfor %}
        </ul>
    </div>
</div>

And the final result is like in the following image:

I should some make up this comment area at first without starting to form application. I updated comment.html file:

<div class="comment-area">
    <div class="comment-header">
        <h5 class="comment-main-title">Comments</h5>
    </div>
    <div class="comment-content">
        {% for comment in comments %}
            <div class="media border p-3 comment-box">
                <img src="img_avatar3.png" alt="{{ comment.username }}" class="mr-3 mt-3 rounded-circle comment-image-of-user" style="width:60px;">
                <div class="media-body comment-text">
                <h6 class="comment-username"> {{ comment.username }} <small class="comment-date"><i>Posted on February 19, 2016</i></small></h6>
                <p>{{ comment.content }}</p>      
                </div>
                <div class="clear"></div>
            </div>
        {% endfor %}
        </ul>
    </div>
</div>

After that, I typed this css code for better view in styles.css:

/* comment */
.comment-area{
    margin-top: 30px;
}

.comment-content{
    margin-top: 20px;
}

.comment-box{
    background-color: #eee;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

.comment-image-of-user{
    float:left;
    width:60px;
    height:60px!important;
    border:1px solid #ccc;
}

.comment-text{
    margin-left:80px;
}

.comment-username{
}

.comment-date{
    float:right;
}

Let's look at the result:

Well, that's not cool. Because I have not appy media for this project, I will do it in the next posts. So I will take img html tag in comment line, but don't remove it, we will use it. Also I changed comment date like in the following image, they show real date from database. (clue {{ comment.pub_date }}):

That's cool, now we can start build comment form. But this post is too long. I will added comment form in the next post. Good work!