Extjs quick start guide for jQuery Developers

I’ve seen many people (including myself) trying out the power of jQuery for once and then getting stuck with it. Why not? It’s one of the coolest and smartest JavaScript library out there. However, I have broken out from the circle and found that Extjs is another great mentor in the field of JavaScript libraries. Especially, I think it’s UI components are unbeatable (Dojo can be a nearest candidate).

If you are habituated to think JavaScript coding in the syntax of jQuery, you can start working with ExtJS right now (with a few twist)!  What you need is some little tuning in concept and syntax. Today I will be trying to explain how to do this in 6 important points :

1. Document is ready – How to get the our document ready and where to start.
2. Selecting elements – How to select elements in Ext.
3. Dom scripting – Changing on and in the element.
4. Ext events – Assigning and firing events.
5. Ext Components – The powerful alternate of jQuery UI.
6. Ajax – Making Ajax request in Ext.

Ok, let’s dive in to deep of each of these points.

(more…)

Advanced bootstrapping : Configure your Zend Framework application for multiple host

This tutorial is intended to explain a way of bootstrapping Zend Framework based MVC application for multiple host/domains. Before starting, let me explain a bit about the situation when it’s needed.

A web application goes through some stages when growing up. Generally, it starts from development and ends at production. There can be some more stages within this two ends. And, in maximum cases this stages are overlapped. The overlapped stages can be hosted in different servers with different settings but shares the same code. In this situations, if we want to keep bootstrap in SVN repo, it needs to setup bootstrap in a little different way. So that, it can handle many server settings with a single bootstrap.

For example, just now I am working on an application which is being developed in 3 local machines (me and two other members of my team) and being tested in our staging server. Besides, our client is monitoring progress of current sprint in their staging server and testing completed sprints in their pre-production server. Here, except the production servers, all hosts contains a checked out copy of code from a single repository. But this hosts have some difference in their library path, database host and authentication etc.

If my assumptions are ok for you, let’s start after downloading.

Assumptions

I have assumed that you are familiar with Zend Framework. And already worked on (atleast one) ZF MVC application. You know the basic things about bootstrapping and using the most common directory structure (shown in image). However, you can tune this technique for your favorite Zend directory stracture.

Download files

Downoad the files from here. The zip file contains -

1. index.php – This is the bootstrap file. Your .htaccess file points all request to this file.
2. config.xml – Contains all configurations of your application, for all hosts.
3. Bootstrap.php – A php class that handles all startup settings in a vary organized way. (I don’t know who first wrote it, Thanks to him)

(more…)

Front-end optimization with PHP Speedy – increase Yslow grade in 10 minutes!

Before I move into PHP Speedy, a small background won’t hurt much! Until a few days back, whenever I hear the word optimization, my brain quickly shows a few keywords in my mental screen: “query optimization, page caching, opcode, etc”. All these terms and the associated work relates to the optimization of a web application in the back-end. This has been serving my need pretty good, until I became aware about the excellent 13-point front-end optimization techniques from Yahoo (thanks Emran bhai).

At first I was a bit skeptical, but as soon as I started seeing the points – I knew its importance. Without much delay, I gave it a short in my latest project at work. And the tool that made it a less than 10 minute work is: PHP Speedy. I am literally speechless with it’s performance and way of working. Just in 10 minuets, It upgraded the Yslow grade of our project from 43 to 88.  Just like a magic touch!

Now, let’s see what Yslow Grade is (for those who are not yet using it) and how php-speedy helps to upgrade it. Hope this enlightens someone like me

(more…)

PunBB modification – Implementing iconized categories for forum topics

PunBB is one of the fastest and minimal forum softwares powered by PHP. PunBB says about itself:

PunBB is a fast and lightweight PHP-powered discussion board. It is released under the GNU General Public License. Its primary goals are to be faster, smaller and less graphically intensive as compared to other discussion boards. PunBB has fewer features than many other discussion boards, but is generally faster and outputs smaller, semantically correct XHTML-compliant pages.

You can see a detailed review about PunBB from forum-software.org.

What’s the purpose this mod?

PunBB has categories for forum. But there is no categorization for Topics like many other forums. This mod implements an iconized category for topics. The end result of this mod is -

• It will add an excellent looking “Category Icons” fieldset in “Post new topic” form. (see Image#1)
• Users can (optionally) select a topic category while posting a topic.
• The category icon will be displayed beside the topic title in forum index page, topic detail page, search result etc. (see Image#2 and Image#3)
• Clicking on a category icon will show all topics under that category.(see Image#4)

Lets see some screenshot of this modification :

Image#1:  Category icons in Post new topic form

Image#2: Category icons before topic title in forum page

Image#3: Category icon in topic page

Image#4: Filtering by category

(more…)

Image manipulation in Zend Framework using PHP Thumbnailer Class v2.0

In the huge set of library, Zend Framework have no options for manipulating image. There is a proposal for Zend_Image which aimed to provides easier image manipulation using GD. But the proposal was not considered. Bill Karwin of ZF said,

Proposal not being considered

This proposal has been reviewed. The proposal describes functionality that is very similar to the existing PHP interfaces for ImageMagick or GD.

We are not considering this for inclusion in the Zend Framework at this time.

So, what to do when we need to make image thumbnail, resizeing or cropping image etc in Zend Framework?

The Solution

Zend Framework has the extensive power of integrating any library. So, we can use ImageMagick or GD library or any wrapper class using this libraries for manipulating image.

Here, I am explaining creating image thumbnail using PHP Thumbnailer Class v2.0 in 2 easy steps. I am assuming that, you are using Zend’s MVC with common directory structure and you’ve GD library with your PHP installation.

Step 1 – Create a Model for image manipulation :

Download the PHP5 version of PHP Thumbnailer Class v2.0 and put the class file “thumbnail.inc.php” in your model directory. Now change the file name to “Thumbnail.php” as it’s class name. Now your model is ready for action.

Step 2 – Use this model in Controller :

In your Controller, write a function to make thumbnails using this model. For example, you can use this function below:

   1: /**

   2:  * Create thumbnail of an image

   3:  * 

   4:  * @author    Anis uddin Ahmad (http://www.ajaxray.com)

   5:  * @param     string    Path of source image

   6:  * @param     string    Destination path of thumbnail

   7:  * @param     number    Width of thumbnail

   8:  * @param     number    Height of thumbnail

   9:  * @param     number    (optional) thumbnail image quality 

  10:  */

  11: private function _createThumbnail($sourcePath, $destPath, $w, $h, $q = 100)

  12:  {

  13:     $thumb = new Thumbnail($sourcePath);

  14:     $thumb->resize($w, $h);

  15:     $thumb->save($destPath, $q);

  16:  }

Done. Now you can use this function to resize/make thumbnail of an image. To resize an image with keeping it’s original name, pass the $sourcePath again in $destPath parameter. Then it will overwrite the existing image.

So, was it so though to manipulate image in ZF?

Join Problems with Zend_Paginator and Zend_Db_Select objects

Zend_Paginator is one of the newest members of Zend framework family. It’s surely a rich addition with Zend’s power. Moreover, It’s handling the main data of pagination, not only pagination links. Which I didn’t found in any other pagination library.

But, when I (and many other developers) start to working with this library, found many problems/bugs. The matter is, they are being solved very fast and hope to get a bullet-proof pagination library soon. For example, here is tow important fixings about Zend_Paginator and Zend_Db_Table_Select.

I had to face a problem with Zend_Paginator when using Join in Zend_Db_Select object. I am explaining here how the problem arises and how to solve it.

The Problem

One of the 4 Adapters for Zend_Paginator is DbSelect which uses a Zend_Db_Select instance. Now, the problem occurred if I need to have some calculative data from other tables and use join with the Zend_Db_Select object for them. For example, I am retrieving data from `deals` table and collecting number of comments from `comments` table and total votes from `votes` table. So, with other conditions, I had to add this lines with select object:

   1: $select->joinLeft(array('c' => 'comments'), 'deals.id = c.deal_id', array('total_comments'=> 'count(c.id)') );

   2: $select->joinLeft(array('v' => 'votes'),    'delas.id = v.deal_id', array('total_votes'   => 'count(v.id)') );

   3: $select->group($this->_name . '.id');

Now, the Zend_Paginator will always calculate the TotalRows as 1. That means, $this->totalItemCount; will always print 1 in “view partial“.

Why it happens?

Let’s take a look to the count function of DbSelect Adaptor of Zend_Paginator:

   1: public function count()

   2: {

   3:     if ($this->_rowCount === null) {

   4:         $expression = new Zend_Db_Expr('COUNT(*) AS ' . self::ROW_COUNT_COLUMN);

   5:         

   6:         $rowCount   = clone $this->_select;

   7:         $rowCount->reset(Zend_Db_Select::COLUMNS)

   8:                  ->reset(Zend_Db_Select::ORDER)

   9:                  ->reset(Zend_Db_Select::LIMIT_OFFSET)

  10:                  ->columns($expression);

  11:                  

  12:         $this->setRowCount($rowCount);

  13:     }

  14:  

  15:     return $this->_rowCount;

  16: }

Here, at line 7, the column list is being removed. But we have a `Group By` clause in our select object which is not cleared by this function and the result is always 1. At this point, if we add “->reset(Zend_Db_Select::GROUP)” after line 9, the calculation will get rid from always being 1. But there will arise another problem. That is, joined tables are still remaining in `From` clause. You can see them by adding “die(print_r($rowCount->getPart(Zend_Db_Select::FROM)));” after line 10. This join tables will make the calculation inconsistence because there is no expression columns now to summarize their result.

The Solution

Just alter this function as following to prevent this problem:

   1: public function count()

   2: {

   3:     if ($this->_rowCount === null) {

   4:         $expression = new Zend_Db_Expr('COUNT(*) AS ' . self::ROW_COUNT_COLUMN);

   5:        

   6:         $rowCount   = clone $this->_select;

   7:         $rowCount->reset(Zend_Db_Select::FROM);

   8:         

   9:         foreach($this->_select->getPart(Zend_Db_Select::FROM) as $name => $table)

  10:         {

  11:             if(empty($table['joinCondition']))        

  12:             {

  13:                 $rowCount->from(array($name => $table['tableName']));

  14:             }

  15:             elseif($table['joinType'] == 'inner join')        

  16:             {

  17:                 $rowCount->join(array($name => $table['tableName']), $table['joinCondition']);

  18:             }

  19:         }

  20:         

  21:         $rowCount->reset(Zend_Db_Select::COLUMNS)

  22:                  ->reset(Zend_Db_Select::ORDER)

  23:                  ->reset(Zend_Db_Select::GROUP)

  24:                  ->reset(Zend_Db_Select::LIMIT_OFFSET)

  25:                  ->columns($expression);

  26:  

  27:         $this->setRowCount($rowCount);

  28:     }

  29:  

  30:     return $this->_rowCount;

  31: }

At line 9, I am running a foreach which will remove the `from` clause and again assign only the main table and inner join tables. And, at line 23, just removing the `Group By` clause from query. Now, this function will provide right calculation even when there is some joins like this. But, if you use inner join in your Zend_Db_Select object (which is very rare for pagination), this function may not serve properly.

If there is any mistake in this alternation or any other way can make it better, please let me know. And… let’s meet power with simplicity.

UPDATE [26/08/08] : The function is updated and hopefully it will work fine for inner joins too.

UPDATE [24/09/08] : This issue is solved in ZF 1.6. Jurrien Stutterheim has reported about this post in Zend Framework Issue tracker and worked on it. After the release of 1.6, he requested me to check if this issue still exist. I’ve checked and found it solved. Thanks to Jurriën Stutterheim.

Developing web application with PHP-MySql-Apache in Ubuntu Linux

I have started using Ubuntu 8.04 in few days ago and found it Great. So, now I’ve moved my development environment from windows and working in Ubuntu. Here I am just explaining what steps I had to take for this jump. Also have a listing of some development related softwares/tools which I am using as replacement of windows applications.

Installing Apache, Php5, MySql in Ubuntu:

You can install Apache, Php, Mysql and other applications from Synaptic Package Manager. Go to System > Administration > Synaptic Package Manager and search with your desired application name. When found, double-click on package name. The package will be marked for installation along with it’s dependences. Now click on apply button to install the package. In this post, the red+bold texts are the name of software package which can be installed from Synaptic Package Manager.

To make your system ready for PHP development, you have to install more or less this packages: apache2.2-common, apache2-utils, php5, mysql-server-5.0, mysql-client-5.0, mysql-query-browser etc. You may also require some common php extensions which may not installed automatically with PHP installation. Most of them also will be found in Synaptic Package Manager as php5-gd, php5-curl, php5-mysql, php-pear etc.

Paths of important directories

One of the major differences I find here is the file system. All the directory paths I’ve been using in windows are changed here. I m listing here some PHP-MySql related paths here. But they may differ on your installation.

• Apache configation files: /etc/apache2/
• localhost root directory: /var/www/
• PHP ini file: /etc/php5/apache2/
• PHP extensions configuration files : /etc/php5/conf.d
• MySql Data files: /var/lib/mysql/mysql
• MySql Configuration files: /etc/mysql/

PHP Editors for Ubuntu

Gedit is the default text editor of Ubuntu and it support syntax coloring for many languages including PHP. But If you want an advanced editor for programming, you can try Geany or Screem. But, I am sure, who’ve been using advanced IDEs like PHPEd or PHPDesigner in windows, none of this can satisfy him. Don’t worry, the great open source IDE eclips has PHP-Development-Tool. It’s surely one of the best PHP IDE.

Subversion in Ubuntu

Subversion maintains current and historical versions of source code and documentation. It’s very important for distributed application development. RapidSVN is a graphical client for the subversion revision control system (svn) for linux. If you want to use svn from command line, install subversion.

File Difference and Merging Tools for Ubuntu

I have been using WinMerge in windows as file comparison and merging tool along with TortoiseSVN. Now using TkDiff as it’s alternative in linux. TkDiff has advanced functionalities and graphical interface. It provides file-merge and change-summary facilities, line number toggling (for easier cut & paste) and support for Subversion, RCS, CVS and SCCS. To use from command line, diff is may be the simplest file comparison tool.

Ftp and SSH

Ubuntu installs its default programs for FTP, SSH and many other internet applications. But, I’ve liked gFTP as FTP application because of it’s interface is similar to SmartFTP. And for working with SSH, required nothing. Just open the terminal and use ssh command. Write something like ssh username@example.com and press ENTER.

Testing in IE

One of the important (and painful to me) issue of web development is testing the output in IE. Though IE has no version for Linux, you can install it through wine. Wine is a application that crates a virtual environment for installing windows applications in Linux. After installing wine, you can install any available version of IE from http://www.tatanka.com.br/ies4linux/page/Installation:Ubuntu.

When witting this post, my aim was to help a developer who is thinking to switch to Ubuntu Linux or a newcomer here. You are welcome to add your valuable comment/suggestion for the same purpose.

PHP UUID generator function

Universally Unique Identifier is an identifier standard which is used in a varieties of software construction. When I was writing the RSS Writer class for Orchid, I needed to generate UUID to implement with ATOM id. I searched the web for a simple solution, but didn’t find any that suffices my need. Then I wrote the following function to generate it. I’ve use the standard of canonical format here.

Let’s take a look what Wikipedia has to say about the format of UUID :

A UUID is a 16-byte (128-bit) number. The number of theoretically possible UUIDs is therefore 216*8 = 2128 = 25616 or about 3.4 × 1038. This means that 1 trillion UUIDs would have to be created every nanosecond for 10 billion years to exhaust the number of UUIDs.

In its canonical form, a UUID consists of 32 hexadecimal digits, displayed in 5 groups separated by hyphens, in the form 8-4-4-4-12 for a total of 36 characters.

Enough said. Here is the function.

/**

  * Generates an UUID

  * 

  * @author     Anis uddin Ahmad <admin@ajaxray.com>

  * @param      string  an optional prefix

  * @return     string  the formatted uuid

  */

  function uuid($prefix = '')

  {

    $chars = md5(uniqid(mt_rand(), true));

    $uuid  = substr($chars,0,8) . '-';

    $uuid .= substr($chars,8,4) . '-';

    $uuid .= substr($chars,12,4) . '-';

    $uuid .= substr($chars,16,4) . '-';

    $uuid .= substr($chars,20,12);

    return $prefix . $uuid;

  }

Example of using the function -

//Using without prefix.

echo uuid(); //Returns like ‘1225c695-cfb8-4ebb-aaaa-80da344e8352′ 

 

//Using with prefix

echo uuid(‘urn:uuid:’);//Returns like ‘urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344e8352′

 

See you.

UPDATE : The PHP Universal Feed Generator class, for which I wrote this function is released.

UPDATE : The method of getting random string changed based on Davids comment. (Thanks to David)

How to avoid POSTDATA resend warning

"POSTDATA resend" warning is a common problem when developing web applications. Before discussing about the solution, let’s know what is the problem actually and when it arises.

About the problem :

We see this warning when we try to revisit a page that has accepted POSTDATA using browser’s history mechanism. Usually we do it by browser’s BACK button or refreshing a page. When a page in browser history requested with POST method, the browser thinks this POSTDATA is important to process this page. So, it asks the user if he wants to send the POSTDATA again or not. Different browsers show this warning differently. For example, the images below shows how Firefox and Internet Explorer show this warning.

POSTDATA resend warning in Mozilla Firefox

POSTDATA resend warning in Internet Explorer

Now, If the user accepts the confirmation, the page is reloaded with previously sent data using POST method; otherwise some browsers don’t take any action and some shows a "Webpage has expired" message. In some situations, this re-submitting is useful, but most of the times it’s not expected. It’s more harmful when user accepts it without understanding and causes multiple entries of previously entered data in database.

The easy solution :

The easy solution is simply redirecting. When we redirect a page, the target page is loaded without any POST data that comes with request.

Let’s solve this problem by hand. Say we have 2 pages – A and B. A has a feedback form which submits data by POST request method to B. B inserts the information into database and shows a success message.

Now, if the user try to reload the page by refresh, back button or any other way, browser will show the confirmation message. If user accepts this, the message will inserted again. But after inserting to database, If we redirect to another page C and C shows the success message, the problem will not occur. Because, in the final output to the browser will come from C which didn’t use any POST request data. The code should be something like this:

<?php

if($_POST)

{

  /* Form validation, Inserting to database or anything you want goes here */

  /* Now redirect to another page */

  header('Location: http://yoursite.com/success.php');

}

?>

Extending the solution :

The solution I explained above can show just an static message like "Thanks for your feedback" or "Registration completed successfully" etc. But usually we like to include some information about sender or submitted information in the success of failure message. For example:

Hi Andrew, your registration is successfully completed. An email is sent to you at andy001@yahoo.com with more information.

In the above message, the purple colored information has to be taken from POST data. But the POST data will be lost when redirecting. So, it’s not possible by the above solution.

What we can do to solve this is that we can use SESSION to store those data which we want to display with message in redirected page. Just like this:

<?php

session_start();

if($_POST)

{

  /* Form validatio, Inserting to database or anything you want goes here */

  //Store data to session

  $_SESSION['name']   = $_POST['name'];

  $_SESSION['email']  = $_POST['email'];

  //Now redirect to another page 

  header('Location: http://yoursite.com/success.php');

}

?>

Interactive character limit for textarea using Jquery

For a textbox, character of a field can easily be limited with maxlength attribute. But maxlength doesn’t work for  a textarea. So, It needs an alternate way. For one of my project, I wrote a function for this purpose where I used jQuery. Here I am explaining how I did it.

Let’s look an example of this interactive solution here. 

OK. Now we will make this in 2 easy steps.

1. Import your jQuery file and write the function "limitChars(textid, limit, infodiv)" in the head section of your page.

This function takes 3 parameters. They are:

• textid : (string) The ID of your textarea.
• limit : (num) The number of character you allow to write.
• infodiv : (string) The ID of a div, in which limit information will be shown .

  Here is the function:

 1: <script language="javascript" src="Jquery.js"></script>

 2: <script language="javascript">

 3: function limitChars(textid, limit, infodiv)

 4: {

 5: var text = $('#'+textid).val(); 

 6: var textlength = text.length;

 7: if(textlength > limit)

 8: {

 9: $('#' + infodiv).html('You cannot write more then '+limit+' characters!');

 10: $('#'+textid).val(text.substr(0,limit));

 11: return false;

 12: }

 13: else

 14: {

 15: $('#' + infodiv).html('You have '+ (limit - textlength) +' characters left.');

 16: return true;

 17: }

 18: }

 19: </script>

 1: $(function(){

 2: $('#comment').keyup(function(){

 3: limitChars('comment', 20, 'charlimitinfo');

 4: })

 5: });

 1: function limitChars(textarea, limit, infodiv)

 2: {

 3: var text = textarea.value; 

 4: var textlength = text.length;

 5: var info = document.getElementById(infodiv);

 6:  

 7: if(textlength > limit)

 8: {

 9: info.innerHTML = 'You cannot write more then '+limit+' characters!';

 10: textarea.value = text.substr(0,limit);

 11: return false;

 12: }

 13: else

 14: {

 15: info.innerHTML = 'You have '+ (limit - textlength) +' characters left.';

 16: return true;

 17: }

 18: }

 1: <textarea name="comment" id="comment" onkeyup="limitChars(this, 20, 'charlimitinfo')">

 2: </textarea>

Please let me know if you have an idea to make it better.