Christopher Baptista

Tugas 7 - Latihan AJAX

Christopher Baptista

Christopher Baptista · November 04, 2021

6 min read · ––– views

AJAX Logo

Tiap mahasiswa diberikan tugas untuk mencoba AJAX dan mengaplikasikan daerah. Saya akan menjelaskan hasil yang telah saya kerjakan mengenai tugas ini.
Deployment website Tugas 7 dapat diakses melalui click here.
Seluruh source code pada website ini dapat diakses melalui source code here.

Tampilan Halaman Utama

Di bawah ini merupakan tampilan dari index.html. Saya menggunakan Glassmorphism CSS untuk mempercantik tampilan utama.

Halaman Utama

Tampilan Tugas 1

Di bawah ini merupakan tampilan dari Tugas 1. Dimana saya akan mencoba untuk menampilkan teks menggunakan AJAX. Tekan button Tambahkan untuk memunculkan teks pada layar seperti gambar di bawah ini.

Tugas 1

Tampilan Tugas 2

Di bawah ini merupakan tampilan dari Tugas 2. Dimana saya akan mencoba untuk mengambil data daerah yang telah saya siapkan pada file tugas2.json menggunakan AJAX.
Pertama-tama tekan Pilih Provinsi terlebih dahulu, selanjutnya akan muncul Pilih Kabupaten/Kota pada kolom pilihan kedua seperti gambar di bawah ini.
Tekan Pilih Kabupaten/Kota untuk menampilkan nama-nama Kabupaten dan Kota dari Provinsi yang telah dipilih sebelumnya.

Tugas 2

Source Code

Di bawah ini merupakan code Halaman Utama pada file index.html.

index.html
<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">
    <link rel="stylesheet" href="style.css">
    <title>AJAX - Christopher Baptista</title>


</head>


<body>
    <div class="glass-panel">
        <h1>Latihan AJAX<br>Christopher Baptista</h1>
        <p>Glassmorphism is achieved using transparency and background blur to get a frosted-glass like effect.</p>
        <div class="glass-toolbar">
            <a href="tugas1.html"><button class="glass-button">Tugas 1</button></a>
            <a href="tugas2.html"><button class="glass-button">Tugas 2</button></a>
        </div>
    </div>
</body>

Berikut ini merupakan code Style CSS yang saya gunakan pada file style.css.

style.css
.glass-panel {
  color: #fff;
  margin: 40px auto;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  border-radius: 15px;
  padding: 32px;
  backdrop-filter: blur(10px);
}


.glass-button {
  display: inline-block;
  padding: 24px 32px;
  border: 0;
  text-decoration: none;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  text-transform: uppercase;
}


.glass-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}


/* Extra styles for demo */
/* Article:  https://superdevresources.com/glassmorphism-ui-css/ */
body {
  background: url(https://superdevresources.com/wp-content/uploads/2015/12/new-york-background.jpg)
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  font-family: "Open Sans", sans-serif;
}


.glass-panel {
  max-width: 600px;
}


.glass-button {
  margin: 15px;
  margin-top: 40px;
}


h1,
h1 a {
  min-height: 120px;
  width: 90%;
  max-width: 700px;
  vertical-align: middle;
  text-align: center;
  margin: 0 auto;
  text-decoration: none;
  color: #fff;
  padding-top: 60px;
  color: rgba(255, 255, 255, 0.8);
}


p {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 32px;
  color: rgba(255, 255, 255, 0.6);
}

Selanjutnya ada code yang menampilkan Tugas 1 pada file tugas1.html.

tugas1.html
<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">
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>AJAX - Tugas 1</title>
</head>
<body>
    <div class="glass-panel">
        <h1>Tugas 1</h1>
        <div class="glass-toolbar">
            <div class="border-top text-center">
                <button type="button" class="glass-button" onclick="getdata('show.html', 'teks')">Tambahkan</button>
                <div class="my-3" id='teks'></div>
            </div>
            <a href="index.html">
                <button class="glass-button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-arrow-left-short" viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z" />
                    </svg>
                    Kembali
                </button>
            </a>
        </div>
    </div>
</body>
<script language="javascript">
    var XMLHttpRequestObject = false;
    if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
    }


    function getdata(url, teks) {
        if (XMLHttpRequestObject) {
            var obj = document.getElementById(teks);
            XMLHttpRequestObject.open("GET", url);
            XMLHttpRequestObject.onreadystatechange = function () {
                if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
                    obj.innerHTML = XMLHttpRequestObject.responseText;
                }
            }


            XMLHttpRequestObject.send(null);
        }
    }
</script>

Lalu ada code yang menampilkan Tugas 2 pada file tugas2.html.

tugas2.html
<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">
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>AJAX - Tugas 2</title>
</head>
<body onload="loadProvinsi()">
    <div class="glass-panel">
        <h1>Tugas 2</h1>
        <div class="glass-toolbar">
            <div class="border-top text-center">
                <div class="px-3 border-top py-4 text-center">
                    <select id="provinsi" class="form-select mb-3"
                        onchange="loadKabKota(document.getElementById('provinsi').value)">


                    </select>
                    <select id="kabkota" class="form-select">
                    </select>
                </div>
            </div>
            <a href="index.html">
                <button class="glass-button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-arrow-left-short" viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z" />
                    </svg>
                    Kembali
                </button>
            </a>
        </div>
    </div>
</body>
<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", "tugas2.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("kabkota").innerHTML = html;
        }
        xhttp.open("GET", "tugas2.json", true);
        xhttp.send();
    }
</script>

Di bawah ini merupakan data yang akan digunakan pada file tugas2.json.

tugas2.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"
  ]
}

Resource

Leave a comment

Share your comment with my site.

Sign in with Github

← Back to blog · Edit on GitHub