Laravel 9 Like Dislike System Using Ajax Request

Hello Artisan,

In this Laravel 9 like system, I will show you from scratch how we can create a like system like Facebook Twitter in Laravel 9 application using ajax request. To create this like system in Laravel 9 I will use overtrue/laravel-follow package.

In this Like system, I will use ajax to send an HTTP post request and I will show the incremented like without page refresh. If you don't know how to create this like dislike system in Laravel then this like dislike Laravel 9 tutorial is for you.

You have to just follow some steps to complete this like dislike system in this PHP Laravel 9 tutorial. Only authenticated users can like and to create this like system, I will simply create an ajax like button Laravel 9 application.

So let's start our like dislike system in the Laravel 9 tutorial. See the preview image what we are going to make:

 

laravel-like-dislike-system

 

Now let's start and create ajax real-time like unlike the system in laravel 9 application. Now let's start our Laravel like dislike tutorial.

 

Step 1: Install Laravel 9

Install the new Laravel Project by the running following command.

composer create-project --prefer-dist laravel/laravel like-dislike

 

Step 2: Install /laravel-follow Package

Now we require to install the laravel-follow package for like unlike system, that way we can use its method. So open your terminal and run the below command.

composer require overtrue/laravel-follow -vvv

 

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

config/app.php

'providers' => [
	Overtrue\LaravelFollow\FollowServiceProvider::class,
],

 

To publish the migrations file run bellow command

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

 

As optional if you want to modify the default configuration, you can publish the configuration file:

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

 

Then just migrate it by using the following command:

php artisan migrate

 

Read also: Laravel 9 Follow Unfollow System Example From Scratch

 

Step 3: Create Authentication

In this step, we require to create authentication of Laravel 5.8, so laravel provides an artisan command to create authentication that way we don't require to create a route and controller for login and registration.

We did it because only logged-in users can like or dislike this post. so run bellow command:

php artisan make:auth

 

Step 4: Create Dummy Posts

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

php artisan make:migration create_posts_table

 

Now add the 'title' field on the posts table:

database/migrations/CreatePostsTable.php

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

class CreatePostsTable extends Migration
{
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

 

Then just migrate it by using the following command:

php artisan migrate

 

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

App/Post.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 the 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

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

class CreateDummyPost extends Seeder
{
  
    public function run()
    {
        $posts = ['codechief.org', 'wordpress.org', 'laramust.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 the User model. we need to use the CanLike trait in User model. So let's update as bellow code.

App/User.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 ; //Notice we used CanLike trait

    protected $fillable = [
        'name', 'email', 'password',
    ];

    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 the following route in the web.php file.

routes/web.php

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

 

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

namespace App\Http\Controllers;

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


class HomeController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
    }

    public function index()
    {
        return view('home');
    }

    public function posts()
    {
        $posts = Post::get();
        return view('posts', compact('posts'));
    }

    public function LikePost(Request $request){

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

        return response()->json(['success'=>$response]);
    }
}

 

Step 8: Create Blade file

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

resources/views/posts.blade.php

 

Read also: Simple Like System in Laravel 9 using Vue Js

 

Hope this ajax like dislike system will help you and hope you will be able to use this overtrue/laravel-like package to create this like system in Laravel.

 

author-image
Facebook Github
A web enthusiastic, a self-motivated full-stack software engineer from Dhaka, Bangladesh with experience in developing applications using Laravel , React and Vue js