Hello dear followers,

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');
      return redirect()->back();

Lets take a look at the code above:

Here is sample code of package

$rating = new willvincent\Rateable\Rating;
$rating->rating = 5;
$rating->user_id = \Auth::id();

We changed first line to 

$rating = new Rating;

Because we added our rating model top of our controller

use App\Rating;

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)


namespace App;

use Illuminate\Database\Eloquent\Model;

class Rating extends Model

     * The attributes that are mass assignable.
     * @var array
    public $fillable = ['rating', 'rateable_id', 'user_id'];

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

     * Rating belongs to a user.
     * @return User
    public function user()
        return $this->belongsToMany(User::class);

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


mIn your post model add this:

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

Now lets add route for our poststar function

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

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:

<div class="stars mt-20 mb-20">
   <form class="poststars" action="{{route('postStar', $post->id)}}" id="addStar" method="POST">
     {{ csrf_field() }}
     <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>

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 **/

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 type="text/javascript">
  $('#addStar').change('.star', function(e) {

Now go and test it out.

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



Share your comments with us.

Share this article: