Posts Tagged "form"

35 Jquery Plugins To Beutify Form Element

September 15th, 2012 by aditia rahman / No Comments  

     

The varienty of web form element usage are growing whether in how it work or it design, for example when “tagging” became popular now a text field must have an automatic tag field, a long list selectbox better have quick search field inside it, a quick live validation, and many more examples that can improve form usability.

jquery form element plugin

Today I have gathered a number of jquery plugins for selectbox, checkbox, radiobutton, validation that can make enhance your web form usability both in usage and skining. Even there already a tools like bootstrap we might be still need one of them, the proof are you can look of some premium admin themes, which are using these plugins.

Codeigniter Little Trick: Shorten Input Form To Database Table

July 4th, 2012 by aditia rahman / No Comments  

     

In today post I have a little trick using codeigniter for inserting a row fields to database, this trick I found when I have to insert data that have many data fields for example I have 5 table each table have about 20 fields, in codeigniter we have active record class to make it easy when inserting to database. Basic codeigniter active record is

$data = array(
   'title' => 'My title' ,
   'name' => 'My Name' ,
   'date' => 'My date'
);

$this->db->insert('mytable', $data);
Form code

In the form field name I use the same name on the input fields so I can pass the input fields as array.

<form method="post" action="">
<label>Fields 1</label>
<input type="text" name="fields[fields1]"/>
<label>Fields 2</label>
<input type="text" name="fields[fields2]"/>
<label>Fields 3</label>
<input type="text" name="fields[fields3]"/>
<!-- other field (text, select, textarea, etc) -->
<label>Fields 19</label>
<input type="text" name="fields[fields19]"/>
<label>Fields 20</label>
<input type="text" name="fields[fields20]"/>
<input type="submit" value="submit" />
</form>

Twitter Like Login Screen

June 7th, 2010 by aditia rahman / No Comments  

     

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

Extjs : Form Submit With Enter Key Event

June 4th, 2010 by aditia rahman / 21 Comments  

     

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();
});

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 ;

EXTJS: Window Form Masking With Statusbar

May 24th, 2010 by aditia rahman / No Comments  

     

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