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
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
Adding a controller action
index.html.erb file and refresh
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.
/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.
/app/views/cases/ create a new file called
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.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
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
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 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:
GETis used only to retrieve information from the server. Example: accessing the google.com main page.
POSTis 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.
PUTis 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.
DELETEis 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
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 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.
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
Instead of a new view, before the end of the create action in
This will redirect us to the cases page every time we create a new case.