~ We are changing the world with technology. ~

Matt Mullenweg

Aplikasi Booking Online Laravel 9 & Livewire #1: Struktur Database

Aplikasi Booking Online Laravel 9 & Livewire #1: Struktur Database

415 Dilihat

Pendahuluan

Salah satu kesibukan belakangan ini adalah menemani istri untuk USG, diantara semua proses yang terjadi, ada satu hal yang membuat saya kesal, yakni, sistem antrian manual atau harus berkunjung langsung untuk mendapatkan nomor antrian sesuai urutan kedatangan.

Tidak hanya itu, informasi tentang antrian yang sedang berjalan hanya bisa kita dapatkan dari layar monitor yang tersedia atau panggilan dari petugas. Melalui artikel ini, kita akan memecahkan masalah tersebut dengan membuat Aplikasi Booking Online menggunakan Laravel 9 & Livewire.

Adapun tujuan yang akan kita capai adalah fitur layanan pengambilan antrian secara online berdasarkan slot waktu yang tersedia, masing-masing slot tersebut memiliki batasan kuota harian. Pasien bisa mengambil antrian sehari sebelum jadwal kunjungan dan antrian tersebut akan ditampilkan secara real-time sehingga pasien bisa memperkirakan jadwal kedatangan.

Baca Juga: How to Install MongoDB on Ubuntu 12.04

Struktur Database

Aplikasi ini tergolong sederhana, sehingga table yang diperlukan ada 3 bagian, yakni: daily_slot, orders dan users.

aplikasi booking online laravel 9 & livewire - struktur database

Install Laravel 9 dengan command:

composer create-project laravel/laravel booking-online

Buka file .env dan sesuikan dengan konfigurasi database Anda

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=booking_online
DB_USERNAME=root
DB_PASSWORD=toor

Model & Migration dari table users sudah tersedia secara default, maka tugas kita adalah membuat 2 buah table di atas. Dari command line, jalankan command

php artisan make:model DailySlot -m

Buka file migration yang baru saja di-generate (folder: database/migrations) dan modifikasi menjadi

<?php

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

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('daily_slots', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->integer('quota');
            $table->boolean('is_active');
            $table->timestamps();
        });
    }

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

Generate model berikutnya dengan command

php artisan make:model Order -m

Buka file migration yang baru saja di-generate dan modifikasi menjadi

<?php

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

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('orders', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('daily_slot_id');
            $table->unsignedBigInteger('user_id')->nullable();
            $table->string('name', 50);
            $table->string('age', 5);
            $table->string('phone_number', 15);
            $table->string('note');
            $table->char('status', 1)->comment('0: pending, 1: active, 2: complete, 3: cancel');
            $table->timestamps();
        });
    }

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

Eksekusi kedua migration di-atas dengan command

php artisan migrate

Data Seeder

Ada 3 buah pembagian waktu kunjungan yang akan kita tentukan, yaitu: pagi, sore dan malam. Ketiga kategori ini akan diaktifkan secara default dan petugas klinik memiliki akses untuk memperbaharui kuota dan disable/enable kategori.

Buat seeder berikut untuk meng-input data kategori *daily slot* dengan command

php artisan make:seeder DailySlotSeeder

Buka file database/seeders/DailySlotSeeder.php dan modifikasi menjadi

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use App\Models\DailySlot;

class DailySlotSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        DailySlot::truncate();
        DailySlot::create([
            'name' => 'Pagi: 07:00 - 09:00',
            'quota' => 30,
            'is_active' => true,
        ]);
        DailySlot::create([
            'name' => 'Sore: 16:00 - 18:00',
            'quota' => 30,
            'is_active' => true,
        ]);
        DailySlot::create([
            'name' => 'Malam: 19:00 - 21:00',
            'quota' => 30,
            'is_active' => true,
        ]);
    }
}

Jangan lupa untuk memberikan $fillable pada model app/Moldes/DailySlot.php

<?php

namespace App\Models;

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

class DailySlot extends Model
{
    use HasFactory;
    protected $fillable = ['name', 'quota', 'is_active']; //TAMBAHKAN CODE INI
}

Eksekusi seeder di atas dengan command

php artisan db:seed --class=DailySlotSeeder

aplikasi booking online laravel 9 & livewire - seeder

Kesimpulan

Seri belajar membuat Aplikasi Booking Online menggunakan Laravel 9 & Livewire bagian pertama, kita telah belajar beberapa hal, diantaranya:

  1. Install Laravel 9
  2. Membuat Model & Migration di Laravel 9
  3. Membuat Seeder di Laravel 9
  4. Menganalisa dan menentukan struktur database yang akan digunakan

FullStack Developer, Mobile Developer & Freelancer. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Aplikasi Booking Online Laravel 9 & Livewire #4: Dashboard Admin Page Laravel

Aplikasi Booking Online Laravel 9 & Live...

Klinik memiliki akses penuh dalam mengelola data Pasien, maka melalui artikel ini kita akan membuat 3 buah fitur, yakni: fitur Authentication menggunakan Laravel Jetstream, Kelola data Pasien dan Kelo...

Aplikasi Booking Online Laravel 9 & Livewire #3: Livewire Component & Sistem Antrian Laravel

Aplikasi Booking Online Laravel 9 & Live...

Fitur Janji Temu atau Appointment telah dibuat, berdasarkan data tersebut, kita akan mengolahnya menjadi antrian online. Data akan dikelompokkan dan diurutkan sesuai urutan pasien yang lebih dahulu me...

Aplikasi Booking Online Laravel 9 & Livewire #2: Blade Templating & Appointment Laravel

Aplikasi Booking Online Laravel 9 & Live...

Seri ke-dua dari belajar membuat Aplikasi Booking Online menggunakan Laravel 9 & Livewire adalah bagaimana memadukan Blade templating dan Livewire. Kita juga akan belajar bagaiman setup dengan Livewir...

Komentar