#3 Smarty-Captcha

captchaDunia si Dudun tidak bisa jauh dari dunia maya. Hampir setiap ia mendapatkan kesulitan dalam menyelami dunia komputer tak berujung, ia selalu mencari jawabannya di Internet. Seiring dengan berjalannya waktu, si Dudun pun semakin tertarik dengan web. Ia pun ingin mencoba membuat situs web.

Dari hasil berselancar di Internet, si Dudun mendapatkan informasi mengenai bahasa pemrograman yang banyak digunakan untuk membuat web site, yaitu PHP[1]. Semakin dalam menggali, semakin si Dudun mendapatkan informasi mengenai beberapa teknik dan alat bantu berbasis PHP untuk mempercepat proses pembuatan web tersebut. Salah satunya adalah teknik template dengan menggunakan Smarty[2].

Singkat cerita, si Dudun membutuhkan sebuah mekanisme anti-spam untuk halaman registrasi situs yang akan dibuatnya. Setelah tanya sana, tanya sini, buka sana, buka sini akhirnya ia mendapatkan sebuah sistem bernama Captcha[3].

Awalnya, si Dudun terus mencari dan mencoba berbagai macam Captcha yang disediakan di Internet. Namun karena pengetahuan PHP-nya yang masih awam, si Dudun kebingungan bagaimana sih caranya memasukkan Captcha tersebut ke dalam program PHP-nya[4]. Iseng, si Dudun memasukkan kata pencarian`smarty captcha` ke dalam mesin pencari. Setelah menunggu beberapa saat, si Dudun akhirnya berhasil mendapatkan sesuatu.

Sungguh sangat kebetulan, ada yang sudah membuat plug-in Captcha untuk Smarty[5]. Dengan penuh semangat, si Dudun pergi menuju tautan unduhnya[6]. Dengan tak sabar, si Dudun menunggu pengunduhan file plug-in tersebut. Akhirnya, saat yang ditunggu-tunggu telah tiba, pengunduhan telah selesai.

Dengan jantung berdebar kencang, si Dudun perlahan mengarahkan penunjuk tetikusnya[7] ke arah plug-in yang diunduhnya. Klik. Klik. Si Dudun membuka dan melihat isi file-nya. Ada sebuah file teks berisi instruksi, dua buah file php, dan satu buah folder berisi file konfigurasi plug-in. Sesaat si Dudun membaca petunjuk yang disertakan dalam file tersebut. Sambil garuk-garuk kepala, si Dudun mencoba melakukan apa yang diperintahkan dalam file tersebut.

Pertama, ia menyalin satu folder plugin ke dalam direktori plugin Smartynya. Folder plugin ini memiliki dua buah file, yaitu function.captcha.php dan captcha.class.php. Kemudian ia juga menyalin file captcha.php dan validate.php ke dalam direktori teratas webnya.

Kedua, ia memindahkan file font yang berekstensi ttf ke dalam direktori template-nya. Meskipun pada instruksi digunakan arial.ttf, namun ia mencoba menggunakan tahoma.ttf. Setelah itu, sesuai dengan petunjuknya, ia mengubah baris ke-14 dalam function.captcha.php.

...
$font = realpath ($smarty->template_dir) . "/tahoma.ttf" ;
...

Ketiga, ia mengubah file function.captcha.php baris ke-14 dan captcha.php baris ke-2 dengan “crypt[8]“. Kemudian ia membuat satu folder kosong[9] pada direktori paling atas proyek webnya.

Si Dudun berhenti sebentar untuk memahami petunjuk ke-empat sampai ke-enam. Sambil menggaruk kepalanya yang tidak gatal, si Dudun langsung meloncat ke petunjuk ke-enam. Ia menuliskan pendefinisian di kode yang akan menampilkan formulir registrasi.

...
define ('CAPTCHA_SALT', 'kjhfgkjhfsdkjghskjd hkjfdnkmbn ,msdnbskjh');
//kode si Dudun di sini
...

Lalu, ia mengubahnya sesuai dengan petunjuk menjadi seperti ini:

...
define ('CAPTCHA_SALT', 'qwertyuiopasdfghjkl;'zxcvbnm,./');
// kode si Dudun di sini
...

Selanjutnya, si Dudun menambahkan include validasi ke dalam kode yang ia gunakan untuk pengecekan formulir.

...
include ‘validate.php';
...

Karena belum mengerti dengan langkah selanjutnya, si Dudun kemudian mencoba memasukkan tag Captcha ke dalam template yang menampilkan formulir registrasinya.

...
<div id=form>
{captcha [name="captcha"] [length=4]}
</div>
...

Dengan mengucap doa, si Dudun me-refresh browsernya yang sudah menampilkan halaman registrasi. Kepala si Dudun terasa pening setelah melihat pesan error yang muncul.

Fatal error: Smarty error: [in register.html line 72]: syntax error: invalid attribute name: '[name' (Smarty_Compiler.class.php, line 1547) in ...

Tak putus asa, si Dudun mencoba mencari pemecahan masalahnya di dunia maya. Dari pengalaman seseorang di sebuah forum, ia mendapatkan pemecahannya: menghilangkan tanda kurung siku.
...
<div id=form>
{captcha name="captcha" length=4}
</div>
...

Setelah mengganti template-nya, si Dudun kembali me-refresh browsernya. Kepalanya pening kembali ketika melihat pesan error lagi pada browsernya. Kali ini pesannya berbeda dengan pesan sebelumnya.

Fatal error: Call to undefined function imagecreate() in ...

Sekali lagi si Dudun berusaha mencarunya di Internet. Namun kali ini keberuntungan belum berpihak padanya. Dia tidak menemukan satu petunjuk pun mengenai pesan error tersebut. Si Dudun kemudian memberanikan diri untuk mengajukan pertanyaan ke sebuah forum dengan harapan akan ada yang bisa membantunya memberi solusi.

Setelah dengan berpikir keras dalam penyusunan kalimat pertanyaannya, si Dudun kemudian mengirimkan pertanyaannya. Si Dudun terdiam sejenak pada halaman forum tersebut, berharap akan ada yang segera membalas. Lima menit kemudian, karena tidak ada yang membalas[10], si Dudun akhirnya memutuskan untuk pulang dan beristirahat.

Keesokan harinya, dengan semangat empat lima, si Dudun mengecek kembali forum tersebut. Ada sebuah jawaban menantinya di sana. Ternyata si Dudun belum meng-install GDlib. Jawaban tersebut menyarankan si Dudun untuk mengunduh dan meng-installnya. Karena merasa aneh, si Dudun kemudian menanyakan kepada temannya yang sudah lebih lama berkecimpung dalam dunia PHP. Katanya ternyata GDlibnya sudah ter-install, Cuma mungkin belum diaktifkan saja. Si Dudun kemudian mencarinya ke dalam file php.ini[11]. Di sini, ia mencari kata-kata ‘gd’. Setelah mendapatkannya, si Dudun menghilangkan tanda komentar di awal baris konfigurasi gd tersebut.
...
extension=php_gd2.dll
...

Sambil menahan napas, si Dudun me-refresh browsernya. Namun tidak ada perubahan: pesan error masih saja muncul di sana. Plok!! Si Dudun menepuk dahinya. Rupanya ia melupakan sesuatu, ia belum me-restart apachenya. Setelah me-restart apachenya, si Dudun me-refresh lagi browsernya. Si Dudun bersorak ketika melihat browsernya menampilkan sebuah kotak berwarna dengan empat alfanumerik acak di dalamnya.

Dengan gembira, si Dudun kemudian melanjutkan kerjanya: validasi. Ia lalu mengecek file validate.php untuk melihat cara kerjanya. Di dalamnya, Cuma terdapat satu fungsi validasi dan si Dudun tahu bahwa dia harus menggunakannya. Masalahnya adalah fungsi tersebut menggunakan dua buah parameter, yaitu $md5 dan $code. Ia lalu kembali menuju file petunjuk. Di sana, ia mendapatkan keterangan bahwa $md5 adalah field hidden dari Captcha dan $code adalah inputan dari user. Oleh karena itu, si Dudun membuat satu input teks pada halaman registrasinya.

...
<div id="form">
{captcha name="captcha" length=4}
<input type="text" name="form" />
</div>
...

Kemudian ia menggunakan fungsi validate_captcha yang terdapat pada validate.php di kode yang berisi validasi formnya. Namun ia sadar, masih ada satu variable lagi yang belum diketahuinya yaitu $md5. Perlahan, si Dudun mulai membaca kembali petunjuknya. Tiba-tiba sebuah pemikiran terlintas di pikirannya. Ia mendapatkan bahwa output dari tag Captcha[12] adalah sebuah referensi gambar dan sebuah hidden input. Dari sinilah si Dudun menyadari bahwa parameter name pada tag Captcha tersebut adalah nama dari hidden input tersebut. Oleh karena itu, ia mengganti parameter name sesuai dengan keinginannya.

...
<div id="form">
{captcha name="form[md5]" length=4}
<input type="text" name="form" />
</div>
...

Kemudian ia pun memperbaiki kembali fungsi validasinya. Sambil berdebar, si Dudun mencoba me-refresh browsernya dan mencoba formulir registrasinya. Ia pun bersorak kegirangan ketika fungsi registrasinya telah berhasil. Temannya yang kaget melihat si Dudun kemudian bertanya ada apakah gerangan. Setelah si Dudun menjelaskan apa yang ia lakukan, temannya berkata sambil tertawa, "wah Dun, aku punya kok kode java script untuk Captcha[13].. Kenapa engga minta aja?". Gubrak!! Si Dudun pun terjungkal.

...

#3 Smarty Captcha

Mempersembahkan:

Si Dudun

Status : programmer dummies

Intelligence : 13/20

Luck : 18/20

Googling : 10/20

Mentality : 15/20

Semua petunjuk dalam tulisan ini dapat digunakan dalam dunia sebenarnya. Kesamaan nama dan tempat adalah kebetulan belaka dengan sedikit unsur kesengajaan.

Tulisan ini dipersembahkan untuk mereka yang sedang belajar Smarty dimanapun mereka berada. Semoga sukses!!


[1] PHP, PHP Hypertext Preprocessor, sebuah bahasa pemrograman untuk web. Lihat http://php.net

[2]
Smarty adalah template engine untuk php.Lihat http://smarty.php.net
[3] Captcha adalah suatu mekanisme autentikasi menggunakan gambar untuk mengidentifikasi pengguna, manusia atau bukan?[4] Smarty memisahkan antara kode PHP dengan kode HTML. Hal inilah yang membuat si Dudun bingung, bagaimana memasukkan captchanya, ke PHP atau ke HTML?[5] Anda bisa mendownloadnya di http://www.psychology.gr/captcha/captcha.zip[6] Tautan unduh maksudnya adalah link download, hanya berusaha berbahasa Indonesia yang baik dan benar. Atau malah salah? J[7] Tetikus = mouse. Terdengar aneh ya??

[8] Nama folder ini terserah pada anda, asalkan anda membuat foldernya seperti petunjuk selanjutnya.

[9] Karena si Dudun pada saat tersebut menggunakan Windows, ia belum memperhatikan masalah folder permission

[10] Tentu saja si Dudun tidak diam saja pada halaman yang sama. Ia juga terus menerus me-refresh browsernya.

[11] File php.ini berisi konfigurasi mengenai PHP

[12] Tag Captcha adalah {captcha}

[13] Tidak seperti kode PHP, java script dieksekusi pada sisi Client sehingga tidak memerlukan pengiriman form terlebih dahulu. Selain itu, java script dapat dengan mudah dimasukkan ke dalam kode HTML tanpa banyak masalah. CMIIW

Pos Sebelumnya
Pos Berikutnya
Tinggalkan komentar

8 Komentar

  1. Salam kenal juga.

    Hebat, pake PHP Nude😀. Daripada aku yang dimanjain framework, he3x. Kalo aku integrasi KCaptcha + CakePHP.

    Balas
  2. Saya engga pake PHP murni kok mas,.. saya juga make template engine kok mas…

    Just wanna share..😀

    Balas
  3. keren-keren pake cerita biar pnjang nangkep nih cerita, thx ya.

    Balas
  4. yap.. sama-sama..
    semoga bisa membantu..

    Balas
  5. ghprod

     /  September 23, 2008

    Keren deh Bro🙂

    Aku juga lagi pelajarin CAPTCHA bt WP plugin .. cuman error already header sent trus :p

    Balas
  6. Makasih bro..😀

    Di pluginnya wordpress.org ada tidak plugin Captcha??

    Balas
  7. Luvian Yoga Pratama

     /  November 29, 2009

    asik nih tutorialny sesuai bgt m realita hahaha (saya mengalaminy juga soalny)

    Balas

Ada apa di pikiranmu?

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: