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 <form>. yang digunakan : Nilai Method Action Post 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 <input> pada HTML. 1. Text, digunakan untuk membuat kontrol text baris tunggal. pendukung yang digunakan : Maxlength Tabindex 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 (*). pendukung yang digunakan : Maxlength Untuk menentukan sebuah nilai defaultnya. Menentukan seberapa lebar kotak textnya. Jumlah maksimum karakter yang dapat 37
dimasukkan. Tabindex Untuk mengontrol urutan tab kotak input, yang akan dimasukin pengguna saat menekan tombol Tab. 3. Checkbox, digunakan untuk membuat kotak cex (checkbox). Checked 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. Nilai data yang akan diberikan kepada script yang dituju. Checked 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. Cols Menentukan jumlah kolom layar yang disediakan bagi area teks. Rows 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> </Select>. <Option> Tag option ini digunakan untuk menyatakan menu atau daftar pilihannya. 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. 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 <html> <head> <title>contoh Program Form</title> </head> <body bgcolor=aqua> <form method="post" action="terimakasih.html"> <center><font size=4 color=brown>form Untuk Peserta Pelatihan Pemrograman di STMIK A<font size=5>k</font>akom </font></center> <hr size=5 color=brown><br> <table border=2 cellspacing=0 width=85%> <td width=18%><b>nama</b> <td> <input type=text name=nama maxlength=30 size=32> <td width=18%><b>password</b> <td> <input type=password name=pswd maxlength=10 size=12> <td width=18%><b>tanggal Lahir<b> <td> <input type=text name=tgl maxlength=2 size=2> - <input type=text name=bln maxlength=2 size=2> - <input type=text name=thn maxlength=4 size=8> <td width=18%><b>jenis Kelamin</b> <td> <input type=radio name=jk checked=checked>pria <input type=radio name=jk>wanita <td><b>jurusan : <br> <td> <select name=jrs> <option value="ti" selected>teknik Informatika</option> <option value="si" >Sistem Informasi</option> <option value="mi" >Manajemen Informatika</option> <option value="tk" >Teknik Komputer</option> <option value="ka" >Komputer Akuntansi</option> </select> <td width=18%><b>pilihan Pelatihan</b> <td> <input type=checkbox name=html >HTML <input type=checkbox name=php >PHP <input type=checkbox name=python >PYTHON 39
<input type=checkbox name=mysql >My-SQL <input type=checkbox name=postgre >Postgre-SQL <input type=checkbox name=builder>c++ Builder <td><b> : <br> <td> <textarea name="kspl" cols=53 rows=3> </textarea> </table> <p> <font size=5><b> <input type="submit" value="kirim" name="tblkrm"> <input type="reset" value="batal" name="tblbtl"> </p> </body> </html> 2. Terimakasih.php <html> <head> <title>ucapan Terima Kasih</title> </head> <body > <center><font size=4 color=brown>terimakasih atas Kepercayaannya Mengikuti Pelatihan Pemrograman di STMIK A<font size=5>k</font>akom </font></center> <hr size=5 color=brown> <hr size=3 color=brown> 40
<? print "$nama"; print "$pswd"; print "$tgl"; print "$bln"; print "$thn"; print "$jrs"; print "$kspl";?> </body> </html> 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 Nama Field 1 NIK Nomer Penduduk 2 No. Kartu Keluarga Nomer Kartu Keluarga 3 Nama Nama 4 Alamat Alamat 5 RT/RW RT/RW 6 Jenis Kelamin Jenis kelamin 1. laki laki 2. Perempuan 8 Status Kawin Status perkawinan 1. Nikah 2. Belum Nikah 41
3. Janda 4. Duda 9 Agama Agama 1. Islam 2. Kristen 3. Katolik 4. Hindu 5. Budha 6. Kepercayaan 10 Gol. Darah Golongan darah 11 Status Warganegara Status warganegara 1. WNI 2. WNA 12 Pendidikan Akhir Pendidikan Terakhir 1. SD 2. SMP 3. SMA 4. D1 5. D2 6. D3 7. Sarjana 8. Tidak Sekolah 9. Lain lain 13 Pekerjaan Pekerjaan 1. Pegawai Negeri 2. Pegawai Swasta 3. Wiraswasta 4. Buruh 5. Belum Bekerja 6. Ibu Rumah tangga 7. Lain lain 14 Status Pendidikan Status penduduk 1. Asli 2. Pindahan 15 Akseptor KB Akseptor KB 1. Tidak ada 2. Pil 3. IUD 4. Kondom 5. Suntik 6. Lain lain 16 Cacat Cacat menurut jenis 1. Cacat Mental 2. Tuna Netra 3. Tuna Rungu 4. Tuna Wicara 5. Normal 17 42