1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts.

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

http://127.0.0.1:3000/stories/new

6

• App/controllers/stories_controller.rb

• Creating a NEW empty record

def new

@story = Story.new

end

Let’s add to the controller

7



• Path Error?



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





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





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


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





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





36

Questions?

1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts.

Documents

Transcript of 1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts.