CodeIgniter E-commerce application E-mail
Thursday, 09 April 2009 21:32


I finally incorporated the Pkstore database into my photoblog database, which is a Pixelpost installation.  It was relatively simple.  The steps involved were:

  • Update references to the new database throughout the application
  • Change references to the new field names
  • Copy the tables that store the product sizes available and the product-size relationships to the Pixelpost database

The categories and product-category relationships were easily updated because they are stored in Pixelpost the same way they were stored in the Pkstore database.  So overall it was a pretty quick and painless process.

Now when I add a new picture to my photoblog, it automatically gets added to Pkstore as well.


I've updated the administration dashboard to accomodate viewing only.  Use demo/demo as username/password to view the dashboard.


I've launched a beta version of an e-commerce application I've written in PHP using the CodeIgniter framework at Pkstore.


The product on the site is my own photos, from my photoblog.

Some of the features of CodeIgniter I am using, alongside the core, are:

  • Form helper
  • URL helper
  • Image_lib library to generate large thumbnail for product page
  • Session helper

Some functionality I implemented:

  • Prints can be ordered in different sizes.  When a new print is added, the shopping cart checks whether a particular print in a particular size is already in the shopping cart.  If so, the count for the existing entry is updated to include the new entry, otherwise a new entry is created in the shopping cart.
  • Shopping cart can be updated both from the product pages as well as the cart itself.
  • Not all prints are available in all sizes.  The database stores which prints are available in which sizes and presents the appropriate choices in a drop-down menu.
  • Prints can belong to multiple categories.  Again, the database stores which categories a print belongs to and displays it in all appropriate views.

There is also an administrator dashboard, but at the moment I cannot provide guest access to it.  That will be changing soon.

Security measures in use:

  • Encryption of session data
  • Validation of form data to ensure it is the proper variable type and length

I debated whether to generate product thumbnails dynamically or store them on the server.  After some research I discovered it is much more efficient to store them locally, especially since they won't change once they are generated.  Hard drive space is cheap and dynamic generation is computationally expensive, so it's a win-win situation.

The Prototype JavaScript library is used for the image viewer as well as remove and update functions in the shopping cart, which use AJAX.

The design is my own, and, as always, is table-less CSS/XHTML.

Functionality I will be adding:

  • User groups for administration
  • Making dashboard accessible for guests to view (done)
  • Dynamic retrieval of product information from photoblog database (done)

Ultimate web trends map E-mail
Sunday, 05 April 2009 10:37

I came across this visual representation of the web's most influential domains on Digg.

Web trends map

Tags: web trends  map  art  internet  
jQuery, preloaders, and event delegation E-mail
Sunday, 29 March 2009 00:37

I set out this morning to create a pre-loader for my domain home, Pranshuarya.com.  Since I"m already using jQuery on the site and I feel comfortable with it, it only seemed natural to try to do it using jQuery.  I searched around for a while but nothing satisfactory was to be found.  Eventually I came across a script called Max's AJAX website preloader.  This pre-loader uses standard JavaScript to retrieve PHP and HTML content from a secondary file which it appends to the <body> tag of the index.html file where the pre-load animated GIF is being displayed.

It wasn't too much work to convert and compact the code using jQuery.  For my particular case the code went from:

// Get the HTTP Object
    function getHTTPObject(){
       if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
       else if (window.XMLHttpRequest) return new XMLHttpRequest();
       else {
          alert("Your browser does not support AJAX.");
          return null;
    // Change the value of the outputText field
    function setOutput(){
       if(httpObject.readyState == 4){
          document.getElementById('myBody').innerHTML = httpObject.responseText;

// Implement business logic
    function loadSite(){
       httpObject = getHTTPObject();
       if (httpObject != null) {
          httpObject.open("GET", "content.php", true);
          httpObject.onreadystatechange = setOutput;
    var httpObject = null;

to the following:
function loadSite(){
     jQuery.get("content.php", function(data) {

After that it came down to adding the loadSite() function to the jQuery(document).ready() function along with BlockUI:
jQuery(document).ready(function() {
      message: '<img src="images/ajax-loader.gif" />',
      css: {
       width: '100px',
       backgroundColor: '#000',
       border: '0',
       top: '40%',
       left: '45%'

One tricky problem was the fact that the elements that events were to be bound to weren't created yet, since they would appear in the document after the content.php file was loaded.  To overcome that I used the Live query plugin for jQuery for easy event delegation:

jQuery('#switcher_wrapper > div').livequery('click', function() {

and that was all it took to add a simple pre-loader image (courtesy of Ajaxload.info, by the way), to a website.

Flash portfolio ready E-mail
Monday, 23 March 2009 20:05

Finally, after delaying some time because I was more focused on working with other technologies, I've got a Flash version of my portfolio up and ready.  I didn't design it because I was more interested in the development side of things, because I wanted to incorporate the same XML data-files into it that power the standard (JavaScript) version of my portfolio.

Pthesis Flash version

I found a nice template for free at Flashmoo.com, along with a great scrollbar add-on component for Flash, which was simple to incorporate into the template.

Google on performance and design E-mail
Saturday, 21 March 2009 15:04

News article on a senior designer at Google who's quitting because of not having enough latitude to design in the face of performance considerations.  From his own blog (bold mine):

When a company is filled with engineers, it turns to engineering to solve problems. Reduce each decision to a simple logic problem. Remove all subjectivity and just look at the data...that data eventually becomes a crutch for every decision, paralyzing the company and preventing it from making any daring design decisions...

Yes, it's true that a team at Google couldn't decide between two blues, so they're testing 41 shades between each blue to see which one performs better. I had a recent debate over whether a border should be 3, 4, or 5 pixels wide, and was asked to prove my case. I can't operate in an environment like that. I've grown tired of debating such minuscule design decisions...

Separately, this article talks about the kind of testing Google does to improve the usability of its products.

Noteworthy points:

  • Users asked to be shown more search results per page, yet when more results were displayed, people searched less overall because of the performance overhead of the additional data.
  • When the company trimmed the Google Maps page size by 30%, the company started getting about 30% more map requests.
  • "Split A/B testing also led Google to refine exactly how much white space to pad around its logo and other elements on the search results page. And it changed from the industry practice of a pale blue background behind ads to a pale yellow background. People not only clicked on ads more, they also searched more in general..."

PHP frameworks E-mail
Wednesday, 18 March 2009 19:28


It's frustrating when the code that accompanies a book doesn't work.  I've gotten through half of the book and suddenly there's a problem that's mentioned on the book's forum - but without a solution.  The reason I prefer studying with books over tutorials and such is because they're structured and organized in one place, so it's disappointing when they just don't work.  I encountered the same problem in college with math errors in textbooks.  Errata are helpful but sometimes even those are incomplete!

Having seen what's possible with JavaScript frameworks like jQuery and Prototype, I set my eyes on trying out a PHP framework.  I did some reading on CakePHP, CodeIgniter, and Symfony, along with Smarty, which isn't a framework but a template engine.

I've chosen to dive in with CodeIgniter, and my tool of choice will be the following book:

Professional CodeIgniter

I chose CodeIgniter over the others mainly because of its simplicity in getting started and also its speed.  Apparently Symfony is powerful but has a steep learning curve, and CakePHP doesn't have as good documentation as the other two.

Internet Explorer resize bug E-mail
Thursday, 12 March 2009 10:15

Internet Explorer 6 and 7 have a bug where resizing a window leaves some elements fixed in position.  Specifically, elements with the style property position:relative are affected.

I came across many solutions to the problem after a search for "ie resize".  Most of them involved JavaScript.  However, I was lucky enough to find the simplest solution of all here: just add position:relative to the body element.  That's it!


Page 13 of 18