Homework: create comment model

Currently, we only have a Post model. What about receiving some feedback from your readers and letting them comment?

Creating comment blog model

Let's open blog/models.py and append this piece of code to the end of file:

class Comment(models.Model):
    post = models.ForeignKey('blog.Post', on_delete=models.CASCADE, related_name='comments')
    author = models.CharField(max_length=200)
    text = models.TextField()
    created_date = models.DateTimeField(default=timezone.now)
    approved_comment = models.BooleanField(default=False)

    def approve(self):
        self.approved_comment = True
        self.save()

    def __str__(self):
        return self.text

You can go back to the Django models chapter in the tutorial if you need a refresher on what each of the field types mean.

In this tutorial extension we have a new type of field:

  • models.BooleanField - this is true/false field.

The related_name option in models.ForeignKey allows us to have access to comments from within the Post model.

Create tables for models in your database

Now it's time to add our comment model to the database. To do this we have to tell Django that we made changes to our model. Type python manage.py makemigrations blog in your command line. You should see output like this:

You can see that this command created another migration file for us in the blog/migrations/ directory. Now we need to apply those changes by typing python manage.py migrate blog in the command line. The output should look like this:

Our Comment model exists in the database now! Wouldn't it be nice if we had access to it in our admin panel?

Register Comment model in admin panel

To register the Comment model in the admin panel, go to blog/admin.py and add this line:

directly under this line:

Remember to import the Comment model at the top of the file, too, like this:

If you type python manage.py runserver on the command line and go to http://127.0.0.1:8000/admin/ in your browser, you should have access to the list of comments, and also the capability to add and remove comments. Play around with the new comments feature!

Make our comments visible

Go to the blog/templates/blog/post_detail.html file and add the following lines before the {% endblock %}

tag:

Now we can see the comments section on pages with post details.

But it could look a little bit better, so let's add some CSS to the bottom of the static/css/blog.css file:

We can also let visitors know about comments on the post list page. Go to the blog/templates/blog/post_list.html file and add the line:

After that our template should look like this:

Let your readers write comments

Right now we can see comments on our blog, but we can't add them. Let's change that!

Go to blog/forms.py and add the following lines to the end of the file:

Remember to import the Comment model, changing the line:

into:

Now, go to blog/templates/blog/post_detail.html and before the line {% for comment in post.comments.all %}, add:

If you go to the post detail page you should see this error:

NoReverseMatch

We know how to fix that! Go to blog/urls.py and add this pattern to urlpatterns:

Refresh the page, and we get a different error!

AttributeError

To fix this error, add this view to blog/views.py:

Remember to import CommentForm at the beginning of the file:

Now, on the post detail page, you should see the "Add Comment" button.

AddComment

However, when you click that button, you'll see:

TemplateDoesNotExist

Like the error tells us, the template doesn't exist yet. So, let's create a new one at blog/templates/blog/add_comment_to_post.html and add the following code:

Yay! Now your readers can let you know what they think of your blog posts!

Moderating your comments

Not all of the comments should be displayed. As the blog owner, you probably want the option to approve or delete comments. Let's do something about it.

If you haven't already, you can download all the Bootstrap icons here. Unzip the file and copy all the SVG image files into a new folder inside blog/templates/blog/ called icons. That way you can access an icon like hand-thumbs-down.svg using the file path blog/templates/blog/icons/hand-thumbs-down.svg

Go to blog/templates/blog/post_detail.html and change lines:

to:

You should see NoReverseMatch, because no URL matches the comment_remove and comment_approve patterns... yet!

To fix the error, add these URL patterns to blog/urls.py:

Now, you should see AttributeError. To fix this error, add these views in blog/views.py:

You'll need to import Comment at the top of the file:

Everything works! There is one small tweak we can make. In our post list page -- under posts -- we currently see the number of all the comments the blog post has received. Let's change that to show the number of approved comments there.

To fix this, go to blog/templates/blog/post_list.html and change the line:

to:

Finally, add this method to the Post model in blog/models.py:

Now your comment feature is finished! Congrats! :-)

PreviousHomework: add more to your website!NextDeploying to PythonAnywhere manually

Last updated

Was this helpful?