The class that we are going to create within CI will simply add a math question that the user will have to enter correctly to continue. This is useful to stop bots from mass submitting information to your forms.

The class we are going to write is only very short and simple, but it will give you an idea of how to create classes for your own projects.

Creating the new class

First of all we need to create the file for the class, navigate to libraries then create a file called math_question.php.

All we are going to do within this class is generate two random numbers that will be added together.

<?php
class math_question {
 
	function questionOne()
	{
		// generate a random number between 0 - 10
		$num = rand() % 10;
		return $num;
	}
 
	function questionTwo()
	{
		$num = rand() % 10;
		return $num;
	}
 
}

This is all we will be doing for the code within the class.

Using the class within a form

To use this class in our controller we load it like so:

$this->load->library('math_question');

We will also be using form validation and sessions to check if the user has entered the correct answer.

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

We need to set questionOne and questionTwo in variables so we can assign them to a temporary flash session and because they will be passed into the view.

$questionOne = $this->math_question->questionOne();
$questionTwo = $this->math_question->questionTwo();
 
$this->session->set_flashdata('questionOne', $questionOne);
$this->session->set_flashdata('questionTwo', $questionTwo);
 
$data['math_question'] = "What is {$questionOne} + {$questionTwo}?";

To check that the answer that is wrote in is correct we use the callback method in our form validation to call a function that we create that will check the users input against the flash data.

This is how we set our form validation:

$this->form_validation->set_rules('math_question', 'Math Question', 'callback_math_question');

Then we check if the validation has been executed:

if($this->form_validation->run() == FALSE)
{
	$this->load->view('contact/form', $data);
 
}
else
{
	echo "success";
}

Now we need to create our function that is called upon validation of the form:

function math_question()
{
	$user_answer = $this->input->post('math_question');
	$questionOne = $this->session->flashdata('questionOne');
	$questionTwo = $this->session->flashdata('questionTwo');
 
	$correct_answer = $questionOne + $questionTwo;
 
	if($user_answer != $correct_answer)
	{
		$this->form_validation->set_message('math_question', 'Your answer to the math question was incorrect');
		return FALSE;
	} else {
		return TRUE;
	}
}

This will check if what the user has input is correct against a temporary flash session.

Here is all of the controller code in full:

<?php
class Contact extends Controller {
 
	function index()
	{
		$this->load->library('form_validation');
		$this->load->library('math_question');
		$this->load->library('session');
 
		$questionOne = $this->math_question->questionOne();
		$questionTwo = $this->math_question->questionTwo();
 
		$this->session->set_flashdata('questionOne', $questionOne);
		$this->session->set_flashdata('questionTwo', $questionTwo);
 
		$data['math_question'] = "What is {$questionOne} + {$questionTwo}?";
 
		$this->form_validation->set_rules('math_question', 'Math Question', 'callback_math_question');
 
 
		if($this->form_validation->run() == FALSE)
		{
			$this->load->view('contact/form', $data);
 
		}
		else
		{
			echo "success";
		}
	}
 
 
 
	function math_question()
	{
		$user_answer = $this->input->post('math_question');
		$questionOne = $this->session->flashdata('questionOne');
		$questionTwo = $this->session->flashdata('questionTwo');
 
		$correct_answer = $questionOne + $questionTwo;
 
		if($user_answer != $correct_answer)
		{
			$this->form_validation->set_message('math_question', 'Your answer to the math question was incorrect');
			return FALSE;
		} else {
			return TRUE;
		}
	}
 
}

Create the view

The last thing we need to do is create the view. Goto views and create a folder called contact, within that folder create a file called form.php.

Here is the code for form.php

<?php
echo validation_errors();
echo form_open('contact');
?>
Name: <input type="text" name="name" /> <br />
<?=$math_question?> <br />
Answer: <input type="text" name="math_question" /> <br />
<input type="submit" name="submit" value="Send!" />
<?php
echo form_close();
?>

On the first line we output the validation errors if there is any, on the second line we use the form helper to open the form tags and likewise for the bottom line where we close the form. $math_question is the variable that is passed in from the controller.

Post your thoughts

Let us know what you think of the tutorial and share your thoughts and contributions below in the comments.

Related posts:

1. Build a Twitter-like site with CodeIgniter and jQuery Part 2 Don't forget to check out part 1 if you have...
2. Twitter-like pagination using CodeIgniter and jQuery If you use Twitter you'll notice that there is a...
3. Build a Twitter-like site with CodeIgniter and jQuery This tutorial will be the first of a five part...

Related posts brought to you by Yet Another Related Posts Plugin.

View full tutorial

In the last episode we added AJAX functionality to a paginated list of products. Instead of acting as normal HTML links, the paginated links had click events added to them via unobtrusive JavaScript so that when clicked they made an AJAX request that updated the main content of the page with a new page of products.

Problems With AJAX

Because we’re using AJAX to update the page the URL doesn’t change when a new page of products is loaded. This means that if we reload the page, or bookmark it and return to it later, the first page of products will be shown no matter what page of products we were on. Another consequence of using AJAX is that changing the page of links we’re viewing doesn’t add the previous page to the browser’s history, so we can’t use the back and forward buttons to move through the pages we’ve just viewed.

So there are disadvantages to our AJAX approach; how can we work around them? That’s what we’ll show you in this episode. Be warned that this episode will be more about JavaScript than Ruby on Rails as the issues we’ll be dealing with are on the client-side.

There are a number of JavaScript libraries we could use to solve this problem. One of the oldest is reallysimplehistory, available on Google code. There is also Yahoo’s Browser History Manager. Yahoo have a number of JavaScript libraries available so it’s worth a look. Another option is Asual’s SWFAddress, which works with Flash as well as JavaScript.

All of the libraries mentioned above work with plain JavaScript, but as we’re using jQuery in our application it would be better if we could find one designed to work with that. Asual, mentioned above, have released a plugin called jQuery Address that would work, but instead we’re going to use a different one called jQuery URL Utils plugin. This plugin has a lot of functionality despite its small size (less than 4KB minified) and comes with good documentation.

Continue reading full tutorial...

Related posts:

1. Deep Linking with jQuery You can view a demo and download the resources for...
2. 10 Awesome jQuery Tutorials You Should Check Out jQuery is a great tool that everyone in web development...
3. Quick Tip: Resolving conflicting problems between jQuery and MooTools or any other Javascript library Recently I wrote quite a huge chunk of jQuery for...

Related posts brought to you by Yet Another Related Posts Plugin.