It's always interesting to find out about viewing habits of web visitors. One of the things that is hard to determine when building a web page is how big to make your pages. Do you assume the user has 1280x1024? Do you assume 800x600? Do you assume that the user will have a fully maximized browser? One way to find out this information is to read the properties via JavaScript and store them. AJAX gives a web developer a valuble tool that allows the server to communicate with the browser in real time based on client-side events (such as resizing). I wrote a little script that I can insert on a page to track the resizing made by a user in relation to his screen resolution. After getting this information from a variety of users, I can run queries on the data and get some insight into browsing habits and adjust my page designs accordingly (or have them adjusted by a designer, in my case.) The code will be presented for ColdFusion and PHP.

First, I create a table in my database to store the information. The following is for SQL Server:

CREATE TABLE BrowserSize (
 browsersize_id int IDENTITY (1, 1) NOT NULL ,
 browsersize_width int NULL ,
 browsersize_height int NULL ,
 browsersize_screenwidth int NULL ,
 browsersize_screenheight int NULL ,
 IP varchar (50) NULL ,
 pagename varchar (255) NULL
)

The following is the equivalent for MySQL:

CREATE TABLE BrowserSize (
 browsersize_id int AUTO_INCREMENT PRIMARY KEY NOT NULL ,
 browsersize_width int NULL ,
 browsersize_height int NULL ,
 browsersize_screenwidth int NULL ,
 browsersize_screenheight int NULL ,
 IP varchar (50) NULL ,
 pagename varchar (255) NULL
);

You could also add a timestamp field, if you want to track times.

Next, I create a server-side page to grab the information and pass it to the database. The information will be passed in the URL. The code is self-explanatory. Basically, we pass width, height, screenwidth, screenheight, and page location in the URL, and insert it into our database table, along with the IP address of the user. The following is for ColdFusion:

<cfparam name="url.width" default=0>
<cfparam name="url.height" default=0>
<cfparam name="url.screenwidth" default=0>
<cfparam name="url.screenheight" default=0>
<cfparam name="url.pagename" default="">
<cfset url.width = val(url.width)>
<cfset url.height = val(url.height)>
<cfset url.screenwidth = val(url.screenwidth)>
<cfset url.screenheight = val(url.screenheight)>
<cfset ip = cgi.REMOTE_ADDR>

<cftry>
<cfquery datasource="yourdsn">
INSERT INTO browserSize
(browsersize_width
, browsersize_height
, browsersize_screenwidth
, browsersize_screenheight
, IP
, pagename)
VALUES
(#url.width#
,#url.height#
,#url.screenwidth#
,#url.screenheight#
,'#ip#'
,'#url.pagename#')
</cfquery>
<cfcatch>
<!--- do nothing --->
</cfcatch>
</cftry>

The following is for PHP:

<?php
$_GET["width"] = isset($_GET["width"]) ? intval($_GET["width"]) : 0;
$_GET["height"] = isset($_GET["height"]) ? intval($_GET["height"]) : 0;
$_GET["screenwidth"] = isset($_GET["screenwidth"]) ? intval($_GET["screenwidth"]) : 0;
$_GET["screenheight"] = isset($_GET["screenheight"]) ? intval($_GET["screenheight"]) : 0;
$pagename = isset($_GET['pagename']) ? $_GET['pagename'] : "";
$ip = isset($_SERVER['REMOTE_ADDR']) ? $_SERVER['REMOTE_ADDR'] : "";

$conn = mysql_connect("localhost", "username", "password");
$query_rs = sprintf("INSERT INTO browserSize
(browsersize_width
, browsersize_height
, browsersize_screenwidth
, browsersize_screenheight
, IP
, pagename)
VALUES (%s, %s, %s, %s, '%s', '%s')"
,$_GET["width"]
,$_GET["height"]
,$_GET["screenwidth"]
,$_GET["screenheight"]
,$ip
,$pagename);
mysql_select_db("cwtest");
$rs = mysql_query($query_rs);
?>

Both of the pages can be run in the browser to test (saved as getBrowserSize.cfm or getBrowserSize.php respectively). If the values of 0 are inserted in the database, everything is working. I'll post the client-side AJAX code in Part 2.