This technical article hilights one the famous ideal goal we all want to achieve : scaffolding, CRUD, BREAD, call it what you want, all we want is to get rid of repetitive sql query writing.  Zend framework provides powerful data abstraction  and here are a few tips to use Zend_DB_Table to its best. Of course this article assumes you have an idea of MVC development with Zend Framework.

Why are we doing this ? in the course of writing ajax actions, we needed our controller to react to any POST provided by specific forms : whatever the fields in the form, we want them to be saved to our table. Code below is a specific implementation of a controller that responds to specific ajax queries. Please bear in mind that it is only provided as an example of generic query action. Other protions of code are not optimal, such as viewless actions in the renderAjax method, not the best.

Controller Implementation

Our controller is a simple Zend_Controller_Action. We load the database model at init time, and specify the primary key  (node parameter) in a class variable. Note that our data model is also stored in a class variable.

Quick look at the model

at this stage I specify on particular function I like to implement in Zend Framework Models : the primary key ! Other functions of the model could include add, delete and update : we’ll see below that our generic data admin prefers to do the job in the controller.

Back to the crontroller : the renderAjax method is a quick one that stops the view from being rendered. If you are a specialist of Zend Framework you will notice that this can be better performed with the contextSwitch action helper. Use the code below only for testing, for production you’d rather spend a few minutes learning about helpers !

Action !

Listing records is the first thing you want to look for when working at data scaffolding. the code below reads metadata from the table, lists all columns from your table, fetches data and returns them as JSON (ready for extjs grid display, by the way).

The next step would be to add records : we have not worked on this yet so you’ll want to try this with tables that have a few records in them. The method below works with two types of data sets.

1. Multiple column form submit :this would be the classical response to a from submission, where each field bears the NAME of the database field, and obvisouly the value is the data. Such forms are transmitted via FORM array with key / value pairs. We read the POST (getRequest->getParam) that match metadata built from the database table column array. We then provide a clean arrData array of new data for the update() method of our Zend_Db_Table instanciation. This method takes two arguments: the first is the associative array mapping columns to change to new values to assign to these columns. The second is the where clause that we built from the primary key
2. Single column submit : the technique is useful when working with extjs in place editing, where one piece of code can edit multiple fields. The field variable contains the database column name and the value is the data. We add a check that matches the field against database table column names

A good start for extjs development : Hope this is useful for you !!

The image button on the tinymce instance of silverstripe html text fields is really nice and well layed out : it gives editors one of the best text / image integration, with a minimum user actions that’s both powerful, intuitive, and reactive thanks to AJAX calls to the folder structure.

One small drawback is that it comes with one small feature that can be annoying at times, especially when you’re looking for inserting images without resampling them, especially for transparent images or tight image integration / quality that Silverstripe resampling functions (PHP based) cannot match (check out the original image hack).

Image size limit feature

In silverstripe, when you select a big image, width and height are automatically resized to a maximum of 600 pixels. Quick hackers might want to deactivate this feature by commenting the resize algorithm in cms/code/ThumbnailStripField.php (lines 73/80 of 2.3 rc2).

But for those who want the best of both worlds (enjoy limitation AND allow original size), here is a hack that will allow editors to choose between the limited image size (max 600, very useful for huge uploads straight from high definition camera) and the original size (very useful for reasonable image size, like example here of 800). Next trick would be to allow editor to type in width and height with automatic calculation of the image proportion. We’re getting closer to photoshop indeed.

Read the rest of this entry »

Ever experienced trouble uploading files to wordpress (popular opensource blog platform), silverstripe (popular my favourite opensource CMS), or any application using swf upload ? Weeks after the bug has been identified, I have to admit I am wondering about the reactivity of SWFupload team : the version that fixes the bug was out a few days later but is currently still beta. And this is not some minor bug, all platforms that upgraded to flash 10 lost their ability to upload files ! Anyway, no doubt swfupload  version 2.2 final will be out before the end of the year, in the meanwhile you can try NAS UPLOADER, nice alternative that does the job too. Big plus, comes with a nice layout. Big minus, you can’t stop uploading after you’ve started and finally decided your file is too big to go through your small ADSL upload capacity…

If you’ve tried the impromptu jquery plugin, you’re probably left with some frustrating feeling, finding that  such an easy solution for javascript alert, confirm and prompt replacement, could be enhanced by a nicer graphic design. Replacing the “X’” letter by a now standard close button, just like can be found on facebox, could do the job. But then why not benefit default facebook style layout and use the whole facebox plugin, or go for another stylish modal jquery plugin, such as jModal… A few lines of javascript code will easily replace the prompt function, just like the lines of code from the example below.
Read the rest of this entry »

Who has code completion, CSS classes browser, Javascript function browser, PHP code browser, HTML elements browser, all together in a single interface that covers this multiple array of features in a perfectly usable environment  ?  As far as I’m concerned, the battle between Aptana and Dreamweaver is over : the eclipse extension known as Aptana Studio Community Edition performs incredibly well for me after a few months of learning which plugins are best and where different perspectives stand. The fact that Ajax development is covered does a lot : check out Spket extension, I have tested it in Aptana and it does a great job completing code with available  variables and methods from EXTJS . To be faire, Spket is available for Dreamweaver too.

remember our quest for the ideal select box plugin ? seems that Jquery can be proud to deliver one of the best select dropwon box on the opensource market. Select Box Factory covers an impressive list of options : fully skinnable, options images, list filter, first letter selection… Good work.

silverstripe is getting serious there : experienced website developers will be delighted to try out a new version of the famous Gallery extension that implements in site image editing for text captions, reordering and item deletion. Novice users will not get lost as this extension builds on what’s popular, with Facebook-style interface for adding captions after insite image upload. the result is wonderful as it implements one of the best modal galleries out ther, based on (commercial) Shadowbox jquery gallery plugin. Another guy is working on a Nyromodal implementation (because it’s GPL) and no doubt next time I need the stuff I’ll work on porting the front end to my own choice of jquery modal gallery plugin.

Javascript libraries

While EXTJS 3.0 is on the way with a roadmap setting deadlines for early 2009, Jquery continues its path on the way to serious lightweight alternative to the massive EXT : JX extension for Jquery includes the viewport paradigm on which relies every EXT JS application.

Web based interfaces

In spite of huge progress and impressive use of ease, Jquery is not there yet : for the development of applications many developers have chosen the exhaustivity of EXT JS. Have a look at google code hosted project in development : ecartcommerce, CMS jimw, both ext js and zend framework based. In the world of content management systems, mysource is making the news with a new video that demonstrates inline editing, and other exciting Rich Application features.

• Ext examples
• Enhanced Accordion extension
• ExtJs Livegrid extension
• Saki’s extjs page (examples and extensions)
• File explorer view (grid extension)
• file explorer with  PHP code
• swfupload extension
• Last but not least, the ux repository

What’s nice about internet technologies is that they always get better. But this can also be a problem, and Flash 10 complies to this rule with a new security feature that impacts all CMSes with advanced file upload ability, specifically those using the swfupload component : wordpress and silverstripe customers have reported inability to upload files after upgrading flash from 9 to 10 ! Thank god the bug is fixed with the new version of swfupload : go ahead and start copy and paste operations on your websites.