CRUD Manajemen Artikel - Menampilkan Detail Artikel

Setelah sebelumnya kita berhasil menampilkan daftar artikel menggunakan DataTables, kini saatnya kita memberikan pengalaman lebih lengkap dengan menampilkan detail tiap artikel.

Di artikel ini, kita akan menggunakan fitur route model binding dari Laravel untuk mengambil data artikel berdasarkan parameter URL—dengan cara yang sangat praktis. Fitur ini sempat kita singgung pada saat membuat controller.

Kita juga akan mempelajari bagaimana menampilkan gambar artikel dalam berbagai kondisi, seperti gambar default, URL eksternal, dan gambar yang disimpan di storage.

Ayo kita mulai!

Menyesuaikan Controller untuk Menampilkan Detail Artikel #

Sekarang, kita akan menambahkan method show di ArticleController. Method ini bertugas untuk mengambil artikel berdasarkan parameter yang diterima dari URL dan mengirimkannya ke view.

Buka file ArticleController.php dan sesuaikan kode menjadi sebagai berikut:

📄 app/Http/Controllers/ArticleController.php

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

/** ... **/

use Illuminate\View\View;

/** ... **/

    /**
     * Display the specified resource.
     */
    public function show(Article $article): View
    {
        return view('pages.articles.show', compact('article'));
    }

/** ... **/

Fungsi compact() adalah fungsi bawaan PHP yang digunakan untuk mengubah variabel menjadi array asosiatif.

Di sini, kita menggunakan compact('article'), yang artinya variabel $article akan diteruskan ke view sebagai array dengan key ‘article’.

Menangani Gambar Artikel #

Salah satu hal yang dibutuhkan dalam menampilkan artikel adalah gambar. Untuk menangani berbagai kondisi gambar, kita akan menambahkan accessor di model Article:

• Jika gambar kosong (null), kita akan menampilkan gambar default.
• Jika gambar berupa URL lengkap, kita akan menampilkannya langsung.
• Jika gambar berupa file lokal yang disimpan di folder storage, kita akan mengaksesnya menggunakan File Storage (kita akan membahas storage lebih lanjut pada artikel lainnya).

Kita mendefinisikan konstanta IMAGE_STORAGE_PATH agar path gambar konsisten dan mudah diubah dari satu tempat. Kini, kita tidak perlu lagi khawatir soal perubahan path, cukup ubah di satu tempat saja.

Buka file Article.php, lalu sesuaikan kode berikut:

📄 app/Models/Article.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

/** ... **/

use Illuminate\Support\Facades\Storage;

/** ... **/

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

    const IMAGE_STORAGE_PATH = 'uploads/articles';

    protected $fillable = [ /** ... **/ ];

    protected function status(): Attribute
    {
        /** ... **/
    }

    public function getFeatureImageFullUrlAttribute(): string
    {
        if (is_null($this->feature_image_url)) {
            return 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/330px-No-Image-Placeholder.svg.png?20200912122019';
        }

        if (str_starts_with($this->feature_image_url, 'http')) {
            return $this->feature_image_url;
        }

        return Storage::url(self::IMAGE_STORAGE_PATH."/$this->feature_image_url");
    }
}

Membuat View untuk Menampikan Detail Artikel #

Sekarang kita akan membuat tampilan untuk detail artikel.

Buka file resources/views/pages/articles/show.blade.php, kemudian tambahkan kode berikut:

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

@extends('layouts.app')

@section('title', $article->title)

@section('content')
    <div id="content" class="container">
        <div class="row">
            <div class="col-8 mx-auto">
                <article>
                    <img src="{{ $article->feature_image_full_url }}" class="card-img-top mb-5" alt="{{ $article->title }}">

                    <h3>{{ $article->title }}</h3>
                    <p class="text-muted">{{ \Carbon\Carbon::parse($article->published_at)->format('F j, Y') }}</p>

                    <div class="my-5">
                        {!! $article->content !!}
                    </div>
                </article>
            </div>
        </div>
    </div>
@endsection

• Pada bagian gambar, kita menggunakan {{ $article->feature_image_full_url }} untuk menampilkan gambar sesuai method yang kita definisikan pada model, yaitu getFeatureImageFullUrlAttribute.
• Untuk menampilkan tanggal sesuai format yang diinginkan, kita memanfaatkan library Carbon yang sudah di-install bersamaan dengan Laravel.

Contoh detail artikel akan tampil seperti berikut:

Menambahkan Link pada Daftar Artikel #

Agar user bisa membuka detail artikel, kita perlu menambahkan link pada daftar artikel. Karena kita menggunakan DataTables, kita akan menyesuaikan kolom action pada method dataTable().

Buka file ArticleDataTable.php dan sesuaikan method dataTable() menjadi sebagai berikut:

📄 app/DataTables/ArticleDataTable.php

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

/** ... **/

    public function dataTable(QueryBuilder $query): EloquentDataTable
    {
        return (new EloquentDataTable($query))
            ->addColumn('action', function (Article $article) {
                $action = [
                    "<a href='".route('articles.show', $article)."' class='btn btn-sm btn-primary'><i class='bi bi-eye-fill'></i></a>",
                ];

                return implode(' ', $action);
            })
            ->rawColumns(['status', 'action'])
            ->setRowId('id');
    }

/** ... **/

• Seperti yang kita bahas pada saat membuat route, kita menggunakan konvensi penamaan Route saat membuat link menggunakan fungsi route().

Hasil dari pengubahan di atas adalah sebagai berikut:

Sekarang kita sudah berhasil menampilkan detail artikel. Aplikasi blog yang kita bangun sudah mulai berfungsi sebagaimana mestinya.

Bagaimana cara menambahkan artikel baru ke dalam aplikasi blog? Kita akan pelajari bersama di artikel selanjutnya!