Tutorial Membuat Captcha di CodeIgniter

Wednesday 1 April 2015

Microtrafh - Kali ini saya akan memberikan tutorial membuat captcha di codeIgniter dengan simple dan mudah. Captcha digunakan untuk menghindari robot(bot) yang biasa di gunakan oleh orang lain untuk melakukan spam. Dengan menggunakan captcha dapat memberikan keamanan terhadap keaslian pengguna, captcha biasa digunakan pada kolom komentar, proses registrasi akun maupun saat melakukan hal-hal pada program yang tidak ingin dilakukan oleh robot.

Apa itu Captcha?

Captha sebenarnya berasal dari kata "capture" atau "menangkap" yang diciptakan pada tahun 2000 oleh Luis von Ahn, Manuel Blum, Nicholas J. Hopper (semua dari Carnegie Mellon University), dan John Langford (IBM). Captha sendiri memiliki akronim dalam bahasa inggris “Completely Automated Public Turing test to tell Computers and Humans Apart“. Captcha diperuntukan untuk memastikan kebenaran jawaban dari manusia, walaupun ada rumor bahwa sudah terciptanya program yang dapat mem-bypass captcha namun tingkat penggunaan captcha masih tinggi bahkan ditingkatkan kembali keamanannya.

Membuat Captcha di CodeIgniter

Pada tutorial ini saya tidak akan memberikan tutorial yang rumit pada umumnya, tutorial lain rata-rata menggunakan database untuk menyimpan captcha serta melakukan proses yang berbelit-belit. Tutorial ini tidak seperti itu, saya hanya akan memanfaatkan session dan enkripsi sehingga tidak diperlukan database untuk menampung captcha, ini ditujukan untuk mengecilkan tingkat penggunaan database yang bisa memberatkan aplikasi serta memungkinkan ddos attack(serangan ping) terhadap website. Mari kita mulai

Pertama extract codeigniter pada folder di webserver kamu, disini nama folder root saya "captcha". Setelah extract buat floder lagi dengan nama capimg, folder ini digunakan untuk menampung gambar dari captcha tersebut.

Selanjutnya karena kita menggunakan session maka wajib setting $config['encryption_key'] di application/config/config.php dan kamu boleh isi sesuka hati kamu.
Selanjutnya saya buat file controller dengan nama captcha.php di application/controllers/ dan masukan script ini

class Captcha extends CI_Controller {
 
 public function index(){
  $this->load->helper(array('captcha','form'));
  $this->load->library('session');
  $vals = array(
   'img_path' => './capimg/',
   'img_url' => '/captcha/capimg/',
   'img_width' => 150,
   'img_height' => 30
  );
  $cap = create_captcha($vals);
  $this->session->set_userdata('keycode',md5($cap['word']));
  $data['captcha_img'] = $cap['image'];
  $this->load->view('v_captcha',$data);
 }
}

penjelasan:

dibutuhkan helper captcha dan form karena tentunya kita membutuhkan captcha, dan form karena kita akan membuat input data. img_path dan img_url adalah folder dimana image captcha disimpan. create_captha() digunakan untuk memproses captcha berdasarkan konfigurasi yang telah ditetapkan dan kita set session dengan nama keycode dan dimasukan value kata dari captcha tersebut yang di enkripsi dengan md5.

selanjutnya kita buat view dengan nama v_captcha.php di application/views dan masukan syntax berikut

<html>
<head>
 <title>Tutorial Captcha by blog.microtrafh.com</title>
</head>
<body>
 <?php echo form_open('captcha/submit');?>
 <table>
  <tbody>
   <tr>
    <td><span>Nama</span></td>
    <td><input name="nama"></td>
   </tr>
   <tr>
    <td>Captcha</td>
    <td><?php echo $captcha_img;?><br>
     <input name="captcha"><br>
     <?php
      $wrong = $this->input->get('cap_error');
      if($wrong){
     ?>
      <span style="color:red;">Captcha yang kamu masukan salah, silahkan ulangi lagi</span>
     <?php
      }
     ?>
    </td>
   </tr>
   <tr>
    <td></td>
    <td><input type="submit" name="submit" value="kirim"></td>
   </tr>
  </tbody>
 </table>
 <?php echo form_close();?> 
</body>
</html>

untuk melakukan validasi saya menggunakan metode get jadi biar ga ribet, saya ambil logika ini dari logika login facebook.

selanjutnya kembali ke controller captcha.php dan masukan function baru ini dibawah function index()

 public function submit(){
  $this->load->helper(array('form','url'));
  $this->load->library('session');
  $nama = $this->input->post('nama');
  $captcha = $this->input->post('captcha');
  if(md5($captcha)==$this->session->userdata('keycode')){
   $data['nama'] = $nama;
   $data['captcha']= $captcha;
   $this->session->unset_userdata('keycode');
   $this->load->view('v_success',$data);
  }else{
   redirect('captcha?cap_error=1','refresh');
  }
 }

penjelasan:

dari captcha yang di input di form tadi maka akan di enkripsi lagi menggunakan md5 lalu disamakan dengan keycode yang sudah disimpan di session. Jika sama maka session keycode akan di hapus dan menampilkan view sukses, jika tidak sama akan di redirect atau dikembalikan ke awal lagi dengan menambahkan parameter cap_error.

Setelah itu kita buat view untuk suksesnya, buat file v_success.php di application/views/ dan masukan script ini

<html>
<head>
 <title>Tutorial Captcha by blog.microtrafh.com</title>
</head>
<body>
 Hay <?php echo $nama;?>, kamu berhasil melakukan captcha dengan captcha kode <?php echo $captcha;?> 
</body>
</html>

Oke mari kita coba
Pertama saya akan melakukan captcha yang salah