Laravel 8.x Like Dislike System Like Facebook Twitter

Hello Artisan 

Hope you are doing well. In this tutorial i amgoing to show you how to make a like feature in laravel 8. I will show it from scratch. If you don't know how to create like dislike system in laravel, then you are a right place.

In many web application you will see that like dislike functionality in laravel. Now we are going to add this laravel like dislike in our application using overtrue/laravel-follow packages.

You know that Facebook, Twitter, LinkedIn etc web application uses like dislike system in their aplication. overtrue/laravel-follow is a brilliant package where you will get follow unfollow, like dislike, up vote down vote and many more features.

In this tutorial I would like to share with you how to implement a like dislike system with laravel and ajax request like Twitter and Facebook. In this features you will see a user can like a post and after liking it ,

User can dislike it also. So in this lecture I will explain you step by step create laravel like system in laravel 7 application. I will use jquery ajax and overture packages to create laravel like dislike feature.

For making it i will use "overture/laravel-follow" composer package to create follow unfollow system in Laravel. You can visit below link to know more about this packages.

I will use jquery ajax to send http request to the server. So let's start our laravel follow unfollow tutorial.

Laravel follow unfollow package

Read also : Laravel 6 REST API with Passport Tutorial with Ecommerce Project

Just follow a few step and you will get layout like as bellow preview.

Now let's start and create ajax realtime like unlike system in laravel 5.8 application. Now let's start our Laravel like dislike tutorial.

Step 1: Install Laravel 8

Install the new Laravel Project by the running following command.

composer create-project --prefer-dist laravel/laravel like-dislike

Step 2: Install overtrue/laravel-follow Package

Now we require to install laravel-follow package for like unlike system, that way we can use it's method. So Open your terminal and run bellow command.

composer require overtrue/laravel-follow -vvv

Now open config/app.php file and add service provider and aliase.

config/app.php

'providers' => [
	Overtrue\LaravelFollow\FollowServiceProvider::class,
],

To publish the migrations file run bellow command

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

As optional if you want to modify the default configuration, you can publish the configuration file:

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

 Then just migrate it by using following command:

php artisan migrate

Read also: Laravel 5.8 - Follow Unfollow System Example From Scratch

Step 3: Create Authentication

In this step we require to create authentication of Laravel 5.8, so laravel provide artisan command to create authentication that way we don't require to create route and controller for login and registration.

We did it because only logged in user can like or dislike this post. so run bellow command:

php artisan make:auth

Step 4: Create Dummy Posts

now in this step we need to create posts table and create model with seeds for dummy records. so let's create posts table using following command:

php artisan make:migration create_posts_table

Now add 'title' field on posts table:

database/migrations/CreatePostsTable.php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Then just migrate it by using following command:

php artisan migrate

After this we need to create model for posts table by following path.

App/Post.php

namespace App;

use Overtrue\LaravelFollow\Traits\CanBeLiked;
use Illuminate\Database\Eloquent\Model;


class Post extends Model
{
	use CanBeLiked;

    protected $fillable = ['title'];
}

Now we require to create some dummy posts data on database table so create laravel seed using bellow command:

php artisan make:seeder CreateDummyPost

Now let's update CreateDummyPost seeds like as bellow:

database/seeds/CreateDummyPost.php

use Illuminate\Database\Seeder;
use App\Post;

class CreateDummyPost extends Seeder
{
  
    public function run()
    {
        $posts = ['codechief.org', 'wordpress.org', 'laramust.com'];

        foreach ($posts as $key => $value) {
        	Post::create(['title'=>$value]);
        }
    }
}

Run seeder using this command:

php artisan db:seed --class=CreateDummyPost

Step 5: Update User Model

here we need to update User model. we need to use CanLike facade in User model. So let's update as bellow code.

App/User.php

namespace App;

use Overtrue\LaravelFollow\Traits\CanLike;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;


class User extends Authenticatable
{
    use CanLike, Notifiable ; //Notice we used CanLike trait

    protected $fillable = [
        'name', 'email', 'password',
    ];

    protected $hidden = [
        'password', 'remember_token',
    ];
}

Step 6: Create Routes

In this step, we will create routes for like unlike system. So we require to create following route in web.php file.

routes/web.php

Route::get('/home', 'HomeController@index')->name('home');
Route::get('posts', 'HomeController@posts')->name('posts');
Route::post('like', 'HomeController@LikePost')->name('like');

Step 7:  Add Controller Method

now in HomeController, we will add two new method posts() and ajaxRequest(). so let's see HomeController like as bellow:

app/Http/HomeController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use App\User;


class HomeController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
    }

    public function index()
    {
        return view('home');
    }

    public function posts()
    {
        $posts = Post::get();
        return view('posts', compact('posts'));
    }

    public function LikePost(Request $request){

        $post = Post::find($request->id);
        $response = auth()->user()->toggleLike($post);

        return response()->json(['success'=>$response]);
    }
}

Step 8: Create Blade file

Now in this file we will create posts.blade.php file and custom.css file. So let's create both files.

resources/views/posts.blade.php

Read also: Simple Like System in Laravel 6 using Vue Js

Now we are ready to test our like dislike system in this application. Hope it can help you.