Tutorial Laravel: Membuat Slug Otomatis dan Unik

Dalam dunia pengembangan website, struktur URL yang rapi dan mudah dipahami adalah salah satu kunci kesuksesan. Salah satu elemen penting yang mendukung ini adalah slug. Penggunaan slug yang baik tidak hanya mempermudah pengunjung memahami isi halaman tetapi juga membantu mesin pencari mengindeks halaman dengan lebih efektif. Artikel ini akan membahas cara membuat slug otomatis dan unik menggunakan Laravel, agar setiap halaman di pada apikasi website yang isi kontennya adalah artikel dapat memiliki URL yang profesional dan mudah untuk dibaca.

Apa itu Slug?

Mengutip dari yoast.com, slug merupakan bagian dari URL yang mengidentifikasi halaman tertentu dari sebuah website dalam bentuk yang mudah dibaca (untuk manusia). Dengan kata lain, slug adalah teks singkat yang menjelaskan konten pada halaman tersebut. Sebagai contoh, jika URL halamannya adalah https://kodefiksi.com/tutorial-laravel-membuat-slug-otomatis-dan-unik, maka tutorial-laravel-membuat-slug-otomatis-dan-unik adalah slug-nya. Slug yang baik biasanya terdiri dari kata-kata kunci yang relevan dan mudah dimengerti, tanpa karakter acak atau tanda baca berlebihan.

Alasan Perlunya Menggunakan Slug

Penggunaan slug yang unik dan deskriptif sangat penting untuk memastikan setiap halaman di website memiliki URL yang jelas dan mudah diingat. Tanpa slug, URL halaman bisa terlihat seperti kumpulan angka atau karakter yang tidak memiliki arti, misalnya https://kodefiksi.com/12345?article=67890. Hal ini tidak hanya membingungkan pengunjung, tetapi juga berdampak buruk pada SEO. Slug yang rapi membantu mesin pencari memahami isi halaman, meningkatkan peluang halaman web muncul di hasil pencarian. Selain itu, slug yang unik mencegah terjadinya konflik antar URL, terutama jika website memiliki banyak halaman dengan judul serupa.

Cara Membuat Slug Otomatis dan Unik di Laravel

Pembuatan slug secara otomatis adalah praktik yang sangat berguna untuk menghasilkan URL yang rapi, deskriptif, dan SEO-friendly.Lantas bagaimana cara membuat slug otomatis dan unik di Laravel? Salah satu cara untuk melakukannya adalah dengan memanfaatkan package Spatie Laravel Sluggable. Package ini dirancang untuk membuat slug secara otomatis berdasarkan data tertentu, seperti judul artikel, dan memastikan setiap slug bersifat unik tanpa perlu pengelolaan manual yang rumit.

Dengan menggunakan Spatie, kamu hanya perlu mengatur sumber slug, biasanya kolom title, kemudian menentukan di mana slug akan disimpan, seperti pada kolom slug. Selain itu, Spatie juga menyediakan fitur untuk menangani slug duplikat dengan menambahkan angka pada akhir slug, sehingga tidak akan ada URL yang bentrok meskipun ada beberapa data dengan judul yang sama. Hasilnya, proses pembuatan slug menjadi lebih cepat dan sesuai dengan kebutuhan modern pengembangan website.

Menyiapkan Proyek Laravel

Pada tutorial kali ini saya akan menggunakan proyek Laravel yang sudah pernah dibuat pada artikel Membuat Seeder untuk RESTful API, tidak jadi masalah jika teman-teman belum mengikutinya. Karena kunci dari tutorial ini adalah adanya kolom slug dan title pada tabel di database, sisanya tinggal menyesuaikan sedikit saja.

Karena pada proyek sebelumnya tidak ada kolom slug di tabel articles, sehingga perlu ditambahkan terlebih dahulu. Saya memilih untuk memodifikasi file migrasi xxx_create_articles_table.php dibanding membuat migrasi untuk menambahkan kolom saja, alasannya adalah saya membuatnya di database khusus untuk latihan dan agar bersih maka memilih untuk migrasi ulang, sehingga tidak ada record lama yang menganggu. Jadi pastikan terlebih dahulu database yang kamu gunakan bukanlah database utama.

Berikut ini adalah kode pada file xxx_create_articles_table.php yang telah dimodifikasi untuk keperluan slug di dalam fungsi up():

Schema::create('articles', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->string('slug'); // kolom baru untuk nilai slug
    $table->text('content');
    $table->foreignId('user_id')->nullable()->constrained()->onDelete('cascade'); // biar bisa nambah data tanpa perlu user (hanya untuk contoh)
    $table->timestamps();
});

Memasang Package Spatie Laravel Sluggable

Sebenarnya, laravel telah menyediakan fitur slug yang dapat digunakan dengan memanggil class Illuminate\Support\Str, tetapi perlu menyesuaikan beberapa bagian lagi secara manual agar dapat menghasilkan slug otomatis dan unik yang dibuat dari kolom tertentu. Itulah sebabnya saya lebih memilih menggunakan package spatie/laravel-sluggable karena tidak perlu memikirkan logika lainnya, maklum saya orangnya pemalas.

Untuk memasang package ini jalankan perintah berikut:

composer require spatie/laravel-sluggable

Modifikasi Model, Controller, dan Routes

Nilai slug yang saya buat akan diambil dari kolom title pada tabel articles, sehingga perlu memodifikasi kode yang ada pada model Article.php. Sesuaikanlah dengan beberapa baris kode yang ada di bawah ini:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

// dari spatie/laravel-sluggable
use Spatie\Sluggable\HasSlug;
use Spatie\Sluggable\SlugOptions;

class Article extends Model
{
    use HasFactory;
    use HasSlug;
    
    protected $guarded = ['id'];
    
    /**
     * Get the options for generating the slug.
     *
     * Fungsi untuk generate slug otomatis dari kolom tertentu.
     */
    public function getSlugOptions() : SlugOptions
    {
        return SlugOptions::create()
            ->generateSlugsFrom('title') // title adalah kolom yang menjadi sumber slug
            ->saveSlugsTo('slug'); // hasilnya disimpan ke kolom slug
    }
    
    /**
     * Get the route key for the model.
     *
     * Fungsi agar dapat menggunakan slug
     * pada route model binding
     *
     * @return string
     */
    public function getRouteKeyName()
    {
        return 'slug';
    }
    
    // kode lain disembunyikan
}

Apabila kamu menggunakan proyek yang sama seperti saya, maka jalankan perintah di bawah ini untuk melihat hasil awal. Sekali lagi pastikan bahwa database yang digunakan adalah untuk latihan, karena perintah berikut akan mereset semua tabel yang ada di database tersebut.

php artisan migrate:fresh --seed

Sekarang, cobalah untuk menjalankan Laravel tersebut dan kirim permintaan GET ke endpoint /api/articles. Seharusnya, akan terdapat response dalam bentuk JSON dan didalamnya terdapat kata kunci slug dengan nilai yang diambil dari kata kunci title.

Teruntuk kamu yang menggunakan proyek Laravel berbeda, tenang jangan khawatir. Karena memang belum selesai, targetnya adalah slug yang baru saja dibuat bisa dijadikan parameter dinamis untuk rute atau dikenal dengan route model binding. Buka file ArticleController.php, kemudian modifikasi method show() menjadi seperti berikut:

public function show(Article $article) {
    // mendapatkan satu artikel dengan user dan komentarnya
    $article->load([
        'user',
        'comments.user' => function ($query) {
            $query->select('id', 'name');
        }
    ]);
    
    return response()->json($article);
}

Tambahkan juga fungsi berikut yang berguna untuk menambah artikel baru secara manual, simpan tepat setelah fungsi show() atau di dalam class ArticleController:

public function store(Request $request) {
    $request->validate([
        'title' => 'required|string',
        'content' => 'required|string'
    ]);
    
    $article = $request->only('title', 'content');
    Article::create($article);
    
    return response()->json([
        'message' => 'Artikel berhasil disimpan'
    ], 201);
}

Eits, jangan lupa pastikan ada pemanggilan class Request sebelum pembuatan class ArticleController. Jika belum ada tinggal kita tambahkan saja:

use Illuminate\Http\Request;

Kemudian, buka file api.php dan sesuaikan dengan routes berikut ini:

Route::get('/articles', [ArticleController::class, 'index']);
Route::post('/articles', [ArticleController::class, 'store']);
Route::get('/articles/{article:slug}', [ArticleController::class, 'show']);

Simpan dan jalankan.

Hasil

Sekarang, cobalah untuk menambahkan artikel baru dengan mengirim permintaan POST ke endpoint /api/articles melalui aplikasi simulasi client API seperti Postman atau HTTPie. Perhatikan contoh di gambar berikut:

Untuk melihat hasil apakah slug tersebut sudah berhasil dibuat dan detail artikelnya dapat diakses menggunakan slug tersebut. Maka, kirimkan permintaan GET ke /api/articles/{article:slug}.

Kesimpulan

Pembuatan slug otomatis dan unik adalah langkah penting dalam pengelolaan URL yang rapi, profesional, dan SEO-friendly pada sebuah website. Dengan menggunakan Laravel dan memanfaatkan package Spatie Laravel Sluggable, pengembang dapat dengan mudah menghasilkan slug yang deskriptif tanpa harus memikirkan logika tambahan untuk menghindari duplikasi. Proses ini juga mendukung implementasi fitur seperti route model binding, yang mempermudah pengelolaan data berbasis URL. Hasil akhirnya, website tidak hanya terlihat lebih profesional tetapi juga memiliki performa SEO yang lebih optimal, memudahkan pengunjung sekaligus meningkatkan visibilitas di mesin pencari.

Setelah memahami pentingnya slug dan cara pembuatannya, langkah selanjutnya yang tidak kalah penting adalah membahas pembuatan sitemap. Sitemap memiliki peran vital dalam memberikan panduan kepada mesin pencari tentang struktur halaman pada website. Keterkaitan antara slug dan sitemap sangat erat, karena slug yang rapi akan mempermudah pembacaan sitemap oleh mesin pencari, sehingga meningkatkan kualitas SEO sebuah website. Nantikan artikel berikutnya yang akan membahas langkah-langkah membuat sitemap di Laravel untuk mengoptimalkan performa aplikasi web!

Pantengin terus kodefiksi.com sambil ditemani secangkir kopi, salam pemula, sekian dan terima kasih!

Sumber: GitHub Spatie Laravel Sluggable.