- 10.1 Setup
- 10.2 Site Pages
- 10.3 Layouts
- 10.4 Embedded Ruby
- 10.5 Palindrome Detector
- 10.6 Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
10.2 Site Pages
We’ll start by making three pages for our site: Home, About, and Palindrome Detector. In contrast to our previous Sinatra apps, which have operated by simply returning strings in response to GET requests, for our full app we’ll use a more powerful technique known as views, which consist of code that gets converted to HTML and sent to the browser.
Initially, these views will actually just be static HTML, but we’ll see starting in Section 10.4 how to use them to generate HTML dynamically. The key to Sinatra views is the erb function, which stands for “embedded Ruby” (itself often abbreviated as ERB). The argument to erb is a Ruby symbol (Section 4.4.1) with the name of the view. For example to render the index page on the root url /, we can write
This code causes Sinatra to look for a file called index.erb in the views directory. (The .erb extension indicates that the file is to be processed with the erb function.)
Because the code for all three views is basically the same, we’ll add them all at the same time, as shown in Listing 10.6. The main difference is, in place of the root URL /, the other two pages define named URLs: /about and /palindrome, respectively.
Listing 10.6: Rendering three views.
app.rb
require 'sinatra' get '/' do erb :index end get '/about' do erb :about end get '/palindrome' do erb :palindrome end
The file in Listing 10.6 is in effect a controller, which coordinates between different parts of the application, defines the URLs (or routes) supported by the app, responds to requests, etc. Together, the views and controllers are two-thirds of the Model-View-Controller architecture for developing web applications, also known as MVC. (We won’t get to the Model part of MVC in this tutorial, but the Ruby on Rails Tutorial discusses all three parts of MVC in depth.)
To get the three view renderings in Listing 10.6 to work, we have to create the three view files themselves:
We then fill the three ERB files with HTML; this is straightforward but tedious, so I suggest you copy and paste from Listing 10.7, Listing 10.8, and Listing 10.9. (The indentation of the material inside the body tags is at the wrong depth, but we’ll see in Section 10.3 why this is.)
Listing 10.7: The initial Home (index) view.
views/index.erb
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Learn Enough Ruby Sample App</title> <link rel="stylesheet" type="text/css" href="/stylesheets/main.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet"> </head> <body> <a href="/" class="header-logo"> <img src="/images/logo_b.png" alt="Learn Enough logo"> </a> <div class="container"> <div class="content"> <h1>Sample Sinatra App</h1> <p> This is the sample Sinatra app for <a href="https://www.learnenough.com/ruby-tutorial"><em>Learn Enough Ruby to Be Dangerous</em></a>. Learn more on the <a href="/about">About</a> page. </p> <p> Click the <a href="https://en.wikipedia.org/wiki/Sator_Square">Sator Square</a> below to run the custom <a href="/palindrome">Palindrome Detector</a>. </p> <a class="sator-square" href="/palindrome"> <img src="/images/sator_square.jpg" alt="Sator Square"> </a> </div> </div> </body> </html>
Listing 10.8: The initial About view.
views/about.erb
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Learn Enough Ruby Sample App</title> <link rel="stylesheet" type="text/css" href="/stylesheets/main.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet"> </head> <body> <a href="/" class="header-logo"> <img src="/images/logo_b.png" alt="Learn Enough logo"> </a> <div class="container"> <div class="content"> <h1>About</h1> <p> This site is the final application in <a href="https://www.learnenough.com/ruby-tutorial"><em>Learn Enough Ruby to Be Dangerous</em></a> by <a href="https://www.michaelhartl.com/">Michael Hartl</a>, a tutorial introduction to the <a href="https://www.ruby-lang.org/en/">Ruby programming language</a> that is part of <a href="https://www.learnenough.com/">LearnEnough.com</a>. </p> <p> <em>Learn Enough Ruby to Be Dangerous</em> is a natural prerequisite to the <a href="https://www.railstutorial.org/"><em>Ruby on Rails Tutorial</em></a>, a book and video series that is one of the leading introductions to web development. <em>Learn Enough Ruby</em> is also an excellent choice <em>after</em> the <em>Rails Tutorial</em> for those who prefer to start with the latter first. </p> </div> </div> </body> </html>
Listing 10.9: The initial Palindrome Detector view.
views/palindrome.erb
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Learn Enough Ruby Sample App</title> <link rel="stylesheet" type="text/css" href="/stylesheets/main.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet"> </head> <body> <a href="/" class="header-logo"> <img src="/images/logo_b.png" alt="Learn Enough logo"> </a> <div class="container"> <div class="content"> <h1>Palindrome Detector</h1> <p>This will be the palindrome detector.</p> </div> </div> </body> </html>
Visiting localhost:4567 or the equivalent causes Sinatra to serve up the default (index) page, as shown in Figure 10.4. To get to the About page, we can type localhost:4567/about into the browser address bar, as seen in Figure 10.5.
)
Figure 10.4: The initial Home page.
)
Figure 10.5: The initial About page.
Figure 10.4 and Figure 10.5 show that the pages are basically working, but Listing 10.7 and subsequent listings include both images and a CSS file, which aren’t currently present on the local system. We can change this situation by downloading the needed files from the Learn Enough CDN and putting them in the public directory, which is where Sinatra looks for them by default.
The way to do this is to use curl to fetch a tarball, which is similar to a ZIP file and is common on Unix-compatible systems:
This kind of file is created by tar, or “tape archive”, whose name is an old-school throwback to the time when external tapes were routinely used for large backups. Meanwhile, the gz extension refers to the important gzip method for compressing files.
The way to unzip the file is to use tar zxvf, which stands for “tape archive gzip extract verbose file”:2
With experience, you may prefer to omit the v flag, but initially I suggest using verbose output so that you can see what’s going on during the extraction process. By the way, note that tar flags are just letters by themselves, with no preceding hyphens as in most other Unix commands. On many systems, you can in fact use hyphens, as in tar -z -x -v -f <filename>, but for reasons unknown to me the usual convention with tar is to omit them.
As seen from the verbose output above, unzipping the file has created a public directory:
$ ls public/ images stylesheets
Refreshing the About page confirms that the logo image and CSS are now working (Figure 10.6). The improvement on the Home page is even more dramatic, as seen in Figure 10.7.
)
Figure 10.6: A nicer-looking About page.
)
Figure 10.7: A much-improved Home page.
10.2.1 Exercises
Visit the /palindrome URL and confirm that the CSS and images are working.
Make a commit and deploy the changes.