[Tutorial] Form PHP

Cara Mengirimkan Nilai Form HTML ke dalam PHPUntuk memahami Cara Mengirimkan Nilai Form HTML ke dalam PHP, kita akan langsung praktekdengan membuat 2 buah file, yakni halaman HTML yang berisi form dengan nama file form.html, danhalaman 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 danberada di dalam folder htdoc. Untuk contoh kali ini saya akan membuat folder belajar_form di dalamfolder htdoc XAMPP, sehingga untuk mengakses kedua halaman adalah dari alamat: http://localhost/belajar_form/form.html danhttp://localhost/belajar_form/proses.php (mengenai carainstall dan menggunakan XAMPP telah saya bahas pada tutorial Cara Menjalankan File PHP denganXAMPP)

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

1234567891011121314151617

<!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> www.d

uniai

lkom

.com

1

http://www.duniailkom.com/wp-content/uploads/2014/06/Tampilan-Struktur-Form-Sederhana-HTML.png

http://localhost/belajar_form/proses.php

http://www.duniailkom.com/cara-menjalankan-file-php-dengan-xampp/

http://localhost/belajar_form/form.html

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

Sebelum langsung membuat halaman proses.php, kita akan mencoba melakukan sedikit percobaandengan form HTML ini. Silahkan coba input kedua kotak isian form ini dengan nilai apapun dan kliktombol submit. Ketika anda menklik tombol submit, anda akan mendapati halaman error sepertiberikut ini:

Halaman error tersebut memberitahu kita bahwa halamanproses.php tidak ditemukan (yang memangbelum kita buat), namun perhatikan alamat URL pada address bar web browser, kita bisa melihat adapenambahan 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 diikutidengan ?nama=duniailkom&email=duniailkom%40gmail.com. Pesan inilah yang sebenarnya dikirim oleh halamanform.html sewaktu kita menklik tombol submit.

www.dun

iailko

m.co

m

2

http://www.duniailkom.com/wp-content/uploads/2014/06/Pengiriman-Form-dengan-method-GET-terlihat-di-Address-bar.png


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

Jika anda menambahkan objek form ketiga, maka alamat URL akan semakin panjang. Kita bisamelihat 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 tidakakan melihat karakterkarakter 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 membuathalaman 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 folderyang sama dengan form.html berada:

Sebelum kita membahas kode program PHP tersebut, silahkan buka kembali halaman form.html, isikotak inputnama dan email, lalu klik tombol Proses Data. Apabila tidak ada error, maka akan tampilhasil berikut ini:

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

12345

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

www.dun

iailko

m.co

m

3

http://www.duniailkom.com/wp-content/uploads/2014/06/Hasil-Input-Form-HTML-ditampilkan-dengan-PHP.png

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

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

‘nama_objek_form’ adalah nilai dari atribut name di dalamform. Jika kita memiliki tag dengan kodeHTML <input type=”text” name=”nama” />, maka untuk mengakses nilainya adalahdengan $_GET[‘nama’], dan untuk tag<input type=”text” name=”email” /> diakses dengannilai$_GET[‘email’].

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

Lalu ubah juga file proses.php menjadi:

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

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

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

12345

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

www.dun

iailko

m.co

m

4

http://www.duniailkom.com/tutorial-form-php-cara-menampilkan-hasil-form-html-dengan-php/

Keunggulan dan Kelemahan Method Form ‘GET’Kelemahan yang paling jelas jika kita menggunakanmethod=get adalah nilai dari form dapat dilihatlangsung di dalam URL yang dikirimkan. Jika anda membuat formuntuk datadata yang sensitifseperti password, maka form dengan method=get bukanlah pilihan yang tepat.

Form dengan method=get disarankan untuk form yang berfungsi menampilkan data, yaitu dimanahasil isian form hanya digunakan untuk menampilkan data, sesuai dengan arti kata get yang bisaberarti: ‘ambil’. Sehinggamethod=get sebaiknya digunakan untuk form yang ‘mengambil’ data daridatabase.

Salah satu penggunaan method=get yang umum digunakan adalah pada form pencarian (formsearch). Dengan membuat hasil inputan form terlihat jelas dalamURL, pengunjung web bisa denganmudah menebak ‘alur kerja’ dari situs kita. Bahkan pengunjung bisa membuat aplikasi pencariansendiri dengan memanfaatkan fasilitas ini.

Sebagai contoh, di dalam situs duniailkom, kotak inputsearch di kanan atas halaman ini dibuatdenganmethod=get. Misalkan kita ingin mencari seluruh postingan yang berkaitan dengan ‘FormPHP’, maka kita bisa mengetikkan kata ‘Form PHP’, kemudian menklik tombolenter di keyboard.Beberapa saat kemudian, hasil pencarian akan ditampilkan. Jika diperhatikan alamat URL pada webbrowser, akan berubah menjadi:

http://www.duniailkom.com/?s=form+php&submit=Search

Hasil URL ini merupakan query pencarian default yang digunakan oleh wordpress (CMS yagdigunakan diduniailkom).

Setelah nama domain www.duniailkom.com, selanjutnya kita melihat karakter ?s=form+php&submit=Search. Karakterkarakter ini adalah hasil format form dengan metode=get.Tanda ? menandakan awal nilai form, tanda + untuk menandakan spasi, dan tanda & untukmemisahkan objek form. Dengan memanfaatkan keterangan ini, kita bisa melakukan pencarianhanya melalui URL secara lansung, tanpa harus melalui form.

Sebagai contoh, jika anda ingin mencari semua postingan dengan kata kunci ‘Integer dalam PHP’,maka anda bisa menggunakan link berikut:

http://www.duniailkom.com/?s=integer+dalam+php&submit=Search

Untuk mengujinya, silahkan copypaste text tersebut keaddress bar web browser, dansitus duniailkom akan langsung menampilkan hasil pencarian dengan kata kunci ‘Integer dalamPHP’. Hal ini membuat halaman web menjadi lebih fleksibel.

Untuk contoh lainnya, jika anda mengikuti tutorial Form HTML ini dari Part 1, maka kita memilikifile proses.phpyang berfungsi untuk memproses hasil form. Fleksibilitas yang diberikan olehvariabel $_GET membuat kita bisa menampilkan nilai dalam proses.php tanpa menggunakan form

www.dun

iailko

m.co

m

5

http://www.duniailkom.com/

sama sekali.

Jika isi dari file proses.php adalah:

Kita bisa membuat langkah yang sama seperti contoh di dalam pencarian ‘Integer dalamPHP’ sebelumnya. Sekarang copy paste URL berikut ini kedalam address bar webbrowser (pastikan aplikasi XAMPP sudah berjalan dan fileproses.php berada di dalamfolder belajar_form):

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

Dan hasil tampilan halaman proses.php akan menampilkan nama fajar dan alamatemail [email protected]. Hasil ini didapat hanya dengan menginput nama tersebut dengan URL (tanpaform).

Dari contoh ini kita bisa melihat bahwa PHP mendeteksi nilai dari method=get, hanya berdasarkanURL yang diberikan. Cara ‘mengakali’ variabel $_GET tanpa form ini sering digunakan sebagaisarana untuk mengirim sebuah nilai dari satu halaman PHP ke halaman lainnya (sering digunakanuntuk menampilkan pesan error kepada user).

Karena sifat method=get yang harus menggunakan URLuntuk mengirim data form, PHP membatasihanya bisa memproses 1024 karakter saja. Sehingga jika anda memiliki form yang isinyakemungkinan akan melebihi 1024 karakter, sebaiknya menggunakan method=post.

Keunggulan dan Kelemahan Method Form ‘POST’Keuntungan mengunakan method=post dalam pembuatan form PHP adalah bahwa isi dari formtidak ditampilkan diURL, sehingga method ini sesuai untuk datadata yang bersifat sensitifseperti username dan password.

Sesuai dengan namanya, method=post disarankan digunakan untuk form yang digunakan untuk

12345

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

www.dun

iailko

m.co

m

6

http://www.duniailkom.com/wp-content/uploads/2014/06/Method-GET-dapat-ditampilkan-dengan-menambahkan-nilai-di-URL.png

menambah data (posting data) atau sebuah proses yang akan mengubah isi database, sepertiquery Insert, Delete. Contoh penggunaan method=post ini sering digunakan untuk formregister dan form login yang diaggap bersifat rahasia.

Jika kita membuat form untuk keperluan upload file (menggunakan tag <input type=file>), maka kitaharus membuat form dengan method=post.

Sebagai kesimpulan terakhir, pilihan antara method=getdengan method=post bergantung kepadatingkatsensitifitas data. Untuk data yang sensitif seperti passwordatau yang melakukan suatuperubahan ke database, sebaiknya menggunakan method=post. Namun untuk data yang ditujukanuntuk menampilkan, atau mengambil sesuatu dari database, sebaiknya menggunaanmethod=get.

www.dun

iailko

m.co

m

7

Pengertian Variabel SuperGlobal dalam PHPVariabel $_GET dan $_POST (dan juga $_REQUEST) di dalam PHP termasuk ke dalam kelompokvariabel yang dikenal dengan ‘Variabel SuperGlobal’.

Variabel SuperGlobals adalah variabel khusus di dalam PHP yang bisa diakses dari halaman PHPmanapun tanpa perlu mendefinisikannya terlebih dahulu, dan untuk mengakses variabel ini kita jugatidak perlu menggunakan keyword global (sebagaimana variabel global pada umumnya)

Selain variabel $_GET, $_POST dan $_REQUEST, PHP masih memiliki beberapavariabel superglobal lainnya seperti$_COOKIE, $_SESSION, dan $_SERVER. Ciri khusus untukvariabel global di dalam PHP, diawali dengan tanda $_.Namun pada tutorial ini kita hanya fokuskepada variabel$_GET, $_POST dan $_REQUEST.

Variabel $_GET, $_POST dan $_REQUEST merupakan tipe data array, sehingga untukmengakses nilainya, kita menggunakan cara akses array yakni dengan menggunakan kurung sikuseperti: $_GET[‘nama’] dimana nama adalah nilai dari atribut name pada objek form yang akandiakses.

Perbedaan variabel global $_GET, $_POST dan$_REQUESTSeperti yang telah kita praktekkan dalam tutorial Cara Menampilkan Hasil Form HTML dengan PHP,kita telah mengetahui bahwa jika form dikirim menggunaanmethod=get maka di dalam PHP kitamengaksesnya dengan variabel $_GET, namun jika form dibuat menggunakan method=post, kitamengaksesnya dengan variabel $_POST.

Bagaimana jika pada saat memproses form kita tidak mengetahui dengan pasti apakah form dikirimdengan GETatau POST? PHP menyediakan variabel $_REQUEST sebagai salah satu solusinya.Variabel $_REQUEST menampung nilai form yang dikirim dengan method=get,maupunmethod=post secara bersamaan.

Untuk mencobanya, silahkan jalankan file form.htmldengan isi kode HTML sebagai berikut:

12345678910111213

<!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 />

www.dun

iailko

m.co

m

8

Halaman form.html diatas persis sama dengan yang kita gunakan pada tutorial sebelumnya, namununtuk halamanproses.php, kita akan modifikasi dengan menggunakan variabel $_REQUEST:

Jika anda menjalankan form.html dan menklik tombol ‘Proses Data’, maka hasil form akanditampilkan sebagaimana mestinya. Anda juga bisa mengubah method form menjadi post, danvariabel $_REQUEST akan tetap menampilkan hasil form.

Jadi, variabel apa yang sebaiknya digunakan? apakah $_GET, $_POST atau $_REQUEST?Jawabannya tergantung kepada desain kode program yang dirancang. Jika anda dapat memastikanbahwa form akan dikirim denganmethod=get, maka gunakan variabel $_GET, jika from andamenggunakan method=post, maka gunakan $_POST, namun jika metodanya tidak dapat dipastikan,variabel superglobal $_REQUEST bisa menjadi solusi.

Selain menampung hasil form get dan post, variabel $_REQUEST juga menampungnilai daricookie, atau variabel superglobals $_COOKIE. Kita akan membahastentang cookie dalam tutorial PHP lainnya.

141516

E‐Mail: <input type="text" name="email" /> <br /> <input type="submit" value="Proses Data" > </form></body></html>

12345

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

www.dun

iailko

m.co

m

9


Pentingnya Melakukan Validasi Nilai FormNilai yang telah diinput oleh user atau pengunjung web, tidak bisa begitu saja di simpan langsung kedalam database. Karena kita tidak tahu apakah nilai tersebut telah sesuai dengan nilai yang kitakehendaki. Misalkan apakah nilai tersebut harus berupa angka, atau hanya bisa berupa huruf, atauapakah hanya bisa diinput dalam range tertentu saja.

Dalam kasus yang ekstrim, seorang user bisa saja memasukkan kode scriptatau tag HTML yangbisa merusak situs kita, hal ini dikenal dengan Crosssite Scripting. Sebuah proses validasi nilaimerupakan hal yang sangat penting dalam merancang form. Khusus untuk validasimencegah Crosssite Scripting dan juga HTML injection ini akan saya bahas pada tutorial formPHP berikutnya.

Dalam pembahasan tutorial validasi form ini, saya masih menggunakan contohhalaman form.html yang pernah kita buat pada tutorial sebelumnya, berikut adalah kode HTMLuntuk halaman form.html:

12345678910111213141516

<!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>

www.dun

iailko

m.co

m

10


Memeriksa Ketersediaan Variabel Form dengan Fungsiisset()Validasi pertama yang paling sederhana dan ‘hampir’ selalu ada dalam tiap proses validasi formdalam PHP adalah memeriksa apakah objek form tersebut sudah tersedia atau tidak. Sebagaicontoh sederhananya: apakah variabel $_GET[‘nama’] tersedia untuk diproses atau tidak.

Proses memeriksa ‘ketersediaan’ variabel ini menjadi penting karena PHPakan mengeluarkan pesanperingatan jika kita mengakses nilai sebuah variabel yang belum didefenisikan terlebih dahulu.

Sebagai contoh, jika kita mengakses langsung halaman proses.php (tanpa melaluihalaman form.html) dan tanpa menambahkan URL (seperti pembahasan pada tutorial PerbedaanMetode Pengiriman Form GET dan POST) PHP akan menampilkan pesan peringatan seperti berikutini:

Notice: Undefined index adalah pesan error yang terjadi karena kita langsung menampilkanvariabel $_GET[’nama’] dan $_GET[’email’] yang memang belum diset sebelumnya.

Untuk memeriksa apakah sebuah objek form telah didefenisikan atau telah diset sebelumnya, kitabisa menggunakan fungsi bawaan PHP: isset(). Fungsi isset() akan menghasilkan nilai true jikasebuah variabel telah didefenisikan, dan false jika variabel tersebut belum dibuat.

Sebagai langkah antisipasi, saya akan membuat proses validasi untuk menanganivariabel $_GET yang belum diset, berikut adalah modifikasi fileproses.php:

1234567

<?phpif (isset($_GET['nama'])) echo $_GET['nama']; echo "<br />";

www.dun

iailko

m.co

m

11

http://www.duniailkom.com/tutorial-form-php-part-2-perbedaan-metode-pengiriman-form-get-dan-post-dalam-php/

http://www.duniailkom.com/wp-content/uploads/2014/07/Pesan-kesalahan-error-PHP-karena-variabel-tidak-tersedia-Undefined-Index.png

Sekarang, file proses.php tidak akan menghasilkan error apabila diakses tanpa melalui form.html.Namun perubahan kode tersebut tidak terlalu berguna karena tidak memberikan pesan error yangjelas. Berikut adalah modifikasi file proses.php agar lebih informatif:

Pada kode PHP diatas saya mengharuskan nilai $_GET[‘nama’] dan$_GET[‘email’] tersedia, barunilai ditampilkan, namun jika tidak ada, akan ditampilkan pesan bahwa halaman ini hanya bisadiakses dari form.html.

Memeriksa Apakah Variabel Form Telah DiisiFungsi isset() yang kita bahas sebelumnya hanya memeriksa apakah sebuah objek form ada atautidak. Fungsi isset() tetap bernilai true meskipun user tidak mengisi form sama sekali (variabel formbernilai kosong, namun variabel tersebut dianggap telah diset).

Untuk memeriksa apakah sebuah objek form telah diisi atau tidak, kita bisa menggunakanfungsi: empty().

Fungsi empty() akan menghasilkan nilai false jika sebuah variabel telah diisi, dan bernilai true jikavariabel tersebut belum diisi. Dengan menggunakan stuktur IF dan fungsi empty(), kita bisa

8910111213

if (isset($_GET['email'])) echo $_GET['email'];?>

123456789

1011

<?phpif (isset($_GET['nama']) AND isset($_GET['email'])) echo $_GET['nama']; echo $_GET['email'];else echo "Maaf, anda harus mengakses halaman ini dari form.html";?>

www.dun

iailko

m.co

m

12

http://www.duniailkom.com/wp-content/uploads/2014/07/Pesan-kesalahan-yang-diset-saat-variabel-tidak-tersedia-dalam-PHP.png

membuat logika validasi objek form mana saja yang dianggap perlu (harus diisi) dan mana yangboleh dikosongkan. Dan kemudian menampilkan pesan error yang sesuai.

Sebagai contoh, saya akan memodifikasi file proses.php agar menampilkan pesan error jika kotakinput nama tidak diisi. Berikut adalah kode PHP pada halaman proses.php:

Dalam kode PHP diatas, saya memodifikasi beberapa bagian kode program.

Pada logika IF pertama, saya melakukan pengecekan apakahvariabel$_GET[‘nama’] dan $_GET[‘email’] tersedia atau tidak. Jika tersedia maka pindahkannilainya ke variabel $nama dan $email agar lebih mudah untuk diproses. Namun jika tidak,fungsi die() akan menghentikan proses dan menampilkan pesan kesalahan.

Pada logika IF kedua, saya memeriksa apakah variabel $nama kosong atau tidak denganfungsi !empty(). Fungsi !empty($nama) akan menghasilkan nilai true hanya jikavariabel $nama tidak kosong (perhatikan tanda !sebagai pembalik logika empty()). Namunjika $nama ternyata kosong (tidak diisi), maka tampilkan pesan kesalahan.

1234567891011121314151617181920

<?phpif (isset($_GET['nama']) AND isset($_GET['email'])) $nama=$_GET['nama']; $email=$_GET['email'];else die("Maaf, anda harus mengakses halaman ini dari form.html"); if (!empty($nama)) echo "Nama: $nama <br /> Email: $email";else die("Maaf, anda harus mengisi nama");?>

www.dun

iailko

m.co

m

13

http://www.duniailkom.com/wp-content/uploads/2014/07/Pesan-kesalahan-yang-diset-saat-variabel-form-kosong-dalam-PHP.png

Menyeleksi Tipe Data Objek FormSetelah objek form dipastikan tersedia, tidak kosong, validasi berikutnya yang biasanya dilakukanadalah memastikan tipe data dan range data yang diinput oleh user.

Untuk mengecek tipe data sebuah variabel, PHP menyediakan beberapa fungsi tergantung tipedatanya, yakni fungsi is_string(), is_int(),is_float(),is_numeric(),is_bool(),is_array(), dan is_object(). Sesuai dengan namanya, masingmasing fungsi tersebut akanmengecek tipe data dari variabel yang ditest.

Diantara fungsifungsi diatas, fungsi is_numeric() mungkin butuh sedikit penjelasan.Fungsi is_numeric() akan mengecek apakah sebuah tipe data merupakan angka baikitu float atau integer.

Khusus objek form variabel angka seperti umur, biasanya selain menyeleksi apakah nilainya berupaangka integer, kita mungkin juga menambahkan aturan bahwa nilai umur harus diatas 17 tahun.Untuk menambahkan fungsi ini, fungsi is_int() dapat dikombinasikan dengan struktur IF.

Sebagai contoh saya akan menambahkan validasi untuk tag input namabahwa nama tidak bolehdiisi dengan angka. Untuk keperluan ini saya akan menggunakan fungsi is_numeric(). Berikutadalah modifikasi file proses.php:

Dalam kode diatas, saya menambahkan 1 lagi logika IF untuk menyeleksi apakahvariabel $nama berisi angka numerik (integer atau float). Jika $namabertipe numerik, maka

123456789101112131415161718192021222324252627

<?phpif (isset($_GET['nama']) AND isset($_GET['email'])) $nama=$_GET['nama']; $email=$_GET['email'];else die("Maaf, anda harus mengakses halaman ini dari form.html"); if(empty($nama)) die("Maaf, anda harus mengisi nama");else if (is_numeric($nama)) die("Maaf, nama harus berupa huruf"); else echo "Nama: $nama <br /> Email: $email"; ?>

www.dun

iailko

m.co

m

14

tampilkan pesan error.

Di dalam tutorial form PHP kali ini kita telah mempelajari cara menvalidasi nilai inputan form. Namunapa yang telah kita pelajari disini hanya sebagian kecil dari proses validasi yang sebenarnya harusdilakukan. Misalnya, untuk menfilter variabel $nama diatas, akan lebih cocok menggunakan regularexpression daripada fungsi is_numeric(), namun yang penting kita telah bisa’menangkap’ carapembuatan validasi form.

Di dalam tutorial berikutnya, masih berkaitan dengan proses validasi form, kita akan mempelajaritentang Cara Mencegah Crosssite Scripting dan HTML injection.

www.dun

iailko

m.co

m

15

http://www.duniailkom.com/wp-content/uploads/2014/07/Pesan-kesalahan-yang-diset-saat-variabel-nama-diisi-dengan-angka.png

http://www.duniailkom.com/tutorial-form-php-cara-membuat-validasi-form-php-fungsi-isset-dan-empty/

Pengertian Crosssite Scripting dan HTML injectionCrosssite Scripting atau sering disingkat dengan XSSadalah jenis serangan ke sebuah situsdengan cara’menyisipkan’ kode script (biasanya JavaScript) ke dalam sebuah situs. Hal ini hanyaakan berhasil jika situs tersebut memiliki fitur untuk menampilkan kembali isian form ke web browser,seperti form komentar. Sedangkan HTML injection adalah istilah yang lebih spesifik kepadacara’menyisipkan’ kode HTML kedalam sebuah situs.

Sebagai programmer web, penanganan untuk Crosssite Scripting maupun HTMLinjection merupakan hal yang sangat penting, terutama dalam pembuatan kode form dengan PHP.Karena form pada dasarnya dapat diinput oleh siapa saja, maka kita perlu memproteksi situs darikodekode berbahaya yang bisa diinput oleh user melalui form.

Contoh Crosssite Scripting dan HTML injectionAgar lebih memahami maksud dari Crosssite Scriptingdan HTML injection, kita akan cobamenginputnya melalui contoh halaman form.html dan proses.php dari tutorial sebelumnya.

Silahkan buka halaman form kita (form.html), lalu input kode dibawah ini kedalam dalam salah satukotak inputan form:

Dan anda akan mendapati tampilan berikut:

Tampilan tersebut adalah hasil dari kode JavaScript yang baru saja kita input melalui form. Kodetersebut dapat berjalan karena pada halaman proses.php kita langsung menampilkan data yang

<script>alert('Selamat datang di duniailkom')</script>

www.dun

iailko

m.co

m

16

http://www.duniailkom.com/wp-content/uploads/2014/07/Tampilan-Script-Injection-pada-halaman-Form.png

diinput oleh user tanpa melakukan proses filter.

Hal ini sangat berbahaya karena dengan kode JavaScriptseseorang bisa melakukan ’hampirsegalanya’ dengan situs kita. Tidak hanya sekedar menampilkan ucapan selamat seperti kode diatas,tetapi seseorang juga bisa merubahbackground, mengubah tampilan seluruh web, bahkanmengarahkan pengunjung ke situs lain (redirect).

Hasil diatas saya peroleh menggunakan web browser mozilla firefox. Ketika sayamenggunakan google chrome, tampilan javascript tersebut tidak muncul karena googlechrome memiliki mekanisme ‘pencegahan‘ kode javascript internal ketika diinput melaluiform.

Sebagai contoh lainnya, seseorang bisa menginput kode berikut ke dalam kotak input nama:

Walaupun kode diatas tidak mengandung script, namun kode HTML tersebut akan membuat tampilanhasil form menjadi berantakan (bayangkan jika kita memiliki halaman yang berisi tabel berisi namanama seluruh user, dan kode diatas akan menghancurkan desain web yang telah dirancang).

Cara Mencegah Crosssite Scripting dan HTMLinjectionSalah satu cara sederhana untuk menghindari Crosssite Scripting dan HTML injection adalahdengan membuat karakterkarakter yang memiliki ’makna’ di dalam HTML dan JavaScript untuk

Dunia <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> Ilkom

www.dun

iailko

m.co

m

17

http://www.duniailkom.com/wp-content/uploads/2014/07/Tampilan-HTML-Injection-pada-halaman-Form.png

diubah menjadi named entity, yaitu menkonversi karakter khusus seperti < menjadi <, dankarakter > menjadi >. Atau cara lainnya adalah dengan menghilangkan sama sekali seluruh tagHTML atau scriptdari inputan user.

Penjelasan lebih lanjut tentang named entity (dan juga numeric entity) karakter HTMLpernah kita bahas pada tutorial Cara Memasukkan Karakter Khusus ke dalam HTML.

Untuk kedua keperluan ini, PHP memiliki fungsihtmlspecialchars() dan fungsi strip_tags().

Fungsi htmlspecialchars() akan mengkonversi seluruh karakter ’khusus’ HTML menjadi namedentity sehingga tidak akan di ’proses’ oleh web browser. Sedangkan fungsistrip_tags() akanmenghapus seluruh tag HTML dari inputan user.

Sebagai contoh, kita akan mengupdate halamanproses.php agar bisa mencegah seseorangmenyisipkanCrosssite Scripting dan HTML injection. Berikut adalah perintah PHP pada fileproses.php:

Di dalam kode diatas, saya hanya menambahkan fungsihtmlspecialchars() untuk variabel $nama,dan fungsistrip_tags () untuk variabel $email.

1234567891011121314151617181920212223242526272829

<?phpif (isset($_GET['nama']) AND isset($_GET['email'])) $nama=$_GET['nama']; $email=$_GET['email']; $nama=htmlspecialchars($nama); $email=strip_tags($email);else die("Maaf, anda harus mengakses halaman ini dari form.html"); if(empty($nama)) die("Maaf, anda harus mengisi nama");else if (is_numeric($nama)) die("Maaf, nama harus berupa huruf"); else echo "Nama: $nama <br /> Email: $email"; ?>

www.dun

iailko

m.co

m

18

http://www.duniailkom.com/tutorial-text-html-cara-menampilkan-dan-memasukkan-karakter-khusus-ke-dalam-html/

Untuk mengujinya, silahkan anda coba memasukkan kode JavaScript kita sebelumnya ke dalamkotak input nama, yakni:

dan nilai berikut ke dalam kotak input email:

Kemudian perhatikan hasil tampilan dari proses.php. Seperti yang dirancang, kali ini hasil inputantersebut akan difilter agar lebih aman.

Jika anda melihat kode yang dihasilkan, maka akan terlihat bahwa fungsi htmlspecialchars() akanmengubah

menjadi

Perhatikan bahwa karakter khusus seperti < dan > telah diubah menjadi named entity.

Sedangkan untuk kotak inputan email, seluruh tag <br>telah di filter dan dihapus secara otomatis.

<script> alert('Selamat datang di duniailkom')</script>

Dunia <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> Ilkom



www.dun

iailko

m.co

m

19

http://www.duniailkom.com/wp-content/uploads/2014/07/Hasil-Validasi-Inputan-Form-untuk-Mencegah-HTML-Injection-pada-halaman-Form.png

http://www.duniailkom.com/wp-content/uploads/2014/07/Validasi-Inputan-Form-untuk-Mencegah-HTML-Injection-pada-halaman-Form.png

Validasi dengan htmlspecialchars atau strip_tags?Pilihan apakan menggunakan fungsi htmlspecialchars()atau strip_tags() tergantung kepada alurlogika form yang kita buat. Untuk isian form seperti user_name, email, danalamat akan lebih amanjika kita tidak membolehkan tag HTML sama sekali (menggunakan fungsi strip_tags()), namun untukkotak form komentar, mungkin kita akan membolehkan beberapa tag untuk diproses seperti tag <b>,tag <i>, atau mungkin juga tag <a>.

Fungsi strip_tags() memiliki argumen kedua yang bisa diisi dengan tagtag HTML apa saja yang’dibolehkan’. Jika kita membolehkan tag <a>, <b> dan tag <i> untuk variabel$komentar, makapenulisannya bisa dibuat menjadi:

Sedangkan untuk fungsi htmlspecialchars(), jika anda ingin karakter tanda kutip ( ’ ) juga diubahmenjadi named entity, kita bisa menambahkan 1 parameter optional untukfungsi htmlspecialchars(), dengan pilihan ENT_QUOTES. Sehingga dalam contoh variabel $nama,kita bisa menulisnya menjadi:

Dengan demikian, jika diinput:

Akan diproses menjadi:

$komentar=strip_tags($komentar, '<a><b><i>').

$nama=htmlspecialchars($nama, ENT_QUOTES);

<script>alert('Selamat datang di duniailkom')</script>


www.dun

iailko

m.co

m

20

http://www.duniailkom.com/wp-content/uploads/2014/07/Hasil-Validasi-Inputan-Form-untuk-Mencegah-HTML-Injection-pada-halaman-Form.png

Perhatikan bahwa karakter kutip ( ‘ ) diganti menjadi kode&#039.

Dalam tutorial kali ini, kita telah membahas penggunaan fungsi htmlspecialchars(), danfungsi strip_tags() untukmembuat form kita lebih aman. Dalam tutorial berikutnya, kita akanmembahas trik dalam menampilkan pesan kesalahan di halaman form.html, bukan dihalamanproses.php seperti yang kita tampilkan pada tutorial ini dan tutorial form PHP sebelumnya.

www.dun

iailko

m.co

m

21

http://www.duniailkom.com/tutorial-form-php-validasi-form-untuk-mencegah-cross-site-scripting-dan-html-injection/

Cara Mengirim Variabel Antar Halaman PHPDalam PHP terdapat beberapa cara untuk mengirimvariabel antar halaman. Salah satunya adalahdengan memanfaatkan cara pengiriman form denganmethod=GET. Jika kita mengirim form denganmetode GET, maka hasil dari form akan ditambahkan di dalam menggunakan variabelsuperglobal $_GET.

Sebagai contoh, jika di dalam form terdapat kotak input dengan atribut name=user_name yang diisidengan’duniailkom’, maka ketika dikirim untuk diproses ke halaman proses.php, didalam URL akan menjadi:

dan didalam halaman proses.php, variabel$_GET[’user_name’] akan berisi ’duniailkom’.

Dengan cara ini kita bisa mengirim variabel dari sebuah halaman ke halaman lain. Misalkan kitamembuat sebuah kondisi logika dengan PHP, dan jika logikanya salah maka tampilkan sebuah linkyang menyatakan bahwa alamat tidak lengkap. Pengiriman pesan ini bisa ditulis sebagai berikut:

Ketika user menklik link tersebut, pada halamanproses.php akan memiliki sebuahvariabel $_GET[’pesan’]yang berisi: ’alamat tidak lengkap’.

Kita bisa memanfaatkan ini untuk berbagai hal, dan dalam tutorial kali ini kita akan menggunakan caraini untuk menampilkan pesan kesalahan dari form.

Untuk dapat mengirimkan variabel melalui URL, terdapat beberapa aturan penggunaankarakter. Berikut adalah contoh hasil pengiriman dari sebuah halaman:

perhatikan bahwa tanda ’?’ digunakan untuk mengawali pengiriman variabel,tanda ’=’digunakan sebagai pengisi nilai variabel, tanda’&’ untuk memisah’kan antaravariabel yang satu dengan yang lain, dan tanda ’+’ sebagai pengganti karakter ’spasi’.

Redirect halaman dengan fungsi header(Location:)Fungsi header() di dalam PHP digunakan untuk memprosesHTTP header. Fungsi header() memilikibanyak fitur, namun yang akan kita manfaatkan adalah fitur untuk mengirim user ke halaman lain ataudikenal dengan istilah:redirect.

Untuk ’mengirim’ user ke sebuah halaman, kita menggunakan Location:halaman.html sebagai

proses.php?user_name=duniailkom

proses.php?pesan=alamat+tidak+lengkap.

proses.php?nama=dunia_ilkom&[email protected]&pesan=welcomewww.d

uniai

lkom

.com

22

argumen fungsi header(). Misalkan kita ingin mengirim user ke halaman pendaftaran.html padasitus duniailkom.com, maka penulisan fungsi header() adalah sebagai berikut:

Halaman yang dituju tidak harus berupa halaman HTML, tetapi juga halaman PHP, atau bahkan filemultimedia seperti gambar. Fitur ini akan kita manfaatkan untuk menampilkan pesan kesalahan formdalam PHP.

Cara Menampilkan Pesan Kesalahan FormDalam tutorial sebelumnya tentang Validasi Form untuk Mencegah Crosssite Scripting dan HTMLinjection, kita telah membuat proses validasi form dan menampilkan pesan kesalahan formberdasarkan kondisi yang terjadi. Namun pesan kesalahan tersebut hanya ditampilkan padahalaman proses.php. Jika user ingin mengubah isian form, ia terpaksa kembalikehalaman form.html untuk memperbaiki kesalahan form tersebut dengan cara mengetik manualdi web browser.

Salah satu fitur pengisian form yang umum digunakan adalah ketika isian form ditemukan kesalahan,maka user akan dikembalikan ke halaman awal form, beserta pesan kesalahan. Untuk menghasilkanfitur seperti ini, kita akan memanfaatkan fungsi PHP: header().

Kembali menggunakan halaman form.html danproses.php yang kita gunakan dalam tutorialtutorialsebelumnya, kali ini saya akan memodifikasi halamanproses.php agar bisa memanfaatkanfungsi header().Berikut adalah modifikasi file proses.php:

header("Location: http://www.duniailkom.com/pendaftaran.html")

12345678910111213141516171819202122232425

<?phpif (isset($_GET['nama']) AND isset($_GET['email'])) $nama=$_GET['nama']; $email=$_GET['email']; $nama=htmlspecialchars($nama); $email=strip_tags($email);else header("Location:form.php?error=variabel_belum_diset"); if(empty($nama)) header("Location:form.php?error=nama_kosong");else if (is_numeric($nama)) header("Location:form.php?

www.dun

iailko

m.co

m

23

http://www.duniailkom.com/pendaftaran.html

http://www.duniailkom.com/tutorial-form-php-validasi-form-untuk-mencegah-cross-site-scripting-dan-html-injection/

Dari kode proses.php kita sebelumnya, saya hanya mengubah bagian error menggunakanfungsi header(). Namun perhatikan bahwa saya mengirimkan variabel error kepadahalaman form.php, pesan inilah yang akan diproses pada halaman form.php.

Untuk halaman form.html, saya akan mengubah nama file menjadi form.php. Perubahan inidiperlukan karena pada halaman form.html memerlukan proses PHP untuk menangani variabel erroryang dikirim dari halamanproses.php.

Berikut adalah kode dari halaman form.php:

26272829

error=nama_harus_huruf"); else echo "Nama: $nama <br /> Email: $email"; ?>

1234567891011121314151617181920212223242526272829303132333435363738

<?php//ambil nilai variabel errorif (isset($_GET['error'])) $error=$_GET['error'];else $error=""; //siapkan pesan kesalahan$pesan="";if ($error=="variabel_belum_diset") $pesan="<h3>Maaf, anda harus mengakses halaman ini dari form.php</h3>";if ($error=="nama_kosong") $pesan="<h3>Maaf, anda harus mengisi nama</h3>";if ($error=="nama_harus_huruf") $pesan="<h3>Maaf, nama harus berupa huruf</h3>";?> <!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

www.dun

iailko

m.co

m

24

Pada halaman form.php saya menambahkan beberapa kode PHP di awal halaman. Kode PHP iniberfungsi untuk menangani variabel error yang dikirimkan dari halamanproses.php.

Setelah memindahkan variabel $_GET[‘error’] ke dalam variabel $error agar mudah diakses,selanjutnya saya membuat beberapa logika IF untuk memeriksa pesan error, dan memberikan‘pesan kesalahan’ yang ingin ditampilkan kedalam variabel $pesan.

Variabel $pesan ini kemudian akan disisipkan di awal tag form.

Untuk mengujinya, silahkan anda mencoba form.phptersebut dan klik tombol ‘Proses Data’ tanpamemberikan input apaapa di dalam form, dan sekarang pesan kesalahan akan tampil dihalaman form.php.

Anda bisa mengeksplorasi penggunaan fungsi header() ini lebih jauh. Misalkan jika isianform telah sesuai, maka anda bisa meneruskan user ke halaman lain,

3940414243444546

</h2> <?php echo $pesan; ?> <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>

www.dun

iailko

m.co

m

25

http://www.duniailkom.com/wp-content/uploads/2014/07/Tampilan-Error-di-halaman-Form-menggunakan-fungsi-header.png

seperti sukses.php, sehingga pengaturan kode PHP lebih rapi dimanahalaman proses.php murni digunakan untuk penanganan proses form. Darihalamanproses.php ini kita bisa ‘membawa‘ user ke halaman lain yang khususmenangani hal tersebut.

Penanganan cara kesalahan form seperti ini membuat form menjadi lebih user friendly. Jika andamemahami CSS, biasanya pesan kesalahan ini ditampilkan dengan style yang berbeda dari judulform agar lebih ‘pas’, namun dalam tutorial ini anda setidaknya telah mengetahui trikuntukmenampilkan pesan kesalahan form dengan PHP. Silahkan berekplorasi dan menambahkanobjekobjek form lain sebagai bahan latihan.

www.dun

iailko

m.co

m

26

http://www.duniailkom.com/tutorial-form-php-cara-mengirim-variabel-pesan-antar-halaman-php/

Form yang Otomatis Terisi jika Terjadi KesalahanPada saat kita mendaftar suatu situs menggunakan form, ketika ada suatu kesalahan (misalnya username yang diinginkan sudah ada yang menggunakan), maka kita dikembalikan ke halaman registersemula dengan pesan kesalahan. Jika anda perhatikan, seluruh form yang telah diisi sebelumnyasecara otomatis terisi kembali sehingga kita tidak perlu menginput semua form, namun hanyamemperbaiki bagian yang salah.

Form yang terisi sendiri ini akan sangat membantu user untuk mengoreksi isian form yang salah.Bayangkan jika kita mengisi form dengan 15 kotak inputan, hanya kemudian terpaksa menginputkembali semua kotak inputan tersebut karena salah mengisi format tanggal pada salah satu inputan.

Memanfaatkan variabel $_GET dan fungsi headerUntuk dapat membuat form yang otomatis terisi ketika terjadi kesalahan, kita akan memanfaatkanfitur variabel$_GET dan fungsi header() seperti dalam tutorial sebelumnya.

Triknya adalah menyambung URL dengan isian form sebelumnya, lalu menampilkannya kembali didalam form. Agar lebih mudah, mari kita langsung ke contoh program.

Kali ini saya akan memodifikasi kode program proses.phpagar bisa ‘mengembalikan’ nilai isian formketika terjadi kesalahan. Berikut adalah contoh program proses.php:

1234567891011121314151617181920212223242526272829

<?phpif (isset($_GET['nama']) AND isset($_GET['email'])) $nama=$_GET['nama']; $email=$_GET['email']; $nama=htmlspecialchars($nama); $email=strip_tags($email); $isi_form="&nama=$nama&email=$email";else header("Location:form.php?error=variabel_belum_diset");if(empty($nama)) header("Location:form.php?error=nama_kosong".$isi_form);else if (is_numeric($nama)) header("Location:form.php?error=nama_harus_huruf".$isi_form); else

www.dun

iailko

m.co

m

27

Perhatikan pada baris ke.. dimana saya menambahkan variabel $isi_form yang ditujukan untuk‘menyambung URL’. Jika variabel $nama berisi duniailkom, danvariabel$emailberisi [email protected], maka isi variabel $_isi form akan menghasilkanstring sebagai berikut:

String tersebut selanjutnya akan ditambahkan kedalam fungsi header() untuk dikirim kehalaman form.php(dikembalikan ke halaman asal form)

Pada halaman form.php kita akan menampung nilai dari variabel $_isi form ini dan menampilkannyadi dalam kotak input. Berikut adalah modifikasi halaman form.php:

echo "Nama: $nama <br /> Email: $email"; ?>

&nama=duniailkom&[email protected]

1234567891011121314151617181920212223242526272829303132333435363738

<?php//ambil nilai variabel errorif (isset($_GET['error'])) $error=$_GET['error'];else $error="";//siapkan pesan kesalahan$pesan="";if ($error=="variabel_belum_diset") $pesan="<h3>Maaf, anda harus mengakses halaman ini dari form.php</h3>";if ($error=="nama_kosong") $pesan="<h3>Maaf, anda harus mengisi nama</h3>";if ($error=="nama_harus_huruf") $pesan="<h3>Maaf, nama harus berupa huruf</h3>"; //Siapkan isian form jika terjadi kesalahanif (isset($_GET['nama']) AND isset($_GET['email'])) $nama=$_GET['nama']; $email=$_GET['email'];else

www.dun

iailko

m.co

m

28

Dalam halaman form.php ini saya menambah kode PHP untuk ‘menampung’ hasil kiriman darihalaman proses.phpdengan fungsi $_GET[‘nama’] dan fungsi $_GET[‘email’],kemudianmemindahkannya kedalam variabel $nama dan$email agar memudahkan penulisan program.

Selanjutnya pada tiap objek form, saya menambahkanatribut value yang diisi dengan nilaivariabel $nama dan$email. Dengan demikian, ketika halaman form.phpmenerimapesan nama dan email dari halaman proses.php, kotak isian tersebut akan langsung terisi.

Untuk mencobanya, kita harus membuat isian form nama dengan angka dan mengisi isian email.Kenapa harus mengisi kotak isian nama dengan angka? Karena dengan mengisi form secara salah(dimana nama seharusnya tidak boleh diisi dengan angka) maka logika IF untuk menangani pesankesalahan akan aktif dan user akan dikembalikan ke halaman form.php beserta isian form.

Ketika user dikembalikan ke halaman form.php, perhatikan bagian web address pada web browser,maka kita bisa melihat ‘pesan’ yang diteruskan dari halaman proses.php. Karena kita telah membuatkode untuk menampung ‘pesan’ini, kotak isian form nama dan email akan terisi sendiri secaraotomatis.

394041424344454647484950515253545556

$nama=""; $email="";?><!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> <?php echo $pesan; ?> <form action="proses.php" method="get"> Nama: <input type="text" name="nama" value="<?php echo "$nama" ?>"/> <br /> E‐Mail: <input type="text" name="email" value="<?php echo "$email" ?>" /> <br /> <input type="submit" value="Proses Data" > </form></body></html>

www.dun

iailko

m.co

m

29

http://www.duniailkom.com/wp-content/uploads/2014/07/Tampilan-Form-yang-terisi-sendiri-menggunakan-fungsi-header.png

Dalam tutorial kali ini, kita telah mempelajari salah satu tips untuk membuat form menjadi lebih mudahdigunakan. Walaupun tidak harus, namun form yang terisi sendiri akan membuat pengunjung situslebih efisien dalam mengisi form ketika terjadi kesalahan.

Dalam tutorial ini saya hanya menggunakan 2 buah kotak isian sematamata untukmenyederhanakan pembahasan, namun anda bisa mengembangkannya untuk seluruh kotak isianyang ada didalam form, termasuk seperti radio button,textarea, dan objek form lainnya.

www.dun

iailko

m.co

m

30

http://www.duniailkom.com/wp-content/uploads/2014/07/Tampilan-Form-yang-terisi-sendiri-menggunakan-fungsi-header.png

[Tutorial] Form PHP

Documents

Transcript of [Tutorial] Form PHP