Post
Ask Question

Using ERB Tags In Ruby On Rails Default HTML Templates

Introduction

I assume you have already read my previous article on Template Rendering and Redirecting In Ruby on Rails. Now, you will learn about the View templates, naming of template files, ERB tags, and how to use ERB tags in HTML templates. We will learn all this via two examples in this article.

Requirements

  • Software - Ruby on Rails installed on your system.
  • Editor- Atom Text Editor is the best in class.
  • Browser – Google Chrome.

View templates

  • Now, let's see the View templates. We will use HTML tags in Rails. HTML tags provide static web pages only but ERB tags give us dynamic information in that HTML template.
  • To view the template file, go to Rails application >>  app >> View>> Home folder where the templates files are available.

Template File Naming

File name - Home.html.erb

Explanation

Template name - Home

Process with - ERB

Output format - HTML

  • The template is named home, it is going to process with our ERB function and it completes with the final output format in HTML, this is the default template naming system in Ruby on Rails.

What is ERB tag?

  • ERB is short for “Embedded Ruby”, the eRuby templating system will allowed inside embed ruby our HTML pages.
  • This ERB tag is very important tag in Rails without this tag rails is nothing it will used to create variable, conditions statements, array and event works in this ERB tag it will show our static HTML page into dynamic HTML web page in browser.

Sample expression tags

<% code %> - non output printing tag.
<%= code %> - output printing tag.

  • This expression tags are called non-output printing tags and they execute code and give output in yoru browser. We can see one text printing example for this tag in end of the content.

Comment tag

<%# comments %> - it’s used to documentation work only.

  • This comment tag is using for documentation purpose only it will not give output page in browser.

Now we can see Two ERB tag examples one by one, I cannot explain ERB tags fully because this ERB tag is using an event, functioning only within Ruby on Rails. We are not using events and functions in this application, so I can’t explain fully in this article but I shal explain futher in an upcoming article.

Step 1

  • Open the Ruby On Rails Command Prompt By Going To Start >> All Programmes >> Railsinstaller >> Command Prompt with Ruby and Rails.
  • After opening the command prompt, let’s create a new application in rails using the following code.
    1. Rails new app    

     

  • After put above the code in Rails command prompt some process going in there, we skip that process, if you have any doubt in application creation refer my previous article Creating application in ruby on rails.

Step 2

  • After creating the application open the application in our atom editor, now we just create one HTML file, in this example I name them main page and index page.
  • Now we going to create our main page (main.html.erb) template in app>>views>>home folder. Open that folder now using the following code to create the file and then we will add some HTML tags.

    Main.html.erb code
    1. <h1>Home#main</h1>      
    2. <h2> This is Main Page</h2>    
    3. <p>Find this file in app/views/home/main.html.erb</p>  
  • The index page file is already created in our controller generation, you can use that file (index.html.erb) in view>>home folder. Open that folder now using the following code to create the file and add some HTML tags.

    Index.html.erb code  
    1. <h1>Home#index</h1>      
    2. <h2> This is Index Page</h2>    
    3. <p>Find this file in app/views/home/index.html.erb</p>  
     
Step 3

After completing the file creation now we have to configure the files in our home controller, The 'home_controller.rb' file is stored in our app>>controller folder and now we add rendering codes like in the following picture. This shows code for each page for rendering when the page requests to render it.

Home_controller.rb code  
  1. class HomeController < ApplicationController  
  2. layout false  
  3. def index  
  4. render('index')  
  5. end  
  6. def main  
  7. render('main')  
  8. end  
  9. end 

 

Step 4

After configuring the HTML pages in the home_controller file the rendering process is complete, now we can add the route code in the route.rb file.
  1. Rails.application.routes.draw do   
  2.    get 'home/index'  
  3.    get 'home/main'  
  4. end  

 

The routing codes are added in route.rb file.

Step 5

To view the newly created HTML template files in our browser go to localhost:3000/home/main for the main page, and for the index page visit localhost:3000/home/index in yoru search bar. Before we open the template please confirm the rails server is ON, if not you can start it using this code in your Rails command prompt.

Rails s

 

Example 1

  • Now we can see first example. before use create html file you should add end of extension ERB like this main.html.erb without ERB it will not working in Rails.
  • Let’s add some text in ERB tag inside main.html.erb file the ERB code given below.
    1. <% target='How are you' %>    
  • The above code will create a target variable and assign the text ‘How are you’ in a non-out printing ERB tag.

     
  • Now check in the browser by visiting localhost:3000/home/main.

     
  • The EBR tag is working perfectly but not giving output in our browser page because we used a non-output printing ERB tag, so, it will not give output in the HTML template.
  • Now we add the output printing ERB tag in the HTML template file..
    1. <%= target='How are you' %>    
     
  • Check localhost:3000/home/main in browser.

     
  • The output printing ERB tag will show output in our HTML template because we used the output printing ERB tag. It will give output in HTML templates using an expression ERB tag.

Example 2

In this example we can use comment tag. This tag will not give output in the browser page. Use the code given below.
  1. <%# target='How are you' %>    

 

  • Now we check in our browser localhost:3000/home/main.

     
  • The printing output tag will give output in the HTML page, but we changed that expression tag into a comment tag so that our ERB tag will not give output on screen, this is a ERB comment tag.

Conclusion

I hope you understood the topics covered, such as viewing templates, the template file naming system, what ERB tags are and how to use ERB tags in the two examples utilizing Ruby on Rails. In future articles you will learn more Ruby on Rails in a step by step easy to learn way. Keep in touch…


Similar Articles