Skip to main content

Lebih Simpel dengan Ajax

 Sup Daijoubu?



Pada kesempatan kali ini saya akan mencoba mengimplementasikan ajax dengan cara yang sederhana. Akan terdapat 2 file yang terdapat komponen ajax yaitu text.html dan filter.html.

1. text.html, file ini akan mengimplementasikan AJAX untuk menampilkan sebuah text.

2. filter.html, file ini akan mengimplementasikan AJAX untuk melakukan filter.

Untuk pengimplementasiannya akan terdapat beberapa file penunjang yaitu sebagai berikut :

a. HTML :

1. index.html


<!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://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>\
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="home.css">
<title>Simple AJAX</title>
</head>
<body>
<div class="container">
<center>
<h1>Simple AJAX</h1>
</center>
</div>
<center>
<button id="myButton"class="button" >Ambil Teks</button>
<button id="myButton2"class="button2" >FILTER</button >
</center>
<script type="text/javascript">
document.getElementById("myButton").onclick = function () {
location.href = "text.html";
};
document.getElementById("myButton2").onclick = function () {
location.href = "filter.html";
};
</script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub


2. text.html


<!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="text.css">
<title>Ambil AJAX</title>
</head>
<body>
<button id="myButton" class=" buttono" >Home</button>
<script type="text/javascript">
document.getElementById("myButton").onclick = function () {
location.href = "index.html";
};
</script>
<div class="container d-flex justify-content-center">
<div class="w-50 card my-5">
<div class="card-content px-5 pt-3">
<h2>Latihan 1</h2>
<div class="px-3 border-top py-4 text-center">
<button type="button" class="buttono1" onclick="loadDoc()">COBAIN DEH</button>
<div class="my-3" id='iniTarget'></div>
</div>
</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", "text.json", true);
xhttp.send();
}
</script>
</html>
view raw text.html hosted with ❤ by GitHub


3. filter.html


<!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="text.css">
<title>Ambil AJAX</title>
</head>
<body onload="loadBenua()">
<button id="myButton" class=" buttono" >Home</button>
<script type="text/javascript">
document.getElementById("myButton").onclick = function () {
location.href = "index.html";
};
</script>
<div class="container d-flex justify-content-center">
<div class="w-50 card my-5">
<div class="card-content px-5 pt-3">
<h2>AJAX 2</h2>
<div class="px-3 border-top py-4 text-center">
<select id="benua" class="form-select mb-3" onchange="loadNegara(document.getElementById('benua').value)">
</select>
<select id="negara" class="form-select">
</select>
</div>
</div>
</div>
</div>
</body>
<script>
function loadBenua() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
const myObj = JSON.parse(this.responseText);
let html = "<option>Pilih Fakultas...</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", "filter.json", true);
xhttp.send();
}
function loadNegara(idx) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
const myObj = JSON.parse(this.responseText);
let html = "<option>Pilih Departemen...</option>";
for (let x of Object.values(myObj)[idx]) {
html += "<option>";
html += x;
html += "</option>";
}
document.getElementById("negara").innerHTML = html;
}
xhttp.open("GET", "filter.json", true);
xhttp.send();
}
</script>
</html>
view raw filter.html hosted with ❤ by GitHub


b. CSS :

1. home.css


body {
margin: 0;
/* float: inline-right; */
/* right: 30%; */
/* color: #fff; */
/* background: #c8c8c8; */
background-image: url(background.jpg);
font: 600 16px/18px 'Open Sans', sans-serif
}
.home-logo{
text-align: center;
}
.home-logo img{
width: 50%;
margin-top: 15%;
}
.container{
color: white;
}
.button{
background: #c90000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 20%;
border-radius: 10px;
}
.button2{
background: #c90000;
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 20%;
border-radius: 10px;
}
view raw home.css hosted with ❤ by GitHub


2. text.css


body {
margin: 0;
/* float: inline-right; */
/* right: 30%; */
/* color: #fff; */
/* background: #c8c8c8; */
background-image: url(background.jpg);
font: 600 16px/18px 'Open Sans', sans-serif
}
.buttono{
background: #000;
position: fixed;
bottom: 20pt;
right: 20pt;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 10%;
border-radius: 10px;
}
.buttono1{
background: #c90000;
position:fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 10%;
border-radius: 10px;
}
view raw text.css hosted with ❤ by GitHub


c. JSON :

1. text.JSON


{
"teks":"Mantep Banget Bray <b>AJAX INI</b>"
}
view raw text.json hosted with ❤ by GitHub


2. filter.JSON


{
"INDSYS": [
"Teknik Mesin",
"Teknik Kimia",
"Teknik Fisika",
"Teknik Sistem dan Industri",
"Teknik Material"
],
"ELECTICS": [
"Teknik Elektro",
"Teknik Biomedik",
"Teknik Komputer",
"Teknik Informatika",
"Sistem Informasi",
"Teknologi Informas"
],
"SCIENTICS": [
"Fisika",
"Matematika",
"Statistika",
"Kimia",
"Biologi",
"Aktuaria"
],
"MARTECH": [
"Teknik Perkapalan",
"Teknik Sistem Perkapalan",
"Teknik Kelautan",
"Teknik Transportasi Laut"
],
"CIVPLAN": [
"Teknik Sipil",
"Arsitektur",
"Teknik Lingkungan",
"Perencanaan Wilayah dan Kota",
"Teknik Geomatika",
"Teknik Geofisika"
],
"CREABIZ": [
"Desain Produk Industri",
"Desain Interior",
"Desain Komunikasi Visual",
"Manajemen Bisnis",
"Studi Pembangunan",
"Manajemen Teknologi"
],
"VOCATIONS": [
"Teknik Infrastruktur Sipil",
"Teknik Mesin Industri",
"Teknik Elektro Otomasi",
"Teknik Kimia Industri",
"Teknik Instrumensasi",
"Statistika Bisnis"
]
}
view raw filter.json hosted with ❤ by GitHub


Comments

Post a Comment

Popular posts from this blog

Ticket Machine

 SUP Daijoubu ? Pada kesempatan kali ini Karu akan mencoba membuat project sederhana untuk E-Ticket Machine,  untuk projectnya sendiri Karu akan mencoba menggunakan salah satu fungsi Java yaitu java.util.Scanner . Di dalam project E-Ticket Machine nanti akan terdapat 2 buah Class  yaitu : 1. Ticketing Class  Ticketing ini berfungsi menyimpan beragam fungsi seperti :   >    getPrice(),  fungsi ini berguna untuk menyetor harga E-Ticket agar dapat ditampilkan. >     getBalance(), fungsi ini berguna untuk mengembalikan nilai saldo yang dimiliki oleh pengguna E-Ticket Machine. >      topUp() , fungsi ini berguna untuk menambahkan nilai saldo pengguna E-Ticket Machine   apabila melakukan pengisian saldo. >      printTicket(), fungsi ini berguna untuk menampilkan Tiket yang sudah dibeli oleh   pengguna E-Ticket Machine. 2. TesTicketing      Class  TesTicketing ini...
1 comment
Read more

Auction System

              Yuhuuuu  Pada kesempatan kali ini penulis ingin membuat auction system sederhana yang melibatkan penggunaan Array pada Java. Di dalam auction system nanti ada beberapa kelas yaitu sebagai berikut : Class Auction, kelas ini adalah kelas utama dalam Auction System. Di dalam kelas inilah proses lelang akan terjadi seperti memasukkan nama barang yang akan dilelang, menaruh tawaran terhadap barang lelangan, menunjukkan hasil sementara atau akhir pelelangan dan juga menutup acara lelang itu sendiri. Proses-proses tadi akan dibuatkan fungsinya masing-masing Class Lot, kelas ini akan menunjukkan sudah ada atau tidaknya penawaran yang masuk untuk sebuah barang yang dilelang Class Bid, kelas ini akan menyimpan tawaran-tawaran yang masuk serta membandingkan siapakah penawar tertinggi untuk suatu barang yang dilelang Class Person, kelas ini akan menyimpan data nama orang yang ikut serta dalam pelalangan Untuk mengetahui hubungan antar kelas...
Post a Comment
Read more

Tambah Buku dan Validasi Form dengan JQuery

Sup Daijoubu? Pos kali ini adalah dokumentasi dari tugas ke 7 mengenai JQuery, terdapat 2 tugas yaitu tugas untuk menambahkan list buku dan juga tugas untuk membuat form validasi menggunakan JQuery. 1. Tambah Buku Tugas membuat sebuah halaman yang dapat menambahkan buku ke dalam sebuah list yang dapat dilihat menggunakan HTML, CSS dan JQuery. Untuk tampilannya sebagai berikut : Source code untuk tampilan di atas adalah sebagai berikut : 2. Form Validation Tugas membuat sebuah halaman yang berfungsi sebagai pengisian form dimana semua kolom yang ada harus terisi dan akan menampilkan pesan jika ada kolom yang belum terisi. Halaman akan dibuat dengan HTML, CSS, dan JQuery. Untuk tampilannya sebagai berikut :     - Tampilan Awal     - Tampilan saat terdapat kolom yang kosong : Source code untuk tampilan di atas :     - HTML:     - Jquery : Sekian penjelasan mengenai penerapan JQuery pada 2 buah halaman sederhana, terimakasih atas segala perhatian, moh...
Post a Comment
Read more