[Rails] Create an evaluation function using raty.js

It is a method to implement the evaluation function with a star image in the rails application using raty.js. You need jquery.

 2021-01-18 21.35.22.png

environment

$ rails -v
Rails 5.2.4.4

Introduced jquery

Gemfile


gem 'jquery-rails'
$ bundle install

app/assets/javascripts/application.js


//= require jquery

Create jquery.raty.js

$ touch app/assets/javascripts/jquery.raty.js

Copy and paste the description in https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js to the created file. Then require in application.js (write after jquery)

app/assets/javascripts/application.js


//= require jquery.raty.js

Place the image of the star

Download star-on.png, star-off.png, star-half.png from https://github.com/wbotelhos/raty/tree/master/lib/images and app Placed under/assets/images.

Create data with columns to store evaluations

$ rails g migration addEvaluationToMovie evaluation:float

db/migrate/202101011111.rb


class AddEvaluationToMovie < ActiveRecord::Migration[5.2]
  def change
    add_column :movies, :evaluation, :float
  end
end
$ rails db:migrate

Create evaluation posting screen

This time, as an example, let's make it possible to post the evaluation together on the screen for posting the title of your favorite movie.

erb:app/views/movies/new.html.erb


<h2>Post your favorite movie</h2>
<%= form_with(model: movie, local: true) do |form| %>
  <div>
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>
  <div id="evaluate_stars">
    <label>Evaluation</label>
  </div>
  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>
<script>
  $('#evaluate_stars').raty({
    starOn: "<%= asset_path('star-on.png') %>",
    starOff: "<%= asset_path('star-off.png') %>",
    starHalf: "<%= asset_path('star-half.png') %>",
    scoreName: 'movie[evaluation]' //Describe the model name and column name to be registered
  });
</script>

app/controllers/movies_controller.rb


def movie_params
  params.require(:movie).permit(:title, :evaluation) #Added evaluation
end

View posted ratings

Here, as an example, the evaluation is displayed on the index page.

erb:app/views/movies/index.html.erb


<h1>Movie list</h1>
<table>
  <thead>
    <tr>
      <th>title</th>
      <th>Evaluation</th>
    </tr>
  </thead>
  <tbody>
    <% @movies.each do |movie| %>
      <tr>
        <td><%= movie.title %></td>
        <td class="movie-evaluation" data-score="<%= movie.evaluation %>"></td>
      </tr>
    <% end %>
  </tbody>
</table>
<script>
  $('.movie-evaluation').raty({
    readOnly: true,
    score: function() {
      return $(this).attr('data-score');
    },
    path: '/assets/'
  });
</script>

reference

Recommended Posts

[Rails] Create an evaluation function using raty.js
[Rails] Create an application
Create authentication function in Rails application using devise
Create an EC site with Rails 5 ⑩ ~ Create an order function ~
Search function using [rails] ransack
[Rails] Test of star evaluation function using Raty [Rspec]
Create an EC site with Rails 5 ⑨ ~ Create a cart function ~
Ajax bookmark function using Rails
[Rails 6] Star-shaped review using Raty.js
[Rails] Create an echo bot using the LINE Messaging API.
[Rails] Create an email sending function with ActionMailer (complete version)
User evaluation using the like function
[Rails] Tag management function (using acts-as-taggable-on)
Create pagination function with Rails Kaminari
Create a filtering function using acts-as-taggable-on
[Implementation procedure] Create a user authentication function using sorcery in Rails
Rails Tutorial Extension: I tried to create an RSS feed function
[Rails withdrawal] Create a simple withdrawal function with rails
Create an or search function with Ransack.
Multiple image upload function using Rails Carrierwave
Create a login function using Swift's Optional
Nuxt.js × Create an application in Rails API mode
[Rails 6] Implementation of inquiry function using Action Mailer
[Rails] How to create a graph using lazy_high_charts
[Rails] Implementation of image enlargement function using lightbox2
Create an EC site using stripe! (Account creation)
[Rails 6] Ranking function
Implement star rating function using Raty in Rails6
[Rails] Category function
[Rails] I made a draft function using enum
Rails follow function
Create an app by specifying the Rails version
Rails6.0 ~ How to create an eco-friendly development environment
[Note] Summary of rails login function using devise ①
Create an EC site with Rails5 ⑤ ~ Customer model ~
[Rails] Notification function
Create an EC site with Rails5 ⑦ ~ Address, Genre model ~
Create an EC site with Rails5 ④ ~ Header and footer ~
[Rails] Implementation of multi-layer category function using ancestry "Preparation"
Create an EC site with Rails5 ⑥ ~ seed data input ~
[Rails] Implementation of multi-layer category function using ancestry "seed"
[Rails] Create sitemap using sitemap_generator and deploy to GAE
Rails learning How to implement search function using ActiveModel
Create a login authentication screen using the session function
Try to implement tagging function using rails and js
[Rails] Implement search function
[Rails] Implemented hashtag function
[rails] tag ranking function
Rails search function implementation
[Rails] Implementation of multi-layer category function using ancestry "Editing form"
Add an icon to the header link using Rails fontawesome
Ruby on Rails Email automatic sending function setting (using gmail)
[Rails] Implementation of multi-layer category function using ancestry "Creation form"
[Rails DM] Let's create a notification function when DM is sent!
[Rails] Implementation of tagging function using intermediate table (without Gem)
[Rails] Implement event end function (logical deletion) using paranoia (gem)
[Rails] I tried to implement "Like function" using rails and js
[Rails] Implement community membership application / approval function using many-to-many associations