TUGAS PWEB-D MINGGU KE-5 (MEMBUAT FORM VAKSINASI DENGAN VALIDASI JAVASCRIPT)
TUGAS PWEB-D MINGGU KE-5 (MEMBUAT FORM VAKSINASI DENGAN VALIDASI JAVASCRIPT
Pada minggu kelima pemrograman web kelas D ditugaskan membuat form vaksinasi dengan validasi form menggunakan bahasa java script. Disini saya memiliki 5 file dan 1 folder.
Link Repository : https://github.com/bagusistighfar86/bagusistighfar86.github.io/tree/main/pweb-d/pertemuan5
Link Web : https://bagusistighfar86.github.io/pweb-d/pertemuan5/
1. index.html
Menyimpan code main dari website ini
<!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 Vaksin Mahasiswa ITS</title>
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<script src="main.js"></script>
</head>
<body>
<div class="header">
<img src="gambar/Logo ITS.png" alt="Logo ITS" class="logo">
<p>Institut Teknologi Sepuluh Nopember</p>
</div>
<div class="container">
<div class="form">
<form id="formMHS" action="" onsubmit="return submitForm()">
<div class="side-form cf">
<!-- <img src="gambar/side-box-form.png" class="side-form"> -->
</div>
<div class="box-form cf">
<h1>Form Validasi Vaksinasi Mahasiswa </h1>
<table cellspacing="20">
<tr>
<td class="isi-form"><label>Nama</label></td>
<td class="isi-form"><input type="text" name="nama" placeholder="Nama Lengkap Mahasiswa" minlength="3" maxlength="40"></td>
</tr>
<tr>
<td class="isi-form"><label>NRP</label></td>
<td class="isi-form"><input type="text" name="nrp" placeholder="NRP Mahasiswa" minlength="8" maxlength="16"></td>
</tr>
<tr>
<td class="isi-form"><label>Alamat Surabaya</label></td>
<td class="isi-form"><input type="text" name="alamat" placeholder="Alamat Mahasiswa" minlength="3"></td>
</tr>
<tr>
<td class="isi-form"><label>Email</label></td>
<td class="isi-form"><input type="email" name="email" placeholder="Email Aktif Mahasiswa"></td>
</tr>
<tr>
<td class="isi-form"><label>Jurusan</label></td>
<td class="isi-form">
<select class="jurusan" name="jurusan">
<option value="0">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>
</td>
</tr>
<tr>
<td class="isi-form"><label>Status Vaksinasi</label><br></td>
<td class="isi-form">
<select class="status" name="statusVaksin">
<option value="0">Pilih Status Vaksinasi</option>
<option value="1">Belum Vaksin</option>
<option value="2">Vaksin Dosis 1</option>
<option value="3">Vaksin Dosis 2</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td class="td-btn"><button type="submit" class="btn" >Submit</button></td>
</tr>
</table>
</div>
</form>
</div>
</div>
<div class="footer">
<p>Copyright 2021 © Institut Teknologi Sepuluh Nopember. All rights reserved</p>
</div>
</body>
</html>
2. main.js
Menyimpan code javascript yang berfungsi untuk mengecek atau memvalidasi isi dari form apakah sudah valid atau tidak.
function submitForm(){
if (validateForm()) {
if(confirm("Apakah anda sudah yakin?")){
window.location.href = "index.html";
}
}
}
function validateForm() {
if (document.forms["formMHS"]["nama"].value == "") {
alert("Nama Tidak Boleh Kosong");
document.forms["formMHS"]["nama"].focus();
return false;
}
if (document.forms["formMHS"]["nrp"].value == "") {
alert("NRP Tidak Boleh Kosong");
document.forms["formMHS"]["nrp"].focus();
return false;
}
else if (isNaN(document.forms["formMHS"]["nrp"].value)) {
alert("NRP Harus Berupa Angka");
document.forms["formMHS"]["nrp"].focus();
return false;
}
if (document.forms["formMHS"]["alamat"].value == "") {
alert("Alamat Tidak Boleh Kosong");
document.forms["formMHS"]["alamat"].focus();
return false;
}
if (document.forms["formMHS"]["email"].value == "") {
alert("Email Tidak Boleh Kosong");
document.forms["formMHS"]["email"].focus();
return false;
}
if(document.forms["formMHS"]["email"].value.indexOf("@") == -1){
alert("Pastikan format email yang dimasukkan sudah benar.");
document.forms["formMHS"]["email"].focus();
return false;
}
if(document.forms["formMHS"]["email"].value.indexOf(".") == -1){
alert("Pastikan format email yang dimasukkan sudah benar.");
document.forms["formMHS"]["email"].focus();
return false;
}
if (document.forms["formMHS"]["jurusan"].selectedIndex < 1) {
alert("Anda Belum Memilih Jurusan.");
document.forms["formMHS"]["jurusan"].focus();
return false;
}
if (document.forms["formMHS"]["statusVaksin"].value < 1) {
alert("Anda Belum Memilih Status Vaksinasi.");
document.forms["formMHS"]["statusVaksin"].focus();
return false;
}
return true;
}
3. style.css
Menyimpan code style berupa css untuk menambah hiasan pada tampilan HTML
@import url(reset.css);
@import url(clearfix.css);
* {box-sizing: border-box;}
body{
background-color: #F6F6F6;
}
.header{
position: fixed;
height: 75px;
top: 0;
left: 0;
right: 0;
background: rgb(115,190,222);
background: linear-gradient(132deg, rgba(115,190,222,1) 0%, rgba(50,45,125,1) 50%, rgba(0,0,0,1) 100%);
z-index: 9999;
}
.header img{
width:60px;
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}
.header p{
position: absolute;
top: 50%;
left: 80px;
transform: translateY(-50%);
color: white;
font-family: 'Roboto';
font-size: 20px;
font-weight: bold;
}
.container {
margin-top: 100px;
}
.side-form{
background-image: url(gambar/side-box-form.png);
background-size: 650px;
background-repeat: no-repeat;
background-position-x: -126px;
background-position-y: -46px;
float: left;
height: 550px;
width: 400px;
box-shadow: 90px 30px 20px -30px black;
}
.box-form{
float: left;
background-color: white;
padding-top: 30px;
padding-bottom: 50px;
padding-left: 100px;
padding-right: 100px;
height: 550px;
border-radius: 0 25px 25px 0;
box-shadow: 30px 30px 20px -30px black;
}
.form{
position: relative;
/* background-color: salmon; */
}
form{
margin: auto;
/* background-color: salmon; */
font-family: 'Roboto';
height: 500px;
width: fit-content;
}
form h1{
font-family: 'Roboto';
font-size: 28px;
font-weight: bold;
text-align: center;
color: black;
}
table,th,td{
font-size: 15px;
margin: 25px auto;
/* border: 1px solid salmon; */
}
td{
padding-top: 20px;
}
td label{
padding-right: 25px;
}
input{
padding-top: 10px;
padding-bottom: 10px;
padding-right: 50px;
padding-left: 15px;
background-color: #F5F8F9;
}
input:focus , select:focus{
background-color: white;
}
input.alamat{
padding-bottom: 75px;
}
select{
padding-top: 10px;
padding-bottom: 10px;
background-color: #F5F8F9;
}
select.jurusan{
padding-right: 5px;
padding-left: 15px;
}
select.status{
padding-right: 65px;
padding-left: 15px;
}
.footer{
position: fixed;
height: 50px;
bottom: 0;
left: 0;
right: 0;
background: rgb(115,190,222);
background: linear-gradient(132deg, rgba(115,190,222,1) 0%, rgba(50,45,125,1) 50%, rgba(0,0,0,1) 100%);
z-index: 9999;
}
.footer p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: 'Roboto';
font-size: 12px;
}
input, select{
border: none;
border-radius: 10px;
box-shadow: 2px 2px 5px -2px black;
}
.btn {
background-color: #24a0ed;
border: none;
border-radius: 5px;
color: white;
padding: 8px 16px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
/* opacity: 1; */
transition: 0.3s;
}
.btn:hover {opacity: 0.6}
.td-btn{
/* display:block;
margin-left: 64%; */
text-align: right;
}
4. reset.css
Menyimpan code untuk reset setting style html agar lebih mudah dalam memodifikasi css. Code ini saya dapatkan dari https://meyerweb.com/eric/tools/css/reset/. Dan informasi ini saya dapatkan dari youtube Sandhika Galih Web Programming UNPAS
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
5. clearfix.css
Untuk menyimpan code clear yang saya dapatkan dari http://nicolasgallagher.com/micro-clearfix-hack/
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
6. Folder gambar untuk menyimpan resource gambar
Komentar
Posting Komentar