Tugas 7: Ajax Sederhana
Nama: Dyandra Paramitha Widyadhana
NRP: 05111940000119
Kelas: PWEB-B
Link Website: https://dydyandra.github.io/latihan-ajax/
Link Source Code: https://github.com/dydyandra/latihan-ajax
Introduction
Pada penugasan ke-7, kami diminta untuk berlatih menggunakan Ajax.
Asynchronous JavaScript and XMLHTTP, atau disingkat 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.
Tools Yang Digunakan:
Untuk membuat, saya menggunakan HTML, CSS dan JS.
HTML sebagai markup language digunakan untuk membuat struktur dan konten dari kedua tugas.
CSS digunakan untuk menentukan layout, style, serta keselarasan halaman website. Pada tugas kali ini, saya menggunakan Bootstrap sebagai salah satu framework yang dapat digunakan, dan juga terdapat beberapa internal CSS untuk menambahkan sedikit detail.
JS digunakan untuk menampilkan secara dinamis dan berinteraksi dengan informasi yang ditampilkan menggunakan fungsi yang akan berjalan apabila website diload.
XMLHttpRequest yang berguna sebagai kendaraan pertukaran data asinkronus dengan web server.
JSON digunakan sebagai dokumen transfer.
Untuk men-deploy, saya menggunakan Github Pages.
Gambar Website:
Source Code:
Halaman Utama:
<html lang="en"> <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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script> <title>Login</title> <style> body { background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); } </style> </head> <body> <div class="container d-flex justify-content-center"> <div class="d-flex min-vh-100 flex-column aligns-items-center justify-content-center"> <h1>Website Ajax Sederhana</h1> <div class="px-3 border-top py-4 text-center"> <a href="./latihan1/index.html" class="btn btn-dark">Latihan 1</a> <a href="./latihan2/index.html" class="btn btn-dark">Latihan 2</a> </div> </div> </div> <footer class="text-center"> <h5>© Dyandra Paramitha 05111940000119</h5> </footer> </body> <script> </script> </html>
Latihan 1:
<html lang="en"> <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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script> <title>Library Data</title> <style> body { background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); } </style> </head> <body> <div class="container d-flex justify-content-center"> <div class="d-flex min-vh-100 flex-column aligns-items-center justify-content-center"> <h1>Menampilkan Data</h1> <div class="px-3 border-top py-4 text-center"> <button type="button" class="btn btn-dark" onclick="loadDoc()">Tampilkan Data</button> <div class="my-3" id='targetData'></div> </div> </div> </div> <footer class="text-center"> <h5>© Dyandra Paramitha 05111940000119 <a href="../index.html" style="color: inherit;">(Kembali)</a> </h5> </footer> </body> <script> function loadDoc() { const xhttp = new XMLHttpRequest(); xhttp.onload = function () { const myObj = JSON.parse(this.responseText); document.getElementById("targetData").innerHTML = myObj.teks; } xhttp.open("GET", "https://mocki.io/v1/ae2768ef-7e81-47b8-998d-9ba065ad47ab", true); xhttp.send(); } </script> </html>
{ "teks":"Selamat! Anda berhasil mencoba <b>Ajax</b>" }
Latihan 2:
<html lang="en"> <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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script> <title>Library Form</title> <style> body { background-image: linear-gradient(120deg, #f3f17f 0%, #ebeaca 100%); } </style> </head> <body onload="loadType()"> <div class="container min-vh-100 d-flex justify-content-center"> <div class="d-flex flex-column aligns-items-center justify-content-center"> <h1>Form Library</h1> <div class="row"> <div class="px-3 border-top py-4 text-center"> <select id="type" class="form-select mb-3" onchange="loadGenre(document.getElementById('type').value)"> </select> <select id="genre" class="form-select"> </select> </div> </div> </div> </div> <footer class="text-center mt-4"> <h5>© Dyandra Paramitha 05111940000119 <a href="../index.html" style="color: inherit;">(Kembali)</a> </h5> </footer> </body> <script> function loadType() { const xhttp = new XMLHttpRequest(); xhttp.onload = function () { const myObj = JSON.parse(this.responseText); let html = "<option>Pilih Tipe...</option>"; let idx = 0 ; for (let x of Object.keys(myObj)) { html += "<option"; html += ` value='${idx}'>`; html += x; html += "</option>"; idx += 1; } document.getElementById("type").innerHTML = html; } xhttp.open("GET", "library.json", true); xhttp.send(); } function loadGenre(idx) { const xhttp = new XMLHttpRequest(); xhttp.onload = function () { const myObj = JSON.parse(this.responseText); let html = "<option>Pilih Genre..</option>"; for (let x of Object.values(myObj)[idx]) { html += "<option>"; html += x; html += "</option>"; } document.getElementById("genre").innerHTML = html; } xhttp.open("GET", "library.json", true); xhttp.send(); } </script> </html>
{ "Adult Fiction": [ "Mystery Thriller", "High Fantasy", "Historical Romance", "Historical Fiction", "Adult Contemporary", "Classics" ], "Non Fiction": [ "Memoirs", "Self Help", "Encyclopedia", "Biographies", "Travel Guides", "History", "Text Books", "Philosophy" ], "YA Fiction": [ "YA Contemporary", "YA Fantasy", "YA Mystery Thrillers", "YA Romance", "YA Sci Fi", "YA Historical Fiction", "YA OwnVoices Books" ], "Picture Books": [ "For Age 0-3", "For Age 4-6", "For Age 7-13", "For Age 13+", "Manga" ], "DVD": [ "Romantic Comedy", "Thrillers", "Action", "Horror", "Romance", "Slice of Life" ] }
No comments: