Lesson Monday

Remember how we used a layout.erb file in Sinatra to hold HTML tags such as <body> and <title>? Rails has a special layout file as well: app/views/layouts/application.html.erb file, which is very similar to the layout.erb file in our Sinatra apps. Here's the current file that Rails generated for us:

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>RailsRecordStore</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Rails has automatically added turbolinks for us. Turbolinks makes pages load faster and it's generally not something we need to worry about except in those rare instances it conflicts with other things in our application.

We'll also learn about the stylesheet_link_tag and the javascript_include_tag later. The csrf_meta_tags helps with CSRF protection for your app.

If we ever want to change something on all of your pages — such as adding a logo or nav bar — this layout file is the place to do it.

As our layouts get more complex, such as with nav bars that change depending on the page we're on, we can write longer content_fors like this in our views:

app/views/layouts/application.html.erb
<% content_for(:navbar) do %>
  <li><a href="/">Home</a></li>
  <li><a href="something/else">Something else</a></li>
  <li><a href="etc">Etc.</a></li>
<% end %>

For a navbar, this will go before the yield statement. For a footer, it would go after.

Flash Messages


We can also use this file to generate flash messages. Flash messages allow us to add special messages for the user after something is created, updated, or destroyed. (Note these flash messages have nothing to do with the Flash plugin.)

We can set a flash message in the controller, which is stored as a temporary cookie on the user's browser. A cookie is a place for a site to store information in a user's web browser. Every time the user makes a request to that site, the browser sends the cookie's data with the request. When the next page loads, the server sees the flash message, adds it to the page (it's usually included in the layout), and clears the cookie. If the user reloads the page or browses to a new page, the message disappears.

The flash acts like a hash. We can set two keys — we use flash[:notice] for information and flash[:alert] for errors.

For flash messages to work, we must add the flash message to the layout file, right above the page content:

app/views/layouts/application.html.erb
<body>

  <%= flash[:alert] %>
  <%= flash[:notice] %>

  <%= yield %>

</body>

Now we can add the actual message to display in our controller action:

app/controllers/albums_controller.rb
...
def create
  @album = Album.new(album_params)
  if @album.save
    flash[:notice] = "Album successfully added!"
    redirect_to albums_path
  else
    render :new
  end
end

If we create an album, we will see our flash message at the top of the screen. This is helpful for users because otherwise they'd have no confirmation that an album was successfully created. If we refresh the page, the flash message disappears.

Try adding flash messages for all CRUD functionality in your applications. That way users will know when they've successfully created, updated or destroyed an album or song.

Lesson 20 of 34
Last updated August 7, 2022