- 10.1 Setup
- 10.2 Site Pages
- 10.3 Layouts
- 10.4 Embedded Ruby
- 10.5 Palindrome Detector
- 10.6 Conclusion
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 toGETrequests, for our full app we’ll use a more powerful technique known asviews, 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 theerbfunction, which stands for “embedded Ruby” (itself often abbreviated as ERB). The argument toerbis 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 calledindex.erbin theviewsdirectory. (The.erbextension indicates that the file is to be processed with theerbfunction.)
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'/'doerb:indexendget'/about'doerb:aboutendget'/palindrome'doerb:palindromeend
The file in Listing 10.6 is in effect acontroller, which coordinates between different parts of the application, defines the URLs (orroutes) supported by the app, responds to requests, etc. Together, the views and controllers are two-thirds of theModel-View-Controllerarchitecturefor developing web applications, also known asMVC. (We won’t get to the Model part of MVC in this tutorial, but theRuby on Rails Tutorialdiscusses 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 thebodytags 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
<html><head><metacharset="utf-8"> <title>Learn Enough Ruby Sample Apptitle> <linkrel="stylesheet"type="text/css"href="/stylesheets/main.css"> <linkhref="https://fonts.googleapis.com/css?family=Open+Sans:300,400"rel="stylesheet"> head> <body><ahref="/"class="header-logo"><imgsrc="/images/logo_b.png"alt="Learn Enough logo"> a> <divclass="container"><divclass="content"><h1>Sample Sinatra Apph1><p>This is the sample Sinatra app for <ahref="https://www.learnenough.com/ruby-tutorial"><em>Learn Enough Ruby to Be Dangerousem>a>. Learn more on thehref="/about">Abouta> page. p><p>Click thehref="https://en.wikipedia.org/wiki/Sator_Square">Sator Squarea> below to run the customhref="/palindrome">Palindrome Detectora>. p><aclass="sator-square"href="/palindrome"><imgsrc="/images/sator_square.jpg"alt="Sator Square"> a>div> div> body> html>
Listing 10.8:The initial About view.
views/about.erb
<html><head><metacharset="utf-8"> <title>Learn Enough Ruby Sample Apptitle> <linkrel="stylesheet"type="text/css"href="/stylesheets/main.css"> <linkhref="https://fonts.googleapis.com/css?family=Open+Sans:300,400"rel="stylesheet"> head> <body><ahref="/"class="header-logo"><imgsrc="/images/logo_b.png"alt="Learn Enough logo"> a> <divclass="container"><divclass="content"><h1>Abouth1><p>This site is the final application in <ahref="https://www.learnenough.com/ruby-tutorial"><em>Learn Enough Ruby to Be Dangerousem>a> byhref="https://www.michaelhartl.com/">Michael Hartla>, a tutorial introduction to the <ahref="https://www.ruby-lang.org/en/">Ruby programming languagea> that is part of<ahref="https://www.learnenough.com/">LearnEnough.coma>. p><p><em>Learn Enough Ruby to Be Dangerousem> is a natural prerequisite to thehref="https://www.railstutorial.org/"><em>Ruby on Rails Tutorialem>a>, a book and video series that is one of the leading introductions to web development. <em>Learn Enough Rubyem> is also an excellent choice <em>afterem> the <em>Rails Tutorialem> 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
<html><head><metacharset="utf-8"> <title>Learn Enough Ruby Sample Apptitle> <linkrel="stylesheet"type="text/css"href="/stylesheets/main.css"> <linkhref="https://fonts.googleapis.com/css?family=Open+Sans:300,400"rel="stylesheet"> head> <body><ahref="/"class="header-logo"><imgsrc="/images/logo_b.png"alt="Learn Enough logo"> a> <divclass="container"><divclass="content"><h1>Palindrome Detectorh1><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 inFigure 10.4. To get to the About page, we can typelocalhost:4567/aboutinto the browser address bar, as seen inFigure 10.5.
Figure 10.4: The initial Home page.
Figure 10.5: The initial About page.
Figure 10.4andFigure 10.5show 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 thepublicdirectory, which is where Sinatra looks for them by default.
The way to do this is to usecurlto fetch atarball,这是类似于一个ZIP fileand is common on Unix-compatible systems:
This kind of file is created bytar, or “tape archive”, whose name is an old-school throwback to the time when external tapes were routinely used for large backups. Meanwhile, thegzextension refers to the importantgzipmethod for compressing files.
The way to unzip the file is to usetar zxvf, which stands for “tapearchive gzip extractverbosefile”:2
With experience, you may prefer to omit thevflag, but initially I suggest using verbose output so that you can see what’s going on during the extraction process. By the way, note thattarflags 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 intar -z -x -v -f
As seen from the verbose output above, unzipping the file has created apublicdirectory: