Home arrow JavaScript arrow jQuery Comment Page Controllers
JAVASCRIPT

jQuery Comment Page Controllers


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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
May 16, 2011
TABLE OF CONTENTS:
  1. · jQuery Comment Page Controllers
  2. · Retrieving Blog Entries from a Database
  3. · Creating Comment Templates with jQuery

print this article
SEARCH DEVARTICLES

jQuery Comment Page Controllers
(Page 1 of 3 )

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:

(base.css)

body {
    padding: 0;
    margin: 0;
    background: #585858;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #585858;
}
h1 {
    font-size: 4em;
    color: #0080ff;
}
h2 {
    font-size: 1.8em;
    color: #E87400;
    margin: 0 0 10px 0;
}
h3 {
    font-size: 1.2em;
    color: #585858;
    margin: 0 0 15px 0;
}
p {
    margin: 0 0 15px 0;
    line-height: 18px;
}
a {
    color: #0080ff;
    outline: 0;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
    background: #fff;
}
#header {
    padding: 20px 20px 10px 20px;
}
#content {
    padding: 20px;
}
#content .blogpost {
    padding: 20px;
    margin-bottom: 15px;
    background: #f8f8f8;
    border: 1px solid #eee;
}
#content .comment {
    padding: 20px;
    margin-bottom: 15px;
    background: #eee;
}
#content p.warning {
    color: #acacac;
}
#footer {
    padding: 0 20px 20px 20px;
}
#footer h2 {
    color: #808080;
}


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.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials