Membuat Captcha Image menggunakan Codeigniter 2x Oleh: Yoga C. Pranata

Hai semua, disini saya akan menerangkan tentang bagaimana membuat captcha menggunakan Codeigniter. Sebelum memulainya, kalian pasti tahu apa itu Captcha.

Hai semua, disini saya akan menerangkan tentang bagaimana membuat captcha menggunakan Codeigniter. Sebelum memulainya, kalian pasti tahu apa itu Captcha. Apa itu Captcha? Sekedar untuk diketahui, CAPTCHA atau Captcha adalah suatu bentuk uji tantangan-tanggapan (challange-response test) yang digunakan dalam perkomputeran untuk memastikan bahwa jawaban tidak dihasilkan oleh suatu komputer. Istilah “CAPTCHA” (berasal dari kata bahasa Inggris “capture” atau menangkap) diciptakan pada tahun 2000 oleh Luis von Ahn, Manuel Blum, Nicholas J. Hopper (semua dari Carnegie Mellon University), dan John Langford (IBM). Istilah ini adalah akronim bahasa Inggris dari “Completely Automated Public Turing test to tell Computers and Humans Apart“. Dibawah ini adalah salah satu contoh gambar captcha. [sumber gambar dan info : wikipedia]

Oke, tanpa basa basi lagi. Langsung aja Kita mulai tutorialnya. Tutorial menggunakan Captcha pada Codeigniter 1. Disini saya menggunakan Codeigniter 2.2.1. Saya masih menggunakan Codeigniter yg belum disetting, jadi masih murni bawaan pabrik. Jika tidak mempunyai Codeigniter, bisa download di Codeigniter.com. 2. Selanjutnya, Pertama buat dulu folder assets, lokasinya sejajar dengan folder system dan application, setting CHMOD menjadi 777 atau 666. 3. Buat sebuah Controller dan View sebagai berikut : ●

Controller

Buat sebuah controller dengan nama c_captha.php. kemudian tulis script ini : load->library('session'); $this->load->helper( array('captcha', 'url') ); } public function index() { //posisi folder untuk menyimpan gambar captcha $path = './assets/captcha/'; //membuat folder apabila folder captcha tidak ada if ( !file_exists($path) ) { $create = mkdir($path, 0777); if ( !$create) return; } //Menampilkan huruf acak untuk dijadikan captcha $word = array_merge(range('0', '9'), range('A', 'Z')); $acak = shuffle($word); $str = substr(implode($word), 0, 5); //Menyimpan huruf acak tersebut kedalam session $data_ses = array('captcha_str' => $str ); $this->session->set_userdata($data_ses); //array untuk menampilkan gambar captcha $vals = array( 'word' => $str, //huruf acak yang telah dibuat diatas 'img_path'

=> $path, //path untuk menyimpan

gambar captcha 'img_url' => base_url().'assets/captcha/', //url untuk menampilkan gambar captcha 'img_width' => '150', //lebar gambar captcha 'img_height' => 40, //tinggi gambar captcha 'expiration' => 7200 //expired time per captcha );

$cap = create_captcha($vals); $data['captcha_image'] = $cap['image']; //variable array untuk menampilkan captcha pada view $this->load->view('v_captcha',$data); //load view } //function untuk action form kirim pesan pada view public function kirim_pesan(){ //cek apakah secure code yang diinputkan oleh User sudah benar atau belum. if($this->input->post('input_captcha') != $this->session->userdata('captcha_str')){ echo ' <script> alert("Huruf Captcha yang Anda masukkan tidak sama. Silahkan coba sekali lagi"); window.location = "'.site_url().'/c_captcha"; '; }else{ echo 'Nama : '.$this->input->post('nama').'
'; echo 'Pesan : '.$this->input->post('pesan'); } } } ●

View

Selanjutnya, buat sebuah form pada view dengan nama v_captcha.php, untuk menampilkan gambar captcha. Pada contoh kali ini Saya buat seperti form pengaduan atau form kirim kritik/saran. <meta charset="utf-8"> <style type="text/css"> ::selection{ background-color: #E13300; color: white; } ::moz-selection{ background-color: #E13300; color: white; } ::webkit-selection{ background-color: #E13300; color: white; } body { background-color: #fff; margin: 40px; font: 13px/20px normal Helvetica, Arial, sans-serif;

color: #4F5155; } a { color: #003399; background-color: transparent; font-weight: normal; } h1 { color: #444; background-color: transparent; border-bottom: 1px solid #D0D0D0; font-size: 19px; font-weight: normal; margin: 0 0 14px 0; padding: 14px 15px 10px 15px; } code { font-family: Consolas, Monaco, Courier New, Courier, monospace; font-size: 12px; background-color: #f9f9f9; border: 1px solid #D0D0D0; color: #002166; display: block; margin: 14px 0 14px 0; padding: 12px 10px 12px 10px; } #body{ margin: 0 15px 0 15px; } p.footer{ text-align: right; font-size: 11px; border-top: 1px solid #D0D0D0; line-height: 32px; padding: 0 10px 0 10px; margin: 20px 0 0 0; } #container{ margin: 10px; border: 1px solid #D0D0D0; -webkit-box-shadow: 0 0 8px #D0D0D0; }



Setelah selesai membuat view diatas, lihat hasilnya di browser dengan nama http://domain/nama_folder/.

screenshot hasil jadinya seperti dibawah ini :

Selamat mencoba. :)

NB : Download file untuk contoh diatas : http://bit.ly/1IPN7wX

Tentang Penulis Yoga C. Pranata