This is the curriculum for the 2018 Foxtrot Web Developer Bootcamp.

Serve HTML and Other Resources

Create a Rails App

Now that we've explored HTML, CSS, Javascript, and Ruby, we have the complete set of tools we need to start learning Rails, the framework for writing web applications in Ruby. Getting started is as easy as a few commands in the terminal.

In the terminal:
rails new myapp
cd myapp
rails server

These commands do a few things. rails new app_name generates a new rails application in a folder. The Rails app we are generating is going to be called "myapp". Once we've navigated ourselves into the Rails app directory, we run the Rails application by starting the server. We do that by typing rails server or rails s.

In a browser type into the address field:
http://localhost:3000
or
127.0.0.1:3000

And just like that, we should see the boilerplate Rails homepage.

Serve the public

Rails has a folder called /public'. Anything we put into this folder will be accessible by the rest of the application just by asking for it. To see this in action, create HTML file in/publiccalledmyfile.html`.

In a browser enter:

http://localhost:3000/myfile.html

And look, myfile.html loaded right away.

Set Landing Page

We can take advantage of the /public directory to quickly set up our own home page instead of the Rails boilerplate. Let's change the file name for myfile.html to index.html.

In a browser:

http://localhost:3000

Now our page is being served on the home page instead.

Answering Web Requests

As neat as the /public directory is for quickly setting up easy-to-access pages, Rails has its own file for setting up routes to pages that we want more control over. This is the config/routes.rb file. The following is an example of a simple route in config/routes.rb:

Simple route + controller

config/routes.rb:

Rails.application.routes.draw do
  get '/answers' => 'main#answers'

This route will, when you type localhost:3000/answers into the browser (the get '/answers' part), look for a controller called MainController and load any methods called answers that it finds there (the 'main#answers' part).

If our MainController looks like this:
app/controllers/main_controller.rb:

class MainController < ApplicationController
  def answers
    render html: "hello" #.html_safe 
  end
end

When we visit localhost:3000/answers, we should see a white page with the text "hello".

Using GET parameter

So, we can use the URL to load pages. What else can we do with it? It turns out that we can store information in the URL by using the params method.

params is a method returning a ActionController::Parameters which is a hash of parameters submitted in the request.
For more see here

Use: p params in the answers method to print to the log (in our case the console)

If we update our answers method to use params:
main_controller.rb:

class MainController < ApplicationController

  def answers
    render html: params[:number]
  end

end

And then we give the URL a number parameter by loading this URL:
http://localhost:3000/answers?number=17

Instead of seeing a page with "hello" on it, now we see a white page with the number 17 on it.

Route with parameter

Now that we know that we can pass parameters to a page, let's do it in a way that uses Rails' built-in architecture. That means adding some functionality to our config/routes.rb file.

routes.rb:

Rails.application.routes.draw do
  get '/answers/:number' => 'main#answers'

A Rails route that expects a parameter will end in a /:param

With this update to our routes, instead of using the kind of ugly-looking URL with the question marks and equal signs to pass in a parameter, we can enter: http://localhost:3000/answers/42

Render Simple View

What if we don't want to render plain text on a page? Rails can do that, too.

Let's update our answers method to load an html.erb file instead of rendering plain text.

main_controller.rb:
class MainController < ApplicationController

  def answers
    render "answers.html.erb" # Rails magic without this
  end

end

views/main/answers.html.erb:

Answer is: something

http://localhost:3000/answers/42

And our answers.html.erb loads

Render View With Ruby Value

A web page that forever says "Answer is: something" isn't very useful. Let's change it to print the value of our number parameter.

answers.html.erb:

Number is: <%= params[:number] %>

Those <%= %> symbols are what makes this an .html.erb file, or "embedded ruby". By wrapping our Ruby code in those symbols, it will execute on the page and then print.

Visit http://localhost:3000/answers/42 and see what happens.

Examine Params

Let's learn more about the params method.

answers.html.erb:

<%= params.class %><br/>
<%= params %></br>

Controller Arguments

Normally we do most of the logic in the controller and send on the results to the view with instance variables.

class MainController < ApplicationController

  def answers
    cookies[:name] = params[:name] unless params[:name].nil?
    if params[:number].to_i.even?
      @result_string = "Even"
    else
      @result_string = "Odd"
    end
    render "answers.html.erb"
  end

end

answers.html.erb:

Number is: <%= @result_string %>

Using Cookie

If we want our variables to persist in between page refreshes or redirects, storing them in cookies is a fantastic way to keep them in the browser history.

class MainController < ApplicationController

  def answers
    cookies[:name] = params[:name] unless params[:name].nil?
    render "answers.html.erb"
  end

end

Now, the answers method will store a name parameter in a cookie if a name parameter exists.

Update answers.html.erb:

Hello <%= cookies[:name] %>!
Number is: <%= params[:number] %>

What happens when we visit the following URLs?
http://localhost:3000/answers/42
http://localhost:3000/answers/42?name="joe"
http://localhost:3000/answers/42

See cookie in browser: Preferences -> Privacy -> Cookies -> Localhost

Using Session

A session is similar to a cookie, except it's encrypted. You can see where it's stored in _myapp_session cookie. How would you replace cookies with sessions?

Rails Practice

Serve a static page with Rails

  • Create a new Rails project
  • Create an example web page in the public folder and then start the Rails server to view your static page

Serve a dynamic page with Rails

  • Make a webpage for your class with a route, controller file, and view file - take note of the path of information from route to view
  • Navigate to the page you created in the browser

STRETCH:

  • set the dynamic page you created as the landing page
  • create at least one piece of data in the controller to be passed to the view
  • have your route take in one paramater and print it in the view
Rails Hi/Lo

Challenge: Hi/Lo Game

  • Create a route /game to call a method called try in GameController.
  • Test http://localhost:3000/game?guess=21 in a browser - what error do you get?
  • Create a controller GameController with a method method called try.
  • Test http://localhost:3000/game?guess=21 in a browser - what error do you get?
  • Create a view for the try method in GameController called try.html.erb.
  • Test http://localhost:3000/game?guess=21 in a browser and see that try.html.erb is rendered.

Then, in method try:

  • On first call, store a secret number in a cookie
  • On each call, check the secret number against the guess (the parameter).
  • Then, set an instance variable to the result (call it @result) of the guess (high/low/win).
  • Then, render try.html.erb.
  • If you do not win, repeat 2-3. If you win, repeat 1-2-3.

Then, in try.html.erb:
Display the result of the guess

Stretch Challenge One

Create and display a counter for the number of tries attempted.

Stretch Challenge Two

Create a route (/new_game) and controller method (reset) to reset the game.

Stretch Challenge Three

Accept and store user name, and use it in the views.

Stretch Challenge Four

Encrypt the secret number.

Today's Tentative Schedule

9:15am - Stand Up

9:30am - Introduction to Rails: Routes, Controller and View

11:00am - Challenge: Hi/Low Game

12:00 noon - Lunch

1:00pm - continue with Hi/Low Challenge

4.30pm - Review

5:00pm - Class Ends