Data Unification

As part of my continuing quest to find ways of redeeming Flash in unobtrusive yet useful ways, it occurred to me that you could use Flash as a data unification tool. What I mean by that is that you could use Flash to process disparate coding environments – particularly client side and server side code.

How This Came About

The idea first occurred to me when I was just starting the redesign of my work site. Basically, my boss wanted to ditch support for 800px width users and I thought that would be commercial suicide and said so. I quoted him the figures and he asked me to confirm that level from our own users.

So I had a nice problem to solve. For one week I had to collect data about our users screen resolution. My first idea was our web logs but our current package didn’t support the ability to detect screen resolution so I decided to use Javascript and record the data somehow. I realised immediately I had two problems.

Firstly, I had to find a way to get my Javascript data into SQLServer. Not being a hardcore SQLServer guy I didn’t know a way to get Javascript variable data in easily.

Secondly, I had to discount the possibility of multiple hits from the same user on different pages. So my solution would need to detect the screen res and IP Address of each user, once.

I knew I could detect screen width with Javascript but I also knew that Javascript couldn’t pick up IP Addresses so I was in a bit of a quandary until it occurred to me – I needed a central processing area that could handle both: Flash.

The Solution

The actual Flash part of the solution is negligible. Its simply a 1px by 1px SWF that collects variables and then passes them on to a server side script to insert them into SQLServer. For the purposes of this post I’m going to assume you know how to do this already. I’ll just concentrate on getting client side and server side data into Flash together.

It should also be remembered that this is a fairly basic application I’m building here. I see no reason why this couldn’t be extended to work in a variety of ways. I should also mention that at the time of writing it has one large drawback – the page it sits in won’t validate as XHTML 1.0 Strict. I’m positive its due to my rusty javascript skills rather than an actual inability so feel free to pick it apart and tell me where I screwed up.

Before we delve into the code though, go see it working. This illustration has a display obviously so that you can see it but in a production environment it could sit invisibly on the page. In my example, the top number is your IP address thats passed in from PHP and the second number is your screen width thats passed in from Javascript.

OK, onwards. First we start with a simple PHP one-liner – pick up the visitors IP Address.

Simple. Next up is the core of the technique. It involves creating a Javascript function that creates the Flash movie and appends all your desired data to the querystring of the movie reference declaration:

So firstly, I assigned the value of the screen width to a variable I called ‘w’ (Imaginative eh?). After that comes the all-important line to pass the URL-encoded values in:

data="http://www.kevinleitch.co.uk/testarea/catchswf.swf?r=' + w + '"

As this line is written by a Javascript document.write, appending the value of ‘w’ to it is straightforward. Its also very straightforward to append a PHP name/value pair by getting the Javascript to actually write out the code required. This is the line that could be extended to pass in as many variables as you need from any source. As the code is being generated by Javascript you aren’t limited to just PHP, you could easily use ASP – or even a combo of PHP and ASP if you so desired (and your server was capable).

For me this solved my main problem of bringing together into one potential recordset data from both client and server side technologies. All I had to do now was pass both these values to a PHP script that in turn checked the users IP, queried SQLServer and discarded the recordset if there was a recordset with that existing IP and submitted the recordset into SQLServer if there was no IP match. Job done. And because it all happened in Flash it all happened ‘behind the scenes’ without my user ever being troubled by it. Nice, quiet, unobtrusive. Here’s the code in full:

What Next?

This is very dirty code. It needs tidying up and made to validate. It also needs extending into an easy-to-use methodology so that its obvious how to extend the functionality into multiple name/value pairs and/or arrays etc. I may be the one to do that or I may not. If you fancy having a go then go right ahead.