Controllers to Views

Collapse Content Show Content

We generated a controller before, so let's open it up and see what it does.

The Controller

Open up app/controllers/store_controller.rb:

class StoreController < ApplicationController
  def home
  end

  def about
  end
end

This code is really simple. The first line declares the name of the class and uses a < to show that it inherits from ApplicationController, which provides all the behind-the-scenes functionality of the controller.

The methods home and about don't actually have anything in them. However, Rails will automagically return the template in 'views/store' with the name of the controller action. That's why navigating to about and home returned those pages instead of nothing.

The Title

Open up the root of your site in your browser. Look at the title of the page in the tab on top. It should say the name you gave your application, such as TheAutomatedStore. This title is used on search results, Facebook and other sites that refer to your web page, so it's important to name it well.

Where does this title come from? View the source of your web page (usually with ctrl-U on Windows or cmd+alt-U on a Mac) to inspect the HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>TheAutomatedStore</title>
    ...

The title is right there, but how did it get there? And where's all that other HTML coming from?

The Application File

In reality, a controller doesn't just return its associated template. Instead, Rails creates a complete HTML page by combining the specific page template with a general layout file. The default layout file is application.html.erb inside views/layouts. Open it up:

<!DOCTYPE html>
<html>
<head>
  <title>TheAutomatedStore</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

You can see the standard HTML boilerplate above, including an area for the title. Below that there are some special Rails tags to include CSS and JavaScript files. Then there's the <body> element with <%= yield %> inside. This is where specific templates gets inserted into the layout.

Changing the Title

Lets' quickly fix the title by changing it to "Automated Store":

views/layouts/application.html.erb

<title>Automated Store</title>

If we reload the page, we'll see the improved title. This is the title used on every page on our site, which isn't very informative. Let's see how we can customize it.

Embedded Ruby

So far our templates have just displayed HTML, just like a static website. The purpose of Rails is to make sites dynamic, so templates can display actual website data. We're just going to start by displaying a variable from the controller, without using the database. We'll still be able to benefit from using dynamic features so we can avoid repeating the same code in different places.

To display dynamic information inside a file, use the following tag: <%= %> This will display the output from any ruby code between the tags. It is usually used to display ruby variables from the controller.

Refactoring

Note that the title and <h1> heading of the home page is the same text, "Automated Store". Let's refactor our page so we only need to define the title once.

Go to the home action in the store controller and create a new variable @title:

def home
   @title = "Automated Store"
end

The @ at the beginning of a variable declares an instance variable, which Rails makes available to the view. Now go the view and replace

<h1>Automated Store</h1>

...with:

<h1><%= @title %></h1>

If you now reload the home page, you'll see that nothing has changed. But you can now use the same @title variable in application.html.erb to set the title of the page.

Task: Using the same code as before, assign the title of the page

The Code

Simply replace the text of the title, just like you did in the <h1> heading:

 <title><%= @title %></title>

Reload the page and it all looks the same. But you now avoided duplicating the same text and have a (very slightly) dynamic website!

About Page

Now open the about page in your browser. You didn't yet set any title for it, so it's time to fix that. Can you assign a title and <h1> heading to your about page, so they both say "About the Store"?

Guideline: Assign @title in the about action of StoreController, and display it in the heading of the about page.

The Code

Set @title in about:

def about
  @title = "About the Store"
end

This will automatically set the title of your page.

Next, use this title to also set the <h1> heading of the about page:
views/store/about.html.erb

<h1><%= @title %></h1>

Default Title

We may not want to set a @title in every single controller, so it would be good to set a default title in such cases. This is actually quite easy to do in Ruby.

Simply modify application.html.erb to use the following code:

<title><%= @title || "The Automated Store" %></title>

How does this code work? As discussed in Ruby comparisons, Ruby will return the first true/non-nil value it encounters in an or statement. So the code will return @title if it has an actual value, but it will return "The Automated Store" if @title is nil.
(See also Ruby shortcuts.)

Contact Page
Open up the contact page from the earlier challenge in the browser. It should display your default title, "The Automated Store". Since it's not an important page, you can leave the default title.

Need help with this page? See this screencast.

Challenge

Run rake test in your terminal.

Please sign in or sign up to submit answers.

Alternatively, you can try out Learneroo before signing up.

Previous Next Node