1 dr alexiei dingli web science stream helpers, forms and layouts
TRANSCRIPT
1
Dr Alexiei Dingli
Web Science StreamHelpers, Forms and Layouts
2
• Controller should hold all of our application logic
• Views should only contain the persentational code
• Helpers – chunks of code which can be reused
throughout an application– every helper is available to every view
Helpers
3
• App/views/stories/new.html.erb
<% form_for @story do |f| %>
<p>
name:<br />
<%= f.text_field :name %>
</p>
<p>
link:<br />
<%= f.text_field :link %>
</p>
<p>
<%= submit_tag %>
</p>
<% end %>
Let’s work on some Forms
4
• Using form_for– Form tags will be generated for us– We gain access to instance methods– Appropriate viables will be set for us– Appropriate URIs will be called– Different HTML objects can be used such as
text_field, password_fiend, check_box, text_area
Explanation
5
• Start a server– ruby script/server
• Goto– http://127.0.0.1:3000/stories/new
• Error?
Let’s see what we have so far ...
6
• App/controllers/stories_controller.rb
• Creating a NEW empty record
def new
@story = Story.new
end
Let’s add to the controller
7
• Start a server– ruby script/server
• Goto– http://127.0.0.1:3000/stories/new
• Path Error?
Let’s see what we have so far ...
8
• Ideally every model should become a resource
• But how do we find resources?• By using routing configurations
– Config/routes.rb
Resources
9
• ActionController::Routing::Routes.draw do |map|• map.resources :stories• map.connect ':controller/:action/:id'• map.connect ':controller/:action/:id.:format'• end
Routes.rb
10
URL Action
GET /stories Index
GET /stories/new New
POST /stories Create
GET /stories/1 Show
GET /stories/1/edit Edit
POST /stories/1 Update
DELETE /stories/1 Destroy
What’s the effect of that line?
11
URL Action
GET /stories Index
GET /stories/new New
POST /stories Create
GET /stories/1 Show
GET /stories/1/edit Edit
POST /stories/1 Update
DELETE /stories/1 Destroy
Actions on single stories and those on all!
12
• Start a server– ruby script/server
• Goto– http://127.0.0.1:3000/stories/new
Let’s see what we have so far ...
13
• Right click on the browser page
• View the source code
What about the HTML?
14
• Two text field and a submit button• A form element• Action submission• The authenticity_token to counter Cross-
Site-Request-Forgery attacks• What happens if we try to save?
Spot the HTML
15
• App/controllers/stories_controller.rb
def create
@story = Story.new(params[:story])
@story.save
end
• Where will it send the control after the function?
Saving to Database
16
• But we don’t have one!• And we don’t need one!• App/controllers/stories_controller.rb
def create
@story = Story.new(params[:story])
@story.save
redirect_to ‘http://localhost:3000/stories’
end
Create.html.erb
17
stories_path /stories
new_story_path /stories/new
story_path(@story) /stories/1
edit_story_path(@story) /stories/1/edit
Some helpers
18
def create
@story = Story.new(params[:story])
@story.save
redirect_to stories_path
end
How to make even better code!
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type"
content="text/html; charset=utf-8" />
<title>Shovell</title>
</head>
<body>
<div id="content">
<h1>Shovell</h1>
</div>
</body>
</html>
Creating a layout for the whole application ... App/views/layout/application.html.erb
20
• App/views/layout/application.html.erb
• Underneath the title tag, add ...– <%= stylesheet_link_tag ‘style’ %>
• Underneath the h1 tag, aff– <%= yield %>
How to make nicer views?
21
• <%= stylesheet_link_tag ‘style’ %>• Inform HTML that a CSS exists called
/stylesheets/style.css
• <%= yield %>• A pointer to where our views should be displayed
2 magic lines ...
22
body {
background-color: #666;
margin: 15px 25px;
font-family: Helvetica, Arial, sans-serif;
}
#content {
background-color: #fff;
border: 10px solid #ccc;
padding: 10px 10px 20px 10px;
}
Let’s add the CSS ... /stylesheets/style.css
23
• Start a server– ruby script/server
• Goto– http://127.0.0.1:3000/stories/new
Let’s see what we have so far ...
24
• Not Adobe’s Flash• But ROR’s Flash
– Rails temporary data store– Allows us to send small messages
to the browser– Good for status information
Flash ...
25
• Just add the command
flash[:notice] = ‘Story submission succeeded’
• We can have different flashes such as :notice, :warning and :error
• Just add the command to stories_controller.rb just before the redirect command
How shall we Flash?
26
• Application.html.erb just before <%=yield%>
<% unless flash[:notice].blank? %>
<div id="notification"><%= flash[:notice] %></div>
<% end %>
Where shall we display the Flash?
27
• Add some layout to the style.css
#notification {
border: 5px solid #9c9;
background-color: #cfc;
padding: 5px;
margin: 10px 0;
}
Making Flash pretty
28
• App/models/story.rb• There are various validations
validates_presence_of :name, :link
Adding validations ...
29
• Stories_controller.rb
def create
@story = Story.new(params[:story])
if @story.save
flash[:notice] = 'Story submission succeeded'
redirect_to stories_path
else
render :action => 'new‘ #renders the html only
end
end
Better redirection
30
• Start a server– ruby script/server
• Goto– http://127.0.0.1:3000/stories/new
Let’s see what we have so far ...
31
• Have a look at the HTML code in the browser ...
• Do you see a div with value “fieldsWithErrors” ?– Generated automatically by form_for helper– Why not format it?
Better error handling!
32
.fieldWithErrors {
border: 5px solid #f66;
}
Add more css
33
• At the top of New.html.erb
<%= error_messages_for 'story' %>
Add the error message
34
• A useful error message will indicate blank fields
• Some textual hints are shown
• A red border will highlight the field
Result
35
• Start a server– ruby script/server
• Goto– http://127.0.0.1:3000/stories/new
Let’s see what we have so far ...
36
Questions?