Green Acorn

Blog

Enhance your website forms with Zend_Dojo_Form

I’ve heard a few people talking about Zend_Dojo and how easy it is to implement into your web projects. Lately, I have been doing some research on Zend_Dojo_Form. My first thoughts were that it looked really good. It had a nice look and feel, along with basic Dojo / client side validation. If you are used to using the Zend_Form class – Zend_Dojo_Form allows the same server side validation and filtering, making it a lot more powerful.

So, lets get started..

Add the following method to your bootstrap file
application/ Bootstrap.php

protected function _initDojo()
{	
	// add dojo helper
	$this->_viewObj->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper');
}

Create the form

The first step is to enable Zend_Form using the Zend Tool. If you are unsure how to use Zend Tool, you can read my previous tutorial here.

Once you have the command line open – type the following command:

zf create form dojo

The next stage is to open the newly created file which is located at application/ forms/ Dojo.php. I have used two techniques to add the form elements. The first technique is to instantiate the elements class i.e new Zend_Dojo_Form_Element_TextBox(‘name’). The other technique is to use the Zend_Dojo_Form createElement method. Copy and paste the following code into Dojo.php:

<?php

class Application_Form_Dojo extends Zend_Dojo_Form
{
    public function init()
    {
        $name = new Zend_Dojo_Form_Element_TextBox('name');
        $name->setLabel('Your full name')->setRequired(true);
        
        $user = new Zend_Dojo_Form_Element_ValidationTextBox('user');
        $user->setLabel('User Name')->setRequired(true)->setRegExp('[\w]+')->setInvalidMessage('Invalid non-space text.');
        
        $dob = new Zend_Dojo_Form_Element_DateTextBox('dob');
        $dob->setLabel('Date of Birth');
        
        $location = $this->createElement('ComboBox', 'location', array(
            'label' => 'Location',
            'value' => 'United Kingdom',
            'autocomplete' => true,
            'required' => true,
            'multiOptions' => array(
                'uk' => 'United Kingdom',
                'usa' => 'United States',
                'france' => 'France',
                'spain' => 'Spain'
            )
        ));
        
        $currency = $this->createElement('CurrencyTextBox', 'currency', array(
            'label' => 'Currency:',
            'required' => true,
            'currency' => 'GBP',
            'invalidMessage' => 'Invalid amount. ' . 'Include pound sign, period and pence.',
            'fractional' => false
        ));
        
        $submit = $this->createElement('submit', 'submit');
        
        $this->addElements(array(
            $name,
            $user,
            $dob,
            $location,
            $currency,
            $submit
        ));
    }
    
}

Now we must set the stylesheet / theme for Dojo. We do this by adding the below code to our layout script. If you haven’t enabled your projects layout and are unsure how to do so, you can read my previous tutorial here.

Add the following to application/ layouts/ scripts/ layout.phtml.
Note: It is essential that you add the body class ‘tundra’

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
echo $this->dojo()->addStylesheetModule('dijit.themes.tundra');
?>
</head>
<body class="tundra">
	<?php echo $this->layout()->content; ?>
</body>
</html>

Next we need to create our controller action. Here we create a new instance of Application_Form_Dojo() and do some basic post validation. Add the following code to application/ controllers/ IndexController.php

<?php
class IndexController extends Zend_Controller_Action
{
    public function indexAction()
    {
        // init dojo form
        $form = new Application_Form_Dojo();
        
        if ($this->_request->isPost()) {
            if ($form->isValid($_POST)) {
                // do something
            } else {
                //If form validation fails populate and display the form again
                $form->populate($_POST);
                $this->view->form = $form;
            }
        } else {
            //If the request is not post display the form
            $this->view->form = $form;
        }
    }
	   
}

The final stage is to echo out the form variable in our view script. You can do this by adding the following to application/ views/ scripts/ index/ index.phtml

<?php echo $this->form; ?>

And that’s it.. reload your web design page and you should have something that looks like the image above. Pretty cool huh? From now on I am going to use Zend_Form_Dojo for all my website forms. Normally I am a JQuery guy – but because Zend makes Dojo so easy to use and implement, I will be using Dojo.

Use as a Standalone Component

If you don’t wish to use Zend_Dojo_Form in an MVC design – you can can use the following code to get started.

<?php
// create empty view object
$view = new Zend_View();
// init Zend_Dojo_Form
$form = new Zend_Dojo_Form();

$name = new Zend_Dojo_Form_Element_TextBox('name');
$name->setLabel('Your full name')->setRequired(true);

$user = new Zend_Dojo_Form_Element_ValidationTextBox('user');
$user->setLabel('User Name')->setRequired(true)->setRegExp('[\w]+')->setInvalidMessage('Invalid non-space text.');

$dob = new Zend_Dojo_Form_Element_DateTextBox('dob');
$dob->setLabel('Date of Birth');

$submit = $form->createElement('submit', 'submit');

$form->addElements(array(
    $name,
    $user,
    $dob,
    $submit
));

$form->setView($view);
echo $form;
echo $view->dojo()->addStylesheetModule('dijit.themes.tundra');

Note: don’t forget to add ‘tundra’ to the body class

I hope you found this web development tutorial useful. Please feel free to leave a comment and share any more tips / tricks on Zend_Dojo_Form.

Author:
Posted in: PHP, Zend

Leave a Reply

Your email address will not be published. Required fields are marked *

     

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>