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:
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.,
author_id. We can see that the
model in this lesson is not very different from the
Post model. Both of them have
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.
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
User models to enable the one-to-many relationships with the
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.
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.
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.
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.
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.
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.
In the next lesson, we will expose the application functionality as an API so that clients using any platforms can interact with the application.