Twitter-like pagination using CakePHP and jQuery

twitter pagination icon Twitter like pagination using CakePHP and jQueryI 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

Bookmark and Share
Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • email
  • FriendFeed
  • LinkedIn
  • Ping.fm
  • Tumblr
  • Twitter

No related posts.

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

, , , , ,

One Response to Twitter-like pagination using CakePHP and jQuery

  1. neel May 2, 2010 at 5:18 am #

    Thanks for this beautiful tutorial for the twitter like pagination using cakephp and jquery.

Leave a Reply