Cracking the Kalexi-code

With the new year well underway and plans for 2013 in full gear, we seem to have a surge of young and eager programming geniuses trying their luck and enquiring for available positions. As part of our recruitment process, applicants are challenged with a series of tasks to test their interpersonal skills as well as crucial technical skills. Along with our continued commitment to helping and supporting the next generation of Zuckerbergs, I thought I’d share a sample task to provide you with an idea of what we generally look for in our applicants.

Being quite the oldy (cue the violins) in the gang of developers, I always prefer to write my own code as opposed to using  an already written solution. I feel it gives me total control from the onset, allowing me to tailor my work exactly to my needs. The obvious accusations of re-inventing the wheel have been known to float around the office with the crosshair firmly fixed on me, but my counter argument is that I’m able to satisfy the exact requirements within time: every time- what more can you ask for?!

Obviously the advent of frameworks such as CodeIgniterLaravel and (crippling) publishing apps such as wordpress and, dare I say, 1&1 websites are reshaping our industry, but I believe knowledge of the core code is essential to really know what you’re doing.

Let’s get on with it then!

The Enigma

When designing, or indeed writing blog articles Kalexiko copywriters and designers are in need of a stock image application where they can search and find images that the team have uploaded. Each image will need to be attributed tags and categories and any other potential attributes (for want for a better word) , to allow for them to be easily found.


1. Setting up the database

With pretty straightforward briefs like this, it’s always a good idea to start from the data. Database skills are an absolute must as database design is core to every thing we do here at Kalexiko. So, without wanting to sound too nerdy, an EER diagram is a thing of beauty and tells the whole story in a single simple diagram (exceptions spring to mind with the behemoth Martin & Co being one them… ahem!). The basic data schema for this problem would be:


2. Creating attributes

As a prerequisite to adding images, the associated attributes need to be entered. This is a very basic CRUD (Create, Read, Update, Delete) task, but it’s important that all our newbies are up to speed with the latest trends and developments. Coming from universities, online hangouts and the haunts of an altogether technological age that is generations younger than myself, I always look forward to be spoilt with lengthy lectures/debates/presentations on the latest “cool” stuff. Some of the latest changes we’re making here is a switch to PDO from the deprecated mysql_query, mysql_fetch_assoc et all statements. So for the purposes of this piece, I’ve demonstrated basic database connections, prepared statements and binding values to uphold database security.


PHP offers three different APIs to connect to MySQL namely mysql, mysqli, and PDO extensions. As “quietly” pointed out by Anthony, one of our junior developers, it is now recommended to use either the mysqli or PDO_MySQL extensions as it has been deprecated as of PHP 5.5.0 and will be removed in the future. Other “angry” PHP guys will tut and murmor that PDO is most certainly the way to go. Here’s the basics of how I used prepared statements, parameters and binding to re-work my ancient methods of database interaction.



To provide some additional “niceties” and more importantly what our UX guys would always recommend, I’ve added some asynchronous posting using AJAX.



Now that all the prerequisite data has been populated, we can now easily get on with the chunkier part of the project to actually add the data.


3. Create upload form

The upload form is a very simple and straightforward HTML form. An important item to note is that its creation uses POST and not GET method and crucially, should  use enctype="multipart/form-data" so it knows that a file will be transferred. Further to this the input attribute should be set to  type=”file”  indicating that the input should be processed as a file. When viewed in a browser, there will be a browse-button next to the input field. Styling these can be quite tricky, so I’ll leave that for Ben, our CSS UX guru, to help you with that in another article!


4. Bind attributes

With the file input sorted, we now provide the ability for  the image attributes, categories and tags, to be bound to the uploaded file. With the relationships set up to ensure a file can be bound to multiple categories and tags, the options to be able to select these becomes a little trickier. This paves the way for me to venture into UX land and for most multiple selections I tend to choose (pardon the pun!), chosen.js built by the guys at Harvest.Taken from the horse’s mouth; “Instead of forcing your users to scroll through a giant list of items, they can just start typing the name of the item they were looking for. Non-matching entries are removed from view and choices can be selected using enter or a mouse click.”


5. Upload data

With the form in place, we’re now ready to delve into the PHP to process our upload. With PHP magically handling so much for you, in its basic form; this really is a simple task, but there be pitfalls I tell thee!

When a file is uploaded it is first given a temporary filename and then put in the temporary directory of your web server. This data, with associative indexes to the pieces of information we need, is held within the global PHP $_FILES array The first parameter is the form’s input name and the second index can be either “name”, “type”, “size”, “tmp_name” or “error”. For example, these are referenced, as any other array, $_FILES["file"]["tmp_name"] – the name of the temporary copy of the file stored on the server.

This is a very simple way of uploading files. For security reasons, you should add restrictions on what the user is allowed to upload such as filesize, extensions and even source. When all checks are passed we copy the file to a permanent location using the PHP’s move_upload_file() function.

The move_uploaded_file() function takes two parameters, seen below contained in parentheses and separated by a comma.  The first parameter tells the function where to get the file – the temporary location, and the second is the destination of where we want the actual file to be stored. Quite often we simply reference the ‘name’ associative index of the $_FILES array, but when we start looking at advanced storage solutions this will obviously change to something far better structured.



Could you crack the Kalexi-code?

In short, the upload is pretty much a simple task with scores of working (and many not so) examples littered around the Internet. At Kalexiko what we look for in such tasks from all our potential and existing team, is the ability to keep up with everything current and evolving in trends and technology. Using PDO at a strictly development level and newer techniques such as chosen.js for front end UX are just two examples of the type of advances we like to look for.


So, young protege. If you think you have the technical wizardry as well as the creative flair to astound us and maybe even show us a couple of new tricks, we would love to see you exhibit your talents.


Next time…

If we don’t meet in time for you woo us with your coding genius, here’s what I have install (another pun, I can’t resist) for extensions to this post: Storage and CDNs, HTML5, image searching, image META data (EXIF, IPTC and XMP), image manipulation.