[Rails] How to implement star rating

Features you want to implement

--Allows you to enter and register by star rating --Display registered star rating

table of contents

  1. Column settings
  2. Preparation for star rating
  3. Enter and save star rating
  4. Display of star rating

1. Column settings

Set the column to save the evaluation. The column type uses the float type to enable half-star evaluation.

db/migrate/20XXXXXXXXXXXX_create_posts.rb


class CreatePosts < ActiveRecord::Migration[6.0]
  def change
    create_table :posts do |t|
     ~Abbreviation~
      t.float :evaluation, null: false
     ~Abbreviation~
    end
  end
end

2. Preparation for star rating

Image of stars

https://github.com/wbotelhos/raty/tree/master/lib/images Download the star image from the link above. Place it in a folder in assets / images.

Works with JavaScript

https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js Copy the code from the link above. Paste it into assets / javascript / application.js. ** Since it is written in jquery, it is also necessary to install jquery. ** **

3. Enter and save star rating

You can enter the star rating by writing the following in the view file.

ruby:app/views/posts/new.html.erb


<%= form_with model: @post, local: true do |f| %>
~Abbreviation~
<div class="field" id="star">
  <%= f.label :evaluation, "Star rating:" %>
  <%= f.hidden_field :evaluation, id: :review_star %>
  <script>
    $('#star').raty({
      size     : 36,
      starOff:  '<%= asset_path('star-off.png') %>',
      starOn : '<%= asset_path('star-on.png') %>',
      starHalf: '<%= asset_path('star-half.png') %>',
      scoreName: 'post[evaluation]',   #Save to evaluation column
      half: true,   #Half star input
    });
  </script>
</div>
~Abbreviation~
<% end %>

4. Display of star rating

You can display the result of star evaluation by writing the following in the view file that displays the details.

ruby:app/views/posts/show.html.erb


<% @posts.each do |post| %>
~Abbreviation~
<div class="relative-post-evaluation">
  <span>Evaluation:</span>
  <span id="star-rate-<%= post.id %>"></span>
  <script>
    $('#star-rate-<%= post.id %>').raty({
      size: 36,
      starOff: "<%= asset_path('star-off.png') %>",
      starOn: "<%= asset_path('star-on.png') %>",
      starHalf: "<%= asset_path('star-half.png') %>",
      half: true,   #Half star display
      readOnly: true,   #Read-only
      score: <%= post.evaluation %>,   #Display of star rating
    });
  </script>
  <%= post.evaluation %>
</div>
~Abbreviation~
<% end %>

Reference link

https://qiita.com/yuki_0920/items/a966d9fa2bdb621f805d https://qiita.com/kitaokeita/items/1e40724c3384507cec13 https://qiita.com/busitora2/items/5b59d1ea9e90c1b016b4

Recommended Posts

[Rails] How to implement star rating
[Rails] How to implement scraping
How to implement search functionality in Rails
How to implement ranking functionality in Rails
[Rails] Implement star rating (input, save, display)
How to implement image posting using rails
How to uninstall Rails
Implement star rating function using Raty in Rails6
[Rails] How to implement unit tests for models
How to implement a like feature in Rails
[Rails] How to easily implement numbers with pull-down
[rails] How to post images
[Rails] How to use enum
[Rails] How to install devise
[Rails] How to use enum
How to read rails routes
How to use rails join
How to terminate rails server
How to write Rails validation
How to write Rails seed
[Rails] How to use validation
[Rails] How to disable turbolinks
[Rails] How to use authenticate_user!
[Rails] How to use "kaminari"
[Rails] How to make seed
How to write Rails routing
[Rails] How to install simple_calendar
[Java] How to implement multithreading
[Rails] How to install reCAPTCHA
[Rails] How to use Scope
How to implement login request processing (Rails / for beginners)
How to implement guest login in 5 minutes in rails portfolio
How to implement a like feature in Ajax in Rails
Rails learning How to implement search function using ActiveModel
[Rails] How to use gem "devise"
How to deploy jQuery on Rails
[Rails] How to install Font Awesome
[Rails] How to use devise (Note)
[Rails] How to use flash messages
[rails] How to display db information
[Rails] How to write in Japanese
How to use Ruby on Rails
How to deploy Bootstrap on Rails
[Rails] How to speed up docker-compose
[Rails] How to add new pages
Rails on Tiles (how to write)
[Rails] How to write exception handling?
[Rails] How to install ImageMagick (RMajick)
[Rails] How to install Font Awesome
[Rails] How to use Active Storage
How to introduce jQuery in Rails 6
How to return Rails API mode to Rails
How to get along with Rails
[Introduction to Rails] How to use render
How to install Swiper in Rails
How to implement date calculation in Java
How to implement Kalman filter in Java
How to change app name in rails
How to use custom helpers in rails
[Ruby on Rails] How to use CarrierWave
[Rails] How to convert from erb to haml