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 

Menggunakan-Realtime-Database-Pada-Firebase-Part5-01

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 

Menggunakan-Realtime-Database-Pada-Firebase-Part5-02

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'

Menggunakan-Realtime-Database-Pada-Firebase-Part5-03

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

Menggunakan-Realtime-Database-Pada-Firebase-Part5-04

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

Menggunakan-Realtime-Database-Pada-Firebase-Part5-05

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

Menggunakan-Realtime-Database-Pada-Firebase-Part5-06

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

Menggunakan-Realtime-Database-Pada-Firebase-Part5-07

Pada fungsi callback kita akses satu persatu dan dicetak dalam console 

Menggunakan-Realtime-Database-Pada-Firebase-Part5-08

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

Menggunakan-Realtime-Database-Pada-Firebase-Part5-09

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

Menggunakan-Realtime-Database-Pada-Firebase-Part5-010

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

Menggunakan-Realtime-Database-Pada-Firebase-Part5-011

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

Menggunakan-Realtime-Database-Pada-Firebase-Part5-012

Tentu isi content-nya kita bungkus dengan tag li 

Menggunakan-Realtime-Database-Pada-Firebase-Part5-013

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

Menggunakan-Realtime-Database-Pada-Firebase-Part5-014

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

Menggunakan-Realtime-Database-Pada-Firebase-Part5-015

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

Menggunakan-Realtime-Database-Pada-Firebase-Part5-016

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

21 Januari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat