Posts Tagged "form"

I like twitter, almost everyday I connected to twitter, in this post I created the Twitter Like Login Screen, not really the same but at least as similar as Twitter (without server side processing). Let’s start, first we have to prepare the folder, you can see the image on the right, that how my folder look like and as usual I’m using Netbeans so not to worry about the nbproject folder, the html, javascript and css code will be posted here, and you don’t worry about the image because I include it in downloadable source code and then create the html code first

This is the short post that I want to share, cause last year I had created form in Extjs and submitted using ENTER key event so I want to share that here the simple code in Extjs form to enabling ENTER key event, but using this code your mouse cursor should be focused on one of the field inside the form, this is very simple so I don’t think I need to provide the downloadable source code, here it goes:

Ext.onReady(function(){
    var formLogin = new Ext.FormPanel({
        frame: false, border: false, buttonAlign: 'center',
        url: BASE_URL + 'user/extjs_login', method: 'POST',
        id: 'frmLogin',
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Username',
            id:'fldusername',
            name: 'username',
            allowBlank: false
        }, {
            xtype: 'textfield',
            fieldLabel: 'Password',
            id:'fldpassword',
            name: 'password',
            allowBlank: false,
            inputType: 'password'
        }],
        buttons: [
            { text: 'Login' },
            { text: 'Reset', handler: function() {
                    formLogin.getForm().reset();
                }
            }
        ],
        keys: [
            { key: [Ext.EventObject.ENTER], handler: function() {
                    Ext.Msg.alert("Alert","Enter Key Event !");
                }
            }
        ]
    });

    var winLogin = new Ext.Window({
        title: 'Extjs Enter Key Event', layout: 'fit',
        width: 340, height: 140, resizable: false,
        closable: false, items: [formLogin]
    });

    winLogin.show();
});

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 ;

In this tutorial i want to show you how to masking a form when user enter a submit button, statusbar that used in this tutorial is from the Extjs ux example, so I borrow this cause it is useable plugin, like always on the server side process I use simple PHP scripting. I created this post because when I used a form in Extjs and the user make a request it seem not really responsive, the system should interact the user, inform what is going on in the system and most user is not advance user. Let’s get started:

1. Setting the StatusBar

Copy the StatusBar css file and icon from the default examples to your desired folder,  first the css file you can find it in “extjs/examples/ux/statusbar/css/statusbar.css”, I copy it to another folder called “css” and next the statusbar icon is in “/extjs/examples/ux/statusbar/images” and I copy all the icon files to another folder called “img” most the file structure you can see it on the image on the right, this is how it look in Netbeans project. You can see the “form_masking.html” and “server_response.php” file, this is the main file that we have to create, and it will be mentioned on the next step, but before that we have to edit the StatusBar.css file that we have copied so the icon can be loaded, by changing the “background-image” properties. So find this all code like this