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:

/ 5

August 01, 2007

TABLE OF CONTENTS:

As usual with many of my articles on web development, before I proceed to show you how to modify the original banner system, I'd like to list all of the source files that comprised it originally. Doing so should aid you in comparing this version of the banner application with the one I plan to show you in the next few lines.

That being said, here are the respective signatures for the two source files that makes up this banner system, so have a look at them, please:

(definition of 'dynamic_banner.htm' file)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

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

// 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);

}

// store banners into JavaScript array

function storeBanners(banners){

var banners=banners.getElementsByTagName('banner');

if(!banners){return};

// save banner data to JS arrays

for(var i=0;i<banners.length;i++){

images[i]=banners[i].getElementsByTagName('image')
[0].firstChild.nodeValue;

urls[i]=banners[i].getElementsByTagName
('url')[0].firstChild.nodeValue;

}

// display first banner

displayBanner();

}

// display banners

function displayBanner(){

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

if(!bannercont){return};

// clean up headlines container

bannercont.innerHTML='';

// create <img> element

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

img.setAttribute('src',images[index]);

// create <a> element

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

a.setAttribute('href',urls[index]);

img.setAttribute('width',180);

img.setAttribute('height',400);

a.appendChild(img);

// append banner to banner container

bannercont.appendChild(a);

index++;

if(index>urls.length-1){index=0};

setTimeout("displayBanner()",15*1000);

}

// initialize data arrays and index

var images=new Array();

var urls=new Array();

var index=0;

window.onload=function(){

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

// fetch the first banner after loading
the web page

sendHttpRequest
('banners.xml','storeBanners',true);

}

</script>

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>

</body>

</html>

(definition of 'banners.xml' file)

<?xml version="1.0" encoding="iso-8859-1"?>

<image>banner1.gif</image>

<url>http://www.myhosting.com</url>

</banner>

<image>banner2.gif</image>

<url>http://www.myphp.com</url>

</banner>

<image>banner3.gif</image>

</banner>

</banners>

As you can see, the above files are all the source code required to get this banner system working seamlessly. The "dynamic_banner_htm" file is responsible first for fetching the banners from the corresponding "banners.xml" XML file via AJAX. Next, it stores the banners into a JavaScript array, and finally it displays them on the browser based upon a predefined time interval (the sample file will show a different banner each 15 seconds, but as you know, this feature is completely customizable).

So far, so good right? Now that you have recalled the definition of the previous source files, it's time to move forward and see how the intrinsic structure of this AJAX-driven application can be slightly modified to fetch all of the banner data straight from a MySQL database table.

Of course, this doesn't imply that you'll have to spend your valuable time defining the database table only for storing a few basic banner images and texts. But following a database-driven approach can lead you to build a full-blown advertising system, which eventually will have many more features than the ones covered here.

Thus, keeping this idea in mind, in the next section I'm going to define a simple MySQL database table for storing all the pertinent banner data, and also modify the definition of the "displayBanner()" JavaScript function that you learned before, so the whole application can interact directly with this database server.

Click on the link below and keep reading, please.

Next: Fetching banner data from MySQL >>