Configuring a home page in a Rails app
Walk through how to setup the homepage of your application by customizing the routes file.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

In this lesson, I'm going to walk you through on how to setup the home page of your application. Typically, I like to setup the home page route right at the very bottom because this is the last route that the routes.rb is going to see.

To set, I'm going to add:

root 'pages#home'

large

Now, if I start my server, go to the browser and type the URL localhost:3000, this is what my home page will look like:

medium

If you remember, the earlier home page of the application was the default Rails homepage, and this has changed now. That was pretty easy, right?

Next, I want to make more changes to my home page. I want to print the names of all the projects on my home page. To do this, I go to pages_controller.rb and do a database query with the code @projects = Project.all. Though this is a bad idea in a production database since it will return all the records and if you have millions of records this could take down your server, however it's ok for now for development. You have to place this code inside the home method, as you can see below:

large

Now, go to the file home.html.erb in the views folder, and do all the html changes you want such as changing the title and adding any content. If you want to print the titles of your projects, add:

<% @projects.each do |project| %>
<% end %>

When any code is placed within <% something do %> and ends with <% end %> it is called a code block. Whatever code you place inside this block will run any number of time you want. For example, if you want the code inside that block to run a hundred times, it will be executed a hundred times.

In this code, we running the each iterator method and this is going to iterate through each of the projects in the database. project is an iterator variable that is going to be used inside the code block. The complete code will be,

<% @projects.each do |project| %>
  <p><strong>%= project.title %></strong></p>
<% end %>

In this code, each value of @projects is stored inside the project variable, and this value's title is called each time. If you remember, we spoke about accessing arrays in a previous lesson, and this is another way to do it. Here, you're not retrieving all the values at a time and storing it in an array, rather you taking one value at a time in a loop.
To see these changes in the browser, use the URL localhost:3000 and this is what your page looks like:

small

So, the code went and grabbed all the values from the project database and printed out the title of each record. Technically, you can bypass the controller completely and have the following code directly in your view file: Project.all.each do |project| but this is considered bad programming as it does not follow the MVC principle.

Before I conclude, there's one more thing I want to say. Look at the beginning of the code block and you'll see <% while the next line has <%=. This equals sign here prints the value directly to your browser page. If you have the equal sign at the beginning <%= @projects.each do |project| %>, the entire array with all the projects will be printed for you.

To recap, go to the controller file and add a query, and use that variable in your views file to display the database content you want.