Form HTML dengan PHP

Table of Contents

Form HTML dengan PHP

Form HTML dengan PHP

Jika Anda aktif melakukan browsing di dunia maya, Anda pasti tidak asing dengan form HTML. Form HTML ini dijumpai misalnya pada saat Anda diminta mengisi formulir pendaftaran di suatu situs, mengisi buku tamu, mengisi jajak pendapat, dan lain-lain. Nah, jika form tidak lagi asing bagi Anda, mungkin yang terasa asing adalah bagaimana form tersebut diolah.

Skrip-skrip seperti PHP, ASP, JSP, dan juga Perl dapat digunakan untuk mengolah form HTML tersebut. Tentu saja kali ini kita akan berbicara mengenai bagaimana mengolah form HTML dengan menggunakan PHP.

Untuk menyegarkan kembali ingatan Anda tentang form HTML, berikut akan diberikan sintaks penggunaan form HTML tersebut:

<FORM [NAME=namaform] METHOD={post|get} ACTION=pengolah>

…komponen form…

</FORM>

Untuk mengatur agar form tersebut diolah oleh skrip PHP, maka argumen ACTION harus diisi dengan nama sebuah file PHP. File inilah yang nantinya akan mengolah form tersebut.

Pertanyaan berikutnya adalah: apanya yang diolah? Tentu saja adalah input yang diberikan kepada form form tersebut. Seperti kita tahu, komponen form HTML dapat berupa kotak teks, radio button, dan check box. Nah, nilai-nilai yang diberikan ke dalam komponen-komponen inilah yang nantinya diolah. Nilai-nilai tersebut nantinya akan “ditangkap” oleh skrip PHP dan disimpan dalam bentuk variabel. Nama variabel yang menyimpannya sama dengan nama komponen form HTML yang didefinisikan oleh argumen NAME. Perhatikan contoh form berikut ini:

<HTML>

<HEAD>

<TITLE> Form </TITLE>

</HEAD>

<BODY>

<FORM NAME=”contoh” METHOD=”post” ACTION=”proses.php”>

Nama <INPUT TYPE=”text” NAME=”nama”> <BR>

Umur <INPUT TYPE=”text” NAME=”umur”> <BR>

Email <INPUT TYPE=”text” NAME=”email”> <BR>

<INPUT TYPE=”submit”>

</FORM>

</BODY>

</HTML>

Simpanlah form ini dengan nama cthform.html.

Nantinya jika form tersebut di-submit, input berupa nama, umur, dan email akan diolah di file proses.php. Di dalam file proses.php ini nantinya akan dikenal variabel dengan nama $nama, $umur, dan $email sesuai dengan nama komponen form HTML. Namun sayangnya hal ini tidak lagi berlaku sejak PHP 4.2.0, karena nilai register_globals di php.ini adalah off. Sebelum PHP 4.2.0 nilai register_globals adalah on. Sebagai gantinya, PHP memperkenalkan superglobals array untuk menangkap variabel-variabel tersebut. Superglobal arrays tersebut adalah $_POST dan $_GET. Penggunaan kedua variabel ini tergantung dari METHOD yang digunakan oleh form HTML.

Kedua array ini bersifat asosiatif dan sebagai indeksnya adalah nama dari komponen form HTML yang didefinisikan oleh argumen NAME. Jadi untuk contoh form di atas, pada file proses.php akan dikenal array dengan nama $_POST[‘nama’], $_POST[‘umur’], dan $_POST[’email’].

Tentu saja Anda bebas mengganti nilai register_globals di php.ini sesuai keinginan Anda, akan tetapi jika nantinya Anda membuat aplikasi dan web hosting Anda lakukan di suatu server yang nilai register_globalsnya adalah off, maka aplikasi Anda tidak akan jalan. Jadi akan lebih aman jika Anda menggunakan $_POST dan $_GET.

Sebagai alternatif, sejak PHP 3 juga tersedia array dengan nama $HTTP_POST_VARS dan $HTTP_GET_VARS. Kedua array ini bersifat asosiatif dan sebagai indeksnya adalah nama dari komponen form HTML yang didefinisikan oleh argumen NAME. Jadi untuk contoh form di atas, pada file proses.php akan dikenal array dengan nama $HTTP_POST_VARS[‘nama’], $HTTP_POST_VARS[‘umur’], dan $HTTP_POST_VARS[’email’].

Dengan pemahaman tersebut, sekarang kita akan membuat file proses.php yang mengolah input dari cthform.html di atas.

<HTML>

<HEAD>

<TITLE> Proses </TITLE>

</HEAD>

<BODY BGCOLOR=#FFFFFF>

<?

$nama = $_POST[‘nama’];

$umur = $_POST[‘umur’];

$email = $_POST[’email’];

Echo “<H1> Hallo $nama </H1>”;

?>

<H2> Selamat Datang Di Situs Kami </H2>

<?

Echo “Umur Anda saat ini adalah “;

Echo “$umur tahun <BR>”;

Echo “Alamat email Anda adalah “;

Echo “$email”;

?>

</BODY>

</HTML>

Untuk mencoba aplikasi tersebut ada dua cara yang dapat digunakan. (Hal ini sangat penting untuk diperhatikan karena seringkali para pemula melakukan kesalahan). Cara yang pertama adalah menjalankan file cthform.html secara offline atau mudahnya dengan mengklik ganda file tersebut. Cara ini sangat lazim dilakukan karena file berekstensi .html telah terasosiasi dengan browser sehingga klik ganda terhadap file tersebut akan otomatis menjalankan browser. Jika cara ini yang Anda lakukan, maka Anda harus mengedit cthform.html di bagian tag <FORM> menjadi sebagai berikut:

<FORM NAME=”contoh” METHOD=”post” ACTION=”http://localhost/proses.php”&gt;

Sesuaikan nilai ACTION dengan letak file proses.php di komputer Anda.

Cara kedua adalah dengan menjalankan file cthform.html secara online, jadi file tersebut dipanggil dengan menuliskan http://localhost/cthform.html di bagian address browser. Jika file cthform.html dan proses.php terletak dalam 1 direktori yang sama, maka file cthform.html di atas tidak perlu Anda edit lagi.

Jika file cthform.html dijalankan, hasilnya akan terlihat seperti gambar 1.

Setelah file cthform.html Anda jalankan, isikan form tersebut sesuai dengan kehendak Anda. Sebagai contoh, PCplus mengisi form tersebut dengan nama: Yahya, umur: 17, dan email: [email protected] Jika form tersebut di-submit, hasil yang diberikan akan seperti gambar 2.

Verifikasi form

Dalam pembuatan form, tentunya Anda ingin agar form tersebut diisi dengan benar. Untuk itu diperlukan suatu verifikasi form. Verifikasi form dapat dibuat dengan PHP (server side script) dan dapat juga dibuat dengan client side script seperti misalnya JavaScript. Jika verifikasi form tidak memerlukan data-data dari server sebagai pembanding, maka sebaiknya digunakan client side script. Pertimbangannya adalah client side script tidak memerlukan bandwidth karena langsung diolah oleh browser.

Berikut akan diberikan contoh verifikasi form baik menggunakan PHP maupun JavaScript.

Contoh yang pertama adalah verifikasi dengan menggunakan PHP. Ubahlah sedikit file form.htm pada atribut ACTION tag <FORM> dari “proses.php” menjadi “valid.php”. Kemudian buatlah file valid.php sebagai berikut:

<HTML>

<HEAD>

<TITLE> Verifikasi </TITLE>

</HEAD>

<BODY>

<?

// Verifikasi

$pesan = “Tekan tombol Back browser Anda”;

if (empty($_POST[‘nama’])) {

echo “Anda belum memasukkan nama Anda <BR>”;

echo “$pesan”;

} elseif (empty($_POST[‘umur’]) || ($_POST[‘umur’] < 0) || (!is_numeric($_POST[‘umur’]))) {

echo “Input umur Anda salah <BR>”;

echo “$pesan”;

} elseif (empty($_POST[’email’]) || (!ereg(“@”,$_POST[’email’]))) {

echo “Periksa kembali email Anda <BR>”;

echo “$pesan”;

} else {

$nama = $_POST[‘nama’];

$umur = $_POST[‘umur’];

$email = $_POST[’email’];

Echo “<H1> Hallo $nama </H1>”;

?>

<H2> Selamat Datang Di Situs Kami </H2>

<?

Echo “Umur Anda saat ini adalah “;

Echo “$umur tahun <BR>”;

Echo “Alamat email Anda adalah “;

Echo “$email”;

}

?>

</BODY>

</HTML>

Sekarang coba jalankan file form.htm dengan sengaja melakukan beberapa kesalahan, misalnya tidak mengisi nama, mengisi umur dengan bilangan negatif atau dengan karakter selain bilangan, mengisi alamat email tanpa tanda “@”. Setelah Anda menekan tombol submit, maka akan nampak pesan kesalahan sesuai dengan kesalahan yang Anda lakukan. Tetapi jika Anda mengisi form tersebut dengan benar, maka Anda akan menerima ucapan selamat datang.

Contoh yang kedua adalah verifikasi form dengan menggunakan JavaScript. Buatlah sebuah form baru dengan nama javaform.html sebagai berikut:

<HTML>

<HEAD>

<TITLE> Form </TITLE>

<SCRIPT LANGUAGE=”JavaScript”>

function pesan() {

var ceknama = document.forms[0].elements[0].value;

var cekumur = document.forms[0].elements[1].value;

var cekemail = document.forms[0].elements[2].value;

if (ceknama.length == 0) {

window.alert(“Anda belum memasukkan nama Anda”);

} else {

if ((cekumur < 0) || (isNaN(cekumur)) || (cekumur.length == 0)) {

window.alert(“Input umur Anda salah”);

} else {

if ((cekemail.length == 0) || (cekemail.indexOf(“@”,1) == -1)) {

window.alert(“Periksa kembali alamat email Anda”);

} else {

document.forms[0].submit();

}

}

}

}

</SCRIPT>

</HEAD>

<BODY BGCOLOR=#FFFFFF>

<H1> Selamat Datang di Situs Kami </H1>

Silakan isi identitas Anda <BR>

<FORM NAME=”identity” METHOD=”post” ACTION=”proses.php”>

<PRE>

Nama : <INPUT TYPE=”text” NAME=”nama”>

Umur : <INPUT TYPE=”text” NAME=”umur”> tahun

Email : <INPUT TYPE=”text” NAME=”email”>

<INPUT TYPE=”button” VALUE=”Submit” onClick=pesan()>

</PRE>

</FORM>

</BODY>

</HTML>

Pada form ini, jika Anda melakukan kesalahan pengisian, maka file proses.php tidak akan dipanggil, tetapi akan muncul kotak dialog yang berisi pesan kesalahan sesuai dengan kesalahan yang dilakukan. Kotak dialog tersebut kurang lebih akan terlihat seperti gambar.

Sumber : https://fascinasiansblog.com/