PHP/MySQL - Membuat Security Number dengan menggunakan GD Library pada PHP

Artikel PHP/MySQL

• Home
  • » PHP/MySQL
    • » Membuat Security Number dengan menggunakan GD Library pada PHP

Membuat Security Number dengan menggunakan GD Library pada PHP

Ditulis oleh Dhimas Ronggobramantyo
Kategori: PHP/MySQL
Dibaca 7895 kali

Langsung lihat komentar

Anda pernah melihat angka-angka aneh yang dicorat-coret atau melengkung-lengkung ketika ingin mengisi form? Dan anda diharuskan untuk mengisi angka yang tertera disitu. Atau pada bagian komentar dibawah artikel ini anda juga akan menemukan security number. Saya banyak menerima email dan komentar bagaimana cara membuatnya, nah kali ini saya akan mengajarkan cara membuat security number.

Saya hanya mengajarkan bagaimana membuat Security Number ini, saya tidak akan mengajarkan bagaimana memasangnya di Wordpress, blogspot dan CMS-CMS lainnya. Terus terang pengetahuna saya mengenai Wordpress, blogspot, Jomlaa dan CMS-CMS lainnya hampir tidak tahu apa-apa. Terakhir kali saya memakai CMS sekitar tahun 2001 an waktu itu saya pakai PHPNuke, jadi saya tidak tahu apa-apa tentang CMS jaman sekarang. Tapi saya yakin CMS seperti Wordpress dan kawan-kawan pasti memiliki cara penanggulangan SPAM yang lebih baik daripada security number.

Apa sih gunanya Security Number?

Tentu saja untuk menanggulangi SPAM. Jika dalam website anda memiliki buku tamu atau sistem komentar yang tidak mengharuskan orang-orang untuk login untuk mengisinya, maka 100% website anda akan kena spam. Apa itu spam? jika anda menerima komentar yang tidak diinginkan pada buku tamu atau sistem komentar anda, maka anda bisa menyebutkan itu sebagai SPAM.

Para spammers melakukan SPAM biasanya dengan menggunakan software otomatis (istilah kerennya: bots) yang secara otomatis mengisi form-form yang ada di internet. Nah untuk mencegah software tersebut mengisi form, kita perlu menambahkan sebuah field yang hanya bisa diisi jika pengisinya adalah manusia. Bagaimana caranya? Dengan membuat sebuah angka acak yang ditampilkan sebagai gambar, nah kita diharuskan mengisi angka tersebut. Bagi kita mudah saja untuk mengisi angka, karena kita dapat dengan mudah melihatnya, tapi bagi software otomatis tadi tentu susah untuk membaca angka tersebut.

CAPTCHA

Apa itu CAPTCHA? CAPTCHA merupakan sebuah program untuk menggenerate andka yang sulit dikenali oleh bots tadi tapi mudah dikenali oleh manusia. Algoritma CAPTCHA yang paling bagus diciptakan oleh Carnegie Mellon University, sayangnya algoritma CAPTCHA merupakan trademark dari Carnegie Mellon University dan algoritma tersebut tidak bisa sembarangan digunakan, algoritma tersebut digunakan oleh Yahoo, Google dan situs-situs besar lainnya. Tapi kita jangan menyerah, jika anda jago anda bisa membuat algoritma sendiri :)

Atau kita bisa juga menggunakan images, jadi kita memiliki kumpulan gambar huruf-huruf dan angka yang berbeda-beda, nah gambar tersebut kita tampilkan secara acak. Atau menggunakan cara saya, cara yang paling sederhana dan nggak perlu banyak mikir :) yaitu menggenerate angka acak biasa kemudian diatasnya kita coret-coret dengan acak. Seperti yang terlihat pada sistem komentar dibawah artikel ini, sangat sederhana :D

Memanfaatkan GD Library dan Session

Untuk membuat gambar didalam PHP kita tentu saja memanfaatkan GD Library. Saya tidak akan mengajarkan GD Library disini, silahkan anda lihat artikel saya yang lalu tentang dasar-dasar GD Library. Dan kita akan memanfaatkan sesssion untuk mengirim nilai pada security number tersebut agar lebih aman. Saya banyak melihat website yang menggunakan security number tetapi jawaban dari angka tersebut tersimpan di form, bisanya disimpan didalam <input type="hidden" />. Atau ada juga yang disimpan didalam link pada browsernya. Kalau begitu sama saja bohong, kita sama saja membuat security number plus jawaban dari angka tersebut. Nah, disini kita akan mengirim jawabannya dengan menggunakan Session, paling tidak agar terenkripsi lah. Oke tidak usah berlama-lama, sekarang anda coba lihat dulu seperti apa hasilnya yang akan kita buat disini.

Pertama-tama kita buat script PHP untuk menggenerate angkanya dulu, buatlah file capcay.php dan isilah dengan kode berikut ini:

<?

$sid=trim($HTTP_GET_VARS["sid"]);

session_id($sid);

session_start();

$angka = $HTTP_SESSION_VARS["angka"];

mt_srand((double)microtime()*1000000);

$jarak1 = mt_rand(0,10);

$jarak2 = mt_rand(0,10);

$jarak3 = mt_rand(0,10);

$jarak4 = mt_rand(0,10);

$ujung1 = mt_rand(0,60);

$ujung2 = mt_rand(0,60);

$ujung3 = mt_rand(0,60);

$ujung4 = mt_rand(0,60);

$ujung5 = mt_rand(0,60);

$ujung6 = mt_rand(0,60);

$ujung7 = mt_rand(0,60);

$ujung8 = mt_rand(0,60);

$warna1 = mt_rand(0,150);

$warna2 = mt_rand(0,150);

$warna3 = mt_rand(0,150);

$warna4 = mt_rand(0,150);

$warna5 = mt_rand(0,150);

$warna6 = mt_rand(0,150);

$height = 13; 

$width = 62; 

$im = ImageCreate($width, $height); 

$background = ImageColorAllocate($im, 255,255,255); 

$warnagaris = ImageColorAllocate($im, $warna1, $warna2, $warna3); 

$warnaangka = ImageColorAllocate($im, $warna4, $warna5, $warna6); 

ImageFill($im, 0, 0, $background); 

ImageLine($im, 0, $jarak1, $ujung1, $ujung2, $warnagaris); 

ImageLine($im, 0, $jarak2, $ujung3, $ujung4, $warnagaris); 

ImageLine($im, 60, $jarak3, $ujung5, $ujung6, $warnagaris); 

ImageLine($im, 60, $jarak4, $ujung7, $ujung8, $warnagaris); 

ImageString ($im, 6, 10, 0,  $angka, $warnaangka);

Imagejpeg($im); 

?>

Itu nanti akan menghasilkan images dalam format .jpg, tenang saja akan saya jelaskan nanti, sekarang buatlah file form.php dan isilah dengan kode berikut ini:

<?

$sid	=	session_id();

if(!$sid){

session_start();

$sid	=	session_id();

}

if ($submit) {

  if ($code!=$angka) {

    echo "Security number salah.<br />";

  } else {

    echo "Selamat Anda benar menuliskan angkanya";

  }

}

?>

<h4>Kirim Komentar:</h4>

<form method="post" action="<?=$PHP_SELF?>">

<p>

Security Number: <input type="text" name="code" class="textbox"  />

<?

mt_srand((double)microtime()*1000000);

$angka1 = mt_rand(0,9);

$angka2 = mt_rand(0,9);

$angka3 = mt_rand(0,9);

$angka4 = mt_rand(0,9);

$angka5 = mt_rand(0,9);

$angka="$angka1$angka2$angka3$angka4$angka5";

$HTTP_SESSION_VARS["angka"] = $angka;

?>

<img src="capcay.php?sid=<?=$sid?>" alt="Security Number" /> <br /><br />

<input type="submit" name="submit" value="Kirim Komentar" />

</p>

</form>

Silahkan anda jalankan form.php, muncul kan angkanya, cukup mudah kan? sekarang akan saya jelaskan satu persatu. Pertama-tama kita bahas form.php. Pada awal form.php kita memiliki kode:

<?

$sid	=	session_id();

if(!$sid){

session_start();

$sid	=	session_id();

}

Nah, kode tersebut berfungsi untuk mengambil nilai session yang nantinya akan kita kirim melalui form.php, karena pada awalnya kita belum mengirim apa-apa maka kita lewatkan saja kode tersebut dan langsung perhatikan formnya. PAda form kita memiliki field Security Number: <input type="text" name="code" class="textbox" />, ingat bahwa name nya adalah code, nanti kita perlu melakukan pengencekan code ini dengan angka yang kita generate. Oke berikutnya kita akan menemui:

mt_srand((double)microtime()*1000000);

$angka1 = mt_rand(0,9);

$angka2 = mt_rand(0,9);

$angka3 = mt_rand(0,9);

$angka4 = mt_rand(0,9);

$angka5 = mt_rand(0,9);

$angka="$angka1$angka2$angka3$angka4$angka5";

$HTTP_SESSION_VARS["angka"] = $angka;

Disini kita membuat fungsi random, jadi saya membuat variabel $angka1 s/d $angka5 yang isinya adalah angka acak dari 0 sampai 9. Kemudian ke 5 angka tersebut digabung kedalam variabel angka, $angka="$angka1$angka2$angka3$angka4$angka5";. Nah setelah itu disini kuncinya, kita menyimpan variabel angka kedalam session angka dengan perintah $HTTP_SESSION_VARS["angka"] = $angka;. Yang nantinya session ini akan kita ambil pada awal kode tadi.

Sekarang kita akan membuat gambarnya, anda tentu sudah tahu cara menampilkan gambar pada HTML, disini yang kita load bukan gambar tetapi file PHP yang telah menjadi gambar <img src="capcay.php?sid=<?=$sid?>" alt="Security Number" />. Perhatikan, kita perlu mengirim nilai session tersebut kedalam capcay.php yang nantinya akan diproses oleh capcay.php. Nilai session tersebut sudah tersimpan pada variabel $sid karena pada awal kode kita sudah mengisi $sid dengan session $sid = session_id();. Sampai sini, sistem mulai memproses file cpacay.php dengan mengirim session yang berisi angka-angka yang benar. Kita akan bahas capcay.php belakangan. Dan ketika seseorang mengklik tombolnya maka sistem akan memproses kembali file form.php dari awal dan kembali mengambil session tersebut.

Karena anda telah menekan tombol submit, maka bagian kode dibagian atas ini akan dijalankan.

if ($submit) {

  if ($code!=$angka) {

    echo "Security number salah.<br />";

  } else {

    echo "Selamat Anda benar menuliskan angkanya";

  }

}

Itu merupakan kode sederhana untuk melakukan pengecekan apakah angka yang kita masukkan (variabel $code) sudah sama dengan angka yang kita generate yang tadi kita kirim melalui session (variabel $angka). Jika sudah sama silahkan anda tulis perintah yang diinginkan dan jika salah juga silahkan anda ingin sistem melakukan apa.

Oke, mudah kan sekarang kita akan bahas file capcay.php yang tadi kita panggil sebagai images. Sebenarnya file capcay.php hanya menggenerate angka yang kita kirim melalui session dan dicoret-coret. Jika anda membuka file capcay.php saja maka anda hanya akan menemukan coret-coretan tanpa adanya angka.

Pada bagian awal kode di file capcay.php kita akn menemukan kode seperti ini:

$sid=trim($HTTP_GET_VARS["sid"]);

session_id($sid);

session_start();

$angka = $HTTP_SESSION_VARS["angka"];

Kode tersebut berguna untuk mengambil session yang kita kirim pada form.php tadi, session tersebut tentu saja berisi angka acak yang kita buat pada form.php tadi. Dan kita simpan isinya pada variabel angka, $angka = $HTTP_SESSION_VARS["angka"];.

Setelah itu anda akan melihat variabel jarak, ujung dan warna. Untuk menggambar garis kita menggunakan fungsi imageline ( resource $image, int $x1, int $y1, int $x2, int $y2, int $color). Nah untuk mengisi x1, y1, x2, y2 dan warna saya menggunakan nilai acak (random) yang saya simpan di variabel jarak, ujung dan warna. Dengan demikian garis-garis yang muncul dan warna yang muncul tidak akan pernah sama. Coba perhatikan kode berikut ini:

$height = 13; 

$width = 62; 

$im = ImageCreate($width, $height); 

$background = ImageColorAllocate($im, 255,255,255); 

$warnagaris = ImageColorAllocate($im, $warna1, $warna2, $warna3); 

$warnaangka = ImageColorAllocate($im, $warna4, $warna5, $warna6); 

ImageFill($im, 0, 0, $background); 

ImageLine($im, 0, $jarak1, $ujung1, $ujung2, $warnagaris); 

ImageLine($im, 0, $jarak2, $ujung3, $ujung4, $warnagaris); 

ImageLine($im, 60, $jarak3, $ujung5, $ujung6, $warnagaris); 

ImageLine($im, 60, $jarak4, $ujung7, $ujung8, $warnagaris); 

ImageString ($im, 6, 10, 0,  $angka, $warnaangka);

Imagejpeg($im); 

Variabel $width dan $height merupakan panjang dan tinggi bidang gambar kita. KEmudian kita membuat bidang gambar $im = ImageCreate($width, $height); yang disimpan dalam variabel $im. Setelah itu saya membuat background putih $background = ImageColorAllocate($im, 255,255,255); dan memberi warna pada garis dan angkanya, nilai warnanya acak yang telah kita buat pada variabel angka tadi $warnagaris = ImageColorAllocate($im, $warna1, $warna2, $warna3); dan warna angka $warnaangka = ImageColorAllocate($im, $warna4, $warna5, $warna6);.

Berikutnya kita menggambar bidangnya dengan memberi warna putih, ImageFill($im, 0, 0, $background);. Setelah itu kita membuat 4 coretan yang acak dan berbeda-beda dengan fungsi ImageLine($im, 0, $jarak1, $ujung1, $ujung2, $warnagaris); dst. Untuk menuliskan angka yang sudah kita dapatkan tadi, kita menggunakan fungsi imagestring (resource $image, int $font, int $x, int $y, string $string, int $color) dimana tadi kita menggunakan variabel $angka dan untuk warnanya kita menggunakan warna acak dari variabel $warnaangka, ImageString ($im, 6, 10, 0, $angka, $warnaangka);

Langkah terakhir adalah dengan membuatnya menjadi gambar jpg menggunakan fungsi Imagejpeg($im);. Selesai sudah gambar anda sudah tampil yang berisi angka-angka acak, dan angka-angka itu juga dikirim melalui session agar kita bisa melakukan pengecekan.

Bingung? pada file capcay.php itu hanya berisi fungsi-fungsi dasar dari GD Library, jadi pastikan bahwa anda telah mengerti dasar-dasar GD Libary. Jika anda kreatif anda dapat menggambar coretan yang lebih bagus, angka yang lebih menarik dan semakin sulit dibaca. Tetapi perlu diingat juga dalam membuat security number jangan sampai terlalu sulit dibaca oleh manusia. Tujuan membuat security number agar manusia dapat dengan mudah membacanya, tetapi mesin akan kesulitan membacanya.

Simpan artikel ini ke:

Komentar [37]

Kirim Komentar: