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

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
Implement share button in Rails 6 without using Gem
[Rails] Implement search function
Implement markdown in Rails
How to implement image posting function using Active Storage in Ruby on Rails
Implement post search function in Rails application (where method)
[Rails] Implement credit card registration / deletion function in PAY.JP
Implement user follow function in Rails (I use Ajax) ②
Implement user follow function in Rails (I use Ajax) ①
Rails learning How to implement search function using ActiveModel
Try to implement tagging function using rails and js
[Rails] Implement User search function
Japaneseize using i18n with Rails
Implement LTI authentication in Rails
Implement category function using ancestory
Implement import process in Rails
Ajax bookmark function using Rails
[Rails] Implement image posting function
Implement login function in Rails simply by name and password (1)
Implement login function in Rails simply by name and password (2)
[Rails] Implement event end function (logical deletion) using paranoia (gem)
Implement login function simply with name and password in Rails (3)
[Rails] I tried to implement "Like function" using rails and js
Implement user registration function and corporate registration function separately in Rails devise
[Rails] Implement community membership application / approval function using many-to-many associations
Add a search function in Rails.
Implement tagging function in form object
Implement PHP implode function in Java
Implement a contact form in Rails
[Rails] Implementation of new registration function in wizard format using devise
[Rails] A simple way to implement a self-introduction function in your profile
I tried to implement Ajax processing of like function in Rails
[Implementation procedure] Create a user authentication function using sorcery in Rails
[Rails] Create an evaluation function using raty.js
How to implement search functionality in Rails
[Rails] Function restrictions in devise (login / logout)
How to implement a slideshow using slick in Rails (one by one & multiple by one)
Implemented follow function in Rails (Ajax communication)
How to implement ranking functionality in Rails
How to implement image posting using rails
Multiple image upload function using Rails Carrierwave
[Rails] Implementation of search function using gem's ransack
[Rails 6] Implementation of inquiry function using Action Mailer
Implement user edit / update function without using devise
[Rails] Implementation of image enlargement function using lightbox2
[Rails] Run LINEBot in local environment using ngrok
Implement partial match search function without using Ransuck
Implement the product category function using ancestry ① (Preparation)
How to implement the breadcrumb function using gretel
[Rails] Implementation of retweet function in SNS application
Flow to implement image posting function using ActiveStorage