Simple App VI (TDD - Dynamic Pages, Embedded Ruby, Layouts) 2020
Now that we've replaced the variable part of the page titles with ERb (Simple_app V - TDD (Dynamic Pages - Embedded Ruby)), each of our pages looks something like this:
<% provide(:title, 'Foo') %>
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Simple App | <%= yield(:title) %></title>
</head>
<body>
Contents
</body>
</html>
All our pages are identical in structure, including the contents of the title tag, with the exception of the material inside the body tag. In order to factor out this common structure, Rails comes with a special layout file called application.html.erb.
To get the layout to work, we have to replace the default title with the Embedded Ruby from the examples above:
<title>Ruby on Rails Tutorial Sample App | <%= yield(:title) %></title>
The sample application site layout looks like this (app/views/layouts/application.html.erb) :
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Simple App | <%= yield(:title) %></title>
<%= stylesheet_link_tag "application", media: "all",
"data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
Here the line:
<%= yield %>
This code is responsible for inserting the contents of each page into the layout. Using this layout ensures that, for example, visiting the page /static_pages/home converts the contents of home.html.erb to HTML and then inserts it in place of <%= yield %>.
Also note that the default Rails layout includes several additional lines:
<%= stylesheet_link_tag ... %> <%= javascript_include_tag "application", ... %> <%= csrf_meta_tags %>
This code arranges to include the application stylesheet and JavaScript, which are part of the asset pipeline, together with the Rails method csrf_meta_tags, which prevents cross-site request forgery (CSRF).
app/views/static_pages/home.html.erb:
<% provide(:title, 'Home') %> <h1>Simple App</h1> <p> This is the home page for the <a href="http://www.bogotobogo.com/RubyOnRails/RubyOnRails.php">Ruby on Rails Tutorial</a> simple application. </p>
app/views/static_pages/help.html.erb:
<% provide(:title, 'Help') %> <h1>Help</h1> <p> Get help on the Ruby on Rails Tutorial at the <a href="http://www.bogotobogo.com/RubyOnRails/RubyOnRails.php/help">Rails Tutorial help page</a>. </p>
app/views/static_pages/about.html.erb:
<% provide(:title, 'About Us') %> <h1>About Us</h1> <p> The <a href="http://www.bogotobogo.com/RubyOnRails/RubyOnRails.php">Ruby on Rails Tutorial</a> is a project to make a book and screencasts to teach web development </p>
Now that we re-defined views (Home, Help, and About) while pages are the same as before, but with less duplication. To verify the test suite still passes indicating that these code refactoring was successful:
$ bundle exec rspec spec/requests/static_pages_spec.rb ...... Finished in 0.51843 seconds 6 examples, 0 failures Randomized with seed 28429
Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization
My YouTube channel