Tugas Pemrograman Web - D
Jonathan Timothy Siregar
0511194000120
Hai, Saya Jonathan Timothy Siregar mahasiswa Teknik Informatika ITS angkatan 2019. Pada mata kuliah Pemrograman Web ini diberikan sebuah tugas untuk membangun sebuah situs berisikan Jquery dari suatu Form pengisian judul buku. Ada juga pembuatan form vaksinasi seperti tugas sebelumnya.
Pada HTML yang saya buat, terdapat file html yang telah berisikan metode Jquery, serta file gambar bertipe jpg. Kombinasi dari keseluruhan file ini akan dilampirkan di bawah.
Berikut Lampiran dari pengerjaan web saya :
https://jquery-jonathants.netlify.app/
https://js-jonathants.netlify.app/
HTML Pengisian buku:
<!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>JQUERY PWEB</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body style="background-image: url('bg.jpg');background-repeat: no-repeat; background-size: cover;">
<div class="container" style="background-color: rgba(255, 196, 0, 0.719); padding: 20px; margin-top: 400px; width: 1000px;">
<h1 style="text-align: center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; color: rgb(138, 78, 0);">
<strong>Masukkan Buku</strong></h1>
<form autocomplete="off" name="form">
<div>
<p style="font-weight: 400px;">Judul Buku : </p>
<input type="text" id="new_book" name="new_book" class="form-control" />
</div>
<br>
<div>
<label class="mt-3">Buku Terdaftar :</label>
<select id="list">
<option value="">Daftar Buku</option>
</select>
</div>
<div class="mt-5">
<button class="btn btn-info" type="button" id="button_add" style="color: azure;">Submit</button>
</div>
</form>
</div>
<script>
$(document).ready(function () {
$("#button_add").click(function () {
var inserted = $("#new_book").val();
if (inserted == "") {
return;
} else {
$("#list").append(new Option(inserted, inserted));
}
});
});
</script>
</body>
</html>
HTML Form Validasi :
<!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 JS PWEB</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="main.js"></script>
</head>
<style>
</style>
<body style="background-image: url('pic1.jpg');">
<br>
<div class="container" style="background-color: rgba(255, 255, 255, 0.76);">
</br>
<h2 style="text-align: center;">FORMULIR VALIDASI VAKSINASI</h2>
<form name="formValidasi" onsubmit="return validateForm()" class="pt-2">
<div class="form-group">
<label class="font-weight-bold">Nama</label>
<input type="text" name="nama" placeholder="Nama Lengkap" class="form-control" minlength="5" maxlength="50">
</div>
<div class="form-group">
<label class="font-weight-bold">NRP</label>
<input type="text" name="nrp" placeholder="NRP" class="form-control" minlength="8"
maxlength="16">
</div>
<div class="form-group">
<label class="font-weight-bold">Email</label>
<input type="email" name="email" placeholder="Alamat Email" class="form-control">
</div>
<div class="form-group">
<label class="font-weight-bold">Asal</label>
<input type="text" name="domisili" placeholder="Kota Domisili" class="form-control">
</div>
<div class="form-group">
<label class="font-weight-bold">Jenis Kelamin</label>
<select name="jk" class="form-control">
<option value="0">Pilih Jenis Kelamin</option>
<option value="1">Perempuan</option>
<option value="2">Laki-laki</option>
</select>
</div>
<div class="form-group">
<label class="font-weight-bold">Status Vaksin</label>
<select name="status_vaksin" class="form-control">
<option value="0">Pilih Status Vaksinasi</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>
<button type="submit" class="btn btn-secondary" style="margin-top: 10px; text-align: right;">Submit</button>
<br><br>
</form>
</div>
<footer>
<div class="text-center" style="margin-top: 35px;">
© JS PWEB 2021
</div>
</footer>
</body>
</html>
Sekian Dokumentasi Jquery saya, terima kasih
Comments
Post a Comment