Like Dislike Features in Laravel 7 using Vue Js
In this tutorial i am going to show you how we can create laravel like dislike system using vue js. I will show you step by step how to make a like feature in laravel with vue js. If you don't know how to use vue js in laravel, then this tutorial is for you.
From this tutorial you will learn how to use vue js in laravel and how you can create like dislike feature in laravel vue application. I will teach you from scratch. You can like one post without page refresh. Cause here i wll use vue js and when we hit like button then i will send ajax request to serve.
I will create a Question model and a Vue component to write our all vue js code. Here i will use axios get request to get data and axios post request to send request to server. Hope you will enjoy this.
Preview:
Step 1: Install Laravel
As i will show you like dislike feature in laravel from scratch so you have to download fresh laravel app. To download it, run below command.
composer create-project --prefer-dist laravel/laravel blog
Step 2: Make auth
Only logged in user can like a post. So we have to make auth in our app. Laravel's laravel/ui package provides a quick way to scaffold all of the routes and views you need for authentication using a few simple commands. So run below command.
composer require laravel/ui --dev
php artisan ui vue --auth
Step 3: Setup Migration
To create post like system, run below command to create a Question model
php artisan make:model Question -m
after doing it open your posts migration file and paste this following code.
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateQuestionsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('questions', function (Blueprint $table) {
$table->id();
$table->string('title')->unique();
$table->string('slug')->unique();
$table->string('description');
$table->integer('user_id');
$table->integer('like')->default(0);
$table->integer('dislike')->default(0);
$table->integer('view_count')->default(0);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('questions');
}
}
Now run php artisan migrate to migrate our table.
php artisan migrate
Step 4: Setup Route
We need route to create like dislike system in laravel using vue js. So paste below code.
routes/web.php
//Like and disliek route
Route::post('/like','LikeController@hit_like')->name('like');
Route::get('/like/{id}','LikeController@load_all_like');
Route::post('/dislike','LikeController@hit_dislike')->name('dislike');
Route::get('/dislike/{id}','LikeController@load_all_dislike');
Step 5: Setup Model
Now open Question model, cause we have to bind our route. If you don't know what is route model binding, you can read this article. Route model binding
app/Question.php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Question extends Model
{
protected $guarded = [];
public function user()
{
return $this->belongsTo(User::class);
}
public function getRouteKeyName()
{
return 'slug';
}
}
app/User.php
namespace App;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
class User extends Authenticatable
{
use Notifiable;
protected $guarded = [];
public function questions()
{
return $this->hasMany(Question::class);
}
public function getRouteKeyName()
{
return 'username';
}
}
Step 6: Setup Controller
We need two controller. One for show question to user and other for ask question and like dislike. So paste below code in two controller.
app/Https/Controller/LikeController.php
namespace App\Http\Controllers\User;
use App\Question;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class LikeController extends Controller
{
public function __construct()
{
$this->middleware('auth');
}
public function hit_like(Request $request)
{
$question = Question::findOrFail($request->id);
$question->like = $question->like + 1;
$question->save();
return response()->json([
"success" => "Thanks!"
]);
}
public function load_all_like($id)
{
$question = Question::findOrFail($id);
return response()->json([
"question" => $question
]);
}
public function hit_dislike(Request $request)
{
$question = Question::findOrFail($request->id);
$question->dislike = $question->dislike + 1;
$question->save();
return response()->json([
"question" => $question
]);
}
public function load_all_dislike($id)
{
$question = Question::findOrFail($id);
return response()->json([
"question" => $question
]);
}
}
Step 7: Change app.js file
Now we need to setup our all vue configuration. To do it follow below instruction carefully.
npm install
now create a LikeComponent to create our post and paste this code.
resources/js/components/LikeComponent.vue
now open app.js file and paste this followng code.
resources/js/app.js
require('./bootstrap');
window.Vue = require('vue');
//component
Vue.component('like-component', require('./components/likeComponent.vue').default);
const app = new Vue({
el: '#app',
});
Step 8: Create View
Now we are in final step. Just we need to create our view file to show like dislike button. So let's doit in the following path.
Now time to setup our blade file. open resources/layouts/app.php and paste this following code.
resources/views/layouts/app.blade.php
Now we have to show our single question page. To show single question, paste below code in the followng pasth.
resources/views/single.blade.php
Everything is ok now. You just need to create question and show this question in a single page. After showing in a single page, just paste this like component below content. Hope you understand. You can follow git repo from here. Like Dislike system laravel vue js.
Now everything is set to go. Now just we have to compile our all JavaScript file. so run below command.
npm run dev
//or
npm run watch
Read also : Laravel Vue Js Form Submit With Validation Using V-form Package
Hope it can help you.