Tara Andrei

Iframe preloader animation

andreiT — Wed, 07 Mar 2012 21:29:55 +0000

I love working with iframe content loading… noo no way, I actually hate it, but there are situations when loading the content inside the iframe is the only viable technical solution. I am sure you have use it before and maybe you have asked yourself how to add something like a loding animation while the frame is loading. I will provide a example but today I am fling lazy so I will use jQuery, the code should be something like:

 
var ContentLoader = function() {
	function load(url, onContentLoaded) {
 
		$($('#content')).append('');
		$('iframe#myBelovedIframe').attr('src', url);
 
		// On iframe content load
		$('iframe#myBelovedIframe').load(function() {
			onContentLoaded(this);
		});
 
	}
 
};
 
c = new ContentLoader();
c.load("http://andreitara.com", function() {
	$('#content').removeClass('loading');
	// TODO Add any code that has to be executed after the frame is loaded
});

This is how the script should look like, and the HTML could be something like:

 
....

...

of course you will need also some CSS for the loading animation like:

 
.loading{
 background-image:url('loading.gif');
}

Your parents should be so proud of you, you first iframe with loading animation , now you can celebrate.

Working with models data.store and list in Sencha

andreiT — Thu, 01 Mar 2012 22:06:07 +0000

There is no point in explaining what is MVC, if you don’t already know what is MVC well dear, then you got an issue … trust me I am an engineer . OK, now lets see how do we create our models in Sencha and fill the with information form back-end. I will create a models that holds the information related to user contact information. To keep this minimal the model could be something like:

 
**
 * Model mapping the contact details
 */
Ext.regModel('ContactDetails', {        
	//Contact website
	{
		name : 'website',
		type : 'string'
	},
	//Twitter account
	{
		name : 'twitter',
		type : 'string'
	}
        //TODO Add more  details :), I am lazy  
}
 
 
**
 * Model mapping the contact structure
 */
Ext.regModel('Contact', {
	//Contact name
	{
		name : 'name',
		type : 'string'
	},
	//Contact email
	{
		name : 'email',
		type : 'string'
	},
        //Contact details
        // Mapping Contact details model
	{
		name : 'detail',
		type : 'ContactDetails'
	},
 
}

OK now that we have created our model lets create our store that use the Contact model

 
var ContactStore = new Ext.data.Store({
        // mapping model
	model : 'Contact',
        // auto load with data from back-end
	autoLoad : true,
        // sort our contacts
	sortOnLoad : true,
	proxy : {		
		type : 'ajax',
		url : 'example.com/contacts.json/',		
	},
        //Add a custom sorting function by name
	sorters : [{
                //Set field used to sort the 
		property : 'name',		
		sorterFn : function(o1, o2) {
			var v1 = this.getRoot(o1)[this.property].toLowerCase(),
			 v2 = this.getRoot(o2)[this.property].toLowerCase();
 
			return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
		}
	}]
});

We did successfully created our store now lets put out data inside a list, this can be easily done by the following voodoo :

 
//Create the list of contacts
ContactsList = new Ext.List({
	id : 'contactslist',
	//Set data source
	store : ContactStore
});

This is it, now the model strong in you is Luke

Setup Doctrine CLI

andreiT — Fri, 24 Feb 2012 18:39:22 +0000

In the previous article have showed you how to integrate the almighty Doctrine ORM in Zend. But I haven’t mentioned nothing about the magic of this wonderful framework CLI.

I suppose that you have already done all the required magic incantations to integrate Doctrine in Zend, now what you are supposed to do next is to create in your Zend project a folder called bin and add doctrine.php file with the following content :

define('APPLICATION_ENV', 'development');
 
define('APPLICATION_PATH', realpath(dirname(__FILE__) . '/../application'));
 
set_include_path(implode(PATH_SEPARATOR, array(
realpath(APPLICATION_PATH . '/../library'),
get_include_path(),
)));
 
// Doctrine and Symfony Classes
require_once 'Doctrine/Common/ClassLoader.php';
 
$classLoader = new \Doctrine\Common\ClassLoader('Doctrine', APPLICATION_PATH . '/../library');
$classLoader->register();
$classLoader = new \Doctrine\Common\ClassLoader('Symfony', APPLICATION_PATH . '/../library/Doctrine');
$classLoader->register();
$classLoader = new \Doctrine\Common\ClassLoader('Entities', APPLICATION_PATH . '/models');
$classLoader->setNamespaceSeparator('_');
$classLoader->register();
 
// Zend Components
require_once 'Zend/Application.php';
 
// Create application
$application = new Zend_Application(
APPLICATION_ENV,
APPLICATION_PATH . '/configs/application.ini'
);
 
// bootstrap doctrine
$application->getBootstrap()->bootstrap('doctrine');
 
$em = $application->getBootstrap()->getResource('doctrine');
 
// generate the Doctrine HelperSet
$helperSet = new \Symfony\Component\Console\Helper\HelperSet(array(
'db' => new \Doctrine\DBAL\Tools\Console\Helper\ConnectionHelper($em->getConnection()),
'em' => new \Doctrine\ORM\Tools\Console\Helper\EntityManagerHelper($em)
));
 
\Doctrine\ORM\Tools\Console\ConsoleRunner::run($helperSet);

Now you have the php file that will provide you basic functionalities for Doctrine CLI, next add a file called doctrine (wihtout extension) containing

#!/usr/bin/env php

include('doctrine.php');

open the almighty console and mark this as executable (using chmod 777) and now you are done open the console and type ./doctrine, if everything is OK you should get something like:

Doctrine Command Line Interface version 2.1.0
Usage:
[options] command [arguments]
Options:
--help -h Display this help message.
--quiet -q Do not output any message.
--verbose -v Increase verbosity of messages.
--version -V Display this program version.
--ansi Force ANSI output.
--no-ansi Disable ANSI output.
--no-interaction -n Do not ask any interactive question.
Available commands:
help Displays help for a command
list Lists commands
dbal
dbal:import Import SQL file(s) directly to Database.
dbal:run-sql Executes arbitrary SQL directly from the command line.
orm
orm:clear-cache:metadata Clear all metadata cache of the various cache drivers.
orm:clear-cache:query Clear all query cache of the various cache drivers.
orm:clear-cache:result Clear result cache of the various cache drivers.
orm:convert-d1-schema Converts Doctrine 1.X schema into a Doctrine 2.X schema.
orm:convert-mapping Convert mapping information between supported formats.
orm:ensure-production-settings Verify that Doctrine is properly configured for a production environment.
orm:generate-entities Generate entity classes and method stubs from your mapping information.
orm:generate-proxies Generates proxy classes for entity classes.
orm:generate-repositories Generate repository classes from your mapping information.
orm:info Show basic information about all mapped entities
orm:run-dql Executes arbitrary DQL directly from the command line.
orm:schema-tool:create Processes the schema and either create it directly on EntityManager Storage Connection or generate the SQL output.
orm:schema-tool:drop Drop the complete database schema of EntityManager Storage Connection or generate the corresponding SQL output.
orm:schema-tool:update Executes (or dumps) the SQL needed to update the database schema to match the current mapping metadata.
orm:validate-schema Validate that the mapping files.

So this is it,

Integrating Doctrine in Zend framework

andreiT — Wed, 22 Feb 2012 20:55:37 +0000

Zend is, in my opinion, the best PHP framework ever it has a lot of really nice useful stuff, but it doesn’t have a build in ORM. I have recently worked with Doctrine ORM 2.0 that is a superb ORM framework, wrote on PHP 5.3 can be easily integrated in Zend.
So, lets keep it short,
1. download and copy the doctrine framework to the library folder
2. add the following lines to the applicaion.ini:

doctrine.connection.host = 'mysql db host'
doctrine.connection.user = 'mysql user'
doctrine.connection.pass = 'mysql pass'
doctrine.connection.driv = 'pdo_mysql'
doctrine.connection.dbname = 'mysql databse'
doctrine.path.models = APPLICATION_PATH "/models/"
doctrine.proxyNamespace='\Proxies'
doctrine.proxyPath=APPLICATION_PATH . '/models/Proxies'
doctrine.modelsPath= APPLICATION_PATH . '/models'

2. add some glue code in Bootstrap.php

/**
* Initialize Doctrine
* @return Doctrine_Manager
*/
public function _initDoctrine() {
 
// include and register Doctrine's class loader
require_once('Doctrine/Common/ClassLoader.php');
$classLoader = new \Doctrine\Common\ClassLoader(
'Doctrine',
APPLICATION_PATH . '/../library/'
);
 
// now create the entity manager and use the connection
// settings we defined in our application.ini
$doctrineSettings = $this->getOption('doctrine');
 
$classLoader->register();
 
// create the Doctrine configuration
$config = new \Doctrine\ORM\Configuration();
 
// setting the cache ( to ArrayCache. Take a look at
// the Doctrine manual for different options ! )
$cache = new \Doctrine\Common\Cache\ArrayCache;
$config->setMetadataCacheImpl($cache);
$config->setQueryCacheImpl($cache);
 
// choosing the driver for our database schema
// we'll use annotations
$driver = $config->newDefaultAnnotationDriver(
$doctrineSettings['modelsPath']
);
$config->setMetadataDriverImpl($driver);
// set the proxy dir and set some options
$config->setProxyDir($doctrineSettings['proxyPath']);
$config->setAutoGenerateProxyClasses(true);
$config->setProxyNamespace($doctrineSettings['proxyNamespace']);
 
$conn = array(
'driver' => $doctrineSettings['connection']['driv'],
'user' => $doctrineSettings['connection']['user'],
'password' => $doctrineSettings['connection']['pass'],
'dbname' => $doctrineSettings['connection']['dbname'],
'host' => $doctrineSettings['connection']['host']
);
$entityManager = \Doctrine\ORM\EntityManager::create($conn, $config);
 
// push the entity manager into our registry for later use
$registry = Zend_Registry::getInstance();
$registry->entitymanager = $entityManager;
 
return $entityManager;
}

So this is it, you have successfully added doctrine to your Zend project.

Smarty plugin for Kohana

andreiT — Wed, 22 Feb 2012 07:01:46 +0000

I’ve been working for a while with Kohana 3 and really enjoin the features provided by it such as HMVC, ORM and caching, features that makes our live as developers really easy allowing us to create really nice pink application. But, yeah … there are no pink ponies jumping on rainbows, or are there any ?? I am talking about views from Kohana, I really don’t like the way they mix HTML markup and PHP code it is really annoying when you see a foreach loop and inside it some echo, I am sure that you really understand what I mean. But tanks God there are some really smart people that were thinking about this long time before, so this people have invented something that we are calling Smarty. Smarty is a template engine, a template engine’s life purpose is to provide a clear separation between the application business logic and the way the data presentation, or you know…in ancestor time this was called design right ?. Well that is necessary because there are two main categories of players: developers and designers and each loves only their own toys. This article is not aiming to learn you advanced topics about Smarty, I suppose that if you are instead of it you can ask the almighty Google about that.

I have wrote some glue code that make possible the utilization of the Smarty template engine in Kohana very simple and transparent, so you don’t have to change nothing in your existing application. All you have to do is to download the module form Smarty-views-for-Kohana repository, extract it in your modules folder and add the following line in your bootstrap.php on module loading section and you are ready to go.

'smarty'  => MODPATH.'smarty',  // Smarty views

So basically now you have finished, have fun with Kohana and Smarty.

Using Magento product chooser widget in you’re own module.

andreiT — Sun, 19 Feb 2012 09:39:10 +0000

From my personal experience Magento is in the greatest e-commerce platform when it comes to architecture and the way this is built but in the same time the it really piss me off when it comes to documentation. Well the documentation is so fuzzy and the samples are so minimal or outdated, I mean really useless. Even when you have to do a really simple task you have to do some reverse engineering and try to understand how to solve your problem (although in the old good days I love playing with decompilers and ASM to try to find out more about how the stuff are done under the hood). But when it comes to have a result in a specified amount of time this is not funny at all.
OK so one of the task that I had to figure out, was to add a product chooser widget in a custom made component. Sound easy but in reality this was frustrating because I couldn’t find anything useful and thous guys form Magento community don’t want to share anything with other (damn bastards), that is the main reason that I am sharing this with you.
Supposing that you already know how to create a module.
The product selector will be triggered by a button and will put all the product SKU in a textbox or something like.
1. create an new JS add it to js folder, this will contain something like :

getProductChooser = function (url) {
    new Ajax.Request(
    url, {
        method: "post",
        onSuccess: function (b) {
            var a = $("chosser-container");
            a.update(b.responseText);
            a.scrollTo()
        }
    })
};
var VarienRulesForm = new Class.create();
VarienRulesForm.prototype = {
    initialize: function (a) {
        this.newChildUrl = a;
        this.shownElement = null;
        this.updateElement = $("skus");
        this.chooserSelectedItems = $H({})
    },
    initParam: function (b) {
        b.rulesObject = this;
        var d = Element.down(b, ".label");
        if (d) {
            Event.observe(d, "click", this.showParamInputField.bind(this, b))
        }
        var f = Element.down(b, ".element");
        if (f) {
            var e = f.down(".rule-chooser-trigger");
            if (e) {
                Event.observe(e, "click", this.toggleChooser.bind(this, b))
            }
            var c = f.down(".rule-param-apply");
            if (c) {
                Event.observe(c, "click", this.hideParamInputField.bind(this, b))
            } else {
                f = f.down();
                if (!f.multiple) {
                    Event.observe(f, "change", this.hideParamInputField.bind(this, b))
                }
                Event.observe(f, "blur", this.hideParamInputField.bind(this, b))
            }
        }
        var a = Element.down(b, ".rule-param-remove");
        if (a) {
            Event.observe(a, "click", this.removeRuleEntry.bind(this, b))
        }
    },
    showChooserElement: function (c) {
        this.chooserSelectedItems = $H({});
        var a = this.updateElement.value.split(","),
            b = "";
        for (i = 0; i < a.length; i++) {
            b = a[i].strip();
            if (b != "") {
                this.chooserSelectedItems.set(b, 1)
            }
        }
        new Ajax.Updater(c, c.getAttribute("url"), {
            evalScripts: true,
            parameters: {
                form_key: FORM_KEY,
                "selected[]": this.chooserSelectedItems.keys()
            },
            onSuccess: this._processSuccess.bind(this) && this.showChooserLoaded.bind(this, c),
            onFailure: this._processFailure.bind(this)
        })
    },
    showChooserLoaded: function (a, b) {
        a.style.display = "block"
    },
    showChooser: function (a, c) {
        var b = a.up("li");
        if (!b) {
            return
        }
        b = b.down(".rule-chooser");
        if (!b) {
            return
        }
        this.showChooserElement(b)
    },
    hideChooser: function (a, c) {
        var b = a.up("li");
        if (!b) {
            return
        }
        b = b.down(".rule-chooser");
        if (!b) {
            return
        }
        b.style.display = "none"
    },
    toggleChooser: function (a, c) {
        var b = a.up("li").down(".rule-chooser");
        if (!b) {
            return
        }
        if (b.style.display == "block") {
            b.style.display = "none";
            this.cleanChooser(a, c)
        } else {
            this.showChooserElement(b)
        }
    },
    cleanChooser: function (a, c) {
        var b = a.up("li").down(".rule-chooser");
        if (!b) {
            return
        }
        b.innerHTML = ""
    },
    showParamInputField: function (a, c) {
        if (this.shownElement) {
            this.hideParamInputField(this.shownElement, c)
        }
        Element.addClassName(a, "rule-param-edit");
        var d = Element.down(a, ".element");
        var b = Element.down(d, "input.input-text");
        if (b) {
            b.focus();
            if (b && b.id && b.id.match(/__value$/)) {
                this.updateElement = b
            }
        }
        var b = Element.down(d, "select");
        if (b) {
            b.focus()
        }
        this.shownElement = a
    },
    hideParamInputField: function (a, d) {
        Element.removeClassName(a, "rule-param-edit");
        var b = Element.down(a, ".label"),
            c;
        if (!a.hasClassName("rule-param-new-child")) {
            c = Element.down(a, "select");
            if (c && c.options) {
                var f = [];
                for (i = 0; i < c.options.length; i++) {
                    if (c.options[i].selected) {
                        f.push(c.options[i].text)
                    }
                }
                var e = f.join(", ");
                b.innerHTML = e != "" ? e : "..."
            }
            c = Element.down(a, "input.input-text");
            if (c) {
                var e = c.value.replace(/(^\s+|\s+$)/g, "");
                c.value = e;
                if (e == "") {
                    e = "..."
                } else {
                    if (e.length > 30) {
                        e = e.substr(0, 30) + "..."
                    }
                }
                b.innerHTML = e
            }
        } else {
            c = Element.down(a, "select");
            if (c.value) {
                this.addRuleNewChild(c)
            }
            c.value = ""
        }
        if (c && c.id && c.id.match(/__value$/)) {
            this.hideChooser(a, d);
            this.updateElement = null
        }
        this.shownElement = null
    },
    addRuleNewChild: function (b) {
        var f = b.id.replace(/^.*__(.*)__.*$/, "$1");
        var h = $(b.id.replace(/__/g, ":").replace(/[^:]*$/, "children").replace(/:/g, "__"));
        var d = 0,
            c;
        var a = Selector.findChildElements(h, $A(["input.hidden"]));
        if (a.length) {
            a.each(function (k) {
                if (k.id.match(/__type$/)) {
                    c = 1 * k.id.replace(/^.*__.*?([0-9]+)__.*$/, "$1");
                    d = c > d ? c : d
                }
            })
        }
        var g = f + "--" + (d + 1);
        var j = b.value;
        var e = document.createElement("LI");
        e.className = "rule-param-wait";
        e.innerHTML = Translator.translate("Please wait, loading...");
        h.insertBefore(e, $(b).up("li"));
        new Ajax.Updater(e, this.newChildUrl, {
            evalScripts: true,
            parameters: {
                form_key: FORM_KEY,
                type: j.replace("/", "-"),
                id: g
            },
            onComplete: this.onAddNewChildComplete.bind(this, e),
            onSuccess: this._processSuccess.bind(this),
            onFailure: this._processFailure.bind(this)
        })
    },
    _processSuccess: function (b) {
        var a = b.responseText.evalJSON();
        if (a.ajaxExpired && a.ajaxRedirect) {
            alert(Translator.translate("Your session has been expired, you will be relogged in now."));
            location.href = a.ajaxRedirect
        }
        return true
    },
    _processFailure: function (a) {
        location.href = BASE_URL
    },
    onAddNewChildComplete: function (c) {
        $(c).removeClassName("rule-param-wait");
        var a = c.getElementsByClassName("rule-param");
        for (var b = 0; b < a.length; b++) {
            this.initParam(a[b])
        }
    },
    removeRuleEntry: function (b, c) {
        var a = Element.up(b, "li");
        a.parentNode.removeChild(a)
    },
    chooserGridInit: function (a) {},
    chooserGridRowInit: function (a, b) {
        if (!a.reloadParams) {
            a.reloadParams = {
                "selected[]": this.chooserSelectedItems.keys()
            }
        }
    },
    chooserGridRowClick: function (b, d) {
        var f = Event.findElement(d, "tr");
        var a = Event.element(d).tagName == "INPUT";
        if (f) {
            var e = Element.select(f, "input");
            if (e[0]) {
                var c = a ? e[0].checked : !e[0].checked;
                b.setCheckboxChecked(e[0], c)
            }
        }
    },
    chooserGridCheckboxCheck: function (b, a, c) {
        if (c) {
            if (!a.up("th")) {
                this.chooserSelectedItems.set(a.value, 1)
            }
        } else {
            this.chooserSelectedItems.remove(a.value)
        }
        b.reloadParams = {
            "selected[]": this.chooserSelectedItems.keys()
        };
        this.updateElement.value = this.chooserSelectedItems.keys().join(", ")
    }
};

2. be sure that the js file will be hooked in the header, for that add the following line to the adminhtlm layout XML (note that my module is called znuv so you would replace wit the popper name):

3. now you have a code that it will add the widget to the interface so let’s add a backend form with a button that will show the chooser, so for that add the following lines:

$action = 'getProductChooser(\'' . Mage::getUrl(
'adminhtml/promo_widget/chooser/attribute/sku/form/rule_conditions_fieldset',
array('_secure' => Mage::app()->getStore()->isAdminUrlSecure())
) . '?isAjax=true\'); return false;';
 
$productFieldset->addField('trigger', 'button', array(
'name' => 'trigger',
'label' => Mage::helper('whooparoo')->__('Choose Products'),
'value' => Mage::helper('whooparoo')->__('Choose Products'),
'class' => 'rule-chooser-trigger',
'onclick' => $action,
)
);

So that’s all, happy coding

Overwrite Magento checkout controller route

andreiT — Fri, 17 Feb 2012 20:12:53 +0000

I’v been playing with Magento for a while and yes! there are times when I love it and there times when I wish that it hadn’t be borned. I remember first time when I had to inject some new functionality over the onepage checkout controller. Doing it for the fist time is really painful but after you get the trick it’s really simple.

So first step you have to do is to touch the etc/config.xml local module configuration file (I suppose that you already have set a module in the app/code/local/Namespace/Module) on the routes section and add the following lines of code:

 >
     >
       >
        >
        
         before="Mage_Checkout">Namespace_Module >
        >
      >
     >
 
  >

In the XML configuration you have informed Magento that the Mage_Checkout module route is overwritten by our Namespace_Module module. Now we only have to extend the Checkout controller and add our functionality, so create the app/code/local/Namespace/Module/controllers/OnepageController.php with the following content:

//You need to include the extended controller by hand, the auto-load will not get it for you this time 
require_once 'Mage/Checkout/controllers/OnepageController.php';
 
class Namespace_Module_OnepageController extends Mage_Checkout_OnepageController {
 
    /**
     * Index action 
     */
    public function indexAction() {
       //TODO add functionality 
       parent::indexAction();
    }
}

Now you’we got the trick, go ahead and be wild !!

Sencha touch list and taphold event

andreiT — Sun, 12 Feb 2012 23:44:22 +0000

Sencha touch allows you to create in no time applications for mobile device and all you need is love and… JavaScript. My latest challenge was to show a menu when user was holding the finger ( not necessary the middle one ) on any list element. It tokes me a while but in the end I have found the magic spell that solved the problem. So to keep it short the code should look something like:

//Create the list
FileList = new Ext.List({
// list setting
// another list setting
// ...
/**
* Listeners binding
*/
listeners : {
el : {
  /**
  * Binding tap hold event on list element 
  */
  taphold : function(record, btn, index) {
     //Here you can add the required logic 
  }
 }
}

Multilanguage in Zend

andreiT — Sun, 12 Feb 2012 22:30:54 +0000

Unfortunately not all of us are spoking the same language, hmm.. weird isn’t it ? So is this affecting me as a developer ? would you ask ? actually yes my fellow, it does. If is the first tine when you are developing a multi-language web application you will have to solve a lot of problems that normally you wouldn’t have, yes.. you will ! OK so I am not going to explain the paint you will have to endure, but I will show you how to do that in Zend, just follow the steps:

Step 1: add a method in the almighty Bootsrap.php something like this:

protected function _initLanguage() {
 
 $zl = new Zend_Locale();
 $zl-&gt;setLocale('ro_RO');
 Zend_Registry::set('Zend_Locale', $zl);
 $lang = 'ro';
 
 $translate = new Zend_Translate('csv', APPLICATION_PATH . '/configs/lang/' . $lang . '.csv', $lang);
 
 Zend_Registry::set('Zend_Translate', $translate);
 
 return $translate;
}

Step 2: add the language files in the APPLICATION_PATH /configs/lang/ this are some strange csv files .
Step 3: hmm … there is no step 3

Perform face detection in PHP

andreiT — Mon, 13 Jun 2011 21:31:41 +0000

This short article will learn you how to perform face detection in PHP. So basically we are going to make use of OpenCV ( you know it you are using it everyday …aren’t you ?? ) we actually will abuse only on face detection algorithm that comes with it. We are going to compile the face detection as an .so module for php and hook this module in PHP.

Requirements:

LAMP stack installed, you know… Apache 2, PHP
Build essentials (gcc compilers and all the hoard )
A Linux distribution (mine is Ubuntu 11.something)
1 beer & nothing beater to do

OK so the fist thing that you have to do is to install the build essentials by running the command :

sudo apt-get install build-essential

Be proud ! and tell to all you’re friends ! you are a linux developer ’cause you have a compiler running on you PC. Now that you can compile c/c++ files you will need the OpenCV library. There are two ways to install it: that first is to download the latest version from http://sourceforge.net/projects/opencvlibrary/files/opencv-unix/2.2/ and run make and make-install commands (not recommended, there is always a missing library or a stupid error ) or you just can open System->Administration->Synaptic package manager search opencv and check all the libraries as in the following image:

OpenCv library is installed but… hold on, do not touch you’re beer yet ! you still have to download and compile facedetection library, do that by using the following magic incantation :

wget http://www.xarg.org/download/facedetect-1.0.1.tar.gz
tar -xvf facedetect-1.0.1.tar.gz
cd facedetect
phpize
configure
make
make-install

Congratulation !! you parents should be so proud of you, now is the first time when you have compiled a module for PHP. The facedetect.so was created and copied to the corresponding PHP lib directory (/usr/lib/PPH5), add extension=facedetect.so to the php.ini file ( in /etc/php5/apache2/php.ini or a similar location) restart the apache, now if you run phpinfo you should see the facedetect module up and running:

Now let’s create a PHP file ( for e.g. face.php) with the following content:

function LoadJpeg($img) {
$im = @imagecreatefromjpeg($img);
if (!$im) {

echo ‘Bad image’;
}

$total = face_count($_GET['file'], ‘haarcascade_frontalface_alt.xml’);
$rectangles = face_detect($_GET['file'], ‘haarcascade_frontalface_alt.xml’);

$im = LoadJpeg($_GET['file']);
$pink = imagecolorallocate($im, 255, 105, 180);

if (count($rectangles) > 0) {

foreach ($rectangles as $arr) {
imagerectangle($im, $arr['x'], $arr['y'], $arr['x'] + $arr['w'],
$arr['y'] + $arr['h'], $pink);
}
}
header(‘Content-Type: image/jpeg’);
imagejpeg($im);
imagedestroy($im);

now run it in the browser http://localhost/face.php?file=lena.jpg and voala !!! you have detected the face of Lenna (still have to test it on fill version of Lenna ) .

While you are enjoying you’re beer just add few words as feed back in section belowww.