Building a Page Controller with the jQuery Quick Pagination Plug-in
Welcome to the final installment of the series that introduces you to the jQuery Quick Pagination plug-in. Comprised of five parts, this series takes an in-depth look at the most useful features provided by this jQuery add-on and shows you how to use it either for splitting up hard-coded HTML elements, such as paragraphs and images in chunks of readable data, or for paginating sets of database records.
Building a Page Controller with the jQuery Quick Pagination Plug-in - Review: web application source code so far (Page 2 of 4 )
As usual, before developing the remaining blocks of the PHP-based web application, I'd like to reintroduce the source code of its existing parts, as they were initially created in the previous chapter of the series.
So here's the SQL code that defines the table containing data about some hypothetical users:
DROP TABLE IF EXISTS `test`.`users`;
CREATE TABLE `test`.`users` (
`id` INT(4) UNSIGNED NOT NULL AUTO_INCREMENT,
`fname` VARCHAR(100) NOT NULL,
`lname` VARCHAR(100) NOT NULL,
`email` VARCHAR(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
That was really easy to grasp, right? So feel free to move on and look at the following picture, which shows the above table already populated with a few trivial records:
Now that the "users" table contains a group of user-related rows, the next thing you need to see is the source code of the PHP class responsible for querying the table. Here it is:
(MySQLAdapter.php)
<?php
class MySQLAdapter
{
private $_config = array();
private $_link = null;
private $_result = null;
private static $_instance = null;
private static $_connected = false;
// return Singleton instance of MySQLAdapter class
public static function getInstance(array $config = array())
{
if (self::$_instance === null)
{
self::$_instance = new self($config);
}
return self::$_instance;
}
// private constructor
private function __construct(array $config)
{
if (count($config) < 4)
{
throw new MySQLAdapterException('Invalid number of connection parameters');
if ((!$row = mysqli_fetch_object($this->_result)))
{
mysqli_free_result($this->_result);
return false;
}
return $row;
}
// get insertion ID
public function getInsertID()
{
if ($this->_link !== null)
{
return mysqli_insert_id($this->_link);
}
return null;
}
// count rows in result set
public function countRows()
{
if ($this->_result !== null)
{
return mysqli_num_rows($this->_result);
}
return 0;
}
// close the database connection
function __destruct()
{
is_resource($this->_link) and mysqli_close($this->_link);
}
}
(MySQLAdapterException.php)
<?php
class MySQLAdapterException extends Exception{}
Despite its rather lengthy definition, the underlying logic implemented by many of the methods of the "MySQLAdapter" class is fairly straightforward, trust me. Essentially, all that this class does is expose to client code a clean interface. This interface is useful for connecting to the database server, executing hard-coded SQL queries and retrieving database rows. Its functionality is that simple.
And now that you understand how this MySQL abstraction class does its thing, it's time to show the static sections of the web page that will display the previous user-related database records in a paginated fashion. These will render the header and footer areas of the pertinent web page. Their respective definitions are shown below:
(header.htm)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Paginating database records with jQuery Quick Pagination plug-in</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: #fff;
font: 1em Arial, Helvetica, sans-serif;
color: #000;
}
#wrapper {
width: 960px;
margin: 0 auto;
background: #f0f0f0;
}
#header, #content, #footer {
padding: 30px;
}
#users {
padding: 30px;
background: #c0c0ff;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Paginating database records with jQuery Quick Pagination plug-in</h1>
<h2>Header section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
(footer.htm)
<div id="footer">
<h2>Footer section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</body>
</html>
Well, now that I've shown you the corresponding header and footer sections of this example web page, I've finished my summary. At this stage, the functionality of this PHP-driven application is extremely limited, as its building blocks look very disconnected. Therefore, it's necessary to start creating some additional files that put all of these elements to work together in beautiful harmony.
With that premise in mind, in the next segment I'm going to build a simple page controller in PHP. It will add a more dynamic behavior to the application, since it will perform two well-differentiated tasks: first, it will fetch user-related data from the associated MySQL table, and then it will display this information in the form of fancy HTML divs.
To learn more about how this page controller will be developed, click on the link below and read the section to come.
JavaScript 
/ 3 
More Top jQuery Tutorials for Beginners
