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

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!