Create Like Dislike System with Laravel Jquery Ajax

Hello World, Welcome to ProjectsPlaza.com Today we will create like dislike system using Laravel, jquery, and ajax. I will extend my previous tutorial Create a comment system with jquery ajax and Laravel. In this tutorial, we will save like and dislike counting in the database for a specific post. You can extend this system with user authentication. When users view the post detail page then like-dislike counting will also show for this post. I have divided this tutorial into the following steps:

• Create LikeDislike Model
• Build Relationship between Post and LikeDislike Model
• Create a view for like and dislike
• Save like dislike counting on click

Create LikeDislike Model

In this step, we will create LikeDislike Model to save like dislike counting.

Run the following command to create a LikeDislike Model with migration

php artisan make:model LikeDislike -m

• open newly created migration file from database/migrations/…like_dislikes.php
• Replace the code of the up method with the following code.

• Schema::create('like_dislikes', function (Blueprint $table) {
              $table->id();
              $table->integer('post_id');
              $table->smallInteger('like')->default(0);
              $table->smallInteger('dislike')->default(0);
              $table->timestamps();
          });

• Run this command to create a like_dislikes table in the database.
• php artisan migrate

Build Relationship between Post and LikeDislike Model

In this step, we will build a relationship between Post and LikeDislike models. We know that one post has many likes and dislikes. So here we will apply the hasMany with sum function in the model relationship in Post Model.

// Likes
    public function likes(){
        return $this->hasMany('App\LikeDislike','post_id')->sum('like');
    }
    // Dislikes
    public function dislikes(){
        return $this->hasMany('App\LikeDislike','post_id')->sum('dislike');
    }

The above calculate the total sum of likes or dislikes for a specific post.

Create a view for like and dislike

I this step, we will edit our post detail page. We will add like and dislike button with icon and counting.

This is extended version of create comment system with jquery ajax and laravel post. Please make sure that you have read this article.

• Open the post detail page and replace the comment header section with the following code.

• <h5 class="card-header">Comments 
              <span class="comment-count btn btn-sm btn-outline-info">{{ count($post->comments) }}</span>
              <small class="float-right">
                  <span title="Likes" id="saveLikeDislike" data-type="like" data-post="{{ $post->id}}" class="mr-2 btn btn-sm btn-outline-primary d-inline font-weight-bold">
                      Like
                      <span class="like-count">{{ $post->likes() }}</span>
                  </span>
                  <span title="Dislikes" id="saveLikeDislike" data-type="dislike" data-type="dislike" data-post="{{ $post->id}}" class="mr-2 btn btn-sm btn-outline-danger d-inline font-weight-bold">
                      Dislike
                      <span class="dislike-count">{{ $post->dislikes() }}</span>
                  </span>
              </small>
              </h5>

  After apply these changes you will see the following screen.

// Save Like Or Dislike
$(document).on('click','#saveLikeDislike',function(){
    var _post=$(this).data('post');
    var _type=$(this).data('type');
    var vm=$(this);
    // Run Ajax
    $.ajax({
        url:"{{ url('save-likedislike') }}",
        type:"post",
        dataType:'json',
        data:{
            post:_post,
            type:_type,
            _token:"{{ csrf_token() }}"
        },
        beforeSend:function(){
            vm.addClass('disabled');
        },
        success:function(res){
            if(res.bool==true){
                vm.removeClass('disabled').addClass('active');
                vm.removeAttr('id');
                var _prevCount=$("."+_type+"-count").text();
                _prevCount++;
                $("."+_type+"-count").text(_prevCount);
            }
        }   
    });
});
// End

// Like Or Dislike
Route::post('save-likedislike','PostController@save_likedislike');

// Save Like Or dislike
    function save_likedislike(Request $request){
        $data=new LikeDislike;
        $data->post_id=$request->post;
        if($request->type=='like'){
            $data->like=1;
        }else{
            $data->dislike=1;
        }
        $data->save();
        return response()->json([
            'bool'=>true
        ]);
    }

You can extend this functionality by adding user authentication. I have created this function with auth in my Tutorial website project in Laravel.

I hope you have enjoyed this tutorial. Please add your feedback in the comment section.