Creating Register and Login Form Using EXTJS and CodeIgniter

June 2nd, 2010 by aditia rahman / 95 Comments  

     

Like another tutorial this post will create the basic form login and register using Extjs and Codeigniter, and I want to mix my previous post about Codeigniter Session Library, Extjs Unique Field Validation and using Statusbar in Extjs Window.

1. Setting up the database

Using phpmyadmin in XAMPP I create the database named “ci_extjs_login”, and create simple “users” table, here below is the sql code that I generated from phpmyadmin, for more advance database modelling you can use mysql workbench.

CREATE TABLE  `ci_extjs_login`.`users` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 100 ) NOT NULL ,
`password` VARCHAR( 100 ) NOT NULL ,
`email` VARCHAR( 100 ) NOT NULL
) ENGINE = MYISAM ;

2. Setting up the Codeigniter

If you not have the copy of codeigniter you can download the latest from here here, then copy the extracted file in your server folder, (here I’m using the default XAMPP htdocs), first setting the databse connection, open the file “system/application/config/database.php”, set the hostname, username, password, and database name (for username & password I’m using the XAMPP default)

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "";
$db['default']['database'] = "ci_extjs_login";

Setting the config file, open file “system/application/config/config.php”, my base_url setting is like this (set the value to “http://localhost/ci_extjs_login/”)

$config['base_url'] = "http://localhost/ci_extjs_login/";

Setting the autoload file, open file “system/application/config/autoload.php”, in this file set the default loaded helpers and libraries to be loaded by the application

$autoload['libraries'] = array('database', 'session', 'my_usession');

As you can see above, the “database” and “session”, are the default codeigniter library, for “my_usession” i’m using my own library it’s pretty simple to implement, to see more you can read my previous post, next to load the url codeigniter helper, this will help when you linking a page to the server in Extjs.

$autoload['helper'] = array('url');

Setting the route file, open file “system/application/config/routes.php”, change the default controller to “user” even though in this step we haven’t create the file yet

$route['default_controller'] = "user";

3. Adding the Extjs file to in Codeigniter

I usually create the separated folder from system in Codeigniter, create “assets” folder to put all images, css and javascript file, so you can put all the Extjs file in the js folder, as you can see on the image in the right. All Extjs file placed in the “ext” folder and the “ext_plugins” folder is the where I usually placed the plugins. You can see “nbproject” folder, this is the auto generated folder when you are developing project using netbeans, you can remove it if you are in the production state. The next is to include the Extjs file in every html header, now create view file in codeigniter here “system/application/views/header.php” and my code is like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/ext/resources/css/ext-all.css"/>

    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/ext-all.js"></script>
    <script type="text/javascript">
        var BASE_URL = '<?php echo base_url(); ?>' + 'index.php/';
        var BASE_PATH = '<?php echo base_url(); ?>';
        Ext.onReady(function() {
            Ext.QuickTips.init();
            Ext.BLANK_IMAGE_URL = BASE_PATH + 'assets/js/ext/resources/images/default/s.gif';
            Ext.form.Field.prototype.msgTarget = 'side';
        });
    </script>

    <style>
    body {
        background:#7F99BE;
    }
    #header {
        border-bottom:1px solid #666;
        background:#1E4176;
        padding:5px;
        color:#fff;
        font-size:20px;
        font-weight:bold;
        font-family:'Lucida Grande', Arial, Sans;
    }
    </style>
    <title><?php echo $title; ?></title>
</head>
<body>

As you can see above I’m using the Codeigniter url helper, base_url() to locate the Extjs file, the defined variable in javascript “BASE_URL” and “BASE_PATH” is useful when requesting server location, you can see on the next step. Now create file for login screen in “system/application/views/user/login.php” and add this code

<?php $this->load->view('header'); ?>

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/ext_plugins/statusbar/css/statusbar.css"/>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext_plugins/statusbar/StatusBar.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/form_validation.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/form_login.js"></script>

<?php $this->load->view('footer'); ?>

The status bar plugin you can copied from Extjs default example located in “assets/js/ext/examples/ux/statusbar” copy all the files inside this folder, actually you can directly link to that folder, but for me it easier to read the plugin that I used in the folder hierarchy. We have not create the two javascript file “form_validation.js” and “form_login.js” yet, we’ll create it on the next step, but I always wanted a footer file on the view so create file “system/application/views/footer.php” and the code is as simple as this (for this project just to closing the html and body tag)

</body>
</html>

Now create the javascript file, in this file we will create two from in the same file, which mean one page, two Extjs windows and two Extjs forms (login and register). Create file in “assets/js/form_login.js” insert this code

Ext.onReady(function() {

    /* 01. Start The Form Register Component */

    // 01. Form Register
	var formRegister = new Ext.FormPanel({
		frame: false, border: false, buttonAlign: 'center',
		url: BASE_URL + 'user/ext_register', method: 'POST', id: 'frmRegister',
		bodyStyle: 'padding:10px 10px 15px 15px;background:#dfe8f6;',
		width: 300, labelWidth: 150,
		items: [{
			xtype: 'textfield',
			fieldLabel: 'Username',
			name: 'username',
			id: 'regUsername',
			allowBlank: false,
            vtype: 'uniqueusername'
		}, {
			xtype: 'textfield',
			fieldLabel: 'Password',
			name: 'password',
			allowBlank: false,
			inputType: 'password',
            vtype: 'passwordlength',
            id: 'pass1'
		}, {
			xtype: 'textfield',
			fieldLabel: 'Confirm Password',
			name: 'cpassword',
			allowBlank: false,
			inputType: 'password',
            id: 'pass2',
            initialPassField: 'pass1',
            vtype: 'password'
		}, {
			xtype: 'textfield',
			fieldLabel: 'Email',
            id: 'regEmail',
			name: 'email',
			vtype:'uniqueemail',
			allowBlank: false,
            validationEvent: ''
		}
		],
		buttons: [
			{ text: 'Register', handler: fnRegister },
			{ text: 'Reset', handler: function() {
					formRegister.getForm().reset();
				}
			}
		]
	});

    function fnRegister() {
        Ext.getCmp('frmRegister').on({
            beforeaction: function() {
                if (formRegister.getForm().isValid()) {
                    Ext.getCmp('winRegister').body.mask();
                    Ext.getCmp('winLogin').body.mask();
                    Ext.getCmp('sbWinRegister').showBusy();
                }
            }
        });
        formRegister.getForm().submit({
            success: function() {
                formRegister.getForm().reset();
                Ext.getCmp('sbWinRegister').setStatus({
                    text: 'Registration Success',
                    iconCls: 'x-status-saved'
                });
                Ext.getCmp('winRegister').body.unmask();
                Ext.getCmp('winLogin').body.unmask();
            }
        });
    }

    // 01. Window Register
	var winRegister = new Ext.Window({
		title: 'CI Extjs &mdash; User Register',
        id: 'winRegister',
		layout: 'fit',
		width: 350,
		height: 210,
		y: 120,
		resizable: false,
		closable: false,
		items: [formRegister],
        bbar: new Ext.ux.StatusBar({
            text: 'Ready',
            id: 'sbWinRegister'
        })
	});

	winRegister.show();

    /* 02. Start The Form Login Component */

    // 02. Form Login
    var formLogin = new Ext.FormPanel({
		frame: false, border: false, buttonAlign: 'center',
		url: BASE_URL + 'user/ext_login', method: 'POST', id: 'frmLogin',
		bodyStyle: 'padding:10px 10px 15px 15px;background:#dfe8f6;',
		width: 300, labelWidth: 150,
		items: [{
			xtype: 'textfield',
			fieldLabel: 'Username',
			name: 'username',
			id: 'logUsername',
			allowBlank: false
		}, {
			xtype: 'textfield',
			fieldLabel: 'Password',
			name: 'password',
            id: 'logPassword',
			allowBlank: false,
			inputType: 'password'
		}
		],
		buttons: [
			{ text: 'Login', handler: fnLogin },
			{ text: 'Reset', handler: function() {
					formLogin.getForm().reset();
				}
			}
		]
	});

    function fnLogin() {
        Ext.getCmp('frmLogin').on({
            beforeaction: function() {
                if (formLogin.getForm().isValid()) {
                    Ext.getCmp('winRegister').body.mask();
                    Ext.getCmp('winLogin').body.mask();
                    Ext.getCmp('sbWinLogin').showBusy();
                }
            }
        });
        formLogin.getForm().submit({
           success: function() {
               window.location = BASE_URL;
           },
           failure: function(form, action) {
               Ext.getCmp('winRegister').body.unmask();
               Ext.getCmp('winLogin').body.unmask();
               if (action.failureType == 'server') {
                    obj = Ext.util.JSON.decode(action.response.responseText);
                    Ext.getCmp('sbWinLogin').setStatus({
                        text: obj.errors.reason,
                        iconCls: 'x-status-error'
                    });
                } else {
                    if (formLogin.getForm().isValid()) {
                        Ext.getCmp('sbWinLogin').setStatus({
                            text: 'Authentication server is unreachable',
                            iconCls: 'x-status-error'
                        });
                    } else {
                        Ext.getCmp('sbWinLogin').setStatus({
                            text: 'Something error in form !',
                            iconCls: 'x-status-error'
                        });
                    }
                }
           }
        });
    }

    // 02. Window Login
	var winLogin = new Ext.Window({
		title: 'CI Extjs &mdash; User Login',
        id: 'winLogin',
		layout: 'fit',
		width: 350,
		height: 160,
		y: 340,
		resizable: false,
		closable: false,
		items: [formLogin],
        bbar: new Ext.ux.StatusBar({
            text: 'Ready',
            id: 'sbWinLogin'
        })
	});

	winLogin.show();
});

Now for the custom validation file I’m using the unique field validation from my previous post and modified a little bit, although is not perfect but still can used in here, so create file “assets/js/form_validation.js” and the code is

/* Custom Unique Username Validation
 * Used in 01. Form Register */

var usernameErrLength = 'Username minimum 4 character !';
var usernameErrUnique = 'Username already in use !';
var usernameSuccess = 'Username avaliable';
var emailErrFormat = 'Email not valid !';
var emailErrUnique = 'Email already in use !';
var emailSuccess = 'Email valid & avaliable';

Ext.apply(Ext.form.VTypes, {
    uniqueusernameMask : /[a-z0-9_\.\-@\+]/i,
	uniqueusername : function(val) {
        if (val.length < 4) {
            Ext.apply(Ext.form.VTypes, {
                uniqueusernameText: usernameErrLength
            });
            return false;
        } else {
            Ext.Ajax.request({
                url: BASE_URL + 'user/ext_is_unique_username',
                method: 'POST',
                params: 'username=' + val,
                success: function(o) {
                    if (o.responseText == 0) {
                        resetUsernameValidator(false);
                        Ext.apply(Ext.form.VTypes, {
                            uniqueusernameText: usernameErrUnique
                        });
                        return false;
                    } else {
                        resetUsernameValidator(true);
                    }
                }
            });
            return true;
        }
	},
	uniqueusernameText : usernameErrUnique,

    uniqueemailMask : /[a-z0-9_\.\-@\+]/i,
    uniqueemail : function(val) {
        var uniqueemail = /^(\w+)([\-+.][\w]+)*@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6}$/;
        if (uniqueemail.test(val)) {
            Ext.Ajax.request({
                url: BASE_URL + 'user/ext_is_unique_email',
                method: 'POST',
                params: 'email=' + val,
                success: function(o) {
                    if (o.responseText == 0) {
                        resetEmailValidator(false);
                        Ext.apply(Ext.form.VTypes, {
                            uniqueemailText: emailErrUnique
                        });
                    } else {
                        resetEmailValidator(true);
                    }
                }
            });
            return true;
        } else {
            return false;
        }

    },
    uniqueemailText : emailErrFormat,

    password : function(val, field) {
        if (field.initialPassField) {
            var pwd = Ext.getCmp(field.initialPassField);
            return (val == pwd.getValue());
        }
        return true;
    },
    passwordText : 'Passwords do not match',

    passwordlength : function(val) {
        if (val.length < 5) {
            return false;
        } else {
            return true;
        }
    },
    passwordlengthText : 'Password minimum 5 character'
});

function resetUsernameValidator(is_error) {
	Ext.apply(Ext.form.VTypes, {
		uniqueusername : function(val) {
            if (val.length < 4) {
                Ext.apply(Ext.form.VTypes, {
                    uniqueusernameText: usernameErrLength
                });
                return false;
            } else {
                Ext.Ajax.request({
                    url: BASE_URL + 'user/ext_is_unique_username',
                    method: 'POST',
                    params: 'username=' + val,
                    success: function(o) {
                        if (o.responseText == 0) {
                            resetUsernameValidator(false);
                        } else {
                            resetUsernameValidator(true);
                        }
                    }
                });
                return is_error;
            }
		}
	});
}

function resetEmailValidator(value) {
    Ext.apply(Ext.form.VTypes, {
        uniqueemail : function(val) {
            var uniqueemail = /^(\w+)([\-+.][\w]+)*@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6}$/;
            if (uniqueemail.test(val)) {
                Ext.Ajax.request({
                    url: BASE_URL + 'user/ext_is_unique_email',
                    method: 'POST',
                    params: 'email=' + val,
                    success: function(o) {
                        if (o.responseText == 0) {
                            resetEmailValidator(false);
                            Ext.apply(Ext.form.VTypes, {
                                uniqueemailText: emailErrUnique
                            });
                        } else {
                            resetEmailValidator(true);
                        }
                    }
                });
            } else {
                return false;
            }
            return (value);
        }
    });
}

The last file in views is index which is called when user is authenticated in “system/application/views/user/index.php”, here I’m using my last project layout using Extjs and I can’t explain more about this, if you want simple layout just html and php that would be fine, or if you want follow my step you can separate the javascript file from the php file like the way from previous step

<?php $this->load->view('header'); ?>

<script type="text/javascript">
    var layout_west1 = new Ext.tree.TreePanel({
    region: 'north', title: 'Menus', height: 250, bodyStyle: 'margin-bottom:6px;',
    autoScroll: true, enableDD: false, rootVisible: false, id: 'treePanel',
    root: {
        text: 'Menu',
        expanded: true,
        nodeType: 'async',
        children: [{
            text: 'Menu 1',
            expanded: true,
            children: [{
                text: 'Menu 1.1',
                leaf: true
            }, {
                text: 'Menu 1.2',
                expanded: true,
                children: [{
                    text: 'Menu 1.2.1',
                    leaf: true
                }, {
                    text: 'Menu 1.2.2',
                    leaf: true
                }, {
                    text: 'Menu 1.2.3',
                    leaf: true
                }]
            }]
        }, {
            text: 'Menu 2',
            expanded: true,
            children: [{
                text: 'Menu 2.1',
                leaf: true
            }, {
                text: 'Menu 2.2',
                leaf: true
            }]
        }, {
            text: 'Logout',
            id: 'logout',
            icon: BASE_PATH + 'assets/img/icons/minus-circle.png',
            leaf: true
        }]
    },
    listeners: {
        click: function(n) {
            switch (n.id) {
                case 'logout':
                    do_logout();
                    break;
            }
        }
    }
});

var layout_west2 = new Ext.Panel({
	region: 'center', margin: '10 0 0 0', autoScroll: true,
	bodyStyle: 'padding:10px;background:#eee;font-family:"Lucida Grande"',
	html: '<p style="padding:20px;text-align:center;color:#666;font-size:14px;border:1px dotted #999;background:#fff;">\n\
            <img src="public/img/btn-left.jpg"/><br/> CodeIgniter - Extjs <br/><span style="font-size:11px;">Simple Login Screen</span></p>'
});

var tab_center = new Ext.TabPanel({
    xtype: 'tabpanel', resizeTabs: false, minTabWidth: 115, tabWidth: 135,
    enableTabScroll: true, layoutOnTabChange: true, border: false,
    activeItem: 'tab_welcome', autoDestroy: false,
    items: [
        { xtype: 'panel', id: 'tab_welcome', bodyStyle: 'padding:10px', title: 'Welcome' }
    ]
});

var tbCenter = new Ext.Toolbar({
    items: ['->', {
        icon: BASE_PATH + 'assets/img/icons/minus-circle.png',
        text: 'Logout',
        handler: do_logout
    }]
});

var layout_center = new Ext.Panel({
    id: 'content-panel', region: 'center', layout: 'card', margins: '0 5 5 0',
    activeItem: 0, border: true, tbar: tbCenter, items: [tab_center]
});

var layout_main = new Ext.Viewport({
	layout: 'border', renderTo: Ext.getBody(),
	items: [
        { region: 'north', autoHeight: true, height: 100, border: false,
            html: '<div id="header">CodeIgniter - Extjs<span style="font-size:12px;">Simple Login Screen</span></div>',
            margins: '0 0 5 0', style: 'border-bottom: 4px solid #4c72a4;' },
        { region: 'west', baseCls: 'x-plain', xtype: 'panel', autoHeight: true,
            width: 180, border: false,
            split: true, margins: '0 0 0 5', items: [layout_west1, layout_west2]
        }, layout_center]
});

function do_logout() {
    Ext.Ajax.request({
        url: BASE_URL + 'user/ext_logout',
        method: 'POST',
        success: function(xhr) {
            window.location = BASE_URL + 'user/login';
        }
    });
}

layout_main.show();
</script>

<?php $this->load->view('footer'); ?>

4. Create controller

Create the controller file user.php in “system/application/controllers/user.php”

<?php

class User extends Controller {

    public function __construct()
    {
        parent::Controller();
    }

    public function index()
    {
        if ($this->my_usession->logged_in)
        {
            $data['title'] = 'User Index';
            $this->load->view('user/index', $data);
        }
        else
        {
            redirect('user/login');
        }
    }

    public function login()
    {
        if ($this->my_usession->logged_in)
        {
            redirect('user/index');
        }
        else
        {
            $data['title'] = 'User Login';
            $this->load->view('user/login', $data);
        }
    }

    public function ext_is_unique_username()
    {
        $cond = array('username' => $_POST['username']);
        $query = $this->db->get_where('users', $cond);
        if ($query->num_rows() != 0)
        {
            echo 0;
        }
        else
        {
            echo 1;
        }
    }

    public function ext_is_unique_email()
    {
        $cond = array('email' => $_POST['email']);
        $query = $this->db->get_where('users', $cond);
        if ($query->num_rows() != 0)
        {
            echo 0;
        }
        else
        {
            echo 1;
        }
    }

    public function ext_logout()
    {
        $this->my_usession->unset_userdata("user_id");
        echo "{success:true}";
    }

    public function ext_login()
    {
        $cond = array(
            'username' => $_POST['username'],
            'password' => $_POST['password']
        );
        $query = $this->db->get_where('users', $cond);
        if ($query->num_rows() != 0)
        {
            $row = $query->row();
            $this->my_usession->set_userdata('user_id', $row->id);
            $this->my_usession->set_userdata('username', $row->username);
            echo "{success:true}";
        }
        else
        {
            echo "{success:false, errors: { reason: 'User not found !' }}";
        }
    }

    public function ext_register()
    {
        $data = array(
            'username' => $_POST['username'],
            'password' => $_POST['password'],
            'email' => $_POST['email']
        );
        $this->db->insert('users', $data);

        echo "{success:true}";
    }

}

The final result should look like this

default login and register form in “http://localhost/ci_extjs_login/index.php/user/login”

default index layout in “http://localhost/ci_extjs_login/index.php/”

Like always I provide the source to be downloaded but, not included the Extjs file, you have to download yourself from here.

DOWNLOAD SOURCE

        submit to reddit Delicious

95 Comments Leave a Comment Subscribe RSS

  • Victor Salas says:

    Please send the code to my mail victorsalasdiaz@gmail.com thanks

  • roni says:

    can you send source to my mail empugandring.sgs@gmail.com, download link is error.
    thanks

  • roni says:

    sorry maybe my connection error, i try again its work. :D

  • ivone says:

    hai…
    i have try your source code and i found error..
    this is.. ” ext is not define”
    i dont know how to solve it…thankyou

    • have you download the extjs source? in my code I didn’t include the extjs source cause too big, you have to download it and put the source in folder “ci_extjs_login/assets/js/ext”, just look at the folder on the header.php file in views folder, the extjs path is right there

  • heyman says:

    I seem to have an issue with stuff being cached. I make changes to the form_login.js file, ie. fieldlable, but cannot get them to propogate..

    I’ve tried different browsers, clearing cookies, there is nothing being cached in system/cache, stopping starting apache.

    Any ideas?

  • mushfiq says:

    Hi..
    I have downloaded both the source code and extjs source.
    But nothing is being displayed in http://localhost/log/index.php/user/login link.Plz help me.

    • Softlinkweb says:

      Dear Mushfiq ,

      Where you saved the extjs source code ? .

      do the small modification on header.php

      <link rel="stylesheet" type="text/css" href="assets/js/ext/resources/css/ext-all.css”/>

      <script type="text/javascript" src="assets/js/ext/ext-base.js”>
      <script type="text/javascript" src="assets/js/ext/ext-all.js”>

      var BASE_URL = ” + ‘index.php/’;
      var BASE_PATH = ”;
      Ext.onReady(function() {
      Ext.QuickTips.init();
      Ext.BLANK_IMAGE_URL = BASE_PATH + ‘assets/js/ext/resources/images/default/s.gif’;
      Ext.form.Field.prototype.msgTarget = ‘side’;
      });

      body {
      background:#7F99BE;
      }
      #header {
      border-bottom:1px solid #666;
      background:#1E4176;
      padding:5px;
      color:#fff;
      font-size:20px;
      font-weight:bold;
      font-family:’Lucida Grande’, Arial, Sans;
      }

      after that Copy the following files to assets/js/ext/

      ext-all.js
      ext-base.js

      copy the resource folder to assets/js/ext/

      Try to run now . All the best .

  • mushfiq says:

    I have fixed the prb.But now the sign up portion is not working.

  • veeresh says:

    Hi..

    http://localhost/folder/index.php/user/login

    displaying blank page. help me

  • Stefan says:

    Hi Aditia,

    cool Script :)

    But i become this Errors:

    Authentication server is unreachable

    AND

    via Firebug i will find this Error Message:

    POST:
    Parameterapplication/x-www-form-urlencoded
    password s
    username s
    Quelle
    username=s&password=s

    ANSWER:
    Das Laden des Quelltexts ist fehlgeschlagen:: http://***.***.**/index.php/user/ext_login

    If you send me a Mail, i can give you the original URL, for testing.

    regards
    Stefan

    • thanks for tried it,
      on my localhost if I got error like that, It because the web server (apache) is stop or not responding
      and you can see on formLogin.getForm().submit …..
      there is a request failure handling to handle this error

      well, I think nothing wrong with your firebug response, so you want to test with “s” value for both fields

      • Stefan says:

        Hi Aditia,

        the Server works fine, it seams that the framework can’t handle the user/ext_login page.

        The Errortext in English means, that the sourcecode cannot be loaded.

        And if i look at your function formLogin.getForm().submit …

        The first Step of this if struktur checks the Server Status and this seams to be fine. The Error Message came from the else region.

        If i read this function right, then the Server answers and the Form values are valid, too.

        I have inserted a new line to the ext_login funktion in the file: system/application/controllers/user.php

        echo “TEST TEST TEST”

        But no TEST comes back, from this Login Script :-(

        Regards
        Stefan

  • p.moore says:

    this looks like a dandy login module for my project. is that ok. if i have your codes?

  • rikoy says:

    omg this cool man..thaks a lot for sharing knowledge

  • rikoy says:

    “An Error Was Encountered

    Unable to load the requested class: my_usession”

    whats wrong?need help please..

    • i’m guessing you are using linux right?
      I have the same problem before,
      try to make it case sensitive on the autoload.php
      $autoload['libraries'] = array(‘database’, ‘session’, ‘MY_Usession’);

      but you have to change all this library usage too,

  • clustersblue says:

    Hi Aiditia,

    Though I am very new to both frameworks (so as with web development) I can say this is good way to start with! There’s something I’d like to ask regarding this line:
    <link rel="stylesheet" type="text/css" href="assets/js/ext/resources/css/ext-all.css”/>

    When I tried this to my code to locate Ext files it seems it didn’t get located. I can see the page but I cannot see the page get formatted). When I look at firebug the href shows the exact location of Ext files. Is there anything I need to check.

  • Titus says:

    Hello.
    Thanks for posting this code, i took some ideas from it.
    But i do not understand the part with Ext.Apply().
    The resetusernamevalidator() function is called, within the ajax call, and itself does an ajax call, in which it will again call itself. It is a recursive function, how does it work?
    Thank you.

  • Titus says:

    Never mind, i (hope) understood the code which i was talking about (finally!), but i believe that at the ‘resetUsernameValidator’ function, when analysing the callback function, you need to put an additional
    Ext.apply(Ext.form.VTypes, { useruniqueText: usernameErrorUnique
    });

  • Titus says:

    I believe you cannot stop the script within callback because “success” is the response to an asynchronous event.
    That is why a helper function is needed.
    (Sorry for double posting, feel free to merge my posts).

  • reimhart says:

    thanks a lot for sharing your knowledge.. :)

  • reimhart says:

    sir can you please provide a code to be able the user to change pASSword.. :) tnx in advance.. GODbless.. :

  • Hi..
    I have downloaded extjs source code .
    But nothing is being displayed in
    not show any error only show bule blank page
    http://localhost/log/index.php/user/login link.
    Plz help me.

  • Martin says:

    I have tried to use your script but firebug returns a error: “missing ) in parenthetical ({“succes”:true}<!DOCTYPE html PUBLIC …". The error seems to be located in ext-all.js

    There is also a warning in extjs.js : reference to undefined property P[O].start, P[O].end, ,P[O].unit and M.points.from.

    I've modified the script so the Form Register Component is missing. Need help please

  • hilmi says:

    Nice tutor. Thanks, I have try your code, using ext 3.2.1 , but 1st page (login page) looks weird , below after textfield always shows a scrollbar, what’s wrong ? different extjs version ? or else ?

  • haryman says:

    ko ga tampil ya?
    cuman blank page gtu..
    http://localhost/ci_extjs_login/index.php/user/login

    padahal extjsnya udah di masukin ke folder ext..

    itu knp ya?

    maaf saya baru belajar…

  • bhavik says:

    how can we call multiple validation on textfield ?

  • Hi!
    Very good tutorial!
    I am reading your CodeIgniter and ExtJS tutorials for a long while.

    I have another question in reference to CI and ExtJS.

    In my Application I use a View within Viewport and Borderlayout, similiar to your Layout in this example.

    For security reasons, my role based application, should generate JavaScript Code within the CI backend.
    And that’s my problem.

    For navigation I am using an accordion layout (with generated links within panels) and for center I use a tabpanel.
    When the user clicks onto a hyperlink from the navigation, a new tab should be opened with the desired content.

    For this, I wrote a controller, which returns this JavaScript code as a simple echo statement.
    But this JavaScript code does not get executed. So I got a blank screen with my generated JS code.

    Is there any way, to generate dynamically JS code and get it executed?

    My application is based on 3 views (Login, Register, App) and I do not want to load the App-View over and over again. Every click should generate a new tab within the tabpanel. (Similiar to the ExtJS Documentation).

    So I have different controllers which should controll the App-View.
    For example the logout link should use the controller account/logout – login of course account/login. Or the settings link ($base_url)/settings/overview. Each method should generate the JavaScript and of course, when a model is needed, the model. So each section in the view is controlled by own controllers, to have it structured.

    Could you give me some hints? Of course I have searched for some information about this problem, my result has shown, that “they” generate JavaScript code as additional data and load it within the header-view. But this causes that the view is loaded again and for my problem this is useless.
    I use a tabpanel, so no reloading should be done. If I have to reload the view over and over again, I have to store the opened tabs in the session (or database, or anywhere). This would be a dirty (but working) solution to this problem.

    Thanks for reading this comment, and thanks in advance, If you could give me a hint into the right direction to get an more suitable solution, I am not the fan of quick-and-dirty-solutions ;)

    Greetings from Germany!

    Kevin

    • After long thinking and testing I came to the point, to avoid the tabpanel.
      I did not find any real solution for my problem.

      But if anyone has one, please tell me, because it is still relevant but for further development I will use more views instead of this 3, so it is easier and faster to get to one release.

      Later it is still possible to change this, thanks to MVC, controllers are existing and so just a change to the view(s). (Hopefully…)

    • Hi kevin, thanks for reading,
      I think it is possible to generating JS script from CI, something like this:

      echo  '<script type="text/javascript" src="'. base_url().'assets/js/alert.js"></script>';
      

      and if you want to be more readable make it inside the header, or you can store it on a variable, then echo on the view, and for security reason maybe you could add a session checking before generating the JS, well this might be not a really suitable solution to your problem ….

  • Dhana says:

    Hi Aditia rahman,

    Thanks for your Very nice post, I am new to Extjs and in fact new to web development. I had started learning ExtJs for past couple of months, This link is refered by one my friend Scott. and Happy to start using your framework.

    I had donwloaded your source and modifies some config and made it work with SQL server. I also has changed the menu to dynmic menu. and when the Dynmic menu is cliked, I want to Load applications on the Tab panel, and it is not shown on the Tabpanel..? But when i change the routers config to the direct application it works fine.

    Please advise

    Best regards
    Dhana

    AsKevin Haferkamp

    • make sure you debug the javascript, using tool like firebug
      what do you mean about dynamic menu? is it tree panel, dropdown menu component or what?

      and do you mean you want to load this login and register form inside the tab panel, right? well I think you cannot use windows component inside the TabPanel

  • Dhana says:

    Hi Aditia rahman,
    I had been strucked with this issue for the past 10 days, and no where i can find help to solve this issue.. Please do the need ful

    Regards
    Dhana

  • Dhana says:

    Hi AsKevin Haferkamp,
    i want to do the similar thing what you had mentioed on your post..

    Have you sort this issue..? CAN you load your applications in the separate tab panels..?

    Appreicate you advise and how you could able to slove the problem

    Thanks & regards
    dhana

  • egha says:

    ko downloadnya susah yach
    caranya gmana?
    tolong dibantu yach…

  • Dhana says:

    Hi Aditia rahman,
    Thanks for your reply on my Quries,..!

    I had a Tree panel bound to a Table and generated dynamically.

    The Tabpanel doen’t support windows Components..! (i really don’t aware of it) and if not Is it possible to have New windows or Popup window from the tree Node..>

    Please Advise

    Thanks
    Dhana

  • Dhana says:

    Dear Aditia Rahman,

    I had tried several options and still couldn’t able to proceed further.
    I want something as below
    When the user clicks on the node, then there will be a Contorller checks in the database table and returns ExtJs Application name.
    The application is just a predefind function availble already and need to get open as a New window..

    Is is possible.,.?
    Please advise
    Thanks in advance

    Regards
    Dhana

    • sorry for late answer,
      yeah I think it is possible, well my answer is almost the same like before you can use event listeners on treenode, and adding some ajax function to checking the table, then call the windows component to be shown

  • rayen says:

    best tutorial

  • ti bandung says:

    url: BASE_URL + ‘user/ext_register’
    maksudna teh kumaha
    BASE_URL = BASE_URL
    user : folder user
    ari ext_register file na di mana atawa naon

  • Omar says:

    simply great

  • psychomarine says:

    bro, this script needs alot of work.

    for 1.

    you NEVER validate using javascript only.

    anyone can load up any header sniffer like “Live http headers” or “Tamper Data” – common firefox plugins and catch the post after its authenticated, adjust it, and send it to the server unfiltered.

    javascript validation is great for the user end, visually
    BUT
    you need to repeat the validation checks in your php before sending the data to any sql query.

    In your code above, I see all sorts of sql injection points. unvalidated data.

    Learn more about this and how to code in a secure manner, audit your own code, or even hack others.
    http://www.enigmagroup.org

    Also, of course, that was a cheap plug but you know bro, it just burns my ass to see good coders make big mistakes like this. You need to be trained.

    Thanks!

    • john roberts says:

      is this true? I want to use your code for a project but I do see your not using code igniters input classes but i am too new to it to know you arent doing it some other way.

      also will this work with code igniter v2? Any chance of updating the source?

      Thanks for your awesoem guides man!

  • Dedi says:

    Mantab Gan !!!

  • varrick says:

    hi aditia rahman,
    thank you for your source code,so excellent
    recently I met a color display problem when I use codeigniter and extjs at same time ,but I only use extjs the result is ok.for instance,I use demo.html in extjs have no peoblem,because I want to use extjs and codeigniter at same time ,so I just change the file name demo.html to demo.php ,and paste that file in “view” folder,at last ,everything is ok except some color is abnormol,some color change from blue to white ,and lead to some button could not be seen,(the function exsits but we could not see),so i guess maybe I miss some steps ?Have you met similar problem?
    thank you very much??

  • topjer says:

    whoaaaaaaaaa……. mumet ndasku!

  • star says:

    this source file havenot attached model file..
    so please attach model file..

  • slams says:

    Bos,,, kok blank ya…padahal udah tak tambah extjs sesuai keinginan….
    bisa ngak….di upload seluruhnya…..code + extj nya

    trims

  • slams says:

    ok…bos udah ketemu masalahnya….silahkan gunakan library extjs milik bos aditia yg ada tutorial nya

    Extjs: Simple User Managament Using Codeigniter

    trims….sblmnya….mas aditia atas semua tutorialnya

  • lacaster says:

    Hi

    Nice tutorial you have there but was trying out your code but on loging in successfully it redirects back to the log in page instead of the user/index page.

    thanks.

  • Ricky Martin says:

    could you send me the link to download ext-base.js file plz plz

    • john roberts says:

      Did you find it? I am getting some weird white box on the top and the menu doesnt work. i assume maybe its because i also am missing this file. unless its no longer needed for extjs 4.0 perhaps?

  • Min says:

    Hi Dear,

    Can you send me source code?
    portraitprince@hotmail.com

  • ankit says:

    nice help

  • aditya says:

    sir, can u please send me the source code!!

  • aditya says:

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SV1; InfoPath.2; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727)
    Timestamp: Sun, 15 Jan 2012 06:54:06 UTC

    Message: ‘Ext’ is undefined
    Line: 11
    Char: 9
    Code: 0
    URI: http://localhost/ci_extjs_login/index.php/user/login

    Message: ‘Ext’ is undefined
    Line: 55
    Char: 1
    Code: 0
    URI: http://localhost/ci_extjs_login/assets/js/ext_plugins/statusbar/StatusBar.js

    Message: ‘Ext’ is undefined
    Line: 11
    Char: 1
    Code: 0
    URI: http://localhost/ci_extjs_login/assets/js/form_validation.js

    Message: ‘Ext’ is undefined
    Line: 1
    Char: 1
    Code: 0
    URI: http://localhost/ci_extjs_login/assets/js/form_login.js

    can anyone tell whats the prob… My default browser is IE8

  • ralph says:

    very nice! can you help me sir? got the registration worked, but not for login, when i click login with correct user info, the status only says “Loading” and nothing more, when i enter wrong user info, it returns “User not found”… please click the link for screenshot of error.

    http://i40.tinypic.com/2hzh6pt.jpg

    thank you! more power

  • Boris says:

    Nice to know that your download link includes a keylogger named Ardamax…

  • Christina says:

    of course like your web site but you have to take a look at the spelling on quite a few of your posts. A number of them are rife with spelling problems and I to find it very bothersome to tell the truth on the other hand I will definitely come back again.

Leave a Comment