Sencha Inc. | HTML5 Apps

Blog

How to Integrate CakePHP and Sencha Frameworks with Bancha

November 13, 2012 | Roland Schütz

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!

There are 7 responses. Add yours.

Robert

2 years ago

Wow, this is some cool stuff!

Stefan Pratt

2 years ago

I had a cake project a year ago and it was quite hard to get it working. Your plugin makes it look so much easier, I’m looking forward to try this for my next project. Is there a way to get in touch with you when I have some questions?

Roland Schütz

2 years ago

Good to hear. You can write in the forums http://www.sencha.com/forum/showthread.php?141983-Bancha-Combining-CakePHP-and-ExtJS or for private questions simply write to .(JavaScript must be enabled to view this email address)

Kazuhiro Kotsutsumi

2 years ago

I translated it into Japanese.

http://www.xenophy.com/extjsblog/4301

Provision: Japan Sencha User Group
http://www.meetup.com/Japan-Sencha-User-Group/about/

Roland Schütz

2 years ago

Cool! Thanks for the work smile

Roberto

2 years ago

What about “Zendcha” ?

There are also a lot of fans of Zend Framework.

Roland Schütz

2 years ago

Hello Roberto,

about 30% of Bancha is php-framework-independent. But the most work is integrating it into the PHP framework. For example we transform all CakePHP data structures in ExtJS an vice versa. We extract information from the CakePHP models and controllers. It’s not possible to simply adopt these things for e.g. Zend framework, there would be a lot of new code necessary. So there probably won’t be a Zend version in near future.

We are currently looking for a partner or company who is interested in a Symfony implementation. This would be our next framework of choice.

Best regards,
Roland

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.