By Hardik Savani May 29, 2018 Category : PHP Laravel Bootstrap MySql MSSQLPauseUnmuteLoaded: 2.17%Fullscreenwe may sometime require to create like and dislike functionality for your posts, tutorials, articles, products etc in your laravel 5.6 application like on facebook, twitter, google etc. here i will show you how to build ajax realtime like unlike system in laravel 5, laravel 6, laravel 7, laravel 8 and laravel 9 application.
In this tutorial, we will integrate like system from scratch and step by step so you can understand and learn how it works. it is very simple and easy way to create like a system in laravel. we will use overtrue/laravel-follow composer package for like dislike system in laravel.
So basically here we will create users table and posts table. we will add some dummy records on posts table using laravel seeder. then we will create laravel default auth using auth command. after that we as we know we can register login new users. after that we will list all posts with like icon and also we will display counter for how many users likes this post like on facebook. we will write code for jquery ajax and make it real time like dislike system. So you need to just follow bellow step and get layout like as bellow screen shot.
Preview:
Step 1: Laravel 5.6 Installation
We are going from scratch so, If you haven't installed laravel 5 in your system then you can run bellow command and get fresh Laravel project.
composer create-project --prefer-dist laravel/laravel blog
Step 2: Install 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
Now open config/app.php file and add service provider and aliase.
In this step we require to create authentication of Laravel 5.6, so laravel provide artisan command to create authentication that way we don't require to create route and controller for login and registration. 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
<?phpuse Illuminate\Support\Facades\Schema;use Illuminate\Database\Schema\Blueprint;use Illuminate\Database\Migrations\Migration;class CreatePostsTable extends Migration{ /** * Run the migrations. * * @return void */ public function up() { Schema::create('posts', function (Blueprint $table) { $table->increments('id'); $table->string('title'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ 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
<?phpnamespace 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
<?phpuse Illuminate\Database\Seeder;use App\Post;class CreateDummyPost extends Seeder{ /** * Run the database seeds. * * @return void */ public function run() { $posts = ['ItSolutionStuff.com', 'Webprofile.me', 'HDTuto.com', 'Nicesnippets.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
<?phpnamespace App;use Overtrue\LaravelFollow\Traits\CanLike;use Illuminate\Notifications\Notifiable;use Illuminate\Foundation\Auth\User as Authenticatable;class User extends Authenticatable{ use CanLike, Notifiable ; /** * 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 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('/', function () { return view('welcome');});Auth::routes();Route::get('/home', 'HomeController@index')->name('home');Route::get('posts', 'HomeController@posts')->name('posts');Route::post('ajaxRequest', 'HomeController@ajaxRequest')->name('ajaxRequest');
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
<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;use App\Post;use App\User;class HomeController extends Controller{ /** * Create a new controller instance. * * @return void */ public function __construct() { $this->middleware('auth'); } /** * Show the application dashboard. * * @return \Illuminate\Http\Response */ public function index() { return view('home'); } /** * Show the application dashboard. * * @return \Illuminate\Http\Response */ public function posts() { $posts = Post::get(); return view('posts', compact('posts')); } /** * Show the application dashboard. * * @return \Illuminate\Http\Response */ public function ajaxRequest(Request $request){ $post = Post::find($request->id); $response = auth()->user()->toggleLike($post); return response()->json(['success'=>$response]); }}
Step 8: Create Blade files and CSS File
Now in this file we will create posts.blade.php file and custom.css file. So let's create both files.
