Views and Layouts

View is a part of the application that is responsible for displaying the content to the user.

Layout is a template that provides a common structure for views.

For this article, we will explain what is the views and layouts.

What is Views?
Rails Helpers
Example of ERB syntax
What is Layout?

What is Views?

Views are responsible for generating the HTML markup that is sent to the user’s web browser. Views are typically created using HTML and a templating language like Embedded Ruby (ERB). Views can also use Rails helpers to generate HTML.

Rails Helpers

There are the example of helpers that can use to simplify the process of generating HTML and other content in views.

link_to helper can be used to generate a hyperlink with specified text and URL.
button_to helper can be used to generate a HTML form with a single button that can be used to submit a request to the server.
form_with helper can be used to generate a form with fields for input.

Views are typically written in a language called ERB (Embedded Ruby) which allows Ruby code to be embedded within HTML templates. The syntax is straightforward: <%= %> is used to output the result of a Ruby expression, while <% %> is used to execute a Ruby statement.

Example of ERB syntax

<h1><%= @post %></h1>
<ul>
    <% @posts.each do |post| %>
        <%= post.title %>
        <%= post.content %>
    <% end %>
</ul>

In the first line, we use <%= @post %> to output the value of the @post instance variable in the page post.

In the second block, we use <% @posts.each do |post| %> to loop through an array of posts and generate a list post for each one. Within the loop, we use <%= post.title %> and <%= post.content %> to output the title and content of each post.

Each controller action in application typically has its own associated view, and the name of the view file corresponds to the name of the controller action.

For example, if you have a PostsController with an index action, the associated view file would be called index.html.erb Views can also be organized into subdirectories to keep them organized.

What is Layout?

In addition to views, Rails also provides the concept of layouts, which are used to provide a consistent structure or template for other views to follow.

Layouts are defined in separate files that are stored in the app/views/layouts directory.

A layout typically contains a header, footer, and navigation menu that are shared across multiple pages. A layout is defined in a file with the xx.html.erb extension, and is typically named application.html.erb. Within a layout file, we can use partials to include common content that appears on multiple pages. By using partials, you can keep your view code DRY (Don’t Repeat Yourself) and reduce code duplication, as you can reuse the same view code into the different pages and actions in your application.

You can check about the partial here.

By default, all controllers inherit from the ApplicationController class, which specifies the default layout for the entire application.

# app/controller/posts_controller.rb

class PostsController < ApplicationController
end

Example:

<!-- app/views/layout/application.html.erb -->

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
  </head>

  <body>
    <!-- # ... -->
    <%= yield %>
  </body>
</html>

In this example, we create a layout called application.html.erb that defines the overall structure of our HTML page, including the header. In the body of the layout, we use the <%= yield %> tag to define where the content from the views should be inserted.

However, individual controllers can override this setting and specify their layout, or disable the layout if you have two or more layouts and also we can avoid duplicating code across multiple views and ensure that your pages have a consistent look and feel.

Let’s say we want to change the layout for the user and admin. You can use the layout helper and include in to the controller you need to change the layout.

layout '<your_layout>'    # put in the controller you need to change the layout.

Together, views and layouts allow us to define the presentation layer of an application in a flexible way, making it easier to maintain and update the user interface over time.

We are now done with Views and Layouts.

Views and Layouts

Table of contents

What is Views?

Rails Helpers

Example of ERB syntax

What is Layout?