Tugas 5 - Form Vaksinasi

Tiap mahasiswa diberikan tugas untuk membuat Form Vaksinasi.
Di sini saya membuat Dashboard juga Form Vaksinasi menggunakan HTML, Bootstrap CSS, dan Javascript. Halaman Website Form Vaksinasi dapat diakses melalui form vaksin here.
Seluruh source code pada website ini dapat diakses melalui source code here.

Tampilan Website

Di bawah ini merupakan tampilan Dashboard dari Form Vaksinasi yang saya buat.

Tampilan Form Sudah Vaksinasi

Saat memilih pilihan Ya pada kolom form pertama, maka akan menampilkan form informasi sudah vaksin seperti ini.

Tampilan Form Belum Vaksinasi

Saat memilih pilihan Tidak pada kolom form pertama, maka akan menampilkan form informasi belum vaksin seperti ini.

Source Code

Di bawah ini merupakan code pada bagian body index.html.

<div class="containers">
        <div class="navigation">
            <ul>
                <li>
                    <a href="#">
                        <span class="icon"><ion-icon name="school-outline"></ion-icon></span>
                         <img src="https://my.its.ac.id/assets/media/img/myits-sso-white.png" alt="Logo">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><ion-icon name="home-outline"></ion-icon></span>
                        <span class="title">Beranda</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><ion-icon name="water-outline"></ion-icon></span>
                        <span class="title">Vaksinasi COVID-19</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><ion-icon name="log-out-outline"></ion-icon></span>
                        <span class="title">Sign Out</span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="main">
            <div class="topbar">
                <div class="toggle">
                    <ion-icon name="menu-outline"></ion-icon>
                </div>

                <div class="search">
                    <label>
                        <ion-icon name="search-outline"></ion-icon>
                        <input type="text" placeholder="Search here">
                    </label>
                </div>

                <div class="user">
                    <img src="user.jpg" alt="">
                </div>
            </div>

            <div class="card-box">
                <div class="btn-back">
                    <a href="#">
                        <button type="button" class="btn btn-secondary">
                            <ion-icon name="arrow-back-outline"></ion-icon>Kembali
                        </button>
                    </a>
                </div>
            </div>

            <div class="card-box">
                <div class="card">
                    <form name="formPendaftaran" action="" method="post" onsubmit="return validateForm()">
                        <div class="form-group">
                            <label>Apakah sudah menerima Vaksinasi Covid-19?</label>
                            <select onchange="isVaksin()" name="ket-vaksin" class="form-control">
                                <option value="0">Pilih Status Vaksin</option>
                                <option value="1">Ya</option>
                                <option value="2">Tidak</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Nama</label>
                            <input type="text" name="nama" placeholder="Nama Lengkap" class="form-control" maxlength="200" minlength="3">
                        </div>
                        <div class="form-group">
                            <label>NRP</label>
                            <input type="text" name="nrp" placeholder="NRP Lengkap" class="form-control" maxlength="14" minlength="3">
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" name="email" placeholder="Email Mahasiswa" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Departemen</label>
                            <select name="departemen" class="form-control">
                                <option value="0">Pilih Departemen</option>
                                <option value="1">Sistem Informasi</option>
                                <option value="2">Teknologi Informasi</option>
                                <option value="3">Teknik Informatika</option>
                                <option value="4">Teknik Biomedik</option>
                                <option value="5">Teknik Elektro</option>
                                <option value="6">Teknik Komputer</option>
                            </select>
                        </div>
                        <!-- <div class="form-group">
                            <label>Alamat</label>
                            <textarea name="alamat" id="" cols="30" rows="3" placeholder="Alamat Lengkap" class="form-control"></textarea>
                        </div> -->
                        
                        <div id="sudah-vaksin" style="display: none;">
                            <h6>Informasi Sudah Vaksinasi</h6>
                            <hr>
                            <div class="form-group">
                                <label>Jenis Vaksin</label>
                                <select name="jenis-vaksin" class="form-control">
                                    <option value="0">Pilih Salah Satu</option>
                                    <option value="1">Sinovac</option>
                                    <option value="2">AstraZeneca</option>
                                    <option value="3">Novavax</option>
                                    <option value="4">Sinopharm</option>
                                    <option value="5">Moderna</option>
                                    <option value="6">Pfizer</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Dosis Ke</label>
                                <input type="number" name="dosis" placeholder="" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>Nomor Sertifikat</label>
                                <input type="text" name="no-sertif" placeholder="" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>Tanggal Vaksinasi</label>
                                <input type="date" name="tgl-vaksin" placeholder="" class="form-control">
                            </div>
                        </div>
                        <div id="belum-vaksin" style="display: none;">
                            <h6>Informasi Belum Vaksinasi</h6>
                            <hr>
                            <div class="form-group">
                                <label>Alasan Belum Vaksinasi</label>
                                <select name="alasan-vaksin" class="form-control">
                                    <option value="0">Pilih Salah Satu</option>
                                    <option value="1">Berumur di bawah 18 tahun</option>
                                    <option value="2">Terkonfirmasi atau penyintas Covid-19</option>
                                    <option value="3">Memiliki riwayat kontak erat atau suspek Covid-19</option>
                                    <option value="4">Tekanan darah Tinggi atau Hipertensi</option>
                                    <option value="5">Mengalami gejala ISPA (infeksi saluran pernapasan akut) seperti pilek, batuk, sesak napas dalam 7 hari terakhir</option>
                                    <option value="6">Lain-lain (sebutkan)</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Alasan Lainnya</label>
                                <textarea name="alasan-lain" id="" cols="30" rows="3" placeholder="Isi jika memilih alasan 'Lain-lain', kosongkan jika tidak" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="btn-submit">
                            <button type="submit" class="btn btn-primary">Simpan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

Berikut ini merupakan code validasi form menggunakan javascript yang saya gunakan pada script.js untuk memudahkan pengguna dalam memilih option tertentu.

function validateForm() {
    if (document.forms["formPendaftaran"]["nama"].value == "") {
        Swal.fire({
            text: 'Nama Tidak Boleh Kosong',
            icon: 'warning',
            confirmButtonColor: '#3085d6',
        });
        document.forms["formPendaftaran"]["nama"].focus();
        return false;
    }
    if (document.forms["formPendaftaran"]["nrp"].value == "") {
        Swal.fire({
            text: 'NRP Tidak Boleh Kosong',
            icon: 'warning',
            confirmButtonColor: '#3085d6',
        });
        document.forms["formPendaftaran"]["nrp"].focus();
        return false;
    }
    if (document.forms["formPendaftaran"]["email"].value == "") {
        Swal.fire({
            text: 'Email Tidak Boleh Kosong',
            icon: 'warning',
            confirmButtonColor: '#3085d6',
        });
        document.forms["formPendaftaran"]["email"].focus();
        return false;
    }
    if (document.forms["formPendaftaran"]["departemen"].selectedIndex < 1) {
        Swal.fire({
            text: 'Silakan Memilih Jurusan',
            icon: 'warning',
            confirmButtonColor: '#3085d6',
        });
        document.forms["formPendaftaran"]["departemen"].focus();
        return false;
    }
    if (document.forms["formPendaftaran"]["ket-vaksin"].selectedIndex < 1) {
        Swal.fire({
            text: 'Silakan Memilih Status Vaksinasi',
            icon: 'warning',
            confirmButtonColor: '#3085d6',
        });
        document.forms["formPendaftaran"]["ket-vaksin"].focus();
        return false;
    }
    else if (document.forms["formPendaftaran"]["ket-vaksin"].value == "1") {
        if (document.forms["formPendaftaran"]["jenis-vaksin"].selectedIndex < 1) {
            Swal.fire({
                text: 'Silakan Memilih Jenis Vaksin',
                icon: 'warning',
                confirmButtonColor: '#3085d6',
            });
            document.forms["formPendaftaran"]["jenis-vaksin"].focus();
            return false;
        }
        if (document.forms["formPendaftaran"]["dosis"].value == "") {
            Swal.fire({
                text: 'Silakan Lengkapi Dosis Vaksinasi',
                icon: 'warning',
                confirmButtonColor: '#3085d6',
            });
            document.forms["formPendaftaran"]["dosis"].focus();
            return false;
        }
        if (document.forms["formPendaftaran"]["no-sertif"].value == "") {
            Swal.fire({
                text: 'Silakan Lengkapi Nomor Sertifikat Vaksinasi',
                icon: 'warning',
                confirmButtonColor: '#3085d6',
            });
            document.forms["formPendaftaran"]["no-sertif"].focus();
            return false;
        }
        if (document.forms["formPendaftaran"]["tgl-vaksin"].value == "") {
            Swal.fire({
                text: 'Silakan Lengkapi Tanggal Vaksinasi',
                icon: 'warning',
                confirmButtonColor: '#3085d6',
            });
            document.forms["formPendaftaran"]["tgl-vaksin"].focus();
            return false;
        }
    }
    else if (document.forms["formPendaftaran"]["ket-vaksin"].value == "2") {
        if (document.forms["formPendaftaran"]["alasan-vaksin"].selectedIndex < 1) {
            Swal.fire({
                text: 'Silakan Memilih Alasan Belum Vaksinasi',
                icon: 'warning',
                confirmButtonColor: '#3085d6',
            });
            document.forms["formPendaftaran"]["alasan-vaksin"].focus();
            return false;
        }
        else if (document.forms["formPendaftaran"]["alasan-vaksin"].value == "6") {
            if (document.forms["formPendaftaran"]["alasan-lain"].value == "") {
                Swal.fire({
                    text: 'Silakan Isi Alasan Belum Vaksinasi',
                    icon: 'warning',
                    confirmButtonColor: '#3085d6',
                });
                document.forms["formPendaftaran"]["alasan-lain"].focus();
                return false;
            }
        }
    }

    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, submit it!'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Succes!',
                text: 'Your data has been submitted.',
                icon: 'success',
                confirmButtonColor: '#3085d6'
            });
            document.forms["formPendaftaran"].reset();
            document.getElementById('sudah-vaksin').style.display = 'none';
            document.getElementById('belum-vaksin').style.display = 'none';
        }
    });
    return false;
}

function isVaksin() {
    if (document.forms["formPendaftaran"]["ket-vaksin"].value == "0") {
        document.getElementById('sudah-vaksin').style.display = 'none';
        document.getElementById('belum-vaksin').style.display = 'none';
    }
    else if (document.forms["formPendaftaran"]["ket-vaksin"].value == "1") {
        document.getElementById('sudah-vaksin').style.display = 'block';
        document.getElementById('belum-vaksin').style.display = 'none';
    }
    else if (document.forms["formPendaftaran"]["ket-vaksin"].value == "2") {
        document.getElementById('sudah-vaksin').style.display = 'none';
        document.getElementById('belum-vaksin').style.display = 'block';
    }
}

Resource

• Github Repository