Cara Mudah Membuat Admin Panel dengan Menggunakan Laravel Filament

12 Feb 2025 13:45 8 Hits 0 Comments Approved by Plimbi
Dalam artikel ini, kita akan membahas cara mudah untuk membuat panel admin menggunakan Laravel Filament, langkah demi langkah. Tidak perlu khawatir jika kamu baru pertama kali mencobanya. Kami akan menjelaskan semuanya dengan cara yang sederhana dan mudah dipahami. 

Dalam pengembangan aplikasi web, panel admin sering kali menjadi bagian penting untuk mengelola konten dan pengguna. Namun, membuat panel admin dari nol sering kali memakan waktu dan memerlukan banyak kode. Untungnya, Laravel Filament hadir sebagai solusi untuk mempermudah proses ini.

Laravel Filament adalah sebuah package yang memungkinkan kamu untuk membuat panel admin dengan antarmuka yang bersih dan user-friendly. Dengan Filament, kamu tidak perlu menulis banyak kode untuk membuat panel admin yang kompleks. Hanya dengan beberapa langkah sederhana, kamu bisa memiliki panel admin yang siap pakai, dapat diakses dengan aman, dan mudah disesuaikan sesuai kebutuhan aplikasi.

Dalam artikel ini, kita akan membahas cara mudah untuk membuat panel admin menggunakan Laravel Filament, langkah demi langkah. Tidak perlu khawatir jika kamu baru pertama kali mencobanya. Kami akan menjelaskan semuanya dengan cara yang sederhana dan mudah dipahami. Jadi, mari kita mulai!

1. Buat database baru dengan nama sesuai keinginan Anda di phpMyAdmin atau Anda dapat juga membuatnya di terminal atau command prompt. Setelah itu biarkan kosong terlebih dahulu. Tidak perlu menambah tabel atau yang lainnya.

2. Buka Terminal / Command Prompt

3. Buat Project Laravel Baru

Sebelum membuat project laravel baru, pastikan bahwa Anda sudah memiliki PHP versi 8 atau lebih tinggi, web server, dan juga composer di perangkat Anda. Selain itu, pastikan juga projek laravel yang Anda install memiliki versi 10 ke atas. Jika Anda menggunakan composer untuk menginstall projek laravelnya berikut adalah perintahnya:

  • composer create-project laravel/laravel="^11.0" nama_projekanda

Ganti nama_projekanda menjadi nama projek yang anda inginkan

Untuk mengetahui langkah-langkah membuat projek laravel yang lengkap, Anda dapat membaca artikel sebelumnya melalui link dibawah ini:

https://www.plimbi.com/article/179848/tutorial-menginstal-laravel-untuk-pemula-di-windows?force_desktop=1

4. Install Filament

Anda dapat mengintall filament ke projek laravel Anda dengan menggunakan perintah berikut:

  • composer require filament/filament:"^3.0-stable" -W
  • php artisan filament:install –panels
  • php artisan filament:publish

5. Konfigurasi Database

Dalam direktori projek laravel Anda, terdapat file bernama .env. buka file tersebut dan ubah variable dibawah ini sesuai dengan database yang telah Anda buat sebelumnya.

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=nama_database

DB_USERNAME=nama_pengguna_database

DB_PASSWORD=kata_sandi_database

6. Jalankan migrasi dengan menggunakan perintah berikut:

  • php artisan migrate

7. Buat user atau akun admin pertama dengan menjalankan perintah berikut:

  • php artisan filament:user

Anda akan diminta untuk mengisi nama, email dan password yang akan digunakan untuk login nanti.

8. Jalankan server dengan menggunakan perintah berikut:

  • php artisan serve

9. Buka browser dan buka  >http://localhost:8000/admin> untuk mengakses halaman login admin panel. Kemudian login menggunakan akun admin yang telah dibuat sebelumnya.

10. Buat tampilan CRUD dengan menggunakan filament UI

Untuk membuat CRUD (Create, Read, Update, Delete) dengan filament, Anda perlu membuat model terlebih dahulu. Misalnya jika ingin membuat website artikel atau blog, anda dapat membuat model seperti berikut:

  • php artisan make:model Blog -m

perintah tersebut juga sekaligus membuat migrasi untuk tabel blogs> 

11. Edit migrasi database blog untuk menentukan kolom apa saja yang dibutuhkan oleh model. Sebagai contoh disini saya membutuhkan judul, isi, dan penulis, maka kita dapat menambahkan kode berikut ke dalam method up dari migrasi database.

Schema::create('blogs', function (Blueprint $table) {

$table->id();

$table->string('judul');

$table->text('isi');

$table->string('penulis');

$table->timestamps();

});

12. Jalankan migrasi kembali dengan menuliskan:

  • php artisan migrate> 

13. Buat filament resource dengan menuliskan kode berikut di terminal.

  • php artisan make:filament-resource BlogResource

File BlogResource nantinya akan terbuat dan tersimpan otomatis di app/Filament/Resource.> 

14. Edit class BlogResource untuk menentukan model apa saja yang akan anda tampilkan dan kelola di panel adminnya. Seperti contoh, Anda ingin agar admin dapat menampilkan, mengedit dan menghapus judul, isi, dan penulis dari model Blog, maka anda dapat menuliskan kode berikut di function form dan function table.

public static function form(Form $form): Form

{

return $form

->schema([

 Forms\Components\TextInput::make('judul')

->label('Judul')

 ->required()

 ->maxLength(255),

Forms\Components\Textarea::make('isi')

 ->label('isi')

 ->required(),

Forms\Components\TextInput::make(' Penulis ')

->label('Penulis')

->required()

->maxLength(255),

]);

}

public static function table(Table $table): Table

{

return $table

->columns([

Tables\Columns\TextColumn::make('judul')->sortable()->searchable(),

Tables\Columns\TextColumn::make('isi'),

Tables\Columns\TextColumn::make('penulis') ->sortable()->searchable(),

])

->filters([

//

])

->actions([

Tables\Actions\EditAction::make(),

])

->bulkActions([

Tables\Actions\BulkActionGroup::make([

Tables\Actions\DeleteBulkAction::make(),

]),

])

->emptyStateActions([

Tables\Actions\CreateAction::make(),

]);

}

15. Jalankan server dan uji CRUD di panel adminnya.

 

Tentunya selain langkah-langkah diatas, Anda dapat mengembangkan admin panel Anda sesuai dengan keinginan dan kebutuhan Anda. Selamat mencoba!

 
Tags

About The Author

Najwa Aidatul Karomah 10
Novice

Najwa Aidatul Karomah

Saya adalah Siswi SMKN 1 Katapang
Plimbi adalah tempat menulis untuk semua orang.
Yuk kirim juga tulisanmu sekarang
Submit Artikel