Skip to content
  • Home
  • Blog
    • yttags
    • Youtube
  • Categories
  • Tools
  • Server-Side
    • php
    • Node.js
    • ASP.NET
    • Magento
    • Codeigniter
    • Laravel
    • Yii
  • JS
    • AngularJS
    • Ajax
    • VueJs
    • jQuery
    • ReactJS
    • JavaScript
  • Full Form
  • Guest Post
  • Advertise
  • About
  • Contact Us
Pakainfo

Pakainfo

Web Development & Good Online education

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

July 29, 2019 Pakainfo Technology, Google Adsense, jQuery, Laravel, Programming Leave a comment
Rate this post

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

Free Live Chat for Any Issue

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:  ANGULAR 2 TUTORIAL FOR BEGINNERS STEP BY STEP

 $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:  PHP CRUD Create, edit, update and delete Records with MySQL database

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

Download

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

Read Also:  check Element Hidden in jQuery

Related posts:

  1. Rating Stars with simple jQuery
  2. Multiple image slider in html source code
  3. PHP Toggle Like Dislike Rating System using jQuery Ajax
  4. How To Create Image Hover Overlay Effects?
  5. jQuery An Animated Scroll To Top Button
  6. jQuery Full screen Navigation Overlay
  7. How To Create Social Media icons footer using bootstrap?
  8. WordPress Next Previous Article/post using CSS
  9. jQuery black gradient background effect Hover Slider With CSS
  10. Mouseover and Mouseout Effects using Jquery Example
Ajax and Laravel 5.6How To Toggle Like and Dislike using Laravel 5.6Laravel 5 Like Dislike system with PHP and MySQLLaravel 5.6 Like and Unlike system using PHP and MySQL databaseLaravel code for like button like in facebookLaravel like dislike buttonLaravel like dislike codelike dislike button Laravel ajaxlike dislike button Laravel codelike dislike counter in LaravelLike Dislike rating system with jQuerylike system Laravellike unlike code in LaravelPHP Laravel 5 - Like Dislike System Tutorial

Post navigation

Previous Post:Laravel UNION Query Builder Example
Next Post:PHP Rest API And HTTP CURL methods GET, POST, DELETE, PUT

Search

Write For Us

We’re accepting well-written informative guest posts and this is a great opportunity to collaborate.
Submit a guest post to [email protected]
Contact Us

Freelance web developer

Do you want to build a modern, lightweight, responsive website quickly?
Need a Website Or Web Application Contact : [email protected]
Note: Paid Service
Contact Me
Cricday

Categories

3movierulz (48) Ajax (464) AngularJS (377) ASP.NET (61) Bollywood (92) Codeigniter (174) CSS (96) Earn Money (61) Education (53) Entertainment (108) fullform (77) Google Adsense (62) Highcharts (77) Hollywood (93) JavaScript (1354) Jobs (39) jQuery (1421) Laravel (1083) LifeStyle (50) movierulz4 (47) Mysql (1029) Mysqli (890) Node.js (38) php (2110) Programming (2320) Python (96) ReactJS (37) Software (100) Software (76) Stories (78) tamilrockers (88) Tamilrockers kannada (48) Tamilrockers telugu (47) Tech (101) Technology (2359) Tips and Tricks (107) Tools (110) Top10 (291) Trading (49) Trending (45) VueJs (250) Web Technology (83) webtools (128) wordpress (165) World (118)

Advertise With Us

Increase visibility and sales with advertising. Let us promote you online.
Click Here

A To Z Full Forms

Access a complete full forms list with the meaning, definition, and example of the acronym or abbreviation.
Click Here

Web Development & Good Online education : Pakainfo by Pakainfo.
Top
Subscribe On YouTube : Download Source Code & New itsolutionstuck
We accept paid guest Posting on our Site : Guest Post Chat with Us On WhatsApp