Create Ajax Login Page

Article shows how to create Ajax forms with server-side actions using the Dojo toolkit and Zend Framework. It guides you through creation of a sample user login form that uses dojo.xhrPost to sent the login request and Zend MVC to respond on this request.

A few days ago I understood the right way to the the farmework. Frankly speaking, it does not help with creating Web forms - it has no high-level complex components like TDataGrid in PRADO or even Repeater in ASP.NET. And what I understood is that it is not Zend Framework’s business how developers are creating their forms and here is a reason for this: modern pages are created with a lot of JavaScript and, I believe, are created with client-side components, not server-side. For example, Dojo toolkit or Backbase framework has a lot of JavaScript components for creating powerful pages. Basic form controls, complex components like DataGrid are ready to use and Zend Framework only should help with providing them with data and performing various operations with a controller. And now it has enough to serve “rich clients” requests.

So I tried this new way and created a simple form with the Dojo and Zend Framework. The result is just excellent for me and I wish Dojo toolkit growing and hope that it will acquire a few more complex components, like DataGrid with paging and sorting. And here is a short review of the creation.

The content of the article can be interested to you even if you only read it. But if you want to improve your skills and create the similar Ajax page, you need to get the Dojo toolkit and Zend Framework. Installation of the Dojo toolkit is very simple: just unpack it to the folder that is accessible by site users. The next you need to download an installation of Zend Framework. Use the installation instruction to choose a best place to unpack the archives. As for me, I prefer “/libs/dojo/” for Dojo and “/libs/server/ZendFramework/” for Zend Framework.

A typical login form contains a server-side login action, a form with Login and Password fields and Login button that executes server login action. The login action returns the status of operation or redirect URL. It was exactly what I wanted to create for my system.

I created a page that hosts the login form with the controls, which I wrote about a few lines above, and includes dojo toolkit packages. The page itself is a PHP script intended to be run in a Zend_View context.


<!DOCTYPE html>
  <title>Login page</title>
  <!-- Dojo toolkit main include -->
  <script type="text/javascript" src="/libs/dojo-1.4.1/dojo/dojo.js"></script>
  <script type="text/javascript">
   * Executes login server action and shows 
   * a result or performs a redirect.
  function login(srcElement) {
    // send request to server
    // cancel event
    return false;
      <tr><td>Login:</td><td><input id="login" /></td></tr>
      <tr><td>Password:</td><td><input id="password" /></td></tr>
    <button onclick="login(this);">Login</button>

The following Admin Contoller has two actions: for displaying the Login page and executing Login action.


class LoginController extends Zend_Controller_Action {
  function indexAction() {
    $view = new Zend_View();
    echo $view->render('Login.php');

  function doLoginAction() {
    // check inputs and return
    // validation error or new url

  function successAction() {
    echo 'Congratulations! You are in.';

The files above are a framework of the future page, which will be extended with the right code. They demonstrate a page structure and focus your attention on the page construction, without implementation details. Almost any form contains similar construction blocks: inputs, buttons for submitting data to a server, server actions.

On the next step, I need to extend the functionality and replace the comments with the right code. The client code should send request to the server and, when server returns a URL, change the location. Otherwise it shows server’s response assuming that the server returned an error message. The request could be sent with the dojo.xhrPost method, you can find a detailed explanation of the dojo.xhrPost in the manual. So, the code of the login client function can be similar to the following:

  content : {
    login : dojo.byId('login').value,
    password : dojo.byId('password').value
  url: '/Login/DoLogin/',
  load: function(response, ioArgs) {
    if ('url:' == response.substr(0, 4)) {
      location.href = response.substr(4);
    } else {

Server side action should validate the passed login and password, check if a user with such credentials exists and return the “url:/Login/Success/” when login is successful, or error message when it is not. The following code example contains very simple check of login/password and login - definitely you need to change this part when you consider using similar code in your application.

function doLoginAction() {
  $filter = new Zend_Filter_Input($_POST);
  if (!($login = $filter->testAlnum('login'))) {
    echo "Login field should contains only alphanumeric characters.\n";
  } else if (!($password = $filter->testAlnum('password'))) {
    echo "Password field should contains only alphanumeric characters.\n";
  } else if (!('joe' == $login && 'secret' == $password)) {
    echo 'Wrong login/password.';
  } else {
    echo 'url:/Login/Success/';

You can try to login with username “joe” and password “secret” or try to submit some invalid inputs to check how the system reacts to the wrong data.