> 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.5-membuat-nomor-otomatis-dengan-blade.md).

# 6.5 Membuat Nomor Otomatis dengan Blade

## Membuat nomor otomatis dengan Blade

Tabel daftar buku sudah berhasil tampil.

Sekarang tampilannya bisa dibuat lebih rapi dengan menambahkan nomor urut.

Nomor urut ini tidak perlu disimpan di database.

Nomor cukup dibuat langsung saat data ditampilkan di Blade.

### Teori awal dan analogi

Bayangkan Anda sedang melihat daftar hadir kelas.

Biasanya ada kolom nomor di sebelah kiri.

Nomor itu membantu mata membaca daftar.

Tetapi nomor itu bukan identitas resmi siswa.

Identitas resminya tetap NIS atau data lain.

Di tabel buku juga sama.

* `id` adalah identitas data di database
* nomor urut hanya alat bantu tampilan

Karena itu, nomor urut tidak perlu dibuat sebagai kolom baru di tabel `buku`.

### Kenapa nomor urut tidak disimpan di tabel

Nomor urut tampilan berbeda dengan ID database.

ID adalah identitas data.

Nomor urut hanya membantu pembaca melihat daftar dengan lebih nyaman.

Kalau data diurutkan ulang, nomor tampilan juga bisa berubah.

Karena itu, nomor urut lebih tepat dibuat di view.

### Gunakan `$loop->iteration`

Blade menyediakan variable khusus saat perulangan berjalan.

Salah satunya adalah `$loop->iteration`.

Nilai ini akan menjadi:

* `1` untuk baris pertama
* `2` untuk baris kedua
* `3` untuk baris ketiga

dan seterusnya.

### Langkah praktik step-by-step

Ikuti langkah berikut dengan urut.

{% stepper %}
{% step %}

### Buka file view daftar buku

Buka file:

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

Nomor urut akan kita tambahkan di file ini.
{% endstep %}

{% step %}

### Tambahkan kolom `No` pada header tabel

Ubah bagian kepala tabel menjadi seperti ini:

```blade
<thead>
    <tr>
        <th>No</th>
        <th>Judul</th>
        <th>Penulis</th>
        <th>Penerbit</th>
        <th>Tahun Terbit</th>
    </tr>
</thead>
```

Sekarang tabel Anda punya satu kolom baru.
{% endstep %}

{% step %}

### Tambahkan nomor otomatis di dalam perulangan

Ubah bagian isi tabel menjadi seperti ini:

```blade
<tbody>
    @forelse ($bukus as $buku)
        <tr>
            <td>{{ $loop->iteration }}</td>
            <td>{{ $buku->judul }}</td>
            <td>{{ $buku->penulis }}</td>
            <td>{{ $buku->penerbit }}</td>
            <td>{{ $buku->tahun_terbit }}</td>
        </tr>
    @empty
        <tr>
            <td colspan="5">Data buku belum tersedia.</td>
        </tr>
    @endforelse
</tbody>
```

Perhatikan dua titik penting:

* ada `{{ $loop->iteration }}`
* nilai `colspan` berubah menjadi `5`
  {% endstep %}

{% step %}

### Simpan file

Pastikan perubahan di `index.blade.php` sudah disimpan.
{% endstep %}

{% step %}

### Uji hasil di browser

Sebelum mengetes, pastikan server Laravel hidup.

* jika memakai **Laragon**, cek **Start All**
* jika memakai `php artisan serve`, pastikan terminalnya masih berjalan

Lalu buka lagi halaman `/buku`.

Jika berhasil, tabel sekarang menampilkan nomor urut otomatis.
{% endstep %}
{% endstepper %}

### Contoh tabel dengan nomor otomatis

Ubah view daftar buku menjadi seperti ini:

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

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

### Penjelasan pasca-praktik

Saat Blade menjalankan perulangan, Laravel membuat object `$loop`.

Object ini berisi informasi tentang perulangan yang sedang berjalan.

`$loop->iteration` akan menghitung urutan mulai dari `1`.

Ini sangat cocok untuk kolom nomor tabel.

Sekarang mari bedah bagian yang paling penting.

#### 1. `<th>No</th>`

Bagian ini menambah judul kolom nomor.

Tanpa header ini, pembaca tidak tahu arti kolom paling kiri.

#### 2. `<td>{{ $loop->iteration }}</td>`

Bagian ini menampilkan nomor urut otomatis.

Nilainya akan berubah setiap loop berjalan.

Baris pertama menjadi `1`, baris kedua menjadi `2`, lalu terus bertambah.

#### 3. Kenapa bukan `{{ $buku->id }}`

Kalau Anda menampilkan `id`, Anda sedang menampilkan identitas asli data.

Bukan nomor urut tampilan.

Keduanya berbeda.

#### 4. Kenapa `colspan` harus ikut berubah

Saat data kosong, Blade menampilkan satu baris pesan:

```blade
<td colspan="5">Data buku belum tersedia.</td>
```

Angka `5` berarti pesan itu melebar sepanjang lima kolom.

Jika Anda lupa mengubah `colspan`, tampilan tabel akan terasa janggal.

### Bedanya nomor urut dan ID

Perhatikan perbedaan ini:

* `id` berasal dari database
* nomor urut berasal dari tampilan

Contoh:

* buku dengan `id = 7` bisa saja tampil di nomor `1`
* buku dengan `id = 15` bisa saja tampil di nomor `2`

Itu normal.

Nomor urut tidak dipakai sebagai penanda data.

### Output yang harus terlihat

Setelah subbab ini selesai, hasil berikut seharusnya sudah terlihat:

* tabel daftar buku punya kolom `No`
* setiap baris menampilkan nomor dari `$loop->iteration`
* nomor urut berubah otomatis sesuai jumlah baris
* nilai `colspan` pada kondisi kosong sudah menyesuaikan jumlah kolom baru

### Troubleshooting yang paling sering

Masalah yang paling sering muncul:

* **nomor tidak tampil** — kolom `<td>{{ $loop->iteration }}</td>` belum ditulis di dalam perulangan
* **nomor selalu sama** — penulisan `$loop` salah atau diletakkan di luar loop
* **jumlah kolom tidak cocok** — nilai `colspan` pada baris kosong belum diperbarui

{% hint style="warning" %}
Jika Anda menambah kolom `No`, ingat untuk menyesuaikan `colspan` pada kondisi data kosong.
{% endhint %}

{% hint style="info" %}
Jangan panik jika nomor urut berbeda dengan ID database. Itu memang dua hal yang berbeda.
{% endhint %}

### Poin evaluasi bab 6.5

Pastikan Anda sudah memahami poin berikut:

* Saya paham nomor urut tampilan tidak perlu disimpan di database.
* Saya tahu fungsi `$loop->iteration` di Blade.
* Saya bisa menambahkan kolom `No` ke tabel data.
* Saya tahu perbedaan nomor urut dengan `id`.
* Saya ingat menyesuaikan `colspan` saat jumlah kolom berubah.

Jika semuanya sudah jelas, lanjut ke checkpoint akhir di [6.6 Checkpoint: Uji Pemahamanmu Sebelum Lanjut!](/laravel/bab-6-fitur-read/6.6-checkpoint-uji-pemahamanmu-sebelum-lanjut.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.5-membuat-nomor-otomatis-dengan-blade.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.