Made withRuby on RailsClip

Ruby on Rails Tutorial Part 6 - CRUD - Create - Save Method

A

andrewperk

Creator on the Ruby on Rails channel

Watch on YouTube ↗

33K viewsSep 21, 201110:49 runtime

Learn the 'Create' part of CRUD in Ruby on Rails by building a feature to add new blog posts. This tutorial covers creating a link to the new action using `link_to` and a named route, setting up the controller's `new` action with an empty model instance, and building the…

Chapters

#rubyonrails#clip#frameworks

Creating New Records in Rails (CRUD: Create)

This guide covers the 'Create' operation for a blog post model in a Ruby on Rails application, from the user interface to the database save.

1. The 'New' Action and View

To display a form for creating a new post, you need a dedicated route, controller action, and view.

Link to the Form: Use the link_to helper in a view (e.g., index.html.erb) to point to the new action's route.
```
<%= link_to 'Add a new post', new_post_path %>
```
Controller Action (new): The new action's primary job is to instantiate a new, empty model object. This object is used by form_for to build the form.
```
# posts_controller.rb
def new
  @post = Post.new
end
```

Note
The @post instance variable makes the empty Post object available to the new.html.erb view template.

2. Building the Form with `form_for`

Rails' form_for helper simplifies creating forms that are tied to a model object.

Form Structure: The form_for helper takes the model object (@post) and yields a form builder object (commonly named f).

<%# new.html.erb %>
<%= form_for @post do |f| %>
  <p>
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </p>

  <p>
    <%= f.label :content %><br>
    <%= f.text_area :content %>
  </p>

  <p>
    <%= f.submit 'Add a new post' %>
  </p>
<% end %>

By default, form_for will submit this data via a POST request to the create action.

3. The 'Create' Action

This action handles the submitted form data.

Instantiate and Save: Create a new Post object using the data submitted in the params hash. Then, call the .save method.

Conditional Logic: The .save method returns true on success and false on failure. This allows for conditional handling.

# posts_controller.rb
def create
  @post = Post.new(params[:post]) # NOTE: Security update needed later (Strong Parameters)

  if @post.save
    # Success
    redirect_to posts_path, notice: 'Your post was saved.'
  else
    # Failure
    render 'new'
  end
end

Important
redirect_to vs. render

On Success (redirect_to): Issues a new GET request to the specified path (e.g., the index page). This follows the Post/Redirect/Get pattern, preventing duplicate form submissions on refresh.

On Failure (render): Re-displays the specified view template (e.g., new.html.erb) without a new request. This preserves the user's submitted data in @post so the form can be re-populated with their entries for correction.

4. Displaying User Feedback with Flash Messages

Flash messages provide temporary feedback to the user (e.g., 'Post was successfully created').

Setting the Flash: The notice: option in redirect_to automatically sets flash[:notice].
Displaying the Flash: Add code to your application layout (application.html.erb) to display any messages present in the flash hash. This ensures messages are displayed on every page.
```
<%# application.html.erb %>
<% flash.each do |key, value| %>
  <p><%= value %></p>
<% end %>

<%= yield %>
```

Tip
The flash hash is cleared after it is read for one request-response cycle. This means a flash message will appear once and then disappear on the next page load or refresh.

Introduction to Creating Posts

Hello, this is Andrew Perkins, and this is part six in creating a blog using Ruby on Rails. In this video, we're going to learn how to create new posts. We'll be learning quite a few new topics such as creating forms, redirecting users, rendering views, and displaying flash messages.

So let's get started. This is our blog's index page for our posts controller. We're first going to want to add a link here to link to our post's new action, which is going to be used to display the form to add a new post. So let's switch to our browser, we'll take a look at our posts controller. Here's the new action. This is going to be used to display a form so that someone can create a post.

Linking to the New Post Page

Let's first edit the index page and create a link to this new action. So we'll open up our index view file and at the bottom I'll create a p tag.

I'm going to use the link_to method to create a link. The link text will say "add a new post" and now we want to link to our post controller's new action. If we recall from the routing video, we have a named route to refer to the new action, and that's called new_post_path. And then we'll close our ERB tags. So here we've created a link called "add a new post" and it links to the new_post_path which is the post controller's new action.

Let's edit the new view file, and we'll add an h1 tag here and then say "Add a new post". And we'll save it and let's make sure our link works. So back in the browser, we'll refresh the index page. And here's our "add a new post" link. And if we click it, we can see that it takes us to the "add a new post" page, that's posts/new.

Preparing the Controller and Form

So now let's add a form on this page so we can actually submit the post. So we'll switch back to our text editor, and we're going to look at our posts controller first. So the new action displays the form. That form requires an empty post object in order to create the new post. So we need to send an empty post object to the view. So we'll create a post instance variable, and we will assign a new empty post object to it. We'll save it. We now have access to this empty post object in our view file, and our form can use that.

So back into the new view, we're going to open up our ERB tags to output something, and we're going to use a new method called form_for. This method creates a form for us, and what we pass to it is that empty post object that we sent it. It also takes a block that's used for creating the form, and then we need to end the block as well. So we now have access to this local f variable. You could name this whatever you would like, you could call it form if you want. I'm just going to call it f for short.

Building the Form with Form Helpers

And we can use this to create some form fields for entering a new post. So I'm going to create a p tag here, and then I'm going to open up my ERB tags, and I'm going to create a label tag for the title. And then I'll create a line break here. And then I'm also going to create a text field for the title as well. So we have a label for our title and we have a text field for our title. So we can duplicate this and we want to create one for our content. We need a label for the content and a field for the content, but we actually don't want just a plain text field, we want a text area for the content so that they can enter in as much content as they would like.

Finally, we're going to create a submit button. So I'm going to paste it one more time and then delete the label. And rather than a text field, we're going to want a submit button, and then we can also tell it what text should appear on the submit button. So we'll say "add a new post", save it, and we can go take a look at our form now. Switch back to the browser, we'll refresh the posts new page, and there's our form.

It currently doesn't work. The form will try and submit to our post's create action, but our post's create action doesn't do anything yet. So let's fix that.

Implementing the Create Action

We'll switch back to our text editor, and here's our posts controller and here's the create action. When that form is submitted, it's going to submit right to this action. And we need to grab the form values that were submitted so we can use that and save it into the database. We need to put that inside of a post object and then save it.

So we'll create an instance variable called post. We'll create a new Post object, and what we pass to it is the actual post information that was submitted from the form. And we can grab that through the params hash. And we can grab that post information. And now we have access to the post object, and remember it has a save method. We learned about the save method when we worked with the rails console a few videos back, and that will save the post into the database.

Handling Success and Failure on Save

This save method will return true or false, whether or not the save was successful. So we can use it inside of a conditional. And if it was successful, we can give the user a success message and redirect them to a different page. And if something went wrong, we can redisplay the new page with the form and they can fill it back out and try again. So we're going to say if post.save, and then we'll use else, and then we'll end the if statement. So this part of the if statement is if it was successfully saved.

And we're going to redirect the user back to the index page. So we can use the redirect_to method, and we're going to redirect to the posts_path. If you recall from the routing video, posts_path is the main route for our index action. We can also give the user a notice and let them know that their post was successfully saved. We do that by passing in a second parameter here. It's a hash. So we'll say we'll give them a notice of "Your post was saved". And we'll save it.

And now we need to fill in the else part of the if-else condition. else is if the post was not able to be saved. If it wasn't able to be saved, we just want to render a page. The page that we want to render is the new page because we want to display it to them again so that they can try and fill the form out and resubmit it and hopefully it saves this time.

Displaying Flash Messages in the Layout

So there we go, it now works. This notice, though, is not being handled correctly yet. This is considered a flash message, and we need to make sure that we're displaying flash messages. So to display flash messages, we need to edit the layout file. We can find our layout under views/layouts, and we have application.html.erb. And this is the layout that all of our views use. It contains our doctype, the HTML head and body tags, as well as the title and some stylesheets and JavaScript.

You can see this call to yield. What this yield does is whatever code is inside of our view, it is output in this location of our layout file. So when someone accesses our index page, whatever code is inside this index view is inserted right here in place of yield. So what we want to do is right above it, we want to make sure we're displaying those flash messages. If at any point we give the user a notice, we need to make sure that it displays in the browser. And to do that, we can open up our ERB tags, and we have access to a flash. And we can loop through that flash hash and pass it a block. We can access the key and the value of the hash. And then we need to end the block as well. The key is what type of message it is, in this case the type of message is a notice. And the value is the actual message itself. In this case, it's "Your post was saved." So up here, we can create a p tag and we can just display the value of that flash message if there is one. It'll loop through all of the different types of flashes and display that flash message to the user. So we can save this.

So now we have both of our new and create actions filled out. We have a link going to the new page to display the form to create a post and we actually have the form filled out as well here. The form is ready to be used.

Demonstration and Final Words

So let's give it a try. We'll switch to our browser. I'm going to refresh the page really quick, and let's add a post. So I'm going to say "third post" and add some content. And then when we hit the submit button, we should be redirected back to our index page, and we should get our flash message letting us know that it was successful.

There we go. Here's our flash message. It says "Your post was saved", and there's our third post. Something to keep in mind about flash messages is that they're only available for one request. So if we refresh this page, the flash message disappears. It only displays whenever there is a flash message, and it only displays one time.

So here's our third post. Let's view it, and we can see that our third post was inserted properly. So I hope you found this useful, and thank you for watching.