Halaman Blog - Menampilkan Artikel

11 Maret 2025
  ·  

3 menit  ·  

Kita akhirnya sampai pada artikel penghujung dari seri Membuat Aplikasi Blog Sederhana Menggunakan Laravel 12. 🎉

Pada artikel sebelumnya, kita telah menampilkan detail artikel dengan cara mengakses artikel menggunakan ID artikel. Namun, cara ini kurang ideal untuk tampilan publik karena URL yang dihasilkan tidak cukup deskriptif.

Mari kita bandingkan kedua cara akses berikut:

Dengan ID ArtikelDengan Slug Artikel
localhost/articles/32localhost/pengalaman-liburan-dengan-keluarga-ke-lombok

Tentunya, menampilkan artikel menggunakan slug terlihat lebih deskriptif dan nyaman dibaca, kan?

Oleh karena itu, kita akan menampilkan artikel dengan slug.

Menyesuaikan Controller untuk Menampilkan Artikel

Pertama, kita buat method baru bernama blogPost() pada controller:

📄 app/Http/Controllers/ArticleController.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/** ... **/

    public function blogPost(string $slug): View
    {
        $article = Article::where('published_at', '<=', now())
            ->where([
                'slug' => $slug,
                'status' => Article::STATUS_PUBLISHED,
            ])
            ->first();

        return view('pages.articles.show', compact('article'));
    }

/** ... **/

Method ini menerima parameter $slug dan mengambil artikel yang sudah terbit, berstatus aktif, dan memiliki slug yang sesuai. Artikel yang diperoleh kemudian dikirim ke View.

Membuat Route untuk Menampilkan Artikel

Tambahkan route untuk menangani akses artikel berdasarkan slug:

📄 routes/web.php

1
2
3
4
5

/** ... **/

Route::resource('articles', ArticleController::class);
Route::get('/', [ArticleController::class, 'blogList'])->name('blog.list');
Route::get('/{slug}', [ArticleController::class, 'blogPost'])->name('blog.post');

Ketika pengguna mengakses URL seperti /pengalaman-liburan-dengan-keluarga-ke-lombok, route tersebut akan diarahkan ke method blogPost() pada ArticleController.

Penempatan route /{slug} setelah route / tetap aman karena kita hanya memiliki satu dynamic route dan tidak ada konflik.

Sebelumnya saat kita menampilkan daftar artikel, kita masih menggunakan route berbasis ID: route('articles.show', $article).

Sekarang, kita ubah menggunakan slug:

📄 resources/views/pages/articles/index.blade.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/** ... **/

@section('content')
    <div id="content" class="container">
        <div class="row">
            <div class="col">
                @if ($articles->isNotEmpty())
                    <div class="row row-cols-1 row-cols-md-3 g-4">
                        @foreach ($articles as $article)
                            <div class="col">
                                <div class="card mb-3">
                                    <img src="{{ $article->feature_image_full_url }}" class="card-img-top" alt="{{ $article->title }}">
                                    <div class="card-body">
                                        <h3 class="card-title">{{ $article->title }}</h3>
                                        <a href="{{ route('blog.post', $article->slug) }}" class="stretched-link"></a>

                                        {{ $article->excerpt }}
                                    </div>
                                    <div class="card-footer">
                                        <small class="text-muted">{{ \Carbon\Carbon::parse($article->published_at)->diffForHumans() }}</small>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="mt-3">
                        {{ $articles->links() }}
                    </div>
                @else
                    <p class="text-center">Tidak ada artikel.</p>
                @endif
            </div>
        </div>
    </div>
@endsection

Pada kode di atas, kita menggunakan route bernama blog.post dan mengirim $article->slug sebagai parameter.

Hasil Akhir

Dengan konfigurasi ini, pengguna dapat mengakses artikel menggunakan slug yang deskriptif.

Contoh URL yang dihasilkan: http://localhost/et-nihil-exercitationem-dignissimos-nobis-eligendi

Menariknya, kita tetap menggunakan view yang sama seperti sebelumnya (show.blade.php). Perbedaannya hanya terletak pada cara kita mengakses route-nya.



Dengan demikian, kita telah menyelesaikan seluruh tampilan publik untuk aplikasi blog:
✅ Menampilkan daftar artikel
✅ Menampilkan artikel berdasarkan slug

Selamat! Kita berhasil menyelesaikan pembelajaran sejauh ini dengan baik! 🎉👏🏼

Halaman Blog - Menampilkan Artikel