Category Archives: how-to

Rounded thumb image with CSS 3

In modern Mobile apps, RIA or fancy websites like to display thumb images with a little rounded corners. We can do it on web with very little effort using a little CSS3 technique.

Rounded thumbnail

Just 3 simple 3 steps:

  1. Instead of using img, use a placeholder like a or span. Make it display:block.
  2. Place the image as background image of this placeholder.
  3. Set a border radius and a little shadow for the placeholder.

Sample CSS and HTML code:

<style type="text/css">
	a.user-image {
		background: transparent no-repeat top left;
		display: block;
		text-indent: -999em;
		width: 50px;
		height: 50px;
		border-radius: 5px;
                box-shadow: 0px 0px 3px #666;
	}
</style>

<a class="user-image" href="http://www.facebook.com/ajaxray" style="background-image: url(http://graph.facebook.com/667896332/picture)" title="Visit Anis's profile">Anis Ahmad</a>

<!--
Post: http://ajaxray.com/blog/rounded-thumb-image-with-css-3
Demo: http://ajaxray.com/Examples/cropped-thumb.html
-->

See code on Gist.

You’re done! Check the live demo.

Let's do with Drupal – Simplified Admin Panel

As you (if you’v at least installed and explored Drupal) know, Drupal‘s Admin panel is not comfortable for clients. It’s mostly developer centric and not similar to other common content managing panels. But, sometimes clients may need to manage some type of content. Recently I’ve faced this situation and made a simple, generic admin panel that only offers managing selective contents. Now I am going to tell you the how I’v done it. If you follow the steps, it should take hardly 30 minutes.

Continue reading

Setting up Database testing with Kohana UnitTest module

Kohana Unittest module has made testing in Kohana v3 easy and fun. Lysender wrote a cool, straight forward post about how to set it up and running. I’ll just talk here about how I have set up database testing with Kohana Unittest for my personal use. Not saying “How to set up”. Because it’s obviously not the best way to do this.

Kohana Unittest

The important thing I need to ensure for testing database is, It’s in a known state before running a test. And, changes on database made by one test will not impact on another test. So, I’ll have a separate database for testing. Which will be loaded with a predefined dataset before running each test and will be truncated after test is done. Also, I have to be careful about that, my models are executing quires on test database in testing environment. Here is how I’ve done it? -

Continue reading

Extending Zend Form Element to create customized Phone number field

Generally, Phone numbers has different parts. Such as, country code, operator code and subscriber number etc. When taking Phone number as user input, we can worn users about phone number format by setting a hint/description and can validate using Regular Expression. But, for better usability, along with hints, some web applications provide separate (generally 3) text fields for different parts of phone number. Also, some of them keep a separator, ‘-‘ or ‘#’ between this fields.

Now, if we try provide this feature in Zend Form, that’s possible. We can create three individual Zend_Form_Element_Text objects and join there value together to make the phone number. But, in this case, validating them together is a hassle. Again, placing them inline in the form and putting separators needs some Decorator magic. What if we can make it simply another Zend Form Element which renders three text box (optionally with separator)? And consider their value jointly and validate them together using ordinary Zend Validators? Lets try.

What we are going to make?

Let’s visualize our Phone number field first and list what we want from it.

  • It’s Simple. It’s rendering, validation everything is like any other ordinary Zend From Elements.
  • It prints 3 text boxes for different parts of Phone number.
  • When we validate it or take it’s value, the input of these three boxes jointly will be considered as the value.
  • We can set a separator character to be printed between text boxes.
  • We can include/exclude this separators from value.

Continue reading

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.

Continue reading

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)

Continue reading

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!

php_speedy_logo_medium

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 :P

Continue reading

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 :

Category icons in "Post new topic" form

Image#1:  Category icons in Post new topic form

Category icons before topic title in forum page

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

FireShot Pro capture #5 - 'User Contributed Deals _ Television is poluting our culture' - local_deals_com_forum_viewtopic_php_id=5

Image#3: Category icon in topic page

FireShot Pro capture #7 - 'User Contributed Deals _ Search results' - local_deals_com_forum_search_php_search_id=1345131291

Image#4: Filtering by category

Continue reading

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:

<span style="color: #606060">   1:</span> <span style="color: #008000">/**</span>
<span style="color: #606060">   2:</span> <span style="color: #008000"> * Create thumbnail of an image</span>
<span style="color: #606060">   3:</span> <span style="color: #008000"> * </span>
<span style="color: #606060">   4:</span> <span style="color: #008000"> * @author    Anis uddin Ahmad (http://www.ajaxray.com)</span>
<span style="color: #606060">   5:</span> <span style="color: #008000"> * @param     string    Path of source image</span>
<span style="color: #606060">   6:</span> <span style="color: #008000"> * @param     string    Destination path of thumbnail</span>
<span style="color: #606060">   7:</span> <span style="color: #008000"> * @param     number    Width of thumbnail</span>
<span style="color: #606060">   8:</span> <span style="color: #008000"> * @param     number    Height of thumbnail</span>
<span style="color: #606060">   9:</span> <span style="color: #008000"> * @param     number    (optional) thumbnail image quality </span>
<span style="color: #606060">  10:</span> <span style="color: #008000"> */</span>
<span style="color: #606060">  11:</span>
<span style="color: #0000ff">private</span> <span style="color: #0000ff">function</span> _createThumbnail($sourcePath, $destPath, $w, $h, $q = 100)
<span style="color: #606060">  12:</span>  {
<span style="color: #606060">  13:</span>     $thumb = <span style="color: #0000ff">new</span> Thumbnail($sourcePath);
<span style="color: #606060">  14:</span>     $thumb-&gt;resize($w, $h);
<span style="color: #606060">  15:</span>     $thumb-&gt;save($destPath, $q);
<span style="color: #606060">  16:</span>  }

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?