Rails Guide — Part 9 View Files Continued

Continuing from last week’s blog, today we will go over view helper methods and how they can help to speed up our development process.

Before we begin, you can download the code for today’s example at this GitHub link and follow along. I’ve made minor changes to the routes:

Next, I added margins and some stylings to our navigation list.

We now have an Item model which represents a menu item, that has a name, price, image_url, and category attributes. See below for the migration and schema file:

Then I created some dummy Item data in the seeds.rb file.

In the pages controller’s home action, I defined an @items variable to get all the items.

And finally in the home.html.erb file, I output the @items collection via a partial.

Running the Rails server and going to localhost:3000/home, you should see this page with the names of the 4 items we created:

For each menu item, let’s say that we want to display an image of the food, underneath it, its name and price, then an Add to Cart button. Going back to our _item.html.erb partial, let’s see how we can use view helpers to achieve all of these.

A simple straightforward approach would be to add HTML tags and stylings like so:

And the result doesn’t look too bad. However in our item partial, we can see with HTML tags and embedded Ruby codes mixed together, our codes are starting to get disorganized quickly. A better solution would be to use view helpers.

Starting on line 1, we have a content tag helper method. Then first argument is the type of HTML tag, in this case, we have a <div>. The second argument is assigning a class name to the <div>. To assign a unique ID attribute to any tag, simply use something like:

<%= content_tag :div, id: “beef-broccoli”, class: “menu-item” %>

The div content tag acts as a wrapper, and inside of it we have an image tag and a button tag, which are self explanatory.

The next part I want to work on is the navigation list. When a user clicks on a list item such as beef, we want to redirect them to a page that showcases all the food that contains that ingredient.

Let’s start in our routes.rb file:

First we created a root path, so when a user clicks on All, they’re redirected to the home page. Then I made individual paths and controller actions for each category.

Next up is the controller:

Remember each Item has an attribute of category, which is an array of texts. For each action, it’s as simple as running a query to return all food items that contains that specific category of ingredient.

Onto our view files, we can utilize the _item.html.erb partial to display our collection:

Restarting our Rails server and going to localhost:3000/chicken, we can see everything is displayed correctly:

We can do the same for the other category of foods now that we know our code is working:

The final step is to make each list item an actual link in our nav partial with the link_to helper method. The exact URL for each link is the same as how we define it our in routes.rb file, in other words, the link for our beef section is /beef.

If you have any doubts, you can run rails routes to check. The information we are interested in under URI Pattern:

Going back to our nav partial:

Refresh the pages and check to make sure all the links are active and working:

The seafood and appetizer sections are empty as we don’t have any food items that contain any ingredients:

Amazing job after going through 9 parts of Rails guide. In the remaining 3 parts, we will take a look at adding Bootstrap, JavaScript to our Rails app, finishing our Flatiron Kitchen application, Rails as API, and finally deployment. See you next week!