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!.
Related FAQ
Here are some more FAQ related to this Article: