Php and Html Form

Pada tutorial kali ini kita akan membahas mengenai cara menghubungkan form HTML dengan PHP.

Ketika membuat website atau aplikasi berbasis web, kita tidak bisa lepas dengan yang namanya class. Course ini digunakan untuk menerima input dari user untuk kemudian diolah sesuai keperluan.

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 grade HTML ini, tentang bagaimana data tersebut diolah, bukan menjadi tanggung jawab form lagi.

I. Elemen Form HTML

Elemen grade <grade..> 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 grade.php dan proses.php yang kita letakkan didalam folder htdocs

Isikan kode berikut ke dalam file form.php

            <h1>Form HTML Dengan PHP</h1> <form activeness="proses.php" method="mail"> 	<div> 		<label>Nama</label><input type="text" name="nama"/> 	</div> 	<div> 		<label>Email</label><input type="text" name="e-mail"/> 	</div> 	<input type="submit" value="Simpan"/> </class>          

Klik DEMO untuk langsung melihat hasil

1 Atribut Activity

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

URL Relative VS URL Absolute

Jika alamat url ( termasuk pada atribut activity 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 urlclass.php adalah http://localhost/form/)

Dengan demikian, karena fileproses.php berada satu binder dengan file form.php maka url untuk fileproses.php adalahhttp://localhost/grade/proses.php.

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

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

ii Atribut Method

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

Method Become

Pada method GET, data pada course 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 electronic mail: prawoto.hadi@gmail.com, 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 formatnama_data=nilai_data, antar parameter dipisah dengan tanda ampersand ( & )

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

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

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

Method POST

Pada method Mail,data pada grade 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 programmer tools pada Chrome atau firebug pada Firefox, kemudian pilih bagian tab Network.

Method Go vs Method POST

Method Get dan Postal service memiliki beberapa perbedaan mendasar, diantaranya:

Method Go

• Kurang aman karena information terekspose, selain itu, karena dikirim melalui url, information 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 information.

Lebih jauh tentang kedua metode ini, termasuk kelebihan dan kekurangan, kapan digunakan, dan proses pengirimannya dibahas lengkap di: Memahami GET dan Postal service Pada PHP dan HTTP

II. Menangkap Data Dari Form HTML Dengan PHP

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

Menangkap Data Go

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

Misal: isikan file proses.php dengan script berikut:

            <?php repeat 'Nama  : ' . $_GET['nama'] . '<br/>'; echo 'Electronic mail : ' . $_GET['email'];          

Selanjutnya, ubah atribut action pada file form.php dengan nilai Go. Buka grade 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 information yang dikirim, gunakan fungsi print_r(), misal:

            echo '<pre>'; print_r($_GET); /* Hasil:  Array (  [nama] => Agus Prawoto Hadi  [electronic mail] => prawoto.hadi@gmail.com  [submit] => Simpan ) */          

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

http://localhost/form/proses.php?nama=JagoWebDev&e-mail=jagowebdev@gmail.com

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 activeness pada elemen form menjadi post, selanjutnya dan kita ubah isi file proses.php menjadi:

            <?php repeat 'Nama  : ' . $_POST['nama'] . '<br/>'; echo 'Email : ' . $_POST['email']; repeat '<pre>'; print_r($_POST);          

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

III. Mengirim dan Menangkap Information Dengan File Yang Sama

Sejauh ini, kita mengirim dan menangkap information pada dua file yang berbeda, yaitu form.php untuk mengirim information, 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 binder form, kita buat file user.php dengan script sebagai berikut:

            <h1>Form HTML Dengan PHP</h1> <course activity="" method="get"> 	<div> 		<characterization>Nama</label><input type="text" name="nama" value="<?=isset($_POST['nama']) ? $_POST['nama'] : ''?>"/> 	</div> 	<div> 		<characterization>Electronic mail</label><input type="text" proper noun="email" value="<?=isset($_POST['email']) ? $_POST['email'] : ''?>"/> 	</div> 	<input type="submit" name="submit" value="Simpan"/> </grade> <?php if (isset($_POST['submit'])) { 	repeat 'Nama Anda  : ' . $_POST['nama'] . '<br/>'; 	repeat 'Email Anda : ' . $_POST['email']; }?>          

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 information yang dikirim, selanjutnya kita cetak nama dan electronic mail yang diinput oleh user

IV. Menampilkan Hasil Input Form HTML dengan PHP

Terdapat berbagai jenis elemen untuk mengirim data menggunakan Class 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:

Pada gambar diatas:

• Ketika disubmit, elemen input akan tetap berisi information 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.

Demikian pembahasan mengenai cara menghubungkan form HTML dengan PHP, semoga bermanfaat.

Lebih dalam mengenai Get dan Mail: Memahami GET dan POST dan HTTP

Subscibe Now

Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com

wrightrivinquister.blogspot.com

Source: https://jagowebdev.com/menghubungkan-form-html-dengan-php/

Share this post