Archive | January, 2009

Zend Framework and dojo- Auto Complete Example

27 Jan

Sorry this blog is deprecated.

Find latest version of this article here. http://zendgeek.blogspot.com/2009/07/zend-framework-and-dojo-auto-complete.html

Creation of auto complete in Zend Framework using dojo is like a piece of cake. In one of my previous post I discuss how to create filtering select and populate that using dojo and ajax.

Here I am going to discuss how to create auto complete with combo box. The auto complete textbox will automatically/dynamically fetch data from the database.

So lets get started.

First of all create following functions in you controller.

public function getForm()

{

if (null === $this->_form) {

$this->_form = new Zend_Form();

$this->_form->setMethod(‘get’)

->setAction(

$this->getRequest()->getBaseUrl() . ‘/test/process’

)

->addElements(array(

‘test’ => array(‘type’ => ‘text’, ‘options’ => array(

‘filters’        => array(‘StringTrim’),

‘dojoType’       => array(‘dijit.form.ComboBox’),

‘store’          => ‘testStore’,

‘autoComplete’   => ‘false’,

‘hasDownArrow’   => ‘true’,

‘label’ => ‘Your input:’,

)),

‘go’ => array(‘type’ => ‘submit’,

‘options’ => array(‘label’ => ‘Go!’))

));

}

return $this->_form;

}

In the above code define a function and create a form adding it a combo box.

The important attributes of the combo box are

dojoType, store and autocomplet.

Sorry this blog is deprecated.

Find latest version of this article here. http://zendgeek.blogspot.com/2009/07/zend-framework-and-dojo-auto-complete.html

Advertisements

Zend Framework and JQuery: JQuery Date Picker

25 Jan

Sorry this blog is deprecated.

“Read new version of this article here. code nicely formatted”, http://zendgeek.blogspot.com/2009/07/zend-framework-and-jquery-jquery-date.html

Nearly two months back I used dojo calendar in my application. Although dojo has extremely large library and provide very nice widgets like number spinner, horizontal scroller and more importantly gird, however the current calendar available is not good looking and provide only basic functionality. We were using JACS calendar before using dojo calendar in our application.

After working for a bit of time with dojo calendar we feel that we need JACS type calendar. We were looking for the latest dojo release for getting calendar with more functionality.

Today I find JQuery Date picker, which is similar to the JACS. As Zend Framework latest version now provide JQuery View helper and Form elements, so I decided to write article on it, so that developers using JQuery may find some useful information.

So lets look how to develop a nice and cool JQuery date picker.

At the end of this article we will have a calendar like the following.

Zend Frameworm and JQuery Date Picker

Zend Frameworm and JQuery Date Picker

Sorry this blog is deprecated.

“Read new version of this article here. code nicely formatted”, http://zendgeek.blogspot.com/2009/07/zend-framework-and-jquery-jquery-date.html

Zend Framework and dojo: tricky checkbox

22 Jan

Few weeks back, I used dojo check box in my Zend framework application. Scenario  was a bit different at that time. I was submitting Zend dojo form on the click event of the checkbox. When I created a form and submitted that onclik, It didn’t give me desired results.

I set its checked value to 1 and unchecked value to 0, however when I submited it always gave me a single value. I was looking for 0 and 1, but it always gave me 0. I thought that It was because I was not using proper submit button for the posting of form.

However when today I used checkbox in normal zend dojo form, it gave me the same result. Oh God, how to fix it.

However as I have played with dojo js files, so I got the solution.

Let’s tell you the trick.

First of all create check box as

 

$checkbox= $form->createElement(

                        ‘checkBox’,

                        ‘checkbox’,

                        array(

‘label’ => ‘Tricky check box’,

‘checkedValue’ => 1,

‘uncheckedValue’ => 0

)

);

Now add onclick event to this checkbox element as

$checkbox->setAttrib(‘onclick’,’changeValue()’);

 

Now in your view, where you display this form, write the following javascript function

<script>

function changeValue()

{

if(dijit.byId(‘checkbox’).checked){

            dijit.byId(‘checkbox’).setValue(‘1’);

} else {

            dijit.byId(‘checkbox’).setValue(‘0’);

            dijit.byId(‘checkbox’).checked=false;

}

}

</script>

 

The above code isn’t simple?

Hmm. First we see if we have checked the checkbox, if yes we assign value 1 to it, if not we assign it value 0 and set its checked status to false. This will uncheck the checkbox.

That’s it. Submit your form and you will get desired results.

Doesn’t it help you. Do you have smarter solution than this.

Tell me……

Zend Framework Tutorial- simple signup and login authentication

17 Jan

After writing separate articles on different Zend framework topics, its now time to write a full fledge tutorials. I am starting from a simple sign up and login authentication example and hopefully will discuss some advance topic in future.

So lets get started.

First create a table in your database by executing the following sql query.

CREATE TABLE ‘users’ (

‘id’ int(11) NOT NULL auto_increment,

‘firstname’ varchar(100) default NULL,

‘lastname’ varchar(100) default NULL,

’email’ varchar(255) NOT NULL,

‘username’ varchar(100) NOT NULL,

‘password’ varchar(15) NULL,

PRIMARY KEY  (‘id’)

)

Next create a model against this table in your application/model/ directory. I am creating Users.php and writing the following code in it.

<?

class Users extends Zend_Db_Table

{

protected $_name=”users”;

}

?>

Now create a controller named AuthController.php in application/controllers/ directory and place the following code in it

<?

class AuthController extends Zend_Controller_Action

{

public function loginAction()

{

}

public function signupAction()

{

}

public function logoutAction()

{

}

public function homeAction()

{

}

}

?>

Sorry this blog is deprecated.

“Read new version of this article here”.http://zendgeek.blogspot.com/2009/07/zend-framework-sign-up-and.html

Zend Framework and Dojo: Creating Tabbed Form

15 Jan

I have been playing with Zend framework and dojo for the last few weeks. Its really fun to create a nice and user friendly form in Zend framework using dojo.

Create a form in Zend framework and dojo will do the client side validation and formatting etc.

Today I am going to show you how to create and place form elements in different tabs.

At he end of this we will have a form like the following.

Zend Framework and dojo Tabbed Form

Zend Framework and dojo Tabbed Form

First we will need to create our form as

<?

class MyForm extends Zend_Dojo_Form

{

public function init()

{

$this->setDecorators(array(

‘FormElements’,

array(‘TabContainer’, array(

‘id’          => ‘tabContainer’,

‘style’       => ‘width: 600px; height: 500px;’,

‘dijitParams’ => array(

‘tabPosition’ => ‘top’

),

)),

‘DijitForm’,

));

$subForm1 = new Zend_Dojo_Form_SubForm();

$subForm1->setAttribs(array(

‘name’   => ‘textboxtab’,

‘legend’ => ‘Text Elements’,

‘dijitParams’ => array(

‘title’ => ‘Text Elements’,

),

));

$subForm1->addElement(

‘ComboBox’,

‘combobox’,

array(

‘label’        => ‘ComboBox (select)’,

‘value’        => ‘blue’,

‘autocomplete’ => false,

‘multiOptions’ => array(

‘red’    => ‘Rouge’,

‘blue’   => ‘Bleu’,

‘white’  => ‘Blanc’,

‘orange’ => ‘Orange’,

‘black’  => ‘Noir’,

‘green’  => ‘Vert’,

),

));

$subForm1->addElement(

‘DateTextBox’,

‘datebox’,

array(

‘value’ => ‘2008-07-05’,

‘label’ => ‘DateTextBox’,

‘required’  => true,

)

);

$subForm2 = new Zend_Dojo_Form_SubForm();

$subForm2->setAttribs(array(

‘name’   => ‘toggletab’,

‘legend’ => ‘Toggle Elements’,

));

$subForm2->addElement(

‘NumberSpinner’,

‘ns’,

array(

‘value’             => ‘7’,

‘label’             => ‘NumberSpinner’,

‘smallDelta’        => 5,

‘largeDelta’        => 25,

‘defaultTimeout’    => 1000,

‘timeoutChangeRate’ => 100,

‘min’               => 9,

‘max’               => 1550,

‘places’            => 0,

‘maxlength’         => 20,

)

);

$subForm2->addElement(

‘CheckBox’,

‘checkbox’,

array(

‘label’ => ‘CheckBox’,

‘checkedValue’  => ‘foo’,

‘uncheckedValue’  => ‘bar’,

‘checked’ => true,

)

);

$subForm2->addElement(

‘RadioButton’,

‘radiobutton’,

array(

‘label’ => ‘RadioButton’,

‘multiOptions’  => array(

‘foo’ => ‘Foo’,

‘bar’ => ‘Bar’,

‘baz’ => ‘Baz’,

),

‘value’ => ‘bar’,

)

);

$this->addSubForm($subForm1, ‘textboxtab’)

->addSubForm($subForm2, ‘editortab’);

}

}

?>

In the above code, beside extending our form from Zend_Dojo_Form, we set form decorators as

$this->setDecorators(array(

‘FormElements’,

array(‘TabContainer’, array(

‘id’          => ‘tabContainer’,

‘style’       => ‘width: 600px; height: 500px;’,

‘dijitParams’ => array(

‘tabPosition’ => ‘top’

),

)),

‘DijitForm’,

));

Setting form decorators in this way will automatically put your sub forms in separate tabs.

Next we create two sub form, set their legend and add elements to them.

An the end we add sub forms to our form.

In controller, write

$form = new MyForm();

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

And in the view write

<?

Echo $this->form;

?>

That’s it. You will now see a nice user interface with tab container having sub form in each.

Zend Framework and dojo-grid sorting example

12 Jan

In my previous post “dojo-grid-in-zend-framework:creating-nice-and-cool-grid-in-php-using-zend-framework-and-dojo” I discuss how to creat nice and cool gird using Zend framework and dojo.

In this article I am going one step further and show you how easy it is to apply sorting to your dojo grid.

Please read my previous article befor writing this code.

In your model write

public function getJobsData($sort,$order)

{

$select = $this->_db->select()

->from($this->_name)

->order(” “.$sort.” ” . $order);

$results = $this->getAdapter()->fetchAll($select);

return $results;

}

If you compare this model with the previous one, you will find that we are passing tow extra parameter here and a line

->order(” “.$sort.” ” . $order);

This will sort our data according to the field we will click on.

Now In your controller, write

public function  recordsAction()

{

$jobs = new Jobs();

if ($this->getRequest()->isXmlHttpRequest()){

$sort=$this->getRequest()->getParam(‘sort’);

}

if($sort==””){

$sort=”id”;

}

if(strchr($sort,’-‘)){

$sort = substr($sort,1,strlen($sort));

$order = “Desc”;

} else {

$order=”Asc”;

}

$data= $jobs->getJobsData($sort,$order);

$dojoData= new Zend_Dojo_Data(‘id’,$data,’id’);

echo $dojoData->toJson();

exit;

}

Here we first check if we get ajax request. If yes, we get the value of the variable sort (dojo grid passed this as parameter when we click on it field), so we should not worry about it. Dojo grid either pass “field name” or field name with -ve sign.

we check if the sort variable has -ve sign attached with it. If we found we then remove the first character and set sort order to “Desc”. if we don’t find -ve sign we simply set sort order to “Asc”. we then call our model function

getJobsData() giving it $sort and $order variable. the result return is converted to json.

The last minor change we will do in our view template code

<div dojoType=”dojox.data.QueryReadStore” clientSort=”true jsId=”activeStore”, url=”records” ></div>

The only change we did is highlited in red.

That’s it nice and cool dojo grid with sorting.

Hopefully in next article I’d discuss how to implement pagging in the dojo grid.

Dojo Ajax Combo box in Zend Framework: Creating Ajax combo box using dojo in zend framework

9 Jan

Damn it. I wasn’t even imagining that Zend team has done such a wonderful job for creating ajax enabled application. Last night I was amazed by dojo grid and today by combo box.

I don’t have words to appreciate Zend developers.

Lets see how much time and efforts it takes to make a fabulous ajax enabled combo box using dojo and zend framework.

Create a controller and place the following code

<?

class TestController extends Zend_Controller_Action

{

function indexAction()

{

$form= new Zend_Dojo_Form();

$form->addElement(

‘ComboBox’,

‘foo’,

array(

‘label’       => ‘ComboBox (datastore)’,

‘storeId’     => ‘stateStore’,

‘storeType’   => ‘dojo.data.ItemFileReadStore’,

‘storeParams’ => array(

‘url’ => ‘records’,

),

‘dijitParams’ => array(

‘searchAttr’ => ‘name’,

),

)

);

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

}

function recordsAction()

{

$db=Zend_Registry::get(‘db’);

$sql = ‘SELECT * FROM company’;

$result = $db->fetchAll($sql);

$dojoData= new Zend_Dojo_Data(‘id’,$result,’id’);

echo $dojoData->toJson();

exit;

}

}

We define our form as

$form = new Zend_Dojo_Form();

 

And combo box element to it. Few of it properties are important, such as storeId, storeType and storeParams. In the store Params we have given the url of the action.

Next we define our action which fetch data form the table and create Json response for us. That’s it we have done.

In view/scripts/index.phtml, only write

<? echo $this->form?>

 

Only one thing. Write following lines in your layout file

<? $this->dojo()->setDjConfigOption(‘usePlainJson’,true)

->addStylesheetModule(‘dijit.themes.tundra’)

->setLocalPath(“http://localhost/Zend/js/dojo/dojo/dojo.js&#8221;)

->addLayer(“http://localhost/Zend/js/dojo/dojo/dojo.js&#8221;);

echo $this->dojo();

?>

That’s it.  You will now see a nice and beautiful combo box sending ajax request and fetching data on the fly.