Create Livewire Blade View

Silakan teman-teman buka file dengan nama create.blade.php yang terletak didalam folder:

resources/views/livewire/catatan/

Kemudian ubah menjadi seperti berikut ini:

<div>
    <flux:modal name="create-catatan" class="md:w-900">
        <div class="space-y-6">
            <div>
                <flux:heading size="lg">Create Catatan</flux:heading>
                <flux:text class="mt-2">Make changes to your catatan details.</flux:text>
            </div>

            <flux:input label="Judul" wire:model="judul" placeholder="Masukkan Judul Catatan" />

            <flux:textarea label="Isi" wire:model="isi" placeholder="Masukkan Isi Catatan" />

            <div class="flex">
                <flux:spacer />

                <flux:button type="submit" variant="primary" wire:click="save">Save changes</flux:button>
            </div>
        </div>
    </flux:modal>
</div>

Struktur Kode

<div>
    <flux:modal name="create-catatan" class="md:w-900">

• Di sini kita menggunakan komponen modal dari Flux UI.

• name="create-catatan" ini wajib sama dengan pemanggilan di class Create.php, contoh:

  Flux::modal('create-catatan')->show();
  

• class="md:w-900" mengatur lebar modal di ukuran 900px pada layar medium ke atas.

Bagian Judul Modal

<div>
    <flux:heading size="lg">Create Catatan</flux:heading>
    <flux:text class="mt-2">Make changes to your catatan details.</flux:text>
</div>

Bagian ini hanya menampilkan teks judul dan deskripsi singkat. Bisa diubah sesuai kebutuhan, misalnya menjadi:

"Tambahkan catatan baru untuk kebutuhan pribadi atau pekerjaan Anda."

Input Form

bladeSalinEdit<flux:input label="Judul" wire:model="judul" placeholder="Masukkan Judul Catatan" />
<flux:textarea label="Isi" wire:model="isi" placeholder="Masukkan Isi Catatan" />

• flux:input untuk input teks biasa (judul catatan).
• flux:textarea untuk input multiline (isi catatan).
• Keduanya menggunakan wire:model, artinya nilai dari input ini langsung terhubung secara otomatis ke properti $judul dan $isi di class Livewire Create.

Tombol Simpan

<div class="flex">
    <flux:spacer />
    <flux:button type="submit" variant="primary" wire:click="save">Save changes</flux:button>
</div>

• flux:spacer berguna untuk mendorong tombol ke kanan (menggunakan Flexbox).
• wire:click="save" akan memanggil method save() yang sudah kita definisikan di class Create.php.
• Tombol ini adalah trigger untuk menyimpan data ke database.

Komponen FLUX UI

Semua elemen seperti flux:modal, flux:input, dan flux:button ini berasal dari Flux UI.

Kesimpulan

Secara umum, file create.blade.php ini:

• Menyediakan antarmuka sederhana untuk menambah catatan baru.
• Sudah live bound ke class Livewire, jadi interaksinya sangat reaktif tanpa reload halaman.
• Sangat fleksibel untuk dikembangkan, misalnya kamu bisa tambahkan validasi visual, loader saat menyimpan, atau notifikasi toast.

Kalau bagian ini sudah selesai, kita bisa lanjut ke file index.blade.php untuk menampilkan daftar catatan.