9: Letting the users create content

So far, you may feel a little deceived. It's true, you don't need Ruby, Rails or any understanding of web applications architecture to make a page containing a list of pretty images.

This is where the power of Rails comes to save us - only with slight additional effort it is possible to add complexity beyond the capabilities of ordinary blogging platforms.

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

Adding a link to Create a new case

Now that our application reads the cases in the browser from the database, let's add the possibility to create new cases from the browser.

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

<%=link_to("Create a new case", new_case_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/cases.

Now you see the Create a new case 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/cases_controller.rb define the following action that creates a new case:

def new
  @case = Case.new
end

Save the file and it and try clicking again on Create a new case. 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 cases from our browser. We already created a view, when we wanted to be able to see our cases from the browser.

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

In this file type and save:

<h1> New Case</h1>
<%= form_for @case do |form| %>
<%= form.text_field :image_link, :placeholder => "Case image URL"  %>
<%= 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 @case that we used in the new action in cases_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 @case variable.

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

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:

GET is used only to retrieve information from the server. Example: accessing the google.com main page.
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.
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.
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. We can create new cases from the console, now we need to define an action that will do the same from /app/controllers/cases_controller.rb.

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

def create  
  @case = Case.create(case_params)
end

This will create a new case. Instead of us manually specifiying the image_link that should be included in the created case, we use instead case_params.

case_params is an action that will use for the creation of a new case 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 case_params
  params.require(:case).permit!
end

Save and refresh the browser page.

Redirect

As you might expect by now, for the new action controllers, we’ll need new views.

What do we want to see when we create a case? All the cases that have altready been created. For this we already have the cases_path.

Instead of a new view, before the end of the create action in cases_controller.rb type:

redirect_to cases_path

This will redirect us to the cases page every time we create a new case.

Letting the users create content