REQUIREMENT

1. Web Browser (Google Chrome/Chromium (Ms Edge, Opera) atau Firefox)

2. Source Code Editor (disarankan Visual Studio Code)

PENJELASAN

Form
Form pada HTML merupakan tag yang penting dalam pembuatan aplikasi berbasis
website. Form HTML memiliki beberapa elemen contohnya textbox, text area, radio button,
checkbox, drop down list, button dan masih banyak lagi. Biasanya juga Form HTML
digunakan untuk mengumpulkan data dari pengunjung suatu website, seperti login/register,
form kontak, form registrasi, dan masih banyak lagi.

Form merupakan satu-satunya cara agar pengembangan website mendapatkan

informasi dari pengunjung. Berikut contoh perintah yang terdapat di dalam form:
1 <form>
2 <!-- Elemen-elemen input -->
3 </form>
Form juga terdapat 2 buah atribut yang biasa disebut method dan juga action. Ada 2
macam method yang berfungsi sebagai pengiriman data pada server, yaitu :

1. GET: berfungsi untuk menampilkan data/nilai pada URL, kemudian akan ditampung
oleh action.

2. POST: berfungsi untuk mengirimkan data/nilai langsung ke action untuk ditampung

tanpa menampilkan pada URL.
 2.

Form juga dapat memiliki elemen yang paling penting, yaitu Elemen Input. Elemen
input memiliki fungsi untuk memasukkan data pengunjung website yang nantinya akan di
simpan atau di kirimkan ke server. Berikut ini beberapa elemen dari input:
• Text Field: Elemen yang digunakan untuk memasukkan text dalam satu baris.
1 <input type="text" />
• Radio Button: Elemen yang berfungsi untuk memilih satu pilihan, misalnya male/female.
1 <input type="radio" />
• Text Area: Elemen yang digunakan untuk memasukkan text lebih dari satu baris.
Dalam elemen ini terdapat beberapa atribut yaitu name, cols, dan rows.
name : merupakan nama dari variable rows :
panjang baris yang ada dalam text area cols :

1 <textarea cols="20" rows="20"></textarea>

tinggi kotak dari text area
• Check Box: Elemen yang digunakan untuk memilih lebih dari satu pilihan.
1 <input type="checkbox" />
• Date & time picker: Kita bisa menambahkan input box untuk memilih tanggal & waktu.
1 <input type="date" />
2 <input type="time" />
3 <input type="datetime-local" />
• Select List: Elemen yang dapat menampilkan daftar pilihan dalam bentuk dropdown list.
1 <select>
2 <option value="Traveling">Traveling</option>
3 <option value="Bersepeda">Bersepeda</option>
4 <option value="Berenang">Berenang</option>
5 <option value="Kuliner">Kuliner</option>
6 </select>
• Submit Button: Elemen button yang berfungsi untuk mengirimkan data dari website ke
server. Bisa menggunakan <input> atau <button>. server. Bisa menggunakan <input>
atau
1 <input type="submit" />
2 <button type="submit">Submit</button>
<button>.

• Reset Button: Elemen button yang berfungsi untuk mereset form. Bisa menggunakan
<input> atau <button>.
1 <input type="reset" />
2 <button type="reset">Reset</button>
 2
JavaScript
JavaScript adalah bahasa pemrograman web yang digunakan secara client-side.
Clientside programming language adalah jenis bahasa pemrograman di mana pemrosesannya
terjadi di sisi client untuk membuat halaman yang lebih interaktif pada web browser.
Misalnya, saat menjelajah internet dan melihat efek carousel pada gambar, menu naik-turun,
klik untuk menampilkan, atau warna dari elemen yang berubah secara dinamis dihalaman
web, maka anda telah melihat efek dari JavaScript. Untuk menjalankan JavaScript, kita
memerlukan sebuah aplikasi text editor dan juga web browser.

JavaScript memiliki fitur loosely typed yaitu tidak perlu mendefinisikan tipe dari
variabel, misal: int, string, dll; semua variabel didefinisikan dengan let, const dan var,
meskipun sekarang var tidak direkomendasikan untuk digunakan lagi pada JavaScript modern
karena perilaku yang ambigu/dapat menyebabkan bug. JavaScript juga bersifat case sensitive
dan sequensial jadi kode akan dibaca dari atas ke bawah serta berorientasi objek.

Sama seperti CSS, JavaScript juga memiliki cara penempatan kode pada HTML yaitu
secara internal ataupun external.
 2.

Penggunaan Variabel pada JavaScript

Variabel dalam JavaScript tidak memerlukan definisi type seperti int, char, string, dll.
Untuk mendeklarasikan variabel pada JavaScript, anda hanya perlu menuliskan let/const yang
diikuti nama variabel.

Pengambilan Elemen pada JavaScript

Pengambilan elemen pada JavaScript mengacu pada proses mendapatkan atau memanipulasi
elemen-elemen dalam halaman web menggunakan JavaScript. Berikut adalah beberapa
metode umum untuk mengambil elemen dalam JavaScript:

getElementById
Fungsi dari getElementById adalah mengambil elemen dengan id tertentu atau
secara spesifik dalam halaman HTML.
 getElementsByTagName
Fungsi dari getElementByTagName adalah mengambil elemen dengan tag
halaman HTML. Jika suatu tag memiliki lebih dari 1 elemen maka hasilnya berupa
array.

getElementsByClassName
Fungsi dari getElementsByClassName adalah untuk mengambil semua elemen
dalam dokumen HTML yang memiliki kelas CSS tertentu, dan mengembalikannya
dalam bentuk NodeList. NodeList adalah objek yang mirip dengan array dan berisi
kumpulan elemen HTML yang cocok dengan kelas CSS yang diberikan.

querySelectorAll
 2.

Fungsi dari querySelectorAll adalah untuk mengambil dan mengembalikan

semua elemen dalam dokumen HTML yang cocok dengan selektor CSS tertentu.
Metode ini digunakan dalam JavaScript untuk melakukan pemilihan elemen
berdasarkan selektor CSS, ini berarti kita dapat mencari elemen berdasarkan kelas,
nama elemen, ID, atribut, atau bahkan hierarki elemen dengan selector yang lebih
kompleks.

Function pada JavaScript

Dalam JavaScript, terdapat beberapa cara untuk menulis function. Berikut adalah beberapa
jenis penulisan function yang umum digunakan:

Function Declaration

Function declaration adalah cara paling umum untuk mendefinisikan sebuah

function. Fungsi ini dapat dipanggil sebelum atau setelah deklarasinya dalam kode.

Function Expression
 Function expression adalah cara lain untuk mendefinisikan function. Fungsi ini
disimpan dalam variabel dan hanya dapat dipanggil setelah variabel tersebut
dideklarasikan.

Arrow Function

Arrow function adalah cara yang lebih ringkas untuk mendefinisikan function
dalam JavaScript yang diperkenalkan dalam ES6 (ECMAScript 2015). Arrow
function sangat berguna untuk membuat function dengan sintaks yang lebih singkat.

Event Handler pada JavaScript

Dalam JavaScript, kita dapat membuat sebuah fungsi, dengan cara mendeklarasikan
“function” pada script yang telah dibuat dan fungsi tersebut dapat dipanggil melalui event
yang ada pada tag HTML.

Berikut ini adalah event dari JavaScript yang sering digunakan, untuk selengkapnya
dapat dilihat di http://www.w3schools.com/jsref/dom_obj_event.asp

• onClick : keadaan dimana elemen diklik oleh user (misalnya : link, button).
• onLoad : dipanggil saat elemen/dokumen berhasil di-load.
• onUnload : dipanggil saat meninggalkan halaman.
• onFocus : dipanggil saat suatu tag input di klik/difokus.
• onBlur : dipanggil saat suatu tag input tidak lagi difokus.
• onChange : dipanggil saat tag input mengalami perubahan value.
• onSubmit : dipanggil saat suatu form disubmit.
• onMouseOver : dipanggil saat suatu tag mengalami hover.
 2.

• onMouseOut : dipanggil saat suatu mouse keluar dari tag.

Interactive Dialog Boxes pada JavaScript

Interactive dialog boxes adalah fitur dalam JavaScript yang berguna untuk
menampilkan kotak dialog kepada pengguna yang dapat digunakan untuk berinteraksi dengan
halaman web. Ada tiga jenis dialog box yang umum digunakan dalam JavaScript:

1. Prompt
Perintah prompt memungkinkan pengguna memasukkan sesuatu dan
melakukan suatu hal terhadap info yang dimasukkan tersebut.

Untuk penulisannya :

Alert
 Alert adalah perintah untuk menampilkan pesan peringatan.

Untuk penulisannya :

3. Confirm
Perintah confirm berguna untuk melakukan konfirmasi pilihan pengguna
terhadap dua pilihan.

Untuk penulisannya :
 2.

GUIDED

Note: Buat pada folder yang sama

• Buat folder baru dan buat 4 file berikut ini

• Pada file javascript.html tuliskan kode berikut

<!DOCTYPE html>
1. <html lang="en">
2. <head>
3. <meta charset="UTF-8">
4. <meta name="viewport" content="width=device-width,
initial-scale=1.0">
5. <title>NPM - Nama</title>
6. <style>
7. h1 {
8. text-align: center;
9. }
10.
11. button {
12. margin-top: 10px;
13. border-radius: 5px;
14. padding: 10px 20px;
15. border: 1px solid #ccc;
16. font-size: 16px;
17. background-color: #000000;
18. color: #ffffff;
19. border: none;
20. cursor: pointer;
21. }
22.
23. .container {
24. width: 400px;
25. margin: 0 auto;
26. padding: 20px;
27. border: 1px solid #ccc;
28. border-radius: 10px;
29. background-color: #d28a8a;
30. }
31.
32. .container p {
33. text-decoration: none;
34. font-weight: bold;
35. color: #333;
36. }
37. </style>
38. </head>
39. <body>
40. <h1>Modul 2 - HTML Form & JS Basic</h1>
41. <div class="container">
42. <input type="text" id="nilai" value="100" hidden
/>
43. <p id="nama"></p>
44. <p id="umur"></p>
45. <p id="gender"></p>
46. <p id="nilaiSaya"></p>
47. <button onclick="onAlert()">Tombol Alert</button>
48. </div>
49. <script>
50. const onAlert = () => alert("Ini Tombol Alert!");
51. const reloadPage = () => location.reload();
52.
53. const nama = prompt("Masukkan Nama Anda");
54. const umur = prompt("Masukkan Umur Anda");
55. let gender = prompt("Masukkan Jenis Kelamin Anda
(L/P)");
56.
57. if(gender === "L"){
58. gender = "Laki-laki";
59. }else if (gender === "P") {
60. gender = "Perempuan";
61. }else {
62. gender = "Tidak Diketahui"
63. }
64.
65. const konfirmasi = confirm("Apakah Data Anda
Sudah Benar ? ");
66.
67. if(konfirmasi){
68. const nilai =
document.getElementById("nilai").value;
69.
 2.

70. document.getElementById("nama").innerHTML =
"Nama Saya " + nama + "";
71. document.getElementById("umur").innerHTML =
`Umur Saya ${umur} Tahun`;
72. document.getElementById("gender").innerHTML =
`Jenis Kelamin Saya ${gender}`;
73. document.getElementById("nilaiSaya").innerHTM
L = `Saya Mendapat Nilai ${nilai}`;
74. }else {
75. reloadPage();
76. }
77. </script>
78. </body>
79. </html>

• Pada file kontak.html tuliskan kode berikut

Note : Ubah nama, email, notelp teman menjadi nama, email, notelp teman kalian

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>NPM - Nama</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul class="menu">
<li><a href="registrasi.html">Register</a></li>
<li><a href="kontak.html">Kontak</a></li>
</ul>
<div class="contact-list">
<h1 style="margin-top: 0;">Daftar Kontak Teman</h1>
<div class="contact">
<h2>Nama Teman</h2>
<p>Email: [email protected]</p>
<p>Telepon: 0987654321</p>
</div>
<div class="contact">
<h2>Nama Teman</h2>
<p>Email: [email protected]</p>
<p>Telepon: 0987654321</p>
 </div>
<div class="contact">
<h2>Nama Teman</h2>
<p>Email: [email protected]</p>
<p>Telepon: 0987654321</p>
</div>
<div class="contact">
<h2>Nama Teman</h2>
<p>Email: [email protected]</p>
<p>Telepon: 0987654321</p>
</div>
</div>
</body>
</html>

• Pada file registrasi.html tuliskan kode berikut

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>NPM - Nama</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul class="menu">
<li><a href="registrasi.html">Register</a></li>
<li><a href="kontak.html">Kontak</a></li>
</ul>
<h1>Formulir Registrasi Data Mahasiswa</h1>
<form onsubmit="return validateForm()">
<table cellspacing="4" cellpadding="4">
<tr>
<td><strong>Nama Mahasiswa</strong></td>
<td><input required type="text" id="namamhs"
name="namamhs" size="30" /></td>
</tr>
<tr>
<td><strong>Jenis Kelamin</strong></td>
<td>
<input type="radio" id="laki" name="jk"
value="Laki-laki" />
<label for="laki">Laki-laki</label>
 2.

<input type="radio" id="perempuan" name="jk"

value="Perempuan" />
<label for="perempuan">Perempuan</label>
</td>
</tr>
<tr>
<td><strong>Program Studi</strong></td>
<td>
<select id="prodi" name="prodi" required>
<option value="">Pilih Prodi</option>
<option value="Teknik
Informatika">Informatika</option>
<option value="Teknik Industri">Teknik
Industri</option>
<option value="Sistem Informasi">Sistem
Informasi</option>
</select>
</td>
</tr>
<tr>
<td><strong>Nomor Telepon</strong></td>
<td><input required type="number" id="telepon"
name="telepon" size="30" /></td>
</tr>
<tr>
<td><strong>Tanggal Lahir</strong></td>
<td><input required type="date" id="tgl" name="tgl"
size="30" /></td>
</tr>
<tr>
<td><strong>Email</strong></td>
<td><input required type="email" id="email"
name="email" size="30" /></td>
</tr>
<tr>
<td><strong>Password</strong></td>
<td><input required type="password" id="password"
name="password" size="30" /></td>
</tr>
<tr>
<td valign="top">
<p><strong>Hal favorit</strong></p>
</td>
<td>
<fieldset >
 <legend><strong>Game</strong></legend>
<input type="checkbox" id="pubgMobile"
name="game" value="PUBG Mobile" />
<label for="pubgMobile">Valorant</label>
<input type="checkbox" id="mobileLegend"
name="game" value="Mobile Legend" />
<label for="mobileLegend">Mobile Legend
</label>
</fieldset>
<fieldset>
<legend><strong>Film</strong></legend>
<input type="checkbox" id="drama" name="film"
value="Drama" />
<label for="drama">Drama</label>
<br />
<input type="checkbox" id="action"
name="film" value="Action" />
<label for="action">Action</label>
<br />
<input type="checkbox" id="romance"
name="film" value="Romance" />
<label for="romance">Romance</label>
</fieldset>
</td>
</tr>
<tr>
<td
valign="top"><p><strong>Deskripsi</strong></p></td>
<td><textarea required id="deskripsi"
name="deskripsi" rows="10" cols="20" ></textarea></td>
</tr>
<tr>
<td><strong>Foto</strong></td>
<td><input required type="file" id="image"
name="image" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" id="simpan"
name="simpan" /></td>
</tr>
</table>
</form>
<script>
const validateForm = () => alert("Data Berhasil Disimpan !");
</script>
 2.

</body>
</html>

Pada file style.css tuliskan kode berikut

* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
background-color: bisque;
background-size: cover;
background-position: center;
background-attachment: fixed;
font-family: Arial, sans-serif;
}

.menu {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
background-color: #333;
}

.menu li {
margin-right: 20px;
}

.menu li:last-child {
margin-right: 0;
}

.menu li a {
text-decoration: none;
color: orange;
font-weight: bold;
padding: 10px 20px;
display: inline-block;
transition: background-colour 0.3s ease;
}
menu li a:hover {
background-color: #ff6600;
color: white;
}

h1 {
text-align: center;
color: #333;
}

form {
width: 80%;
max-width: 600px;
margin: 0 auto;
margin-bottom: 10px;
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

textarea {
resize: none;
}

table {
width: 100%;
}

td {
padding: 8px;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="number"],
textarea,
select {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
 2.

border-radius: 3px;
}

input[type="submit"] {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.contact-list {
max-width: 600px;
margin: 0 auto;
margin-top: 30px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 30px;
}

.contact {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

.contact h2 {
font-size: 18px;
margin: 0;
}

.contact p {
margin: 0;
color: #666;
}