Building a Rails Interface

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 ﬁles 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 %> <%= 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

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 %> <%= 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 %>

12. A Closer Look The ﬁrst line sets up the code to follow <% 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 %>

13. A Closer Look The ﬁrst line sets up the code to follow <% 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 %>

14. A Closer Look The ﬁrst line sets up the code to follow <% form_for @pet do |f| %> <%= f.error_messages %> <%= f.label :name %> Inside the tags are <%= f.text_field :name %> displayed pieces of <%= f.label :animal_type %> code <%= f.text_field :animal_type %> <%= f.label :breed %> <%= f.text_field :breed %> <%= f.submit 'Create' %> <% end %>

15. A Closer Look The ﬁrst line sets up the code to follow <% form_for @pet do |f| %> <%= f.error_messages %> <%= f.label :name %> Inside the tags are <%= f.text_field :name %> displayed pieces of <%= f.label :animal_type %> code <%= f.text_field :animal_type %> <%= f.label :breed %> <%= f.text_field :breed %> <%= f.submit 'Create' %> <% end %>

16. A Closer Look The ﬁrst line sets up the code to follow <% form_for @pet do |f| %> <%= f.error_messages %> <%= f.label :name %> Inside the tags are <%= f.text_field :name %> displayed pieces of <%= f.label :animal_type %> code <%= f.text_field :animal_type %> Rails provides lots of <%= f.label :breed %> <%= f.text_field :breed %> helpers so you don’t <%= f.submit 'Create' %> have to spend time <% end %> writing lots of HTML

17. A Closer Look The ﬁrst line sets up the code to follow <% form_for @pet do |f| %> <%= f.error_messages %> <%= f.label :name %> Inside the tags are <%= f.text_field :name %> displayed pieces of <%= f.label :animal_type %> code <%= f.text_field :animal_type %> Rails provides lots of <%= f.label :breed %> <%= f.text_field :breed %> helpers so you don’t <%= 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.

22. 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

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 ﬂash[]? end

25. 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

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 ﬂash 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 ﬂash 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 ﬁ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"

32. Whew! We made it. Now let’s check out the remaining ﬁve 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 ﬁnd() 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 speciﬁc 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 %> 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

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 %> <%= 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

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 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?

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

47. Questions?

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