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 laravelFullCalenderStep 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_ANDAStep 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 migrateStep 4: Membuat Model
untuk membuat Model di laravel anda bisa menggunakan artisan command berikut:
php artisan make:model Eventperintah 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 EventSeedersetelah 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=EventSeederStep 6: Membuat Controller
php artisan make:controller EventControllerSetelah 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 serverdan 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.