Laravel 9 Follow Unfollow Example Using Ajax Request

Hello Artisan,

In this Laravel brand new tutorial, I am going to show you how to create a follow unfollow system in Laravel 9. I will show you step by step so that you can understand it easily. I will use the overture/laravel-follow package to create this follow unfollow system in Laravel 9.

I will use an ajax request to follow a particular user like Facebook Twitter without page refresh. If we use ajax request to create this Laravel follow unfollow system then it will enhance our user experience. So I will share this follow unfollow system with jQuery ajax in Laravel 9.

From this follow unfollow example Laravel 9 application, you will see a user can follow a user or unfollow a user if they want. You will able to also see which users following you and how many followers you have. For making it I will use the overture/laravel-follow composer package to create follow unfollow system in Laravel.

So if you don't know how to create follow unfollow system in Laravel 9 then this example is for you. Just follow a few steps and you will get a layout like as bellow preview.

Now let's start our Laravel follow unfollow tutorial 

Step 1 : Download Laravel

Install the new Laravel project by the running following command to create laravel follow unfollow system.

composer create-project --prefer-dist laravel/laravel follow-unfollow

Step 2 : Install overtrue/laravel-follow Package

Now we need to install laravel-follow package for follow unfollow system. So Open your terminal and run the bellow 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 : How to Upload Multiple Image in Laravel

Step 3 :  Create Authentication

In this step, we require to create authentication of Laravel 9, 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. so run bellow command:

php artisan make:auth

Step 4 : Create Dummy Users

In this step, we will create some dummy users for testing, so we will create dummy users using the formate factory. so run the below command:

php artisan tinker
factory(App\User::class, 100)->create();

Step 5 :  Update User Model

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

App/User.php

namespace App;

use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Overtrue\LaravelFollow\Traits\CanFollow;
use Overtrue\LaravelFollow\Traits\CanBeFollowed;


class User extends Authenticatable
{
    use Notifiable, CanFollow, CanBeFollowed; //See we used CanFollow and CanBeFollowed Traits

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

    protected $hidden = [
        'password', 'remember_token',
    ];
}

Step 6 :  Add Routes

In this step, we will create routes for follow, unfollow system in Laravel. So we require to create the following route in the web.php file.

routes/web.php

Route::get('users', 'HomeController@users')->name('users');
Route::get('user/{id}', 'HomeController@user')->name('user.view');
Route::post('follow', 'HomeController@follwUserRequest')->name('follow');

Step 7 :  Create Controller Method

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

app/Http/HomeController.php

namespace App\Http\Controllers;

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


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

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

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

    public function user($id)
    {
        $user = User::find($id);
        return view('usersView', compact('user'));
    }

    public function follwUserRequest(Request $request){


        $user = User::find($request->user_id);
        $response = auth()->user()->toggleFollow($user);


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

Step 8 :  Create Blade files and JS File

Now in this file, we will need to create userList.blade.php, users.blade.php, and usersView.blade.php files and custom.js file. So let's create both files.

resources/views/users.blade.php

resources/views/usersView.blade.php

resources/views/userList.blade.php

publis/js/custom.js

$(document).ready(function() {     

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

    $('.action-follow').click(function(){    
        var user_id = $(this).data('id');
        var cObj = $(this);
        var c = $(this).parent("div").find(".tl-follower").text();

        $.ajax({
           type:'POST',
           url:'/follow',
           data:{user_id:user_id},
           success:function(data){
              console.log(data.success);
              if(jQuery.isEmptyObject(data.success.attached)){
                cObj.find("strong").text("Follow");
                cObj.parent("div").find(".tl-follower").text(parseInt(c)-1);
              }else{
                cObj.find("strong").text("UnFollow");
                cObj.parent("div").find(".tl-follower").text(parseInt(c)+1);
              }
           }
        });
    });      

}); 

Read also : Laravel Like Dislike System Like Facebook Twitter

Now we are ready to run our project. Hope it will help you to create a follow unfollow system in your Laravel application.