Halaman Blog - Menampilkan Daftar Artikel

Setelah sebelumnya kita membangun fitur-fitur manajemen artikel dari sisi admin, kini kita akan mulai membangun tampilan publik — bagian yang diakses langsung oleh pengunjung blog.

Pada artikel ini, kita akan membuat halaman utama dengan menampilkan daftar artikel yang dapat diakses publik (sering disebut blog list atau blog roll). Halaman ini akan menjadi pintu masuk utama bagi pengunjung untuk menjelajahi konten blog yang sudah kita buat.

Menyesuaikan Controller untuk Menampilkan Daftar Artikel #

Sekarang kita akan menambahkan method baru di ArticleController bernama blogList(). Method ini akan mengambil daftar artikel yang telah dipublikasikan dan menampilkannya ke pengguna melalui View.

Sesuaikan kode menjadi seperti berikut:

📄 app/Http/Controllers/ArticleController.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

/** ... **/

class ArticleController extends Controller
{
    /** ... **/

    public function blogList(): View
    {
        $limit = 6;

        $articles = Article::orderBy('published_at', 'desc')
            ->where('published_at', '<=', now())
            ->where('status', Article::STATUS_PUBLISHED)
            ->paginate($limit);

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

/** ... **/

Pada bagian ini, kita mengambil daftar artikel dengan ketentuan sebagai berikut:

• ->orderBy('published_at', 'desc')
  diurutkan berdasarkan waktu publikasi terbaru,
• ->where('published_at', '<=', now())
  waktu publikasinya telah tiba,
• ->where('status', Article::STATUS_PUBLISHED)
  statusnya adalah Published (Sudah Terbit),

…serta ditampilkan per 6 item dalam satu halaman dengan pagination bawaan Laravel.

Membuat Accessor pada Model #

Pada daftar artikel, kita akan menampilkan ringkasan konten. Untuk itu, mari kita tambahkan sebuah accessor, yaitu method khusus pada model seperti berikut:

📄 app/Models/Article.php

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

/** ... **/

class Article extends Model
{
    /** ... **/

    public function getExcerptAttribute(): string
    {
        $content = strip_tags($this->content);

        return strlen($content) > 255 ? substr($content, 0, 255).'...' : $content;
    }

/** ... **/

• Baris 9
  Menghapus semua tag HTML pada konten apabila ditemukan.
• Baris 11
  Jika panjang konten melebihi 255 karakter, kita ambil 255 karakter pertama dan tambahkan ... di akhir. Jika tidak, tampilkan konten secara utuh.

Membuat View untuk Menampilkan Daftar Artikel #

Untuk menampilkan daftar artikel, mari kita buat View sederhana yang hanya berisi: judul, ringkasan konten, dan tautan ke detail artikel.

Buat sebuah file View baru sebagai berikut:

📄 resources/views/pages/articles/blog_list.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
37
38

@extends('layouts.app')

@section('title', 'Beranda')

@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('articles.show', $article) }}" 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

• Baris 19
  Kita menggunakan {{ $article->excerpt }} untuk menampilkan ringkasan konten sesuai method yang kita definisikan pada model, yaitu getExcerptAttribute.
• Baris 22
  Mengubah timestamp $article->published_at ke object penanggalan Carbon. Lalu, mengubahnya menjadi format yang lebih mudah dibaca manusia (seperti: 2 hours ago, 3 days ago, atau 1 month ago) menggunakan method diffForHumans().
• Baris 30
  Menampilkan navigasi pagination bawaan Laravel.
  💡

  Untuk mempelajari Pagination pada Laravel, silakan merujuk pada dokumentasi Laravel: Database: Pagination.

Menyesuaikan View Pagination Laravel #

Secara default, view pagination Laravel menggunakan styling dari Tailwind CSS. Agar view pagination dapat tampil dengan baik pada aplikasi kita, mari kita sesuaikan AppServiceProvider menjadi seperti berikut:

📄 app/Providers/AppServiceProvider.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/** ... **/
use Illuminate\Pagination\Paginator;
/** ... **/

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Paginator::useBootstrapFive();
    }

Dengan menambahkan method Paginator di atas, Laravel akan menggunakan view pagination berbasis Bootstrap 5.

Membuat Route untuk Menampilkan Daftar Artikel #

Tambahkan route seperti berikut:

📄 routes/web.php

1
2
3
4

/** ... **/

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

Di sini, kita menambahkan sebuah route yang apabila pengguna mengakses /, pengguna akan diarahkan ke method blogList() pada ArticleController.

Penambahan route / tidak akan mengganggu Route::resource('articles', ...), karena URI-nya berbeda dan Laravel akan mencocokkannya secara eksplisit.

Hasil Akhir #

Dengan langkah-langkah di atas, kita telah berhasil menampilkan daftar artikel secara publik — ini menjadi dasar tampilan frontend aplikasi blog kita.

Pada artikel selanjutnya, kita akan membuat halaman detail untuk masing-masing artikel! Mari kita lanjutkan! 🚀