Learning by Project I - Development Modul II

Sebelum kita memulai membuat panel untuk user, terlebih dahulu kita lihat desain sistem pada user atau penggunanya. Berikut adalah Roadmap pengerjaan backoffice website ormawa dengan menggunakan Laravel & Filamentphp berdasarkan analisa dan perancangan aplikasi kita:

Tabel Roadmap Pembuatan Backoffice Ormawa Menggunakan Laravel & Filamentphp

Lokasi File/Direktori yang menjadi catatan kita dalam project laravel ini. Dimana file / Direktori tersebut akan sering kita pergunakan selama dalam proses developement. Berikut lokasinya:

  1. 1. Model : app/Models
  2. 2. Migration : databases/Migrations
  3. 3. Provider : app/Providers
  4. 4. Filament : app/Filament
  5. 5. Website Routing : routes/web.php
  6. 6. Controller : app/Http/Controllers
  7. 7. View : resources/views
  8. 8. Tema Website Frontend/Frontoffice (CSS & JavaScript) : Public


Install Filament ke project laravel

Pastikan server di aplikasi laragon sudah dijalankan, kemudian buka terminal baru atau yang sudah ada di VS Code project kita, namun jika menemukan pesan error dan tidak berhasil install maka buka terminal dari windows, arahkan direktori terminal ke c:\laragon\www\project-pertama-ku. Ketikkan perintah berikut untuk install flament :

composer require filament/filament:"^3.3" -W

Install Filament

Jika berhasil install : 

Install filament berhasil

Install Panel ke project laravel

Seperti yang dijelaskan diawal, kita memiliki 2 jenis user, maka kita akan membuat satu panel untuk tiap jenis usernya. 

1. Panel Admin 

Ketikkan perintah berikut untuk install flament :

php artisan filament:install --panels

Jika muncul pertanyaan What is ID? maka ketikkan admin untuk membuat panel jenis user admin seperti terlihat digambar berikut:

Panel Admin
Panel Admin Success

2. Panel Pengurus

Sama seperti yang sebelumnya, Ketikkan perintah berikut untuk install flament :

php artisan filament:install --panels

kemudian akan muncul pertanyaan untuk ID panel, ketikkan pengurus. 

Maka kita sudah membuat 2 panel. Agar kita dapat login ke panel tersebut maka terlebih dahulu kita buat user, harap diingat email dan password yang diinputkan. Ketikkan perintah berikut untuk membuat user dan menyimpannya ke database tabel User:

php artisan make:filament-user

Ikuti petunjuk selanjutnya dan masukkan data sesuai dengan yang kita inginkan. Sekali lagi harap diingat password yang diinputkan agar kita dapat login ke panel nantinya. Perlu diperhatikan ketika mengetikkan password maka pada terminal akan tidak muncul apa-apa, untuk keamanan password yg diketik diterminal tidak akan dimunculkan ke layar, tetapi tetap akan dicatat oleh terminal. Perhatikan contoh berikut, kolom password sudah diisi tetapi sebenarnya itu tercatat di terminal, dapat anda lihat pada gambar :

Tambahkan user (email & password) agar dapat login ke dashboard admin

Sekarang kita akan mencoba akses panel panel tersebut apakah kita berhasil membuat panel atau tidak. Buka browser dan ketikkan alamat berikut untuk panel admin : localhost:8000/admin  dan untuk panel pengurus localhost:8000/pengurus. Jika berhasil maka akan muncul seperti gambar dibawah:

Login Admin

Silahkan masukkan email dan password yang sudah dibuat sebelumnya dan klik tombol masuk maka akan diarahkan ke dashboard berikut:

Dashbord Admin
Jika sudah muncul seperti gambar diatas maka kita sudah berhasil membuat panel admin.

Filament-Resource

Filament Resource adalah proses  pembuatan CRUD (Create, Read, Update, Delete). Yaitu proses standar dalam pembuatan suatu form dalam sistem informasi, ada proses input, edit, hapus dan view/lihat tabel. Dalam pembuatan resource dalam filament adalah berdasarkan Model yang ada di project laravel kita. 

Berikut adalah struktur menu / HIPO aplikasi backend yang menjadi acuan kita dalam pembuatan resource di filament.

 - Akun

  •  User

 - Master Data

  •  Mahasiswa
  •  Kategori Blog
  •  Kategori Event
  •  Kategori Karya Ilmiah
  •  Tag Blog

 - Kepengurusan HMSI 

  •  Profil HMSI
  •  Periode
  •  Kepengurusan 
  •  Kata Sambutan
  •  Partner

 - Post

  •  Blog
  •  Karya Ilmiah
  •  Events 


Untuk membuat resource berikut perintahnya :

php artisan make:filament-resource Mahasiswa --view --generate

--view : jika kita ingin membuat view.

--generate : perintah yang akan membuat kolom-kolom pada form dan tabel secara otomatis berdasarkan isi atau struktur tabel (kolom).

Membuat menu induk :

Masuk ke file /app/Providers/Filament/AdminPanelProvider.php

kemudian selipkan coding berikut di return panel

            ->navigationGroups([
                 'Akun',
                 'Data Master',
                 'HMSI',
                 'Post',
            ])

Membuat grup navigation.

Masuk ke file /app/Filament/Resources/MahasiswaResources.php

kemudian tambahkan coding berikut : 

    protected static ?string $model = Mahasiswa::class;

    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';
    protected static ?int $navigationSort = 1;
    protected static ?string $navigationGroup = 'Data Master';

Silahkan ikuti tutorial dan dokumentasi dari filament : https://filamentphp.com/docs/3.x/panels/getting-started

Penulis

  • SELAMAT MULIYADI HARJONO
    SELAMAT MULIYADI HARJONO
    Ketua HMSI 2024-2025
    Nama saya Selamat M. Harjono biasa dipanggil memet. Saya kuliah di Universitas Dumai mengambil jurusan Sistem Informasi karena saya tertarik terhadap teknologi khususnya dibidang IT. Lihat Profil
Ikuti Media Sosial Penulis