MEMBUAT FORM DENGAN PHP HTML

A. Mengenal Form / Formulir

Form adalah suatu bagian yang berfungsi sebagai input atau masukan dari pengguna yang kemudian akan diproses atau diolah agar dapat dipakai sesuai kebutuhan.

Form digunakan untuk mengirimkan data ke server. Contohnya, proses mengirimkan data, menghapus dan menyunting data, menjelajah (browse), serta lain sebagainya. Untuk membuat elemen form HTML diperlukan tag <form> sebagai berikut:

<form>
elemen-elemen input
</form>

Jenis-jenis Media Input dalam Form

Pada bagian form tersedia kontrol input yang digunakan untuk keperluan dalam memasukkan data input.
Elemen input tersebut digunakan untuk memperoleh informasi pengguna yang mengolah data. Adapun jenis-jenis media input dalam form adalah sebagai berikut:

1. Text Field

Pengisian informasi dalam bentuk teks pada form HTML dapat dilakukan dengan menggunakan dua buah elemen:textarea dan input.

Textarea digunakan untuk masukan teks yang terdiri dari beberapa baris. Sementara input dipakai untuk masukan teks yang hanya satu baris.

<textarea>
Contoh isi textarea
</textarea>

2. Radio Button

Radio button digunakan untuk menyatakan pilihan yang bersifat tunggal. Umumnya, pada web elemen tersebut dipakai untuk kelengkapan pertanyaan seperti pada pendaftaran online. Hal yang ditanyakan biasanya adalah pilihan untuk menyatakan jenis kelamin, agama, ataupun sebagainya.

Radio button dibuat dalam HTML dengan menggunakan elemen input, dengan atribut type bernilai : coderadio:

<input type = “radio” name=“sex” value=“pria”> Pria <br>

<input type = “radio” name=“sex” value=“wanita”> wanita

Dalam pembuatan elemen radio button, pengguna juga berkewajiban menambahkan dua atribut lainnya, yaitu name dan value.

Atribut name digunakan untuk memberitahukan browser bahwa radio button dengan atribut name yang sama merupakan kumpulan radio button yang sama. Sehingga pengguna tidak boleh memilih dua buah pilihan pada radio button tersebut.

3. Checkbox

Berbeda dengan radio button yang hanya memungkinkan pengguna memilih satu pilihan, pada input type checked box, pengguna dapat memilih satu atau beberapa pilihan atau tidak memilih sama sekali.

Pilihan ini biasanya dipakai untuk memasukkan data yang sifatnya opsional. Pengguna dapat memanfaatkan “Checkbox” pada atribut

Input checkbox adalah sebuah masukan untuk memilih suatu opsi atau pilihan. Jika dipilih, pengguna akan mengecek (mencentang) dan jika tidak memilih akan dibiarkan saja.

Elemen ini sama seperti radio button, dibuat dengan elemen input yang nilai atribut type-nya berisikan checkbox :

<input type = “checkbox” name = “day” value= “senin” > senin <br>

B. Elemen Form HTML

Elemen form <form..> memiliki beberapa atribut penting yang akan menentukan kemana data dikirim dan dengan cara apa data dikirim, atribut tersebut adalah action dan method, misal kita buat file form.php  dan proses.php yang kita letakkan didalam folder htdocs

Isikan kode berikut ke dalam file form.php

1.Atribut Action

Atribut action berisi alamat url kemana data form tersebut akan dikirim. Pada contoh script diatas, kita isi atribut action dengan proses.php  sehingga, ketika tombol submit di klik, maka data form tersebut dikirim ke http://localhost/form/proses.php

URL Relative VS URL Absolute

Jika alamat url ( termasuk pada atribut action pada form) ditulis tanpa menggunakan www atau http, maka alamat tersebut disebut  relative  url.

Misal pada contoh diatas, atribut action pada elemen <form> yang ada di dalam file form.php bernilai:  proses.php,  artinya alamat tersebut relative (mengacu) pada posisi file form.php (path url  form.php adalah http://localhost/form/)

Dengan demikian, karena file  proses.php  berada satu folder dengan file form.php maka url untuk file  proses.php  adalah  http://localhost/form/proses.php.

Jika atribut action kita isi action="file/proses.php" maka form akan dikirim ke http://localhost/form/file/proses.php

Selain url relative, kita juga dapat mengisi atribut action dengan url absolute, url absolute berarti alamat url ditulis penuh. misal http://localhost/form/proses.php

2. Atribut Method

Atribut method digunakan untuk menentukan dengan cara apa data dikirim. Atribut ini memiliki dua nilai, yaitu GET dan POST.

Method GET

Pada method GET, data pada form akan dikirim melalui url. Misal, pada form yang telah kita buat sebelumnya, kita beri atribut method dengan nilai get, selanjutnya, kita isi isian nama, misal: Agus Prawoto Hadi dan email: prawoto.hadi@gmail.com, ketika kita klik tombol simpan, maka url akan berubah menjadi:

Pada gambar tersebut terlihat bahwa alamat url berubah menjadi:

Pada url diatas, bagian parameter yang berisi data form dimulai dengan tanda tanya, selanjutnya diikuti parameter dengan format  nama_data=nilai_data, antar parameter dipisah dengan tanda ampersand ( & )

Pada gambar diatas, terlihat bahwa spasi berubah menjadi + dan @ berubah menjadi %40, hal ini dikarenakan ketika data dikirim via url, data tersebut akan diencode (URL encode).

Dalam URL Encode beberapa karakter akan diubah dengan karakter tertentu, namun tidak perlu khawatir, ketika data ditangkap oleh PHP, data tersebut akan di decode, sehingga kembali ke bentuk aslinya.

nama_data berasal dari atribut name dari tiap-tiap elemen input, sedangkan nilai_data merupakan nilai yang kita isikan pada elemen input. Perhatikan ilustrasi berikut:

Method  POST

Pada method POST,  data pada form akan dikirim melalui http request header, sehingga tidak terlihat oleh user. Misal, pada form sebelumnya kita isi atribut action dengan nilai POST, selanjutnya, ketika kita klik simpan, maka alamat URL akan berubah menjadi:

Pada gambar diatas, terlihat bahwa tidak ada data yang dikirim melalui URL. Jika kita ingin melihat data yang dikirim, kita dapat menggunakan addon developer tools pada Chrome atau firebug pada Firefox, kemudian pilih bagian tab Network.

Method GET vs Method POST

Method GET dan POST memiliki beberapa perbedaan mendasar, diantaranya:

Method GET

• Kurang aman karena data terekspose, selain itu, karena dikirim melalui url, data tersebut akan tersimpan pada history browser
• Panjang data terbatas  antara 2kb – 8kb tergantung jenis browser.
• Hanya dapat mengirim data teks, tidak dapat mengirim file
• Oleh browser tidak diperlakukan sebagai data sensitif, sehingga halaman tersebut dapat direfresh dengan mudah

Method POST

• Lebih aman, karena data tidak terekspose, selain itu, data yang dikirim tidak tersimpan pada history browser
• Dapat mengirim data berukuran besar.
• Dapat mengirim berbagai jenis data termasuk file
• Oleh browser diperlakukan sebagai data sensitif, sehingga ketika direfresh, browser akan meminta konfirmasi pengiriman ulang data.

C. Mengambil Data Dari Form HTML Dengan PHP

Setelah data dikirim oleh form HTML, maka data tersebut siap untuk diolah.

Menangkap Data GET
Untuk menangkap data yang dikirim dengan method GET, kita gunakan variabel $_GET, variabel ini berbentuk array dengan index berupa nilai atribut name pada elemen input.

Misal: isikan file proses.php dengan script berikut:

Selanjutnya, ubah atribut action pada file form.php dengan nilai GET. Buka form dan isikan Agus Prawoto Hadi pada field nama dan prawoto.hadi@gmail.com pada email, kemudian klik submit. Hasil yang kita peroleh:

Untuk melihat semua data yang dikirim, gunakan fungsi print_r(), misal:

Karena data dikirim melalui URL, maka kita dapat mengubah data tersebut dengan mengubah url, misal ubah URL menjadi:

maka hasil yang kita peroleh:

Menangkap Data POST

Sedangkan untuk method POST, kita gunakan variabel $_POST. Sama seperti $_GET,  variabel $_POST juga berbentuk array dengan index berupa nilai atribut name pada elemen input.

Misal kita ubah nilai atribut action pada elemen form menjadi post, selanjutnya dan kita ubah isi file proses.php menjadi:

Ketika kita klik tombol submit, maka hasil yang kita peroleh adalah:

D. Mengirim dan Menangkap Data Dengan File Yang Sama

Sejauh ini, kita mengirim dan menangkap data pada dua file yang berbeda, yaitu form.php untuk mengirim data, dan proses.php untuk menangkap data.

Dalam praktek, untuk mengirim dan menangkap data seringnya kita gunakan file yang sama, sehingga lebih praktis. Untuk mengirim dan menangkap data form denga file yang sama, caranya, kosongkan nilai pada atribut action, misal action=""

Misal, pada folder form, kita buat file user.php dengan script sebagai berikut:

Penjelasan:

• Pada baris 4, kita buat ternary operator <?=isset($_POST['nama']) ? $_POST['nama'] : ''?> jika di klik submit, statemen ini akan mencetak nama yang  diisikan user, hal yang sama berlaku pada email (baris 7)
• Selanjutnya, pada baris 12, kita tes apakah variabel post memiliki index submit, jika ya, artinya ada data yang dikirim, selanjutnya kita cetak nama dan email yang diinput oleh user

E. Menampilkan Hasil Input Form HTML dengan PHP

Terdapat berbagai jenis elemen untuk mengirim data menggunakan Form HTML, diantaranya elemen <input>, <select>, dan <textarea>.

Elemen input memiliki beberapa type, diantaranya text, checkbox, dan radio  masing masing type ini berbeda cara penanganannya.

Agar pembahasan tidak terlalu panjang, tutorial tentang bagaimana cara menampilkan hasil input form HTML dengan PHP dapat diikuti pada artikel:

Pada artikel terebut kita akan membahas cara membuat form beserta penanganan data POST. Output yang dihasilkan seperti tampak pada gambar berikut:

ada gambar diatas:

• Ketika disubmit, elemen input akan tetap berisi data yang telah diinput, dipilih, dan dicentang oleh user.
• Kita uji apakah elemen input, terutama elemen checkbox ada yang dicentang atau tidak, karena untuk mengetahui apakah checkbox dicentang atau tidak, teknik pengujiannya agak berbeda.

Demo Form: Form HTML Pada PHP