【Rails】TOPページに投稿を新着順に表示させる

TOPページに新着投稿を表示させるための記述を復習のためここに書きます。

やりたいこと

今回はレビュー投稿とお知らせの新着をTOPページに表示ます。

• レビュー投稿（review）
• お知らせ（notice）

コントローラ記述

public/homes_controller

class Public::HomesController < ApplicationController
  def top
    # 新規作成順に並び替えて、1件のモデルを取得
    @new_reviews = Review.order(created_at: :desc).limit(1)
    @new_notices = Notice.order(created_at: :desc).limit(1)
  end
  :
  :
end

• @new_reviews = Review.order(created_at: :desc).limit(1)
@new_review変数にreviewモデルのインスタンスを代入します。
  order(created_at: :desc)は、created_atカラムを降順に並び替えるためのメソッドです。limit()メソッドで表示するレコードの最大数を指定できます。
• @new_notices = Notice.order(created_at: :desc).limit(1)も上記と仕組みは同じになります。

ビューの記述

views/public/homes/top.html.erb

<div class="square">
  <h3 class="text-center">新着お知らせ</h3>
</div>
  
<div class="container mt-3">
  <div class="row">
    <% @new_notices.each do |notice| %>
    <div class="col-12 card mb-3"style="background-color: #ebe1a9;">
      <div class="card-body">
      <h6 class="list-group-item"><%= notice.created_at.strftime('%Y/%m/%d %H時%M分') %></h6>
      <h5 class="list-group-item font-weight-bold"><%= notice.title %></h5>
      <h6 class="list-group-item"><%= notice.body.truncate(100) %></h6>
      <h6 class="list-group-item"><%= link_to"お知らせ一覧へ",notices_path %></h6>
      </div>
    </div>
    <% end %>
  </div>
</div>

<div class="aboutback">

<div class="square">
  <h3 class="text-center">新着レビュー</h3>
</div>
  
<div class="container card mt-3 mb-3" style="background-color: #cee4ae;">
  <div class="row">
    <% @new_reviews.each do |review| %>
    <div class="col-lg-4">
      <%= image_tag(review.image, class: "card-img-top", size: "300x300") %>
    </div>   
      <div class="col-lg-8">
        <div class="card-body">
          <h6 class="list-group-item"><%= review.created_at.strftime('%Y/%m/%d') %></h6>
          <h5 class="list-group-item font-weight-bold"><%= review.title %></h5>
          <h6 class="list-group-item"><%= review.body.truncate(100) %></h6>
          <h6 class="list-group-item"><%= @users.find(review.user_id).name %></h6>
        </div>
      </div>
    <% end %>
  </div>
</div>

Bootstrapの記述が混じりわかりづらいですが、先ほどの@new_reviewsと@new_noticesを使いeach文を作成します。

完成