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!
