星レビューの実装方法

次はコメントの投稿の際に星をつけてレビューする機能の実装方法を教えます。
まず最初にmodelのreview.rbを作成し、関連対象のモデルをbelongs_toを記載します。

class Review < ApplicationRecord
  belongs_to :shop
  belongs_to :user
end

その後にreview用のマイグレーションファイルを作成し、カラムや関連づけるテーブル名を記載します。

class CreateReviews < ActiveRecord::Migration[version]
  def change
    create_table :reviews do |t|
      t.integer :rating
      t.text :comment
      t.references :shop, null: false, foreign_key: true
      t.references :user, null: false, foreign_key: true

      t.timestamps
    end
  end
end


次にレビューを投稿するためのレビューフォームを作成します。
app/views/reviewsにrating_form.html.erbを作るのが一般的です。

<%= form_with(model: review, url: shop_reviews_path(@shop)) do |form| %>
  <div class="form-group">
    <%= form.label :rating, "評価" %>
    <%= form.select :rating, options_for_select([1, 2, 3, 4, 5]) %>
  </div>
  <div class="form-group">
    <%= form.label :comment, "コメント" %>
    <%= form.text_area :comment %>
  </div>
  <%= form.submit "レビューを投稿", class: "btn btn-primary" %>
<% end %>

reviewに関連するコントローラーファイルを作成し、createアクションとパラメーターを作成します。



class ReviewsController < ApplicationController
  before_action :set_shop

  def create
    @review = @shop.reviews.build(review_params)
    @review.user = current_user
    if @review.save
      redirect_to @shop, notice: "レビューが投稿されました。"
    else
      render 'shops/show' # エラー時に店舗の詳細ページに戻る
    end
  end

  private

  def set_shop
    @shop = Shop.find(params[:shop_id])
  end

  def review_params#パラメーター
    params.require(:review).permit(:rating, :comment)
  end
end

星レビューが付いたコメントを表示する詳細ページのコードはこのようになります。app/views/shops内のshow.html.erbにコードを追加します。


<div class="shop-details">
  <!-- ...省略... -->
  <% if @review %>
    <%= render 'reviews/rating_form', review: @review %>
  <% else %>
    <%= render 'reviews/rating_form', review: Review.new %>
  <% end %>
  <!-- ...省略... -->
</div>


ルーティングは以下のコードを設置します。

patch '/reviews/:id/rate' => 'reviews#rate', as: :rate_review
  resources :shops, only: [:index, :new, :create, :show, :edit, :update, :destroy] do
    member do
      get 'reviews'
    end
    resources :comments, only: [:create, :destroy, :edit, :update]
  end


これにより、コメントを投稿する際に5段評価の星をつけることも可能となります。

この記事が気に入ったらサポートをしてみませんか?