Langsung ke konten utama

TUGAS 7 PEMROGRAMAN WEB (D) - AJAX Sederhana


Tugas kali ini membuat website yang mengimplementasikan AJAX atau Asynchronous JavaScript and XML. AJAX sering digunakan untuk membuat website lebih responsif dan interaktif serta mempercepat proses request ke suatu server. Di sini terdapat 2 aplikasi, yaitu request data untuk mengubah konten halaman tanpa berpindah/reload, dan satu lagi filter data daerah dalam kolom pencarian. Dalam proses pengerjaannya, menggunakan HTML, CSS (Bootstrap), JavaScript (internal), dan SQL. Laman website-nya dapat diakses pada link berikut. Untuk hosting web sendiri memakai 000webhost.

Konten dari website:

  1. Main page, berisi halaman untuk redirect aplikasi implementasi AJAX mana yang akan dicoba/dipilih.
  2. Request page, berisi halaman aplikasi request data untuk mengubah konten halaman tanpa reload.
  3. Filter page, berisi halaman aplikasi filter data daerah.

Tampilan Website

  1. Main page

  2. Request page (sebelum button diklik)
    • Halaman ini memakai index.html (akan dilampirkan di bawah) sebagai halaman utama. Nantinya data-data yang di-load akan muncul di halaman ini.

  3. Request page (setelah button diklik)
    • Ketika menekan button "Tampilkan Kalimat", maka teks di bawahnya akan berubah sesuai isi dari tampil.html (akan dilampirkan di bawah).

  4. Filter page
    • Halaman ini memakai index.php (akan dilampirkan di bawah) sebagai halaman utama untuk menampilkan filter data daerah. Database yang dipakai terdapat di sini.

Source Code

  • index.html (Main Page)
    • <!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="icon" type="image/png" href="https://img.icons8.com/color/48/000000/source-code.png">
    <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>
    <title>Simple AJAX App</title>
    <style>
    body {
    font-family: 'Poppins';
    text-align: center;
    justify-content: center;
    background-image: url('mia.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    }
    h1 {
    font-size: 42px;
    margin-bottom: 20px;
    color: white;
    font-weight: bold;
    }
    button {
    margin-left: 10px;
    margin-right: 10px;
    transition-duration: 0.4s;
    }
    .container {
    top: 50%;
    left: 50%;
    position: absolute;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-animation: fadein 1.5s;
    -moz-animation: fadein 1.5s;
    animation: fadein 1.5s;
    }
    @keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
    }
    @-moz-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
    }
    </style>
    </head>
    <body>
    <div class="container">
    <h1>Simple AJAX App</h1>
    <center>
    <button class="btn btn-info" onclick="window.location.href='./request/'">Request Data</button>
    <button class="btn btn-info" onclick="window.location.href='./filter_daerah/index.php'">Filter Daerah</button>
    </center>
    </div>
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub
  • index.html (Request Page)
    • <!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">
    <title>Request File dengan AJAX</title>
    <link rel="icon" type="image/png" href="https://img.icons8.com/color/48/000000/source-code.png">
    <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>
    <style>
    h1 {
    text-align: center;
    margin: 20px 20px 20px 20px;
    }
    input {
    margin: 0 20px 20px 20px;
    transition-duration: 0.4s;
    }
    button {
    width: 100px;
    margin: 20px 20px 0 20px;
    transition-duration: 0.4s;
    }
    </style>
    </head>
    <body>
    <button class="btn btn-info" onclick="window.location.href='../'">Back</button>
    <h1>Mengambil data dari file HTML</h1>
    <center>
    <form>
    <input type="button" class="btn btn-primary" value="Tampilkan Kalimat" onclick="getdata('tampil.html', 'hasil')">
    </form>
    <div id="hasil">
    <span>Hasil request dengan AJAX akan ditampilkan di sini.</span>
    </div>
    </center>
    <script>
    var XMLHttpRequestObject = false;
    if (window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
    }
    function getdata(url, hasil) {
    if (XMLHttpRequestObject) {
    var obj = document.getElementById(hasil);
    XMLHttpRequestObject.open("GET", url);
    XMLHttpRequestObject.onreadystatechange = function() {
    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);
    }
    }
    </script>
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub
  • tampil.html (Request Page)
    • Teks ini diambil dengan <strong>UWOOOAHHHH</strong>.
    view raw tampil.html hosted with ❤ by GitHub
  • index.php (Filter Page)
    • <!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">
    <title>Filter Daerah</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="icon" type="image/png" href="https://img.icons8.com/color/48/000000/source-code.png">
    <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>
    <style>
    button {
    width: 100px;
    margin: 20px 20px 0 20px;
    transition-duration: 0.4s;
    }
    </style>
    </head>
    <body>
    <button class="btn btn-info" onclick="window.location.href='../'">Back</button>
    <div class="container mb-5">
    <h2 align="center" style="margin: 30px 10px 10px 10px;">Pilih Daerah</h2> <hr />
    <div class="row">
    <div class="col-sm-6">
    <div class="form-group">
    <label class="font-weight-bold">Provinsi</label>
    <select class="form-control" name="provinsi" id="provinsi">
    <option value=""> Pilih Provinsi</option>
    </select>
    </div>
    <div class="form-group">
    <label class="font-weight-bold">Kabupaten</label>
    <select class="form-control" name="kabupaten" id="kabupaten">
    <option value=""></option>
    </select>
    </div>
    <div class="form-group">
    <label class="font-weight-bold">Kecamatan</label>
    <select class="form-control" name="kecamatan" id="kecamatan">
    <option value=""></option>
    </select>
    </div>
    <div class="form-group">
    <label class="font-weight-bold">Kelurahan</label>
    <select class="form-control" name="kelurahan" id="kelurahan">
    <option value=""></option>
    </select>
    </div>
    </div>
    </div>
    <hr />
    </div>
    <script>
    $(document).ready(function(){
    $.ajax({
    type: 'POST',
    url: "get_provinsi.php",
    cache: false,
    success: function(msg) {
    $("#provinsi").html(msg);
    }
    });
    $("#provinsi").change(function(){
    var provinsi = $("#provinsi").val();
    $.ajax({
    type: 'POST',
    url: "get_kabupaten.php",
    data: {provinsi: provinsi},
    cache: false,
    success: function(msg) {
    $("#kabupaten").html(msg);
    }
    });
    });
    $("#kabupaten").change(function(){
    var kabupaten = $("#kabupaten").val();
    $.ajax({
    type: 'POST',
    url: "get_kecamatan.php",
    data: {kabupaten: kabupaten},
    cache: false,
    success: function(msg) {
    $("#kecamatan").html(msg);
    }
    });
    });
    $("#kecamatan").change(function(){
    var kecamatan = $("#kecamatan").val();
    $.ajax({
    type: 'POST',
    url: "get_kelurahan.php",
    data: {kecamatan: kecamatan},
    cache: false,
    success: function(msg) {
    $("#kelurahan").html(msg);
    }
    });
    });
    });
    </script>
    </body>
    </html>
    view raw index.php hosted with ❤ by GitHub
  • koneksi.php (Filter Page)
    • <?php
    define('HOST','localhost');
    define('USER','root');
    define('PASS','');
    define('DB1', 'filter_daerah');
    // Buat koneksi
    $db1 = new mysqli(HOST, USER, PASS, DB1);
    ?>
    view raw koneksi.php hosted with ❤ by GitHub
  • get_provinsi.php (Filter Page)
    • <?php
    include 'koneksi.php';
    echo "<option value=''>Pilih Provinsi</option>";
    $query = "SELECT * FROM provinsi ORDER BY nama ASC";
    $dewan1 = $db1->prepare($query);
    $dewan1->execute();
    $res1 = $dewan1->get_result();
    while ($row = $res1->fetch_assoc()) {
    echo "<option value='" . $row['id_prov'] . "'>" . $row['nama'] . "</option>";
    }
    ?>
    view raw get_provinsi.php hosted with ❤ by GitHub
  • get_kabupaten.php (Filter Page)
    • <?php
    include 'koneksi.php';
    $provinsi = $_POST['provinsi'];
    echo "<option value=''>Pilih Kabupaten</option>";
    $query = "SELECT * FROM kabupaten WHERE id_prov=? ORDER BY nama ASC";
    $dewan1 = $db1->prepare($query);
    $dewan1->bind_param("i", $provinsi);
    $dewan1->execute();
    $res1 = $dewan1->get_result();
    while ($row = $res1->fetch_assoc()) {
    echo "<option value='" . $row['id_kab'] . "'>" . $row['nama'] . "</option>";
    }
    ?>
    view raw get_kabupaten.php hosted with ❤ by GitHub
  • get_kecamatan.php (Filter Page)
    • <?php
    include 'koneksi.php';
    $kabupaten = $_POST['kabupaten'];
    echo "<option value=''>Pilih Kecamatan</option>";
    $query = "SELECT * FROM kecamatan WHERE id_kab=? ORDER BY nama ASC";
    $dewan1 = $db1->prepare($query);
    $dewan1->bind_param("i", $kabupaten);
    $dewan1->execute();
    $res1 = $dewan1->get_result();
    while ($row = $res1->fetch_assoc()) {
    echo "<option value='" . $row['id_kec'] . "'>" . $row['nama'] . "</option>";
    }
    ?>
    view raw get_kecamatan.php hosted with ❤ by GitHub
  • get_kelurahan.php (Filter Page)
    • <?php
    include 'koneksi.php';
    $kecamatan = $_POST['kecamatan'];
    echo "<option value=''>Pilih Kelurahan</option>";
    $query = "SELECT * FROM kelurahan WHERE id_kec=? ORDER BY nama ASC";
    $dewan1 = $db1->prepare($query);
    $dewan1->bind_param("i", $kecamatan);
    $dewan1->execute();
    $res1 = $dewan1->get_result();
    while ($row = $res1->fetch_assoc()) {
    echo "<option value='" . $row['id_kel'] . "'>" . $row['nama'] . "</option>";
    }
    ?>
    view raw get_kelurahan.php hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS 3 PEMROGRAMAN WEB (D) - Warung Tegal

Tugas kali ini membuat website Warung Makan Tegal. Dalam proses pengerjaannya, menggunakan  HTML ,   CSS ,   dan JavaScript serta  VSCode  sebagai  text editor . Di website ini, saya mengaplikasikan penggunaan embed video dari Youtube dan image carousel atau slideshow . Laman website-nya dapat diakses pada  link berikut . Untuk  hosting  web sendiri memakai  Netlify . Konten dari website: Main page , berisi daftar makanan, masakan populer, kontak dari warung tegal, serta menu apa saja yang tersedia di dalam website. Tampilan Website Main page Source Code index.html style.css
Posting Komentar
Baca selengkapnya

ETS PEMROGRAMAN BERORIENTASI OBJEK (B) - Mesin ATM

1. Tuliskan skenario fungsionalitas aplikasi berdasarkan tayangan tersebut! Pada video yang ada, ditampilkan proses setor tunai pada mesin ATM. Jadi, awalnya nasabah memasukkan kartu ATM ke dalam mesin. Lalu, memasukkan nomor pin sebanyak 6 digit sesuai yang telah didaftarkan. Jika pin salah, maka mesin akan meminta mengulangi agar memasukkan pin yang benar. Nah, di mesin ATM ini sendiri ada beberapa fitur yaitu setor tunai, penarikan tunai, dan transaksi lainnya (seperti transfer, pembayaran listrik, dll.). Dalam video, nasabah ingin melakukan proses setor tunai. Perlu diketahui di beberapa mesin, setor tunai ada yang menerima pecahan uang Rp100.000,00 saja, ada juga yang juga menerima Rp50.000,00, di video sepertinya hanya menerima Rp100.000,00. Lalu, juga ada batas maksimal berapa nominal atau jumlah uang yang dimasukkan, di video batasnya adalah 50 lembar. Jika lebih, maka kelebihannya akan dikembalikan oleh mesin. Setelah memasukkan uang ke dalam mesin, mesin akan memproses dan ke...
Posting Komentar
Baca selengkapnya

TUGAS 3 REKAYASA KEBUTUHAN (A) - Elisitasi Kebutuhan SI Evaluasi Kegiatan Sekretariat ITS

Tugas kali ini melakukan elisitasi kebutuhan dari salah satu  Spesifikasi Kebutuhan Perangkat Lunak  (SPKL) dari aplikasi  SI Evaluasi Kegiatan Sekretariat ITS (SIETS)   yang dibuat oleh Insitut Teknologi Sepuluh Nopember (ITS) Surabaya . Sistem Informasi ini merupakan sistem yang diwacanakan untuk memenuhi kebutuhan ITS akan penerimaan masukan dari berbagai kegiatan ITS yang bersifat daring akibat pandemi COVID-19 agar nantinya semasa transisi dari luring ke daring sistem dapat berjalan dengan lancar. Untuk SKPL-nya sendiri dapat dilihat di bawah ini: Elisitasi Elisitasi adalah teknik untuk memperoleh informasi melalui percakapan dengan sesorang dimana orang tersebut tidak sadar sedang digali informasi yang dimiliki. Proses elisitasi digunakan untuk menentukan kebutuhan suatu sistem dengan cara berkomunikasi dengan pengguna tentang perkembangan kebutuhan sistem yang akan dibangun. Ada beberapa hal yang dapat dianalisis sebagai tahap penjajakan dalam memban...
Posting Komentar
Baca selengkapnya