CRUD Manajemen Artikel - Menampilkan Daftar Artikel

3 Maret 2025
·

7 menit ·

Setelah mempersiapkan struktur database dan layout tampilan, kini saatnya kita menampilkan daftar artikel.

Untuk keperluan ini, kita akan menggunakan DataTables, karena menyediakan fitur-fitur seperti pagination, pencarian, penyortiran, hingga ekspor ke file Excel dan PDF secara otomatis. Jika kita menggunakan tabel HTML biasa, seluruh fitur tersebut harus dibuat secara manual, yang tentunya memakan waktu dan tenaga.

Karena proyek ini menggunakan Bootstrap, kita perlu menghapus Tailwind yang secara default diikutsertakan oleh Laravel.

Mari kita mulai!

Menghapus Tailwind

Buka Terminal dan jalankan perintah berikut:
```
sail npm uninstall @tailwindcss/vite tailwindcss
```
Perintah ini akan menghapus dependency @tailwindcss/vite dan tailwindcss pada file package.json dan package pada folder node_modules.

Buka file vite.config.js, lalu hapus bagian import dan plugins yang berkaitan dengan Tailwind sehingga kode akan menjadi seperti berikut:

📄 vite.config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Terakhir, hapus isi file app.css. Kita akan menambahkan kode pada file ini nanti.

Instalasi dan Konfigurasi DataTables

Untuk instalasi Yajra Laravel DataTables, jalankan perintah berikut:
```
sail composer require yajra/laravel-datatables
```
Kita juga melakukan instalasi Laravel DataTables Vite untuk mempermudah proses setup frontend. Untuk itu, jalankan perintah berikut:
```
sail npm i laravel-datatables-vite --save-dev
```

Setelah proses instalasi selesai, kita dapat langsung mengatur stylesheet dan script yang dibutuhkan.

📄 resources/css/app.css

1
2
3
4
5
6
@import 'bootstrap/dist/css/bootstrap.min.css';

@import 'bootstrap-icons/font/bootstrap-icons.css';
@import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css";
@import 'datatables.net-select-bs5/css/select.bootstrap5.css';

📄 resources/js/app.js

1
2
import 'laravel-datatables-vite';
import './bootstrap';

Selanjutnya, kita akan mengatur konfigurasi defaults DataTables. Ini berguna agar kita tidak perlu menulis konfigurasi yang sama berulang kali untuk setiap tabel.

Dalam hal ini, kita akan menetapkan konfigurasi tata letak (layout).

Buka file bootstrap.js dan tambahkan kode berikut:

📄 resources/js/bootstrap.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

$.extend(DataTable.defaults, {
    layout: {
        top1Start: 'buttons',
        topStart: 'pageLength',
        topEnd: 'search',
        bottomStart: 'info',
        bottomEnd: 'paging',
    },
});

💡

Opsi layout merupakan fitur baru sejak DataTables 2.0 yang memungkinkan kita mengatur posisi elemen kontrol seperti tombol, pagination, dan pencarian secara lebih fleksibel. Selengkapnya dapat dipelajari pada dokumentasi DataTables: layout.

Membuat Class DataTables

Untuk mengatur tampilan dan data yang digunakan oleh DataTables, kita perlu membuat class khusus.

Jalankan perintah berikut untuk membuat file ArticleDataTable.php:
```
sail artisan datatables:make ArticleDataTable
```
- Perintah ini akan membuat file baru bernama ArticleDataTable.php pada direktori app/DataTables.

Buka file tersebut dan sesuaikan method html() 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 html(): HtmlBuilder
    {
        return $this->builder()
                    ->setTableId('article-table')
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->buttons([
                        Button::make('excel'),
                        Button::make('csv'),
                        Button::make('pdf'),
                        Button::make('print'),
                    ]);
    }

/** ... **/

Kita dapat menyesuaikan beberapa opsi DataTables sesuai kebutuhan. Pada kode di atas:
- Kita menghapus opsi orderBy dan selectStyleSingle.
- Tombol reset dan reload kita hilangkan agar tampilan tabel lebih ringkas.

Selanjutnya, kita perlu menyesuaikan method getColumns() sesuai definisi kolom pada tabel menjadi sebagai berikut:

📄 app/DataTables/ArticleDataTable.php

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

    public function getColumns(): array
    {
        return [
            Column::computed('action')
                  ->exportable(false)
                  ->printable(false)
                  ->addClass('text-center')
                  ->title(''),
            Column::make('title')->title('Judul'),
            Column::make('status')->title('Status'),
            Column::make('published_at')->title('Waktu Publikasi'),
            Column::make('created_at')->title('Waktu Pembuatan'),
            Column::make('updated_at')->title('Waktu Pembaruan'),
        ];
    }

/** ... **/

Menyesuaikan Controller untuk Menampikan Daftar Artikel

Setelah membuat class DataTables, kita bisa menggunakannya langsung dalam controller.

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
16
17
18
19
<?php

namespace App\Http\Controllers;

use App\DataTables\ArticleDataTable;
use App\Models\Article;
use Illuminate\Http\Request;

class ArticleController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index(ArticleDataTable $dataTable)
    {
        return $dataTable->render('pages.articles.index');
    }

/** ... **/

Membuat View untuk Menampikan Daftar Artikel

Pada artikel sebelumnya, kita sudah membahas bahwa tampilan dari halaman utama blog dapat dibuat dengan mewarisi template layout. Kita akan mempraktikkan hal tersebut sekarang.

Buat file index.blade.php di dalam folder resources/views/pages/articles. Isi dengan kode berikut:

📄 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
@extends('layouts.app')

@section('title', 'Daftar Artikel')

@section('content')
    <div id="content" class="container">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        {{ $dataTable->table(['class' => 'table table-striped']) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}
@endpush

@extends — mewarisi layout utama.
@section — menempatkan konten ke area yield pada layout.
@push — menambahkan konten ke stack pada layout.

Sebelum melihat hasilnya, kita perlu menjalankan Vite development server dengan perintah berikut:
```
sail npm run dev
```
Buka browser dan akses http://localhost/articles.
Sekarang, tabel artikel akan tampil lengkap dengan fitur-fitur interaktif dari DataTables.

Merapikan Data pada Tabel Artikel

Setelah berhasil menampilkan data artikel, kita bisa melakukan beberapa penyesuaian agar tampilan tabel menjadi lebih rapi dan informatif.

Menyesuaikan Format Tanggal

Nilai published_at saat ini tampil sebagai string biasa, bukan objek DateTime. Untuk itu, kita perlu melakukan casting pada model agar dapat dikelola sebagai tanggal. Sesuaikan kode pada model menjadi sebagai berikut:

📄 app/Models/Article.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
/** ... **/

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

    protected function casts(): array
    {
        return [
            'published_at' => 'datetime',
        ];
    }

/** ... **/

💡

Untuk mempelajari lebih lanjut, silakan merujuk pada dokumentasi Laravel: Attribute Casting.

Format tanggal default masih kurang nyaman dibaca. Kita dapat menyesuaikan dengan menimpa method serializeDate(). Sesuaikan kembali kode pada model menjadi sebagai 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
/** ... **/

use DateTimeInterface;

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

    protected function casts(): array
    {
        return [
            'published_at' => 'datetime',
        ];
    }

    protected function serializeDate(DateTimeInterface $date): string
    {
        return $date->format('d-m-Y H.i.s');
    }

/** ... **/

💡

Untuk mempelajari lebih lanjut, silakan merujuk pada dokumentasi Laravel: Date Serialization.

Menyesuaikan Tampilan Kolom Status

Secara default, kolom status hanya menampilkan nilai D atau P sesuai yang tersimpan di database. Supaya lebih ramah bagi user, kita bisa mengubah tampilannya menjadi badge dengan menambahkan accessor.

Accessor mengubah nilai atribut Eloquent saat diakses. Untuk menentukan accessor, kita dapat menambahkan method dengan nama yang sesuai dengan representasi camelCase dari atribut model/kolom basis data.

Sesuaikan kode pada model menjadi sebagai 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\Database\Eloquent\Casts\Attribute;

/** ... **/

    protected function casts(): array
    {
        return [
            'published_at' => 'datetime',
        ];
    }

    protected function serializeDate(DateTimeInterface $date): string
    {
        return $date->format('d-m-Y H.i.s');
    }

    protected function status(): Attribute
    {
        return Attribute::make(
            get: function ($value) {
                return match ($value) {
                    self::STATUS_DRAFT => '<span class="badge text-bg-secondary">Draf</span>',
                    self::STATUS_PUBLISHED => '<span class="badge text-bg-success">Sudah Terbit</span>',
                    default => $value,
                };
            },
        );
    }

/** ... **/

match adalah ekspresi kontrol percabangan yang diperkenalkan di PHP 8 sebagai alternatif switch. Ekspresi ini memungkinkan kita membandingkan sebuah nilai dengan beberapa kemungkinan, dengan sintaks yang lebih ringkas dan konsisten.

💡

Untuk mempelajari lebih lanjut, silakan merujuk pada dokumentasi Laravel: Defining an Accessor.

Karena kita mengembalikan HTML dari accessor tersebut, kita perlu menambahkan kolom status ke dalam rawColumns() agar Blade tidak meng-escape isi kolom tersebut.

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
/** ... **/

    public function dataTable(QueryBuilder $query): EloquentDataTable
    {
        return (new EloquentDataTable($query))
            ->addColumn('action', 'article.action')
            ->rawColumns(['status'])
            ->setRowId('id');
    }

/** ... **/

Sekarang tampilan tabel sudah lebih rapi dan informatif.

Namun, jika kita mencoba mengekspor data ke Excel atau PDF, kita akan menemukan pesan error seperti berikut:

Yajra\DataTables\Exceptions\Exception
Please `composer require maatwebsite/excel` to be able to use this function.

Yajra\DataTables\Exceptions\Exception
Please `composer require barryvdh/laravel-snappy` to be able to use this function.

Hal ini terjadi karena kita belum melakukan instalasi dependency tambahan yang dibutuhkan untuk fitur ekspor.

Kita akan bahas lebih lengkap mengenai proses ekspor pada artikel selanjutnya. Yuk, lanjutkan! 🚀

Daftar Artikel

CRUD Manajemen Artikel - Menampilkan Daftar Artikel

Menghapus Tailwind #

Instalasi dan Konfigurasi DataTables #

Membuat Class DataTables #

Menyesuaikan Controller untuk Menampikan Daftar Artikel #

Membuat View untuk Menampikan Daftar Artikel #

Merapikan Data pada Tabel Artikel #

Menyesuaikan Format Tanggal #

Menyesuaikan Tampilan Kolom Status #

Menghapus Tailwind

Instalasi dan Konfigurasi DataTables

Membuat Class DataTables

Menyesuaikan Controller untuk Menampikan Daftar Artikel

Membuat View untuk Menampikan Daftar Artikel

Merapikan Data pada Tabel Artikel

Menyesuaikan Format Tanggal

Menyesuaikan Tampilan Kolom Status