Pada tugas ini diminta untuk mencoba menggunakan Ajax pada web. Pada Latihan 1 terdapat tombol yang akan memberikan respon jika di klik, sedangkan pada Latihan 2 terdapat pilihan Continent dan Country untuk memilih benua dan negara yang ada di benua tersebut. Pilihan pada Country akan muncul setelah memilih salah satu dari pilihan Continent.
Link Website:
Dokumentasi tampilan halaman login dan contact us adalah sebagai berikut
1. Landing page
2. Latihan 1
3. Latihan 2
Dokumentasi source code :
1. index.html
This file contains hidden or 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"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script> | |
| <title>Latihan Ajax</title> | |
| </head> | |
| <body> | |
| <div class="container d-flex justify-content-center"> | |
| <div class="middleBox"> | |
| <div class="cards" > | |
| <h2>Latihan Ajax</h2> | |
| <div class="px-3 border-top py-4 text-center" style="padding-bottom: 5px;"> | |
| <a href="testAjax.html" class="btn btn-primary">Latihan 1</a> | |
| </div> | |
| <div class="px-3 border-top py-4 text-center"> | |
| <a href="continent.html" class="btn btn-primary">Latihan 2</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
2. testAjax.html
This file contains hidden or 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> | |
| <link rel="stylesheet" href="style.css"> | |
| <title>Testing Ajax</title> | |
| </head> | |
| <body> | |
| <div class="container d-flex justify-content-center"> | |
| <div class="boxAjax"> | |
| <div class="cards"> | |
| <h2>Mencoba Ajax</h2> | |
| <div class="px-3 border-top py-4 text-center"> | |
| <button type="button" class="btn btn-primary" onclick="loadDoc()">Click Here</button> | |
| <div class="my-3" id='iniTarget'></div> | |
| </div> | |
| </div> | |
| <div class="navButton"> | |
| <a href="index.html" class="btn btn-primary">Back</a> | |
| <a href="continent.html" class="btn btn-primary">Latihan 2</a> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| function loadDoc() { | |
| const xhttp = new XMLHttpRequest(); | |
| xhttp.onload = function () { | |
| const myObj = JSON.parse(this.responseText); | |
| document.getElementById("iniTarget").innerHTML = myObj.teks; | |
| } | |
| xhttp.open("GET", "https://mocki.io/v1/5b4a0fd5-8d1d-4cf3-9d59-57e1382f317b", true); | |
| xhttp.send(); | |
| } | |
| </script> | |
| </html> |
3. continent.html
This file contains hidden or 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> | |
| <link rel="stylesheet" href="style.css"> | |
| <title>Pilih Continent</title> | |
| </head> | |
| <body onload="loadContinents()"> | |
| <div class="container d-flex justify-content-center"> | |
| <div class="boxAjax"> | |
| <div class="cards2"> | |
| <h2>Continents</h2> | |
| <div class="px-3 border-top py-4 text-center"> | |
| <select id="benua" class="form-select mb-3" onchange="loadCountry(document.getElementById('benua').value)"> | |
| </select> | |
| <select id="negara" class="form-select"> | |
| </select> | |
| <a href="#" class="btn btn-primary" style="margin-top: 2rem;">Save</a> | |
| </div> | |
| </div> | |
| <div class="navButton2"> | |
| <a href="index.html" class="btn btn-primary">Back</a> | |
| <a href="testAjax.html" class="btn btn-primary">Latihan 1</a> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| function loadContinents() { | |
| const xhttp = new XMLHttpRequest(); | |
| xhttp.onload = function () { | |
| const myObj = JSON.parse(this.responseText); | |
| let html = "<option>Continent</option>"; | |
| let idx = 0 ; | |
| for (let x of Object.keys(myObj)) { | |
| html += "<option"; | |
| html += ` value='${idx}'>`; | |
| html += x; | |
| html += "</option>"; | |
| idx += 1; | |
| } | |
| document.getElementById("benua").innerHTML = html; | |
| } | |
| xhttp.open("GET", "https://mocki.io/v1/255291e7-065b-4464-bf88-c476c918a237", true); | |
| xhttp.send(); | |
| } | |
| function loadCountry(idx) { | |
| const xhttp = new XMLHttpRequest(); | |
| xhttp.onload = function () { | |
| const myObj = JSON.parse(this.responseText); | |
| let html = "<option>Country</option>"; | |
| for (let x of Object.values(myObj)[idx]) { | |
| html += "<option>"; | |
| html += x; | |
| html += "</option>"; | |
| } | |
| document.getElementById("negara").innerHTML = html; | |
| } | |
| xhttp.open("GET", "https://mocki.io/v1/255291e7-065b-4464-bf88-c476c918a237", true); | |
| xhttp.send(); | |
| } | |
| </script> | |
| </html> |
4. style.css
This file contains hidden or 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
| body { | |
| background-image: url("https://images.unsplash.com/photo-1464618663641-bbdd760ae84a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80"); | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| font-family: 'Lato', sans-serif; | |
| } | |
| .middleBox{ | |
| /* size: 500px; */ | |
| background-color: rgb(233, 238, 243); | |
| margin-top: 9rem; | |
| margin-bottom: auto; | |
| margin-left: 24rem; | |
| margin-right: auto; | |
| padding-top: 1.5rem; | |
| padding-bottom:1.5rem; | |
| padding-right:4rem; | |
| padding-left: 1.5rem; | |
| border-radius: 30px | |
| } | |
| .boxAjax{ | |
| background-color: rgb(233, 238, 243); | |
| margin-top: 10rem; | |
| margin-bottom: auto; | |
| margin-left: 23rem; | |
| margin-right: auto; | |
| padding-top: 1.5rem; | |
| padding-bottom:1.5rem; | |
| padding-right:4rem; | |
| padding-left: 1.5rem; | |
| border-radius: 30px | |
| } | |
| .cards{ | |
| margin-top: 1.5rem; | |
| margin-bottom:2rem; | |
| margin-right:2rem; | |
| margin-left: 4rem; | |
| } | |
| .cards2{ | |
| margin-top: 5px; | |
| margin-bottom:2rem; | |
| margin-right:2rem; | |
| margin-left: 4rem; | |
| } | |
| .navButton{ | |
| margin-left: 5.5rem; | |
| } | |
| .navButton2{ | |
| margin-left: 4.2rem; | |
| } |
Comments
Post a Comment