Langsung ke konten utama

Tugas 5 Pemrograman Web A

Form Validasi Vaksinasi Mahasiswa

Nama   : Jonathan Leonardo Hasiholan Simanjuntak
NRP     : 05111940000150
Kelas    : Pemrograman Web A 2021

Pada pertemuan keenam kelas PWEB A, kami diberikan tugas untuk mengembangkan sebuah website form validasi vaksinasi mahasiswa dengan memanfaatkan penggunaan Javascript. Disini, kami diminta untuk memvalidasi data - data yang dimasukkan pada form yang telah kami buat, baik itu kelengkapan ataupun format dari datanya. Setelah website berhasil di susun secara lokal, website yang kita susun tersebut juga akan di hosting-kan. Pada tugas ini, hosting website dilakukan menggunakan Github Pages. Websitenya sendiri, dapat diakses lewat link ini.

Berikut adalah tampilan hasil websitenya : 
  1. Tampilan Isian Form Validasi Vaksinasi Mahasiswa




  2. Tampilan Isian Form Sukses Disimpan

Source Code

Untuk source code dari webnya, masing - masing halaman tampilan source code HTML-nya saya pisahkan. Untuk styling template halaman, saya masukkan kedalam style.css. Selain metode external style sheet, untuk styling khusus tertentu pada suatu elemen, digunakan metode inline style. Untuk melengkapi tema yang saya buat, saya juga menggunakan library CSS Bootstrap, tepatnya Bootstrap 4.4.1. Sedangkan untuk logical-nya, saya masukkan ke dalam main.js. Berikut source code dari website tersebut :
  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">
    <title>Form Validasi Vaksinasi Mahasiswa</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="./contents/style.css">
    <script src="./contents/main.js"></script>
    </head>
    <body>
    <header>
    <img src="images/sso.png" alt="gambar">
    </header>
    <div class="formContainer" style="margin-top: 80px; margin-bottom: 80px">
    <h1 style="margin-bottom: 40px;">Form Validasi Vaksinasi Mahasiswa</h1>
    <div class="container">
    <form id="formMahasiswa" autocomplete="off">
    <div class="form-group">
    <label>Nama</label>
    <input type="text" name="nama" placeholder="Nama Lengkap Mahasiswa" class="form-control" minlength="3" maxlength="40">
    </div>
    <div class="form-group">
    <label>NRP</label>
    <input type="text" name="nrp" placeholder="NRP Mahasiswa" class="form-control" minlength="10" maxlength="16">
    </div>
    <div class="form-group">
    <label>Domisili</label>
    <input type="text" name="domisili" placeholder="Domisili Mahasiswa Saat Ini" class="form-control" minlength="1">
    </div>
    <div class="form-group">
    <label>Email</label>
    <input type="email" name="email" placeholder="Email Aktif Mahasiswa" class="form-control">
    </div>
    <div class="form-group">
    <label>Jurusan</label>
    <select name="jurusan" class="form-control">
    <option value="0">Pilih Jurusan Mahasiswa</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>Status Vaksinasi</label><br>
    <input type="radio" name="vaksin" value="1"> Belum Vaksin<br>
    <input type="radio" name="vaksin" value="2"> Dosis-1<br>
    <input type="radio" name="vaksin" value="3"> Dosis-2<br>
    </div>
    <button type="button" class="btn btn-primary" onclick="submitForm()" style="margin-top: 20px;">Submit</button>
    </form>
    </div>
    </div>
    <footer>
    <h6>&copy All Rights Reserved.</h6>
    </footer>
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub
  2. 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>Berhasil</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../contents/style.css">
    <script src="../contents/main.js"></script>
    </head>
    <body>
    <header>
    <img src="../images/sso.png" alt="gambar">
    </header>
    <div class="formContainer" style="margin-top: auto; margin-bottom: auto;">
    <h1>Data Berhasil Ditambahkan</h1> <br><br>
    <a href="../index.html"><p id="prevLink">[Kembali ke menu sebelumnya]</p></a>
    </div>
    <footer>
    <h6>&copy All Rights Reserved.</h6>
    </footer>
    </body>
    </html>
    view raw success.html hosted with ❤ by GitHub
  3. style.css
    .formContainer {
    margin-right: auto;
    margin-left: auto;
    width: 1000px;
    background-color: #f2f5f5;
    border-radius: 20px;
    height: auto;
    padding: 70px;
    }
    body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    }
    h1 {
    text-align: center;
    font-family: Arial;
    font-weight: bolder;
    color: #013880;
    }
    header {
    background-color: #013880;
    }
    header img {
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 60px;
    }
    footer {
    background-color: #013880;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    }
    footer h6 {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    color: whitesmoke;
    font-family: Georgia;
    font-weight: bold;
    }
    .btn-primary {
    font-weight: 400;
    color: whitesmoke;
    background-color: #013880;
    border-color: #013880;
    }
    .btn-primary:hover {
    color: whitesmoke;
    background-color: #f39c12;
    border-color: #f39c12;
    }
    label {
    font-weight: bolder;
    }
    .form-group {
    margin: 5px 0px 15px 0px;
    }
    #prevLink {
    text-align: center;
    font-family: Arial;
    font-weight: 400;
    color: #013880;
    }
    view raw style.css hosted with ❤ by GitHub
  4. main.js
    function submitForm(){
    if (validateForm()) {
    if(confirm("Apakah anda sudah yakin?")){
    window.location.href = "./contents/success.html";
    }
    }
    }
    function validateForm() {
    if (document.forms["formMahasiswa"]["nama"].value == "") {
    alert("Nama Tidak Boleh Kosong");
    document.forms["formMahasiswa"]["nama"].focus();
    return false;
    }
    if (document.forms["formMahasiswa"]["nrp"].value == "") {
    alert("NRP Tidak Boleh Kosong");
    document.forms["formMahasiswa"]["nrp"].focus();
    return false;
    }
    else if (isNaN(document.forms["formMahasiswa"]["nrp"].value)) {
    alert("NRP Harus Berupa Angka");
    document.forms["formMahasiswa"]["nrp"].focus();
    return false;
    }
    if (document.forms["formMahasiswa"]["domisili"].value == "") {
    alert("Domisili Tidak Boleh Kosong");
    document.forms["formMahasiswa"]["domisili"].focus();
    return false;
    }
    if (document.forms["formMahasiswa"]["email"].value == "") {
    alert("Email Tidak Boleh Kosong");
    document.forms["formMahasiswa"]["email"].focus();
    return false;
    }
    if(document.forms["formMahasiswa"]["email"].value.indexOf("@") == -1){
    alert("Pastikan format email yang dimasukkan sudah benar.");
    document.forms["formMahasiswa"]["email"].focus();
    return false;
    }
    if(document.forms["formMahasiswa"]["email"].value.indexOf(".") == -1){
    alert("Pastikan format email yang dimasukkan sudah benar.");
    document.forms["formMahasiswa"]["email"].focus();
    return false;
    }
    if (document.forms["formMahasiswa"]["jurusan"].selectedIndex < 1) {
    alert("Anda Belum Memilih Jurusan.");
    document.forms["formMahasiswa"]["jurusan"].focus();
    return false;
    }
    if (document.forms["formMahasiswa"]["vaksin"].value < 1) {
    alert("Anda Belum Memilih Status Vaksinasi.");
    document.forms["formMahasiswa"]["vaksin"].focus();
    return false;
    }
    return true;
    }
    view raw main.js hosted with ❤ by GitHub
Sekian pengerjaan tugas yang telah saya lakukan. Mohon maaf apabila terdapat kesalahan atau kekurangan pada pekerjaan saya. Terima kasih atas perhatiannya.

Label

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 Pemrograman Web A

Profil & Portofolio Pribadi Nama    : Jonathan Leonardo Hasiholan Simanjuntak NRP      : 05111940000150 Kelas     : Pemrograman Web A 2021 Link Profil : Ardo Profile Link Repo : Profile Repository Pada tugas ini, saya membuat profil dan portofolio pribadi dengan memanfatkan tema yang disediakan di plaform Hugo (Static Site Generator)yaitu Hugo Profile v3 . Kemudian, saya hosting -kan resource yang berhasil di generate lewat Github Pages. Berikut ini adalah tampilan hasilnya,   Tahapan Pembuatan Profile Berikut adalah penjelasan singkat mengenai tahapan - tahapan yang saya lakukan untuk membuat halaman profil pribadi saya,  Pertama - tama, install Hugo terlebih dahulu. Panduan instalasinya bisa dilihat di Install Hugo . Setelah Hugo berhasil di-instal. Buka command promopt pada perangkat anda dan jalankan perintah : hugo version Jika perintah "hugo" sudah dikenali, maka proses instalasi hugo telah berhasil. Gambar 2.1 Hugo be...
Posting Komentar
Baca selengkapnya

Tugas 6 Pemrograman Web A

News Website Using Bootstrap Nama     : Jonathan Leonardo Hasiholan Simanjuntak NRP       : 05111940000150 Kelas      : Pemrograman Web A 2021 Pada pertemuan ketujuh kelas PWEB A, kami diberikan tugas untuk mengembangkan sebuah website redaksi berita dengan memanfaatkan penggunaan Bootstrap. Setelah website berhasil di susun secara lokal, website yang kita susun tersebut juga akan di  hosting -kan. Pada tugas ini,  hosting  website dilakukan menggunakan Github Pages. Websitenya sendiri dapat diakses lewat link  ini . Berikut adalah tampilan dari hasil websitenya : Tampilan Halaman Utama Website Tampilan Halaman Contact Us Tampilan Pop Up Login Form   Source Code Untuk source code dari webnya, terdapat empat file source code yang saya gunakan untuk menyusun website tersebut. Dua diantaranya adalah index.html dan contact.html. Pada halaman index.html terdapat list berita yang tersusun kedalam 2 buah image...
Posting Komentar
Baca selengkapnya

Tugas 3 Pemrograman Web A

Warung Tegal HTML 5 Nama     : Jonathan Leonardo Hasiholan Simanjuntak NRP       : 05111940000150 Kelas      : Pemrograman Web A 2021 Pada pertemuan ketiga kelas PWEB A, kami diberikan tugas untuk mengembangkan sebuah website rumah makan "Warung Tegal" dengan memanfaatkan HTML5. Kami juga diminta untuk menambahkan image carousel  dan video player  pada website yang akan kami kembangkan. Adapun hasilnya dapat di akses lewat  Warung Tegal Website . Berikut adalah tampilan dari hasilnya : Tampilan Beranda Tampilan Daftar Masakan Tampilan Katering Tampilan Tentang Tampilan Kontak Source Code Untuk source code dari webnya, masing - masing halaman tampilan source code HTML-nya saya pisahkan. Di dalam setiap file HTML, terdapat masing - masing styling yang digunakan untuk halaman tersebut. Berikut source code dari kelima tampilan diatas : Halaman Beranda Halaman Daftar Masakan Halaman Katering Halaman Tentang Halaman Ko...
Posting Komentar
Baca selengkapnya