Storing Banner Data in MySQL Tables for a Dynamic Banner System with AJAX - Listing the entire source files of the previous banner application
(Page 2 of 4 )
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">
<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);
}
// 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>
<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>
(definition of 'banners.xml' file)
<?xml version="1.0" encoding="iso-8859-1"?>
<banners>
<banner>
<image>banner1.gif</image>
<url>http://www.myhosting.com</url>
</banner>
<banner>
<image>banner2.gif</image>
<url>http://www.myphp.com</url>
</banner>
<banner>
<image>banner3.gif</image>
<url>http://www.myjs.com</url>
</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 >>
More JavaScript Articles
More By Alejandro Gervasio
/ 5 
