Easy trees with Tree Behavior in CakePHP

This tutorial shows how to use the Tree Behaviour in CakePHP.

The only requirement is a working CakePHP application. You can refer to this post to help you get one.

Step 1: Create the table in your database

First we need to create a table to store our tree. To keep things a bit generic we create a simple table called 'Nodes'. There are various ways to extend this table with other functionality or data, but that is beyond the scope of this tutorial.

Run the following SQL code to create a table called Nodes:

CREATE TABLE `nodes` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `parent_id` int(11) unsigned DEFAULT NULL,
  `lft` int(11) unsigned DEFAULT NULL,
  `rght` int(11) unsigned DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

The Tree Behaviour needs at least the fields parent_id, lft and rght, and they should all use type int().

Step 2: Create the model

To use table in the application we have to create the model. In this case the file will be app/models/node.php.

<?php

class Node extends AppModel {
    var $name = 'Node';
    var $actsAs = array('Tree');
}

?>

The model Node is defined as any other model in CakePHP. With the line var $actsAs = array('Tree'); we tell CakePHP to use this model as a tree.

Step 3: Create the controller

The controllers task is to take care of handling the data (adding, showing, updating, deleting, and more). At first we will create a controller with 2 functions, one called 'index' to display the tree and the other called 'add' to add items to the tree. The controller will be app/controllers/nodes_controller.php.

<?php

class NodesController extends AppController {

    function index() {
        $nodelist = $this->Node->generatetreelist(null,null,null," - ");
        $this->set(compact('nodelist'));
    }

    function add() {
        if (!empty($this->data)) {
            $this->Node->save($this->data);
            $this->redirect(array('action'=>'index'));
        } else {
            $parents[0] = "[ No Parent ]";
            $nodelist = $this->Node->generatetreelist(null,null,null," - ");
            if($nodelist) {
                foreach ($nodelist as $key=>$value)
                    $parents[$key] = $value;
            }
            $this->set(compact('parents'));
        }
    }
}

?>

The index function is pretty straightforward, it uses the generatetreelist function to generate a formatted tree, and return it in an array.

The Add function is a bit more complex. It first checks if it received any data. If it did, it saves the data to the database and then redirects to the index again. If the add function did not receive any data, it will create the array needed to populate the 'Parent' select box in our Add screen (see below).

Step 4: Create the views

We now create 2 view files in the folder app/views/nodes/, which needs to be created first.

The file app/views/nodes/index.ctp is used to display the tree:

<?php

echo $html->link("Add Node",array('action'=>'add'));

echo "<ul>";
foreach($nodelist as $key=>$value){
    echo "<li>$value</li>";
}
echo "</ul>";

?>

In the above code we first create a link to our 'add' functionality. After that we start a new Unordered list and fill it with the data from the tree.

For adding new items to the tree we will use the file app/views/nodes/add.ctp

<?php

echo $html->link('Back',array('action'=>'index'));

echo $form->create('Node');
echo $form->input('name',array('label'=>'Name'));
echo $form->input('parent_id',array('label'=>'Parent'));
echo $form->end('Add');

?>

First there is a link back to the index. After that a new HTML Form of the type Node is create. It then add two fields, one for the Node name, the other to select the parent of the new node. The last function add the submit button with the text 'Add'.

---

You should now be able to show your tree, and add nodes to it. Actually you first need to add a node because there is nothing to display yet. In the next step we will add some more functionality to it, but this seems a good moment to check if it all works so far :) ...

---

Step 5: Adding more functionality

In this step we will add the posibility to edit and delete the nodes, as wel as move them up and down. We do this by adding some links to the Index page, add the edit view and add some functions to the controller.

First we update the file app/views/nodes/index.ctp so it looks like this:

<?php

echo $html->link("Add Node",array('action'=>'add'));

echo "<ul>";
foreach($nodelist as $key=>$value){
    $editurl = $html->link("Edit", array('action'=>'edit', $key));
    $upurl = $html->link("Up", array('action'=>'moveup', $key));
    $downurl = $html->link("Down", array('action'=>'movedown', $key));
    $deleteurl = $html->link("Delete", array('action'=>'delete', $key));
    echo "<li>[$editurl|$upurl|$downurl|$deleteurl] $value</li>";
}
echo "</ul>";

?>

The part that loops trough the nodelist is changed here. We define 4 URL's for the needed actions, and put them all in front of the Node name, seperated by a pipeline character. This is not the most elegant solution, but it will get the job done.

Next we add a view for the edit functionality by creating the file app/views/nodes/edit.ctp:

<?php

echo $html->link('Back',array('action'=>'index'));

echo $form->create('Node');
echo $form->hidden('id');
echo $form->input('name');
echo $form->input('parent_id', array('selected'=>$this->data['Node']['parent_id']));
echo $form->end('Update');

?>

This view is mostly the same as add.ctp. Two differences: the edit view needs a hidden field called 'id', and the parent_id selectbox has a 'selected' parameter, which selects the right parent when in Edit mode.

In the last step we add four functions (edit, delete, moveup, movedown) to the Controller, app/controllers/nodes_controller.php, so it will look like this:

<?php

class NodesController extends AppController {

    function index() {
        $nodelist = $this->Node->generatetreelist(null,null,null," - ");
        $this->set(compact('nodelist'));
    }

    function add() {
        if (!empty($this->data)) {
            $this->Node->save($this->data);
            $this->redirect(array('action'=>'index'));
        } else {
            $parents[0] = "[ No Parent ]";
            $nodelist = $this->Node->generatetreelist(null,null,null," - ");
            if($nodelist)
                foreach ($nodelist as $key=>$value)
                    $parents[$key] = $value;
            $this->set(compact('parents'));
        }
    }

    function edit($id=null) {
        if (!empty($this->data)) {
            if($this->Node->save($this->data)==false)
                $this->Session->setFlash('Error saving Node.');
            $this->redirect(array('action'=>'index'));
        } else {
            if($id==null) die("No ID received");
            $this->data = $this->Node->read(null, $id);
            $parents[0] = "[ No Parent ]";
            $nodelist = $this->Node->generatetreelist(null,null,null," - ");
            if($nodelist) 
                foreach ($nodelist as $key=>$value)
                    $parents[$key] = $value;
            $this->set(compact('parents'));
        }
    }

    function delete($id=null) {
        if($id==null)
            die("No ID received");
        $this->Node->id=$id;
        if($this->Node->delete()==false)
            $this->Session->setFlash('The Node could not be deleted.');
        $this->redirect(array('action'=>'index'));
    }

    function moveup($id=null) {
        if($id==null)
            die("No ID received");
        $this->Node->id=$id;
        if($this->Node->moveup()==false)
            $this->Session->setFlash('The Node could not be moved up.');
        $this->redirect(array('action'=>'index'));
    }

    function movedown($id=null) {
        if($id==null)
            die("No ID received");
        $this->Node->id=$id;
        if($this->Node->movedown()==false)
            $this->Session->setFlash('The Node could not be moved down.');
        $this->redirect(array('action'=>'index'));
    }
}

?>

The first part of the edit function works much like the add function, it checks on received data and tries to save it. When there is no data received, it checks if there is a paramater called ID. If not it dies with an error message. If the parameter is given it fetches the node data, and gets the data needed to populate the 'Parent' select box, just like in the Add screen

The rest of the three functions are almost identical, and don't need any matching views as the code will redirect to the index page anyway. All these functions check if the parameter ID is passed, and dies with an error if not. If the parameter is given it selects the right node and runs the action.

Done!

This should be it, you should now have a tree created in CakePHP, with complete Create, Read, Update and Delete functionality (and even more)...

Good luck using this code, and please use the comments if you have any questions about it.