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.
#laravel #laravel-9x