Home arrow JavaScript arrow Using the jQuery Ajax Method to Create a Blog
JAVASCRIPT

Using the jQuery Ajax Method to Create a Blog


If you’re a big fan of jQuery you are probably aware of the tons of handy features that it packages under the hood: easy-to-grasp DOM manipulation and event handling, cross-browser Ajax support, a decent number of built-in animation effects, and an impressive (and ever-growing) list of plug-ins, which permit you to extend its core functionality in all sort of clever ways. In this tutorial, we will teach you to use jQuery's Ajax Method to create a basic blog app, and retrieve comments from a MySQL database.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
March 14, 2011
TABLE OF CONTENTS:
  1. · Using the jQuery Ajax Method to Create a Blog
  2. · Retrieve Data from the MySQL Databse with PHP

print this article
SEARCH DEVARTICLES

Using the jQuery Ajax Method to Create a Blog
(Page 1 of 2 )

Unfortunately, the library’s flat learning curve, along with all of the goodies that it provides right out of the box turn it into the perfect candidate for unintended (and sometimes dramatic) abuse. This happens frequently; if you're skeptical, just do some Googling and pick a random fancy web site. In many cases you’ll be confronted with flashy, jQuery-powered user interfaces that fail painfully when JavaScript is turned off. Sad but true.

Of course, jQuery doesn’t have to be seen as the bad boy; these are issues that simply emerge as a result of designs that were tackled from the very beginning with no accessibility in mind. However, not everything is hopeless when building interactive, yet accessible, GUIs whose behavior relies on the functionality provided by jQuery. To prove my claim, as stated above, in this article series I’m going to develop (in a step-by-step manner) a basic blog application. It will lazy-load (from a MySQL database) the comments associated with each blog entry via jQuery’s “Ajax” method. The comments will remain accessible even if scripting is disabled on the browser, thanks to the proper use of Progressive Enhancement.

Ready to learn the full details regarding the construction of this blog program? Then start reading!

Getting Started: Defining the Blog’s Markup

As someone once said, "first things come first." So, in this case, the first thing I’m going to do is define the landing page of our sample blog. This page will display a few blog entries along with their related comments, which will be fetched on request from our MySQL database. Nothing too complicated, right?

Actually, all of this data will be pulled from a couple of MySQL tables, but the subtleties of this process will be discussed afterwards. For the moment, let's focus on the following (X)HTML document, which defines the blog’s structural markup:   

(index.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>
</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">
    </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 you can see above, the blog’s main page is pretty simple to grasp. Basically, it has been broken down into three different sections that can be seen on every website today: a header, a main content area, and a footer.

You may be wondering why I decided to named this page “index.php” if it doesn’t include any PHP code. Well, as I explained before, the page’s main content section will be used to show some blog posts along with their associated comments, which will be fetched from a MySQL database via PHP. However, it’ll be easy to perform this task using any other server-side language.

So far, so good. Having defined the markup of the blog’s main page, the next logical step is to polish its visual presentation with CSS. This will be done in the following section.

Defining the Blog’s Look

Due to the simple structure exposed by the blog’s landing page, defining its visual appearance is an extremely straightforward process. It's reduced to styling its primary sections, links, paragraphs and a few heading elements. In this case, the CSS file responsible for achieving this will be called “base.css” (you’re free to rename it something that better suits your personal needs).

Having said that, this is how the file looks: 

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

Admittedly, there’s not much that can be said about the above CSS file, except that it assigns a few basic styles to the elements of the blog’s index page, including its blog entries and comments. The best way to see the results produced by this file when it’s attached to the previous web page is to test it on the browser. If all works as expected, the page in question should look like this:

So, now that the blog is starting to look a little more engaging, it’s time to turn it into a more dynamic structure. But how can this be done, and where does jQuery fit into this scheme? Well, bear with me and keep in mind that this is a work in progress.

In line with this, in the next section I’m going to add to a bit of presentation logic using PHP to the main section of the previous web page. This logic will be responsible for displaying blog entries and linking to related comments, which as you know, will be fetched directly from a pair of MySQL tables.


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