The Files

• table_form.html  ::  This is our main HTML file.  It contains a HTML Table and a simple Form.
• table_form.php :: This is the php file which will process the form and return results back to our HTML page
• table_form.js :: This is the Javascript file which will handle submitting data to php and handle the response
• table_form.css :: basic css file to add styling

View a Demo

Download the full Source

I’ve tried to add detailed comments to the source code but if you have any questions just post them in the comments.

The Bare Bones : Row Injection

For those who are only interested in the table row injection here is a function which will get the job done and is crossbrowser. If you find otherwise let me know. The key here is instead of creating individual elements for tr and td and injecting them into the table, you create a full table element with a single row and inject that into your table.

var inject_row = function( table, data )
{
    var str = '';
    data.each(function(item, index){
        str += '<td>'+item+'</td>';
    });
    var tr = new Element('div', {
        html: '<table><tbody><tr>' + str + '</tr></tbody></table>'
    }).getElement('tr');
    tr.inject( table );
}

How to format text to be inserted into a url

If you need to pass some text or a dynamic string in a URL use urlencode() and urldecode()

// encoding the string
$str = "Jerry's Bedding Plants & Ice Cream";
$url = 'http://www.example.com/page.php?args=' . urlencode( $str );

// decoding the string in page.php
$str = urldecode( $_GET['args'] );

Parsing a query string

Want to automatically take the query string and dump the values into an array ? Use parse_str() . You can easily get the query string from $_SERVER['QUERY_STRING']

$query = $_SERVER['QUERY_STRING'];  // foo=bar&bar=foo&cool=me&you=ok
$vars = array();
parse_str( $query, $vars );
print_r( $vars );

/* output
Array
(
  [foo] => bar
  [bar] => foo
  [cool] => me
  [you] => ok
)
*/

Creating a formatted string

Most people are very familiar with printf() in php but if you’re like me you often forget about sprintf() which returns your formatted string instead of printing it to the screen.

$isodate = sprintf("%04d-%02d-%02d", $year, $month, $day);

Another one you might forget about is vsprintf() which is similar to sprintf() but works with an array

$data = array( $year, $month, $day );
$isodate = vsprintf("%04d-%02d-%02d", $data );

Formatting numbers

For some reason I always forget the arguments for the PHP number_format() function. The function takes one, two or 4 arguments ( will not accept just 3 arguments ).

// string number_format  ( float $number  , int $decimals  , string $dec_point  , string $thousands_sep  )
$number = number_format( '32456.82', 2, '.', ',' );

Count the number of times a small string occurs in a large string

// how many times do I say rad;
$str = "I've got some rad moves, super rad moves, I've got rad mad bad not sad rad moves.";
$rad_count = substr_count( $str, 'rad' );

Happy coding nerds !

Here is an example Flex application which pulls values from the URL Query String.

<mx:Application creationcomplete="init()" layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private function init():void
{
  var qstr:String = ExternalInterface.call("window.location.search.substring", 1) as String;
  var qarr:Array = qstr.split('&');

  var pairs:Array;
  for( var i:Number = 0 ; i < qarr.length; i++ ){
     pairs = String( qarr[i] ).split('=');
     if( pairs[0] == 'myName' ){
           myName = pairs[1] as String;
     }
  }
}
]]>
</mx:Script>
<mx:Label text="{myName}" />
</mx:Application>

After you build the application and and Flex Builder has generated the .html file that displays your Flex app  you can rename the file .php and then add the following to the top of the file.

&lt?php $_GET['myName'] = 'Hi I am Kerk'; ?>

Now if you upload your SWF file and PHP file to a server that is running PHP and you open it in your browser you’ll  see your value from PHP displayed in your Flex app.

I don’t know if that is a clear explanation or not,  or if this is the best way to pass dynamic variables at load time into your flex application but it works for me.  Comments or alternative solutions welcome.

The one of the elements in the string contained ‘ &quote; ‘ which when being encoded by php and sent as a HTTPService response back to my Flex application was being converted back into double quotes ( “ ). When Flex JSON.decode attempted to decode the string it would silently fail. No errors or anything.

In my case my JSON string was already pretty complicated with lots of variable content so it took a while to figure this out. Hopefully someone else finds this post and saves themselves some time.

My solution: Use Gmail’s IMAP capabilities and monitor the accounts using PHP-IMAP. This turned out to be a fairly easy to implement solution but I thought I would post my GmailReader class to save other people some initial headaches of getting things rolling.

First of all you’ll need to enable IMAP for you Gmail Account. Log into Gmail and goto Settings > Forwarding and POP/IMAP

Next you’ll need to make sure php is compiled with IMAP enabled. This can be done on ubuntu with the following command and then restart apache for good measure.

sudo apt-get install php5-imap
sudo /etc/init.d/apache2 restart

In my particular scenario I run a script every so often to look for new emails since the last time I checked. So the class file is structured to check for new emails since a specific date string.

Usage Example

include_once( 'GmailReader.php' );
$gmail = new GmailReader( 'username@gmail.com', 'password' );
$email = $gmail->getEmailSince('Fri, 5 Sep 2008 9:00:00');

print_r($email);

The above example will print out an array of all emails ( still in the Inbox ) which arrived no earlier than 9am on the 5th of September.

You can also check your sent mail using the following example.

$gmail = new GmailReader( 'username@gmail.com', 'password' );
$gmail->openSentMail();
$email = $gmail->getEmailSince('Fri, 5 Sep 2008 9:00:00');

Also, if you use Gmail to apply labels to certain email you can monitor just these emails as well.

$gmail = new GmailReader( 'username@gmail.com', 'password' );
$gmail->openMailBox( 'MYLABEL' );
$email = $gmail->getEmailSince('Fri, 5 Sep 2008 9:00:00');

Here is the full GmailReader Class File.

class GmailReader
{
var $mbox;

function GmailReader( $user, $pass )
{
 $this->mbox = imap_open("{imap.gmail.com:993/imap/ssl}INBOX",$user,$pass)
  or die("can't connect: " . imap_last_error());
}

function openSentMail()
{
 imap_reopen($this->mbox, "{imap.gmail.com:993/imap/ssl}[Gmail]/Sent Mail" )
  or die("Failed to open Sent Mail: " . imap_last_error());
}

function openMailBox($mailbox)
{
 imap_reopen($this->mbox, "{imap.gmail.com:993/imap/ssl}$mailbox" )
  or die("Failed to open $mailbox: " . imap_last_error());
}

function getMailboxInfo()
{
 $mc = imap_check($this->mbox);
 return $mc;
}

/**
 * $date should be a string
 * Example Formats Include:
 * Fri, 5 Sep 2008 9:00:00
 * Fri, 5 Sep 2008
 * 5 Sep 2008
 * I am sure other's work, just test them out.
 */
function getHeadersSince($date)
{
 $uids = $this->getMessageIdsSinceDate($date);
 $messages = array();
 foreach( $uids as $k=>$uid )
 {
  $messages[] = $this->retrieve_header($uid);
 }
 return $messages;
}

/**
 * $date should be a string
 * Example Formats Include:
 * Fri, 5 Sep 2008 9:00:00
 * Fri, 5 Sep 2008
 * 5 Sep 2008
 * I am sure other's work, just test them out.
 */
function getEmailSince($date)
{
 $uids = $this->getMessageIdsSinceDate($date);
 $messages = array();
 foreach( $uids as $k=>$uid )
 {
  $messages[] = $this->retrieve_message($uid);
 }
 return $messages;
}

function getMessageIdsSinceDate($date)
{
 return imap_search( $this->mbox, 'SINCE "'.$date.'"');
}

function retrieve_header($messageid)
{
   $message = array();

   $header = imap_header($this->mbox, $messageid);
   $structure = imap_fetchstructure($this->mbox, $messageid);

   $message['subject'] = $header->subject;
   $message['fromaddress'] =   $header->fromaddress;
   $message['toaddress'] =   $header->toaddress;
   $message['ccaddress'] =   $header->ccaddress;
   $message['date'] =   $header->date;

   return $message;
}

function retrieve_message($messageid)
{
   $message = array();

   $header = imap_header($this->mbox, $messageid);
   $structure = imap_fetchstructure($this->mbox, $messageid);

   $message['subject'] = $header->subject;
   $message['fromaddress'] =   $header->fromaddress;
   $message['toaddress'] =   $header->toaddress;
   $message['ccaddress'] =   $header->ccaddress;
   $message['date'] =   $header->date;

  if ($this->check_type($structure))
  {
   $message['body'] = imap_fetchbody($this->mbox,$messageid,"1"); ## GET THE BODY OF MULTI-PART MESSAGE
   if(!$message['body']) {$message['body'] = '[NO TEXT ENTERED INTO THE MESSAGE]nn';}
  }
  else
  {
   $message['body'] = imap_body($this->mbox, $messageid);
   if(!$message['body']) {$message['body'] = '[NO TEXT ENTERED INTO THE MESSAGE]nn';}
  }

  return $message;
}

function check_type($structure) ## CHECK THE TYPE
{
  if($structure->type == 1)
    {
     return(true); ## YES THIS IS A MULTI-PART MESSAGE
    }
 else
    {
     return(false); ## NO THIS IS NOT A MULTI-PART MESSAGE
    }
}

}

Click here to view a demo
(demo lets you upload up to 3 files at a time with a max size of 4 megs each)

Click here to view the source

The usage of the component is pretty straight forward. You can set some properties to define what types of files can be uploaded and you direct the ‘upload’ towards a server side script. In my demo I send the files to a basic PHP script ( which I’ve included below ). The script handles one file at a time and is expected to report back either the string ’successful’ or an error message which is displayed.

Properties

The following public properties can be set to customize the use of this component

• uploadButtonLabel : String = ‘Upload’
  This is the label used for the ‘upload’ button.
• selectButtonLabel : String = ‘Select File(s)’
  This is the label used for the ’select’ button.
• removeButtonLabel : String = ‘Remove Selected File’
  This is the label used for the ‘remove’ button.
• maxFileCount : Number = 3
  This sets the number of files a user is allowed to upload
• maxFileSize : Number = 1
  This sets the maximum file size (in megs) for each individual file. Default is 1 meg.
• requestUrl : String = ”
  This is the URL for your PHP/ASP/ColdFusion/Other script which you will send the uploaded files to. THIS PROPERTY MUST BE SET !
• allowOnlyImages : Boolean = false
  If set to ‘true’ the user will only be able to select image files
• allowOnlyText : Boolean = false
  If set to ‘true’ the user will only be able to select text files.
• allowAllFiles : Boolean = true
  If set to ‘true’ the user can upload images or text files.
• barColor : String
  Allows you to style the progress bar

Events

The component has one event ‘uploadComplete’ which is triggered if all files are uploaded successfully.

The PHP Handler

Following is the source for the simple PHP script which I am using in the demo. In this script I am just confirming that the file was uploaded successfully and then I am deleting it. Since this is a public demo I don’t want people filling up my server with unwanted images. In your script you would most likely copy the FILE to a more permanent location and possibly do a little more validation. The script needs to echo the string ’success’ or echo an error message.

$hasError = false;foreach( $_FILES as $i=>$file ){
   if ( $file['error'] ){
      $hasError = true;
  }
  /**
    * Because this is a public example. I am just going to immediately delete
    * the file which was uploaded.  In a regular application you would copy the file
    * from it's temporary location to it's permament location.
    */
   unlink( $file['tmp_name'] );
 }
if ( ! $hasError ){
  echo('success');
} else {
  echo('Stick custom error message here');
}

1) Monitoring the computer services and network
2) Monitoring FireFox performance

Monitoring the computer services and network

Because our Kiosk computer is an Ubuntu server and running apache/php/mysql locally there are several open source network and service monitoring programs. The one I found most suitable for my solution is called Monit and I found a very good post at Ubuntu Geek describing how to install monit on ubuntu and configure it. I basically followed the Ubuntu Geek tutorial but made some modifications to the config file. My revised process is below.

1. Install Monit

   sudo apt-get install monit

2. Configure Monit. Open /etc/monit/monitrc in your favorite text editor. Below is an example of how I set up my own configuration file. It should be pretty self explanatory.

   ## Start monit in background (run as daemon) and check the services at 2-minute## intervals.set daemon  120
   
   ## Set syslog logging with the 'daemon' facility.set logfile syslog facility log_daemon
   
   ## Set list of mailservers for alert delivery.## I use my ISP's SMTP server for better reliability and means## I don't need an smtp server running on my Kioskset mailserver mail.shawcable.com
   
   ## Use event queue if mailserver unavailableset eventqueuebasedir /var/monit  # set the base directory where events will be storedslots 100           # optionaly limit the queue size
   
   ## You can set the alert recipient hereset alert someone@domain.com
   
   # Monitor Apachecheck process apache2 with pidfile /var/run/apache2.pid
   
   # Action to be taken when apache failsstart program = "/etc/init.d/apache2 start"stop program = "/etc/init.d/apache2 start"# Admin will notify by mail if below the condition satisfied belowif cpu is greater than 60% for 2 cycles then alertif cpu > 60% for 5 cycles then restartif children > 10 then alertif children > 50 then restartif loadavg(5min) greater than 10 for 8 cycles then stopif 3 restarts within 5 cycles then timeoutgroup servers
   
   # Monitor MySQLcheck process mysql with pidfile /var/run/mysqld/mysqld.pidgroup databasestart program = "/etc/init.d/mysql start"stop program = "/etc/init.d/mysql stop"if failed host 127.0.0.1 port 3306 then restartif failed host 127.0.0.1 port 3306 then alertif 5 restarts within 5 cycles then timeout
   
   # Monitor SSH Servicecheck process sshd with pidfile /var/run/sshd.pidstart program = "/etc/init.d/ssh start"stop program = "/etc/init.d/ssh stop"if failed port 22 protocol ssh then restartif failed port 22 protocol ssh then alertif 5 restarts within 5 cycles then timeoutgroup programs
   
   # Check servicescheck system localhostif loadavg (1min) > 4 then alertif loadavg (5min) > 2 then alertif memory usage > 75% then alertif cpu usage (user) > 70% then alertif cpu usage (system) > 80% then alertif cpu usage (wait) > 20% then alert

3. Set Monit to start automagically. Open the file /etc/default/monit and change the startup value to 1. You can now start monit with the following command.

   sudo /etc/init.d/monit start

If you want to be able to access Monit’s web based interface remotely then check out the Ubuntu Geek tutorial for more information. I am not enabling this ability in my kiosk at present.

Monitoring FireFox performance

By using Monit we are able to get good alerts regarding the overall health of our Kiosk. But Monit doesn’t tell us is how our Kiosk client (Firefox) is behaving. If Firefox starts to eat up a percentage of your kiosk’s available memory or CPU power you should be notified early.

I myself am not that great at building BASH scripts so I opted to create a PHP script which tests a few conditions and sends an email if Firefox isn’t running or is using too many resources. This script can be run as a cron job every few minutes. My PHP script requires the open source class PHPMailer which makes sending email from PHP a snap.

Here is my php script.

 /*** This script gets the CPU and MEM usage of Firefox*/$cpu = 0;$mem = 0;$failed = false;

// Get the PID of firefox$pid = exec('pidof firefox-bin');

// If firefox is running get memoryif ( $pid ){$status_str = exec('ps aux | grep "'. $pid .'" | grep -v grep');$status = explode( ' ', $status_str );// Strip blanksforeach( $status as $k=>$v ){  if ( trim($v) == '' ) unset($status[$k]);}$status = array_values($status);

$cpu = $status[2];$mem = $status[3];

if ( $cpu >= 60 || $mem >= 60 ){   $failed = true;   $message = "Firefox is using $cpu% of CPU and $mem% of MEM";}

} else {

// Firefox is not running$failed = true;$message = "Firefox is NOT running";

}

if ( $failed ){$body = date('l jS of F Y h:i:s A',time() )."nn";$body .= $message;

// Create and Send Emailrequire_once( "/class/phpmailer/class.phpmailer.php");

$mail = new PHPMailer();$mail->From     = ' firefox@mykiosk ';$mail->FromName = " Firefox Status ";$mail->Host     = 'mail.shawcable.com';$mail->Mailer   = "smtp";

$mail->Subject = "Firefox Issue on ArtTouch";$mail->AddAddress(" someone@domain.com ");

$mail->IsHtml(0);$mail->Body    = $body;

// LOG RESULTSif(! $mail->Send() ) {   error_log("There was an error ending Firefox Performance Alert " . $mail->ErrorInfo );}}

If anyone wants to turn this into a bash script instead of PHP and share it that would be great.

I haven’t posted any good tips or code snippets in the past week as I’ve been a little focused on opening up Manhattan in GTA. Managing priorities has never really been my problem.

First step. Install Eclipse.

sudo apt-get install eclipse
sudo apt-get install sun-java6-jre
sudo update-java-alternatives -s java-6-sun

Next install PHPEclipse. you can go to Help > Software Updates > Find and Install and install new features located at the following URL

http://phpeclipse.sourceforge.net/update/releases

Finally. Install the RSE (remote system explorer) Plug In so you can easily access a remote Unix server and edit files willy-nilly. Note you don’t need to install everything in the TM project.

http://download.eclipse.org/dsdp/tm/updates/

What is Captcha? (from Wikipedia) A Captcha is a type of challenge-response test used in computing to determine that the user is not run by a computer. The process involves one computer (a server) asking a user to complete a simple test which the computer is able to generate and grade. Because other computers are unable to solve the CAPTCHA, any user entering a correct solution is presumed to be human. A common type of CAPTCHA requires that the user type the letters of a distorted image, sometimes with the addition of an obscured sequence of letters or digits that appears on the screen.

The term “CAPTCHA” was coined in 2000 by Luis von Ahn, Manuel Blum, Nicholas J. Hopper (all of Carnegie Mellon University), and John Langford (then of IBM). It is a contrived acronym for “Completely Automated Public Turing test to tell Computers and Humans Apart”, trademarked by Carnegie Mellon University.

Example with code.

Here is a simple PHP script which will generates a Captcha and logs the response in a _SESSION variable. It requires GD support on the server. The script uses a randomly selected background image (img1.jpg, img2.jpg, img3.jpg or img4.jpg) and adds the pass key over top of background.

PHP Captcha Script.

// Start sessionssession_start();

// Create a random string$fullhash = md5(microtime());

// Select the first 5 characters of string to use as pass code$captcha = substr($fullhash,0,5);

// Select random image filename for use as background$imgrand = rand(1,4);$imgfile = 'img'.$imgrand.'.jpg';

// Create new image using the background image as a template$image =imagecreatefromjpeg($imgfile);

// Set colors to use for Captcha text$txtcolor = imagecolorallocate($image, 255, 255, 255);$shadowcolor = imagecolorallocate($image, 0, 0, 0);

// Layer Captcha text over imageimagestring($image, 6, 21, 11, $captcha, $shadowcolor);imagestring($image, 5, 20, 10, $captcha, $txtcolor);

// Add pass code to _SESSION variable$_SESSION['captchakey'] = $captcha;

// Adjust header and output imageheader("Content-type: image/jpeg");imagejpeg($image); 

Usage Example

Inside a form add the following image tag along with an input field for the user to enter the pass code into. When validating the form check the user submitted info against the _SESSION variable ‘captchakey’

<img src="captcha.php">

Click here to see a demo.
Click here to copy my background images.