Tugas 7 - Mencoba Ajax
Tugas yang saya buat adalah pembuatan Ajax sederhana.
Untuk melihat hasil tersebut bisa dilihat pada link berikut : Link Website
Untuk Visualisasi dari web :
Halaman Utama :
Halaman 1 :
Halaman 2 :
Source dapat dilihat sebagai berikut :
exercise1/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <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>Tugas</title> | |
| </head> | |
| <body class="bg-light"> | |
| <div class="container d-flex justify-content-center"> | |
| <div class="d-flex min-vh-100 flex-column aligns-items-center justify-content-center"> | |
| <h1 class="text-primary">Ajax Sederhana</h1> | |
| <div class="px-3 border-top border-dark py-4 text-center"> | |
| <a href="./exercise1/index.html" class="btn btn-success">Page 1</a> | |
| <a href="./exercise2/index.html" class="btn btn-success">Page 2</a> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| </script> | |
| </html> |
exercise1/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <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>Data</title> | |
| </head> | |
| <body class="bg-light"> | |
| <div class="container d-flex justify-content-center text-dark"> | |
| <div class="d-flex min-vh-100 flex-column aligns-items-center justify-content-center"> | |
| <h1 class="text-primary">Tampilkan Data</h1> | |
| <div class="px-3 border-top border-dark py-4 text-center"> | |
| <button type="button" class="btn btn-success" onclick="loadDoc()">Tampilkan Data</button> | |
| <div class="my-3" id='targetData'></div> | |
| </div> | |
| <div class="px-3 border-top border-dark py-4 text-center"> | |
| <a class="btn btn-success" href="../index.html" style="color: white;">Kembali</a> | |
| </div> | |
| </div> | |
| </div> | |
| </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", "success-msg.json", true); | |
| xhttp.send(); | |
| } | |
| </script> | |
| </html> |
exercise2/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <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> | |
| </head> | |
| <body class="bg-light" 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 class="text-primary">Form Library</h1> | |
| <div class="row"> | |
| <div class="px-3 border-top border-dark 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 class="px-3 border-top border-dark py-4 text-center"> | |
| <a class="btn btn-success" href="../index.html" style="color: white;">Kembali</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </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> |
Comments
Post a Comment