個人アプリ開発 ☆型評価の実装

コメント投稿時に評価を入力できるようにしました。

作業内容

commentテーブルにrateカラムの追加

$ rails g migration AddRateToComments rate:float

カラムは「0.5」や「1.5」という値を保存することになるため、float型にしておきます。

jQuery Raty

jQueryプラグインのjQuery Ratyを使いました。
レーティング(格付け)を星型のアイコンで表示及び入力でき、イメージに近い実装が可能だと思った為です。

Githubのファイル一式をクローン

→対象ファイルをプロジェクトのフォルダに移動
・jquery.raty.min.jsをassets/javascriptのフォルダに入れる。
・/lib/img内のイメージをassets/imagesのフォルダに入れる。

application.jsの編集

ーーー追記ーーー
//= require jquery.raty.js

ビューの編集

.comment-form__wrapper
    = form_for [@group, @comment] do |f|
      = f.hidden_field :group_id, { value: @group.id}
      .comment-form__wrapper__main
        #star.comment-form__wrapper__main__rate
          = f.label :rate,'評価 ', class: "rate-label"
          = f.hidden_field :rate, id: :review_star

        :javascript
          $('#star').raty({
            size: 36,
            path: '/assets/',
            scoreName: 'comment[rate]',
            half: true,
          });

        = f.text_field :title, class: 'comment-form__wrapper__title', placeholder: 'タイトルを入れてください'
        = f.text_area :text, class: 'comment-form__wrapper__text', placeholder: '口コミ本文を入れてください'
      .comment-form__wrapper--bottom
        .comment-form__wrapper--bottom--left
          %p
            訪問日
          = f.date_field :visit_date, class: 'comment-form__wrapper__date'
        = f.submit '投稿', class: 'comment-form__wrapper__submit'

:javascript
hamlの中にjsの記述を入れました。

scoreName: 'post[rate]',
Commentモデルのrateカラムに値を保存する

half: true,
★の半分の入力を行う

躓き

表示がされない（JSが効いていない）

application.jsの記述がされていなかった

コンソールを見るとエラーが確認できた為、修正

サイズの指定が悪かった
size: 36px,
→ size: 36,

パスの指定が悪かった
starHalf: 'asset_path('star-half.png')',
→　starHalf: ‘/asset/star-half.png’/,
→　path: ‘/assets/’（最終的にまとめて記述できることがわかった）

rateの値が保存されない

ストロングパラメータで許可していなかった

[comments_controller]
ーーー修正ーーー
def comment_params
    params.require(:comment).permit(:title, :text, :visit_date, :rate).merge(user_id: current_user.id, group_id: params[:group_id])
  end

フォーム内に表示し、DBに保存するまで完了しました。
明日以降、view内の表示（点数結果）を行っていきます。