ARTIKEL BLOG

Baca Artikel Terbaru Disini

Menggunakan Slug secara Otomatis di Laravel Filament

Card image cap
Menggunakan Slug secara Otomatis di Laravel Filament

Postingan oleh. M Fadli Ridhani di kategori Laravel Framework pada

19 July, 2024 | 18:15:57

Pada Laravel Filament, ketika ingin menggunakan slug, biasanya harus diinputkan melalui form. Contoh kodenya seperti berikut:

Forms\Components\TextInput::make('title')
    ->label('Judul')
    ->required()
    ->placeholder('Masukkan judul post')
    ->live(debounce: 500)
    ->afterStateUpdated(function (Get $get, Set $set, ?string $old, ?string $state) {
        if (($get('slug') ?? '') !== Str::slug($old)) {
            return;
        }
        $set('slug', Str::slug($state));
    }),
Forms\Components\TextInput::make('slug')
    ->label('Slug')
    ->required()
    ->placeholder('Masukkan slug post')
    ->unique(Post::class, 'slug', fn ($record) => $record),
Pada contoh di atas, slug diisi otomatis dari judul berita dengan memanfaatkan metode afterStateUpdated. Meskipun cara ini efektif, ada cara yang lebih mudah.

Solusi Baru: Menggunakan Setter pada Model
Kini, Anda dapat mengisi slug secara otomatis dari judul tanpa perlu input form lagi dengan menerapkan kode berikut pada model:

public function setTitleAttribute($value)
{
    $this->attributes['title'] = $value;
    $this->attributes['slug'] = Str::slug($value);
}

Dengan metode ini, slug akan secara otomatis dibuat berdasarkan judul setiap kali atribut title diatur. Berikut adalah manfaat utama dari pendekatan ini:

  1. Kemudahan Penggunaan: Tidak perlu lagi mengatur slug melalui form di resource.
  2. Otomatisasi: Slug dihasilkan secara otomatis dari judul, mengurangi kemungkinan kesalahan input oleh pengguna.
  3. Efisiensi: Mempercepat proses pembuatan atau pengeditan postingan dengan mengurangi jumlah input yang diperlukan.
Penggunaan Slug
Slug yang dihasilkan secara otomatis ini sangat berguna untuk URL yang SEO-friendly, seperti pada detail postingan dan lain-lain. Dengan menerapkan metode ini, Anda dapat lebih fokus pada konten tanpa khawatir tentang pengisian slug secara manual.

Dengan demikian, Anda dapat menghemat waktu dan memastikan konsistensi slug di seluruh aplikasi Anda. Implementasikan kode ini pada model Anda dan nikmati kemudahannya!

Kembali