Zend Framework and JQuery : JQuery Date Picker
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.
First of all download the latest version of Zend framework and placed “ZendX” folder in the library/ directory. The same library/ directory where your Zend folder reside.
Now to create the above calendar we will first need to write the following code in our bootstrap file.
$view= new Zend_View();
$viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
$view->addHelperPath(’ZendX/JQuery/View/Helper/’, ‘ZendX_JQuery_View_Helper’);
$viewRenderer->setView($view);
Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);
Here we are initializing our Zend_View object (don’t initialize it if you have already done in bootstrap file).
Next we initialize Zend_Cotroller_Action_Helper_ViewRendere object and add helper path.
At the end we set view to viewRenderer and add helper to the Zend_Controller_Action_HelperBroker.
That’s it we have now setup our environment.
Next we enable JQuery in our layout file as
$this->jQuery()->setLocalPath('http://localhost/zend/js/jquery/jquery-1.2.6.js')
->addStylesheet('http://localhost/zend/js/jquery/themes/ui.datepicker.css');
echo $this->jQuery();
we are setting path to the jquery js file and datepicker css file.
Next in the view template file
Pick your Date: <?= $this->datePicker("dp1",
'',
array('defaultDate' => date('Y/m/d', time()))); ?>
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()
{
}
}
As we have now create our controller and three actions, we will need to create templates files for actions. Go application/views/scripts and create a folder named “auth” and create three files in application/views/scripts/auth named
login.phtml
signup.phtml
logout.phtml
home.phtml
As we will need to have forms for sign up and login so we are going to create to files named “LoginForm.php” and “RegistrationForm.php” for these forms in application/forms/ directory.
In LoginForm.php place the following code
class LoginForm extends Zend_Form
{
public function init()
{
}
}
class LoginForm extends Zend_Form
{
public function init()
{
}
}
and in the RegistrationForm.php place the following code
class RegistrationForm extends Zend_Form
{
public function init()
{
}
}
So far you can see that we have created all our necessary files.
No lets put the application logic in these files.
We are starting from the forms first.
In LoginForm.php, write the following code
class LoginForm extends Zend_Form
{
public function init()
{
$username = $this->createElement(’text’,'username’);
$username->setLabel(’Username: *’)
->setRequired(true);
$password = $this->createElement(’password’,'password’);
$password->setLabel(’Password: *’)
->setRequired(true);
$signin = $this->createElement(’submit’,’signin’);
$signin->setLabel(’Sign in’)
->setIgnore(true);
$this->addElements(array(
$username,
$password,
$signin,
));
}
}
In the above form we are creating two text elements named “usernam” and “password”, set their labels and setRequred to true. Next we create a submit button.
Similarly in RegistrationForm.php, write the following code
class RegistrationForm extends Zend_Form
{
public function init()
{
$firstname = $this->createElement('text','firstname');
$firstname->setLabel('First Name:')
->setRequired(false);
$lastname = $this->createElement('text','lastname');
$lastname->setLabel('Last Name:')
->setRequired(false);
$email = $this->createElement('text','email');
$email->setLabel('Email: *')
->setRequired(false);
$username = $this->createElement('text','username');
$username->setLabel('Username: *')
->setRequired(true);
$password = $this->createElement('password','password');
$password->setLabel('Password: *')
->setRequired(true);
$confirmPassword = $this->createElement('password','confirmPassword');
$confirmPassword->setLabel('Confirm Password: *')
->setRequired(true);
$register = $this->createElement('submit','register');
$register->setLabel('Sign up')
->setIgnore(true);
$this->addElements(array(
$firstname,
$lastname,
$email,
$username,
$password,
$confirmPassword,
$register
));
}
}
In the above code we have created several elements and place them in the form. Keep in mind that we have place * next to compulsory elements labels.
As we have now created our forms, next step is to display these in the templates files. However to do this we will first need to initialize these in our controller
So in AuthController.php, write the following code
class AuthController extends Zend_Controller_Action
{
public function homeAction()
{
$storage = new Zend_Auth_Storage_Session();
$data = $storage->read();
if(!$data){
$this->_redirect('auth/login');
}
$this->view->username = $data->username;
}
public function loginAction()
{
$users = new Users();
$form = new LoginForm();
$this->view->form = $form;
if($this->getRequest()->isPost()){
if($form->isValid($_POST)){
$data = $form->getValues();
$auth = Zend_Auth::getInstance();
$authAdapter = new Zend_Auth_Adapter_DbTable($users->getAdapter(),'users');
$authAdapter->setIdentityColumn('username')
->setCredentialColumn('password');
$authAdapter->setIdentity($data['username'])
->setCredential($data['password']);
$result = $auth->authenticate($authAdapter);
if($result->isValid()){
$storage = new Zend_Auth_Storage_Session();
$storage->write($authAdapter->getResultRowObject());
$this->_redirect('auth/home');
} else {
$this->view->errorMessage = "Invalid username or password. Please try again.";
}
}
}
}
public function signupAction()
{
$users = new Users();
$form = new RegistrationForm();
$this->view->form=$form;
if($this->getRequest()->isPost()){
if($form->isValid($_POST)){
$data = $form->getValues();
if($data['password'] != $data['confirmPassword']){
$this->view->errorMessage = "Password and confirm password don't match.";
return;
}
if($users->checkUnique($data['username'])){
$this->view->errorMessage = "Name already taken. Please choose another one.";
return;
}
unset($data['confirmPassword']);
$users->insert($data);
$this->_redirect('auth/login');
}
}
}
public function logoutAction()
{
$storage = new Zend_Auth_Storage_Session();
$storage->clear();
$this->_redirect('auth/login');
}
}
It will be hard for beginners to understand the above code. So lets break it and see what this code is all about.
public function homeAction()
{
$storage = new Zend_Auth_Storage_Session();
$data = $storage->read();
if(!$data){
$this->_redirect('auth/login');
}
$this->view->username = $data->username;
}
The above code is very simple. We first create instance of Zend_Auth_Storage_Session class. Next we call its read method. This will return a row of records if the users is authenticated, otherwise null.
We check if the data is null. If yes, we redirect our page to the login action.
If data is found, it means that user is authenticated and we assign username to the view template. So display welcome message in our home.phtml template, open views/scripts/auth/home.phtml and write the following code.
Welcome <?=$this->username?>,<br>
This is your home page<br>
<a href=”<?=$this->url(array(’controller’=>’auth’,'action’=>’logout’))?>”>click here to logout</a>
In the code above we have a link to the logout action, which simply destroy our session.
Next
public function loginAction()
{
$users = new Users();
$form = new LoginForm();
$this->view->form = $form;
if($this->getRequest()->isPost()){
if($form->isValid($_POST)){
$data = $form->getValues();
$auth = Zend_Auth::getInstance();
$authAdapter = new Zend_Auth_Adapter_DbTable($users->getAdapter(),'users');
$authAdapter->setIdentityColumn('username')
->setCredentialColumn('password');
$authAdapter->setIdentity($data['username'])
->setCredential($data['password']);
$result = $auth->authenticate($authAdapter);
if($result->isValid()){
$storage = new Zend_Auth_Storage_Session();
$storage->write($authAdapter->getResultRowObject());
$this->_redirect('auth/home');
} else {
$this->view->errorMessage = "Invalid username or password. Please try again.";
}
}
}
}
In the fist two lines we create instances of our model and login form with statements
$users = new Users();
$form = new LoginForm();
In the third line we assign form instance to view template for display purpose.
The logic of logging in is defined in the next lines
We first check that the users has posted the request. If yes we check that he has submitted valid form. If both the condition return true, we get the values submitted as
$data = $form->getValues();
Next we create instance of Zend_Auth with code
$auth = Zend_Auth::getInstance();
and $authAdapter with
$authAdapter = new Zend_Auth_Adapter_DbTable($users->getAdapter(),’users’);To perform authentication we will need to either use existing Adapters provided by Zend or create our own.
Here I am using DbTable Adapter provided by Zend, giving adapter and database table name. our table name is users.
Next we set identity and credential columns.
After that we give posted values to the $adapter.
To perform authentication we will need to call Zend_Auth authenticate() method, for this we write
$result = $auth->authenticate($authAdapter);
Next we check if the result is valid with statement $result->isValid(). This either return true or false. If it return true it means that we found a record in the database.
If valid record is found we create session instance and store the user data in the session with statements
$storage = new Zend_Auth_Storage_Session();
$storage->write($authAdapter->getResultRowObject());
and redirect our request to home action.
$this->_redirect(’auth/home’);
If result is not valid we assign error message to our template file
In application/views/scripts/login.phml, write the following
<?
if(isset($this->errorMessage)){
echo $this->errorMessage;
}?>
<?
echo $this->form;
?>
<a href=”<?=$this->url(array(’controller’=>’auth’,'action’=>’signup’))?>”>New users click here?</a>
In the code above we first check the error message, if set we display it.
In the next line we display our login form.
Next
public function signupAction()
{
$users = new Users();
$form = new RegistrationForm();
$this->view->form=$form;
if($this->getRequest()->isPost()){
if($form->isValid($_POST)){
$data = $form->getValues();
if($data['password'] != $data['confirmPassword']){
$this->view->errorMessage = "Password and confirm password don't match.";
return;
}
if($users->checkUnique($data['username'])){
$this->view->errorMessage = "Name already taken. Please choose another one.";
return;
}
unset($data['confirmPassword']);
$users->insert($data);
$this->_redirect('auth/login');
}
}
}
This action is used for signup purpose. We create instance of our model class and Registration Form. And assign form to our view template.
Check for the post request and valid form.
If the form is valid we get form values. Check if both the password fields don’t have same data. If they are not same we assign error message to the view template.
Next we call our checkUnique() method of the model class. This checkUnique() method check the data in the database. If row with the posted username is already in the database it return ture, means username already exist in the database. If username found we assign error message to view telling the user to choose another username. It not we insert the data in the database. And redirect the request to login action.
Our model class look as
class Users extends Zend_Db_Table
{
protected $_name="users";
function checkUnique($username)
{
$select = $this->_db->select()
->from($this->_name,array('username'))
->where('username=?',$username);
$result = $this->getAdapter()->fetchOne($select);
if($result){
return true;
}
return false;
}
}
To create a template file for the signup action, place the following code in views/scripts/auth/signup.phtml
<?
if(isset($this->errorMessage)){
echo $this->errorMessage;
}?>
<h4>Sign up</h4>
<?
echo $this->form;
?>first we check for the error, if error message is set in the action we display that.
Next we display our Registarion form.
The last and final thing is our logout action.
public function logoutAction()
{
$storage = new Zend_Auth_Storage_Session();
$storage->clear();
$this->_redirect('auth/login');
}
Here we create instance of Zend_Auth_Storage_Session and clear it.
And we then redirect our request to login action.
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.
First of all download the latest version of Zend framework and placed “ZendX” folder in the library/ directory. The same library/ directory where your Zend folder reside.
Now to create the above calendar we will first need to write the following code in our bootstrap file.
$view= new Zend_View();
$viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
$view->addHelperPath(’ZendX/JQuery/View/Helper/’, ‘ZendX_JQuery_View_Helper’);
$viewRenderer->setView($view);
Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);
Here we are initializing our Zend_View object (don’t initialize it if you have already done in bootstrap file).
Next we initialize Zend_Cotroller_Action_Helper_ViewRendere object and add helper path.
At the end we set view to viewRenderer and add helper to the Zend_Controller_Action_HelperBroker.
That’s it we have now setup our environment.
Next we enable JQuery in our layout file as
$this->jQuery()->setLocalPath('http://localhost/zend/js/jquery/jquery-1.2.6.js')
->addStylesheet('http://localhost/zend/js/jquery/themes/ui.datepicker.css');
echo $this->jQuery();
we are setting path to the jquery js file and datepicker css file.
Next in the view template file
Pick your Date: <?= $this->datePicker("dp1",
'',
array('defaultDate' => date('Y/m/d', time()))); ?>
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()
{
}
}
As we have now create our controller and three actions, we will need to create templates files for actions. Go application/views/scripts and create a folder named “auth” and create three files in application/views/scripts/auth named
login.phtml
signup.phtml
logout.phtml
home.phtml
As we will need to have forms for sign up and login so we are going to create to files named “LoginForm.php” and “RegistrationForm.php” for these forms in application/forms/ directory.
In LoginForm.php place the following code
class LoginForm extends Zend_Form
{
public function init()
{
}
}
class LoginForm extends Zend_Form
{
public function init()
{
}
}
and in the RegistrationForm.php place the following code
class RegistrationForm extends Zend_Form
{
public function init()
{
}
}
So far you can see that we have created all our necessary files.
No lets put the application logic in these files.
We are starting from the forms first.
In LoginForm.php, write the following code
class LoginForm extends Zend_Form
{
public function init()
{
$username = $this->createElement(’text’,'username’);
$username->setLabel(’Username: *’)
->setRequired(true);
$password = $this->createElement(’password’,'password’);
$password->setLabel(’Password: *’)
->setRequired(true);
$signin = $this->createElement(’submit’,’signin’);
$signin->setLabel(’Sign in’)
->setIgnore(true);
$this->addElements(array(
$username,
$password,
$signin,
));
}
}
In the above form we are creating two text elements named “usernam” and “password”, set their labels and setRequred to true. Next we create a submit button.
Similarly in RegistrationForm.php, write the following code
class RegistrationForm extends Zend_Form
{
public function init()
{
$firstname = $this->createElement('text','firstname');
$firstname->setLabel('First Name:')
->setRequired(false);
$lastname = $this->createElement('text','lastname');
$lastname->setLabel('Last Name:')
->setRequired(false);
$email = $this->createElement('text','email');
$email->setLabel('Email: *')
->setRequired(false);
$username = $this->createElement('text','username');
$username->setLabel('Username: *')
->setRequired(true);
$password = $this->createElement('password','password');
$password->setLabel('Password: *')
->setRequired(true);
$confirmPassword = $this->createElement('password','confirmPassword');
$confirmPassword->setLabel('Confirm Password: *')
->setRequired(true);
$register = $this->createElement('submit','register');
$register->setLabel('Sign up')
->setIgnore(true);
$this->addElements(array(
$firstname,
$lastname,
$email,
$username,
$password,
$confirmPassword,
$register
));
}
}
In the above code we have created several elements and place them in the form. Keep in mind that we have place * next to compulsory elements labels.
As we have now created our forms, next step is to display these in the templates files. However to do this we will first need to initialize these in our controller
So in AuthController.php, write the following code
class AuthController extends Zend_Controller_Action
{
public function homeAction()
{
$storage = new Zend_Auth_Storage_Session();
$data = $storage->read();
if(!$data){
$this->_redirect('auth/login');
}
$this->view->username = $data->username;
}
public function loginAction()
{
$users = new Users();
$form = new LoginForm();
$this->view->form = $form;
if($this->getRequest()->isPost()){
if($form->isValid($_POST)){
$data = $form->getValues();
$auth = Zend_Auth::getInstance();
$authAdapter = new Zend_Auth_Adapter_DbTable($users->getAdapter(),'users');
$authAdapter->setIdentityColumn('username')
->setCredentialColumn('password');
$authAdapter->setIdentity($data['username'])
->setCredential($data['password']);
$result = $auth->authenticate($authAdapter);
if($result->isValid()){
$storage = new Zend_Auth_Storage_Session();
$storage->write($authAdapter->getResultRowObject());
$this->_redirect('auth/home');
} else {
$this->view->errorMessage = "Invalid username or password. Please try again.";
}
}
}
}
public function signupAction()
{
$users = new Users();
$form = new RegistrationForm();
$this->view->form=$form;
if($this->getRequest()->isPost()){
if($form->isValid($_POST)){
$data = $form->getValues();
if($data['password'] != $data['confirmPassword']){
$this->view->errorMessage = "Password and confirm password don't match.";
return;
}
if($users->checkUnique($data['username'])){
$this->view->errorMessage = "Name already taken. Please choose another one.";
return;
}
unset($data['confirmPassword']);
$users->insert($data);
$this->_redirect('auth/login');
}
}
}
public function logoutAction()
{
$storage = new Zend_Auth_Storage_Session();
$storage->clear();
$this->_redirect('auth/login');
}
}
It will be hard for beginners to understand the above code. So lets break it and see what this code is all about.
public function homeAction()
{
$storage = new Zend_Auth_Storage_Session();
$data = $storage->read();
if(!$data){
$this->_redirect('auth/login');
}
$this->view->username = $data->username;
}
The above code is very simple. We first create instance of Zend_Auth_Storage_Session class. Next we call its read method. This will return a row of records if the users is authenticated, otherwise null.
We check if the data is null. If yes, we redirect our page to the login action.
If data is found, it means that user is authenticated and we assign username to the view template. So display welcome message in our home.phtml template, open views/scripts/auth/home.phtml and write the following code.
Welcome <?=$this->username?>,<br>
This is your home page<br>
<a href=”<?=$this->url(array(’controller’=>’auth’,'action’=>’logout’))?>”>click here to logout</a>
In the code above we have a link to the logout action, which simply destroy our session.
Next
public function loginAction()
{
$users = new Users();
$form = new LoginForm();
$this->view->form = $form;
if($this->getRequest()->isPost()){
if($form->isValid($_POST)){
$data = $form->getValues();
$auth = Zend_Auth::getInstance();
$authAdapter = new Zend_Auth_Adapter_DbTable($users->getAdapter(),'users');
$authAdapter->setIdentityColumn('username')
->setCredentialColumn('password');
$authAdapter->setIdentity($data['username'])
->setCredential($data['password']);
$result = $auth->authenticate($authAdapter);
if($result->isValid()){
$storage = new Zend_Auth_Storage_Session();
$storage->write($authAdapter->getResultRowObject());
$this->_redirect('auth/home');
} else {
$this->view->errorMessage = "Invalid username or password. Please try again.";
}
}
}
}
In the fist two lines we create instances of our model and login form with statements
$users = new Users();
$form = new LoginForm();
In the third line we assign form instance to view template for display purpose.
The logic of logging in is defined in the next lines
We first check that the users has posted the request. If yes we check that he has submitted valid form. If both the condition return true, we get the values submitted as
$data = $form->getValues();
Next we create instance of Zend_Auth with code
$auth = Zend_Auth::getInstance();
and $authAdapter with
$authAdapter = new Zend_Auth_Adapter_DbTable($users->getAdapter(),’users’);To perform authentication we will need to either use existing Adapters provided by Zend or create our own.
Here I am using DbTable Adapter provided by Zend, giving adapter and database table name. our table name is users.
Next we set identity and credential columns.
After that we give posted values to the $adapter.
To perform authentication we will need to call Zend_Auth authenticate() method, for this we write
$result = $auth->authenticate($authAdapter);
Next we check if the result is valid with statement $result->isValid(). This either return true or false. If it return true it means that we found a record in the database.
If valid record is found we create session instance and store the user data in the session with statements
$storage = new Zend_Auth_Storage_Session();
$storage->write($authAdapter->getResultRowObject());
and redirect our request to home action.
$this->_redirect(’auth/home’);
If result is not valid we assign error message to our template file
In application/views/scripts/login.phml, write the following
<?
if(isset($this->errorMessage)){
echo $this->errorMessage;
}?>
<?
echo $this->form;
?>
<a href=”<?=$this->url(array(’controller’=>’auth’,'action’=>’signup’))?>”>New users click here?</a>
In the code above we first check the error message, if set we display it.
In the next line we display our login form.
Next
public function signupAction()
{
$users = new Users();
$form = new RegistrationForm();
$this->view->form=$form;
if($this->getRequest()->isPost()){
if($form->isValid($_POST)){
$data = $form->getValues();
if($data['password'] != $data['confirmPassword']){
$this->view->errorMessage = "Password and confirm password don't match.";
return;
}
if($users->checkUnique($data['username'])){
$this->view->errorMessage = "Name already taken. Please choose another one.";
return;
}
unset($data['confirmPassword']);
$users->insert($data);
$this->_redirect('auth/login');
}
}
}
This action is used for signup purpose. We create instance of our model class and Registration Form. And assign form to our view template.
Check for the post request and valid form.
If the form is valid we get form values. Check if both the password fields don’t have same data. If they are not same we assign error message to the view template.
Next we call our checkUnique() method of the model class. This checkUnique() method check the data in the database. If row with the posted username is already in the database it return ture, means username already exist in the database. If username found we assign error message to view telling the user to choose another username. It not we insert the data in the database. And redirect the request to login action.
Our model class look as
class Users extends Zend_Db_Table
{
protected $_name="users";
function checkUnique($username)
{
$select = $this->_db->select()
->from($this->_name,array('username'))
->where('username=?',$username);
$result = $this->getAdapter()->fetchOne($select);
if($result){
return true;
}
return false;
}
}
To create a template file for the signup action, place the following code in views/scripts/auth/signup.phtml
<?
if(isset($this->errorMessage)){
echo $this->errorMessage;
}?>
<h4>Sign up</h4>
<?
echo $this->form;
?>first we check for the error, if error message is set in the action we display that.
Next we display our Registarion form.
The last and final thing is our logout action.
public function logoutAction()
{
$storage = new Zend_Auth_Storage_Session();
$storage->clear();
$this->_redirect('auth/login');
}
Here we create instance of Zend_Auth_Storage_Session and clear it.
And we then redirect our request to login action.
No comments:
Post a Comment