Scribd
Unggah
106 tayangan

Modul 11 - Web Client - Dom Dan Validasi Form

Modul ini membahas DOM dan validasi form pada pemrograman web client. Terdapat penjelasan tentang DOM untuk membuat web dinamis menggunakan Javascript dan validasi form untuk mencegah kesalahan pengisian. Modul ini juga berisi contoh kode untuk mempraktikkan penggunaan DOM dan validasi form.

Diunggah oleh

Adam DIouf Rahman
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
106 tayangan

Modul 11 - Web Client - Dom Dan Validasi Form

Modul ini membahas DOM dan validasi form pada pemrograman web client. Terdapat penjelasan tentang DOM untuk membuat web dinamis menggunakan Javascript dan validasi form untuk mencegah kesalahan pengisian. Modul ini juga berisi contoh kode untuk mempraktikkan penggunaan DOM dan validasi form.

Diunggah oleh

Adam DIouf Rahman
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 8

MODUL 11

PRAKTIKUM PEMROGRAMAN WEB CLIENT

Disusun oleh :

FX. Henry Nugroho, S.T., M.Cs.

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AKAKOM

YOGYAKARTA

2019

i
MODUL 11
DOM dan VALIDASI FORM

CAPAIAN PEMBELAJARAN

1. Menuliskan script Javascript untuk membuat web dinamis menggunakan


DOM.
2. Menuliskan script untuk validasi form.

KEBUTUHAN ALAT/BAHAN/SOFTWARE

1. Editor notepad / notepad++


2. Browser

DASAR TEORI

HTML DOM (Document Object Model)


DOM saat ini adalah standar yang digunakan untuk mengakses halaman web.
Saat sebuah halaman web di load maka browser akan menciptakan Document
Obyek Model untuk halaman tersebut. HTML DOM juga sebagai standar untuk
menulis program web. HTML DOM menentukan :
- HTML elements sebagai objek
- Properti dari semua element HTML
- Method untuk mengakses semua element HTML
- Event untuk semua element HTML
Dalam kata lain, DOM adalah standar untuk mendapatkan, merubah,
menambah, dan menghapus HTML. Dengan adanya html DOM maka javascript
mampu melakukan banyak hal. Berikut ini disajikan struktur HTML DOM

1
VALIDASI FORM
Validasi Form adalah suatu cara untuk menghindari kesalahan dalam mengisi
field pada suatu form dengan menampilkan alert(informasi pemberitahuan) dan
memberikan nilai balik false agar form tidak dikirim. Sebagai contoh jika suatu field
pada form belum terisi maka javascript akan menampilkan alert bahwa field
tersebut belum terisi.
Validasi dapat dilakukan disisi client ataupun server. Validasi di sisi client
dilakukan oleh browser, sedangkan validasi di sisi server dilakukan oleh web
server. HTML 5 mengelompokan cara melakukan validasi menjadi 3:
• melalui elemen HTML yaitu validation HTML Input Attributes
• melalui CSS yaitu validation CSS Pseudo Selectors
• melalui DOM yaitu validation DOM Properties and Methods

2
PRAKTIK

Praktik 1 : DOM Methods


1. Buat file baru, penyimpanan tidak harus di server

2. Jalankan di browser.

Praktik 2 : DOM Elements


1. Buat file baru, penyimpanan tidak harus di server

2. Jalankan di browser.

3
Praktik 3 : DOM HTML
1. Buat file baru, penyimpanan tidak harus di server

2. Jalankan di browser.

Praktik 4 : DOM CSS


1. Buat file baru, penyimpanan tidak harus di server

2. Jalankan di browser.

Praktik 5 : DOM Events


1. Buat file baru, penyimpanan tidak harus di server

4
Praktik 6 : DOM Navigation
1. Buat file baru

2. Jalankan di browser

Praktik 7 : DOM Nodes


1. Buat file baru

2. Jalankan di browser

5
Praktik 8 : Validasi Form Dengan Atribut Elemen Html
1. Buat file baru

2. Jalankan di browser

LATIHAN

1. Buatlah Form untuk pendaftaran mahasiswa baru form fieldnya berupa nama,
alamat, email, no telepon, jenis kelamin. Dengan valifasi form field tidak boleh
kosong.

TUGAS

1. Tugas diberikan oleh dosen pengampu.

6
REFERENSI

1. https://www.w3schools.com/js/js_htmldom.asp
2. https://www.w3schools.com/js/js_validation.asp

Anda mungkin juga menyukai