About me page with Ruby on Rails

In this tutorial you will be building a Ruby on Rails application that displays
an About me page where you list your skills.

You will define the array of your skills in the controller, iterate through them in the view (.html.erb) file and render the skills as an unordered list.

Before you start

You have to have Ruby on Rails and other dependencies installed on your computer.

Go ahead and read this section of my other blog post.

Creating the application

Use this command to create a new Ruby on Rails application:

rails new learning_erb_application --skip-turbolinks

Turbolinks is a feature something that we do not need to create this application, but you can read more about it here.

Starting the Rails server

Once this command finishes, all you have to do is to run rails server to start the development server and visit http://localhost:3000 on your web browser.

Configuring routes

Open the

config/routes.rb

file and add the following line:

root to: 'about_me#show'

What this does is when you visit http://localhost:3000/ the code that is in
AboutMeController is going to be executed, more specifically the show action (instance method).

Creating AboutMe controller

Now that you have the routes configured you need to actually create the controller.

Create a new file named app/controllers/about_me_controller.rb with the contents of

class AboutMeController < ApplicationController
  def show
  end
end

Create the HTML/ERB file

Create a new directory app/views/about_me and a file app/views/about_me/show.html.erb containing:

<h1>Name LastName</h1>
<p>Here is some of the skills that I am good at:</p>

(you can replace the <h1> tag content with your full name)

This view will be rendered because in the AboutMeController the show action is empty, meaning that the default view file resolution will be used.

By default, for HTML requests, the app/views/<resource_name>/<action_name>.html.erb
file will be rendered.

In this case the resource_name is about_me and the action_name is show.

You can read more about the default rendering here.

Now visit the http://localhost:3000/ to see the page with the name/last_name and the paragraph.

Displaying a list of skills

Now you have to render the skills that you are good at.

For the purpose of this tutorial the skills will be defined in the controller's code as an array.

Accessing the controller's instance variables

Edit the app/controllers/about_me_controller.rb file to look like this:

class AboutMeController < ApplicationController
  def show
    @my_skills = [
      'Excellent communication',
      'Proficient at working in a team',
      'Being a problem solver',
      'I learn new things on a daily basis'
    ]
  end
end

What this does is create a class instance variable and assigns an array of skills.

Every instance variable that is created in controller's actions (class instance methods) can be accessed in the view file.

So if you change the view code in app/views/about_me/show.html.erb to be

<h1>Name LastName</h1>
<p>Here is some of the skills that I am good at:</p>
<%= @my_skills %>

You will see a page like this:

Use <%= and %> tags when you want to execute Ruby code and display the result in HTML output.

Rendering variable as HTML list

To display the skills as HTML list you have to iterate through the contents of the variable and render a <li> tag with each of the skills.

Edit the view code to be:

<h1>Name LastName</h1>
<p>
  Here is some of the skills that I am good at:
  <ul>
    <% @my_skills.each do |skill| %>
      <li><%= skill %></li>
    <% end %>
  </ul>
</p>

There are a couple of things going on here.

First of all there is the <% tag that is used instead of the <%= one.
That is because you use the <%= tag only when you want to render something to the HTML.

The second thing is that there is this weird construction:

@my_skills.each do |skill|

That is a way to iterate through the content of the @my_skills variable.
During each iteration the skill is assigned to the skill block variable that you can use anywhere until the <% end %> part.

Then, notice, that when the skill is rendered within the <li> tag the <%= tag is used to display it in the resulting HTML, similary to how you used this tag in the previous step.

Conclusion

In this tutorial you created a new Ruby on Rails application, configured the application routes, created AboutMe controller and added a .html.erb file.

You also defined an instance variable in the AboutMe controller, containing an array of your skills.

Then, within the view, you iterated through the skills stored in the variable and rendered them as the items of an unordered list.

Contact me here if you are looking for help on Ruby on Rails projects!