just a nice blog: Ext Js Login Sample

This is a simple login application using PHP and ExtJs. I used to master ExtJs but since I shifted to Java, some of the knowledge I acquired has gone away. Instead of forgetting all of it, which I tend to, I chose to post them here so I can remember them when they will be needed.

What to do?

1. Create a php file for the view section. I've named it authenticateView.php

<div style="height:300px;width: 500px;">
    <div id="login-panel">

    </div>
</div>

2. Created a javascript file which I named it authenticate.js.

Ext.onReady(function(){
    Ext.QuickTips.init();

   new Ext.Panel({
       id           : "ext-panel",
       renderTo     : "login-panel",
       bodyStyle    : "background-color:aliceblue;",
       height       : 250,
       width        : 500,
       items        : [
           new Ext.FormPanel({
                id      : "login-form",
                bodyStyle : "background-color:transparent",
                style   : {
                    'padding-top': 80
                },
                border  : false,
                height  : 180,
                width   : 370,
                monitorValid : true,
                items   : [
                    new Ext.form.TextField({
                        id          : 'username',
                        name        : 'username',
                        fieldLabel  : 'Username',
                        allowBlank  : false,
                        blankText   : 'Username is required.',
                        msgTarget   : 'side',
                        width       : 200
                    }),
                    new Ext.form.TextField({
                        id          : 'password',
                        name        : 'password',
                        inputType   : 'password',
                        fieldLabel  : 'Password',
                        blankText   : 'Password is required.',
                        allowBlank  : false,
                        msgTarget   : 'side',
                        width       : 200
                    })
                ],
                buttons:[
                    {
                       text : 'Login',
                       handler : function(){
                           authenticate(Ext.getCmp('username').getValue(),Ext.getCmp('password').getValue())
                       }
                    },
                    {
                       text : 'Reset',
                       handler : function(){
                           Ext.getCmp('login-form').getForm().reset();
                       }
                    }
                ]
           })
       ]
   })
})

function authenticate(u,p){
    var dataPanel = Ext.getCmp('ext-panel');
    Ext.Ajax.on('beforerequest',function(conn,o,result){
        dataPanel.getEl().mask('Authenticating...','x-mask-loading');
    })

    Ext.Ajax.on('requestcomplete',function(conn,o,result){
        dataPanel.getEl().unmask(true);
    })

    Ext.Ajax.on('requestexception',function(conn,o,result){
        dataPanel.getEl().unmask(true);
        Ext.MessageBox.show({
            title   : 'Message',
            msg     : '<div style="margin-top:5px;text-align:center;color:red;">Server Error</div>',
            width   : 300,
            buttons : Ext.MessageBox.OK,
            animEl  : 'ext-panel',
            iconCls : 'login-button-icon'
        });
    });

    Ext.Ajax.request({
        url : "index.php?page=login&action=authenticateScript&wp=0",
        method : "POST",
        params : {_password:p,_user:u},
        callback : function(options,success,result){
            var response = Ext.util.JSON.decode(result.responseText);
            if(!response.success){
                Ext.MessageBox.show({
                    title   : 'Message',
                    msg     : '<div style="margin-top:5px;text-align:center">' + response.error.reason + '</div>',
                    width   : 300,
                    buttons : Ext.MessageBox.OK,
                    animEl  : 'ext-panel',
                    iconCls : 'login-button-icon'
                });
            }else{
                Ext.MessageBox.show({
                    title   : 'Message',
                    msg     : '<div style="margin-top:5px;text-align:center">Login Successful</div>',
                    width   : 300,
                    buttons : Ext.MessageBox.OK,
                    animEl  : 'ext-panel',
                    iconCls : 'login-button-icon'
                });
            }
        }
    })
}

3. Created a Controller which I named it LoginController.php

<?php
class LoginController extends ActionController{
    
    function doAuthenticate(){
        $this->dynamicJs = "";
    }

    function doAuthenticateScript(){
        $message['success'] = false;

        $name = $_POST['_user'];
        $pass = $_POST['_password'];

        require_once 'application/model/login/LoginModel.php';

        $loginModel = new LoginModel();
        $loginModel->autheticateUser($name, $pass);

        if(!LoginModel::$SUCCESS){
            $message['error']['reason'] = LoginModel::$MESSAGE;
        }else{
            $message['success'] = true;
        }

        echo json_encode($message);
    }
}
?>

4. Created the model layer which I name it LoginModel.php

<?php

class LoginModel{

    public static $SUCCESS = false;
    public static $MESSAGE;


    function autheticateUser($user,$pass){
        if($user == 'admin'){
            if($pass == 'admin'){
                LoginModel::$SUCCESS = true;
            }else{
                LoginModel::$MESSAGE = "Password is invalid!";
            }
        }else{
            LoginModel::$MESSAGE = "Username is invalid!";
        }
    }
}
?>

5. Got a working login with with php and extjs.