My Course — Membangun Website Food Store Dengan Laravel Filament, Livewire dan Payment Gateway

Install dan Konfigurasi Laravel Filament

Setelah mengetahui apa itu Laravel Filament, maka pada materi kali ini kita semua akan belajar bagaimana cara menginstall dan melakukan beberapa konfigurasi di dalam Laravel Filament.

Langkah 1 - Installasi Laravel Filament

Untuk menginstall Laravel Filament, silahkan teman-teman masuk ke dalam project Laravel, kemudian jalankan perintah berikut ini di dalam terminal/CMD.


        
bash

        

            
        

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

Silahkan tunggu proses installasinya sampai selesai.

Langkah 2 - Installasi Admin Panels

Setelah Laravel Filament berhasil terinstall, sekarang kita akan lanjutkan menginstall panel yang sudah disediakan oleh Laravel Filament.

Dengan menjalankan perintah ini, kita akan otomatis dibuatkan sebuah Admin Panels yang lengkap dengan fitur authentication.

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


        
lua

        

            
        

     
php artisan filament:install --panels

Jika muncul pertanyaan seperti ini, silahkan di ENTER aja.


        
csharp

        

            
        

     
 What is the ID? ─────────────────────────────────────────────┐
 │ admin                                                        │
 └──────────────────────────────────────────────────────────────┘

Dan jika berhasil, maka teman-teman bisa uji coba mengakses project-nya di http://localhost:8000/admin/login, maka hasilnya akan seperti berikut ini.

Langkah 3 - Membuat User

Setelah halaman login berhasil kita akses, maka kita juga butuh data user untuk bisa masuk ke halaman dashboard-nya.

Di dalam Laravel Filament kita diberikan fitur untuk pembuatan user, silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.


        
go

        

            
        

     
php artisan make:filament-user

Kemudian silahkan masukkan saja Name, Email dan Password sesuai dengan keinginan teman-teman. Jika sudah silahkan coba untuk proses login.

Jika proses login berhasil, maka kita akan masuk ke halaman dashboard yang dibuatkan oleh Laravel Filament. Kurang lebih seperti berikut ini.

Langkah 4 - Mengaktifkan SPA (Single Page Application) dan Collapse Sidebar

Jika teman-teman perhatikan, aplikasi kita masih belum menerapkan SPA atau single page application atau berpindah halaman tanpa reload page, dan sekarang kita akan belajar mengaktfikan fitur tersebut di dalam Filament.

Dan kita juga akan mengaktifkan fitur collapse sidebar, sehingga nanti menu sidebar bisa ditutup atau dibuka (toggle).

Silahkan teman-teman masuk di file app/Providers/Filament/AdminPanelProvider.php, kemudian tambahkan kode berikut ini di dalam function panel.


        
php

        

            
        

     
public function panel(Panel $panel): Panel
{
        return $panel

            //..

            //..

            //..

            ->spa()
            ->sidebarFullyCollapsibleOnDesktop();

}

Di atas, kita menambahkan method spa() dan sidebarFullyCollapsibleOnDesktop() di dalam return $panel. Sehingga sekarang project kita akan berjalan secara SPA dan menu toggle di sidebar juga muncul.

Kurang lebih seperti berikut ini.

Pada bagian navbar, terdapat icon yang berfungsi untuk toggle sidebar. Dan nanti projectnya akan berjalan secara SPA atau single page application.

Langkah 5 - Konfigurasi APP URL

Ini kita lakukan agar nanti gambar yang diupload di dalam project bisa terbaca secara otomatis oleh Laravel Filament.

Silahkan buka file .env, kemudian cari kode berikut ini.


        
ini

        

            
        

     
APP_URL=http://localhost

Dan ubahlah menjadi seperti berikut ini.


        
ini

        

            
        

     
APP_URL=http://localhost:8000
SELESAI & LANJUTKAN