Tugas 4 Pemrograman Web C: Membuat Pencarian Kode Pos

 index.html:

1:  <!DOCTYPE html>  
2:  <html lang="en">  
3:  <head>  
4:    <meta charset="UTF-8">  
5:    <link rel="stylesheet" href="styles.css" />  
6:    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
7:    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
8:    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">  
9:    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">  
10:    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  
11:    <script src="script.js"></script>  
12:    <title>Kode Pos</title>  
13:  </head>  
14:  <body>  
15:    <div id="container">  
16:      <div class="main-container">  
17:        <h1>PENCARIAN KODE POS</h1>  
18:        <p>Cari kode pos di wilayah Indonesia dengan memasukkan beberapa kata kunci pencarian di bawah ini.</p>  
19:        <div class="table">  
20:          <div class="table-row">  
21:            <label class="input-label table-cell" for="provinsi">Provinsi:</label>  
22:            <input type="text" class="table-cell" id="provinsi" placeholder="Masukkan provinsi" size="23"/>  
23:          </div>  
24:          <div class="table-row">  
25:            <label class="input-label table-cell" for="kabkot">Kabupaten/Kota:</label>  
26:            <input type="text" class="table-cell" id="kabkot" placeholder="Masukkan kabupaten/kota" size="23"/>  
27:          </div>  
28:          <div class="table-row">  
29:            <label class="input-label table-cell" for="kecamatan">Kecamatan:</label>  
30:            <input type="text" class="table-cell" id="kecamatan" placeholder="Masukkan kecamatan" size="23"/>  
31:          </div>  
32:          <div class="table-row">  
33:            <label class="input-label table-cell" for="kelurahan">Kelurahan:</label>  
34:            <input type="text" class="table-cell" id="kelurahan" placeholder="Masukkan kelurahan" size="23"/>  
35:          </div>  
36:          <div class="table-row">  
37:            <label class="input-label table-cell" for="kodepos">Kode Pos:</label>  
38:            <input type="text" class="table-cell" id="kodepos" placeholder="Masukkan kode pos" size="23"/>  
39:          </div>  
40:        </div>  
41:        <input type="submit" id="Search_button" class="button" value="Search" />  
42:      </div>  
43:      <div id="search_result"></div>  
44:    </div>  
45:  </body>  
46:  </html>

styles.css:

1:  :root {  
2:    --background: rgba(242, 242, 242, 1);  
3:    --container-background: white;  
4:    --button-background: rgba(32, 191, 212, 0.5);  
5:    --button-background-hover: rgba(32, 191, 212, 1);  
6:    --text: black;  
7:    --shadow: rgba(0, 0, 0, 0.05);  
8:    --shadow-medium: rgba(0, 0, 0, 0.1);  
9:  }  
10:  * {  
11:    margin: 0;  
12:    padding: 0;  
13:    box-sizing: border-box;  
14:    font-family: 'Poppins', sans-serif;  
15:    color: var(--text);  
16:  }  
17:  body {  
18:    background-color: var(--background);  
19:  }  
20:  label {  
21:    display: block;  
22:  }  
23:  h1, h2 {  
24:    font-family: 'Raleway', sans-serif;  
25:    font-weight: bolder;  
26:  }  
27:  h1, h2, p {  
28:    margin-bottom: 15px;  
29:  }  
30:  input {  
31:    padding: 1px 3px;  
32:  }  
33:  #container {  
34:    margin: 30px 60px;  
35:  }  
36:  .main-container, #search_result {  
37:    max-width: 1080px;  
38:    margin: 25px auto;  
39:  }  
40:  .main-container {  
41:    background-color: var(--container-background);  
42:    padding: 50px;  
43:    border-radius: 1em;  
44:    box-shadow: 0px 15px 80px 20px var(--shadow);  
45:  }  
46:  .table-row {  
47:    display: table-row;  
48:  }  
49:  .table-cell {  
50:    display: table-cell;  
51:    margin-bottom: 7px;  
52:    padding-right: 18px;  
53:  }  
54:  .table {  
55:    margin-bottom: 15px;  
56:  }  
57:  .button {  
58:    padding: 8px 15px;  
59:    background-color: var(--button-background);  
60:    border-radius: 8px;  
61:    border-style: none;  
62:    transition: 0.15s;  
63:  }  
64:  .button:hover {  
65:    background-color: var(--button-background-hover);  
66:    color: var(--container-background);  
67:    cursor: pointer;  
68:  }  
69:  #search_card_container {  
70:    display: flex;  
71:    flex-wrap: wrap;  
72:    column-gap: 30px;  
73:  }  
74:  .search_card {  
75:    width: 270px;  
76:    padding: 15px;  
77:    border-radius: 8px;  
78:    background-color: var(--button-background);  
79:    margin-bottom: 30px;  
80:    transition: 0.2s;  
81:  }  
82:  .search_card p {  
83:    margin-bottom: 10px;  
84:  }  
85:  .search_card:hover {  
86:    box-shadow: 0px 15px 70px 15px var(--shadow-medium);  
87:    transform: scale(1.05, 1.05);  
88:  }  
89:  @media only screen and (max-width: 600px) {  
90:    #container {  
91:      margin: 30px;  
92:    }  
93:    .table-cell {  
94:      display: block;    
95:      margin-bottom: 5px;  
96:    }  
97:    .main-container {  
98:      padding: 30px;  
99:    }  
100:  }

script.js:

1:  $(document).ready(function(){  
2:    $.ajaxSetup({ async: false, cache: false });  
3:    function search() {  
4:      var provinsi = $.trim($('#provinsi').val()).toUpperCase();  
5:      var kabkot = $.trim($('#kabkot').val()).toUpperCase();  
6:      var kecamatan = $.trim($('#kecamatan').val()).toUpperCase();  
7:      var kelurahan = $.trim($('#kelurahan').val()).toUpperCase();  
8:      var kodepos = $.trim($('#kodepos').val());  
9:      var searchCount = 0;  
10:      $('#search_result').remove();  
11:      $('#container').append('<div id="search_result"></div>');  
12:      var searchDiv = $('#search_result');  
13:      $(searchDiv).append('<h2>HASIL PENCARIAN</h2>');  
14:      $(searchDiv).append('<p>Hasil pencarian kode pos dengan menggunakan kata kunci diatas <span id="search_desc"></span></p>');  
15:      $(searchDiv).append('<div id="search_card_container"></div>');  
16:      var searchCardContainer = $('#search_card_container');  
17:      $.getJSON("kodepos.json", function(result) {  
18:        $.each(result, function(key, val) {  
19:          if(val.province.search(provinsi) !== -1 &&  
20:          val.city.search(kabkot) !== -1 &&  
21:          val.sub_district.search(kecamatan) !== -1 &&  
22:          val.urban.search(kelurahan) !== -1 &&  
23:          val.postal_code.search(kodepos) !== -1) {  
24:            var searchCardDiv = $('<div class="search_card"></div');  
25:            $(searchCardContainer).append(searchCardDiv);  
26:            $(searchCardDiv).append('<p><b>Provinsi:</b> ' + val.province + '</p>');  
27:            $(searchCardDiv).append('<p><b>Kabupaten/Kota:</b> ' + val.city + '</p>');  
28:            $(searchCardDiv).append('<p><b>Kecamatan:</b> ' + val.sub_district + '</p>');  
29:            $(searchCardDiv).append('<p><b>Kelurahan:</b> ' + val.urban + '</p>');  
30:            $(searchCardDiv).append('<p><b>Kode Pos:</b> ' + val.postal_code + '</p>');  
31:            searchCount++;  
32:          }  
33:        });  
34:      });  
35:      if(searchCount != 0) {  
36:        $('#search_desc').html('telah ditemukan sebanyak ' + searchCount + ' buah.');  
37:      }  
38:      else {  
39:        $('#search_desc').html('tidak ditemukan.');  
40:      }  
41:    }  
42:    $('#Search_button').click(function() {  
43:      search();  
44:    });  
45:  });


Link Repository: https://github.com/brianakbar/Tugas4_PWebC_MembuatPencarianKodePos

Link Website: https://brianakbar.github.io/Tugas4_PWebC_MembuatPencarianKodePos/


Screenshot: 

Tampilan Utama


Tampilan Pencarian Berhasil


Tampilan Pencarian Gagal


Comments

Post a Comment

Popular posts from this blog

ETS Pemrograman Web C: ULearning

Image
 Anggota Kelompok : - Elthan Ramanda Berlindo / 5025201092 - Brian Akbar Wicaksana / 5025201207 - Muhammad Andi Akbar Ramadhan / 5025201264 Nama Aplikasi: ULearning Problem statement: Pada era 4.0 saat ini tentunya dibutuhkan banyak kemampuan yang dapat digunakan dalam persaingan untuk mampu beradaptasi dengan era ini. Tidak dapat dipungkiri lagi jika satu skill saja tidak cukup untuk bersaing dalam ketatnya persaingan dalam era ini. Untuk beberapa orang tentunya fokus di satu skill dan menguasainya sudah cukup, akan tetapi bagaimana yang lainnya yang tidak mampu untuk fokus dan mengusai skill di suatu bidang tertentu ? tentunya mereka akan kalah dalam persaingan ini apabila tidak segera mengasah skill mereka. Namun kebanyakan jasa penyedia pembelajaran tersebut berada atau terfokus pada suatu negara maupun lokasi tertentu. Indonesia tentunya akan ikut bersaing dalam persaingan global ini. Namun kebanyakan masyarakatnya masih kurang dalam pendidikan untuk skill - skill ini dan ekon...
Read more

Tugas 2 Pemrograman Web C: Membuat CSS

Image
HTML : 1: <html> 2: <head> 3: <title>Belajar Membuat Website Dengan Mudah</title> 4: <link rel="stylesheet" href="custom.css"/> 5: </head> 6: <body> 7: <div class="header"> 8: <div class="jarak"> 9: <h2>Belajar Membuat Website Dengan Mudah</h2> 10: </div> 11: </div> 12: <div class="menu"> 13: <ul> 14: <li><a href="#">Home</a></li> 15: <li><a href="#">About</a></li> 16: <li><a href="#">Blog</a></li> 17: <li><a href="#">Contact</a></li> 18: </ul> 19: </div> 20: <div class="content"> 21: <div class="jarak"> 22...
Read more