Membuat website pencarian kode pos Indonesia
Nama : Bimantara Tito Wahyudi
NRP : 5025201227
Kelas : PWEB B
Pada materi ini, kami belajar tentang javascript dan sebagai pengayaan kami diminta untuk membuat website pencarian kode pos daerah seluruh Indonesia. Berikut adalah halaman web yang telah saya buat:
Berikut adalah source codenya:
This file contains hidden or 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"> | |
| <title>KodePos Indonesia</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | |
| <script src="index.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <h1>Kode Pos Indonesia</h1> | |
| </div> | |
| <div class="container"> | |
| <div class="card"> | |
| <p>Masukkan data berupa wilayah Provinsi, Kabupaten, dan Kecamatan untuk mencari kode pos</p> | |
| <h1>Provinsi</h1> | |
| <select id="prov"> | |
| <option value="item0">-- Pilih Provinsi --</option> | |
| </select> | |
| <h1>Kabupaten</h1> | |
| <select id="kab"> | |
| <option value="item0">-- Pilih Kabupaten --</option> | |
| </select> | |
| <h1>Kecamatan</h1> | |
| <select id="kec"> | |
| <option value="item0">-- Pilih Kecamatan --</option> | |
| </select> | |
| <button type="button" id="searchBtn" target="#res">Cari</button> | |
| </div> | |
| <div id="res" class=""></div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| /* Fonts */ | |
| @font-face { | |
| font-family: 'open_sansregular'; | |
| src: url('opensans-regular-webfont.woff2') format('woff2'), | |
| url('opensans-regular-webfont.woff') format('woff'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| /* CSS Reset */ | |
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| del, dfn, em, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, | |
| b, u, i, center, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td, | |
| article, aside, canvas, details, embed, | |
| figure, figcaption, footer, header, hgroup, | |
| menu, nav, output, ruby, section, summary, | |
| time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| font-style: normal; | |
| vertical-align: baseline; | |
| } | |
| /* HTML5 display-role reset for older browsers */ | |
| article, aside, details, figcaption, figure, | |
| footer, header, hgroup, menu, nav, section { | |
| display: block; | |
| } | |
| body { | |
| line-height: 1; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| blockquote, q { | |
| quotes: none; | |
| } | |
| blockquote:before, blockquote:after, | |
| q:before, q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| /* Custom CSS */ | |
| * { | |
| font-family: sans-serif; | |
| } | |
| body { | |
| background-color: lightgray; | |
| } | |
| .header { | |
| display:flex; | |
| align-items: center; | |
| background-color: #0096FF; | |
| padding-left: 3em; | |
| height: 60px; | |
| } | |
| .header h1 { | |
| color:whitesmoke; | |
| font-size: large; | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 6.3em 16em; | |
| max-width: 100%; | |
| } | |
| .card { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| background-color: whitesmoke; | |
| border-radius: 10px; | |
| box-shadow: 0px 0px 20px -8px grey; | |
| padding: 3em; | |
| width: 100%; | |
| height: 25em; | |
| margin-bottom: 6em; | |
| } | |
| .card p { | |
| margin-bottom: 20px; | |
| } | |
| .card h1 { | |
| font-size: large; | |
| margin-bottom: 10px; | |
| } | |
| select { | |
| margin-bottom: 30px; | |
| border: 1px solid lightgray; | |
| border-radius: 20px; | |
| width: 40%; | |
| height: 40px; | |
| padding: 0 2em; | |
| appearance: none; | |
| } | |
| select:hover, button:hover { | |
| cursor:pointer; | |
| } | |
| #searchBtn { | |
| border: 1px solid lightgray; | |
| border-radius: 10px; | |
| height: 40px; | |
| width: 80px; | |
| font-size: 15px; | |
| background-color: #FF008E; | |
| color: whitesmoke; | |
| } | |
| #searchBtn:hover { | |
| background-color: #D22779; | |
| } | |
| #res { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .res-card { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: pink; | |
| height: 50px; | |
| width: 350px; | |
| padding: 2em; | |
| margin-bottom: 20px; | |
| border-radius: 0 0 10px 10px; | |
| /* box-shadow: 0px 0px 20px -5px grey; */ | |
| } | |
| .urban { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| background-color: #FF008E; | |
| color: whitesmoke; | |
| padding: 0 2em; | |
| height: 30px; | |
| width: 350px; | |
| border-radius: 10px 10px 0 0; | |
| /* box-shadow: 0px 0px 20px -5px grey; */ | |
| } | |
| .code { | |
| margin-bottom: 10px; | |
| font-weight: bold; | |
| } |
This file contains hidden or 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
| $(document).ready(function () { | |
| var selectedProv = {}; | |
| var selectedKab = {}; | |
| var selectedKec = {}; | |
| // load provinsi | |
| $.getJSON('provinsi.json', function(data) { | |
| var output = '<option>-- Pilih Provinsi --</option>\n'; | |
| $.each(data, function(key, val) { | |
| output += ('<option value=\"' + val.id + '\">' + val.nama + '</option>\n'); | |
| // console.log(output); | |
| }); | |
| $('#prov').html(output); | |
| }); | |
| // load kabupaten | |
| $('#prov').change(function () { | |
| // var selectedProv = $('#prov option:selected').val(); | |
| selectedProv[0] = $('#prov option:selected').val(); | |
| selectedProv[1] = $('#prov option:selected').text(); | |
| console.log(selectedProv[0]); | |
| $.getJSON('kabupaten/' + selectedProv[0] + '.json', function(data) { | |
| var output = '<option>-- Pilih Kabupaten --</option>\n'; | |
| $.each(data, function(key, val) { | |
| output += ('<option value=\"' + val.id + '\">' + val.nama.slice(5) + '</option>\n'); | |
| // console.log(output); | |
| }); | |
| $('#kab').html(output); | |
| }) | |
| .fail(function() {$('#kab').html('<option>-- Pilih Kabupaten --</option>\n');}); | |
| }); | |
| // load kecamatan | |
| $('#kab').change(function () { | |
| // var selectedKab = $('#kab option:selected').val(); | |
| selectedKab[0] = $('#kab option:selected').val(); | |
| selectedKab[1] = $('#kab option:selected').text(); | |
| console.log(selectedKab[0]); | |
| $.getJSON('kecamatan/' + selectedKab[0] + '.json', function(data) { | |
| var output = '<option>-- Pilih Kecamatan --</option>\n'; | |
| $.each(data, function(key, val) { | |
| output += ('<option value=\"' + val.id + '\">' + val.nama.toUpperCase() + '</option>\n'); | |
| // console.log(output); | |
| }); | |
| $('#kec').html(output); | |
| }) | |
| .fail(function() {$('#kec').html('<option>-- Pilih Kecamatan --</option>\n');}); | |
| }); | |
| // display result | |
| $('#kec').change(function () { | |
| selectedKec[0] = $('#kec option:selected').val(); | |
| selectedKec[1] = $('#kec option:selected').text(); | |
| console.log(selectedKec[0]); | |
| }); | |
| function capitalCase(mySentence) { | |
| const words = mySentence.toLowerCase().replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase()); | |
| return words; | |
| } | |
| $('#searchBtn').click(function() { | |
| console.log('IM HERE'); | |
| $.getJSON('kodepos.json', function(data) { | |
| var output = ''; | |
| $.each(data, function(key, val) { | |
| // console.log(val.sub_district); | |
| // console.log(selectedKec[1]); | |
| if(val.sub_district === selectedKec[1]) { | |
| // if(val.sub_district.localCompare(selectedKec[1]) == 0) { | |
| console.log('IM HERE2'); | |
| output += ('<div class=\"urban\">' + val.urban + | |
| '</div><div class=\"res-card\"><p class="code">' + val.postal_code + '</p>' + | |
| '<p>Daerah Kecamatan '+ capitalCase(val.urban) + | |
| ', Kecamatan '+ capitalCase(selectedKec[1]) + | |
| ', Kabupaten '+ capitalCase(selectedKab[1]) + | |
| ', Provinsi '+ capitalCase(selectedProv[1]) + | |
| '</p></div>\n'); | |
| } | |
| }); | |
| $('#res').html(output); | |
| }); | |
| }); | |
| }); |
Link
Comments
Post a Comment