Rails Guide — Part 7 View Files
In our last guide we finished our exploration on the Model component in a Rails application. We looked at all the ActiveRecord associations and their usage, we discussed data validation and custom scopes. This week, we will take a look at the V in the MVC design structure and how it pieces together with all other Rails components.
If we were to visualize the data flow in a Rails app, it might look similar to the chart below:
First, a route (website address) is defined, it is mapped to a controller’s action. The said controller action might perform some CRUD functionalities or database queries with a model. Finally a view page with the same name as the controller action is rendered on the browser to the user.
In this regard, a view page is nothing more than an HTML page that we can embed Ruby codes into it, hence, all view files have the same extension of .html.erb. The erb stands for embedded Ruby.
Let’s go ahead and create a new Rails app named ViewApp by running rails new ViewApp — database=postgresql
Next let’s define a custom route in the config/routes.rb file:
Next we will create a pages controller with the action named latest:
And the last step is to create a pages folder, and inside of it, an .html.erb file named latest. Notice this file must be named the same as the action name for them to be mapped together.
In the Terminal, run rails db:create then rails s to start the server. If you go to localhost:3000/home/latest, this is what you should see:
Some of you might notice the tab in our browser has a title of ViewApp, but in our latest.html.erb file, we only have a single element of <h1>, where did the title come from? This brings us to the layout folder in the views directory.
Looking at the layouts folder inside of the views directory, we can see it has a few files. The one we are concerned with is the application.html.erb file that was automatically generated when we ran rails new ViewApp.
This looks like a weird HTML file at first glance. But do not let the strange syntax scare you. To add Ruby code to our HTML file, we have the following options:
<% some Ruby code here %> #This runs the code only
<%= some Ruby code here %> #This runs the code and renders on the page
<%# this is a Ruby comment %> #Use this or regular HTML comment
And in the browser, this is what is shown:
Notice line 15, which has <% 3 + 5%> is not shown in the browser, even when the code was ran.
Think of a layout file as a general template. Your website might consist of hundreds of pages, but some of them might follow the same layout: on top of the page, there is a header and a search bar; The left side might have a navigation menu, and the bottom is a footer.
Using a layout eliminates the dread of duplicating hundreds of these pages with the same code. The application.html.erb file is loaded on top of our latest.html.erb file. When the code is at <%= yield %> in the application.html.erb file, control is passed to the latest.html.erb file, everything there is executed, and the remaining code in the application.html.erb is carried out.
You’re not limited to the default layout. We can modify it as with any HTML file. We will add a header, side menu, and a footer to our application.html.erb file and some simple CSS. Below is the simple set up:
Next I’ve added some content to each section:
Going back to the top of the file, we can see this HTML file is associated with a css file named application already:
To add styles to the application.html.erb file, we can simply navigate to app/assets/stylesheets/application.css and modify the file:
Refreshing the webpage, we can see our custom styles are in effect:
And to change the title of the page, we can easily modify the <title> tag:
Next week we will take a look at creating our own layout file, partials, and view helper methods in Rails. See you then!