• the mysql database...

We have passed the value to the javascript function, so that it can be passed to a script, and can interact with data in a database, and return that data.

MySQL can be downloaded and installed and used on your Windows PC for free from the official site, here, which also contains comprehensive instructions, on the same site, here. You should install this now before proceeding with this guide. Then you should open MySQL and add a database and a table, which contains the information that will be extracted in the javascript function, using the phpscript.

It is important that we understand what the data in the database looks like. In this simple example there is a single table in our database, that has three columns. These are in a table called 'poem' that is in a MySQL database called 'eventdatabase'. Here are the table's columns. The primary key is 'id', which auto-increments as each new record is added to the table. the second column is 'daynum', and is 1-7 (we could have used this as the primary key), and the third is called 'line', which contains the lines of a familiar poem.

The data is already in the database. To extract it we need to use Structured Query Language. SQL is used for interacting with relational databases such as MySQL, SQL Server or MS Access. The SQL to extract a line of the poem is "SELECT line FROM poem WHERE daynum =x". The value of x will be the value that was originally passed to the javascript function. This value needs to find its way into the SQL query as a variable. It is currently a variable in the javascript function.

Javascript is a client side scripting language, in otherwords it responds to events on the browser that are caused by the website user. The variable needs to be passed to a server-side script using a few lines of AJAX code embedded in the javascript function. Once passed to the server-side script (we will use a php script), then if we embed the SQL in the php script, we can query the database. The information from the database can then be returned to the javascript function. The javascript will populate the span tag with it, and then the line of poetry can be displayed to the web page visitor.

We must now amend the javascript function to allow the variable to be passed to the php script. We must embed some lines of AJAX code.

• ajax code in the javascript function...

Amending the javascript function to prepare for interaction with the database, via the php script requires some AJAX code. The additional code is technical in nature. Firstly you need a variable to hold a special data object. That's two additional lines of code. Then you need to open the variable and retrieve the data using the php file. That's a third line. Then you need to close the object by sending a null response. Here are the four additional lines. We will extend these later because we need to send the result to the span tag so it can be viewed on the web page. The four lines are shown below, and the full function is further down the page.

• the javascript function...

Amending the javascript function to pass the variable to a php script will result in an error if the php script doesn't exist.

The Form below it has been renamed DayForm4, with a SELECT of DayList4 and an ACTION of "javascript:ShowEvents4" but is otherwise unchanged. Here is the 4th version of the javascript function...

function ShowEvents4() {
var x;
x =document.getElementById("DayList4").selectedIndex;
var optionarray;
optionarray =document.getElementById("DayList4").options;
var userresponse;
userresponse =optionarray[x].value;
var ajaxRequest;
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
var filename;
filename = "getpoetrydata.php";
var datestr;
datestr ="?daynum="+userresponse;
var phprequest;
phprequest =filename+datestr;
alert(phprequest);
ajaxRequest.open("GET", phprequest, true);
ajaxRequest.send(null);
}

Javascript (Client), and PHP (Server) are scripting languages, and are tricky to code because when there is a problem, you can often get a cryptic response, or no response whatsoever, which can lead to some head-scratching. But at least the alert box has told us that the value of the variable was ok up to the penultimate line of the javascript. The php file accepts variables in the format "filename?var1=value;var2=value" where the value after the ? are the variables being passed to the server script. In our simple example we just want to send 1 variable (daynum), the day number. Of course we don't expect anything to happen once the request is sent, since we haven't written the php script yet. We will create a simple php file and then have a further look at the javascript function.

• the php script...

PHP script can be written in notepad and then saved as a PHP file. Here is the very simple file, which we will expand later once we get a response from it. The important thing to remember at this point is that q is a variable that is sent to the php file, and this is converted to a variable called $sqldaynum by the script, before it is 'echo'd' back.

<?php
$sqldaynum=$_GET["q"];
echo "PHP page received variable with a value of" . $sqldaynum . "!";
?>

You must install PHP on your computer if you expect to test your work before uploading it to an ISP's server. Testing PHP scripts will require you to locate the php file in a virtual directory on your PC and you must have pre-installed a web service such as IIS. You can use Windows to add IIS if it is not already installed. With the XP operating system, for example, use the Add/Remove Program, and then choose Windows Components, select IIS and add the component. You will need your Windows CD during the procedure, a guide for which can be found here. After you have installed IIS a new set of folders will appear in your main drive, the default location is C:/Inetpub/wwwroot. Subdirectories that you create below this folder must then be converted into Virtual Directories. This is done using a different tool in XP, which can be found via the Control Panel. Choose Administrative Tools and then find Internet Information Services. When you open expand the list of folders you can create new virtual directories beneath the Default Web Site. For more on how to create a virtual directory in IIS see here.

To install PHP on your PC, download and install it from this recommended site with a comprehensive guide available here.

If your entire website is on a folder somewhere else on your computer, but you want to test the php, then provided the php file is in a virtual directory that will work ok. Lets assume that all the web pages exist in a folder somewhere on your C drive, but this is not a virtual directory and the folder is not a subdirectory of the wwwroot folder. The php file, getpoetrydata.php is in the same folder. It needs to be moved to a new virtual directory. To do this, firstly create an ordinary subfolder in the C:/inetpub/wwwroot and name it PoetryScripts. Put the php file into the new folder. Now, open Internet Information Services, right click DefaultWebSite and choose New>Virtual Directory. A wizard opens, name the new directory 'PoetryScripts'. The wizard will also prompt you to set the folder where the content is kept.

The path of the php file should now be changed in the javascript function to find the PoetryScripts folder, which is in the C:/Inetpub/wwwroot/ directory. When IIS is installed the way you access this using your browser is by using the localhost address. "http://localhost/PoetryScripts/getpoetrydata.php" is the correct path to use because you need to use IIS - your local Virtual Web Server. If you were to use "C:/Inetpub/wwwroot/PoetryScripts/getpoetrydata.php" as the path, it won't work, because that is just referencing an ordinary folder on your PC that is not a virtual directory.

function ShowEvents4() {
var x=document.getElementById("DayList4").selectedIndex;
var optionarray=document.getElementById("DayList4").options;
var userresponse;
userresponse=optionarray[x].value;
var ajaxRequest;
ajaxRequest=new ActiveXObject("Microsoft.XMLHTTP");
var filename;
filename="http://localhost/PoetryScripts/getpoetrydata.php";
var datestr;
datestr="?q="+userresponse;
var phprequest;
phprequest=filename+datestr;
alert(phprequest);
document.getElementById('databaseresponse').style.visibility='visible'; ajaxRequest.open("GET", phprequest, true);
ajaxRequest.send(null); }  

The amended javascript function adds the value of the userresponse variable to a new variable called datestr. The datestr variable adds "?q= to the userresponse, so that if Tuesday was selected, the value of datestr would be "?q=2". Remember q is a variable we are sending to the sinple php file we wrote earlier. The phprequest variable adds the filename to the datestr, which gives us a valid variable to pass to the getpoetrydata php file.

Now we must test the response from our php file. When we get a response then we can use the php script to interact with the database and send back some data.