I spent some time working with a few of the “cool” features of CakePHP this week.
I again noted that Cake is a capable PHP framework in ways that aren’t obvious at first glance. In fact, I found myself fairly impressed by their AJAX and Script.aculo.us support.
For the particular application I was working on, a drag & drop interface was going to be particularly handy. Having spent time previously implementing drag & drop interfaces with Script.aculo.us, Yahoo UI, and Rico, I was hoping the process would be a bit easier using Script.aculo.us as an extension on top of Cake and I was pleasantly surprised with the results. I walked away with a functional drag & drop interface in an amazingly short amount of time with very little coding.
Important Note: A CakePHP beginner should be able to get this tutorial working, but I am still assuming that you have a basic understanding of Cake in order to implement this tutorial properly. If, not please see this article to get started.
In this example, we’ll use a very simplified page of widgets that are “draggable” to change their order and save the changes to a MySQL database in real time.
Make sure you have a recent version of CakePHP (I used version 1.1.14.4603). The document root of your web server should probably be set to:
SERVER-PATH/CAKE-ROOT/app/webroot/
Now, you just need to grab the latest stable version of Script.aculo.us (I used v1.7.0 for this example). For my set up, I extracted the files in the following manner:
CAKE-ROOT/app/webroot/js/scriptaculous/lib/prototype.js
CAKE-ROOT/app/webroot/js/scriptaculous/src/scriptaculous.js (and remaining “src” files)
Also, for this example, I used a MySQL database called “widgets” with a table called “widgets” that contained three fields: “id”, “title”, and “order”.
Here’s The Code:
———————————————————-
Widgets Controller
[ --controllers/widgets_controller.php ]
class WidgetsController extends AppController
{
var $name = ‘Widgets’;/** These are the needed helpers **/
var $helpers = array(‘html’, ‘javascript’, ‘ajax’);
/** Implements the index view **/
function index() {
$this->pageTitle = ‘Widgets Index’;
//status message to be used later
$this->set(‘status’, ‘Widget Ordering Succesfully Saved!’);
//assign widgets to view sorted by the ‘order’ field
$this->set(‘widgets’, $this->Widget->findAll(null,null,’order’,null,null));
}
/** Receives ajax request from index **/
function order()
{
//loop through the data sent via the ajax call
foreach ($this->params['form']['widgets'] as $order => $id)
{
$data['Widget']['order'] = $order;
$this->Widget->id = $id;
if($this->Widget->saveField(‘order’,$order)) {
//we have success!
} else {
//deal with possible errors!
}
}
$this->autoRender=false;
}
}
?>
/*
The data comes to your order action in this format:
Array (
[0] => 19
[1] => 16
[2] => 7 )
where the array indexes ([0],[1],[2]) are the “orderings” and the array values (19,16,7) are the actual “id’s” of each question.
*/
Widget Model
[ --models/widget.php ]
<?php
class Widget extends AppModel
{
var $name = ‘Widget’;
}
?>
Index View
[ --views/widgets/index.thtml ]
<?php
if (isset($javascript)) {
echo $javascript->link(‘scriptaculous/lib/prototype.js’);
echo $javascript->link(‘scriptaculous/src/scriptaculous.js’);
}
?>
<div id=”status” style=”display: none;”><?php echo $status; ?></div>
<ul id=”widgets”>
<?php foreach ($widgets as $row): ?>
<?php echo ‘<li id=”widget_’ . $row['Widget']['id'] . ‘”>’ . $row['Widget']['title'] . ‘</li>’; ?>
<?php endforeach; ?>
</ul>
<?php echo $ajax->sortable(‘widgets’, array(‘url’=>’order’, ‘before’=>”Element.hide(‘status’);”, ‘complete’=>”Element.show(‘status’);”)); ?>
———————————————————-
Take special note of the “before” and “complete” ajax helpers to show and hide the status message. Read more about them here under the heading “AJAX”.
And that’s it! You now have a drag & drop interface that will serialize your form data and save it to the database quickly and easily. Isn’t that a little too easy?
A few important side tips:
- Use Firebug to do your debugging. It’s an invaluable tool that you should use if you don’t already.
- For debugging Cake errors, make sure you have debug level 2 set in [core.php] for some additional help.
If you have questions or comments about this tutorial, feel free to leave a comment at the bottom and I’ll do my best to answer what I can. Remember, this was intended to be a basic tutorial with as much elegance as possible while still remaining clear to differing skill levels. I’m also fairly new to CakePHP myself, so feel free to offer suggestions to make the code better!
I was going to offer a zip download of the source code, but I’d rather you type it out or copy & paste– maybe you’ll learn something in the process.