Tutorial Form PHP Part 1: Cara Menampilkan Hasil Form HTML dengan PHP

Langkah pertama untuk dapat memproses hasil form HTML, adalah mempelajari cara 'mengambil' nilai dari form dan menampilkannya. Dalam tutorial kali ini, kita akan membahas Cara Menampilkan Hasil Form HTML dengan PHP.

Mengenal Struktur Dasar Form HTML (atribut action dan method)

Tutorial mengenai cara membuat form menggunakan HTML telah saya bahas lengkap di tutorial form HTML, dalam tutorial form PHP kali ini kita hanya fokus kepada bagian form yang berkaitan dengan PHP. Berikut adalah struktur dasar form sederhana dalam HTML:

<form action="proses.php" method="get">
   Nama: <input type="text" name="nama" />
   <br />
   E-Mail: <input type="text" name="email" />
   <br />
   <input type="submit" value="Proses Data" >
</form>

Jika anda menjalankan form HTML tersebut, akan ditampilkan form sederhana dengan 2 buah kotak inputan dan sebuah tombol "Proses Data" yang berfungsi untuk submit form. Dari struktur dasar tersebut, di dalam tag <form> terdapat 2 buah atribut. Yakni atribut action dan atribut method. Kita akan membahas kedua atribut ini secara lebih rinci.

Atribut pertama adalah action. Atribut action ini diisi dengan nilai berupa alamat halaman PHP dimana kita akan memproses isi form tersebut. Dalam contoh diatas, saya membuat nilai action="proses.php", yang berarti saya harus menyediakan sebuah file dengan nama: proses.php untuk memproses form tersebut.

Isi atribut action sebenarnya adalah alamat dari halaman PHP. Karena atribut action pada contoh diatas ditulis  action="proses.php", maka file proses.php harus berada di dalam 1 folder dengan halaman HTML yang berisi form ini. Namun anda bisa dengan bebas mengubah alamat proses.php ini tergantung dimana file tersebut berada, misalnya menjadi alamat relatif seperti action="file_php/proses.php", ataupun alamat absolut seperti action="https://www.duniailkom.com/proses.php".

Atribut kedua yang berkaitan dengan pemrosesan form HTML adalah atribut method. Atribut inilah yang akan menentukan bagaimana cara form 'dikirim' ke dalam halaman proses.php. Nilai dari atribut method hanya bisa diisi dengan1 dari 2 pilihan, yakni get atau post.

Jika seperti contoh diatas saya membuat nilai method="get", maka nilai dari form akan dikirim melalui alamat URL website. Namun jika nilai method diubah menjadi method="post", maka nilai form tidak akan terlihat di dalam alamat URL. Perbedaan antara method get dan post akan kita bahas secara mendalam dalam tutorial selanjutnya. Nilai dari atribut method ini juga akan mempengaruhi cara kita memproses nilai dari form.

Setelah membuat tag pembuka form dengan atribut action dan method, isi form selanjutnya adalah 2 buah tag <input type="text"> yang akan menampilkan kotak isian form. Hal yang paling penting diperhatikan adalah atribut name dari masing-masing tag <input>. Nilai dari name inilah yang menjadi penanda masing-masing objek form agar dapat diproses dengan PHP.

Setelah 2 buah text input, objek form terakhir adalah tombol submit yang apabila di klik akan mengirimkan data dari form ke halaman proses.php untuk diproses. Atribut penting disini adalah atribut type="submit", yang akan otomatis mengirim isian form ketika tombol ini di klik.

Cara Mengirimkan Nilai Form HTML ke dalam PHP

Untuk memahami Cara Mengirimkan Nilai Form HTML ke dalam PHP, kita akan langsung praktek dengan membuat 2 buah file, yakni halaman HTML yang berisi form dengan nama file form.html, dan halaman PHP yang akan berisi kode untuk menampilkan hasil form dengan nama file: proses.php.

Karena kita akan mengeksekusi kode PHP, kedua file ini harus dijalankan dengan XAMPP dan berada di dalam folder htdoc. Untuk contoh kali ini saya akan membuat folder belajar_form di dalam folder htdoc XAMPP, sehingga untuk mengakses kedua halaman adalah dari alamat : http://localhost/belajar_form/form.html dan http://localhost/belajar_form/proses.php (mengenai cara install dan menggunakan XAMPP telah saya bahas pada tutorial Cara Menjalankan File PHP dengan XAMPP)

Sebagai langkah pertama, kita akan membuat file form.html yang berisi kode HTML sebagai berikut:

<!DOCTYPE html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Belajar Form PHP</title>
</head>

<body>
   <h2>Tutorial Belajar Form HTML - PHP </h2>
   <form action="proses.php" method="get">
      Nama: <input type="text" name="nama" />
      <br />
      E-Mail: <input type="text" name="email" />
      <br />
      <input type="submit" value="Proses Data" >
   </form>
</body>
</html>

Kode HTML diatas hanya berisi struktur kode HTML sederhana dengan 1 buah form yang berisi 2 text inputan untuk nama dan e-mail. Struktur form ini persis sama dengan form kita bahas pada bagian awal tutorial ini.

Sebelum membuat halaman proses.php, kita akan mencoba melakukan sedikit percobaan dengan form HTML ini. Silahkan coba input kedua kotak isian form ini dengan nilai apapun dan klik tombol submit. Ketika anda men-klik tombol submit, anda akan mendapati halaman error seperti berikut ini:

Halaman error tersebut memberitahu kita bahwa halaman proses.php tidak ditemukan (yang memang belum kita buat), namun perhatikan alamat URL pada address bar web browser, kita bisa melihat ada penambahan seperti berikut ini:

http://localhost/belajar_form/proses.php?nama=duniailkom&email=duniailkom%40gmail.com

Perhatikan bahwa alamat URL sekarang telah berganti menjadi proses.php, yang kemudian diikuti dengan ?nama=duniailkom&email=duniailkom%40gmail.com. Pesan inilah yang sebenarnya di kirim oleh halaman form.html sewaktu kita men-klik tombol submit.

Tanda ? menandakan awal dari data form, dan kemudian diikuti dengan nama dari objek form dan nilainya, dalam contoh ini, nilai yang akan dikirim adalah nama=duniailkom. Karakter "&" digunakan sebagai tanda pemisah nilai objek form yang 1 dengan yang lain, kemudian diikuti dengan nilai kedua email=duniailkom%40gmail.com. Tanda %40 dalam kode ini adalah kode karakter HTML untuk karakter @ yang biasa digunakan di dalam email.

Jika anda menambahkan objek form ketiga, maka alamat URL akan semakin panjang. Kita bisa melihat data yang dikirim karena pada saat pembuatan form, saya menggunakan method=get. Namun jika anda merubah form HTML kita dengan menggunakan method=post, maka anda tidak akan melihat karakter-karakter ini di dalam URL.

Selanjutnya kita akan mencoba menampilkan nilai ini dengan PHP pada halaman proses.php.

Cara Menampilkan nilai Form HTML dengan PHP ($_GET dan $_POST)

Setelah membuat halaman form.html yang berisi form HTML, kita akan membuat halaman proses.php yang berisi kode PHP untuk menangani nilai dari form ini.

Silahkan buat file proses.php dengan kode program sebagai berikut, dan savelah di dalam folder yang sama dengan form.html berada:

<?php
   echo $_GET['nama'];
   echo "<br />";
   echo $_GET['email'];
?>

Sebelum kita membahas kode program PHP tersebut, silahkan buka kembali halaman form.html, isi kotak input nama dan email, lalu klik tombol Proses Data. Apabila tidak ada error, maka akan tampil hasil berikut ini:

Tampilan diatas adalah hasil dari 3 baris kode program PHP yang kita buat di dalam halaman proses.php.

Untuk mengambil nilai form HTML, PHP menyediakan 2 buah variabel global yaitu variabel $_GET dan $_POST. Kita menggunakan variabel $_GET jika pada saat pembuatan form menggunakan atribut method=get, dan menggunakan variabel $_POST jika form dibuat dengan method=post.

Kedua variabel ini sebenarnya adalah array, sehingga cara mengakses nilai dari form adalah dengan cara: $_GET['nama_objek_form'].

'nama_objek_form' adalah nilai dari atribut name di dalam form. Jika kita memiliki tag dengan kode HTML <input type="text" name="nama" />, maka untuk mengakses nilainya adalah dengan $_GET['nama'], dan untuk tag <input type="text" name="email" /> diakses dengan nilai $_GET['email'].

Sebagai latihan, silahkan anda mengganti atribut method dalam file form.html menjadi:

<form action="proses.php" method="post">

Lalu ubah juga file proses.php menjadi:

<?php
   echo $_POST['nama'];
   echo "<br />";
   echo $_POST['email'];
?>

Dan PHP akan menampilkan hasil yang sama, namun kali ini form dikirim menggunakan method=post.

Di dalam tutorial kali ini kita telah membahas dasar Cara Menampilkan Hasil Form HTML dengan PHP, namun apa yang kita bahas disini hanya cara paling dasar untuk menampilkan nilai form dengan PHP. Dalam tutorial Form PHP selanjutnya kita akan membahas lebih dalam tentang perbedaan pengiriman form dengan method GET dan POST.