Integrasi FullCalendar di NuxtJS dan Laravel API (Part 1)

Bismillahirrahmanirrahim,

Pada tutorial ini, saya akan mencoba untuk mengintegrasikan full-calendar di NuxtJS dan Laravel API.

pada contoh ini, saya akan mengimplementasikan add event, update event dan delete event di full-calendar dengan NuxtJS sebagai Frontend dan Laravel sebagai backend-nya.

Step 1: Install Laravel sebagai API

kita perlu menjalankan perintah untuk membuat laravel project.

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

Step 2: Koneksi ke Database

Langkah selanjutnya, kita set database untuk aplikasi kita, buka file .env pada project, dan set koneksi database disini.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_fullcalendar
DB_USERNAME=USERNAME_DATABASE_ANDA
DB_PASSWORD=PASSWORD_DATABASE_ANDA

Step 3: Membuat Migration

php artisan make:migration create_events_table

sekarang buka file migration pada folder database/migrations/ kemudian tambahkan kode berikut.

<?php

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

class CreateEventsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('events', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->date('start_date');
            $table->date('end_date');
            $table->time('start_time');
            $table->time('end_time');
            $table->timestamps();
        });
    }

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

kemudian jalankan migration

php artisan migrate

Step 4: Membuat Model

untuk membuat Model di laravel anda bisa menggunakan artisan command berikut:

php artisan make:model Event

perintah diatas akan membuat sebuah file baru pada folder App/Models dengan nama Event.php

buka model Event.php kemudian update menjadi seperti berikut:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Event extends Model
{
    use HasFactory;

    protected $fillable = [
        'title','start_date','end_date','start_time','end_time'
    ];
}

Step 5: Membuat Dummy data Event

Sekarang saya akan membuat sebuah data dummy untuk tabel Events, jadi kita akan menambahkan data dummy melalui seeder, jalankan perintah berikut:

php artisan make:seeder EventSeeder

setelah menjalankan perintah diatas, buka file pada folder database/seeds/EventSeeder.php dan tambahkan code berikut:

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use App\Models\Event;

class EventSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $data = [
        	['title'=>'Demo Event-1', 'start_date'=>'2022-07-11', 'end_date'=>'2022-07-12','start_time'=>'09:00','end_time'=>'10:00'],
        	['title'=>'Demo Event-2', 'start_date'=>'2022-07-11', 'end_date'=>'2022-07-13','start_time'=>'08:00','end_time'=>'11:00'],
        	['title'=>'Demo Event-3', 'start_date'=>'2022-07-14', 'end_date'=>'2022-07-14','start_time'=>'13:00','end_time'=>'14:00'],
        	['title'=>'Demo Event-3', 'start_date'=>'2022-07-17', 'end_date'=>'2022-07-17','start_time'=>'11:00','end_time'=>'15:00'],
        ];
        foreach ($data as $key => $value) {
        	Event::create($value);
        }
    }
}

jalankan seeder diatas dengan perintah berikut:

php artisan db:seed --class=EventSeeder

Step 6: Membuat Controller

php artisan make:controller EventController

Setelah menjalankan perintah diatas, kamu bisa cek file EventController.php pada folder app/Http/Controllers, kemudian buka file tersebut.

Step 7: Menampilkan list event

pada file EventController.php kita buat function baru untuk menampilkan list event, tambahkan baris kode berikut:

public function index(Request $request){
        $data = Event::all();
  
        return response()->json($data, 200);
    }

Step 8: Menyimpan, mengupdate dan menghapus event

langkah selanjutnya kita akan membuat operasi untuk menyimpan data event, mengedit dan menghapus event. masih pada file EventController.php tambahkan beris berikut:

public function store(Request $request)
    {
        switch($request->type)
        {
            case 'add':
                    $event = Event::create([
                        'title' => $request->title,
                        'start_date' => date('Y-m-d', strtotime($request->start_date)),
                        'end_date' => date('Y-m-d', strtotime($request->end_date)),
                        'start_time' => date('H:i:s', strtotime($request->start_time)),
                        'end_time' => date('H:i:s', strtotime($request->end_time)),
                    ]);
    
                    return response()->json($event, 201);
                break;
            case 'edit':
                    $event = Event::find($request->id)->update([
                        'title' => $request->title,
                        'start_date' => date('Y-m-d', strtotime($request->start_date)),
                        'end_date' => date('Y-m-d', strtotime($request->end_date)),
                        'start_time' => date('H:i:s', strtotime($request->start_time)),
                        'end_time' => date('H:i:s', strtotime($request->end_time)),
                    ]);
    
                    return response()->json($event,201);
                break;
            case 'delete':
                    $event = Event::find($request->id)->delete();
    
                    return response()->json(
                        array(
                            'success'=>true,
                            'message'=>'Event berhasil dihapus'
                        )
                    );
                break;
        }
    }

secara kesulurhan, file EventController.php akan menjadi seperti berikut:

<?php

namespace App\Http\Controllers;

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

class EventController extends Controller
{
    public function index(Request $request){
        $data = Event::all();
  
        return response()->json($data, 200);
    }

    public function store(Request $request)
    {
        switch($request->type)
        {
            case 'add':
                    $event = Event::create([
                        'title' => $request->title,
                        'start_date' => date('Y-m-d', strtotime($request->start_date)),
                        'end_date' => date('Y-m-d', strtotime($request->end_date)),
                        'start_time' => date('H:i:s', strtotime($request->start_time)),
                        'end_time' => date('H:i:s', strtotime($request->end_time)),
                    ]);
    
                    return response()->json($event, 201);
                break;
            case 'edit':
                    $event = Event::find($request->id)->update([
                        'title' => $request->title,
                        'start_date' => date('Y-m-d', strtotime($request->start_date)),
                        'end_date' => date('Y-m-d', strtotime($request->end_date)),
                        'start_time' => date('H:i:s', strtotime($request->start_time)),
                        'end_time' => date('H:i:s', strtotime($request->end_time)),
                    ]);
    
                    return response()->json($event,201);
                break;
            case 'delete':
                    $event = Event::find($request->id)->delete();
    
                    return response()->json(
                        array(
                            'success'=>true,
                            'message'=>'Event berhasil dihapus'
                        )
                    );
                break;
        }
    }
}

Step 7: Update Route api.php

langkah selanjutnya adalah menyiapkan route untuk pemanggilan api nya, sekarang buka file api.php dari folder routes, kemudian tambahkan baris berikut:

Route::get('event',[App\Http\Controllers\EventController::class,'index']);
Route::post('store-event',[App\Http\Controllers\EventController::class,'store']);

kemudian jalankan server

php artisan server

dan endpoint api event dengan menggunakan postman. jika sukses akan maka hasilnya akan seperti ini.