Learn Ruby the Hard Way – Exercise 50

Here is my work for Exercise 50.
I followed along the steps to install Sinatra and created my first Sinatra application! To better understand what is happening when we run Sinatra, I went back to the basics and read up on the Internet and the Web. (Unexpected perk/downfall of reading about DNS/Domain Name Servers: I now know why editing the hosts file on my computer blocks certain websites. ie. Facebook! If I know how it’s blocked, I can undo the block…)

Learning about the Internet
Learning about the Internet

I took Zed’s advice and drew a diagram of how Sinatra works, how the information flows from the browser, to Sinatra, then to index.GET, and finally back to the browser.

Information flow chart for Sinatra
Information flow chart for Sinatra

Study Drills

  1. Read the documentation at http://http://www.sinatrarb.com/documentation.html.
    I read the documentation, but a lot of it went over my head (custom routes? streaming responses? sessions?). I was quite confused, but then again that’s how you feel when you first start learning anything new.
  2. Experiment with everything you can find there, including their example code.
    I experimented with the routes. Here are a few examples I played around with.

    Screen Shot 2015-10-10 at 11.45.54 AM
    Route with parameter

     

    Route with splat parameter (wildcard)
    Route with splat parameter (wildcard)

     

    I played around with views/templates.

    Embedding one page in another
    Embedding one page in another

     

    a page that show the current time
    a page that show the current time

     

  3. Read about HTML5 and CSS. It’s a large topic but just try to get familiar with it.
    I’ve worked with HTML5, HTML5 canvas and CSS3 so this was a welcome familiar study drill!
  4. Put some content in static/howdy.html and go to http://localhost:8080/howdy.html. If it doesn’t work, make sure your app.rb file has the correct :public_folder setting.
    My howdy page
    My howdy page

    Summary
    I learned how to create a simple Sinatra app. In Sinatra, a route is an HTTP method paired with a URL-matching pattern. Each route is associated with a code block. When we write get ‘/’ do … end, we are making a handler. A handler is a chunk of code that is run when your browser goes to a new place in the application.

    Example handler
    Example handler

    For example, the handler above is saying when the browser goes to ‘/greet/:name’, we want to return the string “Say Hello to #{params[‘name’]}!”. If we go to ‘/greet/Stacey’, the string returned will be “Say Hello to Stacey!”. “Stacey” is gotten through the params hashmap. Sinatra builds params from the browser’s HTTP request. This returned string is what Sinatra should send to the browser. Sinatra sends this to the browser and that is what we see on the screen.

    What we see in the browser
    What we see in the browser

    If we click on view source, we’ll see that’s all there is, a string. This is just a string response. We are creating a web application, so we want to create proper HTML responses. We can do that by creating an HTML template. We can do this by creating an erb file, an embedded Ruby file. It is an HTML file with Ruby code. Sinatra evaluates the Ruby code to add content dynamically, and outputs a “pure” HTML file for the browser to render.
    I created a simple mypage.erb file with the content as below. You can see that most of it is plain HTML, except for the <%= user %> tag! This a template with a “hole” in it.

    My erb file
    My erb file

    I then went to app.rb and added this route handler. When the browser goes to ‘/mypage/’, Sinatra will build the params hashmap from the request. We look at the params hashmap for the value pair of the key ‘name’. We assign that value to the variable person. If the value is nil, we assign “Person” to the variable person.
    Next, the erb function is called to render the :mypage view! The locals part says give this view the local variable ‘user’, and assign it a value of person. Sinatra loads mypage.erb, and passes in the local variable. Where we had ‘user’ (the ‘hole’ in the template), will now be filled with the value of the person variable.

    handler for mypage
    handler for mypage

    In action, this looks like this:

    No name given for the params hashmap, person is "Person".
    No name given for the params hashmap, person is “Person”.
    With a name in the params hashmap, the name value is displayed on the page.
    With a name in the params hashmap, the name value is displayed on the page.

    This exercise introduced a lot of new concepts: routes, templates and dynamically generated content, and how server and clients communicate with each other.

     

     

     

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s