Integrating a Voting System into Your Blog App

This article is about adding a voting system to your blog app, where users can vote or not vote an article. We all want to allow users to show their interest and react to an article through voting and also get the article with the highest vote. So let’s get started. Create the Voting Table Open your rails app directory and enter the code below in your terminal to add the voting table to your database. This will set the relationship between the vote by each user and the voted article. rails g model Vote references references user: article: To add the migration to your schema table run and check your schema table which is added after migrating. rails db:migrate Open your vote model which is located in the and ensure you have the code below. app/models/vote.rb belongs_to belongs_to < ApplicationRecord class Vote :user :article end Vote Count We will use to get the accumulated votes in our database. It counts the number of votes for each article I like to use it because it helps to reduce the number of database queries. We will also set a uniqueness of a vote per user, this will make sure an article is voted once by a user. Let's add a vote count to our article before adding the . counter_cache counter_cache rails g migration add_vote_count_to_articles open the migration you just generated which is in and add the following code to your change method then run db/migrate rails db:migrate add_column , , , , < ActiveRecord::Migration[5.2] class AddVoteCountToArticles def change :articles :votes_count :integer null: false default: 0 end end Do not forget to complete the relationship between votes with articles and users in the user and article model and adding the code written below. has_many :votes Also, make sure that you have this code in your file config/routes.rb resources resources :articles do :votes end Adding votes uniqueness To make sure an article is voted once by a user add the following code in your vote model, this adds 1 vote per user on an article. validates , { } :user_id uniqueness: scope: :article_id At this point let us change our Vote model and add the to count the number of votes on each article. Our vote model should look like this after adding it counter_cache belongs_to belongs_to , validates , { } < ApplicationRecord class Vote :user :article counter_cache: true :user_id uniqueness: scope: :article_id end Upvote and Downvote an Article To vote we need to create our Votes controller by adding the following code rails g controller votes create destroy open your votes controller which is in your and add this code to upvote and downvote an article. app/controllers/votes_controller.rb = current_user.votes.new(article_id: params[:article_id]) @vote.save redirect_to articles_path, : redirect_to articles_path, : end end def destroy @vote = Vote.find_by(id: params[:id], : current_user, : params[:article_id]) @vote @vote.destroy redirect_to articles_path, : redirect_to articles_path, : end end end < @ class VotesController ApplicationController def create vote if notice 'Vote added.' else alert 'You cannot vote twice.' user article_id if notice 'You downvoted an article.' else alert 'You cannot downvote an article that you did not vote before.' Creating our vote helpers method for our view We can easily add our voting methods in our views by creating our vote methods in our application helper in your to detect if our users have voted an article. This will be done by writing the code below. app/helpers/application_helper.rb ApplicationHelper def upvote_or_downvote_btn(article) vote = Vote.find_by(article: article, : current_user) vote link_to( .html_safe, article_vote_path(id: vote.id, : article.id), : : ) link_to( .html_safe, article_votes_path(article_id: article.id), : :post) end end end module user if ' ' article_id method delete else ' ' method I added Font Awesome icon just for a visual sign that the article was upvoted and downvoted you can check on how to add Font Awesome icons to your rails app. Now you can call this method in article views to check for votes on an article. here Display votes count To get a visual display of your accumulated votes count add the following code in your articles view. 'Vote' Now the total number of votes for each article is visible to your users. you can also get the article with the highest by simply adding this code to your article model. scope , -> { order( ) } :highest_vote votes_count: :desc To get the article with the highest vote all we need is to call on our article and we get the article with the highest vote. highest_vote Conclusion We have finally integrated a voting system to our blog app other features can be added to your blog app to improve user experience on your website. Click for the GitHub repo for this project. Thanks for reading. here