One way to secure our website from outside attack is to create a login form. In this section we will learn about how to make login form using extjs and php how to make a session to restrict the access . In this tutorial i will create login form have confirm password. I get inspiration from this website www.extjs.com.

this is the screen shot of this tutorial

OK let’s start now…..

1. Create table in database

CREATE TABLE  `formlogin` (
`id_user` int(11) NOT NULL auto_increment,
`username` varchar(100) NOT NULL,
`password` varchar(50) NOT NULL,
PRIMARY KEY  (`id_user`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

--
-- Dumping data for table `formlogin`
--

INSERT INTO `formlogin` (`id_user`, `username`, `password`) VALUES
(1, 'faisal', 'kahayan');

2. Create php file to connection to database

$nameSer = "localhost";
$username ="root";
$pass = "";
$dbname = "login";
$koneksi = mysql_connect($names,$username,$pass)or die('error'.mysql_error());
$selecdb = mysql_select_db($dbname);
?>

3 . Create html file to call css and javascript file

4. Create javascript file to create login form

//validation vtype
Ext.apply(Ext.form.VTypes, {

password : function(val, field) {
if (field.initialPassField) {
var login = Ext.getCmp(field.initialPassField);
return (val == login.getValue());
}
return true;
},
passwordText : 'Passwords do not match' //alert if you enter a password that is not the same
});

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

var login = new Ext.FormPanel({
labelWidth:90,
url:'login.php',
frame:true,
width:320,
autoHeight:true,
padding:200,
defaultType:'textfield',

items:[{
xtype:'box', //create image
autoEl:{
tag:'img',
src:'im48x48.png'
}
},

{
fieldLabel:'Username',
name:'username',
width:190,
allowBlank:false
},{
fieldLabel:'Password',
name:'password',
width:190,
inputType:'password',
id: 'pass',
allowBlank:false
},
{
fieldLabel:'Confirm Password',
name:'password1',
width:190,
inputType:'password',
vtype:'password',
initialPassField: 'pass',
allowBlank:false
}
],

buttons:[{
text:'Login',

handler:function(){
login.getForm().submit({
method:'POST',
waitTitle:'please wait.....',
waitMsg:'Send data...',

success:function()
{
Ext.Msg.alert('Status', 'Success Login..!', function(btn, text)
{

if (btn == 'ok')
{
var redirect = 'index1.php';
window.location = redirect;
}
});
},

failure:function(form, action)
{
if(action.failureType == 'server')
{
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Login Failed!', obj.errors.reason);
}
else
{
Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText + "abcd");
}
login.getForm().reset();
}
});
}
},
{
text: 'Reset',
handler: function(){
login.getForm().reset();
}

}]
});

var createwindow = new Ext.Window({
frame:true,
title:'Simple Form Login',
width:330,
height:250,
closable: false,
items: login
});

createwindow.show();
});

5. Create php file to process to database

session_start();    //to restrict the access
include "koneksi.php";

$nama = $_POST["username"];
$password = $_POST["password"];
$query = "select * from formlogin where username='$nama' and password='$password'";
$sql = mysql_query($query);
$ada = mysql_fetch_row($sql);

if($ada>1)
{
$_SESSION['id']=$ada[0]; //session id
$_SESSION['nama']=$nama; //session username
echo "{success: true}";
}
else
{
echo "{success: false, errors: { reason: 'Login failed. Try again.' }}";
}
?>

Next Tutorial: Form Extjs-Change Password

This is the screen shot:

Download Source code

Tags: Auto Increment, extjs, Faisal, Form Validation, Inspiration, Login, Login Php, Null Password, Padding, Password, Passwords, PHP, Png, Programming, True Width, Url Login, User, Varchar, Website Www

Incoming search terms for the article:

extjs login , extjs login form , extjs redirect , extjs session , login extjs , extjs password field , extjs password , extjs login example , extjs login screen , extjs confirm , login form extjs , extjs php login , extjs confirm password , extjs validation password , extjs login page , password extjs , extjs window location , login con extjs , extjs login session , extjs login window , session extjs , extjs how to redirect in php , extjs login form php , extjs change password , extjs login php , ext js login form , extjs page redirect , extjs passowrd field , extjs form password , FORM WAITING MSG EXTJS , extjs password validation , extjs how to get access to session , login extjs php , extjs login tutorial , extjs login box , login screen extjs , login script extjs , example login in extjs , php extjs login , confirm password validation in javascript , extjs button enter key , extjs action response responseText , redirect page at extjs , example login extjs , ext js login , extjs confirm mobileno , password and confirm password validation in javascript , ext password , java script confirm password , extjs window extjs themes , extjs file upload , extjs theme , extjs upload , extjs upload file , extjs grid checkbox , extjs tutorial , extjs login , extjs grid paging , extjs login form extjs checkbox readonly , checkbox row extjs , upload image extjs mysql , extjs file upload tutoriel , tutoriel extjs , extJS checkbox datastore , FileUploadField extjs documentation , icon-user-delete extjs , getSelectionModel() getSelections(); , register extjs application 

This entry was posted by faisal at on Friday, February 27th, 2009 at 7:50 pm and is filed under Tutorial Extjs, Tutorial HTML, Tutorial PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.