In my earlier posts, I’ve writen about writing a Chumby widget, writing a configuration widget, and accessing the accelerometer. Now we’ll look at accessing a database from a Chumby widget.

First, you’ll need to set up a database. I’ll assume you have access to a web server and know how to create a database, tables, and code to access it. I use MySQL and PHP.

You’ll also need a Chumby widget.

And to connect the two, you’ll need a crossdomain.xml file.

In your Chumby widget, you might need code to load in settings or data. It might look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var serverPath = "http://yourwebsite.com";
var userID:String = _root["_chumby_user_id"];
 
//get data from DB
var getData = new LoadVars();
getData.load(serverPath + "?action=getData&guid=" + userID);
getData.onLoad = function(success){
    if(success){
        //trace(this.foo + ", " + this.baz);
        //do something with the data that is returned
    }
    else{
        trace("data didn't load");
    }
}

The first two lines set up some variables. userID is a hash string that will help us load in data that is specific to this Chumby. Next we create a LoadVars object, and load data from our server. Line 6 sends some GET variables to specify what data we want to load. In this scenario, we have one file with functions that get or set data in the database. Here we’re requesting data for a specific user. Then we wait for the data to load, and do something with it when (if) it does.

The server-side script gets the passed GET variables. If action is “getData”, we fetch some data from the database using the guid variable. Then it formats the data as a query string (foo=bar&baz=1) and prints it out. The printed data is what the onLoad function receives. In PHP, the server-side script might look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

include("../databaseConnection.php");
 
if($_GET['action'] == "getData"){
    //fetch the data from the database
    $result = mysql_query("select ... where guid=".$_GET['guid']);
    //process the results?
    //output the data:
    echo "foo=bar&baz=1";
}
else if($_GET['action'] == "setData"){
    //update the data in the database
    $result = mysql_query("update ... where guid=".$_GET['guid']);
    //or maybe insert new data instead
    //$result = mysql_query("insert into ...");
    echo "result=1";
}

So now we have the data from the server loaded in to the Chumby widget script. Next we might want to set the data in the database. Simply build your data in a query string, and send it off:

1
2

var queryStr = "action=setData&guid=" + userID + "&foo=bar&baz=2";
this.loadVariables(serverPath + "?" + queryStr);

In the above script, we’re requesting to set some data. We pass in the user hash string and the associated data. The server updates the data (or inserts it) and returns true.

OK, so we’re able to get and set data from a database, but if you run your widget through Chumby.com, it’s not working. We still have to add the crossdomain.xml file on our server. This basically tells Flash that it’s OK to transfer data though Chumby.com.

Here’s the basics of the crossdomain.xml file:

1
2
3
4
5

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <allow-access-from domain="*.chumby.com" />
</cross-domain-policy>

Save this file in the root directory of your website, even if your server-side code is in a subdirectory. Flash will look for it in the root directory.

And that should do it. Now you can build and distribute widgets that can server and collect data from users. With knowlege comes great responsibility. Please use this for good, not evil.

This entry was posted by Kris on Thursday, May 6th, 2010 at 1:30 pm and is filed under Code Logic. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Tags: AS3, Chumby, Flash, Games, PHP, tutorial, widget