Selasa, 13 Desember 2022

Pemrograman Web C | EAS

5025201165 - Gabriel Solomon Sitanggang

SOAL

Kementrian Kelautan dan Perikanan sedang membutuhkan pegawai baru untuk menjalankan tugas di wilayah Provinsi Jawa Timur. Untuk melaksanakan seleksi pegawai membutuhkan sebuah aplikasi pendaftaran dan pelaksanaan ujian.

1. Buatlah deskripsi aplikasi berdasarkan studi kasus di atas dan asumsi-asumsi yang diperlukan
2. Rancangan UI/Prototype aplikasi
3. Rancangan tabel dan database yang dipakai
4. Buat algoritma dan nama proses yang diperlukan sebagai back end aplikasi

Alur Aplikasi
1. Calon pendaftar membuat username dengan verifikasi data ktp
2. Calon pendaftar mengupload berkas pendaftaran dan foto diri
3. Panitia memverifikasi berkas pendaftaran. Bagi peserta yang lolos berkas, diberi akses mencetak kartu ujian masuk
4. Pendaftar yang lolos verifikasi, mencetak kartu ujian. Kartu peserta ujian seperti nampak pada gambar di atas.
5. Pendaftar melaksanakan ujian secara offline sesuai dengan lokasi yang ditentukan.


TUGAS INDIVIDU

Deskripsi aplikasi

Aplikasi ini berfungsi untuk mengakomodasi proses pendaftaran, detail pelaksanaan ujian seperti lokasi ujian, sampai pengumuman kelulusan calon-calon pegawai Kementrian dan Perikanan di wilayah Provinsi Jawa Timur. Aplikasi ini akan dapat diakses oleh calon pegawai untuk pendaftaran secara online dimana pun dan kapan pun. Pendaftaran online ini meliputi pengumpulan berkas-berkas yang dibutuhkan. Setelah melakukan pendaftaran, akan dilakukan seleksi/verifikasi berkas calon pegawai di aplikasi ini. Di proses ini dapat dilihat data-data mengenai calon pegawai (pendaftar) meliputi berkas-berkas yang telah dikumpul. Kemudian setelah terseleksi dan dinyatakan lulus, calon pegawai (pendaftar) dapat mengunduh kartu ujian.

Rancangan UI

1. Halaman Awal



2. Halaman Register


3. Halaman Login



4. Dashboard User



5. Dashboard Admin


Rancangan tabel dan database yang dipakai



Algoritma dan nama proses yang dilakukan sebagai backend aplikasi

1. Proses pendaftaran calon pegawai
  • Calon Pegawai mengakses website yang telah dibuat oleh Kementrian Kelautan dan Perikanan
  • Calon Pegawai membuat akun di website
  • Calon Pegawai diminta memasukkan data diri seperti nama dan NIK
  • Calon Pegawai melakukan login di website
2. Proses Upload Berkas
  • Calon Pegawai masuk dengan akun yang sudah diregistrasi sebelumnya
  • Calon Pegawai melihat berkas-berkas yang perlu dikumpulkan di laman pengumuman di website tersebut
  • Calon Pegawai mulai mengisi data dan berkas yang disebutkan di atas.
3. Proses Verifikasi Berkas Pendaftar
  • Admin masuk ke laman admin yang telah dibuat secara terpisah dari akun calon pegawai
  • Admin membuka laman list calon-calon yang sudah mengumpulkan data dan berkasnya
  • Admin memeriksa validitas dari data dan berkas yang telah dikumpulkan oleh calon pegawai
  • Admin akan menerima data dan berkas jika sudah sesuai ketentuan dan akan menolak data dan berkas jika tidak sesuai ketentuan yang sudah ada
4. Proses Kelulusan Berkas Pendaftar
  • Calon Pegawai akan membuka akun yang telah dibuat
  • Calon Pegawai membuka laman pengumuman
  • Calon Pegawai dapat melihat apakah lolos tahap verifikasi berkas atau tidak
5. Proses Pencetakan Kartu Ujian
  • Calon Pegawai yang lulus tahap verifikasi berkas membuka akun yang telah dibuat
  • Calon Pegawai membuka laman untuk cetak kartu ujian
  • Calon Pegawai mencetak kartu ujian yang tersedia
  • Calon Pegawai akan secara otomatis mengunduh file kartu ujian dalam bentuk pdf
  • Calon Pegawai akan melihat lokasi dan tanggal ujian di kartu ujian

TUGAS KELOMPOK

5025201165 - Gabriel Solomon Sitanggang
5025201032 - Hafiz Kurniawan
5025201167 - William Zefanya Maranatha

Link Repository dapat dilihat di link berikut.
Link Dokumentasi berupa video youtube dapat diakes di link berikut.
Link Website dapat diakses di link berikut.
di Tidak ada komentar:

Pemrograman Web C | Tugas 9

CRUD PDF Report




Nama : Gabriel Solomon Sitanggang
NRP : 5025201165

Pada materi ini, diminta untuk melakukan koneksi ke database, kemudian bisa melakukan Create, Read, Update, Delete (CRUD). Di tugas ini, digunakan proses pendaftaran siswa baru sebagai studi kasusnya.Setelah melakukan CRUD kita diminta untuk dapat mengupload foto yang telah dipilih oleh user. Kemudian untuk hasil dari formulir yang sudah diisi dapat ditampilkan ke dalam bentuk PDF. 

Link Repository dapat diakses di link berikut.

Dokumentasi dapat dilihat di gambar berikut.

 1. Halaman Untuk Menampilkan Tombol Cetak PDF


2. Hasil Dari Cetak PDF






di Tidak ada komentar:

Pemrograman Web C | Tugas 8

CRUD Pendaftaran Siswa Baru Dengan Upload Gambar







Nama : Gabriel Solomon Sitanggang
NRP : 5025201165

Pada materi ini, diminta untuk melakukan koneksi ke database, kemudian bisa melakukan Create, Read, Update, Delete (CRUD). Setelah melakukan CRUD kita diminta untuk dapat mengupload foto yang telah dipilih oleh user. Di tugas ini, digunakan proses pendaftaran siswa baru sebagai studi kasusnya.

Link Repository dapat diakses di link berikut.

Dokumentasi dapat dilihat di gambar berikut.

1. Halaman awal

2. Halaman Pendaftaran yang Bisa Mengupload Foto Berupa File

3. Halaman Pendaftaran Jika Berhasil Menambah Siswa Baru

4. Halaman Siswa Baru yang Sudah Mendaftar Beserta Fotonya. Di halaman ini kita bisa mengedit formulir siswa baru ataupun menghapus formulir tersebut.

5. Halaman Mengedit Formulir Siswa yang Sudah Mendaftar.


di Tidak ada komentar:

Pemrograman Web C | Tugas 7

CRUD Pendaftaran Siswa Baru




Nama : Gabriel Solomon Sitanggang
NRP : 5025201165

Pada materi ini, diminta untuk melakukan koneksi ke database, kemudian bisa melakukan Create, Read, Update, Delete (CRUD). Di tugas ini, digunakan proses pendaftaran siswa baru sebagai studi kasusnya.

Link Repository dapat diakses di link berikut.

Dokumentasi dapat dilihat di gambar berikut.

1. Halaman utama

2. Halaman Daftar Baru

3. Berhasil Mendaftar Siswa Baru

4. Tampilan Siswa yang Sudah Mendaftar. Disini kita bisa memilih untuk mengedit formulir siswa yang sudah ada atau menghapusnya

5. Tampilan Edit Siswa


di Tidak ada komentar:

Senin, 07 November 2022

Pemrograman Web C | ETS

ETS

Kelompok:
5025201032 - Hafiz Kurniawan
5025201165 - Gabriel Solomon Sitanggang
5025201167 - William Zefanya Maranatha

Pada pertemuan ini, diberikan soal ETS yang berguna menguji kompetensi/ kemampuan untuk menjadi Front Developer. Tools yang dipakai bisa menggunakan Html, CSS, JavaScrip, JQuery ataupun Content Management System. Pada ETS ini, diminta untuk mengerjakan soal sebagai berikut :
  1. Buatlah konsep dan desain konten untuk aplikasi Startup. Konsep dan desain antara 1 kelompok dengan yang lain tidak boleh sama (Setelah selesai membaca soal dan referensi segera posting ide di koment, guna menghindari kesamaan ide).  Konsep memuat deskripsi problem yang dihadapi, dan solusi yang diusulkan dalam bentuk aplikasi.
  2. Implementasikan konsep yang telah dibuat ke dalam sebuah aplikasi web.
  3. Hostingkan aplikasi web yang dibangun dan daftarkan nama domainnya.
  4. Buatlah Video Pitching, yaitu video presentasi yang menjelaskan deskripsi ide bisnismu kepada calon investor dan juga kepada calon pengguna. Upload video Pitching ke Youtube.
  5. Buat Dokumentasi pengerjaan di blog, yang memuat konsep desain, link domain aplikasi, dan Embedded  video Youtube. Link dokumentasi tuliskan sebagai komentar di posting ETS Pemrograman Web 2022.

Problem Statement:
Seperti yang telah diketahui bahwa Kesehatan merupakan hal yang sangat vital dalam kehidupan. Namun dengan begitu pentingnya Kesehatan belum sebanding dengan usaha untuk mendapatkan kemudahan akses layanan Kesehatan. Mulai dari proses pendaftaran, melakukan catatan medis, cek lab, treatment Kesehatan dan lainnya, masih sangat diperlukan pengembangan sehingga layanan Kesehatan dapat diakses secara praktis, cepat dan akurat. Dengan adanya akses layanan yang praktis, cepat dan akurat mungkin bisa dibayangkan seberapa banyak membantu orang yang membutuhkan layanan Kesehatan pada waktu yang tepat.

Solusi:
Perlu adanya pengembangan website layanan Kesehatan rumah sakit yang dapat memberikan pelayanan Kesehatan secara praktis, cepat dan akurat.

Repository dapat dilihat di link berikut : Repository
Website dapat dilihat di link berikut ini : Hospital.in
Video pitching terdapat di link berikut  : Youtube

Dokumentasi (dalam bentuk gambar) 

  • Home
    Pada halaman ini berisi tulisan selamat datang di web hospital.in, kemudian ada pilihan Find Doctor dan Appointment. Kemudian ada bagian About Us, dan di bawahnya ada services yang disediakan oleh hospitalin. Kemudian dibawahnya ada bagian Book An Appointment dengan Appointment history dari pengguna yang bisa ditambah maupun dikurangi. Kemudian ada Medical Packages yang berisi harga dari setiap service yang diberikan. Kemudian dibawahnya ada dokter yang akan melayani pasien di hospital.in ini. Kemudian ada fitur mencari dokter. Dan dibawahnya lagi terdapat bagian Testimonial dari pengguna sebelumnya. Di bawahnya lagi ada blog post kesehatan yang bisa diakses pengguna. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.





  • About
    Pada halaman ini berisi bagian About Us, dan di bawahnya ada fitur Find a Doctor dan kemudian ada bagian yang menampilkan dokter yang melayani di Hospital.in ini. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.

  • Services
    Pada halaman ini menyediakan bagian services yang ditawarkan oleh Hospital.in. Kemudian pada halaman ini terdapat bagian Book An Appointment dengan Appointment history dari pengguna yang bisa ditambah maupun dikurangi. Kemudian di bawahnya ada testimonial dari pengguna yang pernah menggunakan website Hospital.in ini. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.

  • Pricing
    Pada halaman ini terdapat bagian Medical Package yang berisi harga dari setiap service yang ada di Hospital.in. Kemudian di bawahnya ada Book An Appointment dengan Appointment history dari pengguna yang bisa ditambah maupun dikurangi. Kemudian ada bagian yang menampilkan dokter yang melayani di Hospital.in ini. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.



  • Pages
  1. Blog Grid
Pada halaman ini terdapat blog post yang baru saja diupload ke website Hospital.in. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in. 



      2. Blog Detail

Pada halaman ini terdapat blog yang lebih mendetail dan menampilkan kolom komentar dari blog yang dibuka. Kemudian ada Keyword untuk mencari blog yang diinginkan. Kemudian ada Recent Post blog post. Kemudian ada Tag Cloud yang berisikan tag yang berhubungan dengan blog post diatasnya. Kemudian ada bagian yang menampilkan dokter yang melayani di  Hospital.in ini. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.


      3. The Team

Pada halaman ini terdapat bagian yang menampilkan dokter yang melayani di Hospital.in ini. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in



      4. Testimonial

Pada halaman ini terdapat bagian Testimonial dari pengguna sebelumnya. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.




      5. Appointment
Pada halaman ini terdapat bagian Book An Appointment dengan Appointment history dari pengguna yang bisa ditambah maupun dikurangi. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.




      6. Search
Pada halaman ini terdapat bagian Find a Doctor dan kemudian ada bagian yang menampilkan dokter yang melayani di Hospital.in ini. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.

  •  Contact
    Pada halaman ini terdapat bagian contact yang bisa dihubungi oleh pihak Hospital.in beserta dengan alamatnya. Kemudian ada google maps yang menuju ke kantor Hospital.in. Kemudian ada bagian untuk meninggalkan komen di bawahnya. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.


 

di Tidak ada komentar:

Minggu, 30 Oktober 2022

Pemrograman Web C | Tugas 6

Tugas Membuat Form Validation Menggunakan JQuery

Nama : Gabriel Solomon Sitanggang
NRP : 5025201165

Pada pertemuan ini, tugas yang diberikan yaitu membuat website menggunakan jQuery yang menampilkan form dengan validasi.

Link repository dapat diakses di link berikut.
Untuk dokumentasi websitenya bisa di akses di web berikut. 
Atau bisa dilihat langsung di gambar di bawah ini

 



di Tidak ada komentar:

Selasa, 11 Oktober 2022

Pemrograman Web C | Tugas 5

LATIHAN JQUERY

Nama : Gabriel Solomon Sitanggang
NRP : 5025201165

Pada pertemuan ini, tugas yang diberikan yaitu membuat website yang menampilkan fungsi button sebagai click dan bisa menambah angkanya jika ditekan.

Link repository dapat diakses di link berikut. Atau bisa dilihat langsung dibawah ini
<!DOCTYPE html>  
<html>  
    <head>  
        <title>Latihan jQuery</title>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">  
    </head>  
    <body>  
        <div class="container">  
            <div class="row">  
                <div class="d-flex align-items-center justify-content-center mt-5">  
                <p id="number" class="h4 text-justify"> 0 </p>  
                </div>  
                <div class="d-flex align-items-center justify-content-center mt-1">  
                <button type="button" id="add" class="btn btn-dark">TEKAN!!!</button>  
                </div>  
            </div>  
        </div>  
        <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>  
        <script> 
            $(document).ready(function() {  
                let counter = 1;  
                $("#add").click(function() {  
                $("#number").html(counter++);  
                console.log("TES");  
                if (number & 1) {  
                    $("#add").addClass("btn-warning");  
                    $("#add").removeClass("btn-dark");  
                }  
                else {  
                    $("#add").addClass("btn-dark");  
                    $("#add").removeClass("btn-warning");  
                }  
                });  
            });  
        </script>  
    </body>  
</html>


Untuk dokumentasi websitenya bisa di akses di web berikut. Atau bisa dilihat langsung di gambar di bawah ini







di Tidak ada komentar:

Rabu, 28 September 2022

Pemrograman Web C | Tugas 4

LATIHAN BOOTSRAP 

Nama : Gabriel Solomon Sitanggang
NRP : 5025201165

Link repository dapat diakses di link berikut. Atau bisa dilihat langsung dibawah ini

  
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tugas 5</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
        <a class="navbar-brand" href="index.html">
            <img src="gambar/logo.png" alt="logo" style="width:50px;">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Pemrograman</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Database</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Framework</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Lainnya</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="jumbotron text-center">
        <h1>Belajar Programming Itu Mudah</h1>
        <p>Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</p>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <div class="thumbnail">
                    <a href="#"><img src="gambar/HTML_&_CSS.png" width="100%" alt="Cinque Terre"></a>
                    <div class="caption">
                        <h3>Belajar HTML & CSS</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris</p>
                        <p><a href="#" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="thumbnail">
                    <a href="#"><img src="gambar/Programming.png" width="100%" alt="Cinque Terre"></a>
                    <div class="caption">
                        <h3><a href="#" style="text-decoration:none;color: black;">Web Programming</a> </h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris</p>
                        <p><a href="#" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
                    </div>
                </div>

            </div>
            <div class="col-sm-3">
                <div class="thumbnail">
                    <a href="#"><img src="gambar/Python.png" width="100%" alt="Cinque Terre"></a>
                    <div class="caption">
                        <h3>Belajar Python</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris</p>
                        <p><a href="#" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="thumbnail">
                    <a href="#"><img src="gambar/Desain_UI_&_UX.png"  width="100%" alt="Cinque Terre"></a>
                    <div class="caption">
                        <h3>Desain UI & UX</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris</p>
                        <p><a href="#" class="btn btn-light btn-block " role="button">Selengkapnya</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

Untuk dokumentasi dapat dilihat di bawah ini.



di Tidak ada komentar:

Selasa, 20 September 2022

Pemrograman Web C | Quiz 1

Nama : Gabriel Solomon Sitanggang
NRP : 5025201165
Kelas : PWEB C

Link repository berikut.

Tampilan dari web dapat dilihat sebagai berikut

1. Tampilan awal


2. Tampilan ketika data telah disubmit.


3.Tampilan data yang telah diinput ke dalam local storage








di Tidak ada komentar:

Pemrograman Web C | Tugas 4

 

Membuat Website Pencarian Kode Pos dengan Javascript


Nama : Gabriel Solomon Sitanggang
NRP : 5025201165

Link repository dapat diakses di link berikut. Atau bisa dilihat langsung dibawah ini
1. index.html

<!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">
    <title>Postal Code</title>
</head>
<body>
    <div class="box">
        <div class="judul" id="judul">
            <h1>🗺️ INDONESIAN POSTAL CODE 🗺️</h1>
        </div>
        <div class="flex">
            <form id="form">
                <div class="divInput">
                    <label class="judul">Select Province:</label>
                    <select class="btn" id="prov" name="provinsi" required>
                        <option value="" disabled selected>Select Province</option>
                    </select>
                    <label class="judul">Select District:</label>
                    <select class="btn" id="kab" name="kabupaten" required>
                        <option value="" disabled selected>Select District</option>
                    </select>
                    <label class="judul">Postal Code:</label>
                    <input class="btn" id="cari" type="number" placeholder="Masukan kode pos">
                </div>
            </form>
        </div>
        <div class="result">
        </div>
    </div>
    
    <script type="module" src="main.js"></script>
</body>
</html>

2. style.css

body {
    margin: 0px;
    background-color: #3B9AE1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
}

.box {
    background-color: #21E1E1;
    flex-direction: column;
    border: 2px solid black;
    width: 50em;
    height: 30em;
    box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.75);
}

.judul {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3120E0;
    font-family: monospace;
    font-size: larger;
    animation: show 2.5s;
    opacity: 1;
    visibility: visible;
    font-weight: bold;
}

.flex {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

form {
    padding: 20px;
    width: 40%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: show 2.5s;
    opacity: 1;
    visibility: visible;
}

.divInput {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: 8px;
}

.btn {
    cursor: pointer;
    padding: 5px;
    border: 2px solid black;
    background-color: #F0EABE;
    color: black;
    font-weight: bold;
    width: 100%;
}

.btn:hover {
    background-color: #3B9AE1;
    color: #000000;
    transition: 0.18s ease-in-out;
    box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.75);
    -webkit-transition: 0.18s ease-in-out;
    -moz-transition: 0.18s ease-in-out;
    -ms-transition: 0.18s ease-in-out;
    -o-transition: 0.18s ease-in-out;
}

form select,
input {
    margin-top: 20px;
    width: 90%;
    height: 30px;
    border-radius: 4px;
}

form label {
    margin-bottom: -10px;
    font-size: 20px;
}
form h1{
    display: block;
    margin: 0 auto;
    margin-top: -20px;
    margin-bottom: 40px;
}
h3{
    font-size: 14px;
    font-weight: normal;
}
p{
    font-size: 14px;
}

.result {
    margin-top: 200px;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    gap: 20px;
    width: 100%;
    justify-content: center;
}

.card {
    background-color: tomato;
    padding: 10px;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    width: 200px;
    height: 200px;
    border: solid black;
    border-radius: 8px;
    box-shadow: 11px 10px 20px -9px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 11px 10px 20px -9px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 11px 10px 20px -9px rgba(0, 0, 0, 0.7);
    animation: show 2.5s;
    opacity: 1;
    visibility: visible;
    font-family: monospace;
    font-size: larger;
}

.card:hover {
    background-color: #3be140;
    color: #000000;
    transition: 0.18s ease-in-out;
    box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.75);
    -webkit-transition: 0.18s ease-in-out;
    -moz-transition: 0.18s ease-in-out;
    -ms-transition: 0.18s ease-in-out;
    -o-transition: 0.18s ease-in-out;
}

@keyframes show {
    0%{
        opacity: 0;
        visibility: hidden;
    }
    100%{
        opacity: 1;
        visibility: visible;
    }
}


3. main.js

import data from "../data/data.json" assert {type: "json"}
let data_postal = []
const data_prov = []
const provinsi = document.querySelector("#prov")

const select = document.querySelector("#prov")
const select_kab = document.querySelector("#kab")
const kab = document.querySelector("#kab")

document.addEventListener('DOMContentLoaded', function () {
    addprov()
    setKab()
    result()
    form()
});

function setKab() {
    provinsi.addEventListener("change", function () {
        const id = provinsi.value
        const postal = data.postal[id]
        const option = document.createElement('option')
        option.innerText = "Pilih Kabupaten";
        option.setAttribute("selected",true)
        option.setAttribute("disabled",true)
        select_kab.innerText = ''
        select_kab.append(option)
        data_prov.push(postal)
        const city = [...new Set(postal.map((data) => {
            return data.city;
        }))]
        city.sort((a,b)=>{
            let fa = a.toLowerCase()
            let fb = b.toLowerCase()
    
            if (fa < fb) {
                return -1;
            }
            if (fa > fb) {
                return 1;
            }
            return 0;
        })
        city.map((data) => {
            makeOptionKab(data)
        })
    })
}

function addprov() {
    const prov = Object.entries(data.province)
     const data_baru = prov.map((data) => {
        return data[1]
    })
    data_baru.sort((a,b)=>{
        let fa = a.province_name.toLowerCase()
        let fb = b.province_name.toLowerCase()

        if (fa < fb) {
            return -1;
        }
        if (fa > fb) {
            return 1;
        }
        return 0;
    })
    data_baru.map((data)=>{
        makeOption(data)
    })
}

function makeOption(provinsi) {
    const option = document.createElement('option')
    option.innerText = provinsi.province_name;
    option.setAttribute('value', provinsi.province_code)
    select.append(option)
    return select
}

function makeOptionKab(kabupaten) {
    const option = document.createElement('option')
    option.innerText = kabupaten;
    option.setAttribute('value', kabupaten)
    select_kab.append(option)
    return select
}

function result() {
    kab.addEventListener("change", function () {
        const elemet = document.getElementsByClassName("card")
        if(elemet.length != 0){
            for(let i = 0,card ;card = elemet[i];i++)
            elemet[i].remove()
        }
        const value = kab.value;
        const result = data_prov[0].filter((data) => {
            if ( value  == data.city) return data
        })
        result.map((data) => {
            data_postal.push(data)
        })
        
        data_postal.map((data)=>{
            makeResult(data)
        })
        data_postal = []
    })


}

function makeResult(data) {
    const container = document.querySelector(".result");
    const div = document.createElement("div")
    const title = document.createElement("h3")
    const kecamanatan = document.createElement("h3")
    const p = document.createElement("p")
    title.innerText = `Desa : ${data.urban}`
    kecamanatan.innerText = `Kecamatan : ${data.sub_district}`
    p.innerText = `kode pos: ${data.postal_code}`
    div.classList.add("card")
    div.append(kecamanatan,title,p)
    container.append(div)
    return container
}

function form(){
    const cariForm = document.getElementById("form")
    cariForm.addEventListener("submit",function(e){
        e.preventDefault()
        const title = document.getElementsByTagName("p");
        const cari = document.querySelector("#cari")    
        const filter = document.getElementsByClassName("card");
        const value = cari.value;
        for (let i = 0, list; list = title[i]; i++) {
            let text = list.innerHTML;
            if (text.indexOf(value) > -1) {
                filter[i].style.display = "";
            } else if (value.length == 0) {
                console.log("hai");
            } else
                filter[i].style.display = "none";
        }

    })
    
}


Untuk tampilan dapat dilihat di bawah ini :

1. Tampilan Awal


2. Tampilan Memilih Provinsi yang Akan Dicari Kode Posnya

3. Tampilan Memilih Kabupaten yang Akan Dicari Kode Posnya

4. Hasil dari Pencarian Kode Pos Berdasarkan Provinsi dan Kabupaten yang Berisikan Informasi tentang Kecamatan, Desa, serta Kode Posnya

5. Dapat Juga Langsung Dicari Berdasarkan Kode Posnya yang Akan Menampilkan Informasi tentang Kecamatan, Desa, serta Kode Posnya



di Tidak ada komentar:
Langganan: Postingan (Atom)

Pemrograman Web C | EAS

5025201165 - Gabriel Solomon Sitanggang SOAL Kementrian Kelautan dan Perikanan sedang membutuhkan pegawai baru untuk menjalankan tugas di wi...