Web Development and stuff…

Last Friday a friend approached me with a problem he was having. He was trying to setup a small webshop in a existing Wordpress site. For the webshop he was using a plug-in called wp-e-commerce. He chose this plug-in because it is one of few that supports iDEAL payments. Because this shop only serves Holland the only payment option they need is iDEAL.

The iDEAL plug-in seemed to function properly. But the bank portal didn’t respond as expected. The first error i spotted was the mis configured referrer. The error code for this was.

unknown order/0/r

This didn’t solve the problem though. The message change from the previous to

unknown order/1/s

So i spend the next hours reading the manual he got from his bank. And came to the conclusion they do it just a bit different then for what this plug-in was written. The bank expects a hash to be send along each order made. This hash is build up from parts of the order and a secret string. This combined is hashed with the SHA-1 algorithm And added to the form as a hidden field. I wrote a small function to create hash and changed a few other small things in the order form.

The original form looks like this:

<script type="text/javascript">
var Amount = ;
var PSPID = "";
var AM;
if (isNaN(Amount)) {
	alert("Amount not a number: " + Amount + " !");
	AM = "";
} else {
	AM = Math.round(parseFloat(Amount)*100);
}
</script>
<form method='post' action='' id='ideal_form' name='ideal_form'>
<script type="text/javascript">
document.write("
");
document.write("
");
</script>
<INPUT TYPE="hidden" NAME="SHASign" VALUE="4FF8C2FB03B0AA45EA5DE9503AEACB6B603DCFCC">
<input type="hidden" NAME="orderID" value="" />
<input type="hidden" name="currency" value="" />
<input type="hidden" name="language" value="" />
<input type="hidden" name="accepturl" value="">
<input type="hidden" name="cancelurl" value="">
<!--customer information starts-->
<input type="hidden" name="CN" value="">
<input type="hidden" name="EMAIL" value="">
<input type="hidden" name="ownerZIP" value="">
<input type="hidden" name="owneraddress" value="">
<input type="hidden" name="ownercty" value="">
<input type="hidden" name="ownertown" value="">
<input type="hidden" name="ownertelno" value="">
<!--customer information ends-->
<input type="hidden" name="PM" value="iDEAL" />

I didn’t really understand why some values were written by JavaScript. So i removed the JavaScript lines and added the fields to the form. And after adding the hash function statement it looks like this.

<form method='post' action='' id='ideal_form' name='ideal_form'>

<input type="hidden" NAME="PSPID" value="" />
<input type="hidden" NAME="orderID" value="" />
<input type="hidden" NAME="amount" value="" />
<input type="hidden" name="currency" value="" />
<input type="hidden" name="language" value="" />
<input type="hidden" name="accepturl" value="">
<input type="hidden" name="cancelurl" value="">
<!--customer information starts-->
<input type="hidden" name="CN" value="">
<input type="hidden" name="EMAIL" value="">
<input type="hidden" name="ownerZIP" value="">
<input type="hidden" name="owneraddress" value="">
<input type="hidden" name="ownercty" value="">
<input type="hidden" name="ownertown" value="">
<input type="hidden" name="ownertelno" value="">
<!--customer information ends-->
<input type="hidden" name="PM" value="iDEAL" />

echo createSHA1Hash(array(
		$purchase_log[0]['id'],
		($amount*100),
		get_option('ideal_currency'),
		get_option('ideal_id'),
		'[SHA1-IN-HASH]'
	));

</form>

The function i can be placed anywhere in the page. Or a include file. Here’s the code. The only thing that has to be done is replace [SHA1-IN-HASH] with the Hash configured in the bank’s ideal admin.

function createSHA1Hash($hashOptions) {
        $str = implode('', $hashOptions);

        return '
';
    }

While doing some searches i noticed there are more people having issues with this plug-in. So maybe this will save somebody a bit of time.

Last week i had the chance to work with memcache. Something i hadn’t done before. For caching i mostly rely on APC for bytecode. And file based caching for content. Using memecache extension for PHP and de memcached service gives a whole range of features for caching data. And an easy way to manage all this cached data.

The project i am working on is based on Zend Framework. And there for this post will reflect working with memcache in ZF only. With ZF and memcache it’s possible to do frontend and backend caching. I will focuse on the backend side for now. But will setup the frontend as well.

If you don’t have memcache installed do it now. It’s not that hard. On my debian box it went somethign like this:

$ aptitude install memcached
$ aptitude install php5-memcache

Now a days evrything seems to go automatic. So no need to edit the php.ini or anyhting. To check if PHP loaded the memcache extension you can do:

$ php -m | grep memcache
memcache

Memached is automatically started after install. So let’s check if everything went ok.

$ ps -aux | grep memcached
nobody 20965 0.0 0.5 42900 23072 ? S Jan28 0:01 /usr/bin/memcached -m 64 -p 11211 -u nobody -l 127.0.0.1
root 22393 0.0 0.0 87940 776 pts/0 R+ 12:06 0:00 grep memcached

$ netstat -an | grep 11211
tcp 0 0 127.0.0.1:11211 0.0.0.0:* LISTEN

Looking good. Now it’s time to do some configuration in ZF.

First of the frontend settings. With ‘type’ we set the cache method for the frontend. We chose the standard Core class for this. With ‘lifetime’ we set the time for which a cached entity is valid. The ‘cache_id_prefix’ is a nice way to group for instnace cache data by controller. So just give it a name.

cache.frontend.type = Core
cache.frontend.options.lifetime = 600
cache.frontend.options.automatic_serialization = true
cache.frontend.options.cache_id_prefix = [some string]
cache.frontend.options.cache = true

Now it’s the backends turn to get configured. For ‘type’ we choose Memcached. More types are available. For more info read the ZF manual. The rest of the settings are basic memcached settings like host, port and persitance.

cache.backend.type = Memcached
cache.backend.options.servers.1.host = 127.0.0.1
cache.backend.options.servers.1.port = 11211
cache.backend.options.servers.1.persistent = true
cache.backend.options.servers.1.weight = 1
cache.backend.options.servers.1.timeout = 5
cache.backend.options.servers.1.retry_interval = 15

Finally we can do some PHP code. To get the cache instance setup we add a _initCache() method to the bootstrap class. Inside this method we retrieve the config options by calling getOptions(). And setup the cache object. Which is then stored in the Registry for later use.

protected function _initCache()
{
        $options = $this->getOptions();

        if (isset($options['cache'])) {
            $cache = Zend_Cache::factory(
                $options['cache']['frontend']['type'],
                $options['cache']['backend']['type'],
                $options['cache']['frontend']['options'],
                $options['cache']['backend']['options']
            );

            Zend_Registry::set('cache', $cache);
            return $cache;
        }
}

That’s all set. I used the caching for some REST service responses. So i will stick to that in this post as well. The class has a method for adding a cache object.

public function setCache(Zend_Cache_Core $cache) {
    $this->cache = $cache;
}

So fetching the cache instance and passing it to the REST client will look something like this:

$cache = Zend_Registry::get('cache');
$cache->setLifetime(86400);

$client = new Client();
$client->setCache($cache);

The first thing we do inside the calling method is set a unique key for the cache entry.

$cache_id = 'getPage_' . $this->getDomain()
            . $this->getPageName()
            . $this->getCountry();

Then we check if the cache object is set. If that’s the case we check to see if the unique key is already available in the cache.

if (!isset($this->cache) || !($ret = $this->cache->load($cache_id))) {

If a value is returned from the cahce we will return it. If not then we will do the webservice call and store the return data in cache.

 $ret = $this->restClient->call('getPage', array());

if (isset($this->cache)) {
    $this->cache->save($ret, $cache_id);
}

The complete method looks something like this.

protected function getPageFromWebservice()
{
        $cache_id = 'getPage_' . $this->getDomain()
            . $this->getPageName()
            . $this->getCountry();

        if (!isset($this->cache) || !($ret = $this->cache->load($cache_id))) {
            $ret = $this->restClient->call('getPage', array());

            if (isset($this->cache)) {
                $this->cache->save($ret, $cache_id);
            }
        }
        return $ret;
}

That’s all. It’s pretty basic stuff. But so cool!

I finally had some time to read through my ever growing list must read items and play with some new software. While reading up on the new Firefox 3.6 i noticed it came with the new XMLHttpRequest [2] object based on the new file API. And according to the new specs. This would allow for easy file uploads. Now there’s been some examples [2] on the web already. But i just wanted to get my hands dirty.

The new XMLHttpRequest object makes is possible to send files in a few different formats. The most important being the binary format. The code for sending a request with XMLHttpRequest2 looks the same as the previous version. Except for sendAsBinary() in this case.

var xhr = new XMLHttpRequest();

fileUpload = xhr.upload,
fileUpload.onload = function() {
    console.log("Sent!");
}

xhr.open("POST", "upload.php", true);
xhr.sendAsBinary(file.getAsBinary());

So let’s set things up for drag & drop. We need a div that will be the main drop point. And we need some event listeners to catch the drag * drop events. Let start by creating the drop zone. For this we use two simple divs. The outer div will listen for the drag & drop events. And the inner will catch the files.

Now let’s create our upload code.

var upload = {
    setup : function() {},
    uploadFiles : function() {event}
}
window.addEventListener("load", upload.setup, false);

The setup method will set all event listeners for drag & drop. And register the upload handler.

var container = document.getElementById('container');
var drop = document.getElementById('drop');

container.addEventListener("dragenter", function(event) {
        drop.innerHTML = '';
        event.stopPropagation();
        event.preventDefault();
    },
    false
);

container.addEventListener("dragover", function(event) {
        event.stopPropagation();
	event.preventDefault();
    },
    false
);

container.addEventListener("drop", upload.uploadFiles, false);

As you could see above. the uploadFiles() method gets a event returned from the drag & drop action. This is where the new file APi comes in play. To get to the file property we access the dataTransfer object.

var files = event.dataTransfer.files;

The actual uploading is easy as cake.

for (var x = 0; x < files.length; x++) {

    var file = files.item(x);
    var xhr = new XMLHttpRequest();

     fileUpload = xhr.upload,
     fileUpload.onload = function() {
         console.log("Sent!");
    }

    xhr.open("POST", "upload.php", true);

    xhr.setRequestHeader("Cache-Control", "no-cache");
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.setRequestHeader("X-File-Name", file.fileName);
    xhr.setRequestHeader("X-File-Size", file.fileSize);
    xhr.setRequestHeader("Content-Type", "multipart/form-data");

    xhr.sendAsBinary(file.getAsBinary());
}

That's it for the client side. There is however a small problem on the receiving side. When handling uploaded files in PHP we expect the $_FILES array to be populated. This is not the case when streaming files from the client to the server. To get the needed file information we set some headers on the client side X-File-Name and X-File-Size. And since the $_FILES are is empty. We need an other way to get the file contents. So we will use php://input streams for that.

The contents of upload.php look like this:

require_once('Streamer.php');

$ft = new File_Streamer();
$ft->setDestination('data/');
$ft->receive();

With setDestination() the destination path for the uploaded files is set. And recieve() listens for any incoming files. Most of the magic is done in the recieve() method. So here's the code.

public function receive()
{
    if (!$this->isValid()) {
        throw new Exception('No file uploaded!');
    }

    file_put_contents(
        $this->_destination . $this->_fileName,
        file_get_contents("php://input")
    );

    return true;
}

I am impressed! This promises a lot of good. And offers some interesting options. Let's hope all browsers implement this gem. I still have one issue though. I can't get this to work in firefox under linux. The drag & drop events do not seem to function properly with files being dragged from the desktop. anybody know why?

If you interested in the complete code. you can find it here