Beranda > Javascript, Pemrograman Javascript, web design > FIREBASE – Membaca Data Firebase dan Menampilkannya Dalam Bentuk Tabel Menggunakan Javascript

FIREBASE – Membaca Data Firebase dan Menampilkannya Dalam Bentuk Tabel Menggunakan Javascript

4 Desember 2018

Pada kesempatan ini kita akan mencoba mengakses data di Firebase dan menapilkannya dalam bentuk tabel nenggunakan Javascript.

Petama kita harus mendapatkan script inisialisasi dari firebase. Caranya dengan masuk ke konsole firebase dan buka Project Overview. Lalu klik link seperti gambar.

Lalu akan muncul jendela seperti gambar berikut ini. Tekan tombol Copy.

Berikut data json yang akan ditampilkan.

{
  "status-alat" : [ {
    "jam_alat" : "14:18:00",
    "nama_alat" : "Kmr Mandi  ",
    "status_alat" : 1,
    "tanggal_alat" : "2018-11-29"
  }, {
    "jam_alat" : "12:27:00",
    "nama_alat" : "Teras",
    "status_alat" : 0,
    "tanggal_alat" : "2018-11-29"
  }, {
    "jam_alat" : "12:14:00",
    "nama_alat" : "Kulkas",
    "status_alat" : 1,
    "tanggal_alat" : "2018-11-29"
  }, {
    "jam_alat" : "16:32:46",
    "nama_alat" : "Rng Tamu",
    "status_alat" : 1,
    "tanggal_alat" : "2018-11-29"
  }, {
    "jam_alat" : "16:32:46",
    "nama_alat" : "Kmr Tidur",
    "status_alat" : 0,
    "tanggal_alat" : "2018-11-29"
  }, {
    "jam_alat" : "14:18:00",
    "nama_alat" : "Kipas Angin",
    "status_alat" : 1,
    "tanggal_alat" : "2018-11-13"
  }, {
    "jam_alat" : "04:11:00",
    "nama_alat" : "Mesin Air",
    "status_alat" : 0,
    "tanggal_alat" : "2018-11-29"
  }, {
    "jam_alat" : "15:24:00",
    "nama_alat" : "TV",
    "status_alat" : 1,
    "tanggal_alat" : "2018-11-29"
  } ]
}

Buat sebuah file Index.html


<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="firebase.js"></script>
<script src="jquery-3.2.1.slim.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css" >

</head>
<body>
<div style="padding:100px;">
<table id="tabel-status-alat" class="table table-striped table-bordered table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">Nama Alat</th>
<th scope="col">Status Alat</th>
<th scope="col">Tanggal Alat</th>
<th scope="col">Jam Alat</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</div>

<script>

// Initialize Firebase
var config = {
apiKey: "YOURAPIKEY",
authDomain: "YOURDOMAIN",
databaseURL: "YOURURL",
projectId: "YOURPROJECTID",
storageBucket: "YOURSTORAGEBUCKET",
messagingSenderId: "YOURSENDERID"
};
firebase.initializeApp(config);

// Buat referensi database firebase
var dbRef = firebase.database();
var statusAlat = dbRef.ref("status-alat");

// Dapatkan referensi table
var table = document.getElementById("tabel-status-alat").getElementsByTagName('tbody')[0];;

// Memuat Data
statusAlat.on("child_added", function(data, prevChildKey) {
var newstatusAlat = data.val();

var row = table.insertRow(table.rows.length);

var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);

cell1.innerHTML = newstatusAlat.nama_alat;
cell2.innerHTML = newstatusAlat.status_alat;
cell3.innerHTML = newstatusAlat.tanggal_alat;
cell4.innerHTML = newstatusAlat.jam_alat;

});

</script>

</body>
</html>

 

%d blogger menyukai ini: