Scribd
Unggah
96 tayangan7 halaman

Firebase Realtime Database

1. Firebase Realtime Database digunakan untuk mengambil dan memperbarui data secara real-time menggunakan AJAX dan programming Firebase. 2. Data diambil dari perangkat keras menggunakan AJAX dan diperbarui di Firebase, kemudian ditampilkan di tabel dan grafik yang diperbarui secara berkala. 3. JQuery menyederhanakan penggunaan AJAX dengan fungsi seperti load(), get(), dan post().

Diunggah oleh

Hanny Berchmans
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
96 tayangan7 halaman

Firebase Realtime Database

1. Firebase Realtime Database digunakan untuk mengambil dan memperbarui data secara real-time menggunakan AJAX dan programming Firebase. 2. Data diambil dari perangkat keras menggunakan AJAX dan diperbarui di Firebase, kemudian ditampilkan di tabel dan grafik yang diperbarui secara berkala. 3. JQuery menyederhanakan penggunaan AJAX dengan fungsi seperti load(), get(), dan post().

Diunggah oleh

Hanny Berchmans
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 7

Firebase Realtime

Database: Get & Update


Firebase dan AJAX Programming
Flow Chart
START

PUT SCRIPT:
FIREBASE

PUT SCRIPT: window.onload = function () { }


FIREBASE
CONFIGURATI
ON AMBILDATA DARI HARDWARE AJAX

FIREBASE
INITIALISATIO
N UPDATE DATA DI FIREBASE

SET FIREBASE

UPDATETABLE

SET INTERVAL
(UPDATETABLE,
UPDATEINTERVAL)

UPDATECHART

SET INTERVAL
(UPDATECHART,
UPDATEINTERVAL)
AJAX (ASYNCHRONOUS JAVASCRIPT
XML)
Cara Menggunakan Ajax di Javascript
1. Langkah-langkah menggunakan AJAX seperti ini:
a. Membuat Objek Ajax
var xhr = new XMLHttpRequest();
b. Menentukan Fungsi Handler untuk Event
xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };
c. Menentukan Method dan URL
xhr.open("GET", url, true);
d. Mengirim Request
xhr.send();
https://www.petanikode.com/javascript-ajax/

AJAX EXAMPLE 1
<!DOCTYPE html> Pada contoh di atas, kita mengambil data dari server Github dengan methode GET.
<html lang="en">
Lalu hasilnya langsung dimasukan ke dalam elemn <div id="hasil">.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Event yang kita gunakan adalah onreadystatechange, pada event ini kita bisa mengecek
<meta http-equiv="X-UA-Compatible" content="ie=edge"> state dan status AJAX.
<title>Belajar Dasar Ajax</title>
</head> if(this.readyState == 4 && this.status == 200){
<body> //...
<h1>Tutorial Ajax</h1> }
<div id="hasil"></div> Kode state 4 artinya done dan status 200 artinya sukses. Berikut ini daftar kode state
<button onclick="loadContent()">Load Content</button>
AJAX.
<script>
function loadContent(){
var xhr = new XMLHttpRequest(); Sementara untuk status header 200 adalah status HTTP Request. Biasanya kode di atas
var url = "https://api.github.com/users/petanikode"; 200 artinya baik dan di bawah 200 artinya buruk.
xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
Lalu coba perhatikan kode ini:
document.getElementById("hasil").innerHTML = this.responseText;
}
}; xhr.open("GET", url, true);
xhr.open("GET", url, true);
xhr.send(); Terdapat tiga parameter yang kita berikan kepada method open():
} GET adalah metode request yang akan digunakan;
</script> url adalah alamat URL tujuan;
</body>
true adalah untuk mengeksekusi AJAX secara asynchronous.
</html>
https://www.petanikode.com/javascript-ajax/

AJAX EXAMPLE 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Dasar Ajax</title>
</head>
<body>
<h1>Tutorial Ajax <button id="btn-clear" onclick="clearResult()">Clear</button></h1>
<div id="hasil"></div>
<button id="button" onclick="loadContent()">Load Content</button>
<script>
function loadContent() {
var xhr = new XMLHttpRequest();
var url = "https://api.github.com/users/petanikode";
xhr.onloadstart = function () {
document.getElementById("button").innerHTML = "Loading...";
}
xhr.onerror = function () {
alert("Gagal mengambil data");
};
xhr.onloadend = function () {
if (this.responseText !== "") {
var data = JSON.parse(this.responseText);
var img = document.createElement("img");
img.src = data.avatar_url;
var name = document.createElement("h3");
name.innerHTML = data.name;

document.getElementById("hasil").append(img, name);
document.getElementById("button").innerHTML = "Done";

setTimeout(function () {
document.getElementById("button").innerHTML = "Load Lagi";
}, 3000);
}
};
xhr.open("GET", url, true);
xhr.send();
}
function clearResult() {
document.getElementById("hasil").innerHTML = "";
}
</script>
</body>
</html>
https://www.petanikode.com/javascript-ajax/

Mengirim Data ke Server dengan AJAX


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Dasar Ajax</title>
</head>

<body>
<h1>Kirim Data dengan Ajax</h1>
<form method="POST" onsubmit="return sendData()">
<p>
<label>Title</label>
<input type="text" id="title" placeholder="judul artikel">
</p>
<p>
<label>Isi Artikel</label><br>
<textarea id="body" placeholder="isi artikel..." cols="50" rows="10"></textarea>
</p>
<input type="submit" value="Kirim" />
</form>

<script>
function sendData() {
var xhr = new XMLHttpRequest();
var url = "https://jsonplaceholder.typicode.com/posts";

var data = JSON.stringify({


title: document.getElementById("title").value,
body: document.getElementById("body").value,
userId: 1
});

xhr.open("POST", url, true);


xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onload = function () {
console.log (this.responseText);
};

xhr.send(data);
return false;
}
</script>
</body>
</html>
https://www.petanikode.com/javascript-ajax/

AJAX Menggunakan JQuery


JQuery adalah library Javascript yang
JQuery adalah library Javascript yang menyederhanakan fungsi-fungsi Javascript. Pada
menyederhanakan fungsi-fungsi Javascript. JQuery, AJAX dapat dibuat seperti ini:
Pada JQuery, AJAX dapat dibuat seperti
ini: <!DOCTYPE html>
<html lang="en">
<head>
// load data ke elemen tertentu via AJAX
<meta charset="UTF-8">
$(selector).load(URL,data,callback);
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
// ambil data dari server
<title>Belajar AJAX dengan JQuery</title>
$.get(URL,callback);
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></
// kirim data dari Server
script>
$.post(URL,data,callback);
</head>
<body>
<h1>Load Data</h1>
Dengan fungsi $("#result").load(), kita bisa mengambil data <pre id="result"></pre>

dengan AJAX dan langsung menampilkannya pada elemen yang <script>


$("#result").load("https://api.github.com/users/petanikode");
dipilih. </script>
</body>
</html>
Fungsi JQuery load() cocoknya untuk mengambil bagian dari
HTML untuk ditampilkan.

Anda mungkin juga menyukai