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:

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 .

mantap mas, ini yang aku cari..
tapi masih butuh pemahaman juga sih, baru pernah megang Ext Js soalnya..
makasih banget mas buat ilmunya, di coba dulu.
nanti kalau sendat, ajari saya yah mas.
salam
@jogisilalahi
selamat mencoba
saya sudah coba,
ada proble, ketika window di tutup, dan di buka lagi
Field passwordnya hilang (tidak terlihat lagi)
wow,thx ya..
ini yang saya cari..
saya coba dulu ya.
nanti kalo ada problem, ajarin saya ya.
thx..
Thank you very much!!!! This tutorial rocks!!
Hey,
Thanks for this tutorial, Here after fill up the username, password and confirm password field if I press the Enter key then the form should be submitted. But here not submitting. Please tell me how can I solve this problem. I shall wait for your reply
please help me.
Thanks
Akash
webcoderbd@gmail.com
check my last posting
java scipt source code
please check my this tutorial part-1-simple-application-of-extjs-using-layout-browser
what is this?