kali ini mpu-nya blog mau men-share ilmu lagi nih bagi yang membutuhkan, yang akan di share khususnya bagi para programmer adict yaitu bagaimana cara membuat login sederhana dengan bahasa Java->Javascript yang strict-nya lagi ExtJS.
Langsung kita mulai... ;-)
Pertama buat terlebih dahulu file login.html
-------------------------------------------------------------------------
<html>
<head>
<!--Header File ini cari path tempatnya ExtJS itu nyimpen--> <link href="ext-all.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="login.js"></script>
</head>
<body></body>
</html>Kemudian buat file login.js
didalam file login.js buat dulu script untuk menjalankan semua fungsi yang utamanya
-------------------------------------------------------------------------
Ext.onReady(function(){
});
-------------------------------------------------------------------------setelah itu, masih didalam file login.js buat kelas Ext window-nya dan masukkan didalam skrip yang diatas, jadinya seperti ini...
-------------------------------------------------------------------------
Ext.onReady(function(){
var win = new Ext.Window({
layout:'fit',
style:'text-align:left;',
title: 'Admin Login',
width:340,
height:230,
closable: false,
resizable: false,
movable: false,
draggable : false,
margin: false,
plain: true,
border: false,
items: [login]
});
win.show();
}); layout:'fit',
style:'text-align:left;',
title: 'Admin Login',
width:340,
height:230,
closable: false,
resizable: false,
movable: false,
draggable : false,
margin: false,
plain: true,
border: false,
items: [login]
});
win.show();
-------------------------------------------------------------------------
buat lagi skrip untuk panel dimana komponen akan di taruh
-------------------------------------------------------------------------
Ext.onReady(function(){
var login = new Ext.FormPanel({
});
var win = new Ext.Window({
layout : 'fit',
style : 'text-align:left;',
title : 'Admin Login',
width : 340,
height : 230,
closable : false,
resizable: false,
movable : false,
draggable: false,
margin : false,
plain : true,
border : false,
items : [login]
});
win.show();
layout : 'fit',
style : 'text-align:left;',
title : 'Admin Login',
width : 340,
height : 230,
closable : false,
resizable: false,
movable : false,
draggable: false,
margin : false,
plain : true,
border : false,
items : [login]
});
win.show();
});
------------------------------------------------------------------------- setelah itu buat komponen didalam panel
-------------------------------------------------------------------------
Ext.onReady(function(){
var login = new Ext.FormPanel({
url:'loginProcess.php',
frame:true,
monitorValid:true,
frame:true,
monitorValid:true,
items:[{
xtype : 'label',
id : 'label1',
style : 'text-align:left;',
text : 'Silahkan anda login dahulu untuk masuk kedalam Admin Tools.',
margin : '0 0 0 0'
},{
xtype : 'textfield',
margin : '30 30 5 30',
fieldLabel : 'Username',
height : '30',
name : 'Usr',
allowBlank : false,
},{
xtype : 'textfield',
margin : '0 30 0 30',
fieldLabel : 'Password',
name : 'Pass',
inputType : 'password',
height : '30',
allowBlank : false,
enableKeyEvents: true,
listeners: {
'keypress': {
fn: function(tf, e){
//jika tombol enter yang ditekan
if(e.getKey()==13){
login.getForm().submit({
method:'POST',
waitTitle:'Connecting',
waitMsg:'Sending data...',
success:function(){ var redirect = 'sukses.html';
window.location = redirect;
},
failure:function(form, action){
if(action.failureType == 'server'){
Ext.Msg.alert('WARNING','Username or Password Incorrect!');
}else{
Ext.Msg.alert('WARNING!', 'Authentication server is unreachable : ' + action.response.responseText);
}
login.getForm().reset();
}
});
}
}
}, delay : 100
}
}],
buttons:[{
iconCls: 'login',
text:'Login',
margin: '0 17 10 0',
scale: 'medium',
formBind: true,
handler:function(){
login.getForm().submit({
method:'POST',
waitTitle:'Connecting',
waitMsg:'Sending data...',
success:function(){
var redirect = 'sukses.html';
window.location = redirect;
},
failure:function(form, action){
if(action.failureType == 'server'){
Ext.Msg.alert('WARNING!','Username or Password Incorrect!');
}else{
Ext.Msg.alert('WARNING!', 'Authentication server is unreachable : ' + action.response.responseText);
}
login.getForm().reset();
}
});
}
}]
xtype : 'label',
id : 'label1',
style : 'text-align:left;',
text : 'Silahkan anda login dahulu untuk masuk kedalam Admin Tools.',
margin : '0 0 0 0'
},{
xtype : 'textfield',
margin : '30 30 5 30',
fieldLabel : 'Username',
height : '30',
name : 'Usr',
allowBlank : false,
},{
xtype : 'textfield',
margin : '0 30 0 30',
fieldLabel : 'Password',
name : 'Pass',
inputType : 'password',
height : '30',
allowBlank : false,
enableKeyEvents: true,
listeners: {
'keypress': {
fn: function(tf, e){
//jika tombol enter yang ditekan
if(e.getKey()==13){
login.getForm().submit({
method:'POST',
waitTitle:'Connecting',
waitMsg:'Sending data...',
success:function(){ var redirect = 'sukses.html';
window.location = redirect;
},
failure:function(form, action){
if(action.failureType == 'server'){
Ext.Msg.alert('WARNING','Username or Password Incorrect!');
}else{
Ext.Msg.alert('WARNING!', 'Authentication server is unreachable : ' + action.response.responseText);
}
login.getForm().reset();
}
});
}
}
}, delay : 100
}
}],
buttons:[{
iconCls: 'login',
text:'Login',
margin: '0 17 10 0',
scale: 'medium',
formBind: true,
handler:function(){
login.getForm().submit({
method:'POST',
waitTitle:'Connecting',
waitMsg:'Sending data...',
success:function(){
var redirect = 'sukses.html';
window.location = redirect;
},
failure:function(form, action){
if(action.failureType == 'server'){
Ext.Msg.alert('WARNING!','Username or Password Incorrect!');
}else{
Ext.Msg.alert('WARNING!', 'Authentication server is unreachable : ' + action.response.responseText);
}
login.getForm().reset();
}
});
}
}]
});
var win = new Ext.Window({
layout : 'fit',
style : 'text-align:left;',
iconCls : 'icon-title',
title : 'Admin Login',
width : 340,
height : 230,
closable : false,
resizable: false,
movable : false,
draggable: false,
margin : false,
plain : true,
border : false,
items : [login]
});
win.show();
});layout : 'fit',
style : 'text-align:left;',
iconCls : 'icon-title',
title : 'Admin Login',
width : 340,
height : 230,
closable : false,
resizable: false,
movable : false,
draggable: false,
margin : false,
plain : true,
border : false,
items : [login]
});
win.show();
catatan : tolong rapihin sendiri yah baris kodenya, blum handal nulis kode di blog :D
-------------------------------------------------------------------------
kemudian buat file loginProcess.php untuk mem-verifikasi login itu cocok atau tidak
kenapa dengan PHP? karena mpu-nya blogger lagi ngoding pake bahasa ini xixixixixixi....
-------------------------------------------------------------------------
<?php
$loginUsername = isset($_POST["Usr"]) ? $_POST["Usr"] : "";
$loginPassword = isset($_POST["Pass"]) ? $_POST["Pass"] : "";
$loginPassword = isset($_POST["Pass"]) ? $_POST["Pass"] : "";
if($loginUsername == "admin" && $loginPassword == "admin"){
$result["success"] = true;
}else{
$result["success"] = false;
$result["errors"]["reason"] = "Gagal Login! Ulangin Gih!!!.";
}
echo json_encode($result);
$result["errors"]["reason"] = "Gagal Login! Ulangin Gih!!!.";
}
echo json_encode($result);
?>
json_encode disini fungsinya untuk men-encoding nilai string yang dikirimkan sesuai dengan format ExtJS
dari format PHP, contohnya : untuk array di php
$arr = array('a' => 1, 'b' => 2, 'c' => 3); ketika di encode untuk ExtJS menjadi {"a":1,"b":2,"c":3}-------------------------------------------------------------------------
Ok! untuk sentuhan terakhir tinggal buat file sukses.html untuk menampilkan bahwa login itu berhasil
-------------------------------------------------------------------------
<html>
<head></head>
<body>Login Sukses!!! </body>
</html>Sekian dan Terima Kasih... Semoga tutorial diatas dapat bermanfaat bagi kita semua... ^_^v
