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 :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class C_captcha extends CI_Controller {
public function __construct()
{
parent::__construct();
//load helper dan library
$this->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";
</script>
';
}else{
echo 'Nama : '.$this->input->post('nama').'<br>';
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Capthca Codeigniter</title>
<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;
}
</style>
</head>
<body>
<div id="container">
<h1>Captcha Codeigniter</h1>
<div id="body">
<form action="<?=site_url()?>/c_captcha/kirim_pesan" method="post">
<table border="0">
<tr>
<td>Nama</td>
<td><input type="text" name="nama" placeholder="Isikan Nama Anda..." style="padding:5px;" required></td>
</tr>
<tr>
<td>Pesan</td>
<td><textarea name="pesan" cols="30" rows="5" required></textarea></td>
</tr>
<tr>
<td>Secure Code</td>
<td><?=$captcha_image?> <a href="#" onclick="parent.window.location.reload(true)">[perbarui gambar]</a></td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="input_captcha" style="padding:5px;" required></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Kirim Pesan"></td>
</tr>
</table>
</form>
</div>
<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>
</body>
</html>
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
