Langsung ke konten utama

Belajar Web Ceria 6

Mencoba AJAX (Asynchronous JavaScript and XMLHTTP)

    Halo kisanak, kali ini aku akan berbagi implementasi AJAX yang cukup sederhana, yaitu  Request Data, untuk mengubah konten pada suatu halaman, tanpa perlu berpindah/reload ke halaman baru, dan juga ada Filter Data Daerah Kalimantan dalam kolom pencarian . AJAX adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability. Untuk memudahkan dalam menyimpan data, disini aku pakai file .json

Kalian bisa lihatwebya di cobaajax.com
tampilan awal

output request text
output request database


Kalian bisa lihat full source code disini

Index.html

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Train - Ajax</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- script untuk mengambil teks di text.html -->
<script>
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}
function getText(url, divResponse) {
if (XMLHttpRequestObject) {
const obj = document.getElementById(divResponse);
XMLHttpRequestObject.open("GET", url);
XMLHttpRequestObject.onreadystatechange = () => {
if (XMLHttpRequestObject.readyState === 1) {
obj.innerHTML = "Loading";
}
if (XMLHttpRequestObject.readyState === 4) {
if (XMLHttpRequestObject.status === 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
} else {
obj.innerHTML = XMLHttpRequestObject.statusText;
}
}
};
XMLHttpRequestObject.send(null);
}
}
</script>
<!-- script untuk ambil data kalimantan -->
<script>
function loadProvinsi() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
const myObj = JSON.parse(this.responseText);
let html = "<option>Pilih Provinsi</option>";
let idx = 0;
for (let x of Object.keys(myObj)) {
html += "<option";
html += ` value='${idx}'>`;
html += x;
html += "</option>";
idx += 1;
}
document.getElementById("provinsi").innerHTML = html;
};
xhttp.open("GET", "kalimantan.json", true);
xhttp.send();
}
function loadKabKota(idx) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
const myObj = JSON.parse(this.responseText);
let html = "<option>Pilih Kabupaten/Kota</option>";
for (let x of Object.values(myObj)[idx]) {
html += "<option>";
html += x;
html += "</option>";
}
document.getElementById("kabupaten").innerHTML = html;
};
xhttp.open("GET", "kalimantan.json", true);
xhttp.send();
}
</script>
</head>
<body onload="loadProvinsi()">
<!-- Begin nav -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a
class="navbar-brand fw-bold"
style="color: #c85c5c !important"
href="#"
>Train - AJAX</a
>
</div>
</nav>
<!-- End nav -->
<!-- Begin content -->
<div class="container-lg pt-3 min-vh-100">
<div class="d-grid gap-3 d-block">
<div class="text-center">
<h1 class="mb-3">Implementasi Ajax Sederhana</h1>
<div class="">
<input
type="radio"
class="btn-check"
name="options"
id="text"
data-bs-toggle="collapse"
data-bs-target="#requestText:not(.show), #requestDatabase.show"
onclick="getText('text.html', 'responseText')"
autocomplete="off"
/>
<label class="btn btn-primary mx-1 mb-1" for="text"
>Request Text</label
>
<input
type="radio"
class="btn-check"
name="options"
id="database"
data-bs-toggle="collapse"
data-bs-target="#requestDatabase:not(.show), #requestText.show"
autocomplete="off"
/>
<label class="btn btn-primary mx-1 mb-1" for="database"
>Request Database</label
>
</div>
</div>
<div class="collapse" id="requestText">
<div class="card card-body" id="responseText"></div>
</div>
<div class="collapse" id="requestDatabase">
<div class="card card-body" id="responseText">
<div class="row">
<h4 class="text-center">Filter Daerah</h4>
<div class="col">
<div class="form-group mb-2">
<label>Provinsi</label>
<select
class="form-select"
name="provinsi"
id="provinsi"
onchange="loadKabKota(document.getElementById('provinsi').value)"
>
<option value="">Pilih Provinsi</option>
</select>
</div>
<div class="form-group mb-2">
<label>Kabupaten</label>
<select class="form-select" name="kabupaten" id="kabupaten">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End content -->
<!-- Begin footer -->
<footer class="fixed-bottom bg-primary text-white text-center py-3">
<div>&copy; 2021 Thomas</div>
</footer>
<!-- End footer -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

Text.html

<div>Selamat, kamu sudah mengimplementasikan <strong>AJAX</strong></div>
view raw text.html hosted with ❤ by GitHub

Kalimantan.json

{
"Kalimantan Barat": [
"Kabupaten Bengkayang",
"Kabupaten Kapuas Hulu",
"Kabupaten Kayong Utara",
"Kabupaten Ketapang",
"Kabupaten Kubu Raya",
"Kabupaten Landak",
"Kabupaten Melawi",
"Kabupaten Pontianak",
"Kabupaten Sambas",
"Kabupaten Sanggau",
"Kabupaten Sekadau",
"Kabupaten Sintang",
"Kota Pontianak",
"Kota Singkawang"
],
"Kalimantan Timur": [
"Kabupaten Berau",
"Kabupaten Kutai Barat",
"Kabupaten Kutai Kartanegara",
"Kabupaten Kutai Timur",
"Kabupaten Paser",
"Kabupaten Penajam Paser Utara",
"Kabupaten Mahakam Ulu",
"Kota Balikpapan",
"Kota Bontang",
"Kota Samarinda"
],
"Kalimantan Selatan": [
"Kabupaten Tanah Laut",
"Kabupaten Kotabaru",
"Kabupaten Banjar",
"Kabupaten Barito Kuala",
"Kabupaten Tapin",
"Kabupaten Hulu Sungai Selatan",
"Kabupaten Hulu Sungai Tengah",
"Kabupaten Hulu Sungai Utara",
"Kabupaten Tabalong",
"Kabupaten Tanah Bumbu",
"Kabupaten Balangan",
"Kota Banjarmasin",
"Kota Banjarbaru"
],
"Kalimantan Tengah": [
"Kabupaten Barito Selatan",
"Kabupaten Barito Timur",
"Kabupaten Barito Utara",
"Kabupaten Gunung Mas",
"Kabupaten Kapuas",
"Kabupaten Katingan",
"Kabupaten Kotawaringin Barat",
"Kabupaten Kotawaringin Timur",
"Kabupaten Lamandau",
"Kabupaten Murung Raya",
"Kabupaten Pulang Pisau",
"Kabupaten Sukamara",
"Kabupaten Seruyan",
"Kota Palangka Raya"
],
"Kalimantan Utara": [
"Kabupaten Bulungan",
"Kabupaten Malinau",
"Kabupaten Nunukan",
"Kabupaten Tana Tidung",
"Kota Tanjung Selor",
"Kota Tarakan"
]
}
view raw kalimantan.json hosted with ❤ by GitHub

Label

Labels:

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar Java Ceria 5

Game The world-of-zuul      Halo kisnak, kali ini aku akan membuat sebuah project kecil yang dibuat berdasarkan buku Object First With Java. Game ini sebenarnya bertipe adventure, tapi ya biasa aja dan membosankan. Akan tetapi, ini bisa menjadi implementasi untuk Designing Classes. Terdapat 5 kelas pada project ini, yaitu: ■ CommandWords - Kelas CommandWords mendefinisikan semua Command yang valid dalam permainan (go, help, quit). Ini dilakukan dengan menyimpan array objek String yang mewakili kata-kata perintah. ■ Parser  - Parser membaca baris input dari terminal dan mencoba menafsirkannya sebagai Command. Ini membuat objek dari Class Command yang mewakili perintah itu masuk. ■ Command  - Sebuah objek perintah mewakili perintah yang dimasukkan oleh pengguna. Ini memiliki metode yang memudahkan kita untuk memeriksa apakah ini adalah perintah yang valid dan untuk mendapatkan kata pertama dan kedua dari perintah tersebut sebagai string terpisah. ■ Room - Objek ...
Posting Komentar
Read more »

Belajar Java Ceria 4

Technical Support System Sederhana     Sebuah Technical Support System yang sesungguhnya pasti memakai bot didalamnya, dan itu perlu ilmu yang lebih tinggi karena merupakan salah satu contoh aplikasi kognitif dan penerapan AI. Tapi kali ini aku akan buat yang versi sederhana saja berdasarkan buku Objects First With Java bab 5 bagian 5.2. Jadi dibuku sudah dibuat program dasarnya,  yang betul-betul simpel banget dan biasa aja. Nah disini aku sedikit modifikasi agar sistem ini terlihat lebih "hidup". Jadi berikut ini Class dari programnya, dan sudah kubuat dokumentasi singkat didalamnya InputReader Responder supportSystem mainSupportSystem Ini akan jadi main program yang akan menjalankan seluruh Class di atas Dan berikut ini salah satu output yang dapat diberikan Kalian bisa kok menggunakan kode diatas dan membuat variasi yang lebih menarik dari ini. Mantap, Rispek!!✌
Posting Komentar
Read more »

Belajar Java Ceria 3

 Grouping Object      Kali ini aku akan mencoba implementasi sederhana tentang grouping object dengan Collection serta membuat Sistem lelang sangat sederhana  Java Collection Java Collection secara sederhana merupakan sebuah objek. Collectionadalah framework yang menyediakan tempat untuk menyimpan dan memanipulasi sekumpulan objek. framework ini dapat melakukan pencarian, pengurutan, memasukan data dan menghapus. Collection menyediakan berbagai interface seperti Set, List, Queue, Dequeue dan untuk class-nya antara lain, ArrayList, Vector, Linked List, dll.  ArrayList Contoh ArrayList ini memakai iterasi while Contoh ArrayList dengan For-Each Loop ini memakai iterasi for Contoh ArrayList dan Class Data Disini perlu dibuat dulu Class Mahasiswa, bisa seperti ini Dan Seperti ini Class dari ArrayListnya Contoh Memakai addAll di ArrayList Contoh Memakai RemoveAll di ArrayList Contoh Memakai RetainAll di ArrayList Demikian berbagai contoh pengunaan Arraylist. Lal...
3 komentar
Read more »