Being a web developer was working good for me for around a decade now. I like the power of web, how it brings together multiple people, how I can see what various people do with what I’ve created, this is really inspiring.

When social networks have appeared, it became even more interesting. I do not spend too much time networking online, but I always liked how it works in terms of statistics. I like surprises coming from social networks. Like finding that my friend from one city works with my ex-classmate with whom we’ve been studing together at another city.

Social networks made styding people interations much easier. You can hold an experiment on large masses very fast. And alot of marketing programs now are based on this aspect.  So, that’s not only interesting, but also very profitable. People share their information themselves and this helps marketing guys create better and more focused products, so everyone’s happy.

So I found that statistics might be very interesting sometimes. As we get more and more data we need a way to process that efficiently. Guys from visual.ly made a step further by visualizing the data in a human-readable form.  I liked their feature where you can put in your twitter account and it will give some overview regarding you. It looks sooo nice.

Also, I was wondering on how google transalte manages to translate into that many languages. Well, maybe translations are not that perfect, but still it’s good to get basic understanding. I thought they must be hiring alot of translators on all various languages to prepare the database for all possible translations on all words.. crazy stuff. In fact, what happens to be is that google translator is taught automatically using machine learning algorithms. Alot of documents, texts are created in bulingular form and then machine is automatically taught to find which word means what on another language. Amazing!

It happens so that combining various ideas on mathematics, statistics, probability theory and others we can now let a computer do alot of things for analyzing data and even making a decision. That sounds like my child dream of making a real AI is getting closer and closer

The good thing is that I can start using it right now. Web applications need these sort of algorithms for everyday tasks. E.g. “recommended products” section from Amazon is based on what products you browsed, which commented, liked, tracing your path. And then it can give really good predictions on what you might like. And it is usally a very good fit, after “recommended books” newsletter they send, I frequently end up finding alot of books I’d like to read.

Or you can automatically find emotinal coloring of the comments on your blog. So that you can see in general what people think about your articles without reading a single comment.

From the economical side it can be very nice job of e.g. predicting of what the price of the product should be based on it’s characteristics, demand, competition. How nice. Don’t even get me started on the “VIP” techiques like image recognition,  voice recognition, speech synthesis etc..

These things really inspire me. Creating a program that can make decidions by itself, without being explicitly programmed, it a step towards really AI. We have a huge trip on this path, but what we already have is extremely impressive.

Earlier I thought that these algorithms are extremely hard to digest and I need to study AI at the university specifically, otherwise I have no chance. But I decided to give it a try anyway. What I found is that Standford university has sereval interesting video courses on machine learning and natural language processing, which are absolutely free. They are starting a new “semester” this February, so you can register to receive all the tasks, scripts etc. If you (like me) hate waiting, you can easily find video lectures from previous semesters on the web.

The way they’ve created these courses is very intuitive and clear, giving explanations in a good language and giving alot of examples, so it is easy to undestand. Math is also quite simple, for the advanced topics on math there are several optional lectures. So these courses are truly very good and I strongly recommend it.

I would like to network with people having that passion for AI, machine learning as I do to share the ideas and probably study together. If you’re interested in the topic, please share your thoughts about it. Maybe you know better sourses for studing or you’ve applied some machine learning techiques to your project? Or just as passionate about it as I am? I would love to hear!

I believe that for programmers it is very important to constantly update their knowledge base. What was a cutting edge technology a couple years ago might already become outdated. The pace of our profession development is truly very fast, so being up-to-date is very important.

There was a time I was working with a team developing accounting software for (mostly goverment) companies. All of the software was written for DOS and old developers had a strong resistance of moving to something new. Their reasoning was that everyone is using it anyway and that it takes time to teach an accountant a new technology. But what I really saw is that they just don’t know how to develop software for Windows and honestly I had a feeling that they don’t want to learn anything. They were ok with the current state of things when they just do what they have been doing for 20+ years.

But the times has changed, noone wanted their software developed for DOS anymore, everyone wanted to have a nice modern interface and usable interaction using mouse when they can just click whatever they needed to see the details. So these guys has become outdated very fast.

Moreover, the code they produced was procedural-stlye of course, full of tricks, global variables everywhere and very very hard to undestand. One small change would require alot of hours (or even days) to accomplish without being sure that it does not break anything else.

Needless to say that this company had very hard time… Old guys could not do what the market wanted, new guys did not want to work with them because they saw that resistance from old members and prefered to go work somewhere else.

Very quickly I left that company also. When seeing that situation happening I told to myself that whatever happends I should never become like this! I don’t want to do the same thing again and again util retired. I want to learn something new all the time, because learning something new is not only rewarding, but also very fun.

So now I keep reading the book one after another on various topics because this what fills a brain with new ideas. I might agree or disagree with the author, but in either case it makes my brain work, it makes me want experiment with things and do things better.

Funny enough is to see how most of people (particularly girls) react when seeing me reading the book. Well, you know alot of programming books are quite thick. And you know people think that anyone who reads the thick book (or wears glasses) must be very clever. It does not even matter that I’ve just started reading it and have no idea of what it is all about

One of the books I’m reading now Sebastian Bergmann, Stefan Priebsch – Real-World Solutions for Developing High-Quality PHP Frameworks and Applications – 2011 (click on the image at the right for details if interested).

Really an enjoying reading, it systemizes the concepts of  developing enterprise-style applications and gives alot of tips and examples about developing very clean and testable code with examples. This was particularly useful for me because I started to digg deeper the topic of  automated testing to start applying it more systematically to my projects.

I’m very excited on what I’ve learnt about the topic so far, so I will probably blog more about that soon..

What about you? Do you read often? Which books helped you grow as a professional? What are you reading now? I’d really love to hear from you at the comments section!

Today I want to show you a simple, but a very usable concept of validating a form depending on some criteria. There was a time when for one of my projects I needed to create a dynamic form similar to this one:

When checkbox near the field is checked, the field needs to be required, otherwise we just ignore it.

Usually people solve tasks like this by writting alot of code at their controllers, but as I wrote at my previous post this is not the best way to do things.  We want to keep our controller as clean as possible and validation task is a task for the form, not for the controller.

But for the cases like one described above we cannot just assign one of the default validators to a form like we do usually. Writting custom validator also does not solve the problem as we need to validate form depending on criteria based on several fields.

So the best way to solve this in my opinion is to override isValid() method at your custom form. Let me first give you the entire code for the form and then I will explain the details below:

class Default_Form_CustomValidation extends Zend_Form
{
	public function init()
	{
		$this->setOptions(array(
			'elements' => array(
				'field_a_enabled' => array(
					'type' => 'checkbox',
				),
				'field_a' => array(
					'type' => 'text',
					'options' => array(
						'label' => 'Field A',
					)
				),

				'field_b_enabled' => array(
					'type' => 'checkbox',
				),
				'field_b' => array(
					'type' => 'text',
					'options' => array(
						'label' => 'Field B',
					)
				),

				'field_c_enabled' => array(
					'type' => 'checkbox',
				),
				'field_c' => array(
					'type' => 'text',
					'options' => array(
						'label' => 'Field C',
					)
				),

				'submit' => array(
					'type' => 'submit',
					'options' => array(
						'label' => 'Save',
						'decorators' =>	array('ViewHelper')
					),
				),

			),

			'decorators' => array('FormElements', 'Form'),
			'elementDecorators' => array('Label', 'ViewHelper', 'Errors')
		));

		$this->addDisplayGroups(array(
			'a' => array('elements' => array('field_a_enabled', 'field_a')),
			'b' => array('elements' => array('field_b_enabled', 'field_b')),
			'c' => array('elements' => array('field_c_enabled', 'field_c')),
			's' => array('elements' => array('submit'))
		));

		$this->setDisplayGroupDecorators(array('FormElements', array('HtmlTag', array('tag'=>'div'))));
	}

	public function isValid($data)
	{
		$valid_values = $this->getValidValues($data, true);

		if ($valid_values['field_a_enabled']==='1') {
			$this->field_a->setRequired(true);
		} else {
			$this->field_a->setIgnore(true);
		}

		if ($valid_values['field_b_enabled']==='1') {
			$this->field_b->setRequired(true);
		} else {

			$this->field_b->setIgnore(true);
		}

		if ($valid_values['field_c_enabled']==='1') {
			$this->field_c->setRequired(true);
		} else {
			$this->field_c->setIgnore(true);
		}

		$this->field_a_enabled->setIgnore(true);
		$this->field_b_enabled->setIgnore(true);
		$this->field_c_enabled->setIgnore(true);

		return parent::isValid($data);
	}
}

First, at the init() function we define the fields we need and group it to let it look the way we want. As you can see, each checkbox/input pair is placed into a separate group and each group has “HtmlTag” decorator which wraps them into “div” tag.
This allows us to have checkbox and input placed together, but each new set of those to be placed in a new row.

But the magic of course happens at isValid() function. There I start with this line:

		$valid_values = $this->getValidValues($data, true);

getValidValues() validates the form and retieves only the values that passed validation.
At this specific example this line might not seem too useful, and you could use $data array directly to access values, but this is a good practice to always use getValidValues() to retrieve validated values, as it goes through the standard form validation routine for each element here and also filters all the input data from the user, so this adds up to the security of your application.

Ok, so when received a list of valid values, we need to make our custom validation. This is as simple as this for each of our fields:

		if ($valid_values['field_a_enabled']==='1') {
			$this->field_a->setRequired(true);
		} else {
			$this->field_a->setIgnore(true);
		}

What this code says to our application is simply that if a checkbox (field_a_enabled) was checked, then input (field_a) needs to be required, otherwise we just skip it.

For those of you who don’t know what setIgnore() function actually does I will make some explanation as I really like that one. This is quite simple, at your controller when you retrieve your validated values with $form->getValues(true), fields which were marked as ignored do not go to the resulting “values array” regardless to whether POST sent any values for them or not. So this helps to keep things clean and don’t mess up with any values that we don’t need anyway.

What it means in our case is that we’ll only get values for the input fields which were checked with corresponding checkboxes, nothing else. Controller does not need to know anything about checkboxes and it does not need to know about inputs which were not selected (corresponding checkbox not checked). This is the job for the form, and controller will only receive the data it really needs – values from the selected inputs.

When done with custom validation we also set all checkboxes to ignore as they already did their job of letting validation know which fields are required and which are not and we don’t need them further:

		$this->field_a_enabled->setIgnore(true);
		$this->field_b_enabled->setIgnore(true);
		$this->field_c_enabled->setIgnore(true);

And last, but very importaint line is this:

		return parent::isValid($data);

With this line we actually call Zend’s native validation from Zend_Form class as our version of isValid() does not actually validate anything, it just prepares certain fields to be validated by native validation.

So that’s it! That was just an example of what you can do by overriding isValid() and writting custom validation, this gives you a great power to create any really dynamic and flexible validation.

Hope that was useful and I could convince you that placing your custom validation into the form class instead of controller makes your code cleaner and easy to understand.

And as usual I would be glad to hear your thoughts at the comments section.
Thanks!

Very often I see how much people overload their controllers. That situation is so much frequent that it even received it’s own term “Fat Stupid Ugly Controllers”. So what does that mean? If you just have 3 components of MVC – model, view and controller – this is not enough to claim that your application really follows MVC paradigm.

Controller needs to be a very lightweight and thin part of your application. Afterall, all it needs to do is to receive some data and pass it to the model, then receive proccessed data back from model and send to view.  So it would be “Thin Clever Beautiful Controllers” instead

The most common mistake is putting business logic inside the controller. It not only makes your code harder to understand, but also reduces chances to reuse your code. Sometimes I spot that people don’t really understand MVC by asking questions like this:

How do I include code from one controller into another controller?

You should never even want to do that if you use MVC propertly. All code which is to be reused at different controllers needs to be at your model. From the other hand, sometimes all you need is to forward your request into another controller.

In general, the concept of OOP programming is to create as small chunks of code as possible. The entire application is divided into very small peaces, each of which is easy to digest to anyone who reads it (and by the way, studies showed that code is read 10 times  more often than it’s written).

Keeping more code at your model (rather than at the controller) also helps with testing, as controllers are almost impossible to test with automated tools. Models, from the other hand, are easy to test with tools like PHPUnit or similar.

I saw similar thing happening with OOP and people claiming that they know how to use it. But it was nothing more than  the same old procedural approach with a set of different functions which are unrelated to each other and just grouped under one class. So they thought that they’re using OOP and that’s cool and technically they were, but in reality it was just a disguised procedural programming.

So look at your code once again and think – are you really using technology you claim to be using? Dig deeper and find what is inside. That is the only way to grow as a professional…

Here’s yet another post about Zend Form. I love the power of Zend Forms, but there are many tricks I had to learn to make it work the way I want to.

Very often people ask how to create a form which has several columns. At this post I want to share how you can do that, giving 2 columns form as an example. But you can create multicolumn form with any number of columns you want using the same technique.

Ok, lets just start with some simple form definition:

class Default_Form_TwoColumn extends Zend_Form
{
	public function init()
	{
		$this->setOptions(array(
			'elements' => array(
				'element1' => array(
					'type' => 'text',
					'options' => array(
						'label' => 'Element 1',
					)
				),
				'element2' => array(
					'type' => 'text',
					'options' => array(
						'label' => 'Element 2',
					)
				),
				'element3' => array(
					'type' => 'text',
					'options' => array(
						'label' => 'Element 3',
					)
				),
				'element4' => array(
					'type' => 'text',
					'options' => array(
						'label' => 'Element 4',
					)
				),
				'element5' => array(
					'type' => 'text',
					'options' => array(
						'label' => 'Element 5',
					)
				),
				'element6' => array(
					'type' => 'text',
					'options' => array(
						'label' => 'Element 6',
					)
				),
				'submit' => array(
					'type' => 'submit',
					'options' => array(
						'label' => 'Save'
					)
				)
			),
		));

	}
}

What I do here is simply add 6 input elements and one submit button. They will all show one under another in one column. Ok, but we need 2 columns. An easy way to archive this is using display groups. What display groups do is simply grouping elements together.

Here we’ll need 3 display groups – first for the left column, second for the right column and third for our submit button:

		$this->addDisplayGroups(array(
			'left' => array(
				'options'  => array('description' => 'Left Column'),
				'elements' => array('element1', 'element2', 'element3'),
			),
			'right' => array(
				'options'  => array('description' => 'Right Column'),
				'elements' => array('element4', 'element5', 'element6'),
			),
			'bottom' => array(
				'elements' => array('submit'),
			)
		));

		$this->setDisplayGroupDecorators(array('Description', 'FormElements', 'Fieldset'));

At this point you should see something like this:

That border around our elements clearly shows what we have in our display groups. That border is displayed because of the “fieldset” tag added around our elements. By default each display group just wraps a set of its elements in a “fieldset” tag, but you can apply any other decorators to them.

You can also notice that I used setDisplayGroupDecorators() here. That is to override default decorators which were adding some tags that I did not need, also I added “Description” decorator so that to let it show the “title” of the column at the top.

Alright, this is all nice, but we still have one column form. What else should we do? Well, not everything needs to be solved at the server side. Sometimes all you need is just adding some styles with css:

				form fieldset#fieldset-left, form fieldset#fieldset-right
				{
					float: left;
					width: 15%;
					border: none;
				}

				form #fieldset-bottom
				{
					clear: both;
					border: none;
				}

				form dd
				{
					margin: 0;
				}

				form fieldset .hint
				{
					font-weight: bold;
				}

Here I set floting left for our main columns and clear:both for submit button. As you can see I used ids #fieldset-left, #fieldset-right, #fieldset-bottom – these ids are automatically added by display groups and named after name of the display group, so that way that’s easy to style separate groups using css.
I also added some more styling just to let our form look a little nicer.

Ok, that’s it! We’ve created a nice two column form with Zend Framework. If you need more columns, just add more display groups, place your elements into them and make sure you add “float: left” style to your display groups.

Hope that was helpful for you. Feel free to ask any questions at the comments section.

Alright, tuning and decorating elements is nice and fun. But what if you need something really custom like a checkbox tree? In this case you will need to create a custom Zend Element. It might sound complicated at the beginning, but this is actually quite simple.

I prefer this appoach rather than using ViewScript to create what you need because you can make it really reusable and also attach validation and displaying errors to it.

If you are eager to try this right now,  you can download a complete project with example here. The element itself can be found at library/ZFExt folder inside that zip file.

Usage

Form

applicaitons/forms/Tree.php

Here’s a simple example of the form using checkbox tree element (same as on screenshot above):

class Default_Form_Tree extends Zend_Form
{
	public function init()
	{
		$this->addPrefixPath('ZFExt_Form_Element', 'ZFExt/Form/Element/', 'Element');

		$this->setOptions(array(
			'elements' => array(
				'tree' => array(
					'type' => 'treeView',
					'options' => array(
						'label' => 'Tree:',
						'multioptions' => array(
							1 => array('title'=>'Node 1', 'children'=>array()),
							2 => array('title'=>'Node 2', 'children'=>array(
								21 => array('title'=>'Node 2.1', 'children'=>array()),
								22 => array('title'=>'Node 2.2', 'children'=>array(
									221 => array('title'=>'Node 2.2.1', 'children'=>array()),
									222 => array('title'=>'Node 2.2.2', 'children'=>array()),
									223 => array('title'=>'Node 2.2.3', 'children'=>array()),
								)),
							)),
							3 => array('title'=>'Node 3', 'children'=>array()),
							4 => array('title'=>'Node 4', 'children'=>array(
								41 => array('title'=>'Node 4.1', 'children'=>array()),
								42 => array('title'=>'Node 4.2', 'children'=>array(
									421 => array('title'=>'Node 4.2.1', 'children'=>array()),
									422 => array('title'=>'Node 4.2.2', 'children'=>array()),
								)),
							)),
							5 => array('title'=>'Node 5', 'children'=>array()),
						)
					)
				),
				'submit' => array(
					'type' => 'submit',
					'options' => array(
						'ignore' => true,
						'label' => 'Submit',
						'class' => 'submit',
					)
				),
			),
		));

	}
}

We pass hierarchy using “multioptions” parameter, which is an array with the following structure:

$id => array(‘title’=>$title, ‘children’=>array())

$id is an unique ID defining each node, $title is a caption for each node, children array is a list of child nodes for each node. So nesting nodes into “children” array will create a hierarchy.

Controller

application/modules/default/controllers/IndexController.php

class IndexController extends Zend_Controller_Action {

	public function indexAction()
	{
		$this->view->addHelperPath('ZFExt/View/Helper', 'ZFExt_View_Helper');

		$form = new Default_Form_Tree();

		if ($this->_request->isPost()) {
			if ($form->isValid($_POST)) {
				$values = $form->getValues(true);

				var_dump($values);
			}
		}

		$this->view->form = $form;
	}
}

Nothing fancy here, just going through standard validation routine.

View

application/modules/default/views/scripts/index/index.phtml

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

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jquery.bassistance.de/treeview/lib/jquery.cookie.js" type="text/javascript"></script>

<link rel="stylesheet" href="http://jquery.bassistance.de/treeview/demo/screen.css" type="text/css" />
<link rel="stylesheet" href="http://jquery.bassistance.de/treeview/jquery.treeview.css" type="text/css" />
<script type="text/javascript" src="http://jquery.bassistance.de/treeview/jquery.treeview.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("#tree").treeview({
		persist: "cookie",
		cookieId: "treeview-black"
	});
});
</script>

Here we output our form + add some javascript to make our tree expandable/collapsable. I used scripts from here http://bassistance.de/jquery-plugins/

Implementation Details

Creating custom control consists on two parts – creating element class and creating helper class.

Element

Element class is what you add to your form (same as “text” or “checkbox” element or whatever else). It handles all the validation, population of the value to the element, assigning options etc.

Here’s how our element class looks like:

<?php
class ZFExt_Form_Element_TreeView extends Zend_Form_Element_Multi
{
	public $helper = 'formTreeView';

    /**
     * MultiCheckbox is an array of values by default
     * @var bool
     */
    protected $_isArray = true;

	public function _getOptionIds($options)
	{
		$result = array();
		foreach ($options as $current_option_id=>$current_option) {
			$result[] = $current_option_id;
			if (isset($current_option['children'])) {
				$result = array_merge($result, $this->_getOptionIds($current_option['children']));
			}
		}
		return $result;
	}

    public function isValid($value, $context = null)
    {
        if ($this->registerInArrayValidator()) {
            if (!$this->getValidator('InArray')) {
                $multi_options = $this->getMultiOptions();

				$option_ids = $this->_getOptionIds($multi_options);
                $this->addValidator(
                    'InArray',
                    true,
                    array($option_ids)
                );
            }
        }
        return parent::isValid($value, $context);
    }

}

As you can see, we extend it from Zend_Form_Element_Multi which is a base class for all elements containing multiple options (like select or radiogroup etc.) Obviously with checkbox tree we have multiple options (checkboxes), so Zend_Form_Element_Multi suits our needs nicely.

$helper = ‘formTreeView’ tells which helper we want to use to draw this element. We will discuss helper a little later.

Also we set value for $_isArray to true, telling that this element returns array as a value, we use it because we allow to check multiple checkboxes, so result will obviously be an array.

At  isValid() function we add a default validator (InArray). The purpose of it is to check that values submitted to the form are in the tree. In other words, so that it is impossible to submit values which are not amoung the options of the element. So for this purpose we collect ids of all options of the element and pass it to the default “InArray” validator.

Helper

All the “magic” happends at the helper class. That one is responsible for rendering element itself i.e. creating HTML for the checkbox tree. Let’s have a look at the code:

<?php
class ZFExt_View_Helper_FormTreeView extends Zend_View_Helper_FormElement
{
	protected $_info = null;

	protected function _renderBranch($nodes)
	{
		$output = '<ul id="'.$this->_info['id'].'"'.$this->_htmlAttribs($this->_info['attribs']).'>';
			$id = $this->_info['id'];

			foreach ($nodes as $node_id=>$node) {
				$node_control_id = $id.'-'.$node_id;
				$node_control_name = $this->_info['name'];

				if (is_array($this->_info['value'])) {
					$checked = in_array($node_id, $this->_info['value'])?'checked="checked"':'';
				} else {
					$checked = '';
				}

				$output .= '<li>';
					$output .= '<input '.$checked.' value="'.$node_id.'" id="'.$node_control_id.'" name="'.$node_control_name.'" type="checkbox" />';
					$output .= '<label for="'.$node_control_id.'">'.$node['title'].'</label>';
					if (!empty($node['children'])) {
						$output	.= $this->_renderBranch($node['children']);
					}
				$output .= '</li>';
			}
		$output .= '</ul>';

		return $output;
	}

	public function formTreeView ($name, $value = null, $attribs = null, $options = null)
	{
		$this->_info = $this->_getInfo($name, $value, $attribs, $options);
		return $this->_renderBranch($this->_info['options']);
	}
}

It starts from formTreeView() method and then recursively runs _renderBranch() on each “children” subarray to build a tree. So, each node is wrapped in “<li></li>” tags and contains a checkbox and a label for that checkbox (for the title of the node). If node has some children, they are added into another “ul” element under this node.

_renderBranch() also checks for the value passed to element (populated after submit), so that it knows which checkboxes need to be checked and which not:

$checked = in_array($node_id, $this->_info['value'])?'checked="checked"':'';

So that’s what our helper renders as a result:

Now what’s left is just adding some scripts to make that tree dynamic:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jquery.bassistance.de/treeview/lib/jquery.cookie.js" type="text/javascript"></script>

<link rel="stylesheet" href="http://jquery.bassistance.de/treeview/demo/screen.css" type="text/css" />
<link rel="stylesheet" href="http://jquery.bassistance.de/treeview/jquery.treeview.css" type="text/css" />
<script type="text/javascript" src="http://jquery.bassistance.de/treeview/jquery.treeview.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("#tree").treeview({
		persist: "cookie",
		cookieId: "treeview-black"
	});
});
</script>

I’ve chosen to use jquery script from here http://bassistance.de/jquery-plugins/ but you can use any script of your choice.

Please notice that I connect it with “#tree” element. That’s because my element at the form is called “tree” and HTML id for it was auto-generated. If you have different name, you will also need to update your script accordingly.

Ok, so that’s it! You can find all sources for this article here.

Inside is a zend project along with minified version of zend framework (so that you could try it without installing anything else).  The most interesting part is at library/ZFExt folder, that’s were our element and helper reside.

Thanks for reading! If you have any questions – don’t hesitate to ask using comments section.

There was a time I needed to outsource some of my work, so I started looking for a coder that could help me with XHTML/CSS part.  I checked few portfolios which people were sending to me, but most of the websites I saw there where sliced using tables. When I asked one of these guys if he had something to show using “div-style” markup he replied:

“No! I’m not going to follow the standards created by some geeks working for food”

He meant W3C standards. First  I thought that it was just him having such a crazy thinking. But then I started asking more and got very similar replies. Some people mentioned that w3c-style markup is much harder to create with and that they don’t want to waste time on that or that certain layouts are impossible to create just using CSS.

Ok, that could be an excuse sometime at the 1990′s, but not today! With XHTML/CSS layout you can make so much more things and so much more easier and cleaner, so I’m shocked that people still use table layouts for anything at all. Clean markup also affects SEO positively, makes your page load faster, displays nicely on different devices etc etc.

Another day I talked to one programmer. He says:

“All this OOP stuff is crazy, I can do everything much faster using functional programming. And yeah, objects take so much RAM, so I try to avoid them all the time”

Come on, OOP was invented more than 20 years ago, since that time it has evolved, many modern languages are based on it’s priciples, there are thousands of books, hundrends of reusable patterns etc.

That reminded me conversation with these HTML-guys. What was in common with all these guys that they avoided to use proven technology, thinking that they go “the right way”? They even think that they’re “cool” as they don’t follow the rules and the rest of the world are just fools.

Interestingly, as I found out, most of these guys are beginners. So it’s rediculous when that newbie which was into the programming for 1-2 years and created a couple of messy websites (if any at all) says that technology evolution for several decades was crap.

I don’t want to say that everyone has to follow the path of the world’s “big guys”. Innovation is great and as we could see very often, revolutions in technology appear all the time. But, I believe that it is only possible with this path:

1. Learn technology
2. Find it’s weaknesses
3. Create something better

Most people just go straight to point 2 or point 3.  They just avoid learning, they just put tags “complicated”, “slow” etc. without even trying it. I mean really trying it. Writting something more than a simple “Hello world”. They forget that:

“Chance favors the prepared mind.”
–  Louis Pasteur

It’s like someone who first tried to ride the bicycle saying “Bicycle is so hard to  learn riding, it costs money and it breaks sometimes. I can just walk and do it much faster”. Well, it might be true at the beginning, but when you’ve learnt how to ride it, you understand how funny your ideas were.

If you find yourself blaming some technology think about it once again… Maybe that kind of thinking blocks your growth as a professional and you miss something really important?

As you might have already noticed from my previous posts, when it comes to form creation I try to avoid coding manual HTML as much as possible. Afterall, we have all that nice elements and decorators available at Zend Framework, so why wasting it?

So, I have one more thing from my Zend Form’s toolset to share with you. At this post I want to create a real table based form with Zend Form. What I mean is this:

A table, but still a form and no custom viewscript. If you want solution right away, you can download the entire code for this post here

Otherwise, see how it is done step by step:

1. Start with a simple form having just a “submit” button:

class Default_Form_SimpleTable extends Zend_Form
{
	public function init()
	{
		$this->setOptions(array(
			'elements' => array(
				'submit' => array(
					'type' => 'submit',
				)
			),
		));
	}
}

2. Add table decorators for our main form.

$this->setDecorators(array('FormElements', array('SimpleTable', array('columns' => array('One', 'Two', 'Three'))), 'Form'));

Here I use my custom decorator, what it does is basically adding table/thead/th tags for the form. Titles for the columns can be assigned at “columns” parameter. You can download this decorator with all code for the article here.

3. Define rows.

Each row of our form will be a subform of our main form. Obviously we’ll have several rows in our table, so let’s code creation of such a “row form” in a function in order to be able to call it multiple times later:

	public function addRow()
	{
		$row_form = new Zend_Form(array(
			'elements' => array(
				'one' => array(
					'type' => 'checkbox'
				),
				'two' => array(
					'type' => 'text'
				),
				'three' => array(
					'type' => 'text'
				),
			),
			'decorators' => array('FormElements', array('HtmlTag', array('tag'=>'tr'))),
			'elementDecorators' => array('ViewHelper', array('HtmlTag', array('tag'=>'td')))
		));

		$new_form_index = count($this->_subForms)+1;
		$row_form->setElementsBelongTo($new_form_index);
		$this->addSubform($row_form, $new_form_index);

		return $row_form;
	}

So here we:

• define elements which we need.
• assign form decorators – it will wrap the entire row in “<tr></tr>” tags
• assign elements decorators – it will wrap each single element in “<td></td>” tags
• use setElementsBelongTo() in order to add unique prefix to the element name on each row of our form
• finally, add this subform to the main form using $this->addSubform()

4. Add rows to the form.

So now as we have defined our rows, let’s add some to our main form.  Let it be 3 rows for this form:

$this->addRow();
$this->addRow();
$this->addRow();

5. Almost done.

Ok, this is it. Form shows nicely as a table. But what’s wrong with our “submit” button? The problem here that all content is wrapped into the table, including our submit button. To make our submit button display nicely we need to add tr/td around it as well. Also we need to make sure it shows under all other rows, we can do it by assigning some large number for “order”:

$this->getElement('submit')->setDecorators(array('ViewHelper', array(array('td'=>'HtmlTag'), array('tag'=>'td', 'colspan'=>3)), array(array('tr'=>'HtmlTag'), array('tag'=>'tr'))));
$this->getElement('submit')->setOrder(100);

6. Enjoy

The good thing is that after submit you will get a nicely structured array of all values like this:

Array
(
    [1] => Array
        (
            [one] => 0
            [two] => row1 test
            [three] => row1 second test
        )

    [2] => Array
        (
            [one] => 1
            [two] => row2 test
            [three] => row2 second test
        )

    [3] => Array
        (
            [one] => 0
            [two] => row3 test
            [three] => row3 second test
        )

)

I used a very similar approach for alot of projects, hope this will be helpful for you also. Combining this idea with some javascript you can also create dynamic forms using Zend Form. Also, each row does not neccessary need to be the same, you can create different set of contorls on each row, just make sure you apply appropriate decorators. So hopefully this was a good starting point for you, which you can use to implement your ideas.

You can download entire code for this article here

Let me show you several quick tips on zend form, which are very simple, but seem to be hard to come across for many people:

1. Custom HTML within the label

Sometimes there’s a need to add some HTML directly into the label. For example, a quick link to “read more” or something. Normally you cannot do this, as Zend will apply escaping to the label. So if you try this:

		$form = new Zend_Form();
		$element = $form->createElement('checkbox', 'username');
		$element->setLabel('I agree to the terms (<a href="/terms">Terms of Service</a>): ');
		$form->addElement($element);
		echo $form;

It will output something like this:

I agree to the terms (<a href=”#terms”>Terms of Service</a>):

To prevent Zend doing it, all you need to do is disabling escaping for the element like this:

		$element->getDecorator('Label')->setOption('escape', false);

I agree to the terms (Terms of Service):

2. Custom text or HTML anywhere on the form

Here’s a quick way to add any text or HTML into zend form:

		$form->addElement('hidden', 'test', array(
			'description' => 'Hello world! <a href="#">Check it out</a>',
			'ignore' => true,
			'decorators' => array(
				array('Description', array('escape'=>false, 'tag'=>'')),
			),
		));

This kind of hacky, but still works nicely and is much better than writting all in pure HTML.
So here we create a fake hidden element, but tell Zend Framework that it does not really need to render it (have a look, we only have Description decorator here).

So only description itself is rendered (you can set it at “description” param). I’ve also added ignore=true, so that we don’t get that value each time calling $form->getValues(); as it will always be null anyway.

3. Placing label after element

By default all labels are placed before elements. In most cases this is very usable, but not for checkboxes. Usually you anticipate that there will be a checkbox and then some comment for it. The trick here is that ‘Label’ decorator has option placement=’prepend’ , which means that it will be rendered before anything else. To solve it, just set it to “append”:

		$element->getDecorator('Label')->setOption('placement', 'append');

4. Inline radio buttons

If you try to add radio group, each radio button will be displayed vertically. This happens because by default zend adds “<br/>” at the end of each radiobutton. To prevent this, you can simply change that separator to emply string like this:

$element->setSeparator('');

After applying this your radio buttons will be nicely displayed in one line.

5. Zend Form renders invalid HTML?

Ok, if you’re new to this, you might come to the situation where Zend generates HTML code which does not pass w3c validation, i.e. does not close tags etc. Don’t panic, this is somewhat expected! Zend Form renders elements based on your doctype settings. By default doctype is set to “HTML4_LOOSE”, according to that it is not required to close tags. But let us be up to date and use something more serious (i.e. XHTML strict). To do this you will need to add following code to your Bootstrap.php file:

    protected function _initDoctype() {
        $this->bootstrap('view');
        $view = $this->getResource('view');
        $view->doctype('XHTML1_STRICT');
    }

This solves the problem and we have a nice and valid output now.

6. Global form errors (not related to any specific element)

That’s quite common task. For example, you want to create a login form. I’m not going to describe a complete login solution here, I will just use it as an example to demostrate global form errors.

Let us start like this:

		$form = new Zend_Form();

		$form->setMethod('post');

		$form->addElement('text', 'username', array(
			'label' => 'Username: ',
			'required' => true
		));

		$form->addElement('password', 'password', array(
			'label' => 'Password: ',
			'required' => true
		));

		$form->addElement('submit', 'submit', array(
			'label' => 'Submit',
		));

		if ($this->getRequest()->isPost()) {
			$post = $this->getRequest()->getPost();

			if ($form->isValid($post)) {
				var_dump($form->getValues());
			}
		}

		echo $form;

This code will validate username and password fields separately and will display errors under them if any.
But then you also need to check if this user/password combination actually exists at the database. And if it does not, error will need to be displayed. This is not username element’s error, not password’s, it’s more like form’s error. So let’s add it to the form itself:

		if ($this->getRequest()->isPost()) {
			$post = $this->getRequest()->getPost();

			if ($form->isValid($post)) {
				if (check_login($post['username'], $post['password'])===false) {
					$form->setErrors(array('Invalid login'));
				} else {
					var_dump($form->getValues());
				}
			}
		}

check_login() is not a real function, it will just need to be some code that checks user details at the database. So, if user was not found we assign error to the form:

$form->setErrors(array('Invalid login'));

By default these errors won’t be displayed, you’ll need to add a special decorator called FormErrors to do show them. Also set it’s parameter “onlyCustomFormErrors” to true, otherwise ALL errors (including errors from other elements) will be shown:

$form->addDecorator('FormErrors', array('onlyCustomFormErrors'=>true));

7. Decorators for multiple elements

If you want to change decorators for multiple elements, updating each single element can be a tedious task.
Luckily Zend has functionality to change all decorators for the form elements at once using setElementDecorators() method:

		$form = new Zend_Form();
		$form->setMethod('post');

		$form->addElement('text', 'message', array(
			'label' => 'Message: ',
			'required' => true
		));

		$form->addElement('submit', 'submit', array(
			'label' => 'Submit',
		));

		$form->addElement('reset', 'reset', array(
			'label' => 'Reset',
		));

		$form->setElementDecorators(array('Label', 'ViewHelper'));
		$form->setElementDecorators(array('ViewHelper'), array('submit', 'reset'));

		echo $form;

At the example above I have one input field and 2 buttons. Normally buttons do not need label before them, so they need to be styled differently. So the code says: “add default decorators to all elements”:

$form->setElementDecorators(array('Label', 'ViewHelper'));

“but set different decorators for submit and reset elements”

$form->setElementDecorators(array('ViewHelper'), array('submit', 'reset'));

Obviously, you can set any decorators and any elements you want. Here, I used these decorators just for example, normally you would want a bit different set.

Alirght, so that finishes my tips list for today.

What tricks  do you use yourself? Please share it at the comments section, I would definitely be interested to hear!

Zend Framework is very powerful and feature rich. But sometimes it can drive you nuts!
While working on one of my projects I needed to build a form looking something like this:

Looks pretty simple, but the trick is that I needed so that these were not 3 individual radio groups (Fruits, Veggies, Berries), but a single one. In other words, make it so that just one selection possible among all these radio buttons.

Difficulties

Zend Form allows us to create a group of radio buttons without a problem, so I started with something like this:

		$form->addElement('radio', 'radio_group', array(
			'label' => 'Options:',
			'multioptions' => array(
				1 => 'Banana',
				2 => 'Apple',
				3 => 'Pear',
				4 => 'Cucumber',
				5 => 'Tomato',
				6 => 'Potato',
				7 => 'Blackberries',
				8 => 'Raspberries',
				9 => 'Strawberries',
			),
			'required' => true,
		));

Ok, now how do we place some text(or whatever) in between so that to describe  groups? My next idea was to split that one big radio group into 3 smaller ones:

		$form->addElement('radio', 'fruits', array(
			'label' => 'Fruits:',
			'multioptions' => array(
				1 => 'Banana',
				2 => 'Apple',
				3 => 'Pear',
			),
		));

		$form->addElement('radio', 'veggies', array(
			'label' => 'Veggies:',
			'multioptions' => array(
				4 => 'Cucumber',
				5 => 'Tomato',
				6 => 'Potato',
			),
		));

		$form->addElement('radio', 'berries', array(
			'label' => 'Berries:',
			'multioptions' => array(
				7 => 'Blackberries',
				8 => 'Raspberries',
				9 => 'Strawberries',
			),
			'required' => true,
		));

Ok, that looks better, but now we have 3 separate groups, rather than one and you can have 3 selections and that’s not what we wanted to archive.

The problem here is that Zend Form elements are generated in such a way so that it puts name of the element into name of the HTML input control. So we have something like this (simplified):

<input name="fruits" type="radio" value="1" /> Banana
<input name="fruits" type="radio" value="2" /> Apple
<input name="fruits" type="radio" value="3" /> Pear

<input name="veggies" type="radio" value="4" /> Cucumber
<input name="veggies" type="radio" value="5" /> Tomato
<input name="veggies" type="radio" value="6" /> Potato

<input name="berries" type="radio" value="7" /> Blackberries
<input name="berries" type="radio" value="8" /> Raspberries
<input name="berries" type="radio" value="9" /> Strawberries

From the other hand, in order to make a radio group with HTML, you need to have the same name for all radio buttons.

With Zend Form it is impossible to just rename all 3 elements to have one name, as each element is required to have an unique name. Specifying name as an additional attibute for the control works to some extent, but it breaks other things like validation, repopulating radio group and others.

Solution

Ok, so I could give up and make everything with ViewScript writting pure HTML, but thinking about it I realized that this kind of task is quite frequent (especially when dealing with some kind of quiz or stuff like that). And I did not want to finish up having all my forms being decoupled from Zend Forms in favor of pure HTML. So I decided to make a custom form element to solve that, hopefully it will be useful for you also.

Let me first describe how we can use it, and later I will describe details of implementation if you’re interested:

• First of all, we just create our “core” radio group containing all possible options:

		$form->addElement('radio', 'radio_group', array(
			'label' => 'Options:',
			'multioptions' => array(
				1 => 'Banana',
				2 => 'Apple',
				3 => 'Pear',
				4 => 'Cucumber',
				5 => 'Tomato',
				6 => 'Potato',
				7 => 'Blackberries',
				8 => 'Raspberries',
				9 => 'Strawberries',
			),
			'required' => true,
		));

This radio group will be used as a starting point for the other smaller groups. Why is it usable to have it, is that we can use validation configuration in just this one place, also by placing this element in different places we can control where exactly we want validation errors to be shown. And, when receiving value after form was validated, we don’t want to go and check at multiple locations which radiobuttom has which value, we can just check our “core radio button” for it.

• We don’t want this element to output any extra markup, so lets leave only “Errors” decorator for it:

		$radio_parent = $form->getElement('radio_group');
		$radio_parent->setDecorators(array('Errors'));

• We add 3 more radio groups for each set (Fruits, Veggies, Berries).

This time we’ll use extended version of Zend_Form_Element_Radio class which I’ve created, called “standaloneRadio”, like this:

		$form->addPrefixPath('ZFExt_Form_Element', 'ZFExt/Form/Element/', 'Element');

		$form->addElement('standaloneRadio', 'fruits', array(
			'bind' => array($radio_parent, array(1,2,3)),
			'label' => 'Fruits',
		));

It has an extra “bind” parameter which is an array:
- for the first item in this array you must use instance our “core radio group” element, created at step 1.
- for the second you specify which options from it you want to use.

So at the example above we refer to our core element ($radio_parent) and use options with IDs 1,2 and 3 from it, i.e. Banana, Apple, Pear. We’ll need to do the same thing for our “veggies” and “berries” elements, refering to corresponding options:

		$form->addElement('standaloneRadio', 'veggies', array(
			'bind' => array($radio_parent, array(4,5,6)),
			'label' => 'Veggies',
		));

		$form->addElement('standaloneRadio', 'berries', array(
			'bind' => array($radio_parent, array(7,8,9)),
			'label' => 'Berries',
		));

Basically that’s it! Now, when you validate the form and get the values, you will only need to refer to out ‘radio_group’ element and not individual elements:

		$form->radio_group->getValue();

Same thing applies when you want to populate form with default values – just assign it to the “radio_group” element and it will work as expected.

Implementation Details

So now let’s have a look at that custom class I’ve created:

<?php
class ZFExt_Form_Element_StandaloneRadio extends Zend_Form_Element_Radio
{
	//Parent element on which this radiobutton depends
	protected $_bindParent = null;

	//All validation is done at parent ($_bindParent), so we disable it for individual radiobuttons
	protected $_registerInArrayValidator = false;

	//This element depends on parent ($_bindParent), so we don't need its value directly
	protected $_ignore = true;

	public function setOptions(array $options)
	{
		//Accept additional bind parameter, which is an array:
		//0 - link to the parent radiobutton element (must instance of Zend_Form_Element_Radio)
		//1 - array of option ids which current element needs to take from its parent
		if (isset($options['bind'][0]) && $options['bind'][0] instanceof Zend_Form_Element_Radio) {
			$parent = $options['bind'][0];
			$binding_multioptions = isset($options['bind'][1])?$options['bind'][1]:null;

			if (!empty($binding_multioptions)) {
				if (!is_array($binding_multioptions)) {
					$binding_multioptions = array($binding_multioptions);
				}

				//Attach selected parent multioptions to the current element
				$parent_multioptions = $parent->getMultiOptions();
				$multioptions = array();
				foreach ($binding_multioptions as $current_option_id) {
					if (isset($parent_multioptions[$current_option_id])) {
						$multioptions[$current_option_id] = $parent_multioptions[$current_option_id];
					}
				}
				$this->addMultiOptions($multioptions);
			}

			$this->_bindParent = $parent;

			//We've stored all neccessary info, no need in this parameter anymore
			unset($options['bind']);
		}

		//Call original setOptions from Zend_Form_Element_Radio
		parent::setOptions($options);

		return $this;
	}

	public function render(Zend_View_Interface $view = null)
	{
		//Here we replace element name with parent name, but just for rendering
		$current_name = $this->getName();
		$this->setName($this->_bindParent->getName());

		$output = parent::render($view);

		//Put the real name back
		$this->setName($current_name);

		return $output;
	}

	public function getValue()
	{
		//Element is dependent on parent
		return $this->_bindParent->getValue();
	}

	public function setValue($value)
	{
		//Element is dependent on parent
		return $this->_bindParent->setValue($value);
	}

	public function isValid($value, $context = null)
	{
		//Assign same value to all members of the group
		$value = $this->_bindParent->getValue();
		$context[$this->_name] = $value;

		return parent::isValid($value, $context);
	}
}

This class is inherited from Zend_Form_Element_Radio as we want to take all features from it and just extend a little.
There’s not too much code and I commented it alot, so hopefully it will be easy to understand. But still, I will explain few points:

First of all, it overrides setOptions() function so that to read that extra “bind” parameter for our singular radio buttons.

It also overrides render() function. There I simply replace name of the individual radio group with the name of the “core element”. That way we ensure that all radio buttons in group will have the same name. Zend might need to use element name in many different places, so I’ve decided to put the original name back right after rendering.

Few more overrides for getValue() and setValue() functions. As you can see, they are now configured to get/set values directly from the core element. That way we ensure values are repopulated correctly on the form.

Last, and very importaint override is for isValid(). When data comes from HTML form, it only has value for “core element”. During validation we assign that same value for all linked radio buttons.

Alright, so that’s it! I hope that was useful. You can download entire code for this post here.

And if you guys have any questions or comments I’d be glad to hear