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>

Tampilan Struktur Form Sederhana HTMLKode 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:

Pengiriman Form dengan method GET terlihat di Address bar

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:

Hasil Input Form HTML ditampilkan dengan PHP

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.


*** Artikel Terkait ***

186 Comments

  1. Rohmat
    01 Dec 14
    • Andre
      01 Dec 14
  2. Rangga Saputra
    10 Dec 14
    • Andre
      10 Dec 14
    • Anonymous
      27 Apr 16
      • Andre
        28 Apr 16
  3. Jeslyn
    04 Jan 15
  4. fajar
    21 Jan 15
    • Andre
      24 Jan 15
  5. mifta
    01 Feb 15
    • Andre
      02 Feb 15
  6. kingzen
    12 Feb 15
  7. kingzen
    14 Feb 15
    • Andre
      15 Feb 15
  8. intan damayanti
    29 Mar 15
    • Andre
      30 Mar 15
      • ramadhan
        21 May 15
      • Refnadi
        06 Jan 16
        • Andre
          07 Jan 16
        • Refnadi
          07 Jan 16
      • oktavia
        17 Feb 17
        • Andre
          18 Feb 17
  9. bobby
    01 Apr 15
    • Andre
      02 Apr 15
  10. djun
    05 Apr 15
  11. kakao
    07 Apr 15
    • Andre
      09 Apr 15
  12. ethwin
    19 Apr 15
    • Andre
      20 Apr 15
  13. tajul
    05 May 15
    • Andre
      05 May 15
  14. tajul
    06 May 15
    • Andre
      06 May 15
      • tajul
        06 May 15
      • tajul
        06 May 15
  15. tajul
    06 May 15
    • Andre
      07 May 15
  16. yufita
    19 May 15
    • Andre
      21 May 15
  17. Andrey
    25 May 15
    • Andre
      26 May 15
  18. oktavian
    18 Jun 15
    • Andre
      18 Jun 15
      • Anonymous
        30 Jan 16
        • Andre
          30 Jan 16
  19. Josua Hutagalung
    24 Jun 15
    • Andre
      25 Jun 15
  20. Naufal
    25 Jun 15
    • Andre
      26 Jun 15
  21. pam
    26 Aug 15
  22. pam
    26 Aug 15
    • Andre
      26 Aug 15
  23. Dwiky
    14 Sep 15
  24. ardi
    16 Nov 15
  25. Roji
    19 Nov 15
    • Andre
      19 Nov 15
  26. fii sofii
    20 Nov 15
  27. exsan
    22 Nov 15
    • Andre
      23 Nov 15
  28. Lingga
    23 Nov 15
    • Andre
      24 Nov 15
  29. ariezhujan
    25 Nov 15
    • Andre
      25 Nov 15
      • ariezhujan
        25 Nov 15
  30. Rabiah Fauziah
    25 Nov 15
    • Andre
      25 Nov 15
      • Rabiah Fauziah
        27 Nov 15
  31. lukman
    28 Dec 15
    • Andre
      29 Dec 15
  32. Miyabi
    30 Dec 15
    • Andre
      01 Jan 16
  33. Natawa
    17 Jan 16
    • Andre
      18 Jan 16
  34. mudrik alfaqih
    09 Feb 16
    • Andre
      10 Feb 16
      • Mudrik
        10 Feb 16
        • Andre
          12 Feb 16
  35. Guntur
    06 Mar 16
    • Andre
      07 Mar 16
  36. annymous
    21 Mar 16
  37. veronica
    31 Mar 16
    • Andre
      01 Apr 16
  38. Rifaldi Saputra
    01 Apr 16
  39. Rifaldi Saputra
    01 Apr 16
    • Andre
      01 Apr 16
  40. iqbal
    04 Apr 16
    • Andre
      05 Apr 16
      • iqbal
        05 Apr 16
        • Andre
          05 Apr 16
  41. Fajri Yannor
    22 Apr 16
    • Andre
      23 Apr 16
  42. Septia
    08 May 16
    • Andre
      08 May 16
      • Septia
        22 Jul 16
  43. ukie
    09 May 16
    • Andre
      11 May 16
  44. Pangtelu
    19 May 16
    • Andre
      03 Jun 16
  45. jehan suhana
    03 Jun 16
    • Andre
      03 Jun 16
  46. Diki
    20 Jun 16
    • Andre
      20 Jun 16
      • adie
        26 Aug 16
        • Andre
          26 Aug 16
  47. Diki
    20 Jun 16
  48. Anonymous
    26 Jun 16
    • Andre
      27 Jun 16
  49. galuh ayu puspita
    06 Aug 16
  50. ivanna
    26 Aug 16
    • Andre
      27 Aug 16
  51. noe
    27 Aug 16
    • Andre
      27 Aug 16
      • noe
        29 Aug 16
        • Andre
          30 Aug 16
  52. Nissa
    29 Aug 16
    • Andre
      30 Aug 16
  53. albadri
    28 Sep 16
    • Andre
      29 Sep 16
  54. Ricky Sanjaya
    05 Oct 16
    • Andre
      06 Oct 16
  55. Anonymous
    25 Oct 16
    • Andre
      25 Oct 16
  56. jamalludin
    02 Nov 16
    • Andre
      03 Nov 16
      • jamalludin
        05 Nov 16
        • Andre
          06 Nov 16
  57. aguse
    09 Nov 16
    • Andre
      09 Nov 16
  58. haidar
    22 Nov 16
    • Andre
      23 Nov 16
  59. adi
    04 Dec 16
    • Andre
      05 Dec 16
    • Andre
      24 Dec 16
  60. Agung Hermawan
    02 Jan 17
    • Andre
      03 Jan 17
  61. erick
    17 Jan 17
    • Andre
      18 Jan 17
  62. Anonymous
    19 Jan 17
    • Andre
      19 Jan 17
      • Anonymous
        19 Jan 17
  63. agus
    11 Mar 17
    • Andre
      15 Mar 17
  64. Wahyu Pria Purnama
    12 Apr 17
    • Andre
      20 Apr 17
  65. RG
    16 Apr 17
  66. gio pratama
    29 Apr 17
    • Andre
      30 Apr 17
  67. Sandy
    13 May 17
    • Andre
      13 May 17
  68. Aldo
    29 May 17
    • Andre
      30 May 17
  69. rina
    16 Jul 17
    • Andre
      17 Jul 17

Add Comment