PHP Laravel 7.x and 6.x Rating System Example from Scratch

Hi Friends,

You add star rating system in your laravel 5 application by using Laravel Rateable composer package with bootstrap-star-rating jquery plugin for review. Here in this article i will explain how to implement star rating system in your php laravel framework project step by step tutorial.

We always would like to see our website or product popularity. If you see in there are many website, use star rating for their product and see how it is popularity. Almost e commerce website take review using star rating.

Here i will let you know how to build star rating system in your laravel 5.5 app. In this example i created "posts" table and install laravel ratable composer package. So you have to simple follow bellow few step and you will get preview like as bellow screen shot.

Layout 1:

Layout 2:

Step 1 : Install Laravel 5.5 Application

For our rating system, simple example, we need to get fresh Laravel 5.5 version application using bellow command because we are going from scratch, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Install Composer Package

next, we require to install Laravel Rateable composer package for use rateable function. So simply run bellow composer command for install package.

composer require laravel-rateable

After that you have to add into providers array of configuration file. So let's add following way:

config/app.php

<?php
return [
    ....
    'providers' => [
    	....
        willvincent\Rateable\RateableServiceProvider::class,
    ],
    ....

After the package is correctly installed package, we need to generate the migration by run following command.

php artisan rateable:migration

Next require to run new generated migration by using bellow command:

php artisan migrate

Step 3: Generate Default Auth

In third step, we should create default authentication by using laravel auth command. laravel make:auth command help to create quick authentication module. Now let's create auth by using bellow terminal command:

php artisan make:auth

Step 4: Create Post Table and Model

Here next step, we should create migration for posts table using Laravel 5.5 php artisan command, so first fire bellow command:

php artisan make:migration create_posts_table

After above command we will find one file in following path database/migrations and you have to put bellow code in your migration file for create posts table.

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Next, you need to create model for "posts" table so just run bellow command and create new model:

php artisan make:model Post

So after run bellow command you will find app/Post.php and put bellow content in Post.php file:

app/Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use willvincent\Rateable\Rateable;

class Post extends Model
{
    use Rateable;
}

Step 5: Create New Routes

Here, you will create new routes for posts list, post view and post method for save star rating. so open your routes/web.php file and add following route.

routes/web.php

Route::get('posts', 'HomeController@posts')->name('posts');
Route::post('posts', 'HomeController@postPost')->name('posts.post');
Route::get('posts/{id}', 'HomeController@show')->name('posts.show');

Step 6: Create Controller Method

In this step, we will create three method posts(), postPost() and show() in HomeController, So add like as bellow added.

app/Http/Controllers/HomeController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;

class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('home');
    }

    public function posts()
    {
        $posts = Post::all();
        return view('posts',compact('posts'));
    }

    public function show($id)
    {
        $post = Post::find($id);
        return view('postsShow',compact('post'));
    }

    public function postPost(Request $request)
    {
        request()->validate(['rate' => 'required']);
        $post = Post::find($request->id);

        $rating = new \willvincent\Rateable\Rating;
        $rating->rating = $request->rate;
        $rating->user_id = auth()->user()->id;

        $post->ratings()->save($rating);

        return redirect()->route("posts");
    }
}

Step 7: Create Blade files

Next, we will create two blade file, one for listing posts with average rating and another make view page for rating. So let's create both file:

resources/views/posts.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">Posts</div>

                <div class="panel-body">

                    <table class="table table-bordered">
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th width="400px">Star</th>
                            <th width="100px">View</th>
                        </tr>
                        @if($posts->count())
                            @foreach($posts as $post)
                            <tr>
                                <td>{{ $post->id }}</td>
                                <td>{{ $post->name }}</td>
                                <td>
                                    <input id="input-1" name="input-1" class="rating rating-loading" data-min="0" data-max="5" data-step="0.1" value="{{ $post->averageRating }}" data-size="xs" disabled="">
                                </td>
                                <td>
                                    <a href="{{ route('posts.show',$post->id) }}" class="btn btn-primary btn-sm">View</a>
                                </td>
                            </tr>
                            @endforeach
                        @endif
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $("#input-id").rating();
</script>
@endsection

resources/views/postsShow.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">

                <div class="panel-body">
                    <form action="{{ route('posts.post') }}" method="POST">
                        {{ csrf_field() }}
                    <div class="card">
                        <div class="container-fliud">
                            <div class="wrapper row">
                                <div class="preview col-md-6">
                                    
                                    <div class="preview-pic tab-content">
                                      <div class="tab-pane active" id="pic-1"><img src="https://dummyimage.com/500x450/000/fff" /></div>
                                    </div>

                                </div>
                                <div class="details col-md-6">
                                    <h3 class="product-title">Laravel 5.5 Ratting System</h3>
                                    <div class="rating">
                                        <input id="input-1" name="rate" class="rating rating-loading" data-min="0" data-max="5" data-step="1" value="{{ $post->userAverageRating }}" data-size="xs">
                                        <input type="hidden" name="id" required="" value="{{ $post->id }}">
                                        <span class="review-no">422 reviews</span>
                                        <br/>
                                        <button class="btn btn-success">Submit Review</button>
                                    </div>
                                    <p class="product-description">Suspendisse quos? Tempus cras iure temporibus? Eu laudantium cubilia sem sem! Repudiandae et! Massa senectus enim minim sociosqu delectus posuere.</p>
                                    <h4 class="price">current price: <span>$180</span></h4>
                                    <p class="vote"><strong>91%</strong> of buyers enjoyed this product! <strong>(87 votes)</strong></p>
                                    <h5 class="sizes">sizes:
                                        <span class="size" data-toggle="tooltip" title="small">s</span>
                                        <span class="size" data-toggle="tooltip" title="medium">m</span>
                                        <span class="size" data-toggle="tooltip" title="large">l</span>
                                        <span class="size" data-toggle="tooltip" title="xtra large">xl</span>
                                    </h5>
                                    <h5 class="colors">colors:
                                        <span class="color orange not-available" data-toggle="tooltip" title="Not In store"></span>
                                        <span class="color green"></span>
                                        <span class="color blue"></span>
                                    </h5>
                                    <div class="action">
                                        <button class="add-to-cart btn btn-default" type="button">add to cart</button>
                                        <button class="like btn btn-default" type="button"><span class="fa fa-heart"></span></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $("#input-id").rating();
</script>
@endsection

Step 8: Create CSS File

Here i added css file for view page layout, it seems nice layout for post details page. So you have to create css and add this way in layout file.

Add CSS File In app file : resources/views/layouts/app.blade.php

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.2/css/star-rating.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.2/js/star-rating.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link href="{{ asset('css/preview.css') }}" rel="stylesheet">

public/css/preview.css

img {
  max-width: 100%; }
.preview {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media screen and (max-width: 996px) {
    .preview {
      margin-bottom: 20px; } }
.preview-pic {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }
.preview-thumbnail.nav-tabs {
  border: none;
  margin-top: 15px; }
  .preview-thumbnail.nav-tabs li {
    width: 18%;
    margin-right: 2.5%; }
    .preview-thumbnail.nav-tabs li img {
      max-width: 100%;
      display: block; }
    .preview-thumbnail.nav-tabs li a {
      padding: 0;
      margin: 0; }
    .preview-thumbnail.nav-tabs li:last-of-type {
      margin-right: 0; }
.tab-content {
  overflow: hidden; }
  .tab-content img {
    width: 100%;
    -webkit-animation-name: opacity;
            animation-name: opacity;
    -webkit-animation-duration: .3s;
            animation-duration: .3s; }
.card {
  background: #eee;
  padding: 3em;
  line-height: 1.5em; }
@media screen and (min-width: 997px) {
  .wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; } }
.details {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; }
.colors {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }
.product-title, .price, .sizes, .colors {
  text-transform: UPPERCASE;
  font-weight: bold; }
.checked, .price span {
  color: #ff9f1a; }
.product-title, .rating, .product-description, .price, .vote, .sizes {
  margin-bottom: 15px; }
.product-title {
  margin-top: 0; }
.size {
  margin-right: 10px; }
  .size:first-of-type {
    margin-left: 40px; }
.color {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  height: 2em;
  width: 2em;
  border-radius: 2px; }
  .color:first-of-type {
    margin-left: 20px; }
.add-to-cart, .like {
  background: #ff9f1a !important;
  padding: 1.2em 1.5em !important;
  border: none;
  text-transform: UPPERCASE;
  font-weight: bold;
  color: #fff !important;
  -webkit-transition: background .3s ease;
          transition: background .3s ease; }
  .add-to-cart:hover, .like:hover {
    background: #b36800;
    color: #fff; }
.not-available {
  text-align: center;
  line-height: 2em; }
  .not-available:before {
    font-family: fontawesome;
    content: "\f00d";
    color: #fff; }
.orange {
  background: #ff9f1a; }
.green {
  background: #85ad00; }
.blue {
  background: #0076ad; }
.tooltip-inner {
  padding: 1.3em; }

Now we are ready to run our example.

Before start to example make sure you have inserted some dummy records in posts table.

You can get more details about Laravel Rateable from here : Laravel Rateable Package.

I hope you found best.