Commenting for Rails Girls App

Created by Janika Liiv, @janikaliiv

We are going to add the possibility to comment on ideas in your railsgirls application.

The instructions for installing rails and building the ideas app can be found here.

1.Create comment scaffold

Create a comment scaffold, with the commentator name, the comment body (contents of the comment) and with the reference to the ideas table (idea_id).

rails g scaffold comment user_name:string body:text idea_id:integer

This will create a migration file that lets your database know about the new comments table. Run the migrations using

rake db:migrate

2.Add relations to models

You need to make sure that Rails knows the relation between objects (ideas and comments). As one idea can have many comments we need to make sure the idea model knows that. Open app/models/idea.rb and after the row

class Idea < ActiveRecord::Base

add

has_many :comments

The comment also has to know that it belongs to an idea. So open app/models/comment.rb and after

class Comment < ActiveRecord::Base

add the row

belongs_to :idea

3.Render the comment form and existing comments

Open app/views/ideas/show.html.erb and after the image_tag

<%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present? %>

add

<h3>Comments</h3>
<% @comments.each do |comment| %>
  <div>
    <strong><%= comment.user_name %></strong>
    <br />
    <p><%= comment.body %></p>
    <p><%= link_to 'Delete', comment_path(comment), method: :delete, data: { confirm: 'Are you sure?' } %></p>
  </div>
<% end %>
<%= render 'comments/form' %>

In app/controllers/ideas_controller.rb add to show action after the row

@idea = Idea.find(params[:id])

this

@comments = @idea.comments.all
@comment = @idea.comments.build

Open app/views/comments/_form.html.erb and after

  <div class="field">
    <%= f.label :body %><br />
    <%= f.text_area :body %>
  </div>

add the row

<%= f.hidden_field :idea_id %>

next, remove

<div class="field">
  <%= f.label :idea_id %><br>
  <%= f.number_field :idea_id %>
</div>

That’s it. Now view an idea you have inserted to your application and there you should see the form for inserting a comment as well as deleting older comments.