Published on November 30, 2021
Tugas AJAX Pemrograman Web
Nama: Putu Ananda Satria Adi
NRP: 05111940000113
Kelas: Pemrograman Web B
Pada tugas ke 7 ini, saya membuat aplikasi web yang menerapkan AJAX sederhana menggunakan XMLHttpRequest untuk menampilkan tampilan sesuai dengan yang dipilih oleh pengguna pada button. Tampilan web yang telah saya buat dapat diakses di Tugas 07 | AJAX. Berikut merupakan screenshot dari halaman penerapan AJAX yang telah saya buat.
Source code: Github
Potongan kode dari laman diatas adalah sebagai berikut:
index.html
<!DOCTYPE html>
<html lang="id">
<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" />
<title>Tugas Ajax | Ananda Satria</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="/tugas-07/css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css"
/>
<link
rel="shortcut icon"
href="https://blog-ananda.vercel.app/favicon/apple-icon.png"
type="image/x-icon"
/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
</head>
<body class="gradient">
<div class="container align-items-center justify-content-center">
<div class="card mb-3 p-5 border-0">
<div class="text-center">
<div class="mb-4">
<h1 class="my-3">Implementasi Ajax | Putu Ananda Satria Adi</h1>
<h4>05111940000113 | PWEB B</h4>
</div>
<div>
<button
class="btn btn-primary mx-1 mb-1"
name="options"
id="text"
data-bs-toggle="collapse"
data-bs-target="#displayText:not(.show), #displayFilter.show"
onclick="getText()"
>
Tampilkan Teks
</button>
<button
class="btn btn-primary mx-1 mb-1"
name="options"
id="filter"
data-bs-toggle="collapse"
data-bs-target="#displayFilter:not(.show), #displayText.show"
onclick="getBenua()"
>
Tampilkan Formulir Benua
</button>
</div>
</div>
</div>
<div>
<div class="collapse text-center border-0" id="displayText">
<div class="card card-body text-center border-0" id="ajax-text"></div>
</div>
<div class="collapse border-0" id="displayFilter">
<div class="card card-body border-0">
<div class="row">
<h4 class="text-center">Filter Benua</h4>
<div class="col">
<div class="form-group mb-2">
<label>Benua</label>
<select
class="form-select"
name="select-benua"
id="select-benua"
onchange="getNegara()"
></select>
</div>
<div class="form-group mb-2">
<label>Negara</label>
<select
class="form-select"
name="select-negara"
id="select-negara"
></select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="fixed-bottom text-dark my-2 text-center">
<p>
Made with ❤️ by
<a href="https://annd.dev" style="color: black"> ©Ananda</a>
</p>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<script src="/tugas-07/js/main.js"></script>
</body>
</html>Dalam halaman tersebut saya menggunakan Javascript untuk melakukan request menggunakan AJAX sesuai permintaan pengguna. Berikut adalah source code Javascript tersebut
/js/main.js
function getText() {
const xhttp = new XMLHttpRequest();
if (xhttp) {
const container = document.getElementById("ajax-text");
xhttp.open("GET", "/tugas-07/content/text.html");
xhttp.onreadystatechange = () => {
if (xhttp.readyState === 1) {
container.innerHTML = `Loading...`;
}
if (xhttp.readyState === 4) {
if (xhttp.status === 200) {
container.innerHTML = xhttp.responseText;
} else {
container.innerHTML = xhttp.statusText;
}
}
};
xhttp.send(null);
}
}
function getBenua() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
const jsonResponse = JSON.parse(this.responseText);
let htmlText = `<option label="Pilih Benua" hidden></option>`;
let index = 0;
for (let x of Object.keys(jsonResponse)) {
htmlText += `<option value='${index}'>${x}</option>`;
index++;
}
document.getElementById("select-benua").innerHTML = htmlText;
document.getElementById(
"select-negara"
).innerHTML = `<option label="Pilih Negara" hidden></option>`;
};
xhttp.open("GET", "/tugas-07/content/continents.json", true);
xhttp.send();
}
function getNegara() {
let benua = document.getElementById("select-benua").value;
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
const jsonResponse = JSON.parse(this.responseText);
let htmlText = `<option label="Pilih Negara" hidden></option>`;
for (let x of Object.values(jsonResponse)[benua]) {
htmlText += `<option>${x}</option>`;
}
document.getElementById("select-negara").innerHTML = htmlText;
};
xhttp.open("GET", "/tugas-07/content/continents.json", true);
xhttp.send();
}Dari potongan kode diatas dapat diperhatikan terdapat 3 fungsi/metode yang saya gunakan, pertama getText() untuk request isi dari text.html untuk ditampilkan nantinya. Kemudian terdapat fungsi/metode getBenua() untuk mendapatkan list benua yang tersedia dari continents.json. Terakhir terdapat fungsi/metode getNegara() untuk mendapatkan list negara berdasarkan benua yang sudah dipilih dari continents.json.
Dari paparan diatas, saya menggunakan dua file yang berisi data yang saya request. Kedua file tersebut adalah text.html dan continents.json. Berikut adalah isi dari kedua file tersebut.
/content/text.html
Teks ini ditampilkan menggunakan Ajax/content/continents.json
{
"Africa": [
"Algeria",
"Angola",
"Benin",
"Botswana",
"British Indian Ocean Territory",
"Burkina Faso",
"Burundi",
"Cameroon",
"Cape Verde",
"Central African Republic",
"Chad",
"Comoros",
"Congo",
"Djibouti",
"Egypt",
"Equatorial Guinea",
"Eritrea",
"Ethiopia",
"Gabon",
"Gambia",
"Ghana",
"Guinea",
"Guinea-Bissau",
"Ivory Coast",
"Kenya",
"Lesotho",
"Liberia",
"Libyan Arab Jamahiriya",
"Madagascar",
"Malawi",
"Mali",
"Mauritania",
"Mauritius",
"Mayotte",
"Morocco",
"Mozambique",
"Namibia",
"Niger",
"Nigeria",
"Reunion",
"Rwanda",
"Saint Helena",
"Sao Tome and Principe",
"Senegal",
"Seychelles",
"Sierra Leone",
"Somalia",
"South Africa",
"South Sudan",
"Sudan",
"Swaziland",
"Tanzania",
"The Democratic Republic of Congo",
"Togo",
"Tunisia",
"Uganda",
"Western Sahara",
"Zambia",
"Zimbabwe"
],
"Antarctica": [
"Antarctica",
"Bouvet Island",
"French Southern territories",
"Heard Island and McDonald Islands",
"South Georgia and the South Sandwich Islands"
],
"Asia": [
"Afghanistan",
"Armenia",
"Azerbaijan",
"Bahrain",
"Bangladesh",
"Bhutan",
"Brunei",
"Cambodia",
"China",
"Cyprus",
"East Timor",
"Georgia",
"Hong Kong",
"India",
"Indonesia",
"Iran",
"Iraq",
"Israel",
"Japan",
"Jordan",
"Kazakhstan",
"Kuwait",
"Kyrgyzstan",
"Laos",
"Lebanon",
"Macao",
"Malaysia",
"Maldives",
"Mongolia",
"Myanmar",
"Nepal",
"North Korea",
"Oman",
"Pakistan",
"Palestine",
"Philippines",
"Qatar",
"Saudi Arabia",
"Singapore",
"South Korea",
"Sri Lanka",
"Syria",
"Tajikistan",
"Thailand",
"Turkey",
"Turkmenistan",
"United Arab Emirates",
"Uzbekistan",
"Vietnam",
"Yemen"
],
"Europe": [
"Albania",
"Andorra",
"Austria",
"Belarus",
"Belgium",
"Bosnia and Herzegovina",
"Bulgaria",
"Croatia",
"Czech Republic",
"Denmark",
"England",
"Estonia",
"Faroe Islands",
"Finland",
"France",
"Germany",
"Gibraltar",
"Greece",
"Holy See (Vatican City State)",
"Hungary",
"Iceland",
"Ireland",
"Italy",
"Latvia",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"North Macedonia",
"Malta",
"Moldova",
"Monaco",
"Montenegro",
"Netherlands",
"Northern Ireland",
"Norway",
"Poland",
"Portugal",
"Romania",
"Russian Federation",
"San Marino",
"Scotland",
"Serbia",
"Slovakia",
"Slovenia",
"Spain",
"Svalbard and Jan Mayen",
"Sweden",
"Switzerland",
"Ukraine",
"United Kingdom",
"Wales"
],
"Oceania": [
"American Samoa",
"Australia",
"Christmas Island",
"Cocos (Keeling) Islands",
"Cook Islands",
"Fiji Islands",
"French Polynesia",
"Guam",
"Kiribati",
"Marshall Islands",
"Micronesia, Federated States of",
"Nauru",
"New Caledonia",
"New Zealand",
"Niue",
"Norfolk Island",
"Northern Mariana Islands",
"Palau",
"Papua New Guinea",
"Pitcairn",
"Samoa",
"Solomon Islands",
"Tokelau",
"Tonga",
"Tuvalu",
"United States Minor Outlying Islands",
"Vanuatu",
"Wallis and Futuna"
],
"North America": [
"American Samoa",
"Australia",
"Christmas Island",
"Cocos (Keeling) Islands",
"Cook Islands",
"Fiji Islands",
"French Polynesia",
"Guam",
"Kiribati",
"Marshall Islands",
"Micronesia, Federated States of",
"Nauru",
"New Caledonia",
"New Zealand",
"Niue",
"Norfolk Island",
"Northern Mariana Islands",
"Palau",
"Papua New Guinea",
"Pitcairn",
"Samoa",
"Solomon Islands",
"Tokelau",
"Tonga",
"Tuvalu",
"United States Minor Outlying Islands",
"Vanuatu",
"Wallis and Futuna"
],
"South America": [
"Argentina",
"Bolivia",
"Brazil",
"Chile",
"Colombia",
"Ecuador",
"Falkland Islands",
"French Guiana",
"Guyana",
"Paraguay",
"Peru",
"Suriname",
"Uruguay",
"Venezuela"
]
}Pada halaman diatas, selain menggunakan Bootstrap, saya juga menambah sedikit CSS untuk mempercantik tampilan web. Berikut adalah potongan kodenya:
/css/style.css
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.gradient {
background: linear-gradient(-45deg, #c6ffdd, #fbd786, #f7797d);
background-size: 400% 400%;
background-position: 100% 50%;
}
.gradient-invert {
background: linear-gradient(-45deg, #f7797d, #fbd786, #c6ffdd);
background-size: 400% 400%;
background-position: 0% 50%;
animation: gradient 8s ease-in-out infinite;
}
.btn-primary {
border: none;
border-color: #f7797d;
background: linear-gradient(-45deg, #f7797d, #fbd786);
background-size: 200% 200%;
background-position: 100% 50%;
transition: all 150ms ease-in-out;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:focus-within {
background: linear-gradient(-45deg, #f7797d, #fbd786);
background-position: 0% 50%;
background-size: 200% 200%;
transition: all 150ms ease-in-out;
}
.min-h-100vh {
min-height: 100vh;
}
.card {
background-color: rgba(255, 255, 255, 0.5);
border-radius: 20px;
}
.link-tugas-container {
gap: 1.5rem;
display: flex;
flex-direction: column;
}
.link-tugas {
display: block;
text-align: center;
border-radius: 999px;
text-decoration: none;
transition-duration: 200ms;
background-color: rgba(255, 255, 255, 0.5);
}
.link-tugas:hover {
display: block;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.15);
transition-duration: 200ms;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}