How to add wordpress like add_filter hooks in your PHP framework

I simply love wordpress mainly because of the architectural design it follows to deliver the good. WordPress provide a hook or filter functionality to almost everything that appears on your blog. If you are a wordpress plugin developer you surely must have used one of them, specially add_filter() hook.

add_filter functionality provides plugin developer a way to apply custom hooks on various page sections. For instance add_filter('the_content', 'HelloWorld') will force the content to be passed through the function HelloWorld($content) before being displayed to your blog users.

In this blog post I will show you how can you achieve doing the same thing for your custom PHP frameworks. Otherwise you can also use this in your day to day projects. We will start with a simple directory structure, assuming this is all we have in our framework to start with:

Files/Folder structure of our framework
— addHooks
    — index.php
    — applyHooks.php
    — hooks
          — Subscribe.php
          — Signature.php

addHooks: Our framework root directory.
index.php: Homepage for our framework.
applyHooks.php: Responsible for including and implementing various hooks.
hooks: Our hooks directory. We will put all our hooks here.
Subscribe.php: A simple hook which will add a subscribe my feed link.
Signature.php: Another simple hook which adds my signature.

Source code
Download the complete source code from here.

index.php

  // define some content
  // in this demo i will show to how to apply hook to $content, similar to wordpress blog $content
  $content = "In this blog post I will show you how to add wordpress like add_filter hooks in your PHP framework.";

  // Include our hook management file
  require_once("applyHooks.php");
  

Subscribe.php

  function Subscribe($content) {
    $subscribe = '';
    $subscribe .= 'Subscribe to my RSS feed';
    $subscribe .= '

'; return $subscribe.$content; } add_filter('the_content', 'Subscribe');

Signature.php

  function Signature($content) {
    $signature = '

'; $signature .= 'Abhinav Singh
'; $signature .= 'Follow on twitter @imoracle
'; return $content.$signature; } add_filter('the_content', 'Signature');

applyHooks.php

  /* plugin directory */
  $hook_dir = "hooks/";

  /* get all plugin files */
  $hook_files = glob($hook_dir."*.php");

  /* array saving all our hooks on the_content */
  $hooks['the_content'] = array();

  /* add_filter functionality */
  function add_filter($on, $func) {
    global $hooks;
    array_push($hooks[$on], $func);
  }

  /* include plugin files */
  foreach($hook_files as $hook_file) {
    require_once($hook_file);
  }

  /* implement the hooks */
  foreach($hooks['the_content'] as $hook) {
    $content = call_user_func($hook, $content);
  }

  echo $content;
  

Final Result
When you try to visit your framework opening page on your browser, i.e. index.php. You will see your $content being filtered/modified and displayed as:
add_filter_output

How does applyHooks.php works
So what allows us adding such hooks in our framework. call_user_func is a PHP function which allows you to call a user defined function. Here is in short how applyHooks.php work:

  1. applyHooks.php adds a method called add_filter($on, $func) before including the hook files
  2. add_filter() essentially takes input as $on = the element on which you want to apply the hook and $func = the hook you want to apply $on element.
  3. If you see our Signature.php code, you will find add_filter('the_content', 'Signature');. Which essentially means, apply the filter called $func=’Signature’, $on=’the_content’
  4. The applyHooks.php file keep registering these hooks and save them in $hooks array
  5. Finally it implement all hook one by one by calling the call_user_func function (PS: You may also want to use call_user_func_array)

Extending applyHooks.php
In this blog post I have shown a demo, how you can create a add_filter type functionality. You may want to extend this to include hooks like:

  • remove_filter
  • add_shortcode

and others.

Hope this will help you making your web apps more expendable and manageable. 😀

Getting started with Openlaszlo – Framework for developing flash apps

Openlaszlo is an open source framework which simplifies development of flash applications. Openlaszlo allows you to code your flash apps using xml style laszlo code, and thereafter you can compile your code to output a .swf file for production usage. I first came around openlaszlo while I was developing Alterplayer – open source flash mp3 player.

In this post I will demonstrate:

  • Getting started with Openlaszlo – Setting up your dev enviornment
  • Hello World! in Openlaszlo
  • Upcoming tutorials

Setting up Openlaszlo development environment

  1. Download the latest openlaszlo release 4.4 from http://openlaszlo.org/download or alternatively download directly from http://download.openlaszlo.org/4.4.0/openlaszlo-4.4.0-windows-dev-install.exe
  2. Double click and install the setup. For me on WinXP, it installs in the following location. C:Program FilesOpenLaszlo Server 4.4.0
  3. Upon installation tomcat server will start automatically. If it doesn’t, click the following file to start the tomcat server. C:Program FilesOpenLaszlo Server 4.4.0Serverlps-4.4.0lpsutilsstartTomcat.bat
  4. At any point in time when you want to stop the tomcat server, click the stopTomcat.bat file lying in the same folder.
  5. Browse to the following location on your firefox, to see the opening welcome screen http://127.0.0.1:8080/lps-4.4.0/laszlo-explorer/index.jsp
  6. Create a folder inside C:Program FilesOpenLaszlo Server 4.4.0Serverlps-4.4.0, called Workspace. We will do all our development in this directory.
  7. Create a folder called HelloWorld inside Workspace. We will start developing our first project straight away

Hello World! in OpenLaszlo
Like in any other language and framework, we will learn how to write a Hello World! program.

  1. Create a file helloworld.lzx inside the Hello World folder
  2. 
      Hello World!
    
  3. Browse to the following location on your browser: http://127.0.0.1:8080/lps-4.4.0/Workspace/HelloWorld/helloworld.lzx
  4. Did you see HelloWorld! ? Bingo

Hello World! Explained

  1. Each and every openlaszlo code file have an extension .lzx
  2. Each and every laszlo code is wrapped inside <canvas></canvas> tag
  3. <text></text> is a class used for non-editable text fields. Here it will simply display Hello World! on the browser.

Debugging in Openlaszlo
One of the strong feature which comes packaged with openlaszlo, is it’s support for debugging. When you visited the above link in your browser, along with Helllo World! text you must have seen a debugger window too. Mainly because we had <canvas debug=”true”>, debug true in our code.

If you might have noticed, I have given an id to out <text></text> node. Lets see how can we make use of it while debugging. Suppose you didn’t get what you really wanted out of your code, for instance suppose you mistyped Hello World! as Helo World!. Simply go ahead and type the element id in the debugger window.

For instance here I will type in the id of the element i want to inspect i.e. id=”helloworld”. As I press enter, debugger shows me all the details about my element of interest.
getting_started_with_openlaszlo

Another thing you can do from within the code is, print out your debug logs on the debugger screen. For instance modify the above code as follows and refresh your app on the browser:


  
    Hello World!
  
  

Above code will simply throw a string “I just printed a Hello World!” on the debugger string. In you application you can ever throw a variable value for debugging purpose.

Upcoming tutorial
In the next tutorials on openlaszlo, I will explain:

  1. How to create an alterplayer out of openlaszlo. Meanwhile I would like you to go through my previous post on openlaszlo: How to create a single button flash audio player using Openlaszlo?
  2. How to build an imoracle video player out of openlaszlo.

Both the projects will be opensource under GNU General Public License v3.

Also you may want to visit the following reference on openlaszlo official site:
http://www.openlaszlo.org/lps3/docs/reference/

XML Parsing in PHP, XPATH way – The best I know so far

If you are a PHP developer, you surely must have done XML parsing at some stage or the other. Over the years I myself have implemented XML Parsing in atleast 3-4 different ways. Finally I have stuck to this approach which I personally find far more better than the rest, Not only because it’s quite simple but also because it’s extendable. By extendable I mean, you don’t have to touch your code if the XML structure changes at a later stage or if you need to parse a new node at a later stage in the project. In this blog post we will try to parse my twitter timeline, using the XPATH way. To start with let’s see how a my twitter timeline look like:

XML Source:
http://twitter.com/statuses/user_timeline/imoracle.xml
You may want to open this XML structure in a separate window of your browser for reference, as we walk through various XML parsing techniques.

Data Requirement:
Before we proceed to parse this twitter timeline, lets decide what all data do we want to extract out of the XML. Each <status></status> node consists of two parts. Information about the tweet and information about the user.

Lets finalize the following list of nodes which we want about the tweets and also their corresponding XPATH’s:

  1. id: ../statuses/status/id
  2. text: ../statuses/status/text
  3. source: ../statuses/status/source

Further lets zero out on list of nodes we want about the user details:

  1. id: ../statuses/status/user/id
  2. name: ../statuses/status/user/name
  3. screen_name: ../statuses/status/user/screen_name

XML Parsing:
Let us create a file called xpath.php, which will contain xpath of various nodes which we have finalized above. The xpath.php file will look like:

xpath.php

<?php

  $user_status = array(
                      'status_id' => '../statuses/status/id',
                      'status_text' => '../statuses/status/text',
                      'status_source' => '../statuses/status/source',
                      'user_id' => '../statuses/status/user/id',
                      'user_name' => '../statuses/status/user/name',
                      'user_screen_name' => '../statuses/status/user/screen_name'
                      );

?>

parser.php

<?php

  // include the xpath file
  require_once("xpath.php");

  // read the xml source as string
  $str = file_get_contents("imoracle.xml");

  // load the string as xml object
  $xml = simplexml_load_string($str);

  // initialize the return array
  $result = array();

  // parse the xml nodes
  foreach($user_status as $key => $xpath) {
    $values = $xml->xpath("{$xpath}");
    foreach($values as $value) {
      $result[$key][] = (string)$value;
    }
  }

  // print the return array
  print_r($result);

?>

Results:
If we try to print out this $result on a browser screen, here is how the result will look like:

Array
(
    [status_id] => Array
        (
            [0] => 2499838341
            [1] => 2499780899
            [2] => 2499724163
            [3] => 2499607183
        )

    [status_text] => Array
        (
            [0] => 13 Beautiful WordPress Showcase Sites
            [1] => 55 Really Creative And Unique Blog Design Showcase
            [2] => Need PHP symfony developer to complete tvguide.com clone
            [3] => 22 Open Source PHP Frameworks To Shorten Your Development Time
        )

    [status_source] => Array
        (
            [0] => <a href="http://apiwiki.twitter.com/">API</a>
            [1] => <a href="http://apiwiki.twitter.com/">API</a>
            [2] => <a href="http://apiwiki.twitter.com/">API</a>
            [3] => <a href="http://apiwiki.twitter.com/">API</a>
        )

    [user_id] => Array
        (
            [0] => 14574588
            [1] => 14574588
            [2] => 14574588
            [3] => 14574588
        )

    [user_name] => Array
        (
            [0] => Abhinav Singh
            [1] => Abhinav Singh
            [2] => Abhinav Singh
            [3] => Abhinav Singh
        )

    [user_screen_name] => Array
        (
            [0] => imoracle
            [1] => imoracle
            [2] => imoracle
            [3] => imoracle
        )

)

The Best Part:
The best part of this approach is that, suppose in future our project demands extraction of the following nodes too:

  1. truncated: ../statuses/status/truncated
  2. favorited: ../statuses/status/truncated ../statuses/status/favorited
  3. location: ../statuses/status/user/location
  4. description: ../statuses/status/user/description

All we need to do is, simply add these xpaths in xpath.php file, without having to change the parser.php file. In case of a project you may want to create a function or a class out of the parser.php file so that you can request data from that.

Download the source code from here:
http://abhinavsingh.googlecode.com/files/xml-parser-xpath-way.rar

If you liked the post, do not forget to leave a comment and follow me on twitter.
Do let me know of better methods if you know any. Happy XML Parsing!

Facebook type image rotation and more using PHP and Javascript

If you are a facebook geek like me, you must have noticed till now the image rotate functionality in the photo albums. Facebook allows you to rotate images 90 degree clockwise and anti-clockwise after image upload. If you haven’t tried that till now, below is a screenshot for your convenience.

facebook-image-rotate

Question:
But the question is how does facebook team succeed doing this in one click. Today I tried looking around for a solution over internet and I came across the inbuilt imagerotate functionality in PHP.

Problem:
Unfortunately the problem is that even if you have GD Library extension enabled in PHP, imagerotate function just doesn’t work. After some research I found that to enable imagerotate function inside PHP, you need to compile and build PHP manually and enable imagerotate while installing PHP. You can check your PHP installation support for imagerotate using the following command line:

php -r "var_dump(function_exists('imagerotate'));"

Solution:
Since I didn’t want to touch my current installation of PHP, ImageMagick came to my rescue. Below I will show you how did I achieve cloning facebook’s 90 degree rotation functionality and also added a custom degree rotation (functionality usually seen in collage tools).

Demo:
You can try a live demo of the application here:
http://abhinavsingh.com/webdemos/imagerotate/

facebook-image-rotate-using-php-javascript

Source Code:
Before you go ahead and try this demo, you will need to install imagemagick on your system. On debian and ubuntu this can be achieved by the following command:

apt-get install imagemagick

To make sure installation is alright, run the following command from the shell:

convert -version

You should see something like this:

Version: ImageMagick 6.2.4 02/10/07 Q16 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2005 ImageMagick Studio LLC

Convert is a command line utility provided by imagemagick. Read more about convert here.

The source code consists of the following files and folders:

  • index.php : Generates the Frontend UI part for the application
  • action.php : Responsible for handling requests and rotating image using imagemagick library
  • style.css : Used for styling the UI
  • script.js : Used for handling the horizontal slider
  • images : This folder contains all the required images for the application. The image which we will be rotating left and right is “me.jpg”

action.php

  // Image Path
  $image = "images/me.jpg";
  $original = "images/me-original.jpg";

  if($_POST['restore']) {
    exec("cp ".$original." ".$image);
  }
  else if($_GET['left'] == 1 || $_GET['right'] == 1 || $_POST['degree']) {
    // Rotation Degree
    if(isset($_GET['left'])) $degree = -90;
    if(isset($_GET['right'])) $degree = 90;
    if(isset($_POST['degree'])) $degree = $_POST['degree'];

    // rotate image
    if(is_numeric($degree)) exec("convert ".$image." -rotate ".$degree." ".$image);
  }

From the UI, a user can pass 4 kind of requests:

  • Rotate Image 90 degree clockwise by clicking the button on bottom right corner
  • Rotate Image 90 degree anti-clockwise by clicking the button on bottom right corner
  • Rotate Image x degree, by choosing the value of x using horizontal slider on bottom left
  • Restore the image back to the original self

action.php handles the incoming 4 cases, calculates $degree to rotate and passes as a parameters to the command line utility provided by imagemagick.

Download Code:
Download the complete source code from here:
http://abhinavsingh.googlecode.com/files/image-rotate-application.rar
Unzip into a folder, and make the images directory writable.
PS: Application not tested on IE browser

Don’t forget to share and leave a comment if you liked the post.
Cheers!