Skip to content
  • Home
  • Server-Side
    • php
    • Node.js
    • ASP.NET
    • Magento
    • Codeigniter
    • Laravel
    • Yii
    • CRUD
      • CRUD Database Application
      • CRUD operation in Client side
      • CRUD operation with server side
  • JavaScript
    • AngularJS
    • Ajax
    • VueJs
    • jQuery
    • ReactJS
    • JavaScript
    • SEO
  • Programming
    • Android
    • C programming
    • CSS
    • Mysql
    • Mysqli
  • Technology
    • Software
      • webinar software
      • webinar conferencing software
      • soundproof
    • Adsense
      • Google
      • Earn Money
      • Google Adsense
        • Adsense fraud
        • Adsense Secrets
        • Adsense software
        • Adwords advice
        • Adwords strategy
        • Google adwords help
        • How to get google ads
    • Tips and Tricks
    • Interview
    • Insurance
    • Religious
    • Entertainment
      • Bollywood
      • tamilrockers
      • Hollywood
  • Health Care
    • LifeStyle
    • Women
    • Fashion
    • Top10
    • Jobs
  • Tools
    • Screen Resolution
    • WORD COUNTER
    • Online Text Case Converter
    • what is my screen resolution?
  • Guest Post
    • 4cgandhi
    • IFSC Code

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

July 29, 2019 by Pakainfo

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.

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

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

Read Also:  PHP Inheritance - Multilevel and Multiple Inheritance in 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

Read Also:  Vuejs currency filter example

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

Read Also:  Check if row exists using Laravel

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


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  How to parseInt() Function convert a string to an integer in javascript?
  2. Read Also:  vue js image slider - carousel multiple image slider with thumbnail
  3. Read Also:  Like Dislike system with PHP and MySQL
  4. Read Also:  Simple VueJS Modal Popup Example
  5. Read Also:  How to Get the Text Value of Selected Option using jQuery?
  6. Read Also:  Laravel Form Automatic model validation Example
  7. Read Also:  Ajax Image Upload without Refreshing Page using Jquery
  8. Read Also:  How to Create, Access and Destroy Sessions in Asp.Net
  9. Read Also:  vue js image slider - carousel multiple image slider with thumbnail
  10. Read Also:  How to parseInt() Function convert a string to an integer in javascript?
Categories Google Adsense, jQuery, Laravel, Programming, Technology Tags Ajax and Laravel 5.6, How To Toggle Like and Dislike using Laravel 5.6, Laravel 5 Like Dislike system with PHP and MySQL, Laravel 5.6 Like and Unlike system using PHP and MySQL database, Laravel code for like button like in facebook, Laravel like dislike button, Laravel like dislike code, like dislike button Laravel ajax, like dislike button Laravel code, like dislike counter in Laravel, Like Dislike rating system with jQuery, like system Laravel, like unlike code in Laravel, PHP Laravel 5 - Like Dislike System Tutorial
Post navigation
Laravel UNION Query Builder Example
PHP Rest API And HTTP CURL methods GET, POST, DELETE, PUT

Categories

Ajax (418) AngularJS (357) ASP.NET (61) Bollywood (35) Business (16) Codeigniter (141) C programming (13) CSS (62) Earn Money (50) Education (30) Entertainment (41) Events (14) Google Adsense (58) Government (13) Highcharts (77) Hollywood (34) Interview (18) JavaScript (864) Jobs (25) jQuery (941) Laravel (1008) LifeStyle (31) linux (18) Misc (13) Mysql (871) Mysqli (779) Node.js (34) php (1686) Programming (2179) Python (44) ReactJS (33) SEO (22) Software (16) Software (38) tamilrockers (30) Tech (15) Technology (2187) Tips and Tricks (75) Tools (27) Top10 (109) VueJs (249) Web Technology (28) wordpress (135) World (22) Yii (14)
© 2021 Pakainfo • Developed By Pakainfo.com