Anda di halaman 1dari 13

LAPORAN PRAKTIKUM

PEMROGRAMAN WEB

MODUL 4

Nama : Fitra Yanwar Pamungkas

NIM : 20200910130

Kelas : SINFC 2020 05 (K)

SISTEM INFORMASI

FAKULTAS ILMU

KOMPUTER UNIVERSITAS

KUNINGAN 2021
A. Pretest

1. Jelaskan Keuntungan menggunakan Jquery!


2. Apakah ada kaitannya antara javascript dan Jquery? Jelaskan!

Jawaban

1. Mempermudah akses dan manipulasi elemen tertentu


pada dokumen.
mempermudah modifikasi/perubahantampilan halaman web.

2. Query adalah sebuah komponen/library/framework bersifat


opensource yang dibuat dengan menggunakan pemograman
javascrip dengan tujuan memudahkan seorang
pengembangan website dalam menggunakan fungsi dan code
yang sedik agak rumir. dengan demikian seorang pengembang
website bisa leluasa untuk melakukan
kontrol,manipulasi,automasi halaman web dengan cepat dan
mudah.
B. PRAKTIKUM 4.1
Program

Hasil
PRAKTIKUM 4.2

HTML

Hasil
PRAKTIKUM 4.3

Hasil
PRAKTIKUM 1.4

Program
Hasil
C. Post test

Modifikasi program di pratikum 3 dan 4 sehingga menampilkan


halaman web seperti ini

Program

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Membuat Animasi Form Dengan jQuery</title>

<link rel="stylesheet" href="jQuery/jquery-ui-


1.12.1.custom/jquery-ui.js" />
<script src="jQuery/jquery-1.8.3.js"></script>
<script src="jQuery/jquery-ui-1.12.1.custom/jquery-
ui.js"></script>
<link rel="stylesheet" href="prak4_4.css">
<script>
$(function(){
$('#txtDate').datepicker();
});
</script>
</head>
<body>
<div class="kotak">
<h1>Form Biodata Mahasiswa<br></h1>
<form class="form">
<input type="text" id="nim" placeholder="Masukan
nim.." name="nim" autocapitalize="off"><br><br>
<input type="text" id="nama" placeholder="Masukan
nama.." name="nama" autocapitalize="off"><br><br>
<input type="text" id="txtDate"
placeholder="Masukan Tanggal lahir.." name="txtDate"
autocapitalize="off"><br><br>
<input type="text" id="alamat"
placeholder="Masukan alamat.." name="alamat"
autocapitalize="off"><br><br>
</div>
<script>
$(document).ready(function(){
$("#nim").keyup(function(){
$("#nama").slideDown();
}) ;

$("#nama").keyup(function(){
$("#txtDate").fadeIn();
}) ;

$("#txtDate").keyup(function(){
$("#alamat").fadeIn();
});

});

</script>

</body>
</html>
Hasil
D. TUGAS

Buatlah Program Untuk Menampilkan Fitur Lainnya yamg Ada di jquery

Program
Hasil

Anda mungkin juga menyukai