> 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-10-relasi-database/10.3-menampilkan-relasi-di-view-blade.md).
# 10.3 Menampilkan Relasi di View Blade
## Menampilkan relasi di view Blade
Setelah relasi model selesai, sekarang saatnya melihat hasilnya di tampilan.
Target paling sederhana dan paling berguna adalah ini:
menampilkan **nama kategori** pada daftar buku.
Dengan begitu, halaman daftar buku jadi lebih informatif.
### Teori awal dan analogi
Bayangkan di katalog perpustakaan, setiap buku tidak hanya menampilkan judul dan penulis.
Katalog juga menampilkan rak atau kategori tempat buku itu berada.
Kalau informasi kategori tidak tampil, daftar buku terasa kurang lengkap.
Begitu juga di aplikasi kita.
Setelah data saling terhubung, relasinya harus terlihat di halaman.
### Target praktik subbab ini
Setelah menyelesaikan subbab ini, Anda seharusnya bisa:
* mengambil data buku beserta relasinya
* menampilkan nama kategori pada tabel daftar buku
* menangani kondisi saat buku belum punya kategori
### Langkah praktik step-by-step
Ikuti langkah berikut dengan urut.
{% stepper %}
{% step %}
### Isi data kategori terlebih dulu
Sebelum mengetes relasi, pastikan tabel `kategori` sudah punya data.
Misalnya:
* Teknologi
* Novel
* Sejarah
Kalau tabel kategori masih kosong, nama kategori tentu belum bisa tampil.
{% endstep %}
{% step %}
### Pastikan beberapa buku punya `kategori_id`
Cek data pada tabel `buku`.
Pastikan setidaknya ada beberapa buku yang kolom `kategori_id`-nya sudah terisi.
Kalau semua `kategori_id` masih kosong, relasi juga akan terlihat kosong.
{% endstep %}
{% step %}
### Ubah query pada controller
Buka file:
`app/Http/Controllers/BukuController.php`
Lalu ubah method `index()` menjadi seperti ini:
```php
public function index()
{
$bukus = Buku::with('kategori')->get();
return view('buku.index', compact('bukus'));
}
```
Query ini akan mengambil data buku sekaligus data kategorinya.
{% endstep %}
{% step %}
### Tambahkan kolom kategori di view
Buka file:
`resources/views/buku/index.blade.php`
Tambahkan kolom **Kategori** pada tabel Anda.
Contohnya:
```blade
| Kategori |
```
Lalu pada setiap baris data, tambahkan:
```blade
{{ $buku->kategori->nama_kategori ?? 'Belum ada kategori' }} |
```
Operator `??` dipakai agar halaman tidak error saat buku belum punya kategori.
{% 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:
```
http://127.0.0.1:8000/buku
```
Kalau berhasil, tabel daftar buku sekarang juga menampilkan nama kategori.
{% endstep %}
{% endstepper %}
### Penjelasan pasca-praktik
Sekarang mari kita bedah bagian yang paling penting.
#### 1. `Buku::with('kategori')->get()`
Baris ini mengambil semua data buku sekaligus relasi `kategori`.
Jadi saat view membutuhkan nama kategori, datanya sudah disiapkan.
#### 2. `$buku->kategori`
Bagian ini mengakses relasi `kategori` milik satu data buku.
Hasilnya adalah object kategori yang terkait dengan buku tersebut.
#### 3. `$buku->kategori->nama_kategori`
Bagian ini mengambil nilai `nama_kategori` dari relasi kategori tadi.
Jadi yang tampil bukan lagi angka `kategori_id`, melainkan nama kategorinya.
#### 4. `?? 'Belum ada kategori'`
Bagian ini dipakai sebagai pengaman.
Kalau sebuah buku belum terhubung ke kategori mana pun, halaman tetap bisa tampil normal.
### Alur data teknis
Saat halaman `/buku` dibuka, alurnya seperti ini:
1. controller mengambil semua buku
2. query juga mengambil relasi kategori
3. data dikirim ke view
4. Blade membaca setiap buku
5. Blade menampilkan nama kategori dari relasi yang dimiliki buku itu
### Output yang harus terlihat
Setelah subbab ini selesai, hasil berikut seharusnya sudah terlihat:
* query `Buku::with('kategori')->get()` aktif di controller
* tabel daftar buku memiliki kolom **Kategori**
* setiap buku menampilkan `nama_kategori` yang sesuai
* buku tanpa kategori tetap aman dan menampilkan fallback `Belum ada kategori`
### Hal yang perlu diperhatikan
Kalau Anda hanya menampilkan `kategori_id`, pengguna hanya melihat angka.
Itu kurang berguna.
Yang dibutuhkan pengguna biasanya adalah nama kategorinya.
Karena itu, relasi membuat tampilan jadi jauh lebih manusiawi.
### Troubleshooting yang paling sering
Masalah yang paling sering muncul:
* **nama kategori tidak tampil** — `kategori_id` pada buku masih kosong
* **error saat membaca relasi** — model `Buku` belum punya method `kategori()`
* **yang tampil hanya angka** — Anda masih menampilkan `kategori_id`, bukan relasinya
* **halaman error saat kategori kosong** — belum memakai operator `??`
{% hint style="warning" %}
Kalau ada buku yang belum punya kategori, jangan langsung menulis `$buku->kategori->nama_kategori` tanpa pengaman. Gunakan fallback agar halaman tetap aman.
{% endhint %}
{% hint style="info" %}
Relasi di Blade membuat tampilan jauh lebih bermakna karena yang muncul adalah data nyata, bukan sekadar ID angka.
{% endhint %}
### Poin evaluasi bab 10.3
Pastikan Anda sudah memahami poin berikut:
* Saya bisa mengambil data buku beserta relasi kategorinya.
* Saya bisa menampilkan nama kategori di tabel daftar buku.
* Saya paham kenapa relasi lebih berguna daripada hanya menampilkan `kategori_id`.
* Saya bisa menangani kondisi saat buku belum punya kategori.
Jika semuanya sudah jelas, lanjut ke [10.4 Penjelasan Fungsi Eager Loading](/laravel/bab-10-relasi-database/10.4-penjelasan-fungsi-eager-loading.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-10-relasi-database/10.3-menampilkan-relasi-di-view-blade.md?ask=
```
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.