Implement star rating function using Raty in Rails6

Implemented star rating function using raty on rails6.

First, put Jquery https://qiita.com/masahisa/items/eaacb0c3b82f4a11fc13

Please introduce jquery referring to this. Become rails6 It is easy to forget the description of $ yarn add jquery, so be careful.

Save star image from github https://github.com/wbotelhos/raty/tree/master/lib/images Save this in app / assets / images.

Also copy javascript code from github Since there is no folder called app / assets / javascripts in rails6, Create a folder called javascripts in app / assets. Create an aplication.js file under it, and paste all the code copied from github there.

in app / assets / config / manifest.js

//= link_directory ../javascripts .js

Add.

in app / layouts / application.html.erb

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

Add.

This is the environment setting. Please note that the method is very different except for rails6. (I'm not sure if this method is correct even in 6, but I was able to read it with this.)

Implementation of the following functions.

Added rate column

Float type is recommended. Because even half a star can be reflected. In my case, I created it in the evaluations table. Evaluate the posted articles with stars.

rails g migration AddRateToEvaluations rate:float 　　　　　　　　　　↓ rails db:migrate

In the form of the view you want to add a star rating function

  <div class="form-group row" id="star">

<% = f.label: rate,'Comprehensive evaluation', class:'col-md-3 col-form- label' %> <%= f.hidden_field :rate, id: :review_star %>

<!-Evaluation javascript->

Describe. The point is to define review_star for id in hidden_field. Load the star image saved in the Js part.

Don't forget to permit the rate parameter in your controller. You should now be ready to type with a star.

For the time being, I will also include the code that displays the entered data. In my case, there is a comment column in the evaluations table, and the post model and user model are associated with each other, so please use it as a reference only.

   <tbody>
     <% @evaluations.each do |evaluation| %>
    <tr>
     <td><%= evaluation.comment %></td>
     <td>
     <a href="/users/<%= evaluation.user.id %>">
    <%= evaluation.user.nickname %>
   </a></td>

<!-Star rating->

      <% end %>

<!-/ Star rating->

  </tr>

that's all.

https://gyazo.com/4e0cd5b4b5dc11d134bc65e6a7b7db74

This is the image. There is no article on rails6, and I made it by force with reference to articles other than 6, so I think the correct answer is different.

Recommended Posts

Implement star rating function using Raty in Rails6

Implement application function in Rails

Implement follow function in Rails

[Rails] Test of star evaluation function using Raty [Rspec]

Implement simple login function in Rails

[Rails] How to implement star rating

Implement CSV download function in Rails

[Rails] Implement star rating (input, save, display)

Implement button transitions using link_to in Rails

Implement star evaluation function in Rails 6 (Webpacker is installed as standard)

Create authentication function in Rails application using devise