We still need to build a form to let our users comment on blog posts. Remember that Django has two base classes to build forms: Form and ModelForm. You used the first one previously to let your users share posts by e-mail. In the present case, you will need to use ModelForm because you have to build a form dynamically from your Comment model. Edit the forms.py of your blog application and add the following lines:

from .models import Comment

class CommentForm(forms.ModelForm):
    class Meta:
        model = Comment
        fields = ('name', 'email', 'body')

To create a form from a model, we just need to indicate which model to use to build the form in the Meta class of the form. Django introspects the model and builds the form dynamically for us. Each model field type has a corresponding default form field type. The way we define our model fields is taken into account for form validation. By default, Django builds a form field for each field contained in the model. However, you can explicitly tell the framework which fields you want to include in your form using a fields list, or define which fields you want to exclude using an exclude list of fields. For our CommentForm, we will just use the name, email, and body fields for the form because those are the only fields our users will be able to fill in.

We will use the post detail view to instantiate the form, and process it in order to keep it simple. Edit the models.py file, add imports for the Comment model and the CommentForm form, and modify the post_detail view to make it look like the following:

from .models import Post, Comment
from .forms import EmailPostForm, CommentForm

def post_detail(request, year, month, day, post):
    post = get_object_or_404(Post, slug=post,
                                   status='published',
                                   publish__year=year,
                                   publish__month=month,
                                   publish__day=day)

    # List of active comments for this post
    comments = post.comments.filter(active=True)

    if request.method == 'POST':
        # A comment was posted
        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,
                  'blog/post/detail.html',
                  {'post': post,
                   'comments': comments,
                   'comment_form': comment_form})

Let's review what we have added to our view. We are using the post_detail view to display the post and its comments. We add a QuerySet to retrieve all active comments for this post:

    comments = post.comments.filter(active=True)

We are building this QuerySet starting from the post object. We are using the manager for related objects we defined as comments using the related_name attribute of the relationship in the Comment model.

We also use the same view to let our users add a new comment. Therefore we build a form instance with comment_form = CommentForm() if the view is called by a GET request. If the request is done via POST, we instantiate the form using the submitted data and validate it using the is_valid() method. If the form is invalid, we render the template with the validation errors. If the form is valid, we take the following actions:

Our view is now ready to display and process new comments.

We have created the functionality to manage comments for a post. Now we need to adapt our post_detail.html template to do the following:

First, we will add the total comments. Open the blog_detail.html template and append the following code inside the content block:

{% with comments.count as total_comments %}
  <h2>
    {{ total_comments }} comment{{ total_comments|pluralize }}
  </h2>
{% endwith %}

We are using the Django ORM in the template executing the queryset comments.count(). Note that Django template language doesn't use parentheses for calling methods. The {% with %} tag allows us to assign a value to a new variable that will be available to be used until the {% endwith %} tag.

We use the pluralize template filter to display a plural suffix for the word comment depending on the total_comments value. Template filters take the value of the variable they are applied to as input and return a computed value. We will discuss template filters in Chapter 3, Extending Your Blog Application.

The pluralize template filter displays an "s" if the value is different than 1. The preceding text will be rendered as 0 comments, 1 comment, or N comments. Django includes plenty of template tags and filters that help you display information in the way you want.

Now, let's include the list of comments. Append the following lines to the template after the preceding code:

{% for comment in comments %}
  <div class="comment">
    <p class="info">
      Comment {{ forloop.counter }} by {{ comment.name }}
      {{ comment.created }}
    </p>
    {{ comment.body|linebreaks }}
  </div>
{% empty %}
  <p>There are no comments yet.</p>
{% endfor %}

We use the {% for %} template tag to loop through comments. We display a default message if the comments list is empty, telling our users there are no comments for this post yet. We enumerate comments with the {{ forloop.counter }} variable, which contains the loop counter in each iteration. Then we display the name of the user who posted the comment, the date, and the body of the comment.

Finally, you need to render the form or display a successful message instead when it is successfully submitted. Add the following lines just below the previous code:

{% if new_comment %}
  <h2>Your comment has been added.</h2>
{% else %}
  <h2>Add a new comment</h2>
  <form action="." method="post">
    {{ comment_form.as_p }}
    {% csrf_token %}
    <p><input type="submit" value="Add comment"></p>
  </form>
{% endif %}

The code is pretty straightforward: If the new_comment object exists, we display a success message because the comment was successfully created. Otherwise, we render the form with a paragraph <p> element for each field and include the CSRF token required for POST requests. Open http://127.0.0.1:8000/blog/ in your browser and click on a post title to see its detail page. You will see something like the following:

Add a couple of comments using the form. They should appear under your post in chronological order, like this:

Open http://127.0.0.1:8000/admin/blog/comment/ in your browser. You will see the admin page with the list of comments you created. Click on one of them to edit it, uncheck the Active checkbox, and click the Save button. You will be redirected to the list of comments again and the Active column will display an inactive icon for the comment. It should look like the first comment in the following screenshot:

If you go back to the post detail view, you will notice that the deleted comment is not displayed anymore; neither is it being counted for the total number of comments. Thanks to the active field, you can deactivate inappropriate comments and avoid showing them in your posts.