Don't forget to check out part 1 if you have no read it.

In the second part of this 5 part tutorial series on how to build a Twitter-like website, we will be creating a signup form so that users can register to our website.

We will be adding records to the database that we created in part 1 and creating validation rules to make sure that the user didn't put any invalid data into the form.

Change the base url

Navigate to ci_twitter->system->applications->config->config.php.
Change:

$config['base_url'] = "http://example.com/";

To the path to where CodeIgniter is. On my machine it would be:

$config['base_url'] = "http://tutorials:8888/ci_twitter/";

Create the controller

We need to create a main controller for things such as the home page, sign up page, login page, etc. Go to ci_twitter->system->application->controllers then in the controllers folder create a file called main.php.

Inside our main controller we now need to define the class and the functions inside it.

<?php
class main extends Controller {
 
	function index()
	{
		$this->load->view('main/index');
	}
 
	function signup()
	{
		$this->load->library('form_validation');
		$this->load->helper(array('form', 'url'));
		$this->load->view('main/signup');
	}
 
	function signin()
	{
		$this->load->library('form_validation');
		$this->load->helper('form');
		$this->load->view('main/signin');
	}
 
}
 
?>

If we were to go to http://localhost/ci_twitter/index.php/main/ then we will see a blank page.

Create the views

Before we can see anything we need to create a folder for the functions in our main controller. Go to ci_twitter->system->application->views. Inside the views folder create another folder called main. In the main folder we will create files for each function that we have in the main controller.

Create these files in the main folder we created:

• index.php
• signup.php
• signup_success.php
• signin.php

Go to index.php and enter Hello World. Now if you go to http://localhost/ci_twitter/index.php/main/ you will see Hello World.

The next thing to do is to add a form and text fields so that people can input data. For the sign up page the html is done in the signup.php view file. The validation and processing is done in the main controller inside the signup function.

Add the following code to the signup.php view:

<h2>Sign up</h2>
<?php
echo validation_errors();
echo form_open('main/signup');
?>
 
Full name: <input type="text" name="name" /> <br />
Username: <input type="text" name="username" /> <br />
Password: <input type="password" name="password" /> <br />
Email: <input type="text" name="email" /> <br />
<input type="submit" value="Create my account" name="create" />
 
</form>

Then add this inside signup_success.php:

Your account was created, <?php echo anchor('main/signin', 'login here'); ?>

This is all that we need to do for the sign up view for now. Validation rules is what we will do next in the main controller for sign up.

Validation

When doing form validation all of the validation takes place inside of the controller. For now we will set basic validation rules for each field within the form.

In the main controller replace the code for the signup function with:

	function signup()
	{
		$this->load->library('form_validation');
		$this->load->helper(array('form', 'url'));
 
		$this->form_validation->set_rules('name', 'Name', 'required|min_length[5]|max_length[50]|trim|xss_clean');
		$this->form_validation->set_rules('username', 'Username', 'required|min_length[5]|max_length[50]|trim|xss_clean');
		$this->form_validation->set_rules('password', 'Password', 'required|min_length[5]|max_length[50]|trim|xss_clean');
		$this->form_validation->set_rules('email', 'Email', 'required|min_length[5]|max_length[50]|valid_email');
 
		if($this->form_validation->run() == FALSE)
		{
			$this->load->view('main/signup');
		} else {
			$this->load->view('main/signup_success');
		}
 
	}

If you go to the sign up page now you should see that all the validation code works like it should. Now we will add a model so that we can add the user to the users table.

Create user model

Go to the model folder and create a file called User_model.php.

Insert this code into the model:

<?php
class User_model extends Model {
 
	function user_exists($username)
	{
		$this->db->select('username');
		$this->db->from('users');
		$this->db->where('user_username', $username);
		$result = $this->db->count_all_results();
		return $result;
	}
 
	function create_user($fullname, $username, $email, $password)
	{
		$data = array('user_fullname' => $fullname, 'user_username' => $username, 'user_email' => $email, 'user_password' => $password);
		$this->db->insert('users', $data);
	}
}
?>

Now we need to load the User_model in the controller.
Insert this code in the signup function:

$this->load->model('User_model');

We also need to add the user if the validation rules are passed:

$this->User_model->create_user($this->input->post('name'), $this->input->post('username'), $this->input->post('email'), $this->input->post('password'));
$this->load->view('main/signup_success');

Part 3

In part 3 we will be creating a login page and functionality so that people can post messages.

Download

Download

No related posts.

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

This tutorial will be the first of a five part series where we will built a social network site similar to Twitter from scratch. We will be using the CodeIgniter framework for the core of the website and jQuery for the effects. In this first part we will be configuring CodeIgniter to display everything correctly and we will also set up a database and connect to it.

Download and configure

Download the CodeIgniter framework from their website. We don't need to download anything for jQuery because we will be loading it directly from Google as it's quicker to load.

Once you have downloaded the latest version of CodeIgniter from their website, unzip it and copy the files to your public_html folder or equivalent. Rename the CodeIgniter folder to ci_twitter.

Now if you go to http://localhost/ci_twitter you should see something similar to the image below.

Database

We now need configure a database to connect to CodeIgniter so that we can use it to insert and retrieve information. Go to phpMyAdmin or whatever you use for MySQL databases. Create a database called ci_twitter.

CREATE DATABASE `ci_twitter` ;

For now we are only going to create a table for the users, in another part we will create other tables when we need them.

users table:

 CREATE TABLE `ci_twitter`.`users` (
`user_id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`user_fullname` VARCHAR( 50 ) NOT NULL ,
`user_username` VARCHAR( 50 ) NOT NULL ,
`user_email` VARCHAR( 50 ) NOT NULL ,
`user_password` VARCHAR( 50 ) NOT NULL ,
`user_protected_updates` TINYINT NOT NULL DEFAULT '0',
`user_location` VARCHAR( 50 ) NOT NULL ,
`user_web` VARCHAR( 50 ) NOT NULL ,
`user_bio` VARCHAR( 160 ) NOT NULL
) ENGINE = MYISAM

Configure CodeIgniter

Now that we have set up our database and have inserted a table we will configure CodeIgniter to connect to it.

Navigate to database.php by going to ci_twitter -> system -> application -> config -> database.php. From here enter the correct information for your database so that it connects.

We need to auto load the database library because we will be using it a lot.

Go to autoload.php in the same folder as database.php.

Change:

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

To:

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

The database library will now load every time without us having to put $this->load->library('database'); in every controller.

End of Part 1

This is the end of the first part of approximately five parts.

Part 2

Part 2 will be following tomorrow. In part 2 we will be creating a sign up so that we can add users to the database.

Download

You can download part one from here

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.

Blip.tv Page

Link to helper

Twitter

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.

Frameworks are becoming more and more popular because of the useful pre-built functions and organization of how files are meant to be stored and used.

Here is a shortlist of 10 resources that should be useful for beginners looking to learn CodeIgniter.

1. CodeIgniter From Scratch
2. From CodeIgniter to Ruby on Rails: A Conversion
3. Smarty as a template engine in Code Igniter
4. CodeIgniter Sample Auto-Complete Application
5. Everything You Need to Get Started With CodeIgniter
6. A Quick Code Igniter and JQuery Ajax Tutorial
7. Speed Up your Web Application by CodeIgniter
8. How to use CodeIgniter’s OpenID library to integrate OpenID in your existing user system.
9. Pagination with Code Igniter
10. CodeIgniter User Guide

No related posts.

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