Facebook LinkedIn Wordpress Tumblr Twitter

Membuat CAPTCHA Sederhana

CAPTCHA (kepanjangan: Completely Automated Public Turing test to tell Computers and Humans Apart) adalah gambar yang mengandung kode alfabetik, numerik, ataupun alfanumerik, yang pada umumnya mudah dibaca oleh manusia namun susah (bahkan tidak bisa) dibaca oleh komputer. CAPTCHA bisa dibuat dengan menggunakan skrip PHP dan ekstensi GD yang berfungsi untuk membangkitkan grafik. Tulisan ini akan mengulas tentang cara membuat CAPTCHA sederhana. Anda cukup menyediakan web server Apache dengan modul PHP 5 dan ekstensi GD versi 2.0.34.

Berikut ini adalah langkah-langkah untuk membuat CAPTCHA:
  1. Buatlah session untuk menyimpan hasil pengacakan string.
  2. Definisikan gambar yang akan dibuat (tentukan ukuran, dan warna yang akan memenuhi gambar tersebut).
  3. Persiapkan string yang akan diacak.
  4. Tambahkan komponen-komponen yang akan memperkuat pengamanan CAPTCHA: font yang unik, penambahan background, penambahan garis-garis, rotasi teks, pembuatan font dengan ukuran masing-masing karakter yang berbeda, dsb.
  5. Bangkitkan CAPTCHA dengan menghidupkan session, dan memanggil fungsi pembangkit gambar yang ada pada ekstensi GD.

Contoh source code-nya ada adalah sebagai berikut (Anda boleh mengutip, mengedit, memodifikasi, dan menyebarkannya),

/**
 * @name  image.php
 * @author  Aprian Diaz Novandi
 * @todo  Skrip PHP yang menghasilkan gambar berformat .PNG dari string hasil pengacakan huruf kapital dengan font jenis AnkeCalligraph.TTF
 * @version 1.0.0.0
 * @since  May 15th 2007
 */

//memulai session untuk menyimpan hasil pengacakan string
session_start();

//membuat gambar berukuran 150x50 piksel
$im = imagecreatetruecolor(150, 50);

//definisi warna
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 175, 175, 175);
$black = imagecolorallocate($im, 0, 0, 0);

//membuat kotak berwarna putih dari titik (0,0) s.d. (150,50)
imagefilledrectangle($im, 0, 0, 150, 50, $white);

//string teks yang akan diacak
$str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';

//mengambil enam karakter saja dari hasil pengacakan string
$text = substr(str_shuffle($str),0,6);

//font yang dipilih
$font = 'Walrod-Regular.TTF';

/*parameter fungsi imagettftext
(gambar_sumber,ukuran_font,sudut,x,y,warna,jenis_font,text_yang_akan_ditulis)*/

//menambahkan bayangan
imagettftext($im, 22, 0, 10, 35, $grey, $font, $text);

//menambahkan teks
imagettftext($im, 16, 0, 10, 35, $black, $font, $text);

//menghidupkan session
/*nilai variabelnya bisa dienkripsi, bisa plain, 
agar lebih aman silakan dienkripsi*/
$_SESSION['randstr'] = sha1($text);

header("Content-type: image/png");
imagepng($im);
imagedestroy($im);

Kode di halaman tersebut adalah kode untuk gambar CAPTCHA-nya. Simpanlah di file yang berbeda (misalkan bernama image.php). Untuk menampilkan gambar tersebut, silakan gunakan tag image pada HTML.



Dan untuk mencocokkan gambar yang muncul, silakan bandingkan kesamaan input dari form dengan variabel $_SESSION['randstr']. Apabila pada kode gambar CAPTCHA, nilai variabel $_SESSION['randstr'] dienkripsi (misal menggunakan algoritma enkripsi SHA1), tentu input tersebut juga harus dienkripsi.

Skrip di atas masih memiliki kelemahan, yaitu masih bisa diinterpretasi oleh aplikasi yang memanfaatkan aspek kecerdasan buatan (computer vision). CAPTCHA yang baik adalah CAPTCHA yang susah diinterpretasi oleh aplikasi semacam itu. Saat ini, semakin banyak aplikasi yang dikembangkan untuk mematahkan pengamanan halaman web dengan CAPTCHA, dan biasanya akan dipakai oleh mesin penyebar spam.

Untuk melihat contoh aplikasi yang memanfaatkan CAPTCHA, Anda bisa menuju link: http://arc.itb.ac.id/~diaz/captcha

Tips di bawah ini barangkali berguna untuk Anda yang tertarik untuk bermain-main dengan CAPTCHA:
  1. Hindari pembuatan CAPTCHA tanpa latar belakang karena akan semakin memudahkan aplikasi pembaca kode CAPTCHA. Paling tidak buatlah tambahan garis-garis atau buatlah dengan pilihan font yang unik tapi masih terbaca manusia
  2. Modifikasilah karakter-karakter CAPTCHA yang dibuat dengan merotasi karakter dan/atau mengatur ukuran karakter tersebut agar berbeda.

-KnightDNA-

Enabling Syntax Highlighting in Wordpress

Hi all,

Tonight, while doing my business as an Informatics ITB university students in sixth term :P, I suddenly found an interesting plug-in of Wordpress that maybe has been already known by some of Wordpress user, but I do not think that all of Wordpress users know about this. It is SyntaxHighlighter plug-in. It will make you easier to post source code in Wordpress, so perhaps most of Informatics university students will activate this plugin on their own blog.

Well, I guess that you will just activate the plug-in and it will automatically work if you are a native Wordpress user - which means your blog are hosted on wordpress.com -, but how about a non-native Wordpress user like me (for your information, I am currently using Wordpress 2.3.3), whose blog is hosted in my own machine? So, here are the following action to activate the SyntaxHighlighter plug-in:
  1. Download the SyntaxHighlighter plug-in from wordpress official plug-in site. Just download the syntaxhighlighter.zip.
  2. Do not forget to download the core scripts (some JavaScript scripts) on Google Code, because Wordpress uses the SyntaxHighlighter JavaScript package by Alex Gorbatchev - I would like to say thank you very much to this person -. Download the SyntaxHighlighter_1.5.1.rar.
  3. Extract the first one of those compressed files in your Wordpress plug-in directory (wp-content/plugins/). The new folder will be created and its name is syntaxhighlighter.
  4. Go to syntaxhighlighter directory.
  5. Create a new directory namely files.
  6. Extract the last one in any place of your machine (it is not obligatory to extract it into your Wordpress plug-in directory). It will contain three directories: Scripts, Styles, and Uncompressed.
  7. Copy all files contained in Scripts and Styles directory into files directory (which mentioned in step 5) inside of your syntaxhighlighter directory. If your server operating system is UNIX family, please make sure that you have set the permission of your plug-in directory correctly.
  8. Now, you may enable the SyntaxHighlighter plug-in via Wordpress administration page. Just go directly to Plugin, and then activate your SyntaxHighlighter plug-in.

If it works, you can post your source code like this following example:

#include "Parser.h"

List parseLine(char* line) {
    List L;

    for(int i = 0; i < len(line); i++) {
        if(isNumber(line[i])) {
            //kalau bertemu angka
            char* temp = (char *)malloc(255*sizeof(char));
            for (int j = 0; j < 255; j++) {
                temp[j] = '';
            }

            j = 0;
            while(line[i] != ',') {
                temp[j] = line[i];
                i++;
                j++;
            }

            Point P;
            P.setX(atoi(temp));

            i++;
            j = 0;
            while(line[i] != ']') {
                temp[j] = line[i];
                i++;
                j++;
            }
            P.setY(atoi(temp));
            L.addLast(P);
        }
    }
    return L;
}
Just simply write your code inside of [sourcecode language='supported_language'] ...[/sourcecode], but do not forget to assign the language attribute of the sourcecode tag. There are several programming languages that have been supported by this plug-in (e.g.: C++, C#, Java, JavaScript, XML, etc.). It is better if you see its official FAQ. Do not forget to check your Wordpress version first, because it requires version 2.3.0 or above. This is all of my post for today. Actually, this is not the only way to enable the SyntaxHighlighter plug-in. Perhaps, you have the other way to enable it with the simpler steps. Alas! I still have to do my other tasks. They are Computer Graphics task and also other non-academics tasks that need to be done! So, good night everybody, I have got to go, but do not forget to leave your comment here if you are interested with the topic. :D

-KnightDNA-