1 dr alexiei dingli web science stream helpers, forms and layouts
TRANSCRIPT
![Page 1: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/1.jpg)
1
Dr Alexiei Dingli
Web Science StreamHelpers, Forms and Layouts
![Page 2: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/2.jpg)
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
![Page 3: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/3.jpg)
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
![Page 4: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/4.jpg)
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
![Page 5: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/5.jpg)
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 ...
![Page 6: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/6.jpg)
6
• App/controllers/stories_controller.rb
• Creating a NEW empty record
def new
@story = Story.new
end
Let’s add to the controller
![Page 7: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/7.jpg)
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 ...
![Page 8: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/8.jpg)
8
• Ideally every model should become a resource
• But how do we find resources?• By using routing configurations
– Config/routes.rb
Resources
![Page 9: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/9.jpg)
9
• ActionController::Routing::Routes.draw do |map|• map.resources :stories• map.connect ':controller/:action/:id'• map.connect ':controller/:action/:id.:format'• end
Routes.rb
![Page 10: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/10.jpg)
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?
![Page 11: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/11.jpg)
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!
![Page 12: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/12.jpg)
12
• Start a server– ruby script/server
• Goto– http://127.0.0.1:3000/stories/new
Let’s see what we have so far ...
![Page 13: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/13.jpg)
13
• Right click on the browser page
• View the source code
What about the HTML?
![Page 14: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/14.jpg)
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
![Page 15: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/15.jpg)
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
![Page 16: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/16.jpg)
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
![Page 17: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/17.jpg)
17
stories_path /stories
new_story_path /stories/new
story_path(@story) /stories/1
edit_story_path(@story) /stories/1/edit
Some helpers
![Page 18: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/18.jpg)
18
def create
@story = Story.new(params[:story])
@story.save
redirect_to stories_path
end
How to make even better code!
![Page 19: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/19.jpg)
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
![Page 20: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/20.jpg)
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?
![Page 21: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/21.jpg)
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 ...
![Page 22: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/22.jpg)
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
![Page 23: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/23.jpg)
23
• Start a server– ruby script/server
• Goto– http://127.0.0.1:3000/stories/new
Let’s see what we have so far ...
![Page 24: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/24.jpg)
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 ...
![Page 25: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/25.jpg)
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?
![Page 26: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/26.jpg)
26
• Application.html.erb just before <%=yield%>
<% unless flash[:notice].blank? %>
<div id="notification"><%= flash[:notice] %></div>
<% end %>
Where shall we display the Flash?
![Page 27: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/27.jpg)
27
• Add some layout to the style.css
#notification {
border: 5px solid #9c9;
background-color: #cfc;
padding: 5px;
margin: 10px 0;
}
Making Flash pretty
![Page 28: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/28.jpg)
28
• App/models/story.rb• There are various validations
validates_presence_of :name, :link
Adding validations ...
![Page 29: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/29.jpg)
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
![Page 30: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/30.jpg)
30
• Start a server– ruby script/server
• Goto– http://127.0.0.1:3000/stories/new
Let’s see what we have so far ...
![Page 31: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/31.jpg)
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!
![Page 32: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/32.jpg)
32
.fieldWithErrors {
border: 5px solid #f66;
}
Add more css
![Page 33: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/33.jpg)
33
• At the top of New.html.erb
<%= error_messages_for 'story' %>
Add the error message
![Page 34: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/34.jpg)
34
• A useful error message will indicate blank fields
• Some textual hints are shown
• A red border will highlight the field
Result
![Page 35: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/35.jpg)
35
• Start a server– ruby script/server
• Goto– http://127.0.0.1:3000/stories/new
Let’s see what we have so far ...
![Page 36: 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts](https://reader030.vdocuments.site/reader030/viewer/2022032611/56649e7d5503460f94b808f1/html5/thumbnails/36.jpg)
36
Questions?