Creating a Button in Rails
So you want to create a button…
In short you need to: (1)make the button in the HTML; (2)write the method to do what you want in the model; (3)write the method you need to route to in the controller; and (4)write the route in the routes file.
Seems like it should be as easy as it always was in Ruby. Just create a method that calls on the self and then deletes it. Well, things do get more complicated when you are riding on the rails. You no longer simply have a class variable as your most durable piece of information. Instead, you are now looking at a web application with classes existing in two different ways as Models and Controllers.
On top of that, you are looking at a database that persists through sessions — because that is what we want databases to do, be persistent. When we build a button first, we just need to ask ourselves if it is part of the RESTful CRUD system that Ruby on Rails works with. If it is, it will be a bit more straightforward; if not, it will take a few extra lines of code to get where we want to be.
When adding a button to “delete,” it is much easier than adding a button to “like” a thing on a web application. Why you may ask, is it easier? It is easier because the Destroy method is already available in rails as a default. It will be present when you simply put “resources :<your table name here>”. What we are looking for is the odd-ball route. Something that doesn’t come with the build-in structure.
If we want to ‘add’ something or like something, we can think of it as a ‘create’ method. However, we cannot use the create method outright. What do we have to do if we want to add something that is just a part of the object without going through the whole object? This is where we need to build out new routes. Take, for example, that we want to add a like to a post as a user. We don’t want to enable the user who is not an author to save entirely new data to the post. We want to simply give them the ability to increase the ‘likes’ by one.
As we begin, we can put the button where we need it. In this case, it would be placed on the views/posts/show.html.erb file. All we know right now is that we want a button that renders to the user with the word “Like” on it.
The first step from the ground up for a Rubyist is to build the method that this action can use when the user clicks on the ‘like’ button. For a post to get a “like,” we need to increment the ‘likes’ by one. We can do this in one of many places. Because we like to keep things as clean as possible for the view pages, we definitely don’t want to add a method that calls on the database in our HTML script. That leaves the controller or the model. To keep things as clean as possible on the controller, we would want to build the method in the model that is called upon by the controller, rather than writing out more than we have to in the controller. This can be done in many ways, but here is a simple one.
Okay, so now we have the method that our button will need. How do we connect the two?
The first place that we will want to look at is in our controller. We need to write a method that we want to be explicit, let’s call it “like” so we know what it is doing. When the button goes to this part of the controller, how does it know what to change? It needs to know about the post that it is changing and what to do with that post.
Don’t forget we always need to make sure we send our users somewhere. When we add the like, we want to see it reflected right there on the page, so we need to redirect what we are doing away from ‘like’ and back to ‘show’.
Finally, we have our last step. How does the button know where to go. If you remember, all we had was the fact that it was to render on the browser as a button and have the text “Like” on it. We need to fill this out to let rails know what we want. Rails is smart, but it can’t just read our minds. To fill out the button, we need to write the route that the button will take in our config/routes.rb file.
Now, our controller knows about the route and how to get to the ‘like’ method in the controller — remember that this controller method calls upon our model method to increment the likes of a particular post we are looking at by one. So, we add the path the button needs to take and the type of action or method it is doing when taking that route.
With the button, model, controller, and route all filled out, we can see the “Like” button in action. This does not just apply to likes but can be for any actions that we wish to do in our application. Just remember to make something happen that is not typically a RESTful CRUD action, we need to:
- Build out the view’s interactivity
- Write our method in our model
- Write our method in the controller that calls upon the model’s method
- Correctly write our route with the proper method and route.
Go make buttons!