Laravel 5.6 Like Dislike rating system with jQuery, Ajax and PHP

Laravel 5.6 Like Dislike rating system with jQuery, Ajax and PHP

Today, We want to share with you Laravel 5.6 Like Dislike rating system with jQuery, Ajax and PHP.
In this post we will show you How To Toggle Like and Dislike using Laravel 5.6, hear for Like Dislike rating system with jQuery, Ajax and Laravel 5.6 we will give you demo and example for implement.
In this post, we will learn about Laravel 5.6 Like and Unlike system using PHP and MySQL database with an example.

Phase 1: Laravel 5.6 Installation

//Laravel 5 Like Dislike system with PHP and MySQL,

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

Phase 2: Install laravel-follow Package

//How To Toggle Like and Dislike using Laravel 5.6,
composer require overtrue/laravel-follow

config/app.php

'providers' => [

	....//some providers

	Overtrue\LaravelFollow\FollowServiceProvider::class,

],
//and run -> php artisan migrate

Phase 3: Make Authentication

php artisan make:auth

Phase 4: Make Dummy Articles

php artisan make:migration create_articles_table

database/migrations/CreateArticlesTable.php

increments('id');
            $table->string('title');
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::dropIfExists('articles');
    }
}

after that just migrate it by using cmt run following command:

php artisan migrate

Now this we should to make model for articles simple Mysql table by following this path.

App/Article.php

<?php
//Like Dislike rating system with jQuery, Ajax and Laravel 5.6
namespace App;
use Overtrue\LaravelFollow\Traits\CanBeLiked;
use Illuminate\Database\Eloquent\Model;
class Article extends Model
{
	use CanBeLiked;
    protected $fillable = ['title'];
}

php artisan make:seeder CreateDummyArticle

database/seeds/CreateDummyArticle.php

 $value) {
        	Article::create(['title'=>$value]);
        }
    }
}

Execute seeder using this cmd to run command:

php artisan db:seed --class=CreateDummyArticle

Phase 5: Update User Model

App/User.php

<?php
namespace App;

use Overtrue\LaravelFollow\Traits\CanLike;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
{
    use CanLike, Notifiable ;

    protected $fillable = [
        'name', 'email', 'password',
    ];
    protected $hidden = [
        'password', 'remember_token',
    ];
}

Phase 6: Create Routes

routes/web.php

Route::get('/', function () {
    return view('welcome');
});
Auth::routes();

Route::get('/home', '[email protected]')->name('home');

Route::get('articles', '[email protected]')->name('articles');

Route::article('ajaxRequest', '[email protected]')->name('ajaxRequest');

Phase 7: Add Controller Method

app/Http/ArticleController.php

middleware('auth');
    }

    public function index()
    {
        return view('home');
    }

    public function articles()
    {
        $articles = Article::get();
        return view('articles', compact('articles'));
    }

    public function ajaxRequest(Request $request){


        $article = Article::find($request->id);
        $response = auth()->user()->toggleLike($article);


        return response()->json(['success'=>$response]);
    }
}

Phase 8: Make Blade files and CSS File

And then in this source code file we will make like as a articles.blade.php file and then css style sheets custom.css file. Therefor let’s make both files.

resources/views/articles.blade.php

@extends('layouts.app')
@section('content')





<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Articles</div>
                <div class="card-body">
                    @if($articles->count())
                        @foreach($articles as $article)
                            <article class="col-xs-12 col-sm-6 col-md-3">
                                <div class="cart cart-info">id }}">
                                    <div class="cart-body">
                                        <a href="https://www.pakainfo.com/upload/itsolutionstuff.png" title="Nature Portfolio">
                                            <img src="https://www.pakainfo.com/upload/itsolutionstuff.png" alt="Nature Portfolio" />
                                            <span class="overlay"><i class="fa fa-search"></i></span>
                                        </a>
                                    </div>  
                                    <div class="cart-footer">
                                        <h4><a href="#" title="Nature Portfolio">{{ $article->title }}</a></h4>
                                        <span class="pull-right">
                                            <span class="impress-btn">
                                                <i>id}}" class="glyphicon glyphicon-likes-up {{ auth()->user()->hasLiked($article) ? 'paka-page' : '' }}"></i> <div>id}}-bs3">{{ $article->likers()->get()->count() }}</div>
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>



    $(document).ready(function() {     


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


        $('i.glyphicon-likes-up, i.glyphicon-likes-down').click(function(){    
            var id = $(this).parents(".cart").data('id');
            var c = $('#'+this.id+'-bs3').html();
            var pakaionid = this.id;
            var pOjb = $(this);


            $.ajax({
               type:'POST',
               url:'/ajaxRequest',
               data:{id:id},
               success:function(data){
                  if(jQuery.isEmptyObject(data.success.attached)){
                    $('#'+pakaionid+'-bs3').html(parseInt(c)-1);
                    $(pOjb).removeClass("paka-page");
                  }else{
                    $('#'+pakaionid+'-bs3').html(parseInt(c)+1);
                    $(pOjb).addClass("paka-page");
                  }
               }
            });


        });      


        $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
            event.preventDefault();
            $(this).ekkoLightbox();
        });                                        
    }); 

@endsection

custom.css(Laravel Project)

publis/css/custom.css

//PHP Laravel 5 - Like Dislike System Tutorial
.cart {
  position: relative;
  overflow: hidden; 
  display: block; 
  border-radius: 0 !important;  
}
.cart-body {
  width: 100%;
  height: 100%;
  padding: 16px 8px;    
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}
.cart-body .overlay {
  position: absolute;
  overflow: hidden;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #FFF;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  -ms-transform: scale(0,1);
  transform: scale(0,1);
}
.cart-body .overlay i{
  opacity: 0;
}
.cart-body a:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.cart-body a:hover img {
  filter: brightness(0.6);
  -webkit-filter: brightness(0.6);
}
.impress-btn{
  background: #3399ff none repeat scroll 0 0;
  border-radius: 3px;
  color: white;
  padding: 8px 3px 3px 8px;
  margin-right: 6px;
  margin-top: -6px;
}
.impress-btn i,.disimpress-btn i{
  color: white;
}
.disimpress-btn{
  background: #FA4E69 none repeat scroll 0 0;
  border-radius: 3px;
  color: white;
  padding: 8px 6px 3px 3px; 
  margin-top: -6px;
}
h2 {
  padding: 16px;
  font-family: calibri;
  display: inline-block;
}
.cart .cart-body a { 
  overflow: hidden; 
}
.cart .cart-body a img { 
  display: block; 
  margin: 0; 
  width: 100%; 
  height: auto; 
}     
.cart .cart-body a:hover span.overlay { 
  display: block; 
  visibility: visible; 
  opacity: 0.55; 
  -moz-opacity: 0.55; 
  -webkit-opacity: 0.55; 
}  
.cart .cart-body a:hover span.overlay i { 
  position: absolute; 
  top: 45%; 
  left: 0%; 
  width: 100%; 
  font-size: 2.25em; 
  color: #fff !important; 
  text-align: center;
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
}
.cart .cart-footer { 
  padding: 8px !important; 
  background-color: #f9f9f9 !important;
  border:0px;
}  
.cart .cart-footer h4 { 
  display: inline; 
  font: 400 normal 1.125em "Roboto",Arial,Verdana,sans-serif; 
  color: #34495e margin: 0 !important; 
  padding: 0 !important; 
  font-size: 13px;
}
.cart .cart-footer h4 a{
  padding: 4px 8px;
  text-decoration: none;
}
.cart .cart-footer h4 a:hover{
  background-color: #69a8d4;
  color: white;
  border-radius: 3px;
  transition: all 0.4s;
}
.cart .cart-footer i.glyphicon { 
  display: inline; 
  font-size: 1.125em; 
  cursor: pointer; 
  padding-right: 8px;
}
.cart .cart-footer i.glyphicon-likes-down { 
  color: #3d3d3d; 
  padding-left: 6px; 
  padding-right: 6px;
}
.cart .cart-footer div { 
  width: 16px; 
  display: inline; 
  font: 300 normal 1.125em "Roboto",Arial,Verdana,sans-serif; 
  color: white !important; 
  text-align: center; 
  background-color: transparent !important; 
  border: none !important; 
} 
.paka-page{
  color: #c60000 !important;
}

We hope you get an idea about Laravel 5.6 Like Dislike system with PHP and MySQL
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.