구현하려는 기능

별평가로 입력, 등록할 수 있도록 한다

등록한 별 평점 보기

목차

열 설정

별 평가 준비

별 등급 입력 및 저장

별 등급 표시

1. 열 설정

평가를 저장할 열을 설정합니다.
컬럼형은 별반 평가를 할 수 있도록 float형을 사용합니다.

db/migrate/20XXXXXXXXXXXX_create_posts.rb

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

2. 별 평가 준비

별 이미지

htps : // 기주 b. 코 m / w 보테 l 호 s / 등 ty / t ree /
위 링크에서 별 이미지를 다운로드합니다.
assets/images에 폴더 안에 넣습니다.

JavaScript로 작동

htps : // 기주 b. 이 m/w 보더 l 호 s/등 ty/bぉb/마s r/ぃb/j 쿠에 ry. et al. js
위 링크에서 코드를 복사합니다.
assets/javascript/application.js에 붙여넣습니다.
jquery로 작성하기 위해 jquery의 도입도 필요합니다.

3. 별 평가 입력 및 저장

뷰 파일에 다음을 작성하여 별 평가를 입력할 수 있습니다.

app/views/posts/new.html.erb

<%= form_with model: @post, local: true do |f| %>
~略~
<div class="field" id="star">
  <%= f.label :evaluation, "星評価：" %>
  <%= 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]',   # evaluationカラムへの保存
      half: true,   # 星半分の入力
    });
  </script>
</div>
~略~
<% end %>

4. 별 평가 표시

세부사항을 표시할 뷰 파일에 다음을 작성하여 별 평가 결과를 표시할 수 있습니다.

app/views/posts/show.html.erb

<% @posts.each do |post| %>
~略~
<div class="relative-post-evaluation">
  <span>評価：</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,   # 星半分表示
      readOnly: true,   # 読み取り専用
      score: <%= post.evaluation %>,   # 星評価の表示
    });
  </script>
  <%= post.evaluation %>
</div>
~略~
<% end %>

참고 링크

htps : // 이 m / 유키_0920 / ms / 966d9 2bdb621f805d
htps : // 코 m / 온 / ms / 1에 40724c3384507 세 c13
htps : // 코 m / 부시 토라 2 / ms / 5b59d1 오 9 90c1b016b4