Followers User Following System Laravel 5.6

Hello everyone! In this article we will show how to make a simple follower system in Laravel 5.6 using MySQL Twitter style (User Following system) 🙂

The idea is that at the end of the system users can have followers showing the total number of followers and followed using a package that will help us saving us a lot of work 😀 , we will go step by step from a new Laravel 5.6 project

Instructions

Step 1

Create a new Laravel project leaving the folder name followsystem

composer create-project –prefer-dist laravel/laravel followsystem "5.6.*"

Step 2

Configure our .env file with the data corresponding to our database to use

Step 3

Install the laravel-follow package

composer require overtrue/laravel-follow

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

'providers' => [

Overtrue\LaravelFollow\FollowServiceProvider::class,

],

We will continue copying the migrations that the laravel-follow package brings using the following command

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

We copy the package configuration file

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

We run the migrations to create the necessary tables in our database

php artisan migrate

Step 4

We will use the Laravel 5.6 Authentication system which provides us with a command to create everything we need!

php artisan make:auth

Step 5

To start with concrete data and test the system we will create a base number of users using a factory, to keep it simple we will use tinker from the console

php artisan tinker

Once we enter tinker we are going to execute a factory command passing it the User model that Laravel brings by default and we indicate that we want to generate 100 new users

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

Step 6

In order to use the laravel-follow package we must modify our User model that comes in App/User.php by default, leaving it as follows:

<?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;

    /**
    * 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 7

We will add the routes to our routes/web.php file corresponding to our authentication system and to implement the user following system.

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

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

Route::get('users', 'HomeController@users')->name('users');

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

Route::post('ajaxRequest', 'HomeController@ajaxRequest')->name('ajaxRequest');

Step 8

As we see above, we add routes which point to methods that we must create within our HomeController (which is the controller that Laravel brings by default)

app/Http/HomeController.php

<?php

namespace App\Http\Controllers;

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

class HomeController extends Controller
{

    /**
    * Create a new controller instance.
    *
    * @return void
    */

    public function __construct()
    {

        $this->middleware('auth');

    }

    /**
    * @return \Illuminate\Http\Response
    */

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

    /**
    * @return \Illuminate\Http\Response
    */

    public function users()
    {

        $users = User::get();
        return view('users', compact('users'));

    }

    /**
    * @return \Illuminate\Http\Response
    */

    public function user($id)
    {

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

    }

    /**
    * @return \Illuminate\Http\Response
    */

    public function ajaxRequest(Request $request){

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

        $response = auth()->user()->toggleFollow($user);

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

    }

}

Step 9

Finally we need to create the views, that is, our blade files and our js file where we use ajax

The files we need to create are userList.blade.php, users.blade.php y usersView.blade.php finally our js custom.js

resources/views/users.blade.php

@extends('layouts.app')

@section('content')

    <script src="{{ asset('js/custom.js') }}" defer></script>

    <div class="container">

        <div class="row justify-content-center">

            <div class="col-md-12">

                <div class="card">

                    <div class="card-header">List of Users</div>

                    <div class="card-body">

                        <div class="row pl-5">

                        @include('userList', ['users' => $users])

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

@endsection

resources/views/usersView.blade.php

@extends('layouts.app')

@section('content')


<script src="{{ asset('js/custom.js') }}" defer></script>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    {{ $user->name }}
                    <br/>
                    <small>
                        <strong>Website:</strong> Blenderdeluxe.com,

                        <strong>Email: </strong>{{ $user->email }}

                    </small>
                </div>
                <div class="card-body">
                    <nav>
                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#followers" role="tab" aria-controls="nav-home" aria-selected="true">Followers 
                                <span class="badge badge-primary">{{ $user->followers()->get()->count() }}</span>
                            </a>
                            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#following" role="tab" aria-controls="nav-profile" aria-selected="false">Following 
                                <span class="badge badge-primary">{{ $user->followings()->get()->count() }}</span>
                            </a>
                        </div>
                    </nav>
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="followers" role="tabpanel" aria-labelledby="nav-home-tab">
                            <div class="row pl-5">

                            @include('userList', ['users'=>$user->followers()->get()])

                            </div>
                        </div>
                        <div class="tab-pane fade" id="following" role="tabpanel" aria-labelledby="nav-profile-tab">
                            <div class="row pl-5">

                            @include('userList', ['users'=>$user->followings()->get()])

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

With this we will have a functional system where we can log in and follow other users of the system by clicking on the Follow button. I hope that the article will be useful to more than one person! Regards!