Implement the star five function using the for statement

1. Prepare a column

Here's how to implement a 5-star rating on your store and meal posts! !! First, prepare a column to store the number of stars. Create an integer column named star.

rails g migration AddStarToPosts star:integer

The migration file is below.

class AddStarToPosts < ActiveRecord::Migration[5.1]
  def change
    add_column :posts, :star, :integer
  end
end

I will migrate.

rails db:migrate

Check the schema of db and put it in the posts table

schema.rb



t.integer "star"

If it is written, it's OK!

2. Edit new page

We will be able to send the number "2" for 2 stars and "5" for 5 stars. Anything is fine as long as you can send a numerical value, but here we will implement it with radio.

html:posts/new.html.erb



<%= form_for @posts do |f| %>
  <div class="field">
  <p>
    <%= f.label :name %>
    <%= f.text_field :name %>
   
  </p>
<-!Added part->
  <p>
5 star rating:
    <label><%= f.radio_button :star, 1 %> 1</label>
    <label><%= f.radio_button :star, 2 %> 2</label>
    <label><%= f.radio_button :star, 3 %> 3</label>
    <label><%= f.radio_button :star, 4 %> 4</label>
    <label><%= f.radio_button :star, 5 %> 5</label>
   </p>
<-!So far->
  </div>
  <%= f.submit "POST IT!" %>
<% end %>

3. Fix the controller

If you are using an action to receive a parameter in the create action, Let's add a star column

posts_controller.rb



private
  def post_params
    params.require(:posts).permit(:name,:star)
  end

4. Write stars on the Index page

Finally, the for statement will display the stars! !!

html:posts/index.heml.erb



<% @posts.each do |t| %>
   <div class="index-name">
        <%= t.name %>
   </div>
   <-!Additional points->
   <div class=“star-bar”>
   <%for i in 1..t.star do%>
        ★
   <%end%>
  </div>
   <-!Additional points->
<%end%>       

This completes the five-star function! !!

Recommended Posts

Implement the star five function using the for statement
Implement star rating function using Raty in Rails6
Implement the product category function using ancestry ① (Preparation)
How to implement the breadcrumb function using gretel
[For beginners] How to implement the delete function
Implement category function using ancestory
User evaluation using the like function
[Swift 5] Implement UI for review function
[Swift] How to implement the Twitter login function using Firebase UI ①
How to get the contents of Map using for statement Memorandum
[Swift] How to implement the Twitter login function using Firebase UI ②
must not return in the for statement
[Swift] How to implement the countdown function
[Rails] Set validation for the search function using Rakuten API (from the implementation of Rakuten API)
Implement user edit / update function without using devise
Compare the speed of the for statement and the extended for statement.
Implement partial match search function without using Ransuck
[swift5] How to implement the Twitter share function
Tips for using the Spotify app on Ubuntu
Flow to implement image posting function using ActiveStorage
[Swift] How to implement the fade-in / out function
Java for statement
[Rails] Test of star evaluation function using Raty [Rspec]
Let's introduce the credit card function using payjp (preparation)
I tried using the Migration Toolkit for Application Binaries
I tried using an extended for statement in Java
Rails learning How to implement search function using ActiveModel
Command to try using Docker for the time being
Create a login authentication screen using the session function
Try to implement tagging function using rails and js