Download presentation
Presentation is loading. Please wait.
1
1 Dr Alexiei Dingli Web Science Stream Helpers, Forms and Layouts
2
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
3 App/views/stories/new.html.erb name: link: Let’s work on some Forms
4
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
5 Start a server –ruby script/server Goto –http://127.0.0.1:3000/stories/newhttp://127.0.0.1:3000/stories/new Error? Let’s see what we have so far...
6
6 App/controllers/stories_controller.rb Creating a NEW empty record def new @story = Story.new end Let’s add to the controller
7
7 Start a server –ruby script/server Goto –http://127.0.0.1:3000/stories/newhttp://127.0.0.1:3000/stories/new Path Error? Let’s see what we have so far...
8
8 Ideally every model should become a resource But how do we find resources? By using routing configurations –Config/routes.rb Resources
9
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
10 URLAction GET /storiesIndex GET /stories/newNew POST /storiesCreate GET /stories/1Show GET /stories/1/editEdit POST /stories/1Update DELETE /stories/1Destroy What’s the effect of that line?
11
11 URLAction GET /storiesIndex GET /stories/newNew POST /storiesCreate GET /stories/1Show GET /stories/1/editEdit POST /stories/1Update DELETE /stories/1Destroy Actions on single stories and those on all!
12
12 Start a server –ruby script/server Goto –http://127.0.0.1:3000/stories/newhttp://127.0.0.1:3000/stories/new Let’s see what we have so far...
13
13 Right click on the browser page View the source code What about the HTML?
14
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
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
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
17 stories_path/stories new_story_path/stories/new story_path(@story)/stories/1 edit_story_path(@story)/stories/1/edit Some helpers
18
18 def create @story = Story.new(params[:story]) @story.save redirect_to stories_path end How to make even better code!
19
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"> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> Shovell Shovell Creating a layout for the whole application... App/views/layout/application.html.erb
20
20 App/views/layout/application.html.erb Underneath the title tag, add... – Underneath the h1 tag, aff – How to make nicer views?
21
21 Inform HTML that a CSS exists called /stylesheets/style.css A pointer to where our views should be displayed 2 magic lines...
22
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
23 Start a server –ruby script/server Goto –http://127.0.0.1:3000/stories/newhttp://127.0.0.1:3000/stories/new Let’s see what we have so far...
24
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
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?
![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](http://images.slideplayer.com./24/7397488/slides/slide_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")
26
26 Application.html.erb just before Where shall we display the Flash?
27
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
28 App/models/story.rb There are various validations validates_presence_of :name, :link Adding validations...
29
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 Better redirection
![29 Stories_controller.rb def = Story.new(params[:story]) flash[:notice] = Story submission succeeded redirect_to stories_path else render :action => new‘ #renders the html only end Better redirection](http://images.slideplayer.com./24/7397488/slides/slide_29.jpg "29 Stories_controller.rb def = Story.new(params[:story]) flash[:notice] = Story submission succeeded redirect_to stories_path else render :action => new‘ #renders the html only end Better redirection")
30
30 Start a server –ruby script/server Goto –http://127.0.0.1:3000/stories/newhttp://127.0.0.1:3000/stories/new Let’s see what we have so far...
31
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
32.fieldWithErrors { border: 5px solid #f66; } Add more css
33
33 At the top of New.html.erb Add the error message
34
34 A useful error message will indicate blank fields Some textual hints are shown A red border will highlight the field Result
35
35 Start a server –ruby script/server Goto –http://127.0.0.1:3000/stories/newhttp://127.0.0.1:3000/stories/new Let’s see what we have so far...
36
36 Questions?
Similar presentations
