Analyzing the Rails Process: Index and Show Actions
In this guide we take a step back and analyze how the Rails system works. To begin we walk through the basic App directory and then walk through how to work with the Index and Show methods provided in the Rails Controllers.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

In the last guide Rails did a lot of work for us in a very short amount of time. We just ran one line of code, and we have the entire blog functionality in place including create, view, edit and delete options.

It’s pretty incredible to be able to harness the power of the scaffold, but let's take a step back and see what is going on behind the scenes. This is important because simply running the scaffold generator will limit what you can do in Rails. We will go through the entire file system, but I am going to break it down into several guides so you can take breaks as we explore all this information. This way you can develop a deeply ingrained understanding of how each piece works.

We will being in the app directory and take a look at what was created for us.

Assets

Open the app directory and navigate to the first folder, which is assets. If you click on it, there's a subfolder called config and inside that, a file called manifest.js.

Scaffold created a few things for us here. I'm not going to focus much on this. Rather, we'll spotlight the files that you can see have differences.

Javascripts

Let's jump to javascripts. When we created our blog feature, the file,blogs.coffee was generated. This file doesn’t have any code now because we don't have any custom scripts yet. Typically, coffee script allows us to do some really great integrations and we'll cover that later in the course. For now, remember that scaffolds created this empty file for us.

Stylesheets

The next folder is stylesheets. This is where the .css files are located. One of the files created for us was named blogs.scss. You might be wondering why this has an extension of .scss instead of .css . This indicates it is a Sassy style sheet, also known as Sassy css or sass. It is a pre-compiled version of CSS that allows you to do cool things like create variables, write code, and simply create css files more easily. The main thing to note here is that the scaffold generator created this file for us.

Another file that the scaffold generator created for us is scaffolds.scss. If you open this file, you will see it has quite a bit of content. This is the code that gave us the unattractive styling we saw on the browser. These styles are not meant for production. They are simply a way for us to see some kind of styling so we are not using HTML defaults. This is one of the reasons I do not keep this file.

Another reason I remove this file is that it can cause conflicts and lead to style bugs. It is best to just delete the code than have scaffold stylesheets override some of your other styling. We will implement all of our own styles later on in the project. So we can just delete it now.

Select every thing in the file and delete the code. Next, delete the scaffolds.scss file completely. (right click on the file and then choose delete). If you go to the browser now, you'll see the regular HTML formatting. We can close the assets folder for now.

Channels

The Channels directory is where we will write the code that will allow us to have live data in our application. Eventually we will use it to carry out the live chat feature for comments on our blogs. The scaffold didn’t add anything for us here, but I want you to be aware this directory has to do with action cable. Action cable gives us the ability to have an application that updates in realtime without use of the refresh button. This is a very cool feature of Rails 5.

Controllers

The controller directory is a very important one. The application controller was created when we built the app with the rails new command. This is the controller that all of our controllers will inherit from. It has some really clever behavior that we will cover later in the course.

The blogs controller, found in blogs_controller.rb was created from our scaffold. If you open the file you can see all the code that was written for us by the generator.

A controller gives you the ability to communicate directly between the model(where the data is), the view, and the routing system.

Controller Case Study with the Index Method

Open your browser window and go to “localhost:3000/blogs”.

When you type that URL in your browser address window and press enter, it hits the the index action in your controller. That means it runs the code inside the index method in your blogs controller.

For a clear understanding of how this works, let's create a new blog post. When you go back to the blog index page, you can see one post. Now create another blog post. When you return to the blogs index page you will see 2 blog items. These are the two blogs that have been created and stored in the database. When you go to /blogs in the browser, the index action is managing what is present in the display.

To test this action go to your blogs controller and change the index action (line 7) to:@blogs = Blog.limit(1) .

large

This code limits the database query so it only calls one blog. If you refresh the blog page in your browser, you'll see that it shows only one blog post, though two records are in the database.

It is important to realize there is a mapping between each method in the controller and what is displayed in the browser.

Change your index method to once again be @blogs = Blog.all

With that code you have indicated that the index method, should retrieve all the records from the database and make them available to the variable called @blogs. The view calls the index method and displays the variable value from @blogs in the browser window.

We will take a deeper dive into these methods but I want you to have this cursory knowledge of how they work.

Show Method

The show action might seem a little bit odd because if you look (beginning line 12) you can see it is an empty method.

You can access the show action in the browser window with the “Show” button. When you think of ‘show’, know it is when the browser takes you to a page with the details of that particular item. In this case it is showing you the details of your blog post.

If you look at the URL, you can see that the route in this case is showing blog/3 , yet there is doesn't seem to be anything in the method. So you may wonder how that id is being called.

We can find the answer on line 2 of the blogs_controller.rb file.

Line 2 contains the before_action. The before_action calls a method named set_blog, but only for the show, edit, update and destroy options.

Therefore, the set_blog method is getting called and executed in the show method automatically because of the before action.

Line 66 of the file is where you will find the set_blog method.

One way of looking at this is to imagine that the code in set_blog is in show because that's exactly what happens when you call the show method.

To test this out and have a little bit of fun, let’s add a line of code to the show method. Currently, the browser sends the ID of the blog, and based that id, the record is pulled up and displayed. What happens if we change the code to display the second record?

Add @blog = Blog.find(2) to your show method and save the file.

If you refresh your browser window, you will see that it displays the second blog record and not the third one. This is despite the fact that the URL still shows an id of 3. Obviously, this is not something you would want to do. So let’s take that line out of our show method.

Best Practices and the Before Action

It is a programming best practice to use the ‘before_action’. If we didn’t have it, we would have to duplicate the set_blog code in each of our show, update, edit, and destroy methods. Not only is it a bad practice to have duplicate code within your file like that, if you need to make a change to the code, you would have to change it it in every method.

In short, when you have identical code in a controller, it is best to place it inside a before action and then pass in the methods that it will be applied to.

In the next guide we will continue our study of the controller.