How to Integrate CakePHP and Sencha Frameworks with Bancha

Guest Blog Post

Introduction

If you develop Ext JS applications with a lot of data, you’ve probably spent a lot of development time on data transformation and synchronization with your back-end system. There are lots of ways to transfer data. For our systems, we chose Ext.Direct. Ext.Direct is a specification from Sencha and is implemented in the Ext JS and Sencha Touch libraries.

The Starting Point

We are big fans of CakePHP, a lightweight Rapid Development PHP-MVC-Framework. We decided to build Bancha, which extends CakePHP to provide all data, specifically in the Ext.Direct format. Bancha is doing all of the necessary data transfer, marshalling, and Dispatcher-Enhancements. It serves the data Cake-style inside CakePHP, and in Ext JS-format for the front-end.

Any controller function can now be exposed to JavaScript simply by adding @banchaRemotable as a phpdocs comment.

Model Mapping

The extension above is really handy and saves a lot of valuable time. However, we weren’t satisfied, as we were still doing repetitive tasks such as defining model structures, relationships and validation rules, both in PHP, then in JavaScript. Implementing and relying on human follow-through to keep these systems up-to-date in a team environment increases the risk of human error.

Bancha solves this problem by automatically parsing the CakePHP model schema and creating the correlating Ext JS and Sencha Touch schemas on the fly.

Automatic C.R.U.D. Support

Our next step was to improve on automation by automatically providing full C.R.U.D support for all models where the BanchaBehavior is enabled. The controllers can automatically be created using the CakePHP console, or just add five lines of code to your existing controller classes to enable the automatic C.R.U.D. support. With this enhancement, you can achieve automatic C.R.U.D. support for any CakePHP model, without needing to implement additional JavaScript.

Bancha.Scaffold

One of the biggest strengths of CakePHP is a focus on rapid application development. We took that concept to heart and implemented scaffolding within Bancha, reducing overall development and testing time.

Note: This library is also available stand-alone under the MIT license, see http://scaffold.banchaproject.org/

Example:

Now, let’s go through a typical rapid development process with CakePHP. First, we will define the data structure by creating our database tables for a bookstore:

CREATE TABLE `books` (
        `id` INT(11) NOT NULL AUTO_INCREMENT,
        `title` VARCHAR(32) NOT NULL,
        `author` VARCHAR(32) NOT NULL,
        `publish_date` DATE NOT NULL,
        PRIMARY KEY (`id`)
    )

Next, we’ll start the process in CakePHP to create the first prototype of our application. CakePHP provides a command line tool to “bake” models, controllers and views based on the database schema. The Bake console can create any of CakePHP’s basic ingredients: models, views and controllers. While you can limit it to skeleton scaffolding, CakePHP’s Bake can create a fully functional application in minutes. With Bancha, we extend that behavior to automate C.R.U.D. support.

To scaffold the entire M.V.C. for our books table, we use Bake. At the shell, type Console/cake bake all; as a template, we select “bancha”.

Now, we can setup Bancha to expose the model by adding a line into the model: public $actsAs = array(“Bancha.BanchaRemotable”);.

You’re done — well, at least on the CakePHP Bake side. Your back-end is configured and generated, ready to test and modify by adding business login to the controllers.

The JavaScript Part

Now, we will scaffold a book management page.

Bancha provides a simple interface to create models. These models get all fields, validations and associations and a fully configured proxy from the server.

With the onModelReady method, we can instruct Bancha to load the model definitions from the server (if not yet available) and create the CakePHP Book model in Ext JS with the following command, where the second argument is a callback:

Bancha.onModelReady(‘Book’, function() {...})

Bancha will do the rest. When it is complete, you can move forward with writing additional Ext JS code.

Bancha.Scaffold helps you rapidly generate grid and forms from minimal input. We’ll bring all of the pieces together in one main page of our new application:

Bancha.onModelReady(‘Book’ function() {
        Ext.create('Ext.grid.Panel', {
                scaffold: Bancha.model.Book, // Bancha.Scaffold will take all information from the model
                title: 'Book Management Grid with full CRUD support',
                renderTo: Ext.getBody(),
                frame: true
        });
    });

This was a first glance at Bancha. For more information on Bancha go to banchaproject.org where you can find an extended version of this tutorial and much more.

Bancha is available under a dual license model, with both open source and commercial license options.

Happy coding!