Let's start building out the front end and also the backend logic for creating posts. In this lesson, we're going to build out a form so that users can post pictures, and also build out the back end so that the posts are saved in the database correctly.
The first thing we need to do is to create the routes for our posts. We can do this by adding the following line in our routes.rb.
resources :posts
As we've seen in earlier lessons, this will provide a bunch of routes that we can use for posts. It provides us with the routes for the index, create, new, edit, show, update, and destroy actions. Review "resources" section in Ideator- Creating a Form.
Let's go to our terminal and enter rake routes to make sure that we have all of our routes in place.
Next, let's start building our form to create new posts. If we go back to our terminal where we ran rake routes, we can see that next to where it says new_posts GET, we see the /posts/new. This means that if we go to http://localhost:3000/posts/new, we should be able to reach this page. Let's go ahead and go to http://localhost:3000/posts/new.
Woops! Rails is giving us the "Missing Template" error! (Go to this lesson to review what this error means.) We can either redirect the user or make the corresponding view file. In this case, let's go ahead and make it.
In app/views/posts, let's create a new file called new.html.erb. In this file, let's add the following line:
<h1>New Post</h1>
Save the file and refresh the page. You should now see the text "New Post" on the page.
Awesome. In order to create our form, let's install a gem called 'Simple Form' that will make things easier for us.
Go to this link and browse the documentation for this gem. Installing this gem is pretty straight forward. Let's do this.
In your Gemfile, add the following:
gem 'simple_form', '~> 5.3'
Then run bundle install to install the gem.
Next, in your terminal, let's run this command:
rails generate simple_form:install
...and that's it! Awesome. Now we can move on to building out our form.
I'm going to guide you through each of the steps, then we'll walk through exactly what we did. The first thing we're going to do is go into our posts_controller.rb and create a method for our new action. Inside posts_controller.rb, let's put in the following:
def new
@post = Post.new
end
Cool. Let's now hop back into our new.html.erb file and enter the following:
<%= simple_form_for @post do |f| %>
<%= f.input :photo %>
<%= f.input :description %>
<%= f.submit 'Post' %>
<% end %>
Save the file and refresh the page. We now see a working form!
Since the buttons are super ugly, let's make them a little bit prettier by adding bootstrap button classes on the submit button.
<%= simple_form_for @post do |f| %>
<%= f.input :photo %>
<%= f.input :description %>
<%= f.submit 'Post' %>
<% end %>
Much better! Now let's walk through what we just did.
First, in our controller, we created a new method. If you remember, the methods in the controller correspond to the view file that has the same file name. In this case, the new method corresponds to new.html.erb (review this lesson and MVC - Overview of How Everything Works Together to refresh your mind about how controllers and views work together).
Next, we assigned Post.new to @post. If you remember again, in Rails, instance variables that are defined in the controller can be used in the corresponding view file. In this case, since we define @post in the new method, we can use @post in new.html.erb.
Finally, we wrote a piece of code that created a form for us, using simple_form_for. The syntax is pretty straightforward, but if you don't really understand it, don't worry. You'll find that you can just copy and paste and reuse a lot of this stuff.