Laravel 9 Like Dislike System Using Ajax Example

Jul 01, 2022 . Admin

Hi Dev,

In this short tutorial we will cover an Laravel 9 Like Dislike System Using Ajax Example. you will learn Create Like Dislike System with Laravel 9 Jquery Ajax. it's simple example of How to Build Laravel 9 Like Dislike System. we will help you to give example of Like and dislike using Ajax in Laravel 9. you will do the following things for How to add like and dislike functionality in laravel 9 website?.

This article will give you simple example of how to add like and dislike System in laravel 9

Preview:
Step 1: Download Laravel

Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.

composer create-project laravel/laravel example-app
Step 2: Install laravel-follow Package

Now we require to install laravel-follow package for like unlike system, that way we can use it's method. So Open your terminal and run bellow command.

composer require overtrue/laravel-follow

Now open config/app.php file and add service provider and aliase.

config/app.php
'providers' => [

    ....

    Overtrue\LaravelFollow\FollowServiceProvider::class,

],   

After that we need to run migration configure file that we it will automatic generate migrations. so let's run.

php artisan vendor:publish --provider='Overtrue\LaravelFollow\FollowServiceProvider' --tag="migrations"

Then just migrate it by using following command:

php artisan migrate
Step 3: Create Authentication

In this step we require to create authentication of Laravel 5.6, so laravel provide artisan command to create authentication that way we don't require to create route and controller for login and registration. so run bellow command:

php artisan make:auth
Step 4: Create Dummy Posts

now in this step we need to create posts table and create model with seeds for dummy records. so let's create posts table using following command:

php artisan make:migration create_posts_table

now add 'title' field on posts table:

database/migrations/CreatePostsTable.php
<?php


use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;


class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->timestamps();
        });
    }


    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Then just migrate it by using following command:

php artisan migrate

After this we need to create model for posts table by following path.

App/Post.php
<?php

namespace App;

use Overtrue\LaravelFollow\Traits\CanBeLiked;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use CanBeLiked;

    protected $fillable = ['title'];
}

Now we require to create some dummy posts data on database table so create laravel seed using bellow command:

php artisan make:seeder CreateDummyPost

Now let's update CreateDummyPost seeds like as bellow:

database/seeds/CreateDummyPost.php
<?php

use Illuminate\Database\Seeder;
use App\Post;

class CreateDummyPost extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $posts = ['Mywebtuts.com', 'Webprofile.me', 'HDTuto.com', 'Nicesnippets.com'];

        foreach ($posts as $key => $value) {
            Post::create(['title'=>$value]);
        }
    }
}

Run seeder using this command:

php artisan db:seed --class=CreateDummyPost
Step 5: Update User Model

here we need to update User model. we need to use CanLike facade in User model. So let's update as bellow code.

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 ;


    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];


    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];
}
Step 6: Create Routes

In this step, we will create routes for like unlike system. So we require to create following route in web.php file.

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

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

Route::get('posts', 'HomeController@posts')->name('posts');
Route::post('ajaxRequest', 'HomeController@ajaxRequest')->name('ajaxRequest');
Step 7: Add Controller Method

now in HomeController, we will add two new method posts() and ajaxRequest(). so let's see HomeController like as bellow:

app/Http/HomeController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use App\User;

class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('home');
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function posts()
    {
        $posts = Post::get();
        return view('posts', compact('posts'));
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function ajaxRequest(Request $request){

        $post = Post::find($request->id);
        $response = auth()->user()->toggleLike($post);

        return response()->json(['success'=>$response]);
    }
}
Step 8: Create Blade files and CSS File

Now in this file we will create posts.blade.php file and custom.css file. So let's create both files.

resources/views/posts.blade.php
@extends('layouts.app')


@section('content')
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<meta name="csrf-token" content="{{ csrf_token() }}" />


<link href="{{ asset('css/custom.css') }}" rel="stylesheet">
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Posts</div>


                <div class="card-body">
                    @if($posts->count())
                        @foreach($posts as $post)
                            <article class="col-xs-12 col-sm-6 col-md-3">
                                <div class="panel panel-info" data-id="{{ $post->id }}">
                                    <div class="panel-body">
                                        <a href="https://Mywebtuts.com/upload/Mywebtuts.png" title="Nature Portfolio" data-title="Amazing Nature" data-footer="The beauty of nature" data-type="image" data-toggle="lightbox">
                                            <img src="https://Mywebtuts.com/upload/Mywebtuts.png" alt="Nature Portfolio" />
                                            <span class="overlay"><i class="fa fa-search"></i></span>
                                        </a>
                                    </div>  
                                    <div class="panel-footer">
                                        <h4><a href="#" title="Nature Portfolio">{{ $post->title }}</a></h4>
                                        <span class="pull-right">
                                            <span class="like-btn">
                                                <i id="like{{$post->id}}" class="glyphicon glyphicon-thumbs-up {{ auth()->user()->hasLiked($post) ? 'like-post' : '' }}"></i> <div id="like{{$post->id}}-bs3">{{ $post->likers()->get()->count() }}</div>
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(document).ready(function() {     


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


        $('i.glyphicon-thumbs-up, i.glyphicon-thumbs-down').click(function(){    
            var id = $(this).parents(".panel").data('id');
            var c = $('#'+this.id+'-bs3').html();
            var cObjId = this.id;
            var cObj = $(this);


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


        });      


        $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
            event.preventDefault();
            $(this).ekkoLightbox();
        });                                        
    }); 
</script>
@endsection
publis/css/custom.css
.panel {
  position: relative;
  overflow: hidden; 
  display: block; 
  border-radius: 0 !important;  
}
.panel-body {
  width: 100%;
  height: 100%;
  padding: 15px 8px;    
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}
.panel-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);
}
.panel-body .overlay i{
  opacity: 0;
}
.panel-body a:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.panel-body a:hover img {
  filter: brightness(0.6);
  -webkit-filter: brightness(0.6);
}
.like-btn{
  background: #3399ff none repeat scroll 0 0;
  border-radius: 3px;
  color: white;
  padding: 7px 3px 3px 7px;
  margin-right: 5px;
  margin-top: -5px;
}
.like-btn i,.dislike-btn i{
  color: white;
}
.dislike-btn{
  background: #FA4E69 none repeat scroll 0 0;
  border-radius: 3px;
  color: white;
  padding: 7px 5px 3px 3px; 
  margin-top: -5px;
}
h2 {
  padding: 15px;
  font-family: calibri;
  display: inline-block;
}
.panel .panel-body a { 
  overflow: hidden; 
}
.panel .panel-body a img { 
  display: block; 
  margin: 0; 
  width: 100%; 
  height: auto; 
}     
.panel .panel-body a:hover span.overlay { 
  display: block; 
  visibility: visible; 
  opacity: 0.55; 
  -moz-opacity: 0.55; 
  -webkit-opacity: 0.55; 
}  
.panel .panel-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;
}
.panel .panel-footer { 
  padding: 8px !important; 
  background-color: #f9f9f9 !important;
  border:0px;
}  
.panel .panel-footer h4 { 
  display: inline; 
  font: 400 normal 1.125em "Roboto",Arial,Verdana,sans-serif; 
  color: #34495e margin: 0 !important; 
  padding: 0 !important; 
  font-size: 12px;
}
.panel .panel-footer h4 a{
  padding: 4px 7px;
  text-decoration: none;
}
.panel .panel-footer h4 a:hover{
  background-color: #69a8d4;
  color: white;
  border-radius: 2px;
  transition: all 0.4s;
}
.panel .panel-footer i.glyphicon { 
  display: inline; 
  font-size: 1.125em; 
  cursor: pointer; 
  padding-right: 7px;
}
.panel .panel-footer i.glyphicon-thumbs-down { 
  color: #e74c3c; 
  padding-left: 5px; 
  padding-right: 5px;
}
.panel .panel-footer div { 
  width: 15px; 
  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; 
} 
.like-post{
  color: #e21309 !important;
}

Now you are ready to run full example.

You can also download full source code of this example.

You can also download full source code of this example.

#Laravel 9