Tuesday, January 31, 2012
Exercise 51: Getting Input From A Browser: Learn Ruby the Hard Way: Practicum
This time around, we'll make some interactive elements. We will submit text to our application by using that well known method, the form. Additionally, we'll look at ways that we can do automated testing for forms.
How The Web Works (The Boring Bits)
Zed's got this pretty well nailed down, so I'll let him tell this part :):
- You type in the url http://learnpythonthehardway.org/ into your browser and it sends the request out on line (A) to your computer's network interface.
- Your request goes out over the internet on line (B) and then to the remote computer on line (C) where my server accepts the request.
- Once my computer accepts it, my web application gets it on line (D), and my web application code runs the / (index) handler.
- The response comes out of my web server when I return it, and goes back to your browser over line (D) again.
- The server running this site takes the response off line (D) then sends it back over the internet on line (C).
- The response from the server then comes off the internet on line (B), and your computer's network interface hands it to your browser on line (A).
- Finally, your browser then displays the response.
Rather than go through a full breakdown of what the web terms mean, I'll let the reader take a look at Zed's very well done crash course explanation over at http://ruby.learncodethehardway.org/book/ex51.html (chances are, if you've gotten this far with me, you already know the links and site very well.
How Forms Work
Let's take the lib/gothonweb.rb file make some changes to it:
- Restart Sinatra (hit CTRL-C and then run it again) to make sure it loads again
- With your browser go to http://localhost:4567/hello which should display, "I just wanted to say Hello, Nobody."
- Next, change the URL in your browser to http://localhost:4567/hello?name=Frank and you'll see it say "Hello, Frank."
Finally, change the name=Frank part to be your name. Now it's saying hello to you.
So what have we done here?
- We're now using the "params" hash with a value of ":name" to get data from the browser. Sinatra takes all of the key/value pairs after the ? part of the URL and adds them to the params hash for you to work with.
- The greeting is then constructed from the value of ":name". By default we set this to "Nobody". If we give it a name value on the command line, it changes it based on the "name=EnteredName" that we put in the URL after the "?"
We can add more than one param on the command line, too if we modify the script to accept the changes.
We can change the code to get params[:name] and params[:greet] as well like this:
By default, it looks like this:
And with the url values, it looks like this:
Creating HTML Forms
OK, so we can pass the values through the URL, but let's face it, that's a pain. Most people expect to enter information in the browser directly and hit a button. this uses the time honored web feature called a form (or a POST form, to be more specific). A form is just an HTML file with a "form" tag in it. This form will collect information from the user, then send it to your web application just like you did above.
Let's make a quick form to see how this works (this is being done in lib/views/hello_form.erb):
Now make some changes to gothonweb to be able to accept the form:
Once you've got those written up, simply restart the web application again and hit it with your browser like before.
The part of the hello_form.erb file that makes this work is the line with