[raild7]コメント書き込みフォームの作成&CSSの反映方法

書き込みフォームの作成

views/boards/_comment_form.html.erb

<div class="p-comment__formBox">
  <p class="p-comment__formTitle">コメント記入</p>
  <%= form_for comment do |f| %>
    <%= f.hidden_field :board_id %>
    <div class="form-group">
      <%= f.label :name, '名前' %>
      <%= f.text_field :name, class: 'form-control' %>
    </div>
    <div class="form-group">
      <%= f.label :comment, 'コメント' %>
      <%= f.text_area :comment, class: 'form-control', rows: 4 %>
    </div>
    <%= f.submit '送信', class: 'btn btn-primary' %>
  <% end %>
</div>

<%= form_for comment do |f| %>
コメントを作成するためのフォームタグ
form_forヘルパーを使用してcommentオブジェクトに関連付けられたフォームを生成します。

<%= f.hidden_field :board_id %>
フォームのデータと一緒にコメント、対象の掲示板のIDを渡すために必要
フィールドはフォーム上は目に見える形で表示されないので、ユーザーに見せる必要がなく、一緒に送りたいデータがある場合に使われる。

app/views/boards/show.html.erb

<%= render partial: 'comment_form', locals: { comment: @comment } %>

機能を追加するViewに上記を追加する

CSSの反映方法

app/assets/stylesheets/comments.scss

.p-comment__formBox {
    margin: 30px auto;
    border: 5px solid #e8e8e8;
    padding: 25px;
    border-radius: 14px;
  }

  .p-comment__formTitle {
    border-bottom: 2px solid #dfdfdf;
    padding-bottom: 5px;
  }

コントローラの名前+scss拡張子のファイルに記述を行い、

app/assets/stylesheets/application.scss

@import "comments";

application.scssに追加したscssのimportを行う
↑これを行わないとcssが反映されない