B:Loop - Blogger Tutorial

Penjelasan

<b:loop> dipakai untuk melaksanakan iterasi dua atau lebih algoritmik.

Apa itu iterasi ? iterasi dalam hal ini ialah suatu proses atau metode yang dipakai secara berulang-ulang (pengulangan) untuk mendapat atau menciptakan dan atau menuntaskan 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, dapat dituliskan ataupun tidak

---

Attribut reverse

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

Catatan : attribut ini tidak menghipnotis attribut index

---

Attribut values

• Attribut ini dipakai sebagai daerah 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 agar bermanfaat

Berbagi :