Sistem like dan dislike Larave 8 vue js. Dalam tutorial ini, Anda akan belajar bagaimana menerapkan sistem likedislike dengan Vue js di aplikasi laravel 8.

Jika Anda membuat aplikasi media sosial atau aplikasi posting blog dengan Vue js dan laravel. Pada saat itu Anda perlu mengimplementasikan sistem post like dislike di aplikasi laravel Vue js Anda.

Tutorial ini sepenuhnya akan memandu Anda dari awal ke membangun sistem like dislike dengan posting blog atau aplikasi media sosial Anda di laravel vue js.

Langkah 1: Instal Aplikasi Laravel 8

Pada langkah ini, Anda perlu menginstal aplikasi terbaru laravel, Jadi buka terminal ATAU command prompt Anda dan jalankan perintah berikut:

 composer create-project --prefer-dist laravel/laravel blog 

Langkah 2: Menghubungkan Aplikasi ke Database

Setelah berhasil menginstal aplikasi laravel 8, Masuk ke direktori root proyek Anda dan buka file .env . Kemudian atur kredensial database dalam file .env sebagai berikut:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

Langkah 3: Jalankan Make Auth Command

Pada langkah ini, jalankan perintah berikut di terminal untuk membuat auth di aplikasi laravel 8:

cd blog
 
composer require laravel/ui --dev
 
php artisan ui vue --auth

laravel/ui Paket laravel ini menyediakan cara cepat untuk melakukan scaffold pada semua route, controller, dan view dengan autentikasi.

Langkah 4: Buat Model dan Migrasi

Pada langkah ini, Anda perlu menjalankan perintah berikut di terminal untuk membuat model dan factory:

php artisan make:model Post -fm

Perintah ini akan membuat satu nama model post.php dan juga membuat satu file migrasi untuk tabel posts .

Sekarang buka file migrasi create_postss_table.php dari  database>migrations dan ganti   fungsi up() dengan kode berikut:

<?php
 
use 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->bigIncrements('id');
            $table->string('title');
            $table->string('slug');
            $table->unsignedBigInteger('user_id');
            $table->unsignedBigInteger('like')->default(0);
            $table->unsignedBigInteger('dislike')->default(0);
            $table->timestamps();
      });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Selanjutnya, migrasikan tabel menggunakan perintah di bawah ini:

php artisan migrate

Selanjutnya, Arahkan ke app/Post.php dan perbarui kode berikut ke dalam model Post.php Anda sebagai berikut:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Post extends Model
{
    use HasFactory;
 
    protected $fillable = [
        'title', 'description'
    ];
 
    public function getRouteKeyName()
    {
        return 'slug';
    }
}

Selanjutnya, Arahkan ke database/factories dan buka PostFactory.php. Kemudian perbarui kode berikut menjadi seperti berikut:

/** @var \Illuminate\Database\Eloquent\Factory $factory */
 
use App\Models\Post;
use Faker\Generator as Faker;
 
$factory->define(Post::class, function (Faker $faker) {
    return [
       'title' => $faker->sentence,
       'slug' => \Str::slug($faker->sentence),
       'user_id' => 1
    ];
});

dan kemudian jalankan perintah berikut di terminal untuk menghasilkan data palsu menggunakan faker sebagai berikut:

php artisan tinker
//and then
factory(\App\Models\Post::class,20)->create()
exit

Langkah 5: Konfigurasi NPM

Pada langkah ini, Anda perlu mengatur Vue dan menginstal dependensi Vue menggunakan NPM. Jadi jalankan perintah berikut pada command prompt:

php artisan preset vue

Instal semua dependensi Vue:

npm install

Langkah 6: Tambahkan Route

Langkah selanjutnya, buka folder route dan buka file web.php dan tambahkan route berikut ke dalam file Anda:

ruotes/web.php

use App\Http\Controllers\PostController;
 
Route::get('post', [PostController::class, 'index']);
Route::get('post/{slug?}', [PostController::class, 'show'])->name('post');
 
Route::post('like', [PostController::class, 'getlike']);
Route::post('like/{id}', [PostController::class, 'like']);
 
Route::post('dislike', [PostController::class, 'getDislike']);
Route::post('dislike/{id}', [PostController::class, 'dislike']);

Langkah 7: Buat Perintah Dengan Controller

Langkah selanjutnya, buka command prompt Anda dan jalankan perintah berikut di terminal untuk membuat controller oleh artisan:

php artisan make:controller PostController

Setelah itu, buka  app\Http\Controllers dan buka file PostController.php. Kemudian perbarui kode berikut ke dalam file PostController.php Anda :

<?php
namespace App\Http\Controllers;
 
use App\Models\Post;
use Facades\App\Repository\Posts;
use Illuminate\Http\Request;
 
class PostController extends Controller
{
    public function index()
    {
        $posts = Post::latest()->get();
        return view('posts',['posts' => $posts ]);
    }
 
    public function show(Post $slug)
    {
        return view('single-post',['post' => $slug ]);
    }
 
    public function getlike(Request $request)
    {
        $post = Post::find($request->post);
        return response()->json([
            'post'=>$post,
        ]);
    }
 
    public function like(Request $request)
    {
        $post = Post::find($request->post);
        $value = $post->like;
        $post->like = $value+1;
        $post->save();
        return response()->json([
            'message'=>'Thanks',
        ]);
    }    
 
    public function getDislike(Request $request)
    {
        $post = Post::find($request->post);
        return response()->json([
            'post'=>$post,
        ]);
    }
 
    public function dislike(Request $request)
    {
        $post = Post::find($request->post);
        $value = $post->dislike;
        $post->dislike = $value+1;
        $post->save();
        return response()->json([
            'message'=>'Thanks',
        ]);
    }
}

Langkah 8: Buat Komponen Vue

Langkah selanjutnya, masuk ke  resources/assets/js/components folder dan buat file bernama  LikeComponent.vue dan DisLikeComponent.vue.

Sekarang, perbarui kode berikut ke file komponen LikeComponent.vue Anda :

<template>
    <div class="container">
        <p id="success"></p>
       <a href="http://"><i @click.prevent="likePost" class="fa fa-thumbs-up" aria-hidden="true"></i>({{ totallike }})</a>
    </div>
</template>
 
<script>
    export default {
        props:['post'],
        data(){
            return {
                totallike:'',
            }
        },
        methods:{
            likePost(){
                axios.post('/like/'+this.post,{post:this.post})
                .then(response =>{
                    this.getlike()
                    $('#success').html(response.data.message)
                })
                .catch()
            },
            getlike(){
                axios.post('/like',{post:this.post})
                .then(response =>{
                    console.log(response.data.post.like)
                    this.totallike = response.data.post.like
                })
            }
        },
        mounted() {
            this.getlike()
        }
    }
</script> 

Selanjutnya, perbarui kode berikut menjadi file DisLikeComponent.vue sebagai berikut:

<template>
    <div class="container">
        <p id="success"></p>
       <a href="http://"><i @click.prevent="disLikePost" class="fa fa-thumbs-down" aria-hidden="true"></i>({{ totalDislike }})</a>
    </div>
</template>
 
<script>
    export default {
        props:['post'],
        data(){
            return {
                totalDislike:'',
            }
        },
        methods:{
            disLikePost(){
                axios.post('/dislike/'+this.post,{post:this.post})
                .then(response =>{
                    this.getDislike()
                    $('#success').html(response.data.message)
                })
                .catch()
            },
            getDislike(){
                axios.post('/dislike',{post:this.post})
                .then(response =>{
                    console.log(response.data.post.dislike)
                    this.totalDislike = response.data.post.dislike
                })
            }
        },
        mounted() {
            this.getDislike()
        }
    }
</script> 

Sekarang buka  resources/assets/js/app.js dan sertakan  komponen LikeComponent.vue dan DisLikeComponent.vue sebagai berikut:

require('./bootstrap');
 
window.Vue = require('vue');
 
Vue.component('like-component', require('./components/LikeComponent.vue').default);
 
Vue.component('dis-like-component', require('./components/DisLikeComponent.vue'));
 
const app = new Vue({
    el: '#app',
});

Langkah 9: Buat Tampilan Blade dan Inisialisasi Komponen Vue

Pada langkah ini, navigasikan ke resource / views dan buat satu folder bernama layout . Di dalam folder ini buat satu file view blade bernama file app.blade.php .

Selanjutnya, Arahkan ke resources/views/layouts dan buka file app.blade.php. Kemudian perbarui kode berikut ke dalam file app.blade.php Anda sebagai berikut:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
 
    <title>Laravel 8 Vue JS Like Dislike Example - Medikre.com</title>
 
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
 
    @stack('fontawesome')
 
</head>
<body>
    <div id="app">
 
        <main class="py-4">
            @yield('content')
        </main>
 
    </div>
</body>
</html>

Selanjutnya, Arahkan ke resources/views/ dan buat satu nama file posts.blade.php. Kemudian perbarui kode berikut ke file posts.blade.php Anda sebagai berikut:

@extends('layouts.app')
 
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Post Lists</div>
 
                <div class="card-body">
                    <ul>
                        @foreach ($posts as $item)
                         <a href="{{ route('post',$item->slug) }}"><li>{{ $item->title }}</li></a>
                        @endforeach
                    </ul>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection 

Sekali lagi, Arahkan ke resources/views/ dan buat satu nama file single-post.blade.php. Kemudian perbarui kode berikut ke file single-post.blade.php Anda sebagai berikut:

@extends('layouts.app')
@push('fontawesome')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@endpush
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Post Detail</div>
 
                <div class="card-body">
                    <ul>
                       
                         <li>{{ $post->title }}</li>
                         <like-component :post="{{ $post->id }}"></like-component>
                         <dis-like-component :post="{{ $post->id }}"></dis-like-component>
                          
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection 

Langkah 10: Jalankan Server Pengembangan

Sekarang, jalankan perintah berikut di terminal untuk memulai server pengembangan:

npm run dev
 
or 
 
npm run watch

Conclusion

Dalam tutorial like dislike Vue js with laravel ini, Anda telah mempelajari bagaimana mengimplementasikan sistem like dislike dengan Vue js di aplikasi laravel.