> ## Content Index > Fetch the complete content index at: https://lintar.my.id/llms.txt > Use this file to discover other available public pages before exploring further. # Kustomisasi Halaman Login di Filament 4 - URL: https://lintar.my.id/kustomisasi-halaman-login-di-filament-4/ - Published: 2025-11-03T14:06:58.000Z - Updated: 2025-11-06T12:30:16.000Z - Author: dev - Tags: BelajarCoding, BelajarNgoding, #Import 2026-08-27 23:08 Kalau kamu udah pernah pakai **FilamentPHP**, pasti tahu dong tampilan login bawaannya itu simple banget bersih sih, tapi kadang terlalu standar. Nah, gimana kalau kita pengen ubah tampilannya biar lebih *kita banget*? Misalnya tambahin logo, ubah warna, atau bahkan bikin layout yang lebih keren. Di artikel ini, kita bahas cara Kustomisasi Halaman Login di Filament 4 dengan gaya santai tapi tetap ngoding. ## 1\. Bikin Komponen Livewire Pertama, kita bikin komponen baru untuk halaman login kita: ```bash php artisan make:livewire AdminLogin ``` Perintah ini bakal bikin dua file: ```bash app/Livewire/AdminLogin.php ← logic dan autentikasi resources/views/livewire/admin-login.blade.php ← tampilan login ``` ## 2\. Buat Layout "Guest" Kita butuh layout khusus untuk halaman login (yang *di luar* dashboard admin Filament). Buat file baru: ```bash resources/views/components/layouts/guest.blade.php ``` Isinya seperti ini: ```php {{ $title ?? config('app.name', 'Laravel') }} @filamentStyles @vite('resources/css/app.css') {{ $slot }} @filamentScripts @vite('resources/js/app.js') ``` **Penjelasan singkat:** - `@filamentStyles` dan `@filamentScripts` \= otomatis load semua CSS & JS Filament. - `@vite('resources/css/app.css')` \= load Tailwind dari proyek kamu. - `{{ $slot }}` \= tempat isi konten login kamu bakal ditampilkan. ## 3\. Buat Logika Login di Livewire Sekarang buka file: ```bash app/Livewire/AdminLogin.php ``` Isi seperti ini: ```php check()) { return redirect()->intended(Filament::getUrl()); } } public function authenticate() { // Batasin percobaan login biar gak brute force try { $this->rateLimit(5); } catch (TooManyRequestsException $exception) { $this->addError('email', __('Terlalu banyak percobaan login. Coba lagi dalam :seconds detik.', [ 'seconds' => $exception->secondsUntilAvailable, ])); return; } // Validasi manual $this->validate([ 'email' => 'required|email', 'password' => 'required|string|min:4', ]); // Coba login via Filament if (!Filament::auth()->attempt([ 'email' => $this->email, 'password' => $this->password, ], $this->remember)) { $this->addError('email', 'Email atau password salah.'); return; } session()->regenerate(); return redirect()->intended(Filament::getUrl()); } public function render(): \Illuminate\Contracts\View\View { return view('livewire.admin-login')->layout('components.layouts.guest'); } } ``` ### Penjelasan detail: | Bagian | Fungsi | | --------------------------- | -------------------------------------------------------------- | | use InteractsWithForms; | Supaya bisa pakai sistem form dari Filament. | | use WithRateLimiting; | Batasin jumlah percobaan login (contoh: 5x per menit). | | mount() | Cek kalau user udah login → redirect langsung ke dashboard. | | authenticate() | Proses login: validasi, rate-limit, autentikasi, dan redirect. | | Filament::auth()->attempt() | Login pakai sistem auth-nya Filament. | | ValidationException | Biar kalau gagal, bisa munculin pesan error di form. | ## 4\. Desain Tampilan Login Sekarang buka: ```bash resources/views/livewire/admin-login.blade.php ``` ```php
{{-- Background image --}}
{{-- Form --}}
{{-- Logo --}}
{{ config('app.name','Semangatin') }}
{{-- Title --}}

WELCOME BACK

Sign in to your account.

{{-- Form Input --}}
{{-- Email --}}
@error('email')

{{ $message }}

@enderror
{{-- Password --}}
@error('password')

{{ $message }}

@enderror
{{-- Forgot Password --}}
Forgot password?
{{-- Submit --}}
{{-- Image Section --}}
``` **Penjelasan singkat:** | Elemen | Fungsi | | -------------------------- | -------------------------------------------------------- | | bg-gradient-to-br | Bikin gradasi background elegan dari abu tua ke hitam. | | backdrop-blur-lg | Efek blur transparan kayak kaca (glassmorphism). | | wire:model="data.email" | Data binding Livewire (langsung ke $data\['email'\]). | | wire:submit="authenticate" | Jalankan fungsi authenticate() di PHP saat form dikirim. | | Bagian kanan (gambar) | Estetika aja, biar login page nggak polos. | ## 5\. Hubungkan ke Filament Panel Sekarang, biar Filament tahu kalau login-nya pakai halaman custom ini, buka file: ```bash app/Providers/Filament/AdminPanelPanelProvider.php ``` Ubah / tambahkan baris berikut: ```php use App\Livewire\AdminLogin; class AdminPanelPanelProvider extends PanelProvider { public function panel(Panel $panel): Panel { return $panel ->default() ->id('admin-panel') ->path('admin') // path dashboard kamu ->login(AdminLogin::class) // pakai login custom } } ``` ![](https://lintar.my.id/content/images/2025/11/image.png) > Jika muncul error seperti di atas, maka jalankan perintah berikut: ```js npm i npm run build ``` Harusnya halaman login custom kamu langsung muncul — bukan login Filament bawaan lagi! ![](https://lintar.my.id/content/images/2025/10/image-3.png)