Praktikum III 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 <form method="post" action="namaprogram"> bagian ini berisi sejumlah elemen input berbagai jenis sebagai formulir isian yang bisa diisi oleh user. </form> Percobaan 1 : Contoh Form sederhana: <?php <form method="post" action="proses.php"> <label for="nama">ketikkan nama Anda:</label><br> <input type="text" name="nama" id="nama"><br> <input type="submit" value="kirim"> </form>?> 3. ELEMEN-ELEMEN FORM Atribut accept method Deskripsi Mendefinisikan MIME yang di izinkan oleh server yang memuat script untuk memproses form. Syntax : ACCEPT= Internet Media Type 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 : <input type="text" name="nama"><br> <textarea name="komentar"></textarea> B. INPUT FILE Memasukkan inputan berupa file Sintaks : <input type="file"> 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: <button type="submit">submit</button> <button type="reset">reset</button> <button>tombol</button>
D. CHECK BOX Merupakan control yang memungkinkan pemilihan satu atau lebih nilai informasi tertentu. Contoh: percobaan 2 <input type="checkbox" name="kendaraan" value="mobil"> Mobil <br> <input type="checkbox" name="kendaraan"value="sepeda Motor">Sepeda Motor <br> <input type="checkbox" name="kendaraan" value="sepeda"> Sepeda E. SELECT BOX Merupakan control yang memungkinkan pemilihan satu nilai informasi tertentu, disajikan dalam bentuk drop-down. Contoh : percobaan 3 <select name="mobil"> <option value="sedan">sedan</option> <option value="bus">bus</option> <option value="truck">truck</option> </select> 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 <input type="radio" name="gender" value="pria">pria <input type="radio" name="gender" value="wanita">wanita
G. HIDDEN CONTROL Memungkinkan untuk menyembunyikan suatu kontrol tertentu pada halaman web namun akan tetap terbaca nilainya. Contoh: percobaan 5 <input type="hidden" Name="rahasia value="teks tersembunyi"> 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.
Output :