Tugas Ajax
Tugas ini diminta untuk latihan menggunakan ajax membuat aplikasi interaktif
Berikut ini link Website
Dan berikut ini merupakan codingannya
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> | |
| <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> |
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"> | |
| <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> |
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
| body { | |
| background-image: url("bg.jpg"); | |
| 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; | |
| } |
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> | |
| <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/ae2768ef-7e81-47b8-998d-9ba065ad47ab", true); | |
| xhttp.send(); | |
| } | |
| </script> | |
| </html> |
Comments
Post a Comment