Tutorial Laravel Filament 5 #4 : Membuat CRUD Categories Dengan Resource

• Langkah 1 - Membuat Resource Category
• Langkah 2 - Mengubah Icon di Sidebar
• Langkah 3 - Mengubah Redirect URL
  • Redirect setelah Create
  • Redirect setelah Edit
• Langkah 4 - Uji Coba Create Category
• Kesimpulan

Halo teman-teman semuanya, setelah sebelumnya kita berhasil melakukan installasi dan konfigurasi Laravel Filament 5, maka pada kesempatan kali ini kita semua akan belajar membuat sebuah CRUD untuk data categories dengan fitur Resource milik Laravel Filament 5.

Langkah 1 - Membuat Resource Category

NOTE : Dalam pembuatan resource, pastikan menggunakan nama yang sama dengan Model.

Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.

php artisan make:filament-resource Category --generate

Perintah di atas, akan menampilkan konfirmasi seperti berikut ini.

The "title attribute" is used to label each record in the UI.

 You can leave this blank if records do not have a title.

 ┌ What is the title attribute for this model? ─────────────────┐
 │                                                              │
 └──────────────────────────────────────────────────────────────┘

Teman-teman langsung ENTER aja.

Kemudian akan muncul lagi konfirmais seperti berikut ini.

 ┌ Would you like to generate a read-only view page for the resource? ┐
 │ ○ Yes / ● No                                                       │
 └────────────────────────────────────────────────────────────────────┘

Pilih No dan ENTER.

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan beberapa file yang berada di dalam folder app/Filament/Resources, kurang lebih seperti berikut ini.

app/Filament/Resources
.
+-- Categories
|   +-- CategoryResource.php
|   +-- Pages
|   |   +-- CreateCategory.php
|   |   +-- EditCategory.php
|   |   +-- ListCategories.php
|   +-- Schemas
|   |   +-- CategoryForm.php
|   +-- Tables
|   |   +-- CategoriesTable.php

Sekarang, silahkan teman-teman reload halaman admin panel-nya, maka menu Categories akan muncul di sidebar.

Langkah 2 - Mengubah Icon di Sidebar

INFO : Filament menggunakan icon dari Heroicons.

Pertama, kita akan ubah icon categories yang ada pada sidebar, silahkan teman-teman buka file app/Filament/Resources/CategoryResource.php, kemudian cari kode berikut ini.

app/Filament/Resources/Categories/CategoryResource.php

protected static string|BackedEnum|null $navigationIcon = Heroicon::OutlinedRectangleStack;

Kemudian ubah menjadi seperti berikut ini:

app/Filament/Resources/Categories/CategoryResource.php

protected static string|BackedEnum|null $navigationIcon = Heroicon::OutlinedFolder;

Sekarang silahkan reload, maka icon Categories di sidebar akan berubah.

Langkah 3 - Mengubah Redirect URL

Secara default, setelah proses create dan edit, Filament biasanya akan redirect ke halaman edit. Nah, disini kita akan ubah agar setelah create dan edit diarahkan ke halaman index.

• Redirect setelah Create

  Pertama, kita akan menambahkan untuk halaman create. Silahkan teman-teman buka file app/Filament/Resources/CategoryResource/Pages/CreateCategory.php, kemudian tambahkan method ini di dalamnya.

  app/Filament/Resources/Categories/Pages/CreateCategory.php

  /**
  * getRedirectUrl
  *
  * @return string
  */
  protected function getRedirectUrl(): string
  {
      return $this->getResource()::getUrl('index');
  }
  

• Redirect setelah Edit

  Kedua, kita akan menambahkan untuk halaman edit. Silahkan teman-teman buka file app/Filament/Resources/CategoryResource/Pages/EditCategory.php, kemudian tambahkan method ini di dalamnya.

  app/Filament/Resources/CategoryResource/Pages/EditCategory.php

  /**
  * getRedirectUrl
  *
  * @return string
  */
  protected function getRedirectUrl(): string
  {
      return $this->getResource()::getUrl('index');
  }
  

Dengan begitu, setelah proses create dan edit, kita akan langsung diarahkan kembali ke halaman daftar data (index).

Langkah 4 - Uji Coba Create Category

Sekarang jika kita klik New category, maka kita sudah dibuatkan form secara otomatis untuk tambah data sesuai dengan field yang ada di dalam table, kurang lebih seperti berikut ini.

Sekarang, silahkan teman-teman masukkan data category, jika berhasil maka hasilnya kurang lebih seperti berikut ini.

Di atas, kita sudah berhasil melakukan proses create data ke dalam database, dan ditampilkan di dalam project.

Kesimpulan

Pada artikel kali ini, kita telah berhasil membuat sebuah CRUD dengan sangat cepat menggunakan fitur Resource yang disediakan oleh Laravel Filament 5.

Pada artikel selanjutnya, kita akan belajar membuat Model dan Migration untuk data Post dan juga sekaligus membuat relasi antara table categories dan posts.

Terima Kasih