Langsung ke konten utama

TUGAS 5 PEMROGRAMAN WEB (D) - Form Validasi

 


Tugas kali ini membuat website form validasi (di sini validasi untuk pendataan vaksin mahasiswa). Dalam proses pengerjaannya, menggunakan HTML, CSS (Bootstrap), dan JavaScript serta VSCode sebagai text editor. JavaScript di sini dipakai untuk proses validasi beberapa kolom inputan yang ada di form. Laman website-nya dapat diakses pada link berikut. Untuk hosting web sendiri memakai Netlify.

Konten dari website:

  1. Main page, berisi halaman depan yang memuat form validasi mahasiswa. Ada beberapa kolom yang semuanya wajib diisi dan tidak boleh kosong, yaitu:
    • Nama, tidak boleh melebihi 50 karakter.
    • NRP, harus memiliki panjang sebanyak 10-16 karakter, dan harus merupakan angka (number).
    • Email, harus berformat seperti email pada umumnya.
    • Domisili
    • Jurusan
    • Status Vaksin

Tampilan Website

  1. Main page

Source Code

  • 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">
    <title>Form Validasi Mahasiswa</title>
    <link rel="icon" type="image/png" href="https://img.icons8.com/color/48/000000/form.png">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <header>
    <img src="https://my.its.ac.id/assets/media/img/myits-sso-white.png" alt="home">
    </header>
    <div class="container align-items-center justify-content-center" style="max-width: 60rem;">
    <h2 class="font-weight-bold text-center pt-4">Form Validasi Mahasiswa</h2>
    <form autocomplete="off" 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" maxlength="50">
    </div>
    <div class="form-group">
    <label class="font-weight-bold">NRP</label>
    <input type="text" name="nrp" placeholder="05xxxxxxxxxx" class="form-control" minlength="10" maxlength="16">
    </div>
    <div class="form-group">
    <label class="font-weight-bold">Email</label>
    <input type="email" name="email" placeholder="cihuy@gmail.com" class="form-control">
    </div>
    <div class="form-group">
    <label class="font-weight-bold">Domisili</label>
    <input type="text" name="domisili" placeholder="Surabaya, Jawa Timur" class="form-control">
    </div>
    <div class="form-group">
    <label class="font-weight-bold">Jurusan</label>
    <select name="jurusan" class="form-control">
    <option selected>- Pilih 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">
    <label class="font-weight-bold">Status Vaksin</label>
    <select name="status_vaksin" class="form-control">
    <option selected>- Pilih Status</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-primary" style="margin-top: 10px;">Submit</button>
    </form>
    </div>
    <footer>
    <div class="font-weight-light text-center p-4">
    &copy 2021 Institut Teknologi Sepuluh Nopember
    </div>
    </footer>
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub
  • style.css
    • body {
    background-color: #ebedff;
    }
    header {
    background-color: #013880;
    height: 68px;
    width: 100%;
    }
    header img {
    height: 33px;
    margin: 15px 0 15px 55px;
    }
    footer {
    background-color: #fff;
    height: 80px;
    width: 100%;
    margin-top: 40px;
    }
    .form-control {
    border: #013880 1px solid;
    }
    view raw style.css hosted with ❤ by GitHub
  • script.js
    • function validateForm() {
    if (document.forms["formValidasi"]["nama"].value == "") {
    alert("Nama Harus Diisi.");
    document.forms["formValidasi"]["nama"].focus();
    return false;
    }
    if (document.forms["formValidasi"]["nrp"].value == "") {
    alert("NRP Harus Diisi.");
    document.forms["formValidasi"]["nrp"].focus();
    return false;
    }
    if (isNaN(document.forms["formValidasi"]["nrp"].value)) {
    alert("NRP Harus Angka.");
    document.forms["formValidasi"]["nrp"].focus();
    return false;
    }
    if (document.forms["formValidasi"]["email"].value == "") {
    alert("Email Harus Diisi.");
    document.forms["formValidasi"]["email"].focus();
    return false;
    }
    if (document.forms["formValidasi"]["domisili"].value == "") {
    alert("Domisili Harus Diisi.");
    document.forms["formValidasi"]["domisili"].focus();
    return false;
    }
    if (document.forms["formValidasi"]["jurusan"].selectedIndex < 1) {
    alert("Harap Pilih Jurusan.");
    document.forms["formValidasi"]["jurusan"].focus();
    return false;
    }
    if (document.forms["formValidasi"]["status_vaksin"].selectedIndex < 1) {
    alert("Harap Pilih Status.");
    document.forms["formValidasi"]["status_vaksin"].focus();
    return false;
    }
    alert("Data telah disubmit");
    }
    view raw script.js hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS 3 PEMROGRAMAN 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 mengaplikasikan penggunaan embed video dari Youtube dan image carousel atau slideshow . Laman website-nya dapat diakses pada  link berikut . Untuk  hosting  web sendiri memakai  Netlify . Konten dari website: Main page , berisi daftar makanan, masakan populer, kontak dari warung tegal, serta menu apa saja yang tersedia di dalam website. Tampilan Website Main page Source Code index.html style.css
Posting Komentar
Baca selengkapnya

ETS PEMROGRAMAN BERORIENTASI OBJEK (B) - Mesin ATM

1. Tuliskan skenario fungsionalitas aplikasi berdasarkan tayangan tersebut! Pada video yang ada, ditampilkan proses setor tunai pada mesin ATM. Jadi, awalnya nasabah memasukkan kartu ATM ke dalam mesin. Lalu, memasukkan nomor pin sebanyak 6 digit sesuai yang telah didaftarkan. Jika pin salah, maka mesin akan meminta mengulangi agar memasukkan pin yang benar. Nah, di mesin ATM ini sendiri ada beberapa fitur yaitu setor tunai, penarikan tunai, dan transaksi lainnya (seperti transfer, pembayaran listrik, dll.). Dalam video, nasabah ingin melakukan proses setor tunai. Perlu diketahui di beberapa mesin, setor tunai ada yang menerima pecahan uang Rp100.000,00 saja, ada juga yang juga menerima Rp50.000,00, di video sepertinya hanya menerima Rp100.000,00. Lalu, juga ada batas maksimal berapa nominal atau jumlah uang yang dimasukkan, di video batasnya adalah 50 lembar. Jika lebih, maka kelebihannya akan dikembalikan oleh mesin. Setelah memasukkan uang ke dalam mesin, mesin akan memproses dan ke...
Posting Komentar
Baca selengkapnya

TUGAS 3 REKAYASA KEBUTUHAN (A) - Elisitasi Kebutuhan SI Evaluasi Kegiatan Sekretariat ITS

Tugas kali ini melakukan elisitasi kebutuhan dari salah satu  Spesifikasi Kebutuhan Perangkat Lunak  (SPKL) dari aplikasi  SI Evaluasi Kegiatan Sekretariat ITS (SIETS)   yang dibuat oleh Insitut Teknologi Sepuluh Nopember (ITS) Surabaya . Sistem Informasi ini merupakan sistem yang diwacanakan untuk memenuhi kebutuhan ITS akan penerimaan masukan dari berbagai kegiatan ITS yang bersifat daring akibat pandemi COVID-19 agar nantinya semasa transisi dari luring ke daring sistem dapat berjalan dengan lancar. Untuk SKPL-nya sendiri dapat dilihat di bawah ini: Elisitasi Elisitasi adalah teknik untuk memperoleh informasi melalui percakapan dengan sesorang dimana orang tersebut tidak sadar sedang digali informasi yang dimiliki. Proses elisitasi digunakan untuk menentukan kebutuhan suatu sistem dengan cara berkomunikasi dengan pengguna tentang perkembangan kebutuhan sistem yang akan dibangun. Ada beberapa hal yang dapat dianalisis sebagai tahap penjajakan dalam memban...
Posting Komentar
Baca selengkapnya