オピニオンの実装2

オピニオン一覧の実装

clips/show.html.erbにオピニオン一覧を表示させます。以下を追加して下さい。タイトルやユーザーのメールアドレス、投稿日を表示するようにしています。

<h2>この記事に関するオピニオン</h2>
<% @clip.opinions.each do |opinion| %>
  <h5><%= opinion.title %></h5>
  <%= opinion.user.email if opinion.user %>
  <%= opinion.created_at %>
  <hr>
<% end %>

では、ブラウザで確認してオピニオンを投稿しましょう。以下のような画面が表示されれば成功です!

オピニオンフォームのデザイン

オピニオンフォームを、もう少しきれいにデザインしましょう。以下オレンジ部分を追加して下さい。

# clips/show.html.erb

<div class="opinion-form">
  <%= form_for [@clip, @opinion] do |f| %>
    <%= f.text_field :title, class: 'form-control my-2',  placeholder: 'オピニオンタイトルを書く' %>
    <%= f.text_area :body, class: 'form-control', placeholder: 'オピニオン本文を書く' %>
    <%= f.submit "オピニオン作成", class: 'btn btn-primary my-2' %>
    <% end %>
</div>

次に、フォーム用CSSをstyle.scssに追加します。以下のように、余白と背景色を設定してください。

# style.scss

.opinion-form {
  padding: 1rem;
  background: #eee;
}

では、デザインを整えたフォームをブラウザで確認して、オピニオンを投稿してみましょう。けっこうキレイになりましたね!

課題

オピニオンを実装し、いくつかオピニオンを登録してみましょう。タイトルや内容が空でも登録されてしまいます。どうすれば良いか考えてみましょう。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

×