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

<script src="http:ext-2.2/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="http:ext-2.2/ext-all.js" type="text/javascript"></script>
<script src="login.js" type="text/javascript"></script>

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

Login Extjs: Confirm Password is posted on February 27th, 2009 by faisal. This post is filed under: Tutorial Extjs, Tutorial HTML, Tutorial PHP, Login, Password, PHP, Programming, User .

Incoming search terms for the article:

extjs login formextjs loginextjs sessionextjs redirectextjs passwordlogin extjsextjs password fieldextjs login screensession extjsextjs php loginextjs themesextjs file uploadextjs themeextjs uploadextjs upload fileextjs login formextjs grid checkboxextjs grid pagingextjs loginextjs tutorialext js login formlogin page using extjsfile upload extjsjson reader extjsextjs themeextjs uploadadd image after textfield in extjsSimpleListingEditorGrid getSelections(); is not a functionSimpleListingEditorGrid getSelections(); is not a functionextjs buttonCfg