Home arrow JavaScript arrow jQuery and Ajax Blog Post Page Controllers
JAVASCRIPT

jQuery and Ajax Blog Post Page Controllers


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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
April 25, 2011
TABLE OF CONTENTS:
  1. · jQuery and Ajax Blog Post Page Controllers
  2. · Interacting with MySQL Abstraction Classes
  3. · Retrieving Blog Entries from MySQL with jQuery and Ajax

print this article
SEARCH DEVARTICLES

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: 

Using the jQuery Ajax Method to Create a Blog

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:

(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;
}


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.


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