Jamal Apriadi- 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.

setelah selesai dengan API, langkah selanjutnya kita akan masuk di Frontend.

setelah ini kita akan install NuxtJS.

Integrasi FullCalendar di NuxtJS dan Laravel API (Part 1)

More From Blog