Penjelasan Tag b:switch, b:case, dan b:default pada Blogger

Tag <b:switch> adalah salah satu tipe Conditional yang dapat mengevaluasi suatu ekspresi dari beberapa pilihan/case dan akan menjalankan salah satu atau beberapa kode berdasarkan pilihan/case yang cocok. Tag <b:switch> terdiri dari dua Statement, yaitu <b:case> dan <b:default>.

Contoh Penulisan Tag <b:switch>, <b:case>, dan <b:default>

Berikut adalah format penulisan tag <b:switch> beserta tag <b:case>, dan <b:default>:

<b:switch var="EKSPRESI">
    <b:case value="ESKPRESI_1" />
        <!-- Kode yang berada disini akan muncul ketika cocok dengan EKSPRESI_1 -->
    <b:case value="ESKPRESI_2" />
        <!-- Kode yang berada disini akan muncul ketika cocok dengan EKSPRESI_2 -->
    <b:default />
        <!-- Kode yang berada disini akan muncul ketika semua ekspresi diatas tidak ada yang cocok -->
<b:switch>

Keterangan:
  • Tag <b:switch> dapat digunakan secara bertumpuk (Nested).
  • Tag <b:switch> dan <b:case> harus memiliki atribut di dalamnya.
  • Tag <b:switch> dan <b:case> harus memiliki nilai Boolean, Angka, String, atau ekspresi blogger yaitu data:.
  • Tag <b:case> dan <b:default> harus berada di dalam tag <b:switch>.
  • Tag <b:case> harus ada di dalam tag <b:switch> sedangkan tag <b:default> dapat dimasukkan jika diperlukan.
  • Tag <b:case> dapat di masukkan beberapa kali di dalam tag <b:switch>.
  • Hanya diperbolehkan menggunakan satu tag <b:default> yang berada di dalam tag <b:switch>.
  • Tag <b:default> harus ada di bagian akhir dari semua tag yang ada di dalam tag <b:switch>.

Contoh Kode Tag <b:switch>, <b:case>, dan <b:default>

Berikut adalah contoh kode tag <b:switch> beserta tag <b:case>, dan <b:default>:

<ul>
    <b:loop values='["Mamalia", "Reptil", "Lainnya"]' var="DaftarHewan">
        <li>
            <data:DaftarHewan />

            <b:switch var="data:DaftarHewan">
                <b:case value="Mamalia" />
                <ul>
                    <b:loop values='["Sapi", "Kerbau", "Kambing"]' var="Mamalia">
                    <li><data:Mamalia /></li>
                    </b:loop>
                </ul>

                <b:case value="Reptil" />
                <ul>
                    <b:loop values='["Ular", "Buaya", "Komodo"]' var="Reptil">
                        <li><data:Reptil /></li>
                    </b:loop>
                </ul>

                <b:default/>
                <ul>
                    <b:loop values='["Amphibi", "Pisces", "Aves"]' var='Lainnya'>
                        <li><data:Lainnya/></li>
                    </b:loop>
                </ul>
            </b:switch>
        </li>
    </b:loop>
</ul>

Pada contoh kode diatas, kita memiliki dua data pada Loop (Pengulangan) yang siap untuk ditampilkan. Tetapi, sebelum itu, kita telah menambahkan atribut <b:switch> dan memiliki beberapa pilihan/case untuk setiap data yang kita buat. Atribut <b:case> akan memproses data utama dan menambahkan data lainnya kedalam data utama. Proses tersebut akan terulang (Loop) sampai habis. Hasil yang akan muncul ketika halaman dirender pada Browser akan terlihat seperti berikut:

<ul>
    <li>
        Mamalia

        <ul>
            <li>Sapi</li>
            <li>Kerbau</li>
            <li>Kambing</li>
        </ul>
    </li>

    <li>
        Reptil

        <ul>
            <li>Ular</li>
            <li>Buaya</li>
            <li>Komodo</li>
        </ul>
    </li>

    <li>
        Lainnya

        <ul>
            <li>Amphibi</li>
            <li>Pisces</li>
            <li>Aves</li>
        </ul>
    </li>
</ul>

Mungkin itu saja penjelasan dari saya, jika ada yang kurang jelas, kalian dapat bertanya melalui kolom komentar dibawah ini. Jika artikel ini bermanfaat, silahkan dibagikan. Terimakasih telah berkunjung di EL Creative Academy.

Tampilkan 1 Komentar

1 Komentar

  1. apakah ini dapat muncul d tataletak mas y?

    atau butuh kode lain untuk memunculkan di tataletak?

    seperti LinkList.

    sepertinya ini sangat menarik mas. :)

    BalasHapus

Posting Komentar