Rumahweb Journal
banner - Cara Membuat Tampilan CRUD Dengan Filament

Cara Membuat Tampilan CRUD Dengan Filament

Setelah sebelumnya kami bahas tentang apa itu Laravel Filament, pada panduan ini, kami akan membahas bagaimana cara membuat tampilan CRUD dengan filament. Bagaimana cara dan tahapannya? Yuk ikuti langkah-langkah berikut!

Membuat tampilan CRUD dengan Filament

Untuk membuat implementasi CRUD (Create, Read, Update, Delete) menggunakan Filament, terdapat beberapa langkah penting yang harus dilakukan agar proses pengelolaan entitas dapat berjalan dengan baik di dalam panel admin.

Langkah pertama adalah membuat model Eloquent yang akan merepresentasikan entitas yang ingin dikelola. Model Eloquent ini berfungsi sebagai penghubung antara aplikasi Anda dengan tabel database yang relevan.

1. Membuat model dan Migration Data

Sebagai contoh, jika ingin membuat CRUD untuk mengelola artikel berita, Kita perlu membuat model yang bernama Berita. Model ini nantinya akan digunakan untuk menangani data berita yang tersimpan di database. Untuk membuat model tersebut, Kita dapat menjalankan perintah artisan berikut di terminal proyek Laravel:

php artisan migrate

Dengan ini, tabel yang sebelumnya kita buat disini akan tersedia di database kita, siap untuk diisi dan dikelola.

2. Membuat resource CRUD Berita

Selanjutnya, Kita perlu menggunakan fitur CRUD yang disediakan oleh Filament untuk mempermudah pembuatan tampilan halaman admin. Filament menyediakan generator bawaan yang dapat membuat resource CRUD secara otomatis berdasarkan model yang sudah ada. Kita bisa menjalankan perintah berikut:

Pindah Hosting ke Rumahweb Gratis

php artisan make:filament-resource Berita
Membuat resource CRUD Berita

Perintah ini akan membuat resource Berita yang mencakup fungsionalitas CRUD lengkap, termasuk tampilan untuk membuat (create), membaca (read), memperbarui (update), dan menghapus (delete) data berita.

Kita juga dapat menyesuaikan resource ini sesuai dengan kebutuhan, seperti menambahkan validasi, mengubah tampilan formulir, atau menambahkan filter untuk memudahkan pencarian data.

3. Hasil dari resource CRUD Berita

Dengan mengikuti langkah-langkah ini, anda akan memiliki sistem CRUD yang sepenuhnya berfungsi untuk mengelola entitas artikel berita menggunakan Filament. Proses ini tidak hanya menghemat waktu dalam pengembangan, tetapi juga memberikan user interface halaman admin yang modern dan user-friendly.

Seperti berikut tampilan yang sudah dibuat dengan menggunakan resource CRUD dari filament.

Hasil dari resource CRUD Berita

Pengujian CRUD Laravel Filament

Setelah selesai membuat tampilan CRUD di Laravel Filament, langkah selanjutnya kita dapat melakukan pengujian.

1. Fitur Create

Fitur Create

Fitur Create ini berfungsi untuk menyimpan data yang sudah kita inputkan ke database.

create berita

Jika tampilan kosong seperti diatas, kita harus menambahkan sendiri form input datanya pada file app/Filament/Resources/BeritaResources.

  • Menambahkan component yang akan digunakan seperti TextInput, TextArea, dan FileUpload seperti berikut:
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\FileUpload;
menambahkan form input
  • Menambahkan inputan seperti berikut:
membuat tampilan CRUD laravel

Jika kita sudah import komponen dan menambahkan inputan seperti 2 gambar diatas pada point no 2, maka kita akan mendapatkan hasil create seperti berikut dan bisa digunakan untuk menyimpan data di database:

create berita

Setelah menginputkan data dari create, maka akan tampil list dari berita yang sudah ditambahkan sebelumnya.

2. Fitur Update dan Read

Fitur Update dan Read

Pada tampilan list berita juga terdapat button Edit yang akan berfungsi untuk edit data atau update data berita yang kita punyai berikut adalah tampilan dari edit data tersebut. Setelah kita edit data yang kita inginkan kita dapat klik save changes untuk menyimpan datanya.

edit berita

3. Fitur Delete

Kemudian ada juga fitur delete yang disediakan oleh filament dengan cara kita masuk dulu ke edit kemudian bisa untuk delete datanya seperti gambar berikut.

fitur hapus atau delete

Kesimpulan

Membuat aplikasi CRUD di Laravel Filament cukup mudah, karena Filament menyediakan banyak fitur otomatis untuk menangani tampilan, validasi, dan interaksi dengan database.

Kita hanya perlu membuat resource untuk model kita, mendefinisikan form dan tabel, serta menyiapkan halaman CRUD. Pastikan untuk menguji fungsionalitas CRUD secara menyeluruh dan melakukan validasi input data.

Demikian artikel kami tentang bagaimana cara membuat tampilan CRUD dengan filament di Laravel, semoga bermanfaat.

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rating rata-rata 0 / 5. Vote count: 0

Belum ada vote hingga saat ini!

Kami mohon maaf artikel ini kurang berguna untuk Anda!

Mari kita perbaiki artikel ini!

Beri tahu kami bagaimana kami dapat meningkatkan artikel ini?

Cloud Hosting Terbaik Rumahweb

Arief Hidayatullah

banner pop up - Pindah Hosting ke Rumahweb