Membuat Pengisihan Borang (Form) dengan Pemrograman WEB

Modul 7

Membuat Pengisihan Borang (Form) dengan Pemrograman WEB

I. Tujuan Mengenal, mengamati dan membuat ragam dialog Pengisihan Borang (Form) dengan Pemrograman WEB.

II. Landasan Teori Beberapa contoh kegunaan form dalam aplikasi web : - Memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang di sediakan. - Memperoleh informasi pembelian secara online. - Memperoleh feedback dari user mengenai website yang kita buat. Tag yang digunakan untuk membuat form dalam dokumen HTML adalah tag

. Atribut yang digunakan : Nilai Keterangan Atribut Method

Post

Action

URL

Data akan di kirim ke server sebagai block data ke script. Menentukan lokasi dari script yang akan memproses data dari form yang kita buat.

Type atribut dalam tag pada HTML. 1. Text, digunakan untuk membuat kontrol text baris tunggal. Atribut pendukung yang digunakan : Keterangan Atribut Name Value Size Maxlength Tabindex

Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Untuk menentukan sebuah nilai defaultnya. Menentukan seberapa lebar kotak textnya. Jumlah maksimum karakter yang dapat dimasukkan. Untuk mengontrol urutan tab kotak input, yang akan dimasukin pengguna saat menekan tombol Tab.

2. Pasword, digunakan untuk menangani password atau data rahasia lain, sehingga pada waktu mengisi input yang bertipe password yang muncul dilayar adalah tanda asteris (*). Atribut pendukung yang digunakan : Keterangan Atribut Name Value Size Maxlength

Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Untuk menentukan sebuah nilai defaultnya. Menentukan seberapa lebar kotak textnya. Jumlah maksimum karakter yang dapat

37

Tabindex

dimasukkan. Untuk mengontrol urutan tab kotak input, yang akan dimasukin pengguna saat menekan tombol Tab.

3. Checkbox, digunakan untuk membuat kotak cex (checkbox). Keterangan Atribut Name Value Size Checked

Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Nilai data yang akan diberikan kepada script yang dituju. Menentukan ukuran kontrolnya. Menunjukkan bahwa kotak ceknya telah dipilih.

4. Radio, digunakan untuk membuat tombol radio (radio botton), dimana disini kita hanya dapat memilih satu pilihan dari seluruh group tombol radio dan nama yang diberikan harus sama semua. Keterangan Atribut Name Value Size Checked

Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Nilai data yang akan diberikan kepada script yang dituju. Menentukan ukuran kontrolnya. Menunjukkan bahwa kotak ceknya telah dipilih.

5. Text Area, digunakan untuk membuat textarea, dimana disini kita dapat menuliskan text mencakup sejumlah baris dan kolom. Keterangan Atribut Name Cols Rows

Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Menentukan jumlah kolom layar yang disediakan bagi area teks. Menentukan jumlah baris layar yang disediakan bagi area teks.

6. Menu Pop-Up, digunakan untuk memberikan menu pilihan kepada para pembaca. Menu ini mirip dengan radio button, dimana kita hanya dapat memilih satu pilihan dari berbagai nilai yang ada dalam menu tersebut. Dalam menu popup ini jumlah pilihan yang ada dapat lebih banyak. Tag yang digunakan adalah <Select> … . Keterangan Atribut Name Value

Tag option ini digunakan untuk menyatakan menu atau daftar pilihannya. Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Nilai data yang akan diberikan kepada script yang dituju.

7. Submit dan Reset, dalam sebuah form paling tidak harus memiliki sebuah tombol submit dan reset. Atribut yang digunakan adalah type dimana type=”submit” digunakan untuk mengirimkan data yang telah diisi oleh user ke server sedangkan type=”reset” digunakan untuk menghapus/mengosongkan semua data yang telah dimasukkan ke form.

38

Contoh sintaksnya : 1. Form.html Form Untuk Peserta Pemrograman di STMIK AKAKOM

---

Pelatihan

Nama
Password
Tanggal Lahir
Jenis Kelamin	Pria Wanita
Jurusan :	<select name=jrs> Teknik Informatika Sistem Informasi Manajemen Informatika Teknik Komputer Komputer Akuntansi
Pilihan Pelatihan	HTML PHP PYTHON 39 My-SQL Postgre-SQL C++ Builder
Keterangan :

2. Terimakasih.php Terimakasih atas Kepercayaannya Mengikuti Pelatihan Pemrograman di STMIK AKAKOM

---

---

40

"; print "$pswd"; print "
"; print "$tgl"; print "$bln"; print "$thn"; print "
"; print "$jrs"; print "
"; print "$kspl"; ?>

III. Praktek Buatlah suatu antarmuka dialog berbasis pengisian borang seperti diatas dengan menggunakan bahasa HTML dan tambahkan 2 field kemudian lampirkan listingnya.

VI. Tugas Buatlah suatu antarmuka dialog berbasis pengisian borang Data Penduduk dengan menggunakan bahasa HTML dan lampirkan listingnya, dengan data-data berikut ini : No 1 2 3 4 5 6

Nama Field NIK No. Kartu Keluarga Nama Alamat RT/RW Jenis Kelamin

8

Status Kawin

Keterangan Nomer Penduduk Nomer Kartu Keluarga Nama Alamat RT/RW Jenis kelamin 1. laki – laki 2. Perempuan Status perkawinan 1. Nikah 2. Belum Nikah

41

9

Agama

10 11

Gol. Darah Status Warganegara

12

Pendidikan Akhir

13

Pekerjaan

14

Status Pendidikan

15

Akseptor KB

16

Cacat

17

Keterangan

3. Janda 4. Duda Agama 1. Islam 2. Kristen 3. Katolik 4. Hindu 5. Budha 6. Kepercayaan Golongan darah Status warganegara 1. WNI 2. WNA Pendidikan Terakhir 1. SD 2. SMP 3. SMA 4. D1 5. D2 6. D3 7. Sarjana 8. Tidak Sekolah 9. Lain – lain Pekerjaan 1. Pegawai Negeri 2. Pegawai Swasta 3. Wiraswasta 4. Buruh 5. Belum Bekerja 6. Ibu Rumah tangga 7. Lain – lain Status penduduk 1. Asli 2. Pindahan Akseptor KB 1. Tidak ada 2. Pil 3. IUD 4. Kondom 5. Suntik 6. Lain –lain Cacat menurut jenis 1. Cacat Mental 2. Tuna Netra 3. Tuna Rungu 4. Tuna Wicara 5. Normal Keterangan

42