Langsung ke konten utama

Tugas 5 PWEB D

 

Formulir Vaksinasi

    Pada kesempatan kali ini saya akan membagikan artikel mengenai pembuatan form vaksinasi dengan mengimplementasikan javascript untuk membuat validator dari setiap inputan dari user.

formulir ini dibuat menggunakan bahasa pemrograman html dan css dan js. berikut adalah tampilan formulirnya.


 

Formulir

Berikut adalah link formulirnya : https://ianm27.github.io/formvaksinasi/

Source Code

Berikut adalah source code dari formulir vaksinasi

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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Form Vaksinasi</title>
</head>
<body>
<div class="container" style="max-width: 50 rem;">
<table>
<tr>
<td class="photo" rowspan="5">
<img src="its.png" alt="logo" width="150" height= "150">
</td>
<th class="judul"><b> <font size="6" >Formulir Vaksinasi Mahasiswa</font></b>
<li class="institut" <font size= "2">
Institut Teknologi Sepuluh Nopember Surabaya</font>
</th>
</tr>
</table>
<main>
<form name="form" onsubmit="return validate()" class="pt-2" action="" >
<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="NRP Mahasiswa" class="form-control" minlength="10" maxlength="14" >
</div>
<div class="form-group">
<label class="font-weight-bold">Email</label>
<input type="email" name="email" placeholder="Email Aktif" class="form-control">
</div>
<div class="form-group">
<label class="font-weight-bold">Domisili</label>
<input type="text" name="domisili" placeholder="Kota / Kabupaten, Provinsi" class="form-control">
</div>
<div class="form-group">
<label class="font-weight-bold">Alamat Domisili</label>
<textarea class="form-control" name="alamat" rows="3"></textarea>
</div>

<div class="form-group">
<label class="font-weight-bold">Jurusan</label>
<select name="listjurusan" class="form-select">
<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>
</select>
</div>
<div class="form-group">
<label class="font-weight-bold">Apakah anda sudah vaksin?</label>
<select onchange="cekStatusVaksin()" name="status_vaksin" class="form-select">
<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>
<div id="!Vacc" class="form-group" style="display: none;">
<label class="font-weight-bold">Apakah anda penyintas ?</label>
<select onchange="cekPenyintas()" name="status_penyintas" class="form-select">
<option selected>- Pilih Status -</option>
<option value="1">Penyintas</option>
<option value="2">Bukan penyintas</option>
</select>
</div>
<div id="Vacc-1" class="form-group" style="display: none;" >
<label for="formFile" name="sertifikat1" class="form-label">Sertfikat vaksin 1</label>
<input class="form-control" type="file" id="formFile1" onchange="validateFileupload(this.value)">
</div>
<div id="Vacc-2" class="form-group" style="display: none;">
<label for="formFile" name="sertifikat2" class="form-label">Sertfikat vaksin 2</label>
<input class="form-control" type="file" id="formFile2">
</div>
<div id="Vacc" class="form-group" style="display: none;">
<label for="">Kebersediaan kuliah tatap muka :</label>
<div class="form-check">
<input type="radio" class="form-check-input" id="status_ttm1" value="ya" name="radio-stacked">
<label class="form-check-label" for="status_ttm1">Bersedia</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="status_ttm2" name="radio-stacked" value="tidak">
<label class="form-check-label" for="status_ttm1">Tidak bersedia</label>
</div>
</div>
<div id="!isPenyintas" class="form-group" style="display: none;">
<label class="font-weight-bold">Alasan belum vaksin</label>
<textarea class="form-control" name="alasan" rows="3"></textarea>
</div>
<button type="button" class="btn btn-primary" onclick="submitForm()" style="margin-top: 20px;">Submit</button>
</form>
</div>
</main>
<footer>
<div class="font-weight-light text-center p-4">
&copy PWEB D 2021
</div>
</footer>
</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.min.js" integrity="sha384-PsUw7Xwds7x08Ew3exXhqzbhuEYmA2xnwc8BuD6SEr+UmEHlX8/MCltYEodzWA4u" crossorigin="anonymous"></script>
<script src="main.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>


 

CSS

@import url('https://fonts.googleapis.com/css2?family=Helvetica:wght@300;400;500;600;700;800;900&display=swap');
body{
font-family: 'Helvetica', sans-serif;
background-color: #f0f2f5;
}
header{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
overflow: hidden;
height: 68px;
margin: 0 auto;
background-color: #0A4080;
width: 100%;
}
header .logo{
width:50%;
margin-left: 150px;
vertical-align: middle;
}

header nav ul{
margin: 0 -3px; /*make parallel list with image*/
padding: 0px;
display: inline-block;
list-style: none;
vertical-align: middle;
position: relative;
}
header nav li{
/* position: relative; */
margin-right: 150px;
}

header nav li a {
text-decoration: none;
font-size: 15px;
font-weight: 400;
color: #ffff;
}

header nav li a:hover{
color: #0A4080;
}

.container{
align-items: center;
justify-content: center;
background-color: #ffff;
border-radius: 20px;
height: auto;
width: 50%;
margin-top: 30px ;
margin-bottom: 10px;
padding: 30px 30px 50px 30px;
}

.judul {
font-weight: 600;
color: #0A4080;
text-align: left;
}

.form-group{
margin:15px;
}
.input-group{
margin:15px;
}
.btn-primary{
background-color: #0A4080 !important;
font-weight: 500;
margin-top: 10px;
margin-left: auto;
margin-right: 0;
display: block;
}

footer {
height: auto;
width: 100%;
}

  

Java Script

function submitForm(){
if (validate()) {
if(confirm("Apakah anda sudah yakin dengan data tersebut?")){
window.location.href = "./contents/success.html";
}
}
}

function validate() {
if( document.form.nama.value == "" ) {
alert ( "Silahkan isi data anda dengan benar.");
document.form.nama.focus() ;
return false;
}

if(document.form.nrp){
if(document.form.nrp.value == ""){
alert("Silahkan isi nrp anda!");
document.form.nrp.focus();
return false;
}
if(document.form.nrp.value != "" && !/^[0-9]+$/.test(document.form.nrp.value)){
alert("NRP harus angka");
document.form.nrp.focus() ;
return false;
}
}
if( document.form.email.value == "" ) {
alert( "Silahkan isi email anda!" );
document.form.email.focus() ;
return false;
}

if( document.form.domisili.value == "" ) {
alert( "Silahkan isi domisili anda!" );
document.form.domisili.focus() ;
return false;
}

if( document.form.alamat.value == "" ) {
alert( "Silahkan isi alamat anda!" );
document.form.alamat.focus() ;
return false;
}

if( document.form.jurusan.selectedIndex < 1 ) {
alert( "Silahkan pilih asal jurusan anda!" );
document.form.jurusan.focus() ;
return false;
}

if( document.form.status_vaksin.selectedIndex < 1 ) {
alert( "Silahkan pilih status vaksin anda!" );
document.form.status_vaksin.focus() ;
return false;
}

if( document.form.status_vaksin.value == "1" && document.form.status_penyintas.selectedIndex < 1) {
alert( "Silahkan pilih status penyintas anda!" );
document.form.status_penyintas.focus() ;
return false;
}

if( document.form.status_vaksin.value == "1" && document.form.status_penyintas.value == "2" && trimfield(document.form.alasan.value) == '') {
alert( "Silahkan isi alasan anda!" );
document.form.alasan.focus() ;
return false;
}

if((document.form.status_vaksin.value == "2" || document.form.status_vaksin.value == "3") && trimfield(document.getElementById('formFile1').value) == '') {
alert( "Upload file sertifikat vaksin anda yang pertama!" );
document.form.status_vaksin.focus() ;
return false;
}
if( document.form.status_vaksin.value == "3" && trimfield(document.getElementById('formFile2').value) == '') {
alert( "Upload file sertifikat vaksin anda yang kedua!" );
document.form.status_vaksin.focus() ;
return false;
}

// belum berhasil
if((document.form.status_vaksin.value == "2" || document.form.status_vaksin.value == "3") && (document.getElementById('status_ttm1').value != "ya" && document.getElementById('status_ttm2').value != "tidak")) {
alert( "Silahkan pilih kebersediaan kuliah tatap muka !" );
return false;
}
//

Swal.fire({
title: 'Apakah anda yakin?',
text: "Anda tidak dapat merubah setelah submit!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, submit!'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: 'Berhasil!',
text: 'Data anda berhasil disimpan',
icon: 'success',
confirmButtonColor: '#3085d6'
});
document.form.reset();
document.getElementById('!isVaksin').style.display = 'none';
document.getElementById('isVaksin').style.display = 'none';
document.getElementById('isVaksin-1').style.display = 'none';
document.getElementById('isVaksin-2').style.display = 'none';
document.getElementById('!isPenyintas').style.display = 'none';
}
});
return(false);
}

function cekStatusVaksin(){
if (document.form.status_vaksin.value == "1") {
document.getElementById('!isVaksin').style.display = 'block';
document.getElementById('isVaksin').style.display = 'none';
document.getElementById('isVaksin-1').style.display = 'none';
document.getElementById('isVaksin-2').style.display = 'none';
}
else if (document.form.status_vaksin.value == "2") {
document.getElementById('!isVaksin').style.display = 'none';
document.getElementById('isVaksin').style.display = 'block';
document.getElementById('isVaksin-1').style.display = 'block';
document.getElementById('!isPenyintas').style.display = 'none';
}
else if (document.form.status_vaksin.value == "3") {
document.getElementById('!isVaksin').style.display = 'none';
document.getElementById('isVaksin').style.display = 'block';
document.getElementById('isVaksin-1').style.display = 'block';
document.getElementById('isVaksin-2').style.display = 'block';
document.getElementById('!isPenyintas').style.display = 'none';
}
}

function validateFileupload(fileName){
var allowed_extensions = new Array("jpg","png","pdf");
var file_extension = fileName.split('.').pop().toLowerCase(); // split function will split the filename by dot(.), and pop function will pop the last element from the array which will give you the extension as well. If there will be no extension then it will return the filename.

for(var i = 0; i <= allowed_extensions.length; i++)
{
if(allowed_extensions[i]==file_extension)
{
return true; // valid file extension
}
}
alert( "File sertifikat harus jpg, png, atau pdf !" );
return false;
}

function cekPenyintas(){
if(document.form.status_vaksin.value == "1"){
if(document.form.status_penyintas.value == "2"){
document.getElementById('!isPenyintas').style.display = 'block';
}
else{
document.getElementById('!isPenyintas').style.display = 'none';
}
}
}

function trimfield(str)
{
return str.replace(/^\s+|\s+$/g,'');
}

 

Sekian artikel pada kesempatan kali sampai jumpa di artikel selanjutnya, terimakasih. 

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 6 PWEB D

Login page dan Contact Me      Pada kesempatan kali ini saya akan membagikan artikel mengenai pembuatan login page dan contact me dengan menggunakan bantuan bootsrap.      login page dan contact me menggunakan bahasa pemrograman html dan css dan js. berikut adalah tampilannya.                       Login page & Contact Me Berikut adalah link aksesnya : https://ianm27.github.io/login-contact_me/ Source Code Berikut adalah source code dari login page dan contact me HTML <! DOCTYPE html > < html > < head > < meta charset = "utf-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1" /> < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> < link rel = "stylesheet" href = "https://unpkg.com/aos@2.3.1/dist/aos.css" /> < link rel = "stylesheet" hr...
Posting Komentar
Baca selengkapnya

Tugas 5 Pemrograman Berorientasi Objek (A)

World of Zuul Pada kesempatan kali ini saya akan membahas tentang gam sederhana Yaitu world of Zuul. Game ini merupakan game yang bergenre adventure dimana player dapat berjalan ke barat, utara, timur, selatan dengan menggunakan perintah (command) yang ada pada game ini untuk mendapatkan jalan keluar. Game ini didesain berdasarkan implementasi dari Designing Classes. Terdapat 5 class yang nantinya akan kita gunakan untuk membangun game ini yaitu :       1. Game      2. Command      3. CommandWords      4. Parser      5. Room  Implementasi Class Berikut adalah source code dari kelas Game : Berikut adalah source code dari kelas Command  Berikut adalah source code dari kelas CommandWord Berikut adalah source code dari kelas Room Berikut adalah source code dari kelas Parser Cara Menjalankan Game Pertama kalian klik kanan pada class Game kemudian pilih new Game() Beri nama kemudian klik ok, misal kita b...
Posting Komentar
Baca selengkapnya

TUGAS 9 PWEB D

  PHP adalah singkatan dari Hypertext Preprocessor , yaitu bahasa pemrograman yang sebenarnya mirip dengan JavaScript dan Python . Perbedaannya adalah, PHP sering kali digunakan untuk komunikasi sisi server, sedangkan JavaScript bisa digunakan untuk frontend dan backend. Sementara itu, Python hanya untuk sisi server ( backend ).  Berikut adalah source code : index.html <! DOCTYPE html > < html lang = "en" >< head > < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < title >Pendaftaran SMAN 1 Ponorogo</ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3...
Posting Komentar
Baca selengkapnya