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 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

Tugas 7 PWEB D

jquery form validasi   Pada kesempatan kali ini saya akan membagikan artikel mengenai pembuatan form validasi dan select dengan menggunakan jquey.   Link web :  https://ianm27.github.io/book-list/     Link web :  https://ianm27.github.io/validatorForm/ Berikut adal kode nya berturut - turut :  <! 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.1/dist/css/bootstrap.min.css" rel = "stylesheet" /> < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" ></ script > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min....
Posting Komentar
Baca selengkapnya

Tugas 3 PWEB D

Web Warung Tegal Pada kesempatan kali ini saya akan membagikan bagaimana membuat website untuk mempromosikan sebuah produk sehingga calon pembeli dapat melihat dan memesan produk kita tanpa harus datang ke lokasi. Pada kasus ini saya membuat website Warung Tegal Indonesia, mengapa saya memlilih Warteg itu karena Warteg sudah menjadi bagian dari hampir seluruh masyarakat Indonesia. fitur yang ada diwebsite ini antara lain pengunjung dapat : Melihat daftar masakan Melakukan pesan katering makanan Melihat daftar makanan populer Melihat kontak   Melihat video channel youtube warteg  Berikut adalah  tampilan websitenya   Website ini sudah bisa anda akses melalui link berikut : klik disini Namun karena keterbatasan waktu dalam pembuatan website ini fitur yang sudah bisa dinikmati oleh pengunjung masih beberapa saja, diantaranya adalah fitur melihat daftar masakan, mengecek kontak dan melihat video youtube warteg Indonesia. dalam pembuatan website ini hanya menggunakan...
Posting Komentar
Baca selengkapnya