PWEB-Pencarian Kode Pos
Nama : Agnesfia Anggraeni
NRP : 5025201059
Tahun: 2022/2023
Kelas: Pemrograman Web C
_______________________________________________________________________________________________________________________
Membuat Pencarian Kode Pos
Deskripsi
Pencarian kode pos indonesia dengan inputan Provinsi, Kabupaten/Kota, Kecamatan,
kemudian outputnya berupa kode pos.
Dokumentasi
Halaman Pencarian Kode Pos
Halaman Kode Pos telah ditemukan
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="style.css" /> | |
| <link | |
| href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" | |
| rel="stylesheet" | |
| /> | |
| <title>Kode Pos Indonesia</title> | |
| </head> | |
| <body> | |
| <main class="main"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;800;900&family=Roboto:wght@100&family=Secular+One&display=swap" rel="stylesheet"> | |
| <div class="container"> | |
| <div class="form-container"> | |
| <div class="form-title"> | |
| </div> | |
| <img src="image/kode-pos.jpeg"> | |
| <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: "Masukkan Provinsi", | |
| width: "100%", | |
| data: provinces, | |
| }); | |
| $("#provinsi").append( | |
| $("<option selected></option>").val(null).text("Masukkan Provinsi") | |
| ); | |
| $("#kabupaten").select2({ | |
| placeholder: "Masukkan Kota", | |
| width: "100%", | |
| }); | |
| $("#kecamatan").select2({ | |
| placeholder: "Masukkan 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: "Masukkan Kota", | |
| width: "100%", | |
| data: kota, | |
| }); | |
| var $nullOption = $("<option selected></option>") | |
| .val(null) | |
| .text("Masukkan 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: "Masukkan Kecamatan", | |
| width: "100%", | |
| data: kec, | |
| }); | |
| var $nullOption = $("<option selected></option>") | |
| .val(null) | |
| .text("<Masukkan> Kecamatan"); | |
| $("#kecamatan").append($nullOption); | |
| }, | |
| error: function (xhr, ajaxOptions, thrownError) { | |
| console.log(xhr.responseText); | |
| }, | |
| }); | |
| }); | |
| $("#kecamatan").on("change", function (e) { | |
| $(".kodeposres").val("Loading..."); | |
| 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); | |
| .main{ | |
| position: relative; | |
| width: 100%; | |
| min-height: 50vh; | |
| display: flex; | |
| align-items: right; | |
| background: #f7fbf8; | |
| background-size: cover; | |
| background-position: center; | |
| background-attachment: fixed; | |
| font-family: 'Courier New', sans-serif; | |
| font-weight: bold; | |
| } | |
| .container { | |
| width: 100%; | |
| padding: 0 50px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .form-container { | |
| width: 100%; | |
| background-color: #FFFFFF; | |
| border-radius: 30px; | |
| padding: 50px 50px; | |
| } | |
| .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: #FFFFFF; | |
| box-sizing: border-box; | |
| height: 25px; | |
| font-size: 20px; | |
| font-weight: normal; | |
| border: none; | |
| width: 25%; | |
| padding: 8px 8px; | |
| color: #990000; | |
| font-family: 'Courier New', sans-serif; | |
| font-weight: bold; | |
| } | |
| @media (min-width: 1024px) { | |
| .form-container { | |
| width: 40%; | |
| padding: 60px 50px; | |
| } | |
| } |
Komentar
Posting Komentar