Web Experiment Tutorial: Chapter 6, PHP

Several years ago, I wrote a tutorial for my previous lab on how to create Web-based experiments in Flash. Over the next number of months, I'll be posting that tutorial chapter by chapter.

We've now got an experiment and we have a website -- we need to have a way of actually storing the data we collect. To do this, you are going to need a web server with a MySQL database. A decent web hosting company should be able to provide you with this. The discussion in this tutorial assumes you have a web server and access to a MySQL database.

PHP is another Web language. It has many purposes, but here we use it as the interface between our experiment and the MySQL database that stores all the recorded data.

1. What is PHP?

I’m not that sure myself, really. As I understand it, PHP is used to dynamically generate HTML code. In our Flash experiment, we used dynamic text boxes so that we could display different text depending on the occasion. PHP does something similar. The PHP code resides on your web server. When it is called, the web server uses it to create new HTML code on the fly and then sends that to the user’s browser. The PHP code itself should never get sent to the user’s browser.

That is, as I understand it, what PHP is for. However, that is not how we will use it. We will use PHP as a sort of central link in a bucket brigade. User data is sent from the Flash file to the PHP file, and from the PHP file to the MySQL database.

In newer versions of Flash, as I understand it, Flash can interact directly with MySQL, but I've never tried that functionality myself. Flash MX cannot, which is what I started off with. In any case, this works well enough.

2. Sending data to PHP

Open your FLA file. You can start with Part4.fla if you like.

The next to last frame should contain the following code:

if (current_trial==total_trials){
gotoAndPlay('finish');
}else{
current_trial += 1;
trace(current_trial);
gotoAndPlay('Next_Trial');
}

Delete that code and replace it with the following:

stop();
prepareResults();
submitResults();

Now, after the participant receives feedback on each trial, two subroutines will be run: prepareResults and submitResults. Now we will write these subroutines.

Go back to the Initialize frame. At the bottom, type in the following line:

scriptVars = new LoadVars();

This creates a new variable called scriptVars of type LoadVars. You will use this variable to pass information to PHP.

function prepareResults() {
//demographics
scriptVars.subject_age = age;
scriptVars.subject_sex = sex;
scriptVars.subject_vision = normal_vision;
scriptVars.initials = initials;

//experimental data
scriptVars.trial = current_trial;
scriptVars.correct = correct;
scriptVars.stimulus = stimulus;
scriptVars.match = match;
scriptVars.probe = probe;
}

Now, scriptVars contains all the information from the demographic questionnaire as well as the data and stimuli types from the current trial.

Next, we need the code for submitResults. This involves some fancy maneuvering:

function submitResults() {
scriptVars.sendAndLoad("http://URL/submit_vars.php", scriptVars, "POST");
}

scriptVars.onLoad = function() {
if (current_trial==total_trials){
gotoAndPlay("finish");
}else{
currenttrial+=1;
gotoAndPlay("Next_Trial");
}
}

submitResults actually runs a built-in LoadVars function called “sendAndLoad”. There are 3 arguments: the URL of the php file (you’ll need to adjust this to your actual URL where submit_vars.php is sitting), the name of the data structure being sent, and a flag telling the PHP file what to do with it. In this manual, we only ever use the “POST” flag.

Here comes the tricky part. We used the sendAndLoad command, so as soon as the data is sent, Flash runs scriptVars’s “Load” function. So our next code is exactly this function. In here, we write the code that prepares the experiment for the next trial and directs it to the appropriate frame.

There are other ways of accomplishing this same feat. I like this method, because it makes sure the code that iterates trials is easy to find. The most difficult part of programming in Flash is debugging, mainly because it is hard to find the relevant code. The more you use functions and define the functions in the same frame, the easier it is to edit and debug your code.

Your Flash file should now look like Part5.fla.

3. Receiving the code in PHP

Let’s take a look a the PHP file we called in our code above (I find it easiest to edit this in a simple text editor):

It looks scary, but it turns out that you can ignore most of this code. The PHP file first creates a string of MySQL code. The next line sends runs the mysql_query function with the string as the argument. Then MySQL is closed and the file ends.

There are only three lines of code you need to modify. The top two lines will need to be modified so that the host name, username and password are all correct. This will probably be the same for every experiment, unless different experiments use different databases. You also need to change the $isql = “INSERT INTO ….” line. This tells MySQL which table to insert the data into (see the MySQL chapter). This will probably be different for each experiment.

For this tutorial, you might replace “TABLENAME” with “VSTM”, so that the code reads:

$isql = "INSERT INTO VSTM ($ifields, date, time, ip) VALUES ($ivalues, '$dateStamp', '$timeStamp', '$ip')";

For those who want more detail, read on below: