This article is a continuation in our series on developing your own blog application using jQuery's ajax() method to lazy-load data from a MySQL table. In this third part, we will build out the comment page controller to display user comments on blog entries.
If you’re looking for a group of tutorials that teach you, step-by-step, how to combine the functionality of jQuery with Progressive Enhancement - all in one single web application - then look no further.
In the previous installments, this series guided you through the development of a basic blog application, which made use of jQuery’s “ajax()” method to lazy-load from a MySQL table the comments related to each blog entry. These comments will remain entirely accessible even if JavaScript is disabled in the user's browser.
Before we continue, now is a good time to recap the topics discussed in the last tutorial, in case you haven't had a chance to review it. In it, I created a blog post controller file, which was responsible for retrieving a set of blog entries from a MySQL database. Once the controller performed this operation successfully, the pertaining entries were dumped to the screen via a simple PHP template.
Developing a blog program that only displays a few posts on the browser is a half-finished process however, as it’s necessary to give it the ability to show the associated comments too. In this tutorial I’m going to build a comment page controller, quite similar to the one that handles blog entries, which will pull out the corresponding comments from the database, in this way extending a the program’s current functionality. Recap time: a quick review of the blog’s source code
Before I start discussing the details regarding the construction of the comments page controller referenced in the introduction, it’d be helpful to take a quick look at the source files created so far. In doing so, you’ll have a more clear idea of how this brand new controller fits into the existing schema of the blog program.
With that being said, here’s the program’s index file, which includes a blog post controller and displays the corresponding blog posts via a simple “foreach” PHP construct:
(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 stated before, the above “index.php” file is a basic template whose responsibility is to iterate over the fetched blog entries and print them to the screen. As with any other kind of template, this one has an associated CSS file that defines its visual presentation. Below is the definition of this file:
Aside from providing the HTML elements of the earlier “index.php” file with a more pleasant appearance, the previous styles don’t do anything especially interesting. So, leap forward and take a look at the following interface and its implementing class. In case you’re not aware, these are the building blocks of the page controller that fetches blog entries from the database.
JavaScript 
/ 2 
Overview of JavaScript Variables
