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

FP Pemrograman Berorientasi Objek A

Game Java Tebak Gambar Kami dari kelompok FP PBO kelas A yang beranggotakan : Junaedi Akbar  05111940000041 Ifanu Antoni 05111940000064 Pada kesempatan kali ini kami akan menjelaskan mengenai game Tebak Gambar yang telah kita buat menggunakan permrograman Java. Dalam game ini nantinya pengguna akan diberi 2 pasang gambar di setiap stagenya lalu pengguna harus menebak kata apa yang sesuai dengan gambar yang telah diperlihatkan. Agar lanjut ke stage berikutnya pengguna harus menebak dengan tepat kata apa yang sesuai dengan jawaban.  Untuk mengakses game Tebak Gambar ini bisa mengunjungi : http://bit.ly/3bsyGqw Diagram class Dalam pembuatan, Game ini menggunakan 3 jenis class yaitu : Class Start : start.java berfungsi untuk menampilkan halaman awal, yang nantinya user diminta untuk menginputkan nama pemain dan sebuah tombol untuk melanjutkan ke pertanyaan pertama Class Soal: gambar1.java,gambar2.java dst.... berisi tampilan 2 buah gambar dan sebuah kolom input untuk mengisikan jawaban. Da
Posting Komentar
Baca selengkapnya

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" href =
Posting Komentar
Baca selengkapnya