Content Index
Pengantar
Saat kita browsing sebuah website, seringkali kita menemukan beberapa fitur interaktif yang memungkinkan kita untuk memberikan informasi atau melakukan aksi tertentu, seperti mengisi survey, melakukan pemesanan, atau mengirim pesan. Sebagai contoh pada layanan berbagi pesan atau sosial media yang menggunakan browser dimana anda dapat mengirimkan pesan, membagikan photo, status dan lain sebagainya.
Pesan, photo ataupun data lainnya yang ingin agan bagikan melalui layanan berbasis web tentu harus dikirimkan ke server terlebih dahulu agar kemudian data tersebut dapat diakses oleh orang lain yang terhubung dengan jaringan. Pada kasus lain seperti aplikasi sistem informasi berbasis web data juga harus dikirimkan ke server agar kemudian data tersebut dapat disimpan untuk dikelola lebih lanjut.
Nah muncul pertanyaan bagaimana sebuah halaman web dapat digunakan untuk mengirimkan data ke server? Pada artikel ini kita akan membahas secara sederhana bagaimana HTML Form dan PHP dapat digunakan dalam komunikasi data antara client dengan server. Baiklah kita akan bahas dari sisi client terlebih dahulu yaitu HTML Form, kenapa HTML? karena pada sisi user, kita hanya dapat berinteraksi dengan halaman web yang merupakan dokumen HTML.
HTML Form
HTML Form adalah sebuah elemen pada HTML yang digunakan untuk membuat tampilan interaktif pada website. Dengan menggunakan HTML Form, pengguna dapat mengirimkan data ke server melalui input field seperti textbox, textarea, checkbox, radio button, dan lain-lain.
Field - field atau input yang berada di dalam elemen form merupakan elemen input yang mana jenis input nya ditentukan melalui atribut "type".
Contoh input text :
<input type="text" name="nama" />Output di browser :
Pada elemen input ada dua atribut minimal yang digunakan dalam mengirimkan data ke server yaitu atribut type untuk menentukan jenis input dan atribut name yang digunakan sebagai pengenal untuk membaca data yang dikirimkan di sisi server.
Disini kita tidak akan membahas mengenai input lebih jauh karena terdapat banyak jenis input dan cara penggunaannya masing yang mana akan kita bahas pada artikel terpisah.
Pertama sekali buatlah sebuah direktori atau folder web baru. Jika agan menggunakan Xampp dapat membuat folder baru di dalam folder htdocs. Buatlah folder dengan nama sesuai dengan selera agan sebagai contoh buatlah sebuah folder baru dengan nama html_form.
Selanjutnya kita akan mencoba membuat sebuah form sederhana menggunakan HTML untuk mengirimkan data ke server. Buatlah file baru didalam folder html_form dengan nama index.php lalu ketikkan kode berikut :
<form action="submit.php" method="POST">
<label for="name">Nama:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>Pada contoh diatas, terdapat beberapa elemen yang digunakan yaitu elemen form, label, dan input. Pada contoh diatas, elemen form memiliki atribut action yang berisikan nilai "submit.php", atribut ini digunakan untuk memberikan alamat atau script tujuan yang berada di server, pada contoh ini target pengiriman data adalah file script dengan nama submit.php. Atribut berikutnya yang dapat kita lihat adalah atribut method, atribut ini menentukan cara atau metode request yang dikirimkan ke server, dimana kita dapat menggunakan method GET atau POST.
Setiap kita berinteraksi ke server, kita sebenarnya sedang melakukan request ke server. Request ini biasanya berupa permintaan untuk mengakses halaman atau script tertentu yang berada di server. Request bisa saja hanya request biasa dan bisa juga membawa data tambahan yang nantinya data ini kemudian akan diolah oleh script tujuan yang ada di server.
Nah, data - data tambahan inilah yang biasanya merupakan data yang dikirimkan melalui form. Perbedaan mendasar antara GET dan POST terletak pada bagaimana data dibawa ke server. Pada metode GET, data disertakan pada alamat URL request sehingga data akan terlihat pada alamat URL dan dapat di cache oleh browser. Baik untuk data - data yang sifat nya tidak rahasia dan tidak terlalu panjang. Sedangkan metode POST, data disertakan di dalam body dari request, sehingga tidak terlihat pada URL sehingga lebih aman untuk data - data sensitif seperti informasi login. Sebagai percobaan, agan dapat bereksperimen dengan mengganti atribut method dari form dengan menggunakan metode GET dan perhatikan perbedaannya.
Berikutnya kita memiliki beberapa input dan sebuah input dengan atribut type="submit", ini adalah elemen tipe input yang nantinya akan dirender berbentuk sebuah button atau tombol yang digunakan untuk memulai proses pengiriman data ke server.
Server (PHP)
Dari HTML Form pada contoh sebelumnya, kita telah membuat sebuah form dengan tujuan submit.php, maka selanjutnya kita akan membuat sebuah file dengan nama submit.php di dalam direktori yang sama dengan index.php yang isi kodenya adalah :
<?php
$nama = $_POST['name'];
$email = $_POST['email'];
?>
<h3>Selamat Datang <?=$nama?></h3>
<p>Email anda : <?=$email?></p>Pada kode submit.php diatas, kita akan membaca data yang dikirimkan oleh client yaitu form yang kita buat sebelumnya. Pada form sebelumnya, kita mengirimkan dua data yaitu data nama melalui input dengan name="name" dan data email melalui input dengan name="email". Maka pada file submit.php kita akan membaca data yang sampai di server dengan menggunakan variabel array $_POST[ ] karena metode request yang kita gunakan pada form adalah POST, jika agan menggunakan metode GET maka gunakan variabel array $_GET[ ]. Kemudian gunakan nama dari input sebagai indeks array yang akan dibaca. Jangan salah dalam menggunakan nama indeks pada variabel $_GET ataupun $_POST, sesuaikan dengan nama dari input yang digunakan pada form. Mengapa pada PHP kita menggunakan variabel $_GET dan $_POST? karena secara default, setiap data yang diterima oleh server akan otomatis tersedia melalui kedua variabel tersebut bergantung pada metode request dan data yang dikirimkan. Pembahasan mengenai variabel request pada PHP akan kita bahas khusus pada artikel selanjutnya, stay tuned.. 😉.
Kemudian kita akan mencoba menjalankan aplikasi web sederhana kita dengan membuka browser lalu mengetikkan alamat URL berikut :
http://localhost/html_form/index.php
Maka akan muncul halaman form seperti gambar berikut (pastikan apache server sudah berjalan).
Mari kita abaikan dulu tampilan yang sangat tidak menarik dan berantakan 🤣. Selanjutnya isilah nama dan email terserah agan masing-masing, lalu klik tombol Submit untuk mengirimkan data yang agan input ke submit.php.
Hasil submit :
Cukup mudah bukan, pada contoh ini mungkin belum begitu terlihat betapa krusialnya HTML Form dan PHP karena hanya sebatas mengirimkan dan menampilkan data saja. Namun pemahaman mengenai HTML Form dan PHP ini cukup penting apalagi jika agan sudah mulai mengembangkan aplikasi yang menggunakan database atau aplikasi yang membutuhkan komputasi oleh server.
Agan dapat bereksperimen untuk keperluan lainnya misalnya untuk melakukan perhitungan, manipulasi teks dan lain sebagainya seperti contoh dibawah ini :
Baiklah sekian artikel kita kali ini, semoga dapat menambah wawasan untuk kita semua.. 😉
