Tugas 3 Pemrograman Website
Nama : Muhammad Fuad Salim
NRP : 5025201057
Kelas : PWEB-B
=======================================
Deskripsi
Membuat pencarian kode pos Indonesia dengan metode pencarian dengan memilih Provinsi, Kabupaten, dan Kecamatan. Output dari hasil pencarian ini adalah berupa informasi daerah tersebut dan juga kode pos pada daerah tersebut.
Website pencarian kode pos Indonesia ini dibuat dengan menggunakan HTML, CSS, dan JavaScript. Serta untuk data kode pos menggunakan format JSON yang diambil dari internet serta format datanya menggunakan JSON.
Link Website : Website Pencarian Kode Pos
Link Repository : Repository
Code
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
| <!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="index.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> |
CSS :
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
| /* 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: #f67606; | |
| 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: #110a06; | |
| color: whitesmoke; | |
| } | |
| #searchBtn:hover { | |
| background-color: #f67606; | |
| } | |
| #res { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .res-card { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: whitesmoke; | |
| 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: #f67606; | |
| 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; | |
| } |
JavaScript :
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
| $(document).ready(function () { | |
| var selectedProv = {}; | |
| var selectedKab = {}; | |
| var selectedKec = {}; | |
| // load provinsi | |
| $.getJSON('prov.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); | |
| }); | |
| }); | |
| }); |
Comments
Post a Comment