rails6で星評価機能を作る。

Jqueryを入れる

これを参考にjqueryを導入してください。

rails星評価機能を実装してみる

imageを保存

https://github.com/wbotelhos/raty/tree/master/lib/images これを　app/assets/imagesに保存してください。

javascriptコードを保存

rails6では app/assets/javascripts　というフォルダがないので、

app/assets　に　javascriptsというフォルダを作ってください。

そして、 app/assets/config/manifest.jsに

   //= link_directory ../javascripts .js

を記述してください。

そして、作ったら、app/layouts/application.html.erbに

     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

を記述してください。

できたら、先ほど作った　app/assets/javascripts　フォルダに

application.jsというファイルを　追加してください。

そして、application.jsに

↑ のコードをコピーして、張り付けてください。

rateカラムを追加

rateはintegerにしてください。

rails g migration AddRateToテーブル名 rate:integer

今回は comments に　rateカラムを追加します。

(例)

rails g migration AddRateToComments rate:integer

⇃
migrateします

rails db:migrate

そしたら星評価機能を付けたいviewに

⇃　show.html.erb

<h1><%= @post.title %></h1>
<p><%= @post.body %></p>

<%= form_with model: @comment, local: true , url: comments_path do |f| %>
    <%= f.text_area :content %><br>
    <%= f.hidden_field :post_id, value: @post.id %>
    <div class="field" id="star">
		<%= f.label :rate,  "星評価 (※必須)" ,id: "e"%>
		<%= f.hidden_field :rate, id: :review_star %>
	</div>
    <script>
        $('#star').raty({
            size     : 36,
            starOff:  '<%= asset_path('star-off.png') %>',
            starOn : '<%= asset_path('star-on.png') %>',
            starHalf: '<%= asset_path('star-half.png') %>',
            scoreName: 'comment[rate]',
        });
    </script>
    <%= f.submit %>
<% end %>

<% @comments.each do |comment| %>
    <p><%= comment.content %></p>
    <h4 class="mb-3">評価：<%= comment.rate %>点 </h4>
    <div id="star-rate-<%= comment.id %>"></div>
    <script>
          $('#star-rate-<%= comment.id %>').raty({
            size: 36,
            starOff:  '<%= asset_path('star-off.png') %>',
            starOn : '<%= asset_path('star-on.png') %>',
            starHalf: '<%= asset_path('star-half.png') %>',
            half: true,
            score: <%= comment.rate %>,
        });
    </script> 
<% end %>

のように、viewに記述してみてください。
説明不足ですみません。。。。

そして、controllerに

  params.require(:comment).permit(:rate)

これを追加してください。

これでできるはずです！

参考

https://qiita.com/masahisa/items/eaacb0c3b82f4a11fc13

完成 最後に

やっぱり、rails5とrails6だと　いろいろ変わっちゃってるので注意が必要ですね。

皆さんも気を付けてください。

なにか　間違えがあったらコメントください。　お願いいたします。