Skip to main content

Tugas (5) Pemrograman Web D - Form Validasi


Tugas kali ini membuat website form validasi (validasi pendataan vaksin untuk mahasiswa). Dalam pengerjaannya digunakan HTML, CSS (vanilla dan bootstrap), JavaScript serta VSCode untuk code editor. JavaScript digunakan untuk melakukan validasi pada form apakah sudah terisi atau belum. Untuk websitenya bisa dikunjungi pada link berikut.


Konten dari website:

  1. Main page, berisi halaman yang memuat form. Terdapat beberapa ketentuan pada setiap kolom, tidak boleh kosong dan ketentuan tambahan.
    • Nama, tidak boleh melebihi 50 karakter.
    • NRP, harus memiliki panjang digit 10 - 16, dan harus terdiri dari angka saja.
    • Email, harus memiliki format email pada umumnya.
    • Jurusan
    • Status Vaksin
  2. Second Page, halaman sederhana yang akan ditunjukkan jika sudah berhasil melalui validasi.

Source Code

  • index.html
    <!doctype html>
    <html lang="en">
    <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="main.css" rel="stylesheet">
    <script src="main.js" ></script>
    <title>Validasi Vaksin</title>
    </head>
    <body>
    <main class="container-fluid"
    style="padding-left: 0px; padding-right: 0px;">
    <div class="banner"></div>
    <div class="container mt-5">
    <form id="formPendaftaran">
    <div class="form-group mb-3">
    <label for="exampleFormControlInput1" class="form-label">Nama</label>
    <input type="text" class="form-control" id="nama" placeholder="" required>
    </div>
    <div class="form-group mb-3">
    <label for="exampleFormControlInput1" class="form-label">NRP</label>
    <input type="number" class="form-control" id="nrp" placeholder="05xxxxxxx" required>
    </div>
    <div class="form-group mb-3">
    <label for="exampleFormControlInput1" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com" required>
    </div>
    <div class="form-group mb-3">
    <label for="exampleDataList" class="form-label">Pilih Jurusan</label>
    <select class="form-select" id="jurusan">
    <option value="0" selected>Jurusan</option>
    <option value="1">Fisika</option>
    <option value="2">Matematika</option>
    <option value="3">Statistika</option>
    <option value="4">Kimia</option>
    <option value="5">Biologi</option>
    <option value="6">Aktuaria</option>
    <option value="7">Teknik Perkapalan</option>
    <option value="8">Teknik Sistem Perkapalan</option>
    <option value="9">Teknik Kelautan</option>
    <option value="10">Teknik Transportasi Laut</option>
    <option value="11">Teknik Mesin</option>
    <option value="12">Teknik Kimia</option>
    <option value="13">Teknik Fisika</option>
    <option value="14">Teknik Sistem dan Industri</option>
    <option value="15">Teknik Material</option>
    <option value="16">Teknik Elektro</option>
    <option value="17">Teknik Biomedik</option>
    <option value="18">Teknik Komputer</option>
    <option value="19">Teknik Informatika</option>
    <option value="20">Sistem Informasi</option>
    <option value="21">Teknologi Informasi</option>
    <option value="22">Teknik Sipil</option>
    <option value="23">Arsitektur</option>
    <option value="24">Teknik Lingkungan</option>
    <option value="25">Perencanaan Wilayah dan Kota</option>
    <option value="26">Teknik Geomatika</option>
    <option value="27">Teknik Geofisika</option>
    <option value="28">Desain Produk Industri</option>
    <option value="29">Desain Interior</option>
    <option value="30">Desain Komunikasi Visual</option>/
    <option value="31">Manajemen Bisnis</option>
    <option value="32">Studi Pembangunan</option>
    <option value="33">Manajemen Teknologi</option>
    </select>
    </div>
    <div class="form-group mb-3">
    <label for="exampleDataList" class="form-label">Status Vaksin</label>
    <select class="form-select" id="status_vaksin">
    <option value="0" selected>Pilih</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>
    <div class="col-auto mt-4">
    <button type="button" class="btn btn-primary mb-3" onclick="submitForm()">Submit</button>
    </div>
    </form>
    </div>
    </main>
    <!-- Optional JavaScript; choose one of the two! -->
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub
  • success.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>Success</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="main.css" rel="stylesheet">
    </head>
    <body>
    <main>
    <div class="success">
    <div class="center-vertical fw-bolder">
    Berhasil Terdaftar
    </div>
    </div>
    </main>
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </body>
    </html>
    view raw success.html hosted with ❤ by GitHub
  • main.css
    main, body {
    margin: 0px;
    }
    .banner {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./images/banner-rektorat.jpeg");
    height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    }
    .success {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./images/banner-rektorat.jpeg");
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    }
    .center-vertical {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: rgb(216, 216, 216);
    }
    view raw main.css hosted with ❤ by GitHub
  • main.js
    function submitForm() {
    const res = validateForm();
    if (res) {
    // alert("Berhasil terdaftar");
    console.log('redirecting to success');
    window.location.href = "./success.html";
    } else {
    // alert("Ada field yang belum terisi");
    }
    }
    function validateForm() {
    console.log(`jurusan value ${parseInt(document.forms["formPendaftaran"]["jurusan"].value)}`);
    console.log(`vaksi value ${parseInt(document.forms["formPendaftaran"]["status_vaksin"].value)}`)
    if (document.forms["formPendaftaran"]["nama"].value == "") {
    alert("Nama Harus Diisi.");
    document.forms["formPendaftaran"]["nama"].focus();
    return false;
    }
    if (document.forms["formPendaftaran"]["nrp"].value == "") {
    alert("NRP Harus Diisi.");
    document.forms["formPendaftaran"]["nrp"].focus();
    return false;
    } else if (
    document.forms["formPendaftaran"]["nrp"].value.length > 16 ||
    document.forms["formPendaftaran"]["nrp"].value.length < 10
    ) {
    alert("NRP hanya boleh 10-16 digit.");
    document.forms["formPendaftaran"]["nrp"].focus();
    return false;
    }
    if (document.forms["formPendaftaran"]["email"].value == "") {
    alert("Email Harus Diisi.");
    document.forms["formPendaftaran"]["email"].focus();
    return false;
    }
    if (parseInt(document.forms["formPendaftaran"]["jurusan"].value) < 1) {
    alert("Harap Pilih Jurusan.");
    document.forms["formPendaftaran"]["jurusan"].focus();
    return false;
    }
    if (parseInt(document.forms["formPendaftaran"]["status_vaksin"].value) < 1) {
    alert("Harap Pilih Status.");
    document.forms["formPendaftaran"]["status_vaksin"].focus();
    return false;
    }
    return true;
    }
    view raw main.js hosted with ❤ by GitHub

Comments

Post a Comment

Popular posts from this blog

Tugas (6) Pemrograman Web D - Form Login & Contact Us dengan Bootstrap

 Tugas kali ini membuat website form login  dan contact us  menggunakan salah satu framework CSS paling populer yaitu Bootstrap . Dalam pengerjaannya digunakan HTML, CSS(Bootstrap) dan custom, serta sedikit JavaScript. JS digunakan untuk menampilkan alert bahwa data telah berhasil di-submit atau dikirim. Laman website dapan diakses pada link berikut . Untuk hosting web digunakan Vercel . Website terdiri dari satu halaman dan 2 bagian: Login form,  berisi halaman yang memuat form untuk login, dan sign in. Email dan password tidak boleh kosong. Newsletter section, berisi informasi mengenai pengguna yang ingin berlangganan berita update dari website ini. Source Code index.html main.css index.js
Post a Comment
Read more

Tugas (3) Pemgrograman Web D - Warung Tegal

Tugas kali ini membuat website Warung Makan Tegal. Dalam proses pengerjaannya, menggunakan  HTML ,   CSS ,   dan  JavaScript  serta  VSCode  sebagai  text editor . Di website ini, saya menggunakan carousel dan ada satu content video pada carousel tersebut menggunakan tag html video . Untuk websitenya sendiri bisa di akses melalui link berikut . Content website terdiri dari carousel, lalu ada video promosi Warung Tegal. Kemudian menu yang disediakan. Berikut merupakan preview dari Website Warung Tegal Source code index.html carousel.css carousel.js Axel Briano Suherik 05111940000137 Pweb - D
Post a Comment
Read more

Tugas 5 Rekayasa Kebutuhan (A) - Spesifikasi Kebutuhan Aplikasi Moka

Tugas kali ini adalah membuat spesifikasi kebutuhan dari suatu aplikasi bernama Moka. PoS merupakan sistem untuk memudahkan proses pembayaran para pelanggan di suatu pelaku usaha ketika membeli suatu produk atau jasa. Sistem PoS biasanya digunakan pada smartphone, tablet, komputer atau mesin EDC. Moka perupakan suatu aplikasi yang menerapkan  point-of-sales (PoS), Moka menggabungkan perangkat lunak dan perangkat keras membentuk sistem untuk memudahkan transaksi oleh pelaku usaha dengan pelanggan. Dengan Moka pelaku usaha dapat melakukan beragam hal seputar penjualan, mulai dari membuat entry produk atau jasa baru, mengatur stok, harga, keterangan, serta menampilkan grafik grafik data transaksi yang sudah di akumulasi dengan cepat dan secara real-time . Kebutuhan Fungsional Sistem menyediakan fitur login Sistem menyediakan fitur register Sistem menyediakan sejumlah opsi jenis usaha Sistem menyediakan fitur untuk mengelola menu Sistem menyediakan fitur untuk melakukan pengelolaan sh...
Post a Comment
Read more