Materi Perkuliahan 6

PERANCANGAN
WEB
Modul 6 - JavaScript
3/15/2022
I. TUJUAN PRAKTIKUM
Peserta Praktikum dapat memahami dan mengimplementasikan JavaScript untuk
validasi form
II. TUGAS PENDAHULUAN
1. Apakah yang Anda ketahui tentang Form Validasi?

2. Sebutkan perbedaan utama method Post dan Get dalam Form?
III. LANDASAN TEORI

Form mempunyai fungsi menerima informasi atau meminta umpan balik dari user
dan memproses informasi tersebut di server.
Standar penulisan : <form method=“post/get” action=“. . .”> . . . </form>
Atribut Fungsi
Method Metode pengiriman data ke file tujuan (POST atau GET)
Action Aksi yang akan dilakukan jika user menekan tombol Submit
Name Memerikan nama tiap masukan
Value Memberikan nilai suatu masukan
Type Tipe form yang akan digunakan
Untuk memperbolehkan inputan dari user, form bisa diletakkan control-control input.
Semua control biasanya di letakkan di antara tag <FORM></FORM>, tapi juga bisa
meletakkan control diluar tag tersebut. Untuk menambahkan control gunakan tag <input>.
Berikut macam-macam component input:
1. Textbox
Untuk membuat sigle line text control. Attribute size digunakan untuk menentukan
jumlah character yang bisa ditampilkan, sementara maxlength attribute digunakan untuk
menentukan maximum character yang bisa di masukkan.
2. Submit dan Reset
Tombol Submit: digunakan ketika user mengisi form dan ingin mengirimkan ke server.
2022 Pemrograman Web

1 Winarsih, S.Si., MMSI
Tombol Reset: digunakan ketika user ingin menghapus/mengosongkan semua masukan
yang ditulis dalam form
3. Checkbox digunakan Untuk memberi beberapa pilihan kepada user
4. Radio button
Radio button digunakan untuk memberi (hanya) satu pilihan kepada user. Setiap radio
button control harus memiliki nama yang sama, sehingga user hanya bisa memilih satu
option saja. Radio button juga harus secara explisit memberikan nilai ke atribut value.
5. Text Area
Text area digunakan sebagai field masukan untuk pengunjung (dapat menerima lebih dari
satu baris teks). Biasa disebut sebagai kotak komentar
6. Daftar Drop Down
Drop down digunakan untuk memberikan menu pilihan kepada user (cara kerjanya
seperti radio button yang hanya mengijinkan user untuk memilih 1 pilihan saja)
IV. PRAKTIKUM
1. Membuat Validasi form
Langkah-langkah untuk memvalidasi form antara lain :
 Buat tampilan berikut :
 Masukkan kode program dibawah <body> html :

<SCRIPT LANGUAGE = "JavaScript">

</SCRIPT>
Kemudian masukkan kode berikut pada bagian <form>:

<FORM NAME = "formku">
<PRE>
</PRE>
<table width="329" border="0">
<tr>
<td width="80">Nama </td>
<td width="169"><input type = "TEXT" name = "nama" /></td>
<td width="66"> </td>
</tr>
<tr>
<td>Alamat</td>
<td><input type = "TEXT" name = "alamat" /></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type = "BUTTON" value = "Kirim"
onclick = "cekNama(this.form)" /></td>
<td> </td>
</tr>
</table>
<PRE><BR><BR>
</PRE>
</FORM>
 Ketika tombol Kirim ditekan tanpa mengisi nama atau alamat, maka akan muncul tampilan
berikut:
Jika semua form sudah terisi, maka akan muncul tampilan berikut:
2. Mengecek Password
Langkah-langkah untuk mengecek password antara berikut :

 Buat tampilan berikut :
 Masukkan kode program berikut :

<SCRIPT LANGUAGE = "JavaScript">

</SCRIPT>
Kemudian pada bagian Form, masukkan kode berikut :

<FORM NAME = "formTes" ACTION = "tesform.htm" METHOD = "POST">
<table width="329" border="0">

<tr>
<td width="155"><strong>Password</strong> </td>
<td width="152"><input type = "Password" name = "password_1" /></td>
<td width="8"> </td>
</tr>
<tr>
<td><strong>Confirm Password</strong></td>
<td><input type = "Password" name = "password_2" /></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><INPUT TYPE = "BUTTON"
NAME = "tombolProses"
VALUE = "Proses"
onClick = "cekPassword()"></td>
<td> </td>
</tr>
</table>
<PRE><BR><BR>
</PRE>

</FORM>
 Jika kedua password yang dimasukkan tidak sama, maka akan muncul tampilan
berikut:
V. KESIMPULAN
 Form mempunyai fungsi menerima informasi atau meminta umpan balik dari user dan
memproses informasi tersebut di server.
 Kontrol input digunakan untuk menerima inputan dari user, seperti : Text Box, radio
button, text area, dll.
VI. TUGAS PRAKTIKUM

1. Buat tampilan berikut untuk validasi form:
Semua kolom harus diisi dengan Ketentuan sebagai berikut :

 Nama harus berupa huruf
 Alamat hanya berisi huruf dan angka
 Kode pos harus berupa angka
 Jns kelamin harus dipilih

 Username harus diisikan antara 6 sampai 8 karakter (gabungan huruf maupun angka)
 Password minimal 8 karakter (boleh gabungan huruf dan angka)

 Email harus dgn format yg benar (ada @, contoh : zheira83@yahoo.com)

Materi Perkuliahan 6

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Materi Perkuliahan 6

Diunggah oleh

Hak Cipta:

Format Tersedia

PERANCANGAN

II. TUGAS PENDAHULUAN

1. Apakah yang Anda ketahui tentang Form Validasi?

III. LANDASAN TEORI

2022 Pemrograman Web

 Masukkan kode program dibawah <body> html :

2022 Pemrograman Web

Kemudian masukkan kode berikut pada bagian <form>:

2022 Pemrograman Web

 Masukkan kode program berikut :

Kemudian pada bagian Form, masukkan kode berikut :

<table width="329" border="0">

2022 Pemrograman Web

VI. TUGAS PRAKTIKUM

Semua kolom harus diisi dengan Ketentuan sebagai berikut :

2022 Pemrograman Web

 Alamat hanya berisi huruf dan angka

 Kode pos harus berupa angka

 Jns kelamin harus dipilih

2022 Pemrograman Web

 Password minimal 8 karakter (boleh gabungan huruf dan angka)

2022 Pemrograman Web

Anda mungkin juga menyukai