Twitter-like pagination using CakePHP and jQuery

Twitter-like pagination using CakePHP and jQuery Comments (1)

by Wez Pyke - January 11, 2010 in PHP,Text Tutorials

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

Share and Enjoy:

Twitter-like pagination using CodeIgniter and jQuery If you use Twitter you'll notice that there is a...
Build a Twitter-like site with CodeIgniter and jQuery This tutorial will be the first of a five part...
Build a Twitter-like site with CodeIgniter and jQuery Part 2 Don't forget to check out part 1 if you have...
jQuery Dropdown Suggestions For this tutorial we are going to create a drop...
PHP gallery with no page reloads using jQuery For this tutorial we will be using the ImgBrowz0r class...

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

One Response to “Twitter-like pagination using CakePHP and jQuery”

neel says:

May 2, 2010 at 5:18 am

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