記事にコメント機能③

投稿画面を作成

画面の作成には、まずラウツを作成しその後、コントローラ

config/routes.rb

  resources :articles do
    resources :comments, only: [:new, :create]
  end

ラウツの設定はできているので、コントローラを設定していく

app/controllers/comments_controller.rb
を作る。
ファイル名は、複数形を使う。

class CommentsController < ApplicationController
end

コメントを保存したり、コメント作るための画面を表示するので、
こうしておく。
ファイルと同じコメンツコントローラにする。

ラウツを確認。
new_article_comment_path

GET

/articles/:article_id/comments/new(.:format)

comments#new

コメント記事を投稿するためのアクション

newをするときは、まず空の箱を作る。
new_article_comment_pathは、記事のidを取得できる。
今までは、idだけでとれたが、今回は、[:article_id]
なぜなら、今回ラウツを見るとarticle_idになっているのが、わかります。

コメントを取得してから、コメンツをビルドしている。
※build:建てる

app/controllers/comments_controller.rb

def new
    article = Article.find(params[:article_id])
    @comment = article.comments.build
  end

app/views/comments
viewsにcommetsフォルダを作成。
CommentsControllerなので、commentsとする。

app/views/comments/new.html.haml
ファイル作成後、

= form_with(model: @comment, url: article_comments_path)

フォームで、コメント投稿するためのパス

それは、article_comments_pathのPOST
これは、article_idを指定しなければいけない！
(@comments.article)後ろにこれを追加。

= form_with(model: @comment, url: article_comments_path(@comments.article), local: true) do |f|

f:formのf

%div
    = f.label :content, '内容'
%div
    = f.text_area :content
= f.submit '保存', class: 'btn-primary'

text_areaは、railsで用意されているもの。

これは、定番の表現
わからなければ、ググれば良い！！

.container
  %ul
    - @comment.errors.full_messages.each do |message|
      %li= message

エラーが、表示するようにする。

app/views/articles/show.html.haml

.container
  = link_to new_article_comment_path(@article) do
    .btn-secondary
      コメントを追加

どこの記事に追加するかわかるように、＠articleを引数にする。

デザインの変更
app/assets/stylesheets/buttons.scss

.btn-secondary {
  background-color: white;
  border: solid 1px $primary-color;
  width: 100%;
  text-align: center;
  color: $primary-color;
  padding: 16px 0;
  font-weight: bold;
}