In this second part of a four part series covering blog creation with jQuery and Ajax, I will teach you how to implement a blog post page controller that retrieves entries from a MySQL database and displays them onto your web page.
jQuery and Ajax Blog Post Page Controllers (Page 1 of 3 )
It’s not breaking news that jQuery makes it easy to build highly interactive and engaging user interfaces. However, the process can be quite challenging, especially when you need to combine the functionality offered by the library with the benefits of Progressive Enhancement (because you’re using PE when building your own websites, aren’t you?).
There’s no need to worry, however, since the construction of dynamic jQuery-based UIs that are accessible is actually easier than one might think. To prove my point, in the introductory episode of this series I started developing a basic blog application, responsible for fetching a few blog entries from a MySQL database, along with their related comments. You can view that first part of the series here:
The most interesting part of the development process is that the blog program will be able to lazy-load the comments via the jQuery “Ajax” method (which in turn uses PHP to interact with the underlying database). If JavaScript is disabled in the browser, however, the comments will remain completely accessible, even though they’ll be visualized in a different browser window/tab.
In its current state the sample blog doesn’t do anything particularly interesting. I have only managed to create its index page, which contains some presentation logic and nothing else. Nevertheless, things are about to change. In this second tutorial I’m going to implement a blog post page controller, which will be in charge of retrieving blog entries from the database for further display (as stated above).
A brief look at the blog’s index page
If you missed the first part of the series (or don't feel like re-reading it), below I will reintroduce you to this page’s source code, so that you can analyze it in depth and understand what it does.
The page in question is called (not surprisingly) “index.php.” It looks like this:
(index.php)
<?php
// include the blog page controller (application logic) require_once 'blogposts_controller.php'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My sample blog</title> <link rel="stylesheet" type="text/css" href="base.css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1>My sample blog</h1> <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. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p> </div> <div id="content"> <?php foreach ($blogPosts as $blogPost):?> <div class="blogpost"> <h2><?php echo $blogPost->title;?></h2> <h3>Posted by <?php echo $blogPost->author;?></h3> <p><?php echo $blogPost->content;?></p> <p><a href="comments.php?id=<?php echo $blogPost->id;?>">Comments for this post...</a> <div id="comment_container<?php echo $blogPost->id;?>"></div> </div> <?php endforeach;?> </div> <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. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p> </div> </div> </body> </html>
As noted in the beginning of this tutorial, the above web page has been split up into two well-differentiated sections. The first one contains a page controller called “blogposts_controller.php” which is responsible for fetching blog entries from the corresponding database. The second section is nothing more than a simple template, which iterates over the entries and echoes them to the screen.
You may be wondering why I decided to construct this index page using a page controller. Well, to be frank, the reason is to keep the application logic separated from presentation logic, even though both have been implemented in the same file. Nevertheless, the model is really flexible, so it can be easily tweaked to fit into an MVC (model-view-controller) stack.
And now that you grasp the inner workings of the previous web page, it's time to show the CSS file that polishes its visual appearance. Here it is:
The previous CSS styles speak for themselves; therefore, I’m not going to bore you with irrelevant details explaining how they work. Instead, we'll do something more useful. As you may have noticed, the definition of the “blogposts_controller.php” file remains an enigma, even though it’s easy to guess what it does.
It’s still necessary to show the different elements that compose this file and discuss them in greater detail. Given that, in the following segment I’ll be covering the first of these elements, which turns out to be a basic MySQL abstraction class.
JavaScript 
Top jQuery Tutorials for Beginners
