By putting the photos on Flickr, my client can keep posting photos and build a pool of images that other people can contribute to. From a development perspective, all I needed to do was leverage the Zend_Service_Flickr classes and write a simple wrapper.

The frontend page looks like this:

 
$randomPhotos = new RandomPhotosFromFlickr('YOUR_API_KEY');
$numberOfPhotos = 3;
 
echo "
<h2>Group Photos</h2>
 
";
foreach($randomPhotos->FromGroup($numberOfPhotos, "GROUP@ID") as $p)
	echo "<img src='".$p->Small->uri."' />";
 
echo "
<h2>User's Photos</h2>
 
";
foreach($randomPhotos->FromUser($numberOfPhotos, "user@yahoo.com") as $p)
	echo "<img src='".$p->Small->uri."' />";
 

In this example, $p is a Zend_Service_Flickr object, so you can pull any kind of data while letting the simple class I wrote handle the selection of random photos:

 
class RandomPhotosFromFlickr
{
	/**
	 * API key for Flickr
	 *
	 * @var string
	 */
	protected $apiKey;
 
	/**
	 * photoset used for retrieving random photos
	 *
	 * @var Zend_Service_Flickr_ResultSet
	 */
	protected $currentPhotoset;
 
	/**
	 * number of photos in the current photoset
	 *
	 * @var integer
	 */
	protected $totalPhotoCount;
 
	/**
	 * Class constructor
	 * We need your Flickr API Key
	 * Go to http://www.flickr.com/services/api/keys/apply/ to get one
	 * @param string $apiKey
	 */
	public function __construct($apiKey)
	{
		$this->apiKey = $apiKey;
 
	}
 
	/**
	 * Supply a username (a user's email address) and the number of photos you'd like returned
	 *
	 * @param integer $numberOfPhotos
	 * @param string $username
	 * @return Zend_Service_Flickr_ResultSet
	 */
	public function FromUser($numberOfPhotos, $username)
	{
		$flickr = new Zend_Service_Flickr($this->apiKey);
 
		$this->currentPhotoset = $flickr->userSearch($username);
		$this->totalPhotoCount = $this->currentPhotoset->totalResultsAvailable;
 
		$this->currentPhotoset = $flickr->userSearch($username, array('per_page' => $this->totalPhotoCount));
 
		return $this->getPhotosFromCurrentPhotoset($numberOfPhotos);
	}
 
	/**
	 * Supply a group ID and the number of photos you'd like returned
	 *
	 * @param integer $numberOfPhotos
	 * @param string $groupId
	 * @return Zend_Service_Flickr_ResultSet
	 */
	public function FromGroup($numberOfPhotos, $groupId)
	{
 
		$flickr = new Zend_Service_Flickr($this->apiKey);
 
		$this->currentPhotoset = $flickr->groupPoolGetPhotos($groupId);
		$this->totalPhotoCount = $this->currentPhotoset->totalResultsAvailable;
 
		$this->currentPhotoset = $flickr->groupPoolGetPhotos($groupId, array('per_page' => $this->totalPhotoCount));
 
		return $this->getPhotosFromCurrentPhotoset($numberOfPhotos);
 
	}
 
	/**
	 * Return an integer within the photo index range
	 *
	 * @return integer
	 */
	private function getRandomPhotoIndex()
	{
		return rand(0 , ($this->totalPhotoCount - 1));
	}
 
	/**
	 * Get a photo object from the Flickr Web Service
	 * Provide an indice from the current photo set
	 *
	 * @param integer $index
	 * @return Zend_Service_Flickr_Image
	 */
	private function getPhoto($index)
	{
		$this->currentPhotoset->seek($index);
		return $this->currentPhotoset->current();
	}
 
	/**
	 * using $this->currentPhotoset, grab a collection of random photos
	 *
	 * @param integer $numberOfPhotos
	 * @return Zend_Service_Flickr_ResultSet
	 */
	private function getPhotosFromCurrentPhotoset($numberOfPhotos)
	{
 
		// first collect up a list of IDs (making sure there are no duplicates
		$photoIds = array();
		while(count($photoIds) < $numberOfPhotos)
		{
			$id = $this->getRandomPhotoIndex();
 
			if (! in_array($id, $photoIds))
				$photoIds[] = $id;
		}
 
		$randomPhotos = array();
 
		// query the web service to grab the photo objects
		foreach ($photoIds as $id)
			$randomPhotos[] = $this->getPhoto($id);
 
		return $randomPhotos;
	}
 
}
 

you can download the full source if you'd like to try it yourself. Please note that I've omitted bundling my code with a copy of the Zend Framework.

Using Zend Framework's Zend_Service_Flickr

I've come up with a little prototype that's a PHP version of an ASP.NET implementation I did a couple months ago for a project I was working on.

The PHP version was surprisingly easier to implement, due to the simplicity of Zend_Form when compared to the bulldozer we-control-everything-and-rewrite-your-user-control-id's approach of ASP.NET forms.

Essentially, I've created a class with a simple form (1 lookup list (one-to-many for the data modelers out there) and a couple of simple textboxes).

While I think that it's crucial to decouple business rules from the actual form implementation, I think that Zend_Validate validators, as well as custom validators, are an excellent way of creating testable, declaritive validation rules that can be applied to form elements as you see fit. The other decoupling you'll find in this example is from the postback model, essentially allowing you to drop the same form into any part of a Zend Framework application and posting to an Ajax Controller service for validation purposes. What's nice about this is that no business rules are left on the client. I've used prototype for a little styling.

The finishing touch in all of this is that I can leverage the server-side validation routine for both the asynchronous and synchronous calls, so that postback and validation run through the same validation code, essentially providing a second interface with to the same form object.

I'm going to look into extending this example to provide not only one-to-one mapping and one-to-many mapping (lookup lists), but also many-to-one mapping (generating sub-forms dynamically and performing partial validation). Not sure exactly how to do that, so comments would be greatly appreciated!

Here's a quick demonstration.

and now for the code. The webservice bit is all contained in the IndexController for the sake of brevity. In a full blown application, you would likely have a Controller (or several controllers) that would offer different asynchronous entry points into your MVC framework.

class IndexController extends Zend_Controller_Action
{
	function indexAction()
	{
 
		$this->view->f = new RegistrationForm();
		$this->view->setMode = "setMode($('wsTab').childNodes[0]);";
 
		if ($this->view->f->isValid($_POST))
			return $this->render("FormSuccess");
 
		else if($this->_request->isPost())
		{
			$this->view->errorElements = $this->view->f->getMessages();
			$this->view->setMode = "setMode($('pbTab').childNodes[0]);";
		}
 
	}
 
	/**
	 * Ajax JSON call is made through this controller
	 *
	 */
	function asyncAction()
	{
		//prepare a JSON response
		$this->_helper->viewRenderer->setNoRender();
		$this->_helper->getHelper('layout')->disableLayout();
 
     	//Map the form from the client-side call
     	$myFormData = Zend_Json::decode($this->getRequest()->getParam("fs") , Zend_Json::TYPE_ARRAY);
     	$form = new RegistrationForm();
     	$form->isValid($myFormData);
 
     	//return the result
        $this->getResponse()->setHeader('Content-Type', 'application/json')
							   ->setBody(Zend_Json::encode($form->getMessages()));
 
	}
 
}
 

You'll notice that I've pulled out the form into its own class (RegistrationForm):

class RegistrationForm extends Zend_Form
{
 
    public function __construct()
    {
    	$this->setAttrib("id" , "frm");
 
    	$onetomany = new Zend_Form_Element_Select('sad');
    	$onetomany->setLabel('One to many:')
    			  ->setMultiOptions($this->getOneToMany())
    			  ->addValidator(new Onetomany());
 
        $usernameRequiredValidator = new Zend_Validate_NotEmpty();
        $usernameRequiredValidator->setMessage("Please enter a username.");
 
        $usernameStringLengthValidator = new Zend_Validate_StringLength(8,20);
        $usernameStringLengthValidator->setMessage("Username is too short! (8 character minimum)", Zend_Validate_StringLength::TOO_SHORT);
        $usernameStringLengthValidator->setMessage("Username is too long! (less than 20 characters)", Zend_Validate_StringLength::TOO_LONG);
 
    	$username = new Zend_Form_Element_Text('username');
        $username->setLabel('Username:')
        		 ->addValidator($usernameRequiredValidator)
        		 ->addValidator($usernameStringLengthValidator)
        		 ->setRequired(true);
 
    	$name = new Zend_Form_Element_Text('name');
        $name ->setLabel('Name:')
        		 ->addValidator('StringLength', true, array(4, 20))
        		 ->setRequired(true);    	
 
        $password = new Zend_Form_Element_Password('password');
        $password->setLabel('password:');
 
        $this->addElements(array(
        	$onetomany,
            $username,
            $name,
            $password
 
        ));
 
        $this->setDecorators(array(
        	'FormElements',
            'Fieldset',
            'Form'
 
        ));
 
        foreach ($this->getElements() as $element)
        {
        	$element->setDecorators(array(
                     array('ViewHelper', array('class' => 'formText')),
                     array('Label', array('class' => 'label')),
            		 array('HtmlTag', array('tag' => 'dd'))
                 ));
 
			$element->class = 'formText';
 
        }
    }
 
    private function getOneToMany()
	{
		$ar[" "] = "please select";
		$ar["car"] = "car";
		$ar["rollerBlade"] = "roller blades";
		return $ar;
 
	}
 
}
 

In my post about enterprise validation, I described a scenario where you would create custom validators that could be applied declaratively in C# using the Enterprise Library. The same thinking was applied here with the One To Many by creating a custom validator. This allows you to test the validation (and your business rules) without thinking about the form, the UI or even session:

class Onetomany extends Zend_Validate_Abstract
{
    const NOT_VALID  = 'stringLengthTooLong';
 
    /**
     * @var array
     */
    protected $_messageTemplates = array(
        self::NOT_VALID => "one to many was not valid choice",
 
    );
 
    /**
     * @var array
     */
    protected $_messageVariables = array(
        'not_valid' => '_not_valid',
 
    );
 
    protected $_not_valid;
 
    public function __construct()
    {
 
    }
 
    /**
     * Returns the min option
     *
     * @return integer
     */
    public function getNotValid()
    {
        return $this->_not_valid;
    }
 
    /**
     * Defined by Zend_Validate_Interface
     * @param  string $value
     * @return boolean
     */
    public function isValid($value)
    {
 
		// more business rules would go somewhere here...
        if ($value == " ")
            $this->_error(self::NOT_VALID);
 
        if (count($this->_messages)) {
            return false;
        } else {
            return true;
        }
    }
 
}
 

The last bit of magic is the Javascript. My weapon of choice (as mentioned above) is prototype, however I'm sure you could do the same thing with any other javascript framework:

Event.observe(window , "load" , function()
{
		<?= $this->setMode ?>
});
function attachWebServiceObserver()
{
		var url = "/index/async/";
		var f = JSON.stringify($('frm').serialize(true));
		new Ajax.Request(url , {
			method: 'post',
			parameters: 'fs=' + f,
			onComplete : doAjaxCall.bindAsEventListener(this)
			});
}
function attachPostBackObserver()
{
	$('frm').submit(); //this ID comes from the RegistrationForm class
}
 
function setMode(e)
{
	$$('.tab').each(function(emt) { emt.setStyle( {background : "" }) });
	e.parentNode.setStyle({background :"#FFFF99"});
 
	if (!FIRST_LOAD)
		clearErrors();
 
	if (e.parentNode.id =="wsTab")
	{
		Event.observe('bt', 'click', attachWebServiceObserver);
		Event.stopObserving('bt', 'click', attachPostBackObserver);
		$('bt').value = "Submit Asynchronously";
	}
 
	if (e.parentNode.id =="pbTab" )
	{
		Event.stopObserving('bt', 'click', attachWebServiceObserver);
		Event.observe('bt','click', attachPostBackObserver);
		$('bt').value = "Submit With Postback";
	}
	FIRST_LOAD = false;
 
}
function doAjaxCall(tr)
{
	clearErrors();
 
	if (formIsValid(tr.responseJSON))
		$('frm').submit();
 
	displayErrorMessages(tr.responseJSON);	
 
}
function clearErrors()
{
	$('dvPostbackErrors').update();
	$('dvPostbackErrors').hide();
 
	$$(".errormessage").each(function(e)
	{
		Element.remove(e);
	});
 
	$$("input.formText ").each(function(e)
	{
		e.setStyle({border : "1px solid #CCC"});
	});
	$$("select.formText ").each(function(e)
	{
		e.setStyle({border : "1px solid #CCC"});
	});
 
}
function formIsValid(errorJson)
{
 
	if(isNaN(errorJson))
		return false;
 
	return true;
}
function displayErrorMessages(errorJson)
{
 
	for (formElement in errorJson)
	{
 
		var elementObj = eval("errorJson."+formElement);
 
		for (error in elementObj)
			displayError(formElement , eval("errorJson."+formElement+"."+error));
 
	}
}
function displayError(emt , msg)
{
	var tpl = "<span class='errormessage' >"+msg+"</span>";
 
	markInvalidTextbox(emt);
 
	Element.insert(emt , {"after" : tpl });
}
function markInvalidTextbox(emt)
{
	$(emt).setStyle({border: "2px solid red"});
}
 

In the version that you can download, I include the JSON.stringify class (courtesy of Crawford) to serialize the form and send it the AsyncAction in my IndexController.

This architectural approach allows you to keep all the validation rules server-side, while allowing you to pick and choose when and how you postback. Because this example works with both postback and asynchronous calls, it's a little verbose.

Regardless, you can download the whole project and try it out for yourself.

Unlike most AJAX samples, this example doesn't require any server-side scripting or even a webserver.

Two notes about the video;
- It's not necessary to capture elements in Event.observe using $()
e.g. Event.observe('myHelloLink' ...) instead of Event.observe($('myHelloLink') ... );

- Instead of using innerHTML, you can also use .update("text changed on Load");

Enjoy!

Here's a demo:

Implementing the code is really only one line once you have the back end web service configured:

 var demoAutocompleter = new MyAjaxAutocompleter('tbAutoCompleter', 'dvAutoCompleter', '/demo/html/Ajaxservice/index', {});

where 'tbAutoCompleter' corresponds to the textbox you wish to bind, 'dvAutoCompleter' is the control in question and '/demo/html/Ajaxservice/index' is the actual Web service giving you JSON data.

I'm still having a hard time POSTing to a Zend controller in a manner as elegant as you would find in ASP.NET's web services, however the code isn't really that bad. My AjaxServiceController looks like this:

class AjaxserviceController extends Zend_Controller_Action
{
	public function init()
	{
		$this->_helper->contextSwitch()
             ->addActionContext('index', 'json')
             ->initContext();
 
	}
 
	public function indexAction()
	{
 
       	$this->_helper->viewRenderer->setNoRender();
       	$this->_helper->getHelper('layout')->disableLayout();
 
       /* [Json response] */
		 $data = array("2008","3d","social","software","technology","tips",
"tools","toread","travel","tutorial",
"tutorials","tv","typography", "wiki","windows","wishlist","wordpress"
,"work","writing","youtube");
 
		 $responseData = $this->array_isearch($this->getRequest()->getParam('search') , $data);
 
       try {
 
           $responseDataJsonEncoded = Zend_Json::encode($responseData);
           $this->getResponse()->setHeader('Content-Type', 'application/json')
							   ->setBody($responseDataJsonEncoded);
 
       } catch(Zend_Json_Exception $e) {
           // handle and generate HTTP error code response, see below
       }
 
	}
 
    function array_isearch($str, $array) {
    	$returnArray = array();
        foreach($array as $v) {
            if(preg_match('/$str/i',$v))
            	$returnArray[] = $v;
 
        }
        return $returnArray;
    }
}
 

There's not much here, mostly just disabling the Zend Layout, specifying the content and doing the search. The $data array could easily be replaced with a data source (like a collection from Zend_Db).

Download Ajax Auto Completer Sample Zend Framework 1.5 project

The nice thing about web service AJAX controls is that they live independently of the application calling them, so you can essentially separate out your data layer in the same way that you would separate Zend_Db resources from a Zend_Controller.