Lesson 7

A Social Blogging Application — Part 6: User Comments

Share Tweet

Contents

  1. Resources
  2. Part 6: User Comments
    1. Updating the database model
    2. Render the comment form on web page
    3. Comment moderation
    4. Update the Comment functionality
    5. Conclusion
  3. Exercises
  4. Further Reading

Resources


Part 6: User Comments

In this lesson, we will implement the last feature of the social blogging application that allows our users to leave comments on blog posts. The steps to implement the User Comments feature are as follows:

  • Update the database model;
  • Render the comment form on web page;
  • Comment moderation;
  • Update the Comment functionality.

1/ Updating the database model

Before updating the database model to include the new feature, let's recap Lesson 5B where we present how to implement the Blog Posts feature, along with some useful techniques such as pagination, Markdown syntax. The Post model consists of three attributes, i.e., body, timestamp, and author_id. We can see that the model in this lesson is not very different from the Post model. Both of them have body, timestamp, and author_id, and of course, they also support Markdown syntax in the body attribute. In Fig. 1, we show an ERD fragment of the application that focuses on the Comments, Post and User entities.

Fig 1. Conceptual model of the Comments, Post and User entities [2]
Fig 1. Conceptual model of the Comments, Post and User entities [2]

In Fig. 1, there are two one-to-many relationships between pairs of <User, Comment> and <Post, Comment> relationships. And we can see that these relationships and their structure are general enough to be directly applicable to almost all social applications. In Fig. 2, we show the implementation of the Comment model and the updates to the Post and User models to enable the one-to-many relationships with the Comment model.

Fig 2. app/models.py: Implement the Comment model and update the related models
Fig 2. app/models.py: Implement the Comment model and update the related models

2/ Render the comment form on web page

In this section, we will present how to render the comment form (or comment box) on a webpage and display a list of comments on each blog post with pagination enabled. As usual, working with web forms in Flask often has three main steps: first, define a form extended from the FlaskForm class; second, implement a view function to manipulate the form and its data; and third, design a template (an HTML file) as a placeholder to display the form.

In Fig. 3, we show the implementation of the CommentForm and its view function is shown in Fig. 4.

Fig 3. app/main/forms.py: Implement the Comment form
Fig 3. app/main/forms.py: Implement the Comment form
Fig 4. app/main/views.py: Update the post() view function to handle the Comment form
Fig 4. app/main/views.py: Update the post() view function to handle the Comment form

The FLASKY_COMMENTS_PER_PAGE = 10 configuration variable is added to the config.py to control the number of comments on each page. The comment rendering is implemented in a new template, _comments.html, which is similar to _posts.html but uses a different set of CSS classes which is available in the Resources section. The _comments.html template is included by _posts.html below the body of the post, followed by a call to the pagination macro. From Fig. 5 to 7, we show the updates to the post.html, _posts.html, _comments.html, respectively. And in Fig. 8, we show the results when users visit a specific blog post.

Fig 5. app/templates/post.html: Include Comment form below a blog post
Fig 5. app/templates/post.html: Include Comment form below a blog post
Fig 6. app/templates/_posts.html: Update _posts.html macro to render a list of comments below each blog post
Fig 6. app/templates/_posts.html: Update the _posts.html macro to render a list of comments below each blog post
Fig 7. app/templates/_comments.html: Implement a macro to render a list of comments
Fig 7. app/templates/_comments.html: Implement a macro to render a list of comments
Fig 8. Comment section on a blog post
Fig 8. Comment section on a blog post

3/ Comment moderation

Comment moderation is an important functionality in social applications that allows moderators to suppress comments that are inappropriate or offensive. Back to the Comment model that we presented in Section 1, we introduced a disabled attribute for each comment which is a Boolean attribute to indicate the view function to render a specific comment or not. We also would like to recap the Lesson 4B in which we introduced the Permission.MODERATE which allows users who have it in their roles to have the ability to moderate comments made by the others.

This functionality is represented as a toggle to allow the moderators to quickly disable/enable comments on a blog post. However, instead of displaying this toggle in all comments in each blog post page, we will choose a general approach for this functionality. For users who have the moderator role, we add a link in the navigation bar to list all comments which are submitted to the application, and of course, they are sorted by timestamp. By doing so, moderators just focus on the comments and quickly decide whether to disable or enable a specific one. In Fig. 9, we show the comment moderation page.

Fig 9. Comment moderation page
Fig 9. Comment moderation page

To implement this functionality, we first implement a view function, a template, and insert a link to the comment moderation page, as shown from Fig. 10 to 12.

Fig 10. app/main/views.py: Comment moderation route
Fig 10. app/main/views.py: Comment moderation route
Fig 11. app/templates/base.html: Insert link to the comment moderation functionality
Fig 11. app/templates/base.html: Insert link to the comment moderation functionality
Fig 12. app/templates/moderate.html: Comment moderation template
Fig 12. app/templates/moderate.html: Comment moderation template

4/ Update the Comment functionality

With the comments that have been disabled by moderators, we need to modify their visibility on the web page for each user's type. In particular, for regular users, any comments which are marked as disabled would be hidden and replaced by a short notice. For moderators, all disabled comments must be rendered on the web page regardless of their disabled state, along with a toggle to change their states. In Fig. 13 and 14, we show the updates to the _comments.html and main/views.py to include the new Comment Moderation feature.

Fig 13. app/templates/_comments.html: Update comment bodies
Fig 13. app/templates/_comments.html: Update comment bodies
Fig 14. app/main/views.py: Comment moderation routes
Fig 14. app/main/views.py: Comment moderation routes

5/ Conclusion

At this point, we do complete all features of the social blogging application. Before we move on to the next lesson, you should take time to review what you have learned and done so far. In the next lesson, we will expose the application functionality as an API so that clients using any platforms can interact with the application.

🎉


Exercises

  1. Update the User Comments feature so that users can make a reaction with each comment such as 👍, ❤, 😱, 😠, 😢 and 😂 on a comment.

Further Reading

  1. Flask-RESTful
  2. [Apple Podcasts] Why Digital Transformations Need APIs

Next Lesson

In the next lesson, we will expose the application functionality as an API so that clients using any platforms can interact with the application.

Lesson 8: A Social Blogging Application — Application Programming Interfaces


Relaxing ☕