Membuat Like Dislike System Laravel 8 dan VueJS

Admin・ 8 Juni 2021

12 min read ・ 2785 views

Laravel 8 VueJS Like Dislike System - Like Dislike System merupakan system atau fitur yang sering sekali kita jumpai di situs-situs kategori social media seperti twitter, facebook, instagram dan lain-lain. Dengan fitur ini, memungkinkan user untuk memberikan apresiasi dari setiap post dengan fitur like dan memungkinkan juga untuk user memberikan dislike.

Nah, pada artikel ini saya akan membagikan tutorial bagaimana cara membuat atau menerapkan like dislike system sederhana yang dibuat menggunakan laravel versi 8 dan VueJS. Seperti pada artikel-artikel sebelumnya, pada percobaan ini nanti akan kita mulai dari nol.

Mulai Koding Laravel 8 VueJS Like Dislike System

Baiklah, setelah mengetahui kita akan membuat apa pada latihan atau percobaan ini dan sudah mengetahui apa itu like dislike system, sekarang waktunya kita ke koding.

Install Laravel

composer create-project laravel/laravel laravel-vuejs-like-dislike-system

Kita mulai langkah-langkah percobaan membuat like dislike system laravel 8 dan vuejs dengan install laravel terbaru. Silahkan buka terminal kalian, lalu jalankan perintah installasi seperti contoh di atas. Pada percobaan ini, saya akan install laravel project dengan nama laravel-vuejs-like-dislike-system.

cd laravel-vuejs-like-dislike-system

Jika proses installasi sudah selesai, sekarang jalankan perintah seperti di atas untuk masuk ke direktori laravel project yang baru saja diinstall.

Buat Database

Selanjutnya, silahkan buat database baru untuk menampung data-data posts yang akan kita buat nantinya dengan factory. Karena disini saya memakai XAMPP sebagai local server, jadi saya akan membuat database baru dengan nama laravel-vuejs-like-dislike-system di phpMyAdmin.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel-vuejs-like-dislike-system
DB_USERNAME=root
DB_PASSWORD=

Setelah selesai membuat database, jangan lupa untuk menyesuaikan DB configuration di file .env dengan nama database yang baru saja dibuat (contohnya seperti di atas).

Buat Post Model & Migration

php artisan make:model Post -m

Jalankan perintah seperti di atas untuk membuat file Post Model dan Migration.

<?php

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

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('slug');
            $table->unsignedBigInteger('like')->default(0);
            $table->unsignedBigInteger('dislike')->default(0);  
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
} 

Sudah berhasil menjalankan perintah php artisan make:model Post -m ? Kalau sudah, sekarang buka file yang ada di database/migrations/ [timestamp] _create_posts_table.php. Kemudian sesuaikan kode yang ada dengan seperti kode di atas. Di file migration ini, kita akan menambahkan field title, slug, like dan dislike pada posts table. Lanjutkan dengan menjalankan perintah php artisan migrate.

*Tambahkan property protected $guarded = []; pada file App/Http/Models/Post.

Generate Data Dummy Post

php artisan make:factory PostFactory --model=Post

Di langkah ini kita akan membuat data dummy untuk data posts, untuk itu silahkan jalankan perintah seperti di atas pada terminal untuk membuat file PostFactory dengan model Post.

<?php

namespace Database\Factories;

use App\Models\Post;
use Illuminate\Database\Eloquent\Factories\Factory;

class PostFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Post::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'title' => $this->faker->sentence(),
            'slug' => \Str::slug($this->faker->sentence()),
        ];
    }
}

Sebelum mengeksekusi file PostFactory dengan tinker, sekarang silahkan buka file PostFactory.php terlebih dahulu, kemudian sesuaikan kode yang ada dengan kode seperti di atas. Disini kita mendefinisikan data dummy yang akan dibuat untuk field title dan slug.

php artisan tinker
Post::factory()->count(100)->create()

Sekarang kita eksekusi file PostFactory menggunakan tinker. Pertama, jalankan perintah php artisan tinker dan kemudian lanjutkan langkah kedua dengan menjalankan perintah  Post::factory()->count(100)->create() untuk membuat data posts dummy sebanyak 100 data.

Install Vue UI

composer require laravel/ui
php artisan ui vue
npm install && npm run dev

Jalankan perintah-perintah composer di atas secara berurutan untuk install Vue UI dan NPM dependencies.

Buat PostController

php artisan make:controller PostController

Jalankan perintah artisan seperti di atas untuk membuat file PostController.php

<?php

namespace App\Http\Controllers;

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

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::latest()->get();
        return view('post', ['posts' => $posts ]);
    }
 
    public function postDetail($slug)
    {
        $post = Post::where('slug', $slug)->firstOrFail();

        return view('post-detail', ['post' => $post ]);
    }
 
    public function fetchLike(Request $request)
    {
        $post = Post::find($request->post);

        return response()->json(['post' => $post]);
    }
 
    public function handleLike(Request $request)
    {
        $post = Post::find($request->post);
        $post->increment('like');
        $post->save();

        return response()->json(['message' => 'Liked']);
    }    
 
    public function fetchDislike(Request $request)
    {
        $post = Post::find($request->post);
       
        return response()->json(['post' => $post]);
    }
 
    public function handleDislike(Request $request)
    {
        $post = Post::find($request->post);
        $post->increment('dislike');
        $post->save();

        return response()->json(['message' => 'Disliked']);
    }
} 

Jika sudah berhasil membuat file PostController.php, sesuaikan kode yang ada dengan kode seperti di atas. Di PostController ini, kita membuat property post untuk menampilkan data-data post, detail post untuk menampilkan detail dari post tersebut, fetchLike untuk menampilkan jumlah like post detail, handleLike untuk menambah nilai like saat kita klik like, fetchDislike untuk menampilkan jumlah dislike dari setiap detail post dan handleDislike untuk menangkap dan menambah nilai dislike setiap ada klik pada dislike button.

Menambahkan Route

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;

Route::get('/', [PostController::class, 'index']);
Route::get('/{slug}', [PostController::class, 'postDetail'])->name('post');
 
Route::post('/like', [PostController::class, 'fetchLike']);
Route::post('/like/{id}', [PostController::class, 'handleLike']);
 
Route::post('/dislike', [PostController::class, 'fetchDislike']);
Route::post('/dislike/{id}', [PostController::class, 'handleDislike']); 

Kemudian buka file routes/web.php, disini kita perlu mengubah route '/' dan menambahkan beberapa route yang diarahkan pada property-property yang ada di PostController.php

Membuat Vue Component

<template>
    <div class="container">
        <div id="success" class="mb-3"></div>

        <a style="cursor: pointer" @click.prevent="likePost">
            <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
            ({{ alllikes }})
        </a>
    </div>
</template>

<script>
    export default {
        props: ['post'],
        data() {
            return {
                alllikes: '',
            }
        },
        methods: {
            likePost() {
                axios.post('/like/' + this.post, {
                        post: this.post
                    })
                    .then(res => {
                        this.renderLike()
                        $('#success').html(res.data.message)
                    })
                    .catch()
            },
            renderLike() {
                axios.post('/like', {
                        post: this.post
                    })
                    .then(res => {
                        console.log(res.data.post.like)
                        this.alllikes = res.data.post.like
                    })
            }
        },
        mounted() {
            this.renderLike()
        }
    }

</script>

Sekarang waktunya kita untuk membuat component vue yang akan kita gunakan untuk menampilkan fitur like dan fitur dislike pada post detail. Pertama kita buat LikeComponent.vue terlebih dahulu di dalam folder resources/js/components. Kemudian copy semua kode di atas, lalu paste di file LikeComponent.vue yang baru saja dibuat tersebut.

<template>
    <div class="container">
        <div id="success" class="mb-3"></div>
        
       <a style="cursor: pointer" @click.prevent="dislikePost">
           <i class="fa fa-thumbs-o-down" aria-hidden="true"></i> 
           ({{ allDislike }})
       </a>
    </div>
</template>
 
<script>
    export default {
        props:['post'],
        data(){
            return {
                allDislike:'',
            }
        },
        methods:{
            dislikePost(){
                axios.post('/dislike/'+this.post, {post: this.post})
                .then(res =>{
                    this.renderDislike()
                    $('#success').html(res.data.message)
                })
                .catch()
            },
            renderDislike(){
                axios.post('/dislike', {post:this.post})
                .then(res =>{
                    console.log(res.data.post.dislike)
                    this.allDislike = res.data.post.dislike
                })
            }
        },
        mounted() {
            this.renderDislike()
        }
    }
</script>

Kemudian kita buat file component lagi di dalam folder yang sama yaitu resources/js/components. Kali ini kita perlu membuat file component dengan nama DislikeComponent.vue, kemudian copy semua kode di atas lalu paste di file DislikeComponent.vue yang baru saja dibuat tersebut.

Vue.component('like-component', require('./components/LikeComponent.vue').default);
Vue.component('dislike-component', require('./components/DislikeComponent.vue').default);

Lanjutkan dengan mendaftarkan LikeComponent.vue dan DislikeComponent.vue pada file resources/js/app.js. Cara mendaftarkan component vue bisa dilihat seperti kode di atas, silahkan bisa copy kode di atas lalu tambahkan pada file resources/js/app.js.

Setup Vue Component di Blade View

<!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 Vue JS Like Dislike System</title>
        <script src="{{ asset('js/app.js') }}" defer></script>
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>
        <div id="app">
            <main class="py-4">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-md-8">
                            @foreach ($posts as $data)
                            <div class="card mb-2">
                                <div class="card-body">
                                    <a href="{{ route('post', $data->slug) }}">{{ $data->title }}</a>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </body>
</html>

Selanjutnya, silahkan buat file view baru di dalam folder resources/views dan beri nama file view tersebut post.blade.php. Kemudian copy semua kode di atas lalu paste di file post.blade.php yang baru saja dibuat. Fungsi kode di atas sederhana yaitu untuk menampilkan data-data post dalam card.

<!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 Vue JS Like Dislike Sysem</title>
        <script src="{{ asset('js/app.js') }}" defer></script>
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>
        <div id="app">
            <main class="py-4">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-body">
                                    <h2>{{ $post->title }}</h2>
                                    <like-component :post="{{ $post->id }}"></like-component>
                                    <dislike-component :post="{{ $post->id }}"></dislike-component>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </body>
</html>

Kemudian buat file view lagi dengan nama post-detail.blade.php. Di file view ini berfungsi untuk menampilkan post detail dan me-load component-component vue js yang sebelumnya sudah kita buat yaitu LikeComponent.vue dan DislikeComponent.vue

Jika semua langkah sudah selesai, jalankan npm run watch dan php artisan serve.

Pengujian Laravel 8 VueJs Like Dislike System

Setelah melewati proses panjang mulai dari install laravel, membuat data dummy, install laravel sampai setup VueJS component, sekarang kita sampai pada pengujian. Silahkan jalankan perintah php artisan serve lalu buka laravel project pada browser, maka ketika kita klik salah satu post akan menampilkan like dan dislike button yang sebelumnya kita buat pada LikeComponent.vue dan DislikeComponent.vue dan ketika button-button tersebut diklik akan menambah nilai dari like ataupun dislike.

Sekian artikel kali ini, di artikel ini kita sudah sama-sama belajar bagaimana cara membuat dan menerapkan like dislike system di laravel 8 dengan vuejs. Jika ada saran, kritik atau apapun itu yang ingin didiskusikan, silahkan tulis komentar kalian pada form komentar yan tersedia di bawah ini. Selamat mencoba dan sampai jumpa di artikel berikutnya.

Online illustrations by Storyset