Our support forums here at iD Tech run on the popular internet forum software, vBulletin. Each year we constantly revamp the system with new upgrades, a new design, and new code plugins to make the process more specific to our business model and more accessible to our staff.

In addition, we also have a public Flickr stream. I wanted to pull these two elements together so that we could bring examples of our Flickr photos to our own support system. Here’s how I integrated them.

1. Download the phpFlickr API from here: http://www.phpflickr.com/
2. Unzip the files to your vBulletin /includes/ folder.
3. If you want, you can rename the files to match the vBulletin naming convention (i.e. phpflickr.php -> functions_phpflickr.php).
4. Optional: Create a new vBulletin product. From the admin side, choose Manage Products from the Plugins & Products menu. Then select Add/Import product. Fill in the information you need for a new product and hit save.
5. Add a new vBulletin plugin. From the Plugins & Products admin menu, select Add New Plugin. Select the product you created in Step 4, or vBulletin otherwise. For hook location, you’ll need to select where you want the Flickr photos displayed. I’m placing them on our vBulletin homepage, so I select forumhome_start for my hook. Enter a title (such as Flickr Integration), leave the exectution order alone, and use the PHP code shown below.
6. From the Styles & Templates menu, select Style Manager. Pick your style and choose Edit Templates. Find FORUMHOME (or whichever style is applicable to the hook location you chose) and double-click on it.
7. Find the location in the template where you want your photos displayed and enter $flickrbox, the name of the variable we are pulling from our PHP plugin.

Now let’s take a look at the code we’re placing in our plugin.

require_once("includes/phpFlickr.php");

// Create new phpFlickr object
$f = new phpFlickr("yourapikey");
$f->enableCache("db","mysql://user:password@server/database");

$limit = 11;

// Find the NSID of the username inputted via the form
$person = $f->people_findByUsername('iDTechCamp');

// Get the friendly URL of the user's photos
$photos_url = $f->urls_getUserPhotos($person['id']);

// Get the user's first X($limit) public photos
$photos = $f->people_getPublicPhotos($person['id'], NULL, NULL, $limit);
$flickrbox = "<table class='flickrbox'><tr>";

// Loop through the photos and output the html
foreach ((array)$photos['photos']['photo'] as $photo) {
    $flickrbox .= "<td><a class='flickrimg' href=$photos_url$photo[id]>";
    $flickrbox .= "<img border='0' alt='$photo[title]' "
               ."src=" . $f->buildPhotoURL($photo, "Square") . ">";
    $flickrbox .= "</a></td>";
}

$flickrbox .= "</tr></table>";

First, we require_once the phpflickr php api library. Alter this line if you choose to name your library differently. Next, we create a new phpFlickr object, $f, and supply our Flickr API key. Change this line to reflect your unique API key. Next, we optionally enable the cache available with this library by supplying our mySQL database details. If you don’t have your details, don’t worry, this step isn’t required.

We then set a limit for how many photos we want. I’ve chosen 11. We use people_findByUsername to get photos for our particular user, in this case, the company username iDTechCamp. The resulting statements will pull $limit number of photos from the public profile of our user. Lastly, we need to construct a variable that holds the output as HTML. Our variable here is $flickrbox and as you can see I’m generating a table with CSS class style named flickrbox. Each image in the table is table cell and contains a link to that particular image. We also set the image title to the photo title pulled from Flickr.

You can easily alter the PHP code here to produce tableless HTML or any other structure you like. I hope these instructions help you to integrate your board and Flickr! Email me or comment with any questions you might have.

For this article, let’s pretend you have the following database table. There are two columns (I’m separating the fields with commas for readability), Item and Price:

Cheese Pizza, 1.00
Pepporoni Pizza, 1.50
Sausage Pizza, 1.50
Cheese Calzone, 1.50
Ham Calzone, 2.00

What if you want to populate a combo-box with your possible options? We can write php that generates a drop-down box that has five item choices in it, based on our table above. Here is the sample code:

<?php

  // Connect to the database
  mysql_connect("localhost", "user", "password") or die(mysql_error());
  mysql_select_db("name") or die(mysql_error());

  // Has the form been submitted?
  if (isset($_POST['item'])) {

    // The form has been submitted, query results
    $queryitem = "SELECT * FROM table WHERE item = '".$_POST['item']."';";

    // Successful query?
    if($result = mysql_query($queryitem))  {

      // More than 0 results returned?
      if($success = mysql_num_rows($result) > 0) {

        // For each result returned, display it
        while ($row = mysql_fetch_array($result)) echo $row[serial];
      }
      // Otherwise, no results, tell user
      else { echo "No results found."; }
    }
    // Error connecting? Tell user
    else { echo "Failed to connect to database."; }
  }
  // The form has NOT been submitted, so show the form instead of results
  else {

    // Create the form, post to the same file
    echo "<form method='post' action='example.php'>";

    // Form a query to populate the combo-box
    $queryitem = "SELECT DISTINCT item FROM table;";

    // Successful query?
    if($result = mysql_query($queryitem))  {

      // If there are results returned, prepare combo-box
      if($success = mysql_num_rows($result) > 0) {
        // Start combo-box
        echo "<select name='item'>\n";
        echo "<option>-- Select Item --</option>\n";

        // For each item in the results...
        while ($row = mysql_fetch_array($result))
          // Add a new option to the combo-box
          echo "<option value='$row[item]'>$row[item]</option>\n";

        // End the combo-box
        echo "</select>\n";
      }
      // No results found in the database
      else { echo "No results found."; }
    }
    // Error in the database
    else { echo "Failed to connect to database."; }

    // Add a submit button to the form
    echo "<input type='submit' value='Submit' /></form>";
  }
?>

Ever wanted to use a custom animated cursor in your Flash project? This video tutorial will show you how to do so via Actionscript. Click here for the source code.

Flex gives you a great deal of control when skinning your applications, but some of the options are less apparent than others. Although styling individual components of an application is easy accomplished through CSS file inclusion, there are global methods too.

The Pre-Loader

If your project is ambitious, you’ll probably want to design your own pre-loader to replace the default Flex one. If you aren’t that interested in re-skinning the default, however, you can simply turn that default Flex-blue pre-loader off. In your application MXML declaration, add usePreloader=”false”, like so:

Getting Rid of the Default Flex Blue

You know it when you see it – a Flash app starts to load and you see that familiar blue (#869ca7, or this color, in case you were wondering). Tracking down all the places it crops up can be a pain, but setting the default background color in your Flex Compiler options is an easy way. Right-click on a project, then choose Properties. Select compiler options and you’ll see the screen shown here. Simply add -default-background-color 0x######, where ###### is the html color code you want to use. Now Flex will generate the html template files with your color instead of the dreadful blue.

Changing the Skin Globally

You’ll also notice in the screen shot above that I have another option highlighted: -theme ‘myflexskin.css’. Using this option you can set the global (per project) use of that particular CSS file, versus having to include it individually in each MXML file.

Most people fluent in Flash Actionscript are familiar with unary and binary operators, but there is also a ternary operator that can be quite useful. First, a refresh on operators:

Unary: count++;

Binary: count = count * 2;

Ternary: var result:String = (count == 0) ? “Empty” : “Not Empty”);

So what does this mean? You can use the ternary form of the if statement as a shorthand. Let’s look at the equivalent full if-else statement:

var result:String;
if (count == 0) result = “Empty”;
else result = “Not Empty”;

Of course, using the ternary operator cuts down on code readability, but three lines can effectively be cut down to one. Remember, the form is this:

(condition) ? ifTrueDoThis : ifFalseDoThis;