Ruby Course - Lesson 3 and 4 - Web Programming With Ruby

8/8/2019 Ruby Course - Lesson 3 and 4 - Web Programming With Ruby

http://slidepdf.com/reader/full/ruby-course-lesson-3-and-4-web-programming-with-ruby 1/75

Web programmingwith Ruby

Lesson 3/4

Saturday, September 11, 2010



For this and next lesson

Sinatra

ERB

Rack

Ruby on Rails (a little bit)




Sinatrahttp://www.sinatrarb.com


http://www.sinatrarb.com/

http://www.sinatrarb.com/



A domain-specific language builtwith Ruby

Used to develop web applications

Minimalist approach

Focuses of getting web

application up and running fastestway




Installing Sinatra

% sudo gem install sinatra




Hands-on #1

require 'rubygems'require 'sinatra'

get '/' do"Hello world, it's #{Time.now} atthe server!"

end




Run it

Go to http://localhost:4567 onyour browser

% ruby handson1.rb


http://localhost:4567/

http://localhost:4567/





Whenever a HTTP request comes in, it willbe matched in the order it is defined

Example - if POST request sent to http://

localhost/some_url, this route is invoked:

This pattern matching can include namedparameters:

post ‘/some_url’ do

...end

get ‘/hello/:name’ doputs “Hello #{params[:name]}!”

end


http://localhost/some_url






In POST routes, the POST parameters arereceived the same way as the URLparameters

Note that you can get both URL parametersthe same way

post ‘/hello’ doputs “Hello #{params[:name]}!”

end

post ‘/hello/:from’ doputs “Hello #{params[:name]} from

#{params[:from]}!”end




Can also filter user-agent, i.e. determine

browser used. Eg Safari browser in iPhone:

To specify a route for iPhone browsers:

Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 likeMac OS X; en-us) AppleWebKit/525.18.1 (KHTML,like Gecko) Version/3.1.1 Mobile/1A543 Safari/

525.20

get ‘/hello’, :agent => /iPhone/ doputs “You are using an iPhone!”

end




Hands-on #2

A simple form processingweb application




Create a simple HTML

form<html><head><link rel="stylesheet" href="http://www.w3.org/

StyleSheets/Core/Traditional" type="text/css"></head><body><h1>A blog post</h1><form method="post"

action="http://localhost:4567/process_form"><label for="title">Title</label><br/><input type=" text" name="title"/><br/>

<label for="content">Content</label><br/><textarea name="content"></textarea><br/><input type="submit" value="submit post"/>

</form></body></html>


http://localhost:4567/process_form



http://www.w3.org/StyleSheets/Core/Traditional






Save it as form.html anywhere you want






Save it as handson2.rb

Open up form.html on yourbrowser

% ruby handson2.rb


http://localhost:4567/form.html

http://localhost:4567/form.html


http://slidepdf.com/reader/full/ruby-course-lesson-3-and-4-web-programming-with-ruby 17/75Saturday, September 11, 2010


http://slidepdf.com/reader/full/ruby-course-lesson-3-and-4-web-programming-with-ruby 18/75Saturday, September 11, 2010



What about PUT orDELETE?




PUT and DELETE not implemented bybrowsers

Workaround using POST

This invokes:

<form method="post" action="/destroy">

<input name="_method" value="delete" /> <button type="submit">Destroy</button>

</form>

delete ‘/destroy’ do...

end




Hands-on #3

Create a web application with 4different types of routes

(GET, POST, PUT, DELETE)




Sometimes within a route you want toredirect the user somewhere else

This can be some other route or to anexternal site

This can be done using the redirect helper

The redirect actually sends back a 302

Found HTTP status code to the browser andtells the browser where to o next

Redirection




Redirection examples

redirect '/'redirect 'http://www.google.com'

redirect '/', 303redirect '/somewhere_else', 307

If you don’t want to use the default 302status code, you can redirect with adifferent status code


http://www.google.com/

http://www.google.com/



FiltersSinatra provides a simple filtering mechanism

A before filter runs before every route

An after filter runs after every route

before do...

end

after do...

end




Static pages

By default, all pages in a folder namedpublic are served out as static pages

For example, if you have a page.html file inthe public folder, you will be able to accessit from http://localhost:4567/page.html

This means that you can also serve out Javascript libraries, CSS stylesheets andimage files through the same folder.


http://localhost:4567/page.html






Static page settings

If you want to change the default folder forstatic pages:

set :public, File.dirname(__FILE__) + '/static'




Hands-on #4

Add some static pages intoyour web application

(HTML, CSS, images)




ViewsViews let you display the information youwant your user to see

In Sinatra, view templates are files used todisplay data returned by the route

By default Sinatra looks for view templates inthe view folder

To change:

set :views, File.dirname(__FILE__) + '/templates'




Views

Some view templating technologies in Ruby:

eRuby (ERB, Erubis etc) (HTML-like)Haml (Ruby-like)

Builder (XML)

Sass (CSS)

Less (CSS)




ERB

HTML-like templating system, one of oldest

Most popular, used widely, was previously

default templating system in Ruby on Raila

<% Ruby code -- inline with output %><%= Ruby expression -- replace with result %><%# comment -- ignored -- useful in testing %>




Hands-on #5

Convert hands-on exercise#2 to using static pages

and views




Copy form.html into thepublic folder




Create a viewCreate this as display.erb in the view folder:

<html><head><link rel="stylesheet" href="http://www.w3.org/

StyleSheets/Core/Traditional" type="text/css">

</head><body><h1><%= @title %></h1><p><%= @content %></p><ul><% @posts.each do |post| %><li><%= post[:title] %></li>

<% end %></ul>

</body><html>








Modify process_form

require 'rubygems'require 'sinatra'

post '/process_form' do

@posts = []3.times do |count|@posts << {:title => "Blog post #{count}"}

end@title = params[:title]@content = params[:content]erb :display

end




Layouts

Layouts are templates used with views,applied to views

By default if you have a file namedlayout.erb (or layout.haml etc) it will beused as the layout for that templating

system




Layout example

Create this as layout.erb and place insideyour views folder:

<html>

<head><link rel="stylesheet" href="http://www.w3.org/StyleSheets/Core/Traditional" type="text/css"></head><body><%= yield %>

</body>

<html>

All your views will use this layout by default,views replacing the yield








Hands-on #6

Add a layout to hands-onexercise #5




Add a layout

Create this as layout.erb and place insideyour views folder:

<html>

<head><link rel="stylesheet" href="http://www.w3.org/StyleSheets/Core/Traditional" type="text/css"></head><body><%= yield %>

</body>

<html>










To use another layout, set it when calling theview

To force the view not to use any layouts, setthe layout to false

erb :display, :layout => :another_layout

erb :display, :layout => false








Error handling

Any other errors will be caught by error

By default error will catchSinatra::ServerError and Sinatra will passyou the error via sinatra.error inrequest.env.

error do'Sorry there was a nasty error - ' +request.env['sinatra.error'].name

end




Error handling

You can also customized error handling likethis:

This catches errors that you raise:

error MyCustomError do'So what happened was...' + request.env['sinatra.error'].message

end

get '/' doraise MyCustomError, 'something bad'

end









Ruby on Railshttp://www.rubyonrails.org


http://www.rubyonrails.org/

http://www.rubyonrails.org/



Web application

framework written inRuby




Opinionated software, assumes

there is a best way of doingthings

Encourages the ‘best way’ anddiscourages alternative ways

Designed to allow you to writeless code




Don’t Repeat Yourself (DRY)

Convention over ConfigurationREST is best

The Rails Way




Parts of Rails

ActionController -> controller (Sinatra)

ActionView -> view (ERB, Haml etc)

ActiveRecord -> DB model (DataMapper etc)

ActiveResource -> REST model

ActionMailer -> email sending utility

ActiveSupport -> utilities




Routes


class PostsController < ApplicationController

d f i d

def create@post = Post.new(params[:post])



def index@posts = Post.all

respond_to do |format|format.html # index.html.erbformat.xml { render :xml => @posts }

endend

def show@post = Post.find(params[:id])

respond_to do |format|format.html # show.html.erbformat.xml { render :xml => @post }

endend

def new@post = Post.new

respond_to do |format|format.html # new.html.erbformat.xml { render :xml => @post }

endend

def edit

@post = Post.find(params[:id])end

respond_to do |format|if @post.saveflash[:notice] = 'Post was successfully created.'format.html { redirect_to(@post) }format.xml { render :xml => @post, :status

=> :created, :location => @post }else

format.html { render :action => "new" }format.xml { render :xml => @post.errors, :status=> :unprocessable_entity }

endend

end

def update@post = Post.find(params[:id])

respond_to do |format|if @post.update_attributes(params[:post])flash[:notice] = 'Post was successfully updated.'format.html { redirect_to(@post) }format.xml { head :ok }

elseformat.html { render :action => "edit" }format.xml { render :xml => @post.errors, :status

=> :unprocessable_entity }end

endend

def destroy@post = Post.find(params[:id])@post.destroy

respond_to do |format|format.html { redirect_to(posts_url) }format.xml { head :ok }

endend

end



d f i d






endend



endend



endend

def edit





endend

end


respond_to do |format|

if @post.update_attributes(params[:post])flash[:notice] = 'Post was successfully updated.'format.html { redirect_to(@post) }format.xml { head :ok }



endend



endend

end

GET



d f i d






endend



endend



endend

def edit





endend

end






endend



endend

end

GET

GET



def index






endend



endend



endend

def edit



=> :created, :location => @post }elseformat.html { render :action => "new" }format.xml { render :xml => @post.errors, :status


endend






endend



endend

end

GET

GET

GET



def index






endend



endend



endend

def edit





endend






endend



endend

end

GET

GET

GET

GET



def index






endend



endend



endend

def edit





endend






endend



endend

end

GET

GET

GET

GET

POST



def index






endend



endend



endend

def edit





endend






endend



endend

end

GET

GET

GET

GET

POST

PUT



def index






endend



endend



endend

def edit





endend






endend



endend

end

GET

GET

GET

GET

POST

PUT

DELETE




Defining routesDefined in config/routes.rb

RESTful routes

Regular routes

map.connect 'post/:id',:controller => 'posts',

:action => 'show',:conditions => { :method => :get }

map.resource :posts







Provides a minimal API to

connect web servers andweb frameworks




A Rack application must:

Take a hash input of CGI-like environment(HTTP request)

Respond to a #call method that returnsan array of:

status code

environment (hash)

response body




Middleware




HTTP

App

Middleware




request

AppFirst

response

Second






first.rb

class Firstdef initialize(app)@app = app

end

def call(env)puts "CALLED FIRST"status, headers, response = @app.call(env)response << "<h1>Adding FIRST module</h1>"headers["Content-Length"] =

response.to_s.length.to_s[status, headers, response]

endend




second.rb

class Seconddef initialize(app)@app = app

end

def call(env)puts "CALLED SECOND"status, headers, response = @app.call(env)response << "<h1>Adding SECOND module</h1>"headers["Content-Length"] =

response.to_s.length.to_s[status, headers, response]

endend










How is this useful?

Modular - split the workload

Clean way to write different kinds of web

applications that does specialized work andchain them together




request

RailsSinatra

response

Merb




Questions?

Documents

Ruby Course - Lesson 3 and 4 - Web Programming With Ruby