Ajax Eloquent Laravel Mysql

User Following system Sistema de seguidores Laravel 5.6

Julio 12, 2018
laravel user followers system unfollow

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’,

];

}

 

he dejado en negrita lo que se ha agregado en el modelo

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’, ‘[email protected]’)->name(‘home’);

Route::get(‘users’, ‘[email protected]’)->name(‘users’);

Route::get(‘user/{id}’, ‘[email protected]’)->name(‘user.view’);

Route::post(‘ajaxRequest’, ‘[email protected]’)->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 and usersView.blade.php y 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

 

resources/views/userList.blade.php

@if($users->count())

@foreach($users as $user)

<div class=”col-2 profile-box border p-1 rounded text-center bg-light mr-4 mt-3″>

<img src=”https://dummyimage.com/165×166/420542/edeef5&text=blenderdeluxe.com” class=”w-100 mb-1″>

<h5 class=”m-0″><a href=”{{ route(‘user.view’, $user->id) }}”><strong>{{ $user->name }}</strong></a></h5>

<p class=”mb-2″>

<small>Following: <span class=”badge badge-primary”>{{ $user->followings()->get()->count() }}</span></small>

<small>Followers: <span class=”badge badge-primary tl-follower”>{{ $user->followers()->get()->count() }}</span></small>

</p>

<button class=”btn btn-info btn-sm action-follow” data-id=”{{ $user->id }}”><strong>

@if(auth()->user()->isFollowing($user))

UnFollow

@else

Follow

@endif

</strong></button>

</div>

@endforeach

@endif

 

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:’/ajaxRequest’,

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

}

}

});

});

});

 

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!

Comentarios

comentarios

Related Articles

Read previous post:
Eloquent agregar atributos custom a resultados de un modelo

En Laravel muchas veces necesitamos generar en nuestros modelos de Eloquent campos personaliados como por ejemplo el caso de el...

Close