Letting the users create content

In this section we will let the users create content, namely, new posts.

Adding a link to Create a new post

Let's add the possibility to create new posts from the browser.

On the posts' index page we need a link users can click in order to create a new post. To add this link in the app/views/posts/index.html.erb file, add the following code at the beginning of the file:

<%=link_to("Create a new post", new_post_path) %>

You can see this is Ruby code since it is written between the <%= %> tags , and it returns something back to the page, because it starts with <%=, as opposed to simply <%.

The function link_to("text", link_path) creates a link labeled with the text between the brackets. When clicked, the link will lead users to the desired link_path.

Adding a controller action

Save the index.html.erb file and refresh localhost:3000/posts.

Now you see the Create a new post link on the top of the page, but if you click on it, you will get an error saying that we need an action in the controller.

Let's create this action.

In /app/controllers/posts_controller.rb define the following action that creates a new post:

def new
  @post = Post.new
end

Save the file and it and try clicking again on Create a new post. You will get a different error, one that says that there is no view for this controller.

Displaying a view

As we learned from the error above, we need to create a new view in which we will be adding new posts from our browser. We already created a view, when we wanted to be able to see our posts from the browser.

In /app/views/posts create a new file called new.html.erb.

In this file type and save:

<h1> New Post</h1>
<%= form_for @post do |form| %>
  <%= form.text_field :image_link, placeholder: "Post image URL"  %>
  <%= form.text_field :title, placeholder: "Post title"  %>
  <%= form.text_area :description, placeholder: "Post description"  %>
  <%= form.submit %>
<% end %>

What are forms?

Forms are HTML elements that allow users to enter data that is ultimately sent to the server.

HTML forms can have different elements: text fields, checkboxes, radio buttons and, usually, a button that submits the form.

As you see above we have used two new commands: form.text_field and form.submit. They both are form elements.

Passing a variable from a controller to a view

Did you notice that @ in front of @post that we used in the new action in posts_controller.rb?

It allows us to use the same variable both in action and the view. That is important, since we want to pass data from the action to the view. The data we want to pass is the @post variable.

Now if you reload the posts page in the browser and click on Create a new post it will seem that everything finally works. Well, almost. We do have view a page that asks us to insert a new image link, title and post description.

But if you try it you will see an error saying that there's no create action yet.

The 'create' action

Before we can do the create action, we need to take a small detour and learn a few verbs. To be fair, we will be learning new meanings to verbs we already know.

HTTP verbs

HTTP is a protocol created for data communication. Our client (the browser) communicates with the server using HTTP.

HTTP has eight verbs, also known as methods. The verbs tell the server what kind of action to take. Let’s go over the four main verbs that you will encounter most often:

1. GET is used only to retrieve information from the server. Example: accessing the google.com main page.
2. POST is used to send some information to the server. Example: after the google.com page is loaded, you type something in the text input and hit search, that was a POST request that sent the text from the text input to Google servers.
3. PUT is used to update a resource on the server. Example: if you edit a post on Facebook, then the browser should send a PUT to the server with the updated data.
4. DELETE is used to notify the server to delete a resource. Example: if you delete a post on Facebook, then the browser should send a DELETE to the server saying which post to delete.

From verbs to action

The previous error notified us that we are missing the create action. Now we need to define a create action in /app/controllers/posts_controller.rb.

To do this, in the posts_controller.rb file add the following action:

def create  
  @post = Post.create(post_params)
end

This will create a new post. Instead of us manually specifying the image_link, title and description that should be included in the created post, we use instead post_params.

post_params is an action that will use for the creation of a new post the same parameters the user inserts in the form.

This is an action we have to define, in the same controller where we're using it:

def post_params
  params.require(:post).permit(:title, :description, :image_link)
end

Now, let's create a new post.

Hit the create the post button and nothing will happen. That is because we did not tell the controller what to do when after the post was created.

Redirect

What do we want to see when we create a post? All the posts that have already been created. For this we already have the posts_path so before the end of the create action in posts_controller.rb type:

redirect_to posts_path

def create  
  @post = Post.create(post_params)
  redirect_to posts_path
end

This will redirect us to the posts page every time we create a new post.