1 Praktikum III HTML FORM Tujuan : 1. Mengetahui tentang Elemen-elemen FORM. 2. Mampu membuat script FORM HTML. 3. Mampu membuat halaman web dengan me...
HTML FORM Tujuan : 1. Mengetahui tentang Elemen-elemen FORM. 2. Mampu membuat script FORM HTML. 3. Mampu membuat halaman web dengan menggunakan script HTML dan PHP. Alat dan Bahan : 1. Buku materi PEMROGRAMAN WEB / buku literatur mengenai PEMROGRAMAN WEB. 2. Modul praktikum PEMROGRAMAN WEB. Landasan teori : Form adalah sebuah fasilitas yang sering kita jumpai pada sebuah website. Fungsi form adalah sebagai media untuk mengisi data dan akan dikirim ke webserver, sehingga sebuah website akan tampak lebih interaktif. Komponen-komponen form terdiri dari : •
Atribut TEKS
•
Atribut RADIO
•
Atribut CHECKBOX
•
Atribut SELECT & OPTION
•
Atribut TEKSAREA
•
Atribut SUBMIT
1. FORM HTML
Form digunakan untuk menangani input dari user pada dokumen yang dinamis/interaktif.
Analogi dari penggunaan form ini di dokumen HTML adalah bahwa form tersebut adalah sebuah formulir isian yang akan diisi oleh user, kemudian disimpan ke dalam server dengan mekanisme penyimpanan data.
Sebuah dokumen juga dapat mempunyai satu atau beberapa form. Setiap form mewakili sebuah task spesifik (login, mengisi biodata, memilih bahasa, dll) dan dapat menghimpun satu atau beberapa elemen input.
Setiap form harus ditentukan nama program (di sisi server) yang akan menangani data isian yang dikirim (di-submit).
2. Skema dasar Form Percobaan 1 : Contoh Form sederhana:
?>
3. ELEMEN-ELEMEN FORM Atribut
Deskripsi
accept
Mendefinisikan MIME yang di izinkan oleh server yang memuat script untuk memproses form. Syntax : ACCEPT=”Internet Media Type”
method
Menentukan bagaimana data akan di kirim ke server. GET – data akan dikirim dengan menggunakan query string pada URL. POST – data akan di kirim ke server sebagai block data ke script. Syntax : METHOD=”POST (atau) GET”
action
Menentukan lokasi dari script yang akan memproses data dari form. Syntax : ACTION=”URL”
ACTION menentukan URL apa yang akan dijalankan dan menerima semua masukan pada formulir. Jika ACTION tidak disebutkan, informasi akan dikirim ke URL yang sama dengan halaman Web itu sendiri. METHOD Digunakan untuk menentukan bagaimana informasi di kirim ke URL yang disebutkan dalam ACTION. Nilai yang umum untuk atribut ini berupa GET dan POST. POST membuat informasi dikirimkan secara terpisah dengan URL, sedangkan GET akan membuat informasi dikirim menjadi satu dengan URL. 4.
METODE PENGIRIMAN DATA • GET (Default) Metode GET mengirimkan data pada server dengan cara meletakkannya pada bagian akhir URL yang menunjuk pada script pemroses. Jadi jika URL anda menunjuk ke Script pada URL “proses.php” dan kata formnya adalah “andi” dan “tuban”, maka URL akhir yang dikirim ke server adalah : /proses.php?nama=andi&alamat=tuban • POST Metode POST tidak seperti metode GET yang mengirimkan datanya secara terpisah pada suatu standar input. Script mengambil data form dari standar input ini. Dengan adanya penyimpanan data secara tersendiri membuat metode POST bisa menyimpan data input dalam jumlah banyak.
5.
KOMPONEN FORM A. INPUT TEKS Terdapat dua jenis inputan teks: text area dan text input. Keduanya memiliki kesamaan fungsi yaitu menginputkan teks. Namun textarea memungkinkan inputan berupa multiline text. • Sintaks :
B. INPUT FILE Memasukkan inputan berupa file • Sintaks :
C. BUTTON • Push Button : default behavior atau merupakan sintaks dasar. Namun button jenis ini hanya dapat digunakan dengan menggunakan bersama script yang lain (client side script). • Submit Button : apabila diaktifkan akan memerintahkan browser untuk mengirimkan data yang dimasukkan ke dalam form ke alamat yang dituju. • Reset Button : apabila diaktifkan akan mereset semua control/value yang ada dalam form kembali ke nilai semula (default). • Sintaks:
D. CHECK BOX Merupakan control yang memungkinkan pemilihan satu atau lebih nilai informasi tertentu. Contoh: percobaan 2 Mobil Sepeda Motor Sepeda
E. SELECT BOX Merupakan control yang memungkinkan pemilihan satu nilai informasi tertentu, disajikan dalam bentuk drop-down. Contoh : percobaan 3 <select name="mobil">
F.
RADIO BUTTON
Memiliki fungsi yang sama dengan check box namun apabila salah satu radio button dengan diaktifkan maka radio button lain yang bernilai sama akan non-aktif secara otomatis. Contoh : percobaan 4 Pria Wanita
G. HIDDEN CONTROL Memungkinkan untuk menyembunyikan suatu kontrol tertentu pada halaman web namun akan tetap terbaca nilainya. Contoh: percobaan 5
Tugas Pendahuluan 1. Lakukan semua percobaan pada contoh di modul, tuliskan outputnya kemudian beri penjelasan setiap percobaan tersebut! 2. Buatlah Contoh Form sederhana sesuai biodata diri Anda ! (Minimal 5 jenis Form : text, radio, select,checbox, textarea)
Tugas Praktikum 1. Dengan menggunakan FORM buatlah program sederhana untuk membuat formulir pendaftaran seperti gambar berikut : Keterangan :
Metode pengiriman yang digunakan adalah POST, dan skrip yang digunakan untuk memproses form terletak pada file proses.php.
Format tanggal lahir : DD-MM-YYYY. Tahun lahir mulai dari 1985 s.d 1995.
Field Agama berisi : Islam, Kristen, Katolik, Hindu, Budha, Konghucu.
Field Foto buat dengan ekstensi bebas dan max ukuran field 1MB.
Field Jurusan yang tersedia : Teknik Informatika, Sistem Informasi, Teknik Industri.
Tombol DAFTAR akan memproses hasil inputan, tombol BATAL akan mengosongkan (reset) semua isian.
