# \`for\` & HTML

{% hint style="info" %}
untuk penjelasan tentang for bisa lihat kembali pada materi ini [perulangan-dengan-for](https://alvan.kitakale.id/fundamental-php/perulangan/perulangan-dengan-for "mention")
{% endhint %}

Sekarang kita akan mencoba untuk menampilkan angka dari 1 hingga 10 menggunakan perulangan `for` dan menggabungkan HTML untuk menampilkan hasilnya dalam tag `<h1>`. Mari kita jelaskan secara rinci setiap bagian dari kode ini.

#### Kode:

```php
<?php for ($i = 1; $i <= 10; $i++) : ?>
    <h1>Angka: <?= $i; ?></h1>
<?php endfor; ?>
```

#### Penjelasan:

1. **Perulangan `for`:**

   ```php
   <?php for ($i = 1; $i <= 10; $i++) : ?>
   ```

   * `for` adalah struktur perulangan yang digunakan ketika kita tahu berapa kali kita ingin mengulang blok kode tertentu.
   * Sintaks dasar dari `for` loop adalah:

     ```php
     for (initialization; condition; increment/decrement) {
         // blok kode yang akan dijalankan berulang kali
     }
     ```
   * Dalam contoh ini:
     * **Inisialisasi (`$i = 1`)**: Variabel `$i` diinisialisasi dengan nilai 1. Ini hanya dieksekusi satu kali sebelum loop dimulai.
     * **Kondisi (`$i <= 10`)**: Sebelum setiap iterasi, kondisi `$i <= 10` diperiksa. Jika kondisi ini benar (true), maka blok kode di dalam loop akan dijalankan. Jika salah (false), loop akan berhenti.
     * **Increment (`$i++`)**: Setelah setiap iterasi, nilai `$i` ditambah 1. Dengan cara ini, setiap kali loop dijalankan, `$i` akan bertambah.
2. **Blok Kode di Dalam Loop:**

   ```php
   <h1>Angka: <?= $i; ?></h1>
   ```

   * Blok kode ini adalah HTML yang akan dieksekusi dalam setiap iterasi dari loop.
   * Tag `<h1>` digunakan untuk menampilkan teks dalam ukuran heading besar.
   * `<?= $i; ?>` adalah singkatan dari `<?php echo $i; ?>`, yang digunakan untuk menampilkan nilai dari variabel `$i` pada halaman web. Pada setiap iterasi, nilai `$i` yang terbaru akan ditampilkan.
3. **Penutupan Loop:**

   ```php
   <?php endfor; ?>
   ```

   * `endfor;` menandakan akhir dari blok `for`. Setelah loop mencapai akhir (ketika kondisi `$i <= 10` tidak lagi terpenuhi), eksekusi program keluar dari loop dan kode setelah `endfor` akan dijalankan jika ada.

#### Bagaimana Kode Ini Bekerja:

* Kode dimulai dengan inisialisasi `$i = 1`.
* Selama `$i` kurang dari atau sama dengan 10, blok kode di dalam loop akan dieksekusi.
* Dalam setiap iterasi, nilai `$i` saat ini akan dicetak dalam tag `<h1>`, sehingga menghasilkan output seperti ini:

```html
<h1>Angka: 1</h1>
<h1>Angka: 2</h1>
<h1>Angka: 3</h1>
...
<h1>Angka: 10</h1>
```

* Setelah nilai `$i` menjadi 11, kondisi `$i <= 10` menjadi `false`, sehingga loop berhenti dan program selesai mengeksekusi kode.

#### Kesimpulan:

* **Looping dengan `for`**: Kode ini menggunakan `for` loop untuk menampilkan angka dari 1 hingga 10 dalam elemen heading `<h1>` pada halaman web.
* **Integrasi PHP dan HTML**: Kode ini menunjukkan bagaimana PHP dapat digunakan di dalam HTML untuk menghasilkan konten dinamis pada halaman web.
* **Pengendalian Loop**: Dengan menggunakan `for`, kita dapat dengan mudah mengontrol jumlah iterasi dan mengelola bagaimana nilai variabel `$i` berubah selama eksekusi loop.