Home arrow JavaScript arrow Page 3 - Storing Banner Data in MySQL Tables for a Dynamic Banner System with AJAX
JAVASCRIPT

Storing Banner Data in MySQL Tables for a Dynamic Banner System with AJAX


If you're a web developer searching for a guide on how to build a dynamic banner application with AJAX, look no further. This series of articles might be what you need. Welcome to the final tutorial of the series that began with "Creating a Dynamic Banner System with AJAX." Made up of three articles, this series develops a basic web application that uses AJAX-based HTTP requests to display a group of dynamic banners based on a predefined time sequence.

Author Info:
By: Alejandro Gervasio
Poor Best
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
August 01, 2007
TABLE OF CONTENTS:
  1. · Storing Banner Data in MySQL Tables for a Dynamic Banner System with AJAX
  2. · Listing the entire source files of the previous banner application
  3. · Fetching banner data from MySQL
  4. · Completing the banner application

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Storing Banner Data in MySQL Tables for a Dynamic Banner System with AJAX - Fetching banner data from MySQL
(Page 3 of 4 )

In accordance with the concepts expressed in the previous section, the next step is to create a primitive database table for storing the images and URLs of every banner that needs to be displayed.

Based upon this schema, below I included the definition of a sample "banners" MySQL table, which has been populated with the banner data used in the two previous articles of the series.

This MySQL database table looks like this:

id                                 image                           url

1                                  banner1.gif                    http://www.myhosting.com
2                                  banner2.gif                    http://www.myphp.com
3                                  banner3.gif                    http://www.myjs.com

The above table was indeed easy to create, right? As you can see, all of the banner-related data now resides neatly in a basic database, which implies that pulling out the pertinent records is reduced to using the same pair of JavaScript functions that you learned previously.

Therefore, now the complete client-side code required to fetch the banners from the MySQL database table defined earlier would look like this:

<!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=iso-
8859-1" />

<title>AJAX-Driven Dynamic Banner System</title>

<script language="javascript" type="text/javascript">

// send http requests

function sendHttpRequest(url,callbackFunc,respXml){

            var xmlobj=null;

            try{

                        xmlobj=new XMLHttpRequest();

            }

            catch(e){

                        try{

                                               xmlobj=new
ActiveXObject("Microsoft.XMLHTTP");

                        }

            catch(e){

                                   alert('AJAX is not supported
by your browser!');

                                   return false;

            }

   }

   xmlobj.onreadystatechange=function(){

            if(xmlobj.readyState==4){

                                   if(xmlobj.status==200){

                                   respXml?eval
(callbackFunc+'(xmlobj.responseXML)'):eval
(callbackFunc+'(xmlobj.responseText)');

                                   }

            }

    }

    // open socket connection

    xmlobj.open('GET',url,true);

    // send http header

    xmlobj.setRequestHeader('Content-Type','text/plain;
charset=UTF-8');

    // send http request

    xmlobj.send(null);

}

// display banners

function displayBanner(bannerData){

            // parse banner data

            var bannerImg=bannerData.split('|')[0];

            if(!bannerImg){return};

            var bannerUrl=bannerData.split('|')[1];

            if(!bannerUrl){return};

            var bannerCont=document.getElementById
('bannercontainer');

            if(!bannerCont){return};

            // clean up banner container

            bannerCont.innerHTML='';

            // create banner link

            var a=document.createElement('a');

            a.setAttribute('href',bannerUrl);

            // create banner image

            var img=document.createElement('img');

            // set banner image dimensions

            img.setAttribute('src',bannerImg);

            img.setAttribute('width',180);

            img.setAttribute('height',400);

            // append banner image to link

            a.appendChild(img);

            // append banner link to container

            bannerCont.appendChild(a);

            // fetch banner recursively

            setTimeout("sendHttpRequest
('fetchbanner.php','displayBanner')",15*1000);

}

window.onload=function(){

            if(document.getElementById &&
document.getElementsByTagName && document.createElement){

                        // fetch first banner

                        sendHttpRequest
('fetchbanner.php','displayBanner');

            }

}

</script>

<style type="text/css">

body{

            margin: 0;

            padding: 0;

            background: #eee;

}

h1{

            text-align: center;

            font: bold 24px Arial, Helvetica, sans-serif;

            color: #000;

}

#bannercontainer{

            text-align: center;

            width: 180px;

            height: 400px;

            margin-left: auto;

            margin-right: auto;

            background: #fff;

            border: 1px solid #000;

}

#bannercontainer img{

            border: none;

}

</style>

</head>

<body>

<h1>AJAX-Driven Dynamic Banner System</h1>

<div id="bannercontainer"></div>

</body>

</html>

As shown above, the general structure of this banner system remains nearly identical, since it uses the same JavaScript functions defined in the previous articles of the series. Of course, in this case the different banners will be fetched at a predefined time interval from the prior "banners" database table, instead of using a XML file, but the rest of the application's logic remains unmodified.

Okay, now that you have seen how easy it was to adapt the original structure of this banner application to fetch the banners from a basic MySQL database table, it's time to develop a simple PHP script. This script will be tasked with sending the appropriate banner data to the browser each time an AJAX-based HTTP request is triggered by the application.

To learn how this script will be built, please go ahead and read the next few lines. I'll be there, waiting for you.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks
Find More JavaScript Tutorials

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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