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!
