Menggunakan Realtime Database Pada Firebase Part 5

Masih seputar database di firebase karena cukup banyak yang mau kita bahas di sini. Sekarang, kita akan bahas bagaimana cara mem-filter atau melakukan sort data. Misalnya teman-teman sudah memiliki banyak sekali data lalu kalian ingin mem-filter data datanya seperti mengurutkan atau cuma menampilkan beberapa data saja. Nah, itu semua bisa kita lakukan dengan query-query dari firebase-nya. Berikut ini hasil datanya 

Dimana pada bagian sebelumnya saya sudah menghubungkan atau mereferensikan ke data blog-nya lalu pada saat on value-nya aktif maka kita akses semua datanya melalui console 

Kita akan coba melanjutkan tugasnya yaitu bagaimana cara mengeluarkan data datanya untuk ditampilkan di struktur DOM tapi sebelum masuk ke bagian itu kita berkenalan dulu dengan query baru yaitu orderby yang di gunakan untuk mengurutkan data blognya. Untuk mengurutkan, ada beberapa jenis yang bisa kalian gunakan. Pertama ada orderbykey secara default dia akan mengurutkan berdasarkan key-nya, lalu yang kedua ada orderbychild berdasarkan anaknya dan juga orderbyvalue yakni order tergantung value-nya. cara menggunakannya kita tinggal tulis dan disambung sebelum event on-nya. Apa yang mau kita order, yang kita mau urutkan misalnya berdasarkan 'countread'

Countread disini sebagai total berapa banyak orang yang baca berita tersebut. Tentu kalian harus tambahkan dulu satu kolom untuk data countread-nya dengan mengklik tombol plus di masing-masing idnya

Terus tulis pasangan key dan value. Key-nya adalah countread value-nya bebas misalnya saya isi 10 

Kalo sudah silahkan ditambahkan. Lakukan hal yang sama untuk data id yang lainnya sehingga struktur database-nya menjadi seperti berikut

Jadi, setiap data blog-nya punya kolom countread dengan nilai yang berbeda-beda. Setelah itu, di bagian fungsi handleSuccess kita lakukan foreach untuk data items-nya

Pada fungsi callback kita akses satu persatu dan dicetak dalam console 

Cantik sekali kita berhasil mengurutkan data countread-nya dari kecil ke besar

Tantangan berikutnya, kita siapkan dulu tag ul sebagai daftar list blognya yang berikan id items 

Kemudian kita telusuri elemen id-nya dengan menuliskan document getElementById diikuti dengan nama id-nya yaitu items

Lalu kita juga akan sediakan string kosong di variabel content di mana nanti semua daftar list blognya akan kita letakkan di bagian variabel content ini

Tentu isi content-nya kita bungkus dengan tag li 

Karena kita melakukan perulangan kita harus tulis += yang artinya string sebelumnya akan digabung dengan string yang baru yang kita mau tampilkan adalah nama judulnya jadi concat dengan tanda + (plus). jika sudah selesai di-looping maka sekarang teman-teman sudah bisa memasukkan content-nya ke dalam ul container menggunakan method innerHTML

Kalau tidak ada ,kita sudah bisa lihat list datanya di browser-nya yang sudah diurutkan secara ascending seperti berikut

Nah, kalo teman-teman ingin menampilkan data yang lainnya juga boleh sehingga tampilnya menjadi seperti ini

Baik itu saja pembahasan hari ini. sampai jumpa di pertemuan berikutnya. Terima kasih