Pemrograman Web B - Tugas 3 Membuat Pencarian Kode Pos Indonesia
Tugas 3 Website Pencarian Kode Pos Indonesia
Nama : Kurnia Cahya Febryanto
NRP : 5025201073
Kelas : Pemrograman Web B
================================================
Deskripsi Tugas
Membuat pencarian kode pos Indonesia dengan metode pencarian yang bisa berupa Provinsi, Kabupaten/Kota, Kelurahan, ataupun Kodepos daerah tersebut. Output dari hasil pencarian ini adalah berupa informasi daerah tersebut dan juga kode pos daerah tersebut.
Website pencarian kode pos Indonesia ini dibuat menggunakan javaScript, HTML, dan CSS. Serta untuk data kode pos menggunakan format JSON yang diambil dari Internet. Format datanya menggunakan JSON.
Link website yang telah dibuat adalah sebagai berikut Website Pencarian Kode Pos Indonesia
Link Repository Code website yaitu Repository Code Web Pencarian Kode Pos
Berikut Source Code dari website yang telah dibuat
Index.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, maximum-scale=1.0, user-scalable=no"> | |
| <meta name="description" content="Mencari KodePos dengan mudah dan cepat"> | |
| <title>Cari Kodepos</title> | |
| <link rel="stylesheet" type="text/css" href="stylesheet.css"> | |
| <script src="https://code.jquery.com/jquery-3.0.0.min.js" | |
| integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script> | |
| <script src="index.js"></script> | |
| <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,300italic,400italic,700,700italic,100italic' | |
| rel='stylesheet' type='text/css'> | |
| <link | |
| href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,300italic,400italic,600italic|Open+Sans+Condensed:300' | |
| rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Cari Informasi Kodepos Indonesia</h1> | |
| </header> | |
| <div id="searcharea"> | |
| <div class="center-form"> | |
| <form> | |
| <label for="search"><i class="fa fa-search" aria-hidden="true"></i></label> | |
| <input id="search" name="search" type="search" list="searchHelper" | |
| placeholder="Ketik Provinsi, Kota, Daerah, ataupun Kodepos" /> | |
| <datalist id="searchHelper"></datalist> | |
| </form> | |
| <button class="button" id="searchButton">Cari</button> | |
| <button class="button clear" id="clearButton">Hapus</button> | |
| </div> | |
| </div> | |
| <div id="searchUpdate"> | |
| <?php include('loader01.html'); ?> | |
| </div> | |
| </body> | |
| </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
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| box-sizing: border-box; | |
| font-family: | |
| /*Roboto,*/ | |
| "Open Sans", sans-serif; | |
| font-weight: 300; | |
| font-size: 16px; | |
| } | |
| header h1 { | |
| text-align: center; | |
| padding: 0 0 0.3em 0; | |
| } | |
| .center-form { | |
| margin: auto; | |
| } | |
| .center-form form { | |
| display: inline-block; | |
| } | |
| .fa-search { | |
| font-size: 1.5em; | |
| } | |
| input#search { | |
| border-top: none; | |
| border-bottom: 1px solid #ccc; | |
| border-left: none; | |
| border-right: none; | |
| width: 20em; | |
| height: 2em; | |
| padding-left: 0.5em; | |
| margin-left: 0.3em; | |
| background: none; | |
| transition: all ease-in-out 0.2s; | |
| font-size: 1.05em; | |
| } | |
| input#search:focus { | |
| outline: none; | |
| border-bottom: 3px solid rgba(84, 191, 255, 0.8); | |
| } | |
| button { | |
| border: none; | |
| border-radius: 4px; | |
| background-color: #54bfff; | |
| width: 8em; | |
| height: 2em; | |
| color: #636363; | |
| font-weight: 600; | |
| margin: 0.5em; | |
| cursor: pointer; | |
| box-shadow: inset 0 -1px #bbbfc2; | |
| } | |
| .button:hover { | |
| box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5); | |
| } | |
| #searcharea { | |
| display: flex; | |
| flex-direction: row; | |
| align-content: space-between; | |
| align-items: center; | |
| margin: auto; | |
| } | |
| /* | |
| input[type="checkbox"] { | |
| cursor: pointer; | |
| } | |
| */ | |
| .info-alert { | |
| display: flex; | |
| flex-direction: column; | |
| align-content: space-between; | |
| align-items: center; | |
| margin: 0.3em auto; | |
| background-color: #92f1a5; | |
| border: 2px solid #75bd84; | |
| border-radius: 4px; | |
| max-width: 45em; | |
| } | |
| p.info-alert-text { | |
| margin: 0; | |
| padding: 0.5em; | |
| } | |
| #searchUpdate { | |
| min-height: 50vh; | |
| } | |
| .list-group { | |
| margin: 10em 10em 3em; | |
| transition: box-shadow ease-in-out 0.3s; | |
| } | |
| div.list-group:hover { | |
| transition: box-shadow ease-in-out 0.3s; | |
| box-shadow: 0 10px 27px 0 rgba(0, 0, 0, 0.2), 0 8px 30px 0 rgba(0, 0, 0, 0.19); | |
| } | |
| .list-group-item { | |
| position: relative; | |
| display: block; | |
| padding: 10px 15px; | |
| margin-bottom: -1px; | |
| background-color: #fff; | |
| border: 1px solid #ddd; | |
| } | |
| .list-group-item:first-child { | |
| border-top-left-radius: 4px; | |
| border-top-right-radius: 4px; | |
| } | |
| .list-group-item:last-child { | |
| border-bottom-left-radius: 4px; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .list-group-item:focus, | |
| .list-group-item:hover { | |
| color: #555; | |
| text-decoration: none; | |
| background-color: #f5f5f5; | |
| } | |
| h4.list-group-item-heading { | |
| font-weight: 600; | |
| font-size: 1.05em; | |
| margin-top: 0; | |
| margin-bottom: 5px; | |
| } | |
| .small { | |
| font-size: 0.8em; | |
| } | |
| .list-group-item p.small { | |
| font-size: 0.8em; | |
| margin-left: 0.5em; | |
| padding: 0 0.5em; | |
| border-left: 3px solid #ccc; | |
| } | |
| footer { | |
| max-width: 100vw; | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .row { | |
| width: 60%; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| padding: 1em; | |
| align-items: flex-start; | |
| margin: auto; | |
| } | |
| .row-item { | |
| display: flex; | |
| width: calc(33% - 0.5em); | |
| padding: 0.5em 2em; | |
| } | |
| .row-item img { | |
| max-width: 50%; | |
| height: auto; | |
| display: block; | |
| margin: auto; | |
| } | |
| .row-item p { | |
| font-size: 0.8em; | |
| } | |
| .row-item.one { | |
| justify-content: flex-end; | |
| } | |
| .row-item.one p { | |
| text-align: end; | |
| text-align: right; | |
| -webkit-text-align: right; | |
| } | |
| .row-item.two { | |
| justify-content: center; | |
| border-right: 1px solid #ccc; | |
| border-left: 1px solid #ccc; | |
| } | |
| .row-item.three { | |
| justify-content: flex-start; | |
| } | |
| #countMe:hover { | |
| animation-name: wiggle; | |
| -webkit-animation-name: wiggle; | |
| -ms-animation-name: wiggle; | |
| } | |
| @keyframes wiggle { | |
| 0% { | |
| transform: rotate(10deg); | |
| } | |
| 25% { | |
| transform: rotate(-10deg); | |
| } | |
| 50% { | |
| transform: rotate(20deg); | |
| } | |
| 75% { | |
| transform: rotate(-5deg); | |
| } | |
| 100% { | |
| transform: rotate(0deg); | |
| } | |
| } |
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() { | |
| $.ajaxSetup({ cache: false }); | |
| function searchEng() { | |
| var searchField = $.trim($('#search').val()); | |
| var caseExp = new RegExp(searchField, "i"); | |
| $.getJSON('kodepos.json', function(data) { | |
| var output = '<div class="list-group">'; | |
| $.each(data, function(key, val) { | |
| if( | |
| (val.urban.search(caseExp) !== -1) || | |
| (val.city.search(caseExp) !== -1) || | |
| (val.province_code.search(caseExp) !== -1) || | |
| (val.postal_code.search(caseExp) !== -1) || | |
| ((val.urban + ' ' + val.city + ' ' + val.province_code).search(caseExp) !== -1) | |
| ) { | |
| output += '<div class="list-group-item"><h4 class="list-group-item-heading">' + val.urban + '</h4>' + | |
| '<h5 class="list-group-item-heading">' + 'PROVINSI: ' + val.province_code + '</h5>'; | |
| output += '<p>' + val.city + '</p>' + '<p class="small">' + val.postal_code + '</p>' + '</div>'; | |
| } | |
| }); | |
| output += '</div>'; | |
| $('#searchUpdate').html(output); | |
| }); // Get JSON | |
| } | |
| function _noResult() { | |
| if($('.list-group').is(':empty')) { | |
| $('#searchUpdate').html('<div class="list-group"><div style="text-align:center" class="list-group-item"><h4 class="list-group-item-heading">No Result!</h4><p>Sorry, your search query returned no results. Help us make this tool better by clicking <a href="#0">here</a> to email the service desk with the term you would like to have added.</p></div></div>'); | |
| } | |
| } | |
| $('#searchButton').click(function() { | |
| searchEng(); | |
| setTimeout(_noResult, 1000); | |
| }); | |
| $('#search').keypress(function (e) { | |
| if(e.which ===13) { | |
| searchEng(); | |
| setTimeout(_noResult, 1000); | |
| return false; | |
| } | |
| }); | |
| $('#clearButton').click(function() { | |
| $('#search').val(''); | |
| $('#nameOnly').prop('checked', false); | |
| $('#acronymOnly').prop('checked', false); | |
| $('#searchUpdate').html(''); | |
| }); | |
| }); |
Berikut tampilan dari website yang telah dibuat
 |
| Tampilan Utama Website Pencarian Kode Pos Indonesia |
 |
Tampilan mencari Informasi Daerah dan Kode Pos dengan kata kunci nama Daerah (Kelurahan) |
 |
| Tampilan mencari Informasi Daerah dan Kode Pos dengan kata kunci nama Provinsi |
 |
Komentar
Posting Komentar