- 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.5 Palindrome Detector
In this section, we’ll complete the sample Sinatra app by adding a working palindrome detector. This will involve putting the Ruby gem developed in Chapter 8 to good use. We’ll also see the first truly working HTMLformin theLearn Enough introductory sequence.
Our first step is to add a palindrome gem. I recommend using your own, but if for any reason you didn’t publish one you can use mine, which is shown in Listing 10.43.
Listing 10.43:Adding a palindrome gem.
Gemfile
source'https://rubygems.org'ruby'3.1.1'# Change this line if you're using a different Ruby version.gem'sinatra','2.2.0'gem'puma','5.6.4'gem'rerun','0.13.1'gem'mhartl_palindrome','0.1.0'group:testdogem'minitest','5.15.0'gem'minitest-reporters','1.5.0'gem'rack-test','1.1.0'gem'rake','13.0.6'gem'nokogiri','1.13.3'end
Then we install as usual:
We also need to include the palindrome gem in our app (Listing 10.44).
Listing 10.44:Adding the palindrome gem to the app.
app.rb
require'sinatra'require'mhartl_palindrome'get'/'do@title='Home'erb:indexendget'/about'do@title='About'erb:aboutendget'/palindrome'do@title='Palindrome Detector'erb:palindromeend
With that prep work done, we’re now ready to add a form to our Palindrome Detector page, which is currently just a placeholder (Figure 10.13). The form consists of three principal parts: aformtag to define the form, atextareafor entering a phrase, and a button for submitting the phrase to the server.
)
Figure 10.13: The current state of the palindrome page.
Let’s work inside out. Thebuttonhas two attributes: a CSS class for styling and atypeindicating that it’s designed to submit information:
Thetextareahas three attributes: anameattribute, which as we’ll see in a moment passes important information back to the server, along withrowsandcolsto define the size of the textarea box:
Thetextareatag’s content is the default text displayed in the browser, which in this case is just blank.
Finally, theformtag itself has three attributes: a CSSid, which isn’t used here but is conventional to include; anaction, which specifies the action to take when submitting the form; and amethodindicating theHTTP request methodto use:
We saw as early as Listing 1.8 how Sinatra apps define responses to URLs:
Heregetis a Sinatra function specifying how to respond when someone hits the root URL / with aGETrequest, which is the kind of request a web browser sends for an ordinary click. In contrast, aPOSTrequest is the kind of request typically submitted by a form. (As you might guess, there’s a corresponding Sinatra function calledpost为处理这种类型的请求,我们会看到a moment.)
Putting the above discussion together (and adding abrtag to add a line break) yields the form shown in Listing 10.45. Our updated Palindrome Detector page appears inFigure 10.14.
)
Figure 10.14: The new palindrome form.
Listing 10.45:Adding a form to the palindrome page.
views/palindrome.erb
<h1>Palindrome Detectorh1><formid="palindrome_tester"action="/check"method="post"> <textareaname="phrase"rows="10"cols="60">textarea> <br> <buttonclass="form-submit"type="submit">Is it a palindrome?button> form>
The form in Listing 10.45 is, apart from cosmetic details, identical to theanalogous formdeveloped inLearn Enough JavaScript to Be Dangerous:
In that case, though, we “cheated” by using a JavaScript event listener tointerceptthe submit request from the form, and no information ever got sent from the client (browser) to the server. (It’s important to understand that, when developing web applications on a local computer, the client and server are the same physical machine, but in general they are different.)
这一次,我们不会欺骗:请求真的会go all the way to the server, which means we’ll have to handle thePOSTrequest on the back-end. As hinted above, the way to do this is with thepostfunction:
Here the name of the URL path,/check, matches the value of theactionparameter in the form (Listing 10.45).
To get our first hint of what form submission does, we’ll use one of my favorite heavy-handed debugging tricks (Box 5.1), which is toraisean exception right inapp.rb. In this case, we’llraisethe contents of a special object calledparams, called usinginspectto ensure that the result is a proper string. The code appears in Listing 10.46, while the result of submitting “Madam, I’m Adam.” in the form appears inFigure 10.15.
)
Figure 10.15: The result of araiseafter form submission.
Listing 10.46:Investigating the effects of a form submission.
app.rb
require'sinatra'require'mhartl_palindrome'get'/'do@title='Home'erb:indexendget'/about'do@title='About'erb:aboutendget'/palindrome'do@title='Palindrome Detector'erb:palindromeendpost'/check'doraiseparams.inspectend
As seen inFigure 10.15,paramsis a hash (Section 4.4), with key"phrase"and value"Madam, I'm Adam.":
Thisparamshash is created automatically by Sinatra according to the key–value pairs in the form (Listing 10.45). In this case, we have only one such pair, with key given by thenameattribute of thetextarea("phrase") and value given by the string entered by the user. By the way, inside the application code it’s possible to use a symbol key instead, and indeed this is the more common convention, so that
extracts the value of the phrase.
Now that we know about the existence and contents ofparams, detecting a palindrome is easy: Just extract the phrase and callpalindrome?on it. If we put the phrase into an instance variable called@phrase, our code would look something like this in plain Ruby:
Listing 10.47:What our palindrome results might look like in plain Ruby.
if@phrase.palindrome?puts"\"#{@phrase}\"is a palindrome!"else puts"\"#{@phrase}\ "isn't a palindrome."end
We can do the same basic thing using embedded Ruby (Section 10.4), only using<%= ... %>instead of interpolation, and surrounding any other code in<% ... %>tags. This is the same syntax we’ve seen before, only without an equals sign=, which tells ERB to evaluate the code butnotto insert it into the page. Schematically, it looks something like Listing 10.48.
Listing 10.48:Schematic code for the palindrome result.
<%if@phrase.palindrome?%>"<%=@phrase%>" is a palindrome!<%else%>"<%=@phrase%>" isn't a palindrome!<%end%>
We’ll create a file calledresult.erb:
The code itself is an expanded version of Listing 10.48 with a few more HTML tags for a better appearance, as shown in Listing 10.49.
Listing 10.49:Displaying the palindrome result using ERB.
views/result.erb
<h1>Palindrome Resulth1><%if@phrase.palindrome?%><divclass=“结果result-success”><p>"<%=@phrase%>" is a palindrome!p>div><%else%><divclass="result result-fail"><p>"<%=@phrase%>" isn't a palindrome!p>div><%end%>
All that’s left now is handling the submission, putting the value ofparams[:phrase]in@phrase, and rendering the result. Since the form issues an HTTPPOSTrequest, the trick is to use thepostfunction in place of thegetfunction we’ve used on every page so far. The URL itself is'/check', as indicated by the value of theactionattribute in Listing 10.45. The result appears in Listing 10.50.
Listing 10.50:Handling a palindrome form submission.
app.rb
require'sinatra'require'mhartl_palindrome'get'/'do@title='Home'erb:indexendget'/about'do@title='About'erb:aboutendget'/palindrome'do@title='Palindrome Detector'erb:palindromeendpost'/check'do@phrase=params[:phrase]erb:resultend
With that, our palindrome detector should be working! Let’s see if it can correctly identify one of the most ancient palindromes, the so-calledSator Squarefirst found in the ruins ofPompeii(Figure 10.16).4(Authorities differ on the exact meaning of the Latin words in the square, but the likeliest translation is “The sower [farmer] Arepo holds the wheels with effort.”)
)
Figure 10.16: A Latin palindrome from the lost city of Pompeii.
Entering the text “SATOR AREPO TENET OPERA ROTAS” (Figure 10.17) and submitting it leads to the result shown inFigure 10.18.
)
Figure 10.17: A Latin palindrome?
)
Figure 10.18: A Latin palindrome!
10.5.1 Form Tests
Our application is now working, but note that testing asecondpalindrome requires clicking on “IS IT A PALINDROME?” It would be more convenient if we included the same submission form on the result page as well.
To do this, we’ll first add a simple test for the presence of aformtag on the palindrome page. Because the tests we’ll be adding are specific to that page, we’ll create a new test file to contain them:
The test itself is closely analogous to theh1test in Listing 10.18, as shown in Listing 10.51.
Listing 10.51:Testing for the presence of a form tag.GREEN
palindrome_test.rb
require_relative'test_helper'classPalindromeAppTest<Minitest::TestincludeRack::Test::MethodsdefappSinatra::Applicationenddeftest_form_presenceget'/palindrome'assert doc(last_response).at_css('form')endend
Now we’ll add tests for the existing form submission for both non-palindromes and palindromes. Just asgetin tests issues aGETrequest,postin tests issues aPOSTrequest. The first argument ofpostis the URL, and the second is theparamshash:
(注意,这个使用更紧凑key: valuehash notation mentioned in Section 4.4; per the note near the end of Section 10.3, we have also omitted the curly braces.)
To test the response, we’ll verify that the text in the page’s paragraph tag includes the right result. The most elegant way to do this is withassert_-includesfrom theminitest assertions, where
is effectively equivalent to
using theString#include?method discussed in Section 2.5. (As withassert_equal, using the native assertion is generally more convenient because the failing messages are more descriptive.) For a non-palindrome, the assertion would look something like this:
Taking the ideas above and applying them to both non-palindromes and palindromes gives the tests shown in Listing 10.52 (with only inner lines highlighted for brevity).
Listing 10.52:Adding tests for form submission.GREEN
palindrome_test.rb
require_relative'test_helper'classPalindromeAppTest<Minitest::TestincludeRack::Test::MethodsdefappSinatra::Applicationenddeftest_form_presenceget'/palindrome'assert doc(last_response).at_css('form')enddeftest_non_palindrome_submissionpost'/check',phrase:"Not a palindrome"assert_includes doc(last_response).at_css('p').content,"isn't a palindrome"enddeftest_palindrome_submissionpost'/check',phrase:"Able was I, ere I saw Elba."assert_includes doc(last_response).at_css('p').content,"is a palindrome"end end
因为我们were testing existing functionality, our tests should already beGREEN:
Listing 10.53:GREEN
$bundleexecraketest6 tests, 15 assertions, 0 failures, 0 errors, 0 skips
As a capstone to our development, we’ll now add a form on the result page using theRED,GREEN, refactor cycle that is a hallmark of TDD. Without loss of generality, we’ll work in the non-palindrome test; all we need to do is add aformtest identical to the one in Listing 10.51, as shown in Listing 10.54.
Listing 10.54:Adding a test for a form on the result page.RED
palindrome_test.rb
require_relative'test_helper'classPalindromeAppTest<Minitest::TestincludeRack::Test::MethodsdefappSinatra::Applicationenddeftest_form_presenceget'/palindrome'assert doc(last_response).at_css('form')enddeftest_non_palindrome_submissionpost'/check',phrase:"Not a palindrome"assert_includes doc(last_response).at_css('p').content,"isn't a palindrome"assert doc(last_response).at_css('form')enddeftest_palindrome_submissionpost'/check',phrase:"Able was I, ere I saw Elba."assert_includes doc(last_response).at_css('p').content,"is a palindrome"end end
As required, the test suite is nowRED:
Listing 10.55:RED
$bundleexecraketest6 tests, 16 assertions, 1 failures, 0 errors, 0 skips
We can get the tests toGREENagain by copying the form frompalindrome.erband pasting it intoresult.erb, as shown in Listing 10.56.
Listing 10.56:Adding a form to the result page.GREEN
views/result.erb
<h1>Palindrome Resulth1><%if@phrase.palindrome?%><divclass=“结果result-success”><p>"<%=@phrase%>" is a palindrome!p> div><%else%><divclass="result result-fail"><p>"<%=@phrase%>" isn't a palindrome!p> div><%end%><h2>Try another one!h2><formid="palindrome_tester"action="/check"method="post"><textareaname="phrase"rows="10"cols="60">textarea><br><buttonclass="form-submit"type="submit">Is it a palindrome?button>form>
This gets our tests toGREEN:
Listing 10.57:GREEN
$bundleexecraketest6 tests, 16 assertions, 0 failures, 0 errors, 0 skips
That cut-and-paste should have set your programmerSpidey-sense刺痛:重复!粘贴在孔蒂nt is a clear violation of the Don’t Repeat Yourself (DRY) principle. Happily, we saw how to eliminate such duplication in the case of the site navigation by refactoring the code to use a partial (Listing 10.40), which we can apply to this case as well. As with the nav, we’ll first create a separate file for the form HTML:
Then we can fill it with the form (Listing 10.58), while replacing the form with an ERB rendering on the result page (Listing 10.59) and on the main palindrome page itself (Listing 10.60).
Listing 10.58:A partial for the palindrome form.GREEN
视图/ palindrome_form.erb
<formid="palindrome_tester"action="/check"method="post"> <textareaname="phrase"rows="10"cols="60">textarea> <br> <buttonclass="form-submit"type="submit">Is it a palindrome?button> form>
Listing 10.59:Rendering the form partial on the result page.GREEN
views/result.erb
<h1>Palindrome Resulth1><%if@phrase.palindrome?%><divclass=“结果result-success”><p>"<%=@phrase%>" is a palindrome!p> div><%else%><divclass="result result-fail"><p>"<%=@phrase%>" isn't a palindrome!p> div><%end%><h2>Try another one!h2><%=erb:palindrome_form%>
Listing 10.60:Rendering the form partial on the main palindrome page.GREEN
views/palindrome.erb
<h1>Palindrome Detectorh1><%=erb:palindrome_form%>
As required for a refactoring, the tests are stillGREEN!
Listing 10.61:GREEN
$bundleexecraketest6 tests, 16 assertions, 0 failures, 0 errors, 0 skips
Submitting the Sator Square palindrome shows that the form on the result page is rendering properly, as shown inFigure 10.19.
)
Figure 10.19: The form on the result page.
Filling the textarea with one of my favorite looooong palindromes (Figure 10.20) gives the result shown inFigure 10.21.5
)
Figure 10.20: Entering a long string in the form’s textarea field.
)
Figure 10.21: That long string is a palindrome!
And with that—“A man, a plan, a canoe, pasta, heros, rajahs, a coloratura, maps, snipe, percale, macaroni, a gag, a banana bag, a tan, a tag, a banana bag again (or a camel), a crepe, pins, Spam, a rut, a Rolo, cash, a jar, sore hats, a peon, a canal—Panama!”—we’re done with our palindrome detector web application. Whew!
The only thing left is to commit and deploy:
Note that, after pushing once, we can omit the branch name (main) and just typegit push heroku. The result is a palindrome application working in production (Figure 10.22)! (To learn how to host a Heroku site using a custom domain instead of aherokuapp.comsubdomain, see the free tutorialLearn Enough Custom Domains to Be Dangerous.)
)
Figure 10.22: Our palindrome detector working on the live Web.
10.5.2 Exercises
Confirm by submitting an empty textarea that the palindrome detector currently returnstruefor the empty string, which is a flaw in the palindrome gem itself. What happens if you submit a bunch of spaces?
In the palindrome gem, write a test asserting that a string of spacesisn’ta palindrome (RED). Then write the application code necessary to get that test toGREEN. Bump the version number and publish your gem as in Section 8.5.1. (You can refer tomy versionif you’d like some help.)
After waiting a few minutes for RubyGems to update, bump the version number in theGemfile(Listing 10.43), update the gems usingbundle update, and confirm that an empty submission is no longer a palindrome, both locally and (after redeploying) in production.
Make a commit and deploy the changes.