Dokumentasi JS PWEB 2021

on

  

Tugas Pemrograman Web - D

 Jonathan Timothy Siregar

0511194000120


    Hai, Saya Jonathan Timothy Siregar mahasiswa Teknik Informatika ITS angkatan 2019. Pada mata kuliah Pemrograman Web ini diberikan sebuah tugas untuk membangun sebuah situs berisikan JS dari suatu Form vaksinasi. 

    Pada HTML yang saya buat, terdapat file html yang telah berisikan metode JS, serta file gambar bertipe jpg. Kombinasi dari keseluruhan file ini akan dilampirkan di bawah.

Berikut Lampiran dari pengerjaan web saya :

https://js-jonathants.netlify.app/





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">
    <title>FORM JS PWEB</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="main.js"></script>
</head>
 
<style>
   
</style>

<body style="background-image: url('pic1.jpg');">
   
   
  <br>
    <div class="container" style="background-color: rgba(255, 255, 255, 0.76);">
    </br>
        <h2 style="text-align: center;">FORMULIR VALIDASI VAKSINASI</h2>
        <form name="formValidasi" onsubmit="return validateForm()" class="pt-2">
            <div class="form-group">
                <label class="font-weight-bold">Nama</label>
                <input type="text" name="nama" placeholder="Nama Lengkap" class="form-control" minlength="5" maxlength="50">
            </div>
 
            <div class="form-group">
                <label class="font-weight-bold">NRP</label>
                <input type="text" name="nrp" placeholder="NRP" class="form-control" minlength="8"
                   maxlength="16">
            </div>
 
            <div class="form-group">
                <label class="font-weight-bold">Email</label>
                <input type="email" name="email" placeholder="Alamat Email" class="form-control">
            </div>
 
            <div class="form-group">
                <label class="font-weight-bold">Asal</label>
                <input type="text" name="domisili" placeholder="Kota Domisili" class="form-control">
            </div>
 
            <div class="form-group">
                <label class="font-weight-bold">Jenis Kelamin</label>
                <select name="jk" class="form-control">
                    <option value="0">Pilih Jenis Kelamin</option>
                    <option value="1">Perempuan</option>
                    <option value="2">Laki-laki</option>
                </select>
            </div>
 
            <div class="form-group">
                <label class="font-weight-bold">Status Vaksin</label>
                <select name="status_vaksin" class="form-control">
                   
                    <option value="0">Pilih Status Vaksinasi</option>
                    <option value="1">Belum Vaksin</option>
                    <option value="2">Sudah Vaksin - Dosis 1</option>
                    <option value="3">Sudah Vaksin - Dosis 2</option>
                </select>
            </div>

            <button type="submit" class="btn btn-secondary" style="margin-top: 10px; text-align: right;">Submit</button>
            <br><br>
        </form>
    </div>
 
    <footer>
        <div class="text-center" style="margin-top: 35px;">
            &copy; JS PWEB 2021
        </div>
    </footer>
</body>
 
</html>


JS     :

function validateForm() {
    if (document.forms["formValidasi"]["nama"].value == "") {
        alert("Isi Nama.");
        document.forms["formValidasi"]["nama"].focus();
        return false;
    }
 
    if (document.forms["formValidasi"]["nrp"].value == "") {
        alert("Isi NRP.");
        document.forms["formValidasi"]["nrp"].focus();
        return false;
    }
 
    if (isNaN(document.forms["formValidasi"]["nrp"].value)) {
        alert("NRP Berupa Angka.");
        document.forms["formValidasi"]["nrp"].focus();
        return false;
    }
   
    if (document.forms["formValidasi"]["email"].value == "") {
        alert("Isi Email.");
        document.forms["formValidasi"]["email"].focus();
        return false;
    }
 
    if (document.forms["formValidasi"]["domisili"].value == "") {
        alert("Isi asal.");
        document.forms["formValidasi"]["domisili"].focus();
        return false;
    }
   
    if (document.forms["formValidasi"]["jk"].selectedIndex < 1) {
        alert("Pilih Jenis Kelamin.");
        document.forms["formValidasi"]["jk"].focus();
        return false;
    }
 
    if (document.forms["formValidasi"]["status_vaksin"].selectedIndex < 1) {
        alert("Pilih Status Vaksin");
        document.forms["formValidasi"]["status_vaksin"].focus();
        return false;
    }
    alert("Data telah disubmit");
}

Sekian Dokumentasi JS saya, terima kasih 

Comments

Post a Comment