Ketika membuat website atau aplikasi berbasis web, kita tidak bisa lepas dengan yang namanya form. Form ini digunakan untuk menerima input dari user untuk kemudian diolah sesuai keperluan. Show
Seperti kita ketahui, form HTML hanya digunakan untuk (1) menerima input dari user dan (2) mengirim data tersebut ke alamat tertentu, selesai, ya sampai disitu saja fungsi dari form HTML ini, tentang bagaimana data tersebut diolah, bukan menjadi tanggung jawab form lagi. I. Elemen Form HTMLElemen form http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com0 dan http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1 yang kita letakkan didalam folder htdocs Isikan kode berikut ke dalam file form.php
DEMO Klik DEMO untuk langsung melihat hasil 1  Atribut ActionAtribut action berisi alamat url kemana data form tersebut akan dikirim. Pada contoh script diatas, kita isi atribut action dengan http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1 sehingga, ketika tombol submit di klik, maka data form tersebut dikirim ke http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com3 URL Relative VS URL AbsoluteJika alamat url ( termasuk pada atribut action pada form) ditulis tanpa menggunakan http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com4 atau http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com5, maka alamat tersebut disebut relative url. Misal pada contoh diatas, atribut action pada elemen http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com6 yang ada di dalam file http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com0 bernilai: http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1, artinya alamat tersebut relative (mengacu) pada posisi file http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com0 (path url http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com0 adalah 1)Dengan demikian, karena file http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1 berada satu folder dengan file http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com0 maka url untuk file http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1 adalah 5Jika atribut action kita isi 6 maka form akan dikirim ke 7Selain url relative, kita juga dapat mengisi atribut action dengan url absolute, url absolute berarti alamat url ditulis penuh. misal http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com3 2 Atribut MethodAtribut 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 9, selanjutnya, kita isi isian nama, misal: Agus Prawoto Hadi dan email: [email protected], ketika kita klik tombol simpan, maka url akan berubah menjadi:Pada gambar tersebut terlihat bahwa alamat url berubah menjadi: http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com Pada url diatas, bagian parameter yang berisi data form dimulai dengan tanda tanya, selanjutnya diikuti parameter dengan format  0, antar parameter dipisah dengan tanda ampersand ( 1 )Pada gambar diatas, terlihat bahwa 2 berubah menjadi 3 dan 4 berubah menjadi 5, 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. 6 berasal dari atribut 7 dari tiap-tiap elemen input, sedangkan 8 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 POSTMethod GET dan POST memiliki beberapa perbedaan mendasar, diantaranya: Method GET
Method POST
Lebih jauh tentang kedua metode ini, termasuk kelebihan dan kekurangan, kapan digunakan, dan proses pengirimannya dibahas lengkap di: Memahami GET dan POST Pada PHP dan HTTP II. Menangkap Data Dari Form HTML Dengan PHPSetelah data dikirim oleh form HTML, maka data tersebut siap untuk diolah. Menangkap Data GETUntuk menangkap data yang dikirim dengan method GET, kita gunakan variabel 9, variabel ini berbentuk array dengan index berupa nilai atribut 7 pada elemen input.Misal: isikan file http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1 dengan script berikut:
Selanjutnya, ubah atribut action pada file http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com0 dengan nilai http://localhost/form/proses.php?nama=JagoWebDev&[email protected]3. Buka form dan isikan Agus Prawoto Hadi pada field nama dan [email protected] pada email, kemudian klik submit. Hasil yang kita peroleh: Untuk melihat semua data yang dikirim, gunakan fungsi http://localhost/form/proses.php?nama=JagoWebDev&[email protected]4, misal:
Karena data dikirim melalui URL, maka kita dapat mengubah data tersebut dengan mengubah url, misal ubah URL menjadi: http://localhost/form/proses.php?nama=JagoWebDev&[email protected] maka hasil yang kita peroleh: Menangkap Data POSTSedangkan untuk method http://localhost/form/proses.php?nama=JagoWebDev&[email protected]5, kita gunakan variabel http://localhost/form/proses.php?nama=JagoWebDev&[email protected]6. Sama seperti 9, variabel http://localhost/form/proses.php?nama=JagoWebDev&[email protected]6 juga berbentuk array dengan index berupa nilai atribut 7 pada elemen input.Misal kita ubah nilai atribut action pada elemen form menjadi post, selanjutnya dan kita ubah isi file http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1 menjadi:
Ketika kita klik tombol submit, maka hasil yang kita peroleh adalah: III. Mengirim dan Menangkap Data Dengan File Yang SamaSejauh ini, kita mengirim dan menangkap data pada dua file yang berbeda, yaitu http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com0 untuk mengirim data, dan http://localhost/form/proses.php?nama=Agus+Prawoto+Hadi&email=prawoto.hadi%40gmail.com1 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 3Misal, pada folder form, kita buat file 4 dengan script sebagai berikut:
DEMO Penjelasan:
IV. Menampilkan Hasil Input Form HTML dengan PHPTerdapat berbagai jenis elemen untuk mengirim data menggunakan Form HTML, diantaranya elemen 7, 8, dan 9.Elemen input memiliki beberapa type, diantaranya 0, 1, dan 2 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: Pada gambar diatas:
Demo Form: Form HTML Pada PHP Download Source Code: View Source Code Demikian pembahasan mengenai cara menghubungkan form HTML dengan PHP, semoga bermanfaat. Lebih dalam mengenai GET dan POST: Memahami GET dan POST dan HTTP Subscibe NowSuka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com Komitmen Kami: Kami senantiasa menghargai privasi Anda dan tidak akan membagikan identitas Anda ke pihak manapun. |