HTML templates

You’ve probably noticed that constructing the HTML for the form is pretty messy and horrible:

get '/' do
  output  = "<form method='post' action='/'>"
  output += "<input type='text' name='user_name' placeholder='name'>"
  output += "<input type='text' name='user_age' placeholder='age'>"
  output += "<button type='submit'>Submit</button>"
  output += '</form>'

  output
end

Here we’re building up a big ruby string of html, one line at a time. It’s pretty hard to see what’s going on, and we use all the nice syntax highlighting features of VSCode.

Thankfully we can do better - by using html templates.

HTML Templates

The easiest way to understand templates is to see an example. Change the code at the top of app.rb to the following:

# in app.rb

require 'sinatra'

get '/' do
  erb :form
end

You should already have the following content in views/form.erb

<!-- in views/form.erb -->

<!DOCTYPE html>
<html>
  <head>
    <title>Barman 2.0</title>
  </head>
  <body>
    <div class="container">
      <form method="post" action="/">
        <input type="text" name="user_name" placeholder="name" />
        <input type="text" name="user_age" placeholder="age" />

        <button type="submit">Submit</button>
      </form>
    </div>
  </body>
</html>

The line erb :form tells sinatra to look for a file called form.erb in a folder called views. It then processes that file using the erb (embedded ruby) templating language and returns the result to the user.

The form.erb above isn’t very interesting: it is just a static template and doesn’t have any ruby embedded in it. Let’s look at a slightly better example:

# in app.rb

get '/' do
  erb :form
end

post '/' do
  @name = params[:user_name]
  @age = params[:user_age]

  erb :welcome
end

You’ll need to create the following view in views/welcome.erb:

<!DOCTYPE html>
<html>
  <head>
    <title>hello</title>
  </head>
  <body>
    <h1>Hello <%= @name %>. You are <%= @age %> years old.</h1>
  </body>
</html>

The important bits are:

In app.rb we assign params[:name] to a special type of variable @name. The special type of variable is an instance variable which has to begin with a single @.
We use the instance variable in the views/welcome.erb inside a special erb tag <%= ... %>. The erb templater looks for these tags and interprets the inside as ruby.

Sinatra emphasises convention over configuration: rather than specifying the exact place to find the template, you just give the name and Sinatra ‘knows’ to look in the views folder. This means you have to write less code in the long run, but also that you have to know the conventions before you start.

You call a template with the line erb :template_name
For this to work, you will need a template called template_name.erb in the views folder.
If you want to share a variable with the template, you need to make it an instance variable, by starting the variable name with @
You can display these shared instance variables by using them inside an erb tag:
```
<%= @my_variable %>
```

Update your app.rb file to use the templates in views.
Restart your server and check you can see the new page h1 sections.
Update the post "/" block so that if the user shown the drink page if they’re 18, and the no_drink page otherwise

Add twitter bootstrap to each of the templates by adding a link to the CDN-hosted version
Add a div class='container' around the page content, and add some styling to the form (see here).
Make the other pages look nicer!

Prev | Next