Skip to content
pakainfo

Pakainfo

Web Development & Good Online education

Guest Posting Sites
  • Home
  • Blog
  • Categories
  • Tools
  • Full Form
  • Guest Post
  • Advertise
  • About
  • Contact Us

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

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

Contents

  • Laravel 5.6 Like Dislike rating system with jQuery, Ajax and PHP
    • Phase 1 Laravel 5.6 Installation
    • Phase 2 Install laravel-follow Package
    • Phase 3 Make Authentication
    • Phase 4 Make Dummy Articles
    • Phase 5 Update User Model
    • Phase 6 Create Routes
    • Phase 7 Add Controller Method
    • Phase 8 Make Blade files and CSS File
    • custom.css(Laravel Project)
    • Related posts

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.

Also Read This 👉   BOOTSTRAP ACCORDION WITH PLUS MINUS ICON

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

Also Read This 👉   PHP and MySqli CRUD Operation Tutorial

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

Also Read This 👉   Jquery $.grep() Multiple Conditions

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

Related posts:

  1. Rating Stars with simple jQuery
  2. Multiple image slider in html source code
  3. How To Create Image Hover Overlay Effects?
  4. jQuery An Animated Scroll To Top Button
  5. jQuery Full screen Navigation Overlay
  6. How To Create Social Media icons footer using bootstrap?
  7. WordPress Next Previous Article/post using CSS
  8. jQuery black gradient background effect Hover Slider With CSS
  9. 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

Advertise With Us

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

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

Categories

3movierulz (64) Ajax (464) AngularJS (377) ASP.NET (61) Bio (109) Bollywood (108) Codeigniter (175) CSS (98) Earn Money (69) Education (61) Entertainment (130) fullform (86) Google Adsense (63) Highcharts (77) History (40) Hollywood (109) JavaScript (1357) Jobs (42) jQuery (1423) Laravel (1088) LifeStyle (53) movierulz4 (63) Mysql (1029) Mysqli (890) php (2121) Programming (2332) Python (97) Software (166) Software (88) Stories (98) tamilrockers (104) Tamilrockers kannada (64) Tamilrockers telugu (61) Tech (141) Technology (2392) Tips and Tricks (119) Tools (203) Top10 (477) Trading (89) Trending (71) VueJs (250) Web Technology (104) webtools (191) wordpress (166) World (322)

A To Z Full Forms

Access a complete full forms list with the meaning, definition, and example of the acronym or abbreviation.
Click Here
  • Home
  • About Us
  • Terms And Conditions
  • Write For Us
  • Advertise
  • Contact Us
  • Youtube Tag Extractor
  • Info Grepper
  • Guest Posting Sites
  • Increase Domain Authority
  • Social Media Marketing
  • Freelance web developer
  • Tools
Pakainfo 9-OLD, Ganesh Sco, Kothariya Ring Road, Chokadi, Rajkot - 360002 India
E-mail : [email protected]
Pakainfo

© 2023 Pakainfo. All rights reserved.

Top
Subscribe On YouTube : Download Source Code
We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype Guest Posting Sites