PWEB A - Pencarian Kode Pos
Baca Juga
Nama: Abd. Wahid
NRP : 5025201039
Kelas: PWEB A (2022)
Tugas: Website Pencarian Kode Pos
Repository: Link
Pada tugas ini, kami diminta untuk membuat sebuah web yang menampilkan kode pos suatu tempat dengan nilai input berupa nama provinsi, nama kabupaten, dan nama kecamatan. Pada tugas kali ini, saya membuat web pencarian kode pos dengan menggunakan HTML, CSS, Javascript, dan beberapa library Javascript. Beberapa library javascript yang saya gunakan yaitu: jquery dan select2. Library tersebut saya gunakan untuk mempermudah proses fetching data dari API dan mempermudah mengelola DOM. Berikut adalah screenshot pekerjaan saya:
Source Code
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 rel="stylesheet" href="css/style.css" /> | |
| <link | |
| href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" | |
| rel="stylesheet" | |
| /> | |
| <title>Cari Kode Pos</title> | |
| </head> | |
| <body> | |
| <main class="main"> | |
| <div class="container"> | |
| <div class="form-container"> | |
| <div class="form-title"> | |
| <h1>Pencarian Kode Pos</h1> | |
| </div> | |
| <form action="" class="form"> | |
| <div> | |
| <label for="provinsi" class="formlabel">Provinsi</label> | |
| <select name="provinsi" id="provinsi"></select> | |
| </div> | |
| <div> | |
| <label for="kabupaten" class="formlabel">Kabupaten</label> | |
| <select name="kabupaten" id="kabupaten"></select> | |
| </div> | |
| <div> | |
| <label for="kecamatan" class="formlabel">Kecamatan</label> | |
| <select name="kecamatan" id="kecamatan"></select> | |
| </div> | |
| <div> | |
| <label for="kodepos">Kode Pos</label> | |
| <input type="text" value="" class="kodeposres" disabled /> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </main> | |
| </body> | |
| <script | |
| src="https://code.jquery.com/jquery-3.6.1.min.js" | |
| integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" | |
| crossorigin="anonymous" | |
| ></script> | |
| <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> | |
| <script> | |
| let provinces = []; | |
| $.ajax({ | |
| url: "https://ibnux.github.io/data-indonesia/provinsi.json", | |
| success: function (datas) { | |
| provinces = $.map(datas, function (obj) { | |
| obj.id = obj.id; | |
| obj.text = obj.nama; | |
| return obj; | |
| }); | |
| }, | |
| async: false, | |
| }); | |
| $("#provinsi").select2({ | |
| placeholder: "Pilih Provinsi", | |
| width: "100%", | |
| data: provinces, | |
| }); | |
| $("#provinsi").append( | |
| $("<option selected></option>").val(null).text("Pilih Provinsi") | |
| ); | |
| $("#kabupaten").select2({ | |
| placeholder: "Pilih Kota", | |
| width: "100%", | |
| }); | |
| $("#kecamatan").select2({ | |
| placeholder: "Pilih Kecamatan", | |
| width: "100%", | |
| }); | |
| $("#provinsi").on("change", function (e, data) { | |
| $(".kodeposres").val(""); | |
| var idProv = $(this).val(); | |
| if(!idProv){ | |
| return; | |
| } | |
| var baseUrl = | |
| "https://ibnux.github.io/data-indonesia/kabupaten/" + idProv + ".json"; | |
| var kota = []; | |
| removeOptions(document.getElementById("kabupaten")); | |
| $.ajax({ | |
| url: baseUrl, | |
| dataType: "json", | |
| success: function (datas) { | |
| var kota = $.map(datas, function (obj) { | |
| obj.id = obj.id; | |
| obj.text = obj.nama; | |
| return obj; | |
| }); | |
| $("#kabupaten").select2({ | |
| placeholder: "Pilih Kota", | |
| width: "100%", | |
| data: kota, | |
| }); | |
| var $nullOption = $("<option selected></option>") | |
| .val(null) | |
| .text("Pilih Kota/Kabupaten"); | |
| $("#kabupaten").append($nullOption).trigger("change"); | |
| if (data) | |
| $("#kabupaten") | |
| .val(data.kota) | |
| .trigger("change", [{ kecamatan: data.kecamatan }]); | |
| }, | |
| error: function (xhr, ajaxOptions, thrownError) { | |
| console.log(xhr.responseText); | |
| }, | |
| }); | |
| }); | |
| $("#kabupaten").on("change", function (e, data) { | |
| $(".kodeposres").val(""); | |
| var idKota = $(this).val(); | |
| if(!idKota) { | |
| return; | |
| } | |
| var baseUrl = | |
| "https://ibnux.github.io/data-indonesia/kecamatan/" + idKota + ".json"; | |
| var kec = []; | |
| removeOptions(document.getElementById("kecamatan")); | |
| $.ajax({ | |
| url: baseUrl, | |
| dataType: "json", | |
| success: function (datas) { | |
| var kec = $.map(datas, function (obj) { | |
| obj.id = obj.id; | |
| obj.text = obj.nama.toUpperCase(); | |
| return obj; | |
| }); | |
| $("#kecamatan").select2({ | |
| placeholder: "Pilih Kecamatan", | |
| width: "100%", | |
| data: kec, | |
| }); | |
| var $nullOption = $("<option selected></option>") | |
| .val(null) | |
| .text("Pilih Kecamatan"); | |
| $("#kecamatan").append($nullOption); | |
| }, | |
| error: function (xhr, ajaxOptions, thrownError) { | |
| console.log(xhr.responseText); | |
| }, | |
| }); | |
| }); | |
| $("#kecamatan").on("change", function (e) { | |
| $(".kodeposres").val("Menunggu respons server..."); | |
| let selectedProv = $("#provinsi").select2("data")[0].text; | |
| let selectedKab = $("#kabupaten").select2("data")[0].text; | |
| let selectedKecamatan = $(this).select2("data")[0].text; | |
| selectedKab = selectedKab.includes("KAB. ") | |
| ? selectedKab.replace("KAB. ", "") | |
| : selectedKab.replace("KOTA ", ""); | |
| let kodepos = ""; | |
| if (selectedKecamatan) { | |
| $.ajax({ | |
| url: encodeURI( | |
| "https://kodepos.vercel.app/search?q=" + | |
| selectedKecamatan + | |
| " " + | |
| selectedKab + | |
| " " + | |
| selectedProv | |
| ), | |
| success: function (datas) { | |
| if (datas.status === true) { | |
| $(".kodeposres").val(datas.data[0].postalcode); | |
| } | |
| }, | |
| async: true, | |
| }); | |
| } | |
| }); | |
| function removeOptions(selectbox) { | |
| var i; | |
| for (i = selectbox.options.length - 1; i >= 0; i--) { | |
| selectbox.remove(i); | |
| } | |
| } | |
| </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
| @import url(normalize.css); | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); | |
| .main { | |
| width: 100%; | |
| min-height: 100vh; | |
| background: rgb(165, 84, 8); | |
| background: linear-gradient(30deg, rgb(207, 173, 79) 0%, rgb(187, 125, 10) 100%); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-family: "Poppins"; | |
| } | |
| .container { | |
| width: 120%; | |
| padding: 0 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .form-container { | |
| width: 100%; | |
| background-color: rgb(255, 255, 255); | |
| border-radius: 30px; | |
| padding: 60px 30px; | |
| } | |
| .form { | |
| width: 100%; | |
| } | |
| .form > div { | |
| margin-top: 1rem; | |
| } | |
| .form-title { | |
| display: flex; | |
| width: 100%; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .form-title h1 { | |
| font-size: 30px; | |
| font-weight: bold; | |
| text-align: center; | |
| } | |
| .kodeposres { | |
| background: none; | |
| box-sizing: border-box; | |
| height: 28px; | |
| border-radius: 4px; | |
| border: 1px solid #aaa; | |
| width: 100%; | |
| padding: 0px 8px; | |
| color: rgb(0, 0, 0); | |
| } | |
| @media (min-width: 1024px) { | |
| .form-container { | |
| width: 60%; | |
| padding: 60px 50px; | |
| } | |
| } |
Belum ada Komentar untuk "PWEB A - Pencarian Kode Pos"
Posting Komentar