Daftar Buku

> For the complete documentation index, see [llms.txt](https://learn.devlabss.my.id/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.devlabss.my.id/laravel/bab-6-fitur-read/6.3-menampilkan-data-ke-tabel-html.md).

# 6.3 Menampilkan Data ke Tabel HTML

## Menampilkan data ke tabel HTML

Sekarang data buku sudah berhasil diambil dari database.

Tetapi hasil `dd($bukus)` masih belum enak untuk dibaca pengguna.

Tampilan itu hanya cocok untuk mengecek data.

Sekarang kita akan mengubah data tersebut menjadi tabel yang rapi dan mudah dibaca.

### Teori awal dan analogi

Bayangkan petugas perpustakaan sudah berhasil mengambil semua data buku.

Kalau data itu hanya diletakkan mentah di meja, orang tentu bingung membacanya.

Data perlu disusun menjadi daftar yang rapi.

Dalam Laravel, tugas merapikan tampilan itu dilakukan oleh **view Blade**.

Jadi:

* model mengambil data
* controller mengantar data
* view menyusun data
* browser menampilkan hasilnya

### Target praktik subbab ini

Setelah selesai, Anda seharusnya bisa:

* mengirim data dari controller ke view
* membuat file tampilan daftar buku
* menampilkan data dengan perulangan Blade
* menampilkan pesan saat data kosong

### Langkah praktik step-by-step

Ikuti langkahnya satu per satu dengan tenang.

{% stepper %}
{% step %}

### Kembalikan method `index()` ke tampilan view

Jika pada bab 6.2 Anda masih memakai `dd($bukus)`, ubah method `index()` menjadi:

```php
public function index()
{
    $bukus = Buku::all();

    return view('buku.index', compact('bukus'));
}
```

{% endstep %}

{% step %}

### Siapkan file view daftar buku

Buka atau buat file berikut:

`resources/views/buku/index.blade.php`
{% endstep %}

{% step %}

### Ketik tampilan tabel HTML

Isi file `index.blade.php` dengan kode berikut:

```blade
<h1>Daftar Buku</h1>

<table border="1" cellpadding="10" cellspacing="0">
    <thead>
        <tr>
            <th>Judul</th>
            <th>Penulis</th>
            <th>Penerbit</th>
            <th>Tahun Terbit</th>
        </tr>
    </thead>
    <tbody>
        @forelse ($bukus as $buku)
            <tr>
                <td>{{ $buku->judul }}</td>
                <td>{{ $buku->penulis }}</td>
                <td>{{ $buku->penerbit }}</td>
                <td>{{ $buku->tahun_terbit }}</td>
            </tr>
        @empty
            <tr>
                <td colspan="4">Data buku belum tersedia.</td>
            </tr>
        @endforelse
    </tbody>
</table>
```

{% endstep %}

{% step %}

### Simpan semua file

Pastikan file berikut sudah disimpan:

* `BukuController.php`
* `index.blade.php`

Jangan lanjut ke browser kalau file belum disimpan.
{% endstep %}

{% step %}

### Uji hasil di browser

Sebelum mengetes, pastikan server Laravel hidup.

Silakan pilih salah satu:

* buka **Laragon** lalu klik **Start All**
* atau jalankan `php artisan serve`

Setelah itu, buka halaman:

```
http://127.0.0.1:8000/buku
```

Jika berhasil, Anda akan melihat daftar buku dalam bentuk tabel yang lebih rapi.
{% endstep %}
{% endstepper %}

### Kenapa memakai `@forelse`

`@forelse` dipakai untuk perulangan yang juga siap menangani kondisi kosong.

Artinya:

* jika data ada, Blade mengulang isi tabel
* jika data kosong, Blade menampilkan pesan cadangan

Karena itu, `@forelse` terasa lebih aman daripada langsung memakai `@foreach`.

### Penjelasan pasca-praktik

Saat halaman `/buku` dibuka, alurnya seperti ini:

1. route memanggil `index()`
2. controller menjalankan `Buku::all()`
3. hasil query disimpan ke `$bukus`
4. variabel `$bukus` dikirim ke view
5. Blade mengulang tiap data lalu menampilkannya ke tabel

Sekarang mari kita bedah bagian yang paling penting.

#### 1. `return view('buku.index', compact('bukus'));`

Baris ini mengirim data ke file view.

`buku.index` berarti file:

`resources/views/buku/index.blade.php`

#### 2. `@forelse ($bukus as $buku)`

Baris ini menyuruh Blade:

* ambil semua isi `$bukus`
* ulang satu per satu
* simpan tiap item ke variabel `$buku`

Jadi, setiap putaran loop akan membaca satu data buku.

#### 3. `{{ $buku->judul }}`

Baris ini menampilkan nilai kolom `judul`.

Tanda `->` dipakai karena `$buku` dibaca sebagai object.

#### 4. `@empty`

Bagian ini berjalan jika `$bukus` tidak memiliki data.

Dengan begitu, halaman tetap memberi informasi yang jelas.

Pengguna tidak melihat halaman kosong yang membingungkan.

### Hasil yang seharusnya terlihat di browser

Jika data dummy dari seeder sudah masuk, Anda seharusnya melihat:

* judul buku
* nama penulis
* nama penerbit
* tahun terbit

Setiap baris mewakili satu record dari tabel `buku`.

### Output yang harus terlihat

Setelah subbab ini selesai, hasil berikut seharusnya sudah terlihat:

* file `resources/views/buku/index.blade.php` berhasil dibuat
* method `index()` mengembalikan `view('buku.index', compact('bukus'))`
* halaman `/buku` menampilkan tabel data buku yang rapi
* jika tabel kosong, pesan `Data buku belum tersedia.` tetap muncul

### Pojok troubleshooting

{% hint style="warning" %}
Jika halaman tampil tetapi tabel kosong, jangan langsung menyalahkan Blade. Cek dulu apakah tabel `buku` memang sudah berisi data.
{% endhint %}

### Troubleshooting yang paling sering

Masalah yang paling sering muncul:

* **`Undefined variable $bukus`** — controller belum mengirim variabel ke view
* **data tidak tampil** — tabel `buku` masih kosong
* **nama field error** — nama kolom di Blade tidak sama dengan kolom database

Contoh nama field yang harus cocok:

* `judul`
* `penulis`
* `penerbit`
* `tahun_terbit`

{% hint style="info" %}
Jika Anda menulis `tahun` padahal kolomnya `tahun_terbit`, Blade tidak akan menemukan datanya.
{% endhint %}

### Poin evaluasi bab 6.3

Pastikan Anda sudah memahami poin berikut:

* Saya bisa membuat file `resources/views/buku/index.blade.php`.
* Saya paham data dari controller bisa dipakai langsung di Blade.
* Saya bisa mengulang data dengan `@forelse`.
* Saya bisa menampilkan properti seperti `$buku->judul`.
* Saya tahu setiap field di Blade harus sama dengan nama kolom database.
* Saya bisa menampilkan pesan saat data masih kosong.

Jika semuanya sudah jelas, lanjut ke [6.4 Penjelasan Aliran Variabel ke View](/laravel/bab-6-fitur-read/6.4-penjelasan-aliran-variabel-ke-view.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.devlabss.my.id/laravel/bab-6-fitur-read/6.3-menampilkan-data-ke-tabel-html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
Judul	Penulis	Penerbit	Tahun Terbit
{{ $buku->judul }}	{{ $buku->penulis }}	{{ $buku->penerbit }}	{{ $buku->tahun_terbit }}
Data buku belum tersedia.