Building a Rails Interface

Building the User Interface
The C and V of MCV

What is a Controller?

A controller is the switchboard operator between your
views, or web interface, and the model, or database
Rails convention is “Fat models, skinny controllers.”
7 basic actions will accomplish 90% of desired
behavior

Generate a Controller

generate/script controller controller_name
Optionally, you can add action names and the
controller will generate with those methods and view
ﬁles
Controllers are usually plural
Generating the controller also creates the view directory

Basic Controller Actions
class PetsController < ApplicationController
index() - list of like objects
def index
end
new() - displays a new form
def new
end
create() - saves new form
def create
input to DB end

def edit
edit() - displays an edit form end

def update
update() - saves edit form input to end
DB
def show
end
show() - displays single object
def destroy
end
destroy() - deletes single object
end

Building the new() action

def new
@pet = Pet.new
end

new() asks the
browser to display a def new
@pet = Pet.new
form end

new() asks the
@pet = Pet.new
form end

Simply provide an
empty object

new() asks the
@pet = Pet.new
form end

Simply provide an
empty object
By rails convention, an
action name and a
view name should be
the same

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pets Are People Too!</title>
</head>
<body>
<% form_for @pet do |f| %>
<%= f.error_messages %>
<%= f.label :name %> <%= f.text_field :name %>
<%= f.label :animal_type %> <%= f.text_field :animal_type %>
<%= f.label :breed %> <%= f.text_field :breed %>
<%= f.submit 'Create' %>
<% end %>
</body>
</html>

The new.html.erb form
Rails uses ERB to gain access to Ruby code
inside your HTML views

Meet ERB

Using ERB tags allows you to embed Ruby code
directly in your HTML code
The <% ... %> is used for block code (iterators and
forms) or code you don’t want inserted
The <%= ... %> inserts whatever is inside the tag
The <%# ... %> comments out the tag contents

A Closer Look

<%= f.label :name %> 
<%= f.text_field :name %>


<%= f.label :animal_type %> 
<%= f.text_field :animal_type %>


<%= f.label :breed %> 
<%= f.text_field :breed %>

<% end %>

A Closer Look
The ﬁrst line sets up
the code to follow <% form_for @pet do |f| %>

<%= f.text_field :name %>


<%= f.text_field :animal_type %>



<% end %>

A Closer Look

Inside the tags are <%= f.text_field :name %>

displayed pieces of 
code <%= f.text_field :animal_type %>



<% end %>

A Closer Look

Inside the tags are <%= f.text_field :name %>

displayed pieces of 
code <%= f.text_field :animal_type %>


Rails provides lots of <%= f.label :breed %> 
helpers so you don’t 
have to spend time <% end %>

writing lots of HTML

Why did I get an error?
You haven’t told Rails what the path to your form
is yet.

Routing

Set routes in the
conﬁg/routes.rb ﬁle
ActionController::Routing::Routes.draw do |map|
Provide the resource map.resources :pets

name and Rails will map.connect ':controller/:action/:id'

create the 7 routes map.connect ':controller/:action/:id.:format'
end

Setting a route requires
a server restart

Displaying the form

The standard path for a
resource is the
controller name
followed by the action
We’ve collected the
info. Now what?

create() the Pet Object

Create your Pet object def create
@pet = Pet.new(params[:pet])

Check to see if it saved if @pet.save
flash[:notice] = "Your Pet has
been saved."
Tell the browser how to redirect_to new_pet_path

respond else
flash.now[:error] = "There was
a problem saving your Pet"
What are params[] and render :action => "new"
end
ﬂash[]? end

Parameters

Parameters are the pieces of information passed back
to the controller action from the HTML form ﬁelds
Rails collects them in a Hash
Using Rails conventions, the Object name is the Hash
name for the params

Processing PetsController#create (for 127.0.0.1 at 2010-03-07 19:24:57) [POST]
Parameters: {"commit"=>"Create",
"pet"=>{"name"=>"Snow Paw", "breed"=>"Snowshoe Siamese", "animal_type"=>"Cat"}}
Redirected to http://localhost:3000/pets
Completed in 19ms (DB: 0) | 302 Found [http://localhost/pets]

What the browser sees
The server request shows the parameters
coming in from the form as a Hash

<% {:notice => "green", :error => "red"}.each do |message, color| %>
<% next if flash[message].blank? %>
<div style="color: <%= color %>;">
<%= flash[message] %>
</div>
<% end %>

flash[ ] Messages
flash[ ] messages give feedback to the user
Rails automatically remembers the flash between requests

def create

if @pet.save
flash[:notice] = "Your
Pet has been saved."
redirect_to new_pet_path
else
...
end
end

Successful Create
@pet was successfully saved to the database so
a ﬂash message displays and we’re redirected

def create

if @pet.save
...
else
flash.now[:error] = "There
was a problem saving
your Pet"
render :action => "new"
end
end

Failed Create
@pet failed a validation so the page was re-
rendered with the ﬂash message and errors

Render and Redirect

redirect_to() - redirects the browser to the target
passed to it
render() - unless otherwise indicated with a
redirect_to() or explicit render() call, the view ﬁle
named after the current action is displayed
If you pass in an action name to render(), it will
render that content instead
render :action => "new"

Whew! We made it. Now
let’s check out the remaining
ﬁve actions.

index()
index() shows a list or
collection of objects def index
@pets = Pet.all
It sets a variable that end

contains the collection
desired

index()
index() shows a list or
collection of objects def index
@pets = Pet.all
It sets a variable that end

contains the collection
desired
def index
Generally you want to @pets = Pet.all(:limit => 20)
end
set some kind of
criteria on the ﬁnd() to
limit large lists

<head>
</head>
<body>
<table>
<tr>
<td>Name</td> <td>Animal Type</td> <td>Breed</td> <td>Actions</td>
</tr>
<% @pets.each do |pet| %>
<tr>
<td><%= h pet.name %></td>
<td><%= h pet.animal_type %></td>
<td><%= h pet.breed %></td>
<td><%= link_to "View", pet_path(pet) %></td>
</tr>
<% end %>
</table>
<%= link_to "Add a New Pet", new_pet_path %>
</body>
</html>

HTML for an index view
link_to() takes the name of the link and the path
See how I’m iterating through the collection?

From the Browser
index() is the default action, so the address bar
only needs the controller name

show()
show() - displays a
single object
Should set the object
to display def show
@pet = Pet.find(params[:id])
end
The unique ID for a
speciﬁc Pet comes in
as a parameter from
the browser

<head>
</head>
<body>
<% {:notice => "green", :error => "red"}.each do |message, color| %>
<% next if flash[message].blank? %>
<div style="color: <%= color %>;">
<%= flash[message] %>
</div>
<% end %>
Name: <%= h @pet.name %>
Animal Type: <%= h @pet.animal_type %>
Breed: <%= h @pet.breed %>
<%= link_to "View All", pets_path %> |
<%= link_to "Edit", edit_pet_path(@pet) %> |
<%= link_to "Delete", pet_path(@pet), :method => :delete %>
</body>
</html>

HTML for a show view
by passing :method to link_to(), you can specify
an HTTP action of that verb

From the Browser
show() needs an ID, so the address bar needs
the controller name and the object ID

edit() and update()
edit() and update() are
def edit
very similar to new() @pet = Pet.find(params[:id])
end
and create()
def update
They require the object if @pet.update_attributes(params[:pet])
ID flash[:notice] = "Your Pet has been
updated."
redirect_to pets_path

edit() renders the form else
flash.now[:error] = "Something went

while update() wrong."
render :action => "edit"

performs the actual
end
end

update

<head>
</head>
<body>
<%= f.label :name %> <%= f.text_field :name %>
<%= f.label :animal_type %> <%= f.text_field :animal_type %>
<%= f.label :breed %> <%= f.text_field :breed %>
<%= f.submit 'Update' %>
<% end %>
</body>
</html>

HTML for the edit view
When you select the edit() action, the form pulls
in the object data

From the Browser
edit() needs an ID, so the address bar needs the
controller name, the object ID and the action

destroy()
destroy() doesn’t have def destroy

a view @pet.destroy
flash[:notice] = "The Pet was deleted."
redirect_to pets_path

Passing a :method
end

parameter into link_to()
forces the use of the 
passed HTTP verb <%= link_to "View All", pets_path %> |
<%= link_to "Edit",
edit_pet_path(@pet)%> |

Remember the show <%= link_to "Delete",
pet_path(@pet), :method => :delete %>

HTML code?

From the Browser
Clicking Delete redirects the user back to the
index view. Notice the missing ﬁsh?

Building an Interface Lab
Your book has instructions on how to create
controllers to show your models

Building a Rails Interface

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (6)

Semelhante a Building a Rails Interface

Semelhante a Building a Rails Interface (20)

Mais de James Gray

Mais de James Gray (13)

Último

Último (20)

Building a Rails Interface

Notas do Editor