View for New Pages

We have the slash pages slash new path routed to the pages controller's new 0:00 method in that method we've set up a new page object in the page instance variable. 0:04 Now we need to set up an ERB view template that creates a form based on that page 0:10 object some knowledge of HTML forms will be helpful at this point. 0:15 If you haven't worked with forms before, be sure to check out the teachers notes. 0:19 Since our action is on the pages controller our view template needs to be 0:23 in the app views pages directory. 0:27 And since the action is named new we should name our template file 0:31 new.html.erb. 0:35 Again, make sure it's all lowercase and watch out for typos. 0:38 We'll start with an output embedding tag with a call to the form for 0:42 method form for takes an argument which is the object will be creating a form for. 0:46 The method also takes a block everything within the block 0:51 becomes part of the form HTML. 0:54 The finished HTML gets returned from the form for method. 0:58 That's why we're using an output embedding tag. 1:02 We want to embed the form HTML in the page. 1:04 Form for passes an object representing the form to the block. 1:07 Which we store in the F parameter. 1:11 As usual we need a regular embedding tag down here on a separate line 1:13 with the end keyword to end the block. 1:17 Within the form we create an HTML div element with the CSS class of field 1:20 to hold each form field. 1:25 So div class equals field. 1:27 And then close the div tag. 1:30 We won't review using CSS in rails until later course. 1:35 But this just applies an existing style that formats things a bit more neatly. 1:39 First, we're going to add a field for the page's title attribute. 1:43 Within the div, we'll add an output embedding tag 1:46 with a call to the text field method on the form object. 1:50 So, f.text_field. 1:53 We'll pass it the ruby symbol title so 1:55 that it's treated as a field for the title. 1:59 Let's save this and 2:01 reload the slash pages slash new path in our browser to see what we've done so far. 2:02 There's our text field. 2:07 If we open our browsers developer tools we can see the resulting HTML. 2:09 It's an input element with a type of text nested within a form element. 2:14 Our users won't be able to tell what this box in the middle of the page is supposed 2:19 to do though. 2:23 Let's add a label to the field so they know to hinder a title. 2:24 Just before the embed tag with the text field call. 2:27 We'll add another embed tag with a call to the label method. 2:30 So we'll take the form object and call the label method on it. 2:36 Label needs to receive the same symbol as the text field so 2:40 that it's treated as a label for that field. 2:44 So the text field has a symbol of title and will use the same for the label. 2:46 If we reload our browser. 2:53 We'll see the title label before the text field. 2:55 This is an actual HTML label element linked to the title field. 2:58 So if we click on the label, the cursor will focus on the matching field. 3:02 Let's go back and add the remaining form fields, and 3:08 then a button to submit the form. 3:10 For the body attribute, we'll copy the code for 3:12 the title field, But change the symbols to body. 3:14 We'll also change the text field method call to text area to give the user 3:24 a little more room to type in. 3:28 For the slug attribute we'll just copy the title code again and 3:30 change the symbols to slug. 3:34 If we save our work and 3:40 reload the browser we'll see three fields each with a matching label. 3:41 Now we need a button that lets users submit the form. 3:48 We'll create another div to hold the button, but 3:51 we won't worry about applying a CSS class to this one. 3:54 To output the button HTML, 3:58 we'll add an output tag with a call to the forms submit method. 4:00 There's no parameters or anything to add for the submit method. 4:07 If we reload the page will see all of our form fields and the submit button. 4:11 Right now we have to manually type in the slash page's new path to get to this form. 4:16 Let's fix that really quick. 4:21 First, let's set up a new page path helper method to make linking to the form easier 4:23 In routes that RB at the end of the slash pages slash new row add as. 4:27 New Page. 4:34 Be sure to save that then in app views pages indexhtml. 4:37 or be in the index of all pages. 4:42 We use an output ERB tag, 4:46 with a call to link to, to generate a link to create a new post. 4:48 We'll set the link text to new page. 4:52 And call new page path to get the link path. 4:57 Save that. 5:02 And now if we visit the index of all pages, And 5:03 click the new page link will be taken to the new page form. 5:07 Let's try fill in the form out now. 5:12 We'll give it create a new page with the title of My Bio. 5:14 I'm a Treehouse teacher. 5:19 And we'll give it a slug just by Bio, but when we submit the form, 5:25 we'll see an error. 5:29 No route matches POST/pages. 5:31 This brings us to the second major part of setting up our form, 5:34 adding a controller action to handle the form submission. 5:37 We'll start on that next. 5:40