0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

星レビューの実装方法

Posted at

次はコメントの投稿の際に星をつけてレビューする機能の実装方法を教えます。
まず最初に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段評価の星をつけることも可能となります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?