Last modified: Mon Nov 13 2017 14:54:09 GMT+0800 (Malay Peninsula Standard Time)
In this chapter, a comment feature will be added to a newly created model. The easier way of adding the ability of comment to an existing model is to use a GEM (AKA libraries that created by others). The GEM that we are going to use is commontator.
Note: This Gem does not work with >= Ruby 2.4.1.
For this example, I am going to start from scratch and show how to create and add a comment feature based to the Post model that I create with the scaffold comment below.
However, this example will assume that you have a user model setup with session feature (login and logout feature). If you are not using
Devise, please follow the additional instruction included in the special section.
We want to associate each post to the user that created it. To create a Post model with reference to User’s ID, the easiest way is to use scaffolding command.
rails g scaffold Post text:string user:references
g = generate; Post is the MVC that we want to create with scaffolding command;
user:references is command that associate user’s ID to each of the new post, where user is the user’s model.
Then, do a migration by using the command
rake db:migrate. Now, we have a working Post with user association.
In order to add comment to the Post, we will use commontator GEM. To begin, visit their Github’s repository. Based on the Readme file in the repository, we have to add the line of code below to our
Gemfile. Instructions on how to use the GEM can be also found in the Readme file. There are many features that come with the GEM. Please refer to the Readme file on how to configure them. Table 1.2.1 shows the code that should be added to
Gemfile and Figure 1.2.1 shows the result of the Gem is added to our
Table 1.2.1: Code to add to
#MyApp/gemfile gem 'commontator', '~> 4.11.1'
Figure 1.2.1: Code added to Gemfile, Line 3
Next, we have to run bundle install to install the GEM that we added to our
Gemfile. Please terminate all your Rails server before running the bundle install command.
Next, we have to copy
commontator’s initializer and migrate to our app. To do that, run the command below.
Then, do a migration again by using the command
rake db:migrate. After the migration is completed, we can see that there are a few database tables are created. Figure 1.2.2 shows the new database table that are created after a database migration.
Figure 1.2.2: Tables created after database migration
Now, we have to add the route to our
routes.rb. Figure 1.2.3 shows the code from Table 1.2.2 is added to
Line 6 of the file.
Table 1.2.2: Code to add to
#MyApp/config/routes.rb mount Commontator::Engine => '/commontator'
Figure 1.2.3: Route added to
Next, we have to import the stylesheet in order to have the comment to function properly. Figure 1.2.4 shows the code from Table 1.2.3 is added to Line 15.
If you are unable to find the file
application.scss, rename application.css to the respective extension required. Please do not remove any of the code in green as shown in Figure 1.2.4.
Table 1.2.3: Code to add to stylesheet
#MyApp/assets/stylesheets/application.scss *= require commontator/application
Figure 1.2.4: Code added to stylesheet
Add the code in Table 1.2.4 to your existing model. You may name your model differently. Please ensure that you place the code at the correct model. Or else, it will not work. In my case, User is the person that is allowed to leave a comment. Figure 1.2.5 shows the the code in Table 1.2.4 is added to Line 10.
Table 1.2.4: Code to add to
Figure 1.2.5: Code added to user.rb
Then, add the code in Table 1.2.5 to your existing model that you want the comment to be left at. You may name your model differently. Please ensure that you place the code at the correct model. Or else, it will not work. In my case, Post is the model that I want user to leave the comment at. Figure 1.2.6 shows the code from Table 1.2.5 is added to Line 3.
Table 1.2.5: Code to add to
Figure 1.2.6: Code added to
In the view that you want the user to leave comment, add code in Table 1.2.6 to the appropriate location where you want the view to show the comment.
In my case, I will add the code below to my Post’s show page. The author of the GEM states that it is best to include the code below in the
show.html.erb. Figure 1.2.7 shows the code from Table 1.2.6 is added to Line 13.
You may want to replace
@postwith the code that correspond to your controller. If you have a
cars_controller, you have to replace it with
Table 1.2.6: Code to add to
MyApp/views/posts/show.html.erb <%= commontator_thread(@post) %>
Figure 1.2.7: Code added to
Please follow the instruction below in this page IF you are not using Devise GEM
You will see that you have a
Commontor folder created with four controllers. In your
application_controller, add the code shown in Table 1.2.7. Figure 1.2.8 shows the code in red box are added to the controller.
Table 1.2.7: Code to add to
Application Controller under
#MyApp/controller/commontator/application_controller.html.erb def current_user return unless session[:user_id] @current_user ||= User.find(session[:user_id]) end
Figure 1.2.8: Code added to Application Controller under
Now, fire up your Rails server and you should have a working
Comment feature for your model. In order for this feature to work correctly, ensure that a session is established (a user is currently logged in).
Figure 1.3.1 shows a list of posts that I have created. Each post is associate with a user. In order to have the user’s information to show up correctly, you have to replace
<%= @post.user %> with
<%= @post.user %> in your
You may want to replace
@post with the code that correspond to your controller. If you have a
cars_controller, you have to replace it with
Figure 1.3.1: Index of Post
Figure 1.3.2 shows a comment feature is implemented successfully. To show a comment that I have created earlier, I have to click on the “Show Comment” hyperlink.
Figure 1.3.2: Comment feature implemented successfully
Figure 1.3.3 shows a comment that I have left earlier. Do note that user is not allowed to leave a comment if they are not logged in.
Figure 1.3.3: Expanded view of comment
When a user is logged in, the user is allowed to leave a comment. Figure 1.3.4 shows the user has the ability to leave comment after he or she is logged in.
Figure 1.3.4: New comment is allowed when a session is established
To add more comments, click on the “add comment” and a comment box will be shown on the screen. Figure 1.3.5 shows a text box for comment.
Figure 1.3.5: Adding a comment
In our SQLiteStudio, we can verify the comments in store in the database table. Figure 1.3.6 shows the data populated in my database table. At the current stage, the
editor_id does not contain any information. This is because, by default, the comment is anonymous. Refer to the Readme page in order to associate the user to each comment.
Figure 1.3.6: Content in
commontator_comments database table
GEM come with a built in feature that allow user to rate the comment. For more information on how to turn enable this feature, please follow the instruction from the
GEM’s Github Readme page.