Tugas 7 AJAX

 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. Untuk selebihnya bisa dilihat melalui deployment dan source code sebagai berikut.

Tampilan Halaman awal

Tampilan ini digunakan untuk memilih berdasarkan tugas yang ingin dibuka


Source code

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<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="style.css">
<title>Tugas AJAX</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand mx-5" href="index.html" style="font-size: 2rem;">Tugas AJAX</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mx-5">
<li class="nav-item active ml-4">
<a class="nav-link" href="tugas1.html"> Tugas 1 </a>
</li>
<li class="nav-item ml-4">
<a class="nav-link" href="tugas2.html"> Tugas 2 </a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="template_bg d-flex" style="height: 92.1vh;">
<div class="container align-self-center">
<div class="m-auto">
<div class="card text-center">
<h1>Hello! it's me.</h1>
<p style="font-size: 1.5rem;">
Timotius Wirawan <br> 05111940000161
</p>
</div>
</div>
</div>
</div>
</main>
<footer class="d-flex">
<div class="container text-center"><h5>Copyright &copy; Timotius Wirawan 2021</h4></div>
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<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>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
view raw index.html hosted with ❤ by GitHub
@import url('https://fonts.googleapis.com/css2?family=Alegreya&family=Alegreya+Sans&display=swap');
:root
{
--darkgrey: #27272A;
--background: #18181B;
}
*
{
font-family: 'Alegreya', serif;
color: white;
}
h1
{
font-family: 'Alegreya Sans', sans-serif;
}
nav
{
font-family: 'Alegreya Sans', sans-serif;
padding: 1rem;
background-color: var(--darkgrey);
}
.nav-link
{
font-family: 'Alegreya', serif;
font-size: 1.25rem;
}
.nav-link, .navbar-brand
{
color: white;
}
.navbar-brand:hover
{
color: white;
}
.nav-link:hover
{
color: #AAAAAA;
}
.template_bg
{
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
background-color: var(--background);
}
.card
{
background-color: var(--darkgrey);
padding: 1rem;
border-radius: 1.5rem;
}
.bottom-line
{
border-bottom: 1px solid #979797;
}
.right-line
{
border-right: 1px solid #979797;
}
.left-line
{
border-left: 1px solid #979797;
}
footer
{
padding: 1.5rem;
background-color: var(--darkgrey);
}
.logo-main
{
height: 2rem;
margin: 1rem;
}
.logo
{
height: 2rem;
}
.basic-grid
{
display: grid;
gap: 1rem;
/* 1 too skinny, too much code */
/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
/* 2 cleaner code */
/* grid-template-columns: repeat(12, 1fr); */
/* 3 better sizing, but overflows */
/* grid-template-columns: repeat(12, minmax(240px, 1fr)); */
/* 4 final */
grid-template-columns: repeat(auto-fill, minmax(20rem, 5fr));
}
.card-grid
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #353535;
font-size: 3rem;
box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
height: 100%;
width: 100%;
border-radius: 4px;
color: #27272A;
text-shadow: 2px 2px #fff;
transition: all 500ms;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.card-grid:hover
{
box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
transform: translateY(-3px) scale(1.1);
}
.container
{
width: 75%;
}
.form-text label
{
font-size: 1.5rem;
}
view raw style.css hosted with ❤ by GitHub


Source code Script

Untuk mengimplementasikan XMLHttpRequest di tiap pagenya, saya menyatukannya ke dalam satu script

var XMLHttpRequestObject = false;
if(window.XMLHttpRequest)
{
XMLHttpRequestObject = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}
function getText()
{
if (XMLHttpRequestObject)
{
const obj = document.getElementById("text-container");
XMLHttpRequestObject.open("GET", "text.html");
XMLHttpRequestObject.onreadystatechange = () =>
{
if (XMLHttpRequestObject.readyState === 1)
{
obj.innerHTML = `Loading...`;
}
if (XMLHttpRequestObject.readyState === 4)
{
if (XMLHttpRequestObject.status === 200)
{
obj.innerHTML = XMLHttpRequestObject.responseText;
}
else
{
obj.innerHTML = XMLHttpRequestObject.statusText;
}
}
};
XMLHttpRequestObject.send(null);
}
}
$('#triggerButton').on('click', function(){
getText();
})
function getFakultas() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function ()
{
const myObj = JSON.parse(this.responseText);
let html = `<option label="Pilih fakultas" hidden></option>`;
let idx = 0;
for (let x of Object.keys(myObj))
{
html += `<option value='${idx}'>${x}</option>`;
idx++;
}
document.getElementById("fakultas").innerHTML = html;
document.getElementById("departemen").innerHTML = `<option label="Please choose faculty first" hidden></option>`
};
xhttp.open("GET", "fakultas.json", true);
xhttp.send();
}
getFakultas();
function getDept()
{
let fakultas = document.getElementById('fakultas').value;
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
const myObj = JSON.parse(this.responseText);
let html = `<option label="Pilih departemen" hidden></option>`;
for (let x of Object.values(myObj)[fakultas])
{
html += `<option>${x}</option>`;
}
document.getElementById("departemen").innerHTML = html;
};
xhttp.open("GET", "fakultas.json", true);
xhttp.send();
}
view raw script.js hosted with ❤ by GitHub


Source code Request Data

fungsi yang ada di script akan direquest ke text.html untuk tugas ke-2 dan fungsi getText(), getFakultas(), dan getDept() yang ada di script akan direquest ke fakultas.JSON untuk tugas ke-2

Source code

{
"FACULTY OF SCIENCE AND DATA ANALYTICS (SCIENTICS)": [
"Physics",
"Mathematics",
"Statistics",
"Chemistry",
"Biology",
"Actuaria"
],
"FACULTY OF MARINE TECHNOLOGY (MARTECH)": [
"Naval Architecture and Shipbuilding Engineering",
"Marine Engineering",
"Ocean Engineering",
"Sea Transportation Engineering"
],
"FACULTY OF INDUSTRIAL TECHNOLOGY AND SYSTEMS ENGINEERING (INDSYS)": [
"Mechanical Engineering",
"Chemical Engineering",
"Physics Engineering",
"Systems and Industrial Engineering",
"Material Engineering"
],
"FACULTY OF INTELLIGENT ELECTRICAL AND INFORMATICS TECHNOLOGY (ELECTICS)": [
"Electrical Engineering",
"Biomedical Engineering",
"Computer Engineering",
"Informatics",
"Information Systems",
"Information Technology"
],
"FACULTY OF CIVIL, PLANNING, AND GEO ENGINEERING (CIVPLAN)": [
"Civil Engineering",
"Architecture",
"Environmental Engineering",
"Regional and Urban Planning",
"Geomatics Engineering",
"Geophysics Engineering"
],
"FACULTY OF CREATIVE DESIGN AND DIGITAL BUSINESS (CREABIZ)": [
"Industrial Product Design",
"Interior Design",
"Visual Communication Design",
"Business Management",
"Developmental Studies",
"Technology Management"
],
"FACULTY OF VOCATIONAL (VOCATION)": [
"Civil Infrastructure Engineering",
"Industrial Mechanical Engineering",
"Automation Electronic Engineering",
"Industrial Chemical Engineering",
"Instrumentation Engineering",
"Business Statistics"
]
}
view raw fakultas.json hosted with ❤ by GitHub
Pesan disampaikan Kementerian Pemuda Pancasila menggunakan AJAX.
view raw text.html hosted with ❤ by GitHub


Tampilan untuk menampilkan teks menggunakan ajax

Disini awalnya tidak menampilkan apa-apa tetapi setelah ditekan tombol trigger maka akan menampilkan teks menggunakan function getText()



Source code

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Tugas AJAX</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand mx-5" href="index.html" style="font-size: 2rem;">Tugas AJAX</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mx-5">
<li class="nav-item active ml-4">
<a class="nav-link disabled" href="tugas1.html"> Tugas 1 </a>
</li>
<li class="nav-item ml-4">
<a class="nav-link" href="tugas2.html"> Tugas 2 </a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="template_bg d-flex" style="height: 92.1vh;">
<div class="container align-self-center">
<div class="m-auto">
<div class="card text-center">
<h1>Menampilkan teks AJAX</h1>
<div>
<button id="triggerButton" type="button" class="btn btn-light">Trigger</button>
</div>
</div>
<div class="card text-center mt-2 flex-column">
<div id="text-container" style="font-size: 1.25rem;"></div>
</div>
</div>
</div>
</div>
</main>
<footer class="d-flex">
<div class="container text-center"><h5>Copyright &copy; Timotius Wirawan 2021</h4></div>
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<script src="script.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<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>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
view raw tugas1.html hosted with ❤ by GitHub


Tampilan untuk menampilkan pilihan departemen berdasarkan fakultas yang dipilih

Disini langkah pertama akan menampilkan daftar fakultas yang menggunakan function getFakultas() dan setelah dipilih akan mentriger function getDept()



Source code

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Tugas AJAX</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand mx-5" href="index.html" style="font-size: 2rem;">Tugas AJAX</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mx-5">
<li class="nav-item active ml-4">
<a class="nav-link" href="tugas1.html"> Tugas 1 </a>
</li>
<li class="nav-item ml-4">
<a class="nav-link disabled" href="tugas2.html"> Tugas 2 </a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="template_bg d-flex" style="height: 92.1vh;">
<div class="container align-self-center">
<div class="m-auto">
<div class="card text-center">
<div class="row">
<h1 class="text-center">Faculty Filter</h1>
<div class="col">
<div class="form-group mb-2">
<h2>Faculty</h2>
<select class="form-select" name="fakultas" id="fakultas" onchange="getDept()">
<option value=""></option>
</select>
</div>
<div class="form-group mb-2">
<h2>Departement</h2>
<select class="form-select" name="departemen" id="departemen">
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="d-flex">
<div class="container text-center"><h5>Copyright &copy; Timotius Wirawan 2021</h4></div>
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<script src="script.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<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>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
view raw tugas2.html hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 9 Exception Handling

Exception merupakan subkelas dari kelas java.lang.Throwable. Karena Exception adalah sebuah kelas maka hakikatnya ketika program berjalan dan muncul sebuah bug atau kesalahan maka bug tersebut dapat dianggap sebuah object. Sehingga ketika object ini di tampilkan di layar maka java akan secara otomatis memanggil method toString yang terdapat dalam object bertipe Exception ini. Java memberikan akses kepada developer untuk mengambil object bug yang terjadi ini dengan mekanisme yang dikenal Exception Handling. Exception handling merupakan fasilitas di java yang memberikan flexibilitas kepada developer untuk menangkap bug atau kesalahan yang terjadi ketika program berjalan. Ada 3 keyword penting dalam java dalam hal exception handling : 1. try      Keyword try biasanya digunakan dalam suatu block program. Keyword ini digunakan untuk mencoba menjalankan block program kemudian mengenai sasaran dimana munculnya kesalahan yang ingin diproses. Keyword ini juga harus dipasangka...
Baca selengkapnya