Lesson Monday

Let's take what we learned about ERB add just enough logic to display a list of albums and save new albums. In this lesson, we'll add a view for '/albums' that will loop through and display albums. In the next lesson, we'll add a view with a form to add a new album.

First, remove any existing routes listed in app.rb. We'll create all of the routes we need for our record store over the course of the next few lessons.

Then, we'll add our first two record store routes to app.rb.

app.rb
require('sinatra')
require('sinatra/reloader')
require('./lib/album')
require('pry')
also_reload('lib/**/*.rb')

get('/') do
  @albums = Album.all
  erb(:albums)
end

get('/albums') do
  @albums = Album.all
  erb(:albums)
end

Let's look at the new code in our two routes. When these routes are reached, Sinatra will call Album.all() and save the results in an instance variable called @albums. Because @albums is an instance variable, we'll be able to use it in the corresponding view. Note that a local variable like albums will not be accessible to the view.

Note that both routes can render the same view. In fact, we could have an application with endless routes all rendering the same view (not likely, but possible). The code above isn't very DRY but we'll deal with that later.

Add a file named albums.erb to views. Let's start with a little HTML code:

views/albums.erb
<h1>All Sales Vinyl</h1>

<h3>Available Records</h3>

<% if @albums.any? %>
  <ul>
    <% @albums.each do |album| %>
      <li><%= album.name %></li>
    <% end %>
  </ul>
<% else %>
  <p>There are currently no records to display.</p>
<% end %>

<a href="/albums/new">Add a new album</a>

The code above first checks to see if there are any albums. Because @albums will always be an array, we can use Array#any? to check if the array actually contains any albums. If so, we will loop through the albums and display their names. If not, we'll let the user know there are currently no albums to display.

This kind of view logic is very common in an ERB and we'll be using code that looks like this for Rails as well. The view combines both Ruby logic (a loop and a conditional) with standard HTML elements such as headers and lists.

We should only ever put view-related logic in our views. Both the conditional and the looping logic in our code above determine what the user should see so they clearly belong here. Note that we don't even call methods like Album.all() here — we let app.rb handle that. Instead, relevant information is passed into instance variables so we don't have to call any backend methods.

We also add a new album link in the code above that tells Sinatra specifically which route the link should hit. Other than that, links look similar to how we've used them in the past. We can still use a full URL to link to an external site, for instance.

We can start the server and navigate to localhost:4567. We'll get a message saying there are currently no records, which is exactly what we'd expect.

In the next lesson, we'll learn how to use forms and add a view for creating new albums.

Lesson 18 of 37
Last updated August 7, 2022