Seguidores User Following System Laravel 5.6

Hola a todos!, en este articulo mostraremos como realizar un simple sistema de seguidores en Laravel 5.6 usando MySQL al estilo Twitter (User Following system) 🙂

La idea es que al finalizar el sistema los usuarios puedan tener seguidores mostrando la cantidad de seguidores total y seguidos utilizando un package que nos ayudará ahorrándonos mucho trabajo 😀 , iremos paso a paso desde un nuevo proyecto de Laravel 5.6

Instrucciones

Paso 1

Crear un nuevo proyecto Laravel dejando como nombre de la carpeta followsystem

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

Paso 2

Configurar nuestro archivo .env con los datos correspondientes a nuestra base de datos a utilizar

Paso 3

Instalar el Package laravel-follow

composer require overtrue/laravel-follow

Abrimos el archivo config/app.php y agregamos el service provider

'providers' => [

Overtrue\LaravelFollow\FollowServiceProvider::class,

],

Seguiremos copiando las migraciones que trae el package laravel-follow utilizando el siguiente comando

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

Copiamos el archivo de configuración del package

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

Ejecutamos las migraciones para crear las tablas necesarias en nuestra base de datos

php artisan migrate

Paso 4

Utilizaremos el sistema de Autentificación de Laravel 5.6 quien nos provee un comando para para crear todo lo necesario!

php artisan make:auth

Paso 5

Para comenzar con datos concretos y probar el sistema crearemos una cantidad base de usuarios utilizando un factory, para hacerlo simple utilizaremos tinker desde la consola

php artisan tinker

Una vez entramos a tinker vamos a ejecutar un comando factory pasándole el modelo User que Laravel trae por defecto e indicamos que deseamos generar 100 nuevos usuarios

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

Paso 6

Para poder utilizar el package laravel-follow debemos modificar nuestro modelo User que viene App/User.php por defecto dejándolo de la siguiente forma

<?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',
    ];

}

Paso 7

Agregaremos las rutas a nuestro archivo routes/web.php correspondientes a nuestro sistema de autentificación y para realizar el sistema de seguidores (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');

Paso 8

Tal como vemos anteriormente agregamos rutas las cuales apuntan a métodos que debemos crear dentro de nuestro HomeController (que es el controlador que Laravel trae por defecto)

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]);

    }

}

Paso 9

Finalmente nos falta crear las vistas, osea nuestros archivos blade y nuestro archivo js en donde utilizamos ajax

Los archivos que debemos crear son userList.blade.php, users.blade.php y usersView.blade.php finalmente nuestro 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

Con esto ya tendremos el sistema funcional en donde podremos loguearnos y seguir a otros usuarios del sistema haciendo click en el boton Follow, espero que a más de alguien le sirva el artículo!, Saludos!