Because of the recent announcement of the iPad 2 more people are going to want to learn how to develop for the iPhone OS. I recently purchased an iPad 2 3G with o2, so far the broadband has been flawless.

This tutorial will be a basic walk-through for beginners who want to start developing.

The application that we will be creating will consist of two button and one label.

Create a new project

First of all open Xcode and click "Create a new Xcode project". Select View-based Application and then iPad as the product.

Save the project as Tutorial.

Outlets and Actions

For things such as labels and textfields we use IBOutlets and for buttons we use IBActions. IB stands for Interface Builder and is what we will use to create our interface and link the connections.

To add our outlets and actions open up TutorialViewController.h.

Under @interface TutorialViewController : UIViewController { add:

IBOutlet UILabel *currentNumber;

Then before @end add:

-(IBAction)incrementNumber:(id)sender;
-(IBAction)decrementNumber:(id)sender;

Save TutorialViewController.h.

Create the interface and make connections

Open up TutorialViewController.xib. From the library drag one labels and two buttons.

Control + click the File's Owner object and drag it to the label then select currentNumber; now go from the minus and plus button to the File's Owner object and select decrementNumber for the minus button and incrementNumber for the plus button.

Save TutorialViewController.xib and close Interface Builder.

The Code

Open TutorialViewController.m. Below the implementation we need to create an integer called number and set the value to 0.

int number = 0;

We now need to create methods for when the increment and decrement buttons are pressed.
When the increment button is pressed we will increment the number integer by 1 then set the value of currentNumber to number by using a formatted string.

-(IBAction)incrementNumber:(id)sender {
	number++;
	[currentNumber setText:[NSString stringWithFormat:@"%d", number]];
}

and for decrement its the same but we decrement the number integer by 1.

-(IBAction)decrementNumber:(id)sender {
	number-;
	[currentNumber setText:[NSString stringWithFormat:@"%d", number]];
}

Build and Run

Press the Build and Run button (command + return) and your app will compile then open.

Download

Download

No related posts.

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

You can view a demo and download the resources for this tutorial at the bottom of the post.

Web 2.0 websites have a lot of Ajax functionality, some times when you load a new element of a page you may want the user to be able to click the back or forward button so that they can see the previously loaded content. One method to add this function to a website is to use the jQuery Address plugin with jQuery.

jQuery Address has 4 main methods; init, change, internalChange, externalChange. The init method is what is called when the plugin is initiated. The change method is called when the URL is changed, an element in the page is changed or either the forward or backward button is pressed. The change method has the combined functionality of internalChange and externalChange. The internalChange is only called when a hyperlink inside the page is clicked; externalChange is only called when the URL is changed or the backward or forward button is pressed.

To allow deep linking within your website the only two methods that are required is init and change, you can then use internalChange and externalChange wherever you may need them.

Getting it to work

The first thing that is required of course is that you download the file for jQuery Address. When you have done this copy the jquery.address-1.1.min.js file into the same location as your index.html file.

Now we include jQuery and the jQuery Address plugin, put this inside the head tags in your html file:

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.1");
</script>
<script src="jquery.address-1.1.min.js"></script>

The jQuery

The next thing that we're going to do is create a function that will be called when a hyperlink is clicked so that we know what file to load and where to load it. We will call this function loadURL(), it will take one parameter named url.

function loadURL(url) {
	    	console.log("loadURL: " + url);
	    	$("#area").load(url);
}

We have console.log so that when we open up Firebug in Firefox we know which page is being requested. This is useful for debugging if there are any faults with the requested page loading.

We now set the jQuery Address event handlers so we know when to deep link an element within the page.

$.address.init(function(event) {
	        console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
	    	$("#area").load($('[rel=address:' + event.value + ']').attr('href'));
	    	console.log("change");
})

What this code does is retrieves the href attribute from a hyperlink by matching the rel to a hyperlink. We also log when it should have changed so we can see this in Firebug.

The last bit of jQuery that we do will check when a link has been pressed and then call the loadURL() function that we created before.

$('a').click(function(){
	    	loadURL($(this).attr('href'));
});

This is what the head of your file should look like:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>TheTutorialBlog.com : jQuery Deep Linking</title>
	<script src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load("jquery", "1.4.1");
	</script>
	<script src="jquery.address-1.1.min.js"></script>
 
 
	<script type="text/javascript">
	/*<![CDATA[*/
	$("document").ready(function(){
 
	    function loadURL(url) {
	    	console.log("loadURL: " + url);
	    	$("#area").load(url);
	    }
 
 
	    // Event handlers
	    $.address.init(function(event) {
	        console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
	    }).change(function(event) {
	    	$("#area").load($('[rel=address:' + event.value + ']').attr('href'));
	    	console.log("change");
	    })
 
	    $('a').click(function(){
	    	loadURL($(this).attr('href'));
	    });
 
	    });
 
	/*]]>*/
	</script>
</head>

The HTML

The HTML for this is really basic stuff, we will create two hyperlinks that will load two separate files. We will also create a div element named area, this is where the files will be loaded.

<body>
 
 
	<a href="test1.html" rel="address:/test1">Test 1</a> <br />
	<a href="test2.html" rel="address:/test2">Test 2</a> <br /> <br /> <br />
 
	Load Area: <br />
	<div id="area"></div>
 
 
</body>

The name of the file that you want to load goes inside the href tag. You also need to include address:/ inside rel. This is how jQuery Address knows what hyperlinks you want to deep link.

Final words

I hope this tutorial has been useful, please feel free to leave a comment or ReTweet this tutorial on Twitter.

Demo and Download

Demo
Download

No related posts.

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

For this tutorial we are going to create a drop down box similar to the one on the Google homepage when you start typing.

The Markup

The first thing that we must do is create the markup HTML. We are also going to include a stylesheet called style.css, we will create the CSS further down the tutorial.

We need to create an input field and a DIV element, the DIV element is where the suggestions will be displayed.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>TheTutorialBlog.com - jQuery Dropdown Suggestions</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<input type="text" name="suggestions" class="suggestionsinput" value="Search" />
	<div id="suggestions">
		Suggestions for <span class="searchterm"></span>...
	</div><!--suggestions-->
</body>
</html>

The CSS

Create a file called style.css in the same folder.

We are going to give the input field and suggestions DIV rounded corners of 5 pixels. We will also hide the suggestions DIV because it should only be visible when a user starts to type.

	body {
		background-color: #ccc;
	}
 
	.suggestionsinput {
		font-size: 36px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border: 1px solid #999;
		color: #999;
	}
 
	#suggestions {
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		width: 460px;
		background-color: #999;
		position: fixed;
		padding: 5px;
		visibility: hidden;
	}

The jQuery

Load the jQuery library from Google. Place this code below the include of the CSS file in your HTML file.

	<script src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load("jquery", "1.3.2");
	</script>

Below this code we will write our jQuery.

Check that the document is loaded.

	<script type="text/javascript">
	$(document).ready(function(){
 
		// Code goes here
 
	})
	</script>

When the page is loaded the input field will display "Search", when the user clicks on the input field we want it to be blank so that they can start searching without having to delete the word.

	// clear text from input
	$(".suggestionsinput").click(function(){
		if($(".suggestionsinput").val() == "Search")
		{
			$(".suggestionsinput").val("");
		}
	})

When the input field has been cleared the user will begin typing, we need to check to see if the user has started typing and if they have then we need to display the suggestions box.

	// check if key has been pressed
	$(".suggestionsinput").keyup(function(event){
		if($(".suggestionsinput").val() != "")
		{
			// make suggestions visible
			$("#suggestions").css('visibility', 'visible');
			$("#suggestions").hide();
			$("#suggestions").fadeIn('slow');
			$(".searchterm").text($(".suggestionsinput").val());
			// $("#suggestions").load('http://URL.to.load');
 
		} else {
			// hide suggestions
			$("#suggestions").fadeOut('slow', function(){
				$("#suggestions").css('visibility', 'hidden');
			});
 
		}
	})

In this tutorial we are only making the drop down box visible, to load an actual list of suggestions uncomment $("#suggestions").load('http://URL.to.load'); then specify a URL where your script is that will load your suggestions and return it to the user.

The HTML File

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>TheTutorialBlog.com - jQuery Dropdown Suggestions</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
		<script src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
		google.load("jquery", "1.3.2");
		</script>
 
		<script type="text/javascript">
		$(document).ready(function(){
 
			// clear text from input
			$(".suggestionsinput").click(function(){
				if($(".suggestionsinput").val() == "Search")
				{
					$(".suggestionsinput").val("");
				}
			})
 
			// check if key has been pressed
			$(".suggestionsinput").keyup(function(event){
				if($(".suggestionsinput").val() != "")
				{
					// make suggestions visible
					$("#suggestions").css('visibility', 'visible');
					$("#suggestions").hide();
					$("#suggestions").fadeIn('slow');
					$(".searchterm").text($(".suggestionsinput").val());
					// $("#suggestions").load('http://URL.to.load');
 
				} else {
					// hide suggestions
					$("#suggestions").fadeOut('slow', function(){
						$("#suggestions").css('visibility', 'hidden');
					});
 
				}
			})
 
 
 
 
		})
		</script>
	</head>
	<body>
		<input type="text" name="suggestions" class="suggestionsinput" value="Search" />
		<div id="suggestions">
			Suggestions for <span class="searchterm"></span>...
		</div><!--suggestions-->
	</body>
	</html>

The CSS File: style.css

body {
background-color: #ccc;
}

.suggestionsinput {
font-size: 36px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #999;
color: #999;
}

#suggestions {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 460px;
background-color: #999;
position: fixed;
padding: 5px;
visibility: hidden;
}

Download/Demo

Download
Demo

No related posts.

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

I have already done this tutorial with CodeIgniter and jQuery it can be found here. I thought I would do this tutorial again but rewrite it for CakePHP because it is a popular PHP framework.

Before we start doing any PHP code make sure to copy in the code below into your MySQL database.

CREATE TABLE  `tutorials`.`twitter_messages` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 30 ) NOT NULL ,
`message` VARCHAR( 140 ) NOT NULL
) ENGINE = INNODB

Create the controller

Under the folder named controller create a file and call it twitter_controller.php.

We create a class inside it called TwitterController and it will extend AppController. We then set the name of the controller to twitter and tell CakePHP which table we are using in our database.

<?php
class TwitterController extends AppController {
	var $name = 'twitter';
	var $uses = 'twitter_messages';
 
}
<pre>
 
In this controller we will have two methods index and get_messages. Our index method will have no parameters and get_messages will have one parameter so that we know what the offset of the current number of messages loaded.
 
Inside our index method we will retrieve the number of messages in the table and also the first 10 records.
 
<pre lang="php">
function index()
{
	$this->set('num_messages', $this->twitter_messages->num_messages());
	$this->set('messages', $this->twitter_messages->get_messages());
}

In our second method called get_messages we grab the 10 latest messages for when it is called via jQuery.

function get_messages($offset)
{
	$this->set('latest_messages', $this->twitter_messages->get_messages($offset));
}

Model

Under the models folder create a file and name it twitter_messages.php.

<?php
class Twitter_messages extends AppModel {
 
	var $name = 'twitter_messages';
 
 
	function get_messages($offset=0)
	{
		$messages = $this->find('all', array('offset'=>$offset, 'limit'=>10));
		return $messages;
	}
 
	function num_messages()
	{
		return $this->find('count');
	}
 
}
?>

These two methods in the model are called from the controller.

View

Create a folder called twitter inside the views folder. Then create a file called index.ctp and get_messages.ctp.

index.ctp

Inside the index file copy this css and jQuery code.

<style>
#main_content {
	border: #999 1px solid;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 5px;
}
 
#more_button {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	color: #990000;
	text-align: center;
	padding: 5px;
	background-color: #fff;
	background-image: url("http://s.twimg.com/a/1261078355/images/more.gif");
	background-repeat: repeat-x;
	cursor: pointer;
	border: 1px solid #AAA;
}
 
#more_button:hover {
	border:1px solid #bbb;
	text-decoration:none;
	background-position:left -78px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
 
<script type="text/javascript">
		$(document).ready(function(){
		var num_messages = <?=$num_messages?>;
		var loaded_messages = 0;
			$("#more_button").click(function(){
				loaded_messages += 10;
				$.get("twitter/get_messages/" + loaded_messages, function(data){
					$("#main_content").append(data);
 
				});
 
				if(loaded_messages >= num_messages - 10)
				{
					$("#more_button").hide();
					//alert('hide');
				}
			})
		})
	</script>

Below this copy in the following code:

<div id="main_content">
<?php
foreach($messages as $message)
{
	echo $message['twitter_messages']['username'] . ' - ' . $message['twitter_messages']['message'] . '<br />';
}
 
?>
</div>
 
<div id="more_button">
	more
</div>

Here we are displaying the first 10 records in the database then when the more button is clicked an ajax request will retrieve 10 more.

get_messages.ctp

This file is the file that is called upon the ajax request. This will display the 10 latest retrieve records.

<?php
foreach($latest_messages as $message)
{
	echo $message['twitter_messages']['username'] . ' - ' . $message['twitter_messages']['message'] . '<br />';
}
 
?>

Final words

I hope this tutorial has been useful to you, please Retweet it if it was useful for you. You can also follow me @wezpyke

Download

Download the resources for this tutorial

No related posts.

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

If you use Twitter you'll notice that there is a more button at the bottom at the bottom of your timeline, when you click this more tweets appear. This is Twitters way of paginating a page. In this tutorial I'll show you how to create a pagination system using CodeIgniter and jQuery that is almost identical to Twitters.

First of all copy this SQL into your database to create a table that we will be using to grab rows from.

CREATE TABLE  `tutorials`.`twitter_messages` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 30 ) NOT NULL ,
`message` VARCHAR( 140 ) NOT NULL
) ENGINE = INNODB

Create the controller

The class we create is going to be called twitterpagination:

<?php
class twitterpagination extends Controller {
 
}

inside the controller class create a function called index()

function index()
{
	$this->load->helper('url');
	$this->load->model('twitterpagination_model');
	$data['num_messages'] = $this->twitterpagination_model->num_messages();
	$data['latest_messages'] = $this->twitterpagination_model->get_messages();
	$this->load->view('twitterpagination/index', $data);
}

We load the url helper because we will be using base_url() in our view to link to our stylesheet. The model we will be creating is twitterpagination_model so we call this also. $data['num_messages'] returns the number of messages in the database and $data['lastest_messages'] loads the 10 newest rows from the database. Lastly we include a view that we will be creating and pass in $data.

Inside the controller I have created two more functions insert_rows() and get_messages(). The function insert_rows() will insert 50 examples rows for us to retrieve from the table.

function insert_rows()
{
	$this->load->database();
	$i = 0;
	while($i < 50)
	{
		$i++;
		$data = array('username' => 'user', 'message' => 'message ' . $i);
		$this->db->insert('twitter_messages', $data);
		echo $i. '<br />';
	}
}

The last function we have in our controller is get_messages()

function get_messages($offset)
{
	$this->load->model('twitterpagination_model');
	$data['latest_messages'] = $this->twitterpagination_model->get_messages($offset);
	$this->load->view('twitterpagination/get_messages', $data);
}

This function will be called from the view using an ajax call. We have one parameter called $offset, we use this so we know where to pull the next set of rows from in the table. We simply include the twitterpagination_model, call the get_messages() function from the model and pass in the data to the view.

Here is all of the controller code:

<?php
class twitterpagination extends Controller {
 
	function index()
	{
		$this->load->helper('url');
		$this->load->model('twitterpagination_model');
		$data['num_messages'] = $this->twitterpagination_model->num_messages();
		$data['latest_messages'] = $this->twitterpagination_model->get_messages();
		$this->load->view('twitterpagination/index', $data);
	}
 
 
	function insert_rows()
	{
		$this->load->database();
		$i = 0;
		while($i < 50)
		{
			$i++;
			$data = array('username' => 'user', 'message' => 'message ' . $i);
			$this->db->insert('twitter_messages', $data);
			echo $i. '<br />';
		}
	}
 
 
	function get_messages($offset)
	{
		$this->load->model('twitterpagination_model');
		$data['latest_messages'] = $this->twitterpagination_model->get_messages($offset);
		$this->load->view('twitterpagination/get_messages', $data);
	}
 
}

Save this file as twitterpagination.php inside the controllers folder.

The Model

For the model we create a file called twitterpagination_model.php inside the models folder. Then we create a class called twitterpagination_model which extends Model.

<?php
class twitterpagination_model extends Model {
 
}

Next we create the function that will pull the messages from the table.

function get_messages($offset=0)
{
	$this->db->order_by('id', 'desc');
	$query = $this->db->get('twitter_messages', 10, $offset);
	return $query->result();
}

We order the ID descending so that the newest rows are called first. Then we create a variable called $query and retrieve the 10 latest messages from twitter_messages.

Another function that we create in the model is num_messages(). This function returns the number of messages and will be call in the view. This is so we know how many messages are in the table and when to hide the "more" button in the view so the user cannot see it anymore.

function num_messages()
{
	$query = $this->db->count_all_results('twitter_messages');
	return $query;
}

That is all we need to do for the controller.

The View

First of all create a folder called twitterpagination inside the views folder, then create two files called index.php and get_messages.php.

The code for index.php

The most important thing about this file is not to forget to include the jQuery library or the code will not work at all.

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>

Just below the inclusion of the jQuery library we will write our javascript.

<script type="text/javascript">
	$(document).ready(function(){
	var num_messages = <?=$num_messages?>;
	var loaded_messages = 0;
		$("#more_button").click(function(){
			loaded_messages += 10;
			$.get("twitterpagination/get_messages/" + loaded_messages, function(data){
				$("#main_content").append(data);
 
			});
 
			if(loaded_messages >= num_messages - 10)
			{
				$("#more_button").hide();
				//alert('hide');
			}
		})
	})
</script>

After we have checked the DOM is ready we create two variables called num_messages and loaded_messages. The variable num_messages is the total number of messages in the table and loaded_messages will increase by 10 every time 10 more rows are retrieved.

We then have a click event for our more button that will send a request to the get_messages view that we will create.

Then we check if the number of loaded messages is the same as the total number off messages so that we know to hide the more button as there are no more rows to retrieve.

The next thing to do is to include the stylesheet.

<link rel="stylesheet" href="<?=base_url();?>stylesheet/main.css" type="text/css" />

Inside the body we include this html:

<div id="main_content">
<?php
foreach($latest_messages as $message)
{
	echo $message->username . ' - ' . $message->message . '<br />';
}
?>
</div>
<div id="more_button">
more
</div>

The div with the id of main_content is where the messages will be loaded and the div with id of more_button is our button that will be clicked to retrieve more messages.

Here is the full html/javascript of the index.php page.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Twitter Pagination</title>
	<script src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load("jquery", "1.3.2");
	</script>
	<script type="text/javascript">
		$(document).ready(function(){
		var num_messages = <?=$num_messages?>;
		var loaded_messages = 0;
			$("#more_button").click(function(){
				loaded_messages += 10;
				$.get("twitterpagination/get_messages/" + loaded_messages, function(data){
					$("#main_content").append(data);
 
				});
 
				if(loaded_messages >= num_messages - 10)
				{
					$("#more_button").hide();
					//alert('hide');
				}
			})
		})
	</script>
	<link rel="stylesheet" href="<?=base_url();?>stylesheet/main.css" type="text/css" />
</head>
<body>
	<div id="main_content">
	<?php
	foreach($latest_messages as $message)
	{
		echo $message->username . ' - ' . $message->message . '<br />';
	}
	?>
	</div>
	<div id="more_button">
	more
	</div>
</body>
</html>

The second view that we create is get_messages.php. This is the page that is called when the more button is clicked.

<?php
	foreach($latest_messages as $message)
	{
		echo $message->username . ' - ' . $message->message . '<br />';
	}
?>

Stylesheet

The very last thing we need to do is create a stylesheet for our page to make it look a little nicer.

Create a folder named stylesheet in the root of the CodeIgniter folder and create a file in it called main.css. The path should be {CI_root}/stylesheet/main.php.

#main_content {
	border: #999 1px solid;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 5px;
}
 
#more_button {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	color: #990000;
	text-align: center;
	padding: 5px;
	background-color: #fff;
	background-image: url("http://s.twimg.com/a/1261078355/images/more.gif");
	background-repeat: repeat-x;
	cursor: pointer;
	border: 1px solid #AAA;
}
 
#more_button:hover {
	border:1px solid #bbb;
	text-decoration:none;
	background-position:left -78px;
}

Conclusion

Don't forget to configure your database.php file in the config folder and also inside autoload.php make sure you auto load the database library.

$autoload['libraries'] = array('database');

I hope this tutorial has been of use to you, please feel free to post your thoughts and modifications.

No related posts.

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

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.

No related posts.

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

FancyBox is a plugin for jQuery that allows you to easily display images in the same window with a simple yet effective code. The plugin takes no time to set up and all that is required is that you include the jQuery javascript library within the pages that you are using the FancyBox plugin on.

Features:

• Display single images
• Create image galleries
• Display iFrame
• Execute Ajax
• Include Flash, movies or audio files

Using FancyBox

First of all we need to link to the jQuery and FancyBox file after we have downloaded.

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/jquery.fancybox.js"></script>

Next we add the stylesheet that is included with FancyBox:

<link rel="stylesheet" href="path-to-file/fancybox.css" type="text/css" media="screen">

Then to link to an image we simply set the id of an image to "single_image":

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

All that is left to do is execute the jQuery code when the DOM is loaded.

$(document).ready(function() {
 
    $("a#single_image").fancybox();
 
}

That is all the code that is needed to display a single image. To learn how to do things such as ajax calls, view the documentation for FancyBox here.

Other lightbox alternatives

Is there another lightbox alternative that you have used that you would like to share with all the readers? Post a comment below.

No related posts.

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

Create a form that requires the user to enter both a username and password. If the username field or password field is left blank then a message will be displayed.

No related posts.

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

Learn how to use the animate function within the jQuery library to create an effect similar to the table of contents for the table of contents on codeigniter.com.

Blip.tv Link

Click to play

No related posts.

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

There are many ways of getting traffic to your website such as with search engines, social network websites and telling friends. The best way that I have found besides search engines of getting traffic to your website is by submitting your tutorials to tutorial submission websites.

There are tutorial websites that allow for submission of specific tutorials such as only PHP or Photoshop tutorials and there are websites that allow you to submit a lot of different types of tutorials to that website.

CodeBounce is one of the tutorial submission websites that allow you to submit a range of different tutorials. Its system is somewhat similar to that of Digg's. CodeBounce is a great website and is easy to get to grips with. They allow for the submission of ASP.NET, PHP, CSS, Photoshop, WordPress, Graphic Design, Web Design and Java.
Developer Links and Tutorials.
 

LearnPHP is a website that I recommend submitting your PHP tutorials too because I receive a lot of visitors from them and overall the website is easy to navigate and understand. They only allow for the submission of PHP tutorials as you can probably tell from the name.

Tutorialized is a great website that allows for the submission of many different types of tutorials. Tutorialized has been a website that has been around for a long time and if you submit a tutorial to this website and you get accepted then expect quite a lot of hits from here as they have a lot of visitors.

If there are any other websites that you like submitting tutorials too and have received a good amount of visitors from then share it with everyone and let us know by posting a comment.

No related posts.

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