b:loop - Blogger Tutorial

Penjelasan

<b:loop> digunakan untuk melakukan iterasi dua atau lebih algoritmik.

Apa itu iterasi ? iterasi dalam hal ini adalah suatu proses atau metode yang digunakan secara berulang-ulang (pengulangan) untuk mendapatkan atau membuat dan atau menyelesaikan suatu proses.

syntax

<b:loop values='...' var='....'>

</b:loop>

Attribut

• index
• reverse
• values
• var

Attribut index

• Attribut ini menghasilakan nilai berupa data angka, yang dihasilkan dari proses pengulangan
• Nilai : string
• Keterangan : relative, bisa dituliskan ataupun tidak

---

Attribut reverse

• Attribut ini digunakan untuk membalik arah loop
• Nilai : true dan false
• Keterangan : relative, bisa dituliskan ataupun tidak

Catatan : attribut ini tidak mempengaruhi attribut index

---

Attribut values

• Attribut ini digunakan sebagai tempat menuliskan sebuah array atau data-data tunggal yang ditempatkan menjadi satu variable array.
• Nilai : Array
• Keterangan : Wajib ditulis

---

Attribut var

• Digunakan sebagai nama Variable dari nilai yang sudah dimasukan.
• Nilai : Nama_variable
• Keterangan : Wajib ditulis

Contoh Penggunaan <b:loop>

Contoh standart

<b:loop values='["1", "2", "3", "4"]' var='this'>
  <data:this/>
</b:loop>

Hasil render HTML

1
2
3
4

Contoh dengan attribut reverse

<b:loop values='["a", "b", "c", "d"]' var='this' reverse='true'>
  <data:this/>
</b:loop>

Hasil render HTML

d
c
b
a

Contoh dengan menerapkannya pada HTML

<ul>
  <b:loop values='["aaa", "bbb", "ccc", "ddd"]' var='example'>
    <li><data:example/></li>
  </b:loop>
</ul>

Hasil render HTML

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
</ul>

Contoh dengan index

<ul>
  <b:loop index='i' values='["aaa", "bbb", "ccc", "ddd"]' var='example'>
    <li expr:class='"list list-" + (data:i + 1)'><data:example/></li>
  </b:loop>
</ul>

Hasil render HTML

<ul>
  <li class="list list-1">aaa</li>
  <li class="list list-2">bbb</li>
  <li class="list list-3">ccc</li>
  <li class="list list-4">ddd</li>
</ul>

Contoh dengan index dan reverse

Perlu diingat attribut reverse tidak merubah hasil dari attribut index

<ul>
  <b:loop index='i' values='["aaa", "bbb", "ccc", "ddd"]' var='example' reverse='true'>
    <li expr:class='"list list-" + (data:i + 1)'><data:example/></li>
  </b:loop>
</ul>

Hasil render HTML

<ul>
  <li class="list list-1">ddd</li>
  <li class="list list-2">ccc</li>
  <li class="list list-3">bbb</li>
  <li class="list list-4">aaa</li>
</ul>

Selamat berkreasi dan semoga bermanfaat