Ruby Rails: How to Create a Like Button
Intro:
This blog will be a tutorial on how to implement a like function into a rails application. One thing to take note of before we begin is that while this is aimed at people who are relatively new to Rails, you will need a level of foundational knowledge in order to get the most out of this blog, if you have trouble understanding the terms I use I recommend googling around for some more comprehensive blog posts that cover the basics before coming back here to learn this specific implementation.
Step One:
The first thing we need to do is map out the relationships between our models, and take note that you don’t need to name your models the same as mine, mine are just examples. Carrying on, our User models will have many Likes, our Posts will also have many Likes, and each Like will belong to an individual User and a single Post. These relationships can be imagined like this:
There are many ways to get rails to generate the appropriate files and folders for the next couple steps, but for the sake of going one step at a time I’ll just be going over everything necessary one by one, without focusing on the creation of files.
Step Two:
Next, we need to set up our routes.
Here we’ve nested the routes for the Like model inside the routes for our Post model, this helps set up some handy functionality where the likes are created with a relationship with to a specific post. I’ve also used the all purpose “resources” to give the two model’s controllers all the CRUD routes, but this is not necessary, and you might want to pare this down later on. That functionality I mentioned earlier will be completed by adding this dependent onto our has_many statement in the Post model:
Step Three:
Now we’ll set up our controllers, our Posts controller doesn’t need anything special added to it, just the CRUD methods and functionality will allow it to work. However our Likes controller will need to be quite complex and not very routine, so let’s break it down:
First, we have our three before_action method calls, you can largely ignore the first one for the purposes of this tutorial as it pertains to Auth. and is somewhat outside the scope of this tutorial, all you need to know is that in this example application the user needs to be logged in in order to like a post. The second calls the helper method defined below “private” that sets an instance variable equal to the post that this like belongs to . The third sets another instance variable equal to the like that we the user has selected, and we’re only using this last before_action for the destroy method.
Now into our two main methods, create and destroy. Our like feature will be accompanied by an unlike feature that allows the user to remove their like in case they mistakenly clicked like or they are having second thoughts. The create method checks to make sure the user haven’t already liked this post and then uses the post instance variable to create a like that belongs to both that post and the current user. The current_user method that is being called there is a helper_method in the ApplicationController that simply returns the user instance that is associated with the current session, i.e. the user who is currently logged in. Then the user is redirected back to the page of the post, it will hopefully appear to them as if they never left. Destroy has a similar structure, with the key difference being that instead of using the post instance variable and the current_user method to create a new like, the destroy uses the like instance variable we found to destroy the like, or in other words, unlike the post.
Step Four:
Lastly, we’ll set up our Post show view page. But first, remember when I said that the PostsController had basic CRUD functionality? Make sure that’s implemented before continuing as this next part builds on the Posts show view page.
This isn’t a good example of how to style this, and it’s a little messy, but here’s a very basic way to add this functionality to the Posts show view page:
The first line checks to see if there are multiple likes on this post and correctly pluralizes the label for the Like/Likes. The second line checks if the current user has liked this post before. Lines 3–7 either give the user the option to like or unlike the post depending on whether they have previously liked it.
Conclusion:
And that’s all folks! As a disclaimer, I am also a semi-beginner at Rails, so this may not be the best or cleanest way to do this, it is simply, A Way to do it. If this particular way doesn’t suit your purposes or if you just don’t like it there are many other educational blogs out there on similar topics, and I encourage you to go find them. If this was helpful, I’m happy to have been of service :).
Reference Source:
https://medium.com/swlh/how-to-add-a-simple-like-button-to-your-rails-6-application-c1040999dc2
