rails6でratyを使用して星での評価機能を実装。
まず、Jqueryを入れる
https://qiita.com/masahisa/items/eaacb0c3b82f4a11fc13
これを参考にjqueryを導入してください。
rails6になり、
$ yarn add jquery の記述が忘れがちなので注意が必要です。
githubから星imageを保存
https://github.com/wbotelhos/raty/tree/master/lib/images
これを app/assets/imagesに保存。
同じくgithubからjavascriptコードをコピー
rails6では app/assets/javascripts というフォルダがないので、
app/assets に javascriptsというフォルダを作成。
配下にaplication.jsファイルも作成、そこにgithubからコピーしたコードを全て貼り付け。
app/assets/config/manifest.jsに
//= link_directory ../javascripts .js
を追加。
app/layouts/application.html.erbに
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
を追加。
ここまでが環境設定。rails６以外では大きくやり方が異なるので注意下さい。
（６でもこのやり方が正解かは不明ですが、一応これで読み込むことはできました。）
以下機能の実装。
rateカラムを追加
※float型を推奨。星半分でも反映できる為。
私の場合はevaluationsテーブルに作成。投稿した記事の評価を星で実施。
rails g migration AddRateToEvaluations rate:float
↓
rails db:migrate
星評価機能を付けたいviewのformに
<div class="form-group row" id="star">
<%= f.label :rate,'総合評価', class:'col-md-3 col-form-
label' %>
<%= f.hidden_field :rate, id: :review_star %>
</div>
<!-- 評価javascript -->
<script>
$('#star').raty({
size : 36,
starOff: '<%= asset_path('star-off.png') %>',
starOn : '<%= asset_path('star-on.png') %>',
starHalf: '<%= asset_path('star-half.png') %>',
scoreName: 'evaluation[rate]',
half: true,
});
</script>
を記述。ポイントはhidden_fieldでidにreview_starを定義すること。
Js部分で保存した星の画像を読み込み。
コントローラでrateパラメータをpermitするのも忘れずに。
これで星で入力できる状態になるはずです。
一応、入力したデータを表示したコードも記載しておきます。
私の場合は、evaluationsテーブルにcommentカラムがあったり、postモデル、userモデルとアソシエーションが組まれている形なので、参考程度でお願い致します。
<tbody>
<% @evaluations.each do |evaluation| %>
<tr>
<td><%= evaluation.comment %></td>
<td>
<a href="/users/<%= evaluation.user.id %>">
<%= evaluation.user.nickname %>
</a></td>
<!--星評価-->
<td><div id="star-rate-<%= evaluation.id %>"></div>
<script>
$('#star-rate-<%= evaluation.id %>').raty({
size: 36,
starOff: '<%= asset_path('star-off.png') %>',
starOn : '<%= asset_path('star-on.png') %>',
starHalf: '<%= asset_path('star-half.png') %>',
half: true,
readOnly: true,
score: <%= evaluation.rate%>,
});
</script> </td>
<% end %>
<!--/星評価-->
</tr>
以上です。
こんなイメージです。rails6の記事がなく、６以外の記事を参考に無理やり作った形ですので、正解は違うと思います。