Using codeigniter 3 CAPTCHA helper in forms

#codeigniter #captcha #helper #form

Hi,

I will show you a very simple way to use codeigniter 3 CAPTCHA helper when submitting a form in your web application.

So... Ready, Set, Code !

For this, we will be using Welcome controller and welcome_message view. So the first step is to edit the code in the "index" method in "Welcome" controller and add 3 things.

$this->load->library('form_validation');
$this->load->helper('captcha');
$this->load->library('session');

We load the form validation library in order validate the data when the user submit a form on the webpage.
We load the captcha helper that we will configure afterwards.
We will be using the session library in order to store the captcha value.

Now we will have to configure the CAPTCHA helper


$vals = array(
'word'          => rand(1,999999),
'img_path'      => './assets/captcha/images/',
'img_url'       => base_url('assets').'/captcha/images/',
'font_path'     => base_url('assets').'/captcha/fonts/XYZ.ttf',
'img_width'     => '150',
'img_height'    => 30,
'word_length'   => 8,
'colors'        => array(
               'background'     => array(255, 255, 255),
               'border'         => array(255, 255, 255),
               'text'           => array(0, 0, 0),
               'grid'           => array(255, 75, 100)
            )
        );

IMPORTANT NOTICE !

I forgot to mention before, you will have to set your project file structure as below if your configuration is like above.

your_ci_project
│
└───application
│
└───system
│
└───tests
│
└───index.php
│
└───.htaccess
│
└───assets
    │
    └───captcha
           │
           └───images
           │
           └───fonts
                 │
                 └───XYZ.ttf

You can find more details on Codeigniter User Guide .

After configuring it, call the function that will create the captcha and finally sending it to the "welcome_message.php" view.

$data['captcha'] = create_captcha($vals);
$this->load->view('welcome_message',$data);

To see the captcha in your view, just add this piece of code.

echo $captcha['image']

I hope everything is okay till now.

Time to validate !

In this part we will code the part where the user click on a submit button on the webpage and the controller will validate the captcha.

Let say we have a form in our view with a button in it.

<?php echo $captcha['image'] ?>
<input type="text" name="captcha">
<input type="hidden" value="<?php echo $captcha['word'] ?>" name="code">
<button name="submit_contact">Send</button>

As you can see in the above code, I have a input tag of type hidden whereby I stored the captcha string and when submitting the form, this data is also sent to the controller.

In order to avoid creating multiple methods, I will use the index one but will add an if/else conditional statement to check if a user submit a form. After that we will process the data.


if(isset($_POST['submit_contact'])):
   $this->session->set_userdata('captcha_answer',$this->input->post('code'));
   $this->form_validation->set_rules('captcha', 'Captcha', 'required|integer|callback_check_captcha');
   if($this->form_validation->run() == TRUE):
      $this->session->set_flashdata('positive','CAPTCHA VALIDATED SUCCESSFULLY');
      redirect(site_url());
   endif;
endif;

As you can see above, there is a callback for the submitted captcha in order to check whether it is the same or not as in the image.


public function check_captcha($string)
{
   if($string != $this->session->userdata('captcha_answer')):
      $this->form_validation->set_message('check_captcha', 'captcha incorrect');
      return false;
   else:
      return true; 
   endif;
}