[Rails 6] Star-shaped review using Raty.js

1.First of all

I googled to implement a star review

"The javascripts file does not exist in app / assets !! ", you lament there! !! !! !! !!

The reason why there is no javascripts in assets is

that is

Because the development environment is rails6!

The handling of JavaScript has changed since Ruby on Rails 6.0!

This article describes how to deploy Raty in Rails 6 (Webpacker standard) environment and implement the star rating function!

2 Completed image

Display the rating with a star mark!

Users can review by clicking the star button!

3 Development environment and assumptions

Development environment

rails 6.0.3.4

Premise

--The model is set as follows. User model and House model have a many-to-many relationship with the Comment model as an intermediate table

--Save the evaluation value in the star column (type: integer) of the comments table (table for posting reviews).

--Proceed on the assumption that the table and column have already been created.

--If you want to evaluate a column with half a star, you need to make it a float type because you will save values such as "0.5" and "1.5". This time, the evaluation is performed only with integers, so the star column is an integer type.

4 Introduction of jQuery

yarn add jquery

When managing with Webpacker, use the Node.js package. Caution When introducing jquery in other articles, use the gem" jquery-rails ", but do not use it in the rails6 environment like this time! !! The yarn add command will write the version to package.json as well as install the package.

Next, in the webpacker configuration file, describe how to add jQuery under management.

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
#Postscript
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    jquery: 'jquery/src/jquery',
  })
)
#So far
module.exports = environment

```
 Finally, call jQuery.


#### **``app/javascript/packs/application.js`**
```js


abridgement

window.$ = window.jQuery = require('jquery'); #Postscript

5 Introduction of jQuery Raty

5_1 Save the star image

https://github.com/wbotelhos/raty/tree/master/lib/images

From github here star-off.png star-on.png Copy and put it in a folder in assets / images. (Copy star-harf.png if you want to evaluate with half a star)

5_2 Raty introduced

Create raty.js in app / javascript / packs.

Next, copy the js code of the following URL to raty.js.

https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js

Finally add the following to application.js

app/javascript/packs/application.js

window.$ = window.jQuery = require('jquery'); 
require('packs/raty') #Postscript

6 Described in View

6_1 Enter rating by star

ruby:_form.html.erb

<%= form_for [@house, @comment] do |f| %>
  <div class="field">
  <div>
    <%= f.label :content%>
    <%= f.text_field :content %>
  </div>

  <div>
    <%= f.submit button_value %>
  </div>

    <div class="form-group row" id="star">
    <%= f.label :star,'Evaluation', class:'col-md-3 col-form-label' %>
    <%= f.hidden_field :star, id: :review_star %>
  </div>

  <!--Rating javascript-->
  <script>
  $('#star').raty({
    size     : 36,
    starOff:  '<%= asset_path('star-off.png') %>',
    starOn : '<%= asset_path('star-on.png') %>',
 
    scoreName: 'comment[star]',
    half: false,
  });
  </script>  

<% end %>

Explanation

--Comment Save the value in the star column of the model scoreName: 'comment[star]'

-Do not enter half of ⭐️! half: false,

6_2 Star rating display

Describe the following in the view that you want to evaluate by stars

<h1>Review list</h1>
<%= link_to 'Post a review', new_house_comment_path(house_id: params[:house_id]) %>
<% @comments.each do |comment|%>

  <div class=card>
    <p>Contents:<%= comment.content%></p>
    <p>Evaluation:<%= comment.star%>point</p>
    <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') %>',
        half      : false,
        readOnly: true,
        score: <%= comment.star %>,
      });
    </script>
  </div>
<% end %>

Finally

If it doesn't work, In the Raty implementation, the error text is not displayed on the terminal, so use the developer tools of your browser to check the error text! !! Beginners! How to use Chrome's verification function (developer tool)

reference

-I want to use Raty.js in the Webpacker development environment with Rails6. -Use Star Review Ratey with Rails -[Rails] Implement star rating for review (input, save, display)