Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

View for New Pages

5:42 with Jay McGavren

We have the /pages/new path routed to the PagesController's new method. In that method, we've set up a new Page object in the @page instance variable. Now, we need to set up an ERB view template that creates a form based on that Page object.

The form_for method takes a model object, and generates an HTML form for it.

# This will embed the form HTML in the output.
# Here, a form will be generated for the object
# in @page.
<%= form_for(@page) do |f| %>
  <div class="field">
    # This will output a label for the "title" field.
    <%= f.label :title %>
    # This will output a text field used to set the
    # title attribute of the Page object.
    <%= f.text_field :title %>
  </div>

  <div class="field">
    # This will output a label for the "body" field.
    <%= f.label :body %>
    # This will output a larger text field used to set the
    # body attribute of the Page object.
    <%= f.text_area :body %>
  </div>

  <div>
    # Outputs a button used to submit the form.
    <%= f.submit %>
  </div>
<% end %>

You can read more about form_for in the official Rails documentation.

Want to learn more about HTML forms? Check out our course on the topic.

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

You need to sign up for Treehouse in order to download course files.

Sign up