WEB DINAMIS 1 PENANGANAN FORM Agustina Purwatiningsih., S.Kom 1
PENGERTIAN Form merupakan sebuah metode yang digunakan dalam Web Site yang mengizinkan seorang pengunjung untuk dapat berinteraksi dengan Server ataupun dengan pengelola Web Site tersebut. Untk dapat menciptakan halaman Web yang dapat berinteraksi dengan pengunjung salah satunya kita dapat menggunakan form, yang kemudian form tersebut akan dikirim menggunakan sebuah program aplikasi Web berbasis Server Side menuju Database Server. Adapun beberapa program Server side yang dimaksud antara lain adalah PHP, ASP, PERL dan lain lain. 2
CONTOH IMPLEMENTASI FORM Contoh implementasi form dapat dilihat di https://www.facebook.com/ 3
FORM INPUTAN Pada form inputan terdapat beberapa elemen didalamnya, antara lain : Tag <FORM> Atribut ACTION Atribut METHOD SUBMIT BUTTON 4
TAG <FORM> <form> digunakan untuk mendeklarasikan awalan atau start tag sebuah form Tag FORM mendefinisikan satu kesatuan masukan Dalam satu halaman dapat terdiri dari satu atau lebih tag <form> Dalam satu tag <FORM> dapat terdiri dari beberapa jenis masukan 5
ATRIBUT ACTION Atribut ACTION terdapat di dalam tag <FORM> Atribut ini digunakan untuk menentukan alamat dimana data dari komponen form akan dikirimkan Dapat berisi nama_halaman.php atau kosong ( ) 6
ATRIBUT METHOD Atribut yang digunakan untuk membedakan metode pengiriman data, dan bagaimana form akan diproses Atribut METHOD terdapat di dalam tag <FORM> Atribut method dibagi menjadi 2 yaitu: a) GET pengiriman data ke dalam halaman lain yang tidak berhubungan dengan halaman selanjutnya b) POST Melakukan pengiriman data pada halaman lain yang selanjutnya dapat diproses menuju halam berikutnya ataupun melakukan pengiriman ke dalam database 7
SUBMIT DAN RESET BUTTON SUBMIT BUTTON merupakan trigger yang menandakan suatu form akan diproses. Pada dasarnya SUBMIT BUTTON dapat berupa tombol atau komponen HTML yang lain yang difungsikan sebagai tombollain yang difungsikan sebagai tombol. RESET digunakan untuk mengosongkan data yang telah diisi sebelumnya. 8
SINTAKS FORM <FORM ACTION=action base> form tags </FORM> <FORM METHOD method> form tags </FORM> <FORM METHOD=method> form tags </FORM> <FORM ENCTYPE=media type> form tags </FORM> <FORM ACTION=action base TARGET="target window name"> form tags </FORM>window name > form tags </FORM> <FORM SCRIPT=URL> form tags </FORM> Note : target window name diisikan berupa:note : target window name diisikan berupa: _blank : buka window baru _self : pada window yang sama _parent _top 9
PENANGANAN FORM DI PHP $_POST_ Digunakan untuk form dengan method POST, data tidak akan ditampilkan di address browser. $_GET Digunakan untuk form dengan method GET, data ditampilkan di address browserdata ditampilkan di address browser. $_REQUEST Digunakan untuk form dengan method POSTDigunakan untuk form dengan method POST maupun GET. 10
JENIS JENIS FORM MASUKAN TEXT PASSWORD HIDDEN FIELD RADIO button CHECKBOX COMBO BOX TEXTAREATEXTAREA 11
Form masukan TEXT Teks adalah masukan yang berbentuk karakter Teks dikhususkan untuk menerima masukan yang sifatnya tidak begitu banyak, Ex : pernyataan nama <input type= text name= nama > dengan menggunakan metode tersebut, anda telah memiliki suatu bentuk masukan berupa TEXT, yang kemudian dibaca dengan dengan variabel nama. 12
Contoh untuk GET, TEXT, SUBMIT INPUT CLIENT BROWSER PROSES DI SERVER OUTPUT CLIENT BROWSER 13
Contoh untuk POST, TEXT, SUBMIT INPUT CLIENT BROWSER PROSES DI SERVER OUTPUT CLIENT BROWSER 14
Contoh untuk REQUEST PROSES DI SERVER OUTPUT CLIENT BROWSER GET OUTPUT CLIENT BROWSER POST 15
Form masukan PASSWORD Password adalah bentuk kata yang dirahasiakan Dalam menggunakan komponen password, setiap karakter yang dimasukkan didalamnya akan di enkripsi sehingga pada halaman address web hanya akan terlihat kode seperti bintang bintang StandardStandard <INPUT TYPE=PASSWORD NAME=name> Menentukan panjang password <INPUT TYPE=PASSWORD NAME=name MAXLENGTH=length> Menentukan ukuran dari form password <INPUT TYPE PASSWORD NAME SIZE i ><INPUT TYPE=PASSWORD NAME=name SIZE=size> NB: Gunakan metode POST untuk menerima data password agar tidak kelihatan datanya. 16
Contoh Inputan PASSWORD 17
Input HIDDEN FILE Di dalam form kita juga mengenal masukan yang disembunyikan atau di hidden. Penggunaanya adalah untuk mnyimpan data yang berasal dari variabel masukan sebelumnya, data tersebut akan disimpan dalam variabel masukan yang disembunyikan selanjutnya dilakukan pengiriman data menuju halaman yang lain Hidden file juga dapat digunakan untuk mendeklarasika data yang sifatnya permanen, maksudnya apapun data yang dimasukkan oleh pengunjung akan memiliki tambahan data yang telah diletakkan pada variable komponen hidden dalam implementasinya hidden file dapat dituliskan: <input type= hidden name= variable > 18
Input RADIO BUTTON Dalam penggunaannya, pilihan plihan yang hanya mengizinkan kita untuk memilih pilihan hanya satu: <INPUT TYPE=RADIO NAME=name VALUE=value> <INPUT TYPE=RADIO NAME=name VALUE=value CHECKED> 19
Input CHECKBOX BUTTON Pada checkbox button, pilihan berupa ganda yang artinya dibolehkan anda menentukan pilihan lebih dari satu. 20
INPUT COMBO BOX Combo box merupakan metode masukan data yang datanya telah dideklarasikan sebelumnya oleh pembuatnya. Dengan combo box hanya diizinkan melakukan pilihan berjumlah satu pilihan saja 21
INPUT TEXT AREA Pada input text kita diberi kesempatan untuk memasukkan data yang banyak. Ex: komentar atau status dalam facebook. 22
TUGAS Buatlah form seperti interface facebook atau bisa dimodifikasi, intinya form tersebut mengandung semua type inputan dan tampilkan nilai outputnya pada file proses. Dikirim ke : agustina.purwa@gmail.com Subject: WEBDINAMIS File: di zip/rar dengan nama tugas2_nim Paling lambat pengumpulan 18 Maret pukul 23.59 WIB 23
Setiap Kesuksesan Sudah Ada Di Depan Mata, Tinggal Mau Di Ambil atau Tidak 24