How to make laravel rating system

How to make laravel rating system

Hello dear followers,

Updated 2 September 2019 by tjd studio, thanks for pointing typo issues and missed parts.

Today we will have exciting tutorial and I know it's the issue of many of you as it was mine for time being.

We are going to make our Laravel application posts ability of receiving rates. For start we are going to use laravel rateable package.

Step 1)

Install  laravel rateable package. (follow instruction in Github)

Step 2)

Add function to your posts controller we will call it poststar 

public function postStar (Request $request, Post $post) {
      $rating = new Rating;
      $rating->user_id = Auth::id();
      $rating->rating = $request->input('star');
      $post->ratings()->save($rating);
      return redirect()->back();
}
PHP

Lets take a look at the code above:

Here is sample code of package

$rating = new willvincentRateableRating;
$rating->rating = 5;
$rating->user_id = Auth::id();
$post->ratings()->save($rating);
PHP

We changed first line to 

$rating = new Rating;
PHP

Because we added our rating model top of our controller

use AppRating;
PHP

We also changed $rating->rating = 5; to $rating->rating = $request->input('star'); to be able to get dynamic rates of what user will choose instead of static 5 star rate.

Now lets make our Rating model, go to App folder and create new file name it Rating.php and add following code in it (if it doesn't exist)

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Rating extends Model
{

    protected $table = 'ratings';

    public $fillable = ['rating', 'rateable_id', 'user_id'];

    /**
     * @return mixed
     */
    public function rateable()
    {
        return $this->morphTo();
    }

    public function user()
    {
        return $this->belongsTo(User::class);
    }


    public function post()
    {
        return $this->belongsTo(Post::class);
    }

}
PHP

In your post model add this:

public function rating()
{
  return $this->hasMany(Rating::class);
}
PHP

Now lets add route for our poststar function

Route::post('/rating/{post}', '[email protected]')->name('postStar');
PHP

Now everything in back-end is ready let's make front-end for our rating system.

 

Go to your posts show blade file and add this form everywhere you like to show rating option:

<form class="form-horizontal poststars" action="{{route('productStar', $product->id)}}" id="addStar" method="POST">
  {{ csrf_field() }}
        <div class="form-group required">
          <div class="col-sm-12">
            <input class="star star-5" value="5" id="star-5" type="radio" name="star"/>
            <label class="star star-5" for="star-5"></label>
            <input class="star star-4" value="4" id="star-4" type="radio" name="star"/>
            <label class="star star-4" for="star-4"></label>
            <input class="star star-3" value="3" id="star-3" type="radio" name="star"/>
            <label class="star star-3" for="star-3"></label>
            <input class="star star-2" value="2" id="star-2" type="radio" name="star"/>
            <label class="star star-2" for="star-2"></label>
            <input class="star star-1" value="1" id="star-1" type="radio" name="star"/>
            <label class="star star-1" for="star-1"></label>
           </div>
        </div>
</form>
HTML

Here is css for our stars to show it nicely:

/** rating **/
div.stars {
  display: inline-block;
}

input.star { display: none; }

label.star {
  float: right;
  padding: 10px;
  font-size: 20px;
  color: #444;
  transition: all .2s;
}

input.star:checked ~ label.star:before {
  content: 'f005';
  color: #e74c3c;
  transition: all .25s;
}

input.star-5:checked ~ label.star:before {
  color: #e74c3c;
  text-shadow: 0 0 5px #7f8c8d;
}

input.star-1:checked ~ label.star:before { color: #F62; }

label.star:hover { transform: rotate(-15deg) scale(1.3); }

label.star:before {
  content: 'f006';
  font-family: FontAwesome;
}


.horline > li:not(:last-child):after {
    content: " |";
}
.horline > li {
  font-weight: bold;
  color: #ff7e1a;

}
/** end rating **/
CSS

Note: you will need font-awesome in your project to show stars.

Now the last but not the least part adding Jquery.

Bottom of your page if you use @yield in your layout or bottom of your layout if you don't use any yield for scripts add this code:

<script>
    $('#addStar').change('.star', function(e) {
    $(this).submit();
    });
</script>
JavaScript

Now go and test it out.

{{$post->userSumRating}} or any other option you prefer (list provided in package documentation).

- Last updated 1 year ago

Be the first to leave a comment.

You must login to leave a comment