Building a Rails Interface
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Building a Rails Interface

on

  • 3,474 views

This was the fourth speech of a three day Rails training I gave in Tulsa, OK in the spring 2010.

This was the fourth speech of a three day Rails training I gave in Tulsa, OK in the spring 2010.

Statistics

Views

Total Views
3,474
Views on SlideShare
3,468
Embed Views
6

Actions

Likes
2
Downloads
58
Comments
0

1 Embed 6

http://www.slideshare.net 6

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Building a Rails Interface Presentation Transcript

  • 1. Building the User Interface The C and V of MCV
  • 2. 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
  • 3. Generate a Controller generate/script controller controller_name Optionally, you can add action names and the controller will generate with those methods and view files Controllers are usually plural Generating the controller also creates the view directory
  • 4. 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
  • 5. Building the new() action def new @pet = Pet.new end
  • 6. Building the new() action new() asks the browser to display a def new @pet = Pet.new form end
  • 7. Building the new() action new() asks the browser to display a def new @pet = Pet.new form end Simply provide an empty object
  • 8. Building the new() action new() asks the browser to display a def new @pet = Pet.new form end Simply provide an empty object By rails convention, an action name and a view name should be the same
  • 9. <!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 %> <p><%= f.label :name %><br /><%= f.text_field :name %></p> <p><%= f.label :animal_type %><br /><%= f.text_field :animal_type %></p> <p><%= f.label :breed %><br /><%= f.text_field :breed %></p> <%= f.submit 'Create' %> <% end %> </body> </html> The new.html.erb form Rails uses ERB to gain access to Ruby code inside your HTML views
  • 10. 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
  • 11. A Closer Look <% form_for @pet do |f| %> <%= f.error_messages %> <p> <%= f.label :name %><br /> <%= f.text_field :name %> </p> <p> <%= f.label :animal_type %><br /> <%= f.text_field :animal_type %> </p> <p> <%= f.label :breed %><br /> <%= f.text_field :breed %> </p> <%= f.submit 'Create' %> <% end %>
  • 12. A Closer Look The first line sets up the code to follow <% form_for @pet do |f| %> <%= f.error_messages %> <p> <%= f.label :name %><br /> <%= f.text_field :name %> </p> <p> <%= f.label :animal_type %><br /> <%= f.text_field :animal_type %> </p> <p> <%= f.label :breed %><br /> <%= f.text_field :breed %> </p> <%= f.submit 'Create' %> <% end %>
  • 13. A Closer Look The first line sets up the code to follow <% form_for @pet do |f| %> <%= f.error_messages %> <p> <%= f.label :name %><br /> <%= f.text_field :name %> </p> <p> <%= f.label :animal_type %><br /> <%= f.text_field :animal_type %> </p> <p> <%= f.label :breed %><br /> <%= f.text_field :breed %> </p> <%= f.submit 'Create' %> <% end %>
  • 14. A Closer Look The first line sets up the code to follow <% form_for @pet do |f| %> <%= f.error_messages %> <p> <%= f.label :name %><br /> Inside the <p> tags are <%= f.text_field :name %> </p> displayed pieces of <p> <%= f.label :animal_type %><br /> code <%= f.text_field :animal_type %> </p> <p> <%= f.label :breed %><br /> <%= f.text_field :breed %> </p> <%= f.submit 'Create' %> <% end %>
  • 15. A Closer Look The first line sets up the code to follow <% form_for @pet do |f| %> <%= f.error_messages %> <p> <%= f.label :name %><br /> Inside the <p> tags are <%= f.text_field :name %> </p> displayed pieces of <p> <%= f.label :animal_type %><br /> code <%= f.text_field :animal_type %> </p> <p> <%= f.label :breed %><br /> <%= f.text_field :breed %> </p> <%= f.submit 'Create' %> <% end %>
  • 16. A Closer Look The first line sets up the code to follow <% form_for @pet do |f| %> <%= f.error_messages %> <p> <%= f.label :name %><br /> Inside the <p> tags are <%= f.text_field :name %> </p> displayed pieces of <p> <%= f.label :animal_type %><br /> code <%= f.text_field :animal_type %> </p> <p> Rails provides lots of <%= f.label :breed %><br /> <%= f.text_field :breed %> helpers so you don’t </p> <%= f.submit 'Create' %> have to spend time <% end %> writing lots of HTML
  • 17. A Closer Look The first line sets up the code to follow <% form_for @pet do |f| %> <%= f.error_messages %> <p> <%= f.label :name %><br /> Inside the <p> tags are <%= f.text_field :name %> </p> displayed pieces of <p> <%= f.label :animal_type %><br /> code <%= f.text_field :animal_type %> </p> <p> Rails provides lots of <%= f.label :breed %><br /> <%= f.text_field :breed %> helpers so you don’t </p> <%= f.submit 'Create' %> have to spend time <% end %> writing lots of HTML
  • 18. Why did I get an error? You haven’t told Rails what the path to your form is yet.
  • 19. Why did I get an error? You haven’t told Rails what the path to your form is yet.
  • 20. Why did I get an error? You haven’t told Rails what the path to your form is yet.
  • 21. Why did I get an error? You haven’t told Rails what the path to your form is yet.
  • 22. Routing Set routes in the config/routes.rb file 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
  • 23. Displaying the form The standard path for a resource is the controller name followed by the action We’ve collected the info. Now what?
  • 24. 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 flash[]? end
  • 25. Parameters Parameters are the pieces of information passed back to the controller action from the HTML form fields Rails collects them in a Hash Using Rails conventions, the Object name is the Hash name for the params
  • 26. What the browser sees
  • 27. 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
  • 28. <% {: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
  • 29. def create @pet = Pet.new(params[:pet]) 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 flash message displays and we’re redirected
  • 30. def create @pet = Pet.new(params[:pet]) 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 flash message and errors
  • 31. 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 file 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"
  • 32. Whew! We made it. Now let’s check out the remaining five actions.
  • 33. index()
  • 34. index() index() shows a list or collection of objects def index @pets = Pet.all It sets a variable that end contains the collection desired
  • 35. 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 find() to limit large lists
  • 36. <!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> <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?
  • 37. <!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> <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?
  • 38. From the Browser index() is the default action, so the address bar only needs the controller name
  • 39. 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 specific Pet comes in as a parameter from the browser
  • 40. <!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> <% {:notice => "green", :error => "red"}.each do |message, color| %> <% next if flash[message].blank? %> <div style="color: <%= color %>;"> <%= flash[message] %> </div> <% end %> <p>Name: <%= h @pet.name %></p> <p>Animal Type: <%= h @pet.animal_type %></p> <p>Breed: <%= h @pet.breed %></p> <p><%= link_to "View All", pets_path %> | <%= link_to "Edit", edit_pet_path(@pet) %> | <%= link_to "Delete", pet_path(@pet), :method => :delete %></p> </body> </html> HTML for a show view by passing :method to link_to(), you can specify an HTTP action of that verb
  • 41. From the Browser show() needs an ID, so the address bar needs the controller name and the object ID
  • 42. edit() and update() edit() and update() are def edit very similar to new() @pet = Pet.find(params[:id]) end and create() def update @pet = Pet.find(params[:id]) 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
  • 43. <!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 %> <p><%= f.label :name %><br /><%= f.text_field :name %></p> <p><%= f.label :animal_type %><br /><%= f.text_field :animal_type %></p> <p><%= f.label :breed %><br /><%= f.text_field :breed %></p> <%= f.submit 'Update' %> <% end %> </body> </html> HTML for the edit view When you select the edit() action, the form pulls in the object data
  • 44. From the Browser edit() needs an ID, so the address bar needs the controller name, the object ID and the action
  • 45. destroy() destroy() doesn’t have def destroy @pet = Pet.find(params[:id]) 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 <p> 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 %> </p> HTML code?
  • 46. From the Browser Clicking Delete redirects the user back to the index view. Notice the missing fish?
  • 47. Questions?
  • 48. Building an Interface Lab Your book has instructions on how to create controllers to show your models