four chapters

gistfile1.txt

Clone URL: https://github.com/hanibash/Course-One
Tests for Chapter 1: rspec spec -e step1 --require ./spec/json_formatter.rb --format JSONFormatter
Tests for Chapter 2: rspec spec -e step2 --require ./spec/json_formatter.rb --format JSONFormatter
Tests for Chapter 3: rspec spec -e step3 --require ./spec/json_formatter.rb --format JSONFormatter
Tests for Chapter 4: rspec spec -e step4 --require ./spec/json_formatter.rb --format JSONFormatter
etc...

### First Steps

In this tutorial, we're going to teach you how to build a URL shortener. A URL Shortener takes in any URL (like http://www.youtube.com/watch?v=ZS_6-IwMPjM) and outputs a shortened URL (like http://bit.ly/tpOoVY). Clicking on a short URL will immediately take you to the long URL it points to, kind of like a worm hole through the web. Short URLs come in handy on social networking sites like Twitter where you don't want really long URLs taking up a lot of space.
 
We've started you off with the all of the files and boilerplate code you'll need to finish this tutorial.

It's your job to fill in these files with the correct code in order to make all of the tests in your backlog pass.

#### Chapter 1

Dumbledore? Magic. Gandalf? Magic. Web apps? *Not* magic.

Sinatra is a web framework that makes it dead simple to build web applications.

One of the things that Sinatra does really well is **routing**. A route maps a URL to an action on the server. It's what determines the behavior of your web app upon visiting a certain URL. 

Let's say your website is www.lolcats.com. Here's what are some routes in Sinatra might look like:

    get '/' do
    	"Hello cats!"
    end
    
    get '/icanhaz' do
        "MMM.... cheezburger"
    end

    get '/rofl' do
        "Welcome to ROFLCOPTER!"
    end

What's happening behind the scenes is that Sinatra is mapping the URL you typed into your browser into a behavior that you specify between the *do* and *end* keywords. 

![How routes work](http://i.imgur.com/DysPz.png "magical")

Your first task is to edit **web.rb** so that your website displays "My awesome URL shortener".

Click on the pencil icon below to edit code. When you're done, click on the paper icon to test your code and see if you passed.

Good luck, but you ain't gonna need it!

#### Chapter 2

The organs in the human body make a good analogy for a web application. Every organ in the body is very good at doing one a specific task, and each organ must rely on all of the other organs to do their jobs as well.

A good web application is split into specialized parts in a similar way. There are many patterns used, but the most popular one is the **Model-View-Controller** pattern.

Sinatra is the **Controller** of our application. It acts like a brain, taking inputs in and deciding what to do based on those inputs.

In this chapter we will write the **View** of our application. The View is like the bones and skin of our application. It's what gives our application its visible structure, as well as its color and appearance. We will be writing our view in *Haml*^1 .

Because a URL shortener is so simple, we won't be needing a **Model**, but you can think of the Model as the heart of a healthy application. We'll elaborate more in another lesson.

How do the View and the Controller connect? Like so:

    get '/lolcats' do
        haml :mylolcatsview
    end

In this snippet, when someone visits the path */lolcats*, Sinatra will render the view at *views/mylolcatsview.haml*

Here are some more examples:
![Views](http://i.imgur.com/nd8m8.png "View")

For this challenge you will be working in **index.haml*. You need to add a *title* element inside of the head element. Also add an *h1* element inside of the body element. You can put any text you want inside each of those elements^2 .

Haml is indentation sensitive. This means that

    %div
    	%p

is different from

    %div
    %p
    
In the first example, the p (paragraph) element is *inside* the div (division) element
In the second example, the p element is *next to* the div element

Remember, click the pencil icon below to get to the editor and the checkmark icon to get to the backlog.

---

(1)"Wait a second", you say. "I thought that websites were written in HTML?"

You're right. Haml gets translated into HTML before its actually displayed in the browser. We like to use Haml because of its cleaniness and beauty. It's kind of like HTML's better looking sister. Not that HTML is jealous or anything.

(2)To read more about HTML elements, check out this [great reference](http://joshduck.com/periodic-table.html).


#### Chapter 3

We need to create a form where your users can submit the URL that they want shortened.

To do this, we need to create a **form** element. Than *inside* the form element, we will add two **input** elements.

The first input element will be our text field where the user inputs their URL. The second input element will be a button.

Even though they are both input elements, we can change how they look and act simply by changing the attribute on element.

In Haml, we set attributes within curly braces like in the examples below:

    %img{:title=> "dogfort", :src => "http://i.imgur.com/UJvBn.jpg", :height =>"50%", :width=>"50%"}

This is what the structure of a form looks like in Haml:

![A Form is Born](http://i.imgur.com/5AgnK.png)

This challenge is almost a gimme. All you need to do is add a form, just like the image above, into index.haml.

#### Chapter 4

You've displayed a form, but you haven't made it do anything yet. What we want to do is connect the button to the brain of our application.

To understand how to do this, you first have to understand something about *HTTP verbs*.

There's more than one way to talk to a web application. The one that you are most familiar with is GET. Everytime you type something in your URL bar, you are asking a web application to GET the page for you. That's why in Sinatra, we write routes like this:

    get '/cheezburger' do
    	"Cheezburger for you!"
    end
    
    get '/soup' do
    	"Soup for you!"
    end

What if we want to give something to our web application, like the content of our form? We use a different verb. This verb is called POST. We can tell Sinatra to accept a *POST* at the route */myform* like so:

    post '/grabthing' do
    	"You typed" + params[:thing] + " into the form. Well, aren't you special?"
    end
    
To actually make this work, we need to change our form a little bit, too:

    %form{:action => "/grabthing", :method => "POST"}
    	%input{:type => "text", :name => "thing"}
    	%input{:type => "submit"}
    	
What changed?

We set the *action* attribute of our form to "grabthing", and set the *method* attribute to POST. This tells the button to POST to the route "/grabthing".

We also set the *name* attribute of our text field to "thing". This will take whatever is typed into the field and shove it into a variable called "thing", which we access through params[:thing].

Your goal for this challenge is to wire up your form so that anything you type into the text box is displayed on the page when you hit "submit".