ExtJS Episode 2 (Form Log In)


Episode 2

Setelah bisa membuat alert pada Episode 1 Kali ini kita akan membuat form log in sederhana, langsung saja ke TKP.

Pertama buat file ‘ceklogin.php’

scriptnya sbb:

<?php
session_start();
include “koneksi.php”;
$username = isset($_POST[“loginUsername”]) ? $_POST[“loginUsername”] : “”;
$password = isset($_POST[“loginPassword”]) ? $_POST[“loginPassword”] : “”;
$sql = “select * from user where username=’$username’ AND password=’$password'”;// and level =’$level'”;//echo $sql;
$qu=mysql_query($sql) or die (mysql_error());
$data=mysql_fetch_array($qu);
if($data[‘username’]==$username and $data[‘password’]==$password){
//        $_SESSION[‘username’]     = $username;
echo “{success: true,redirect:’main.php’}”;
}else{
}
?>

Kemudian file ‘login.js’ scriptnya sbb:

// JavaScript Document

var userField = new Ext.form.TextField({
fieldLabel:’Username’,
width : 230,
name:’loginUsername’,
allowBlank:false,
listeners: {
specialkey : function(frm, evt){
if (evt.getKey()==evt.ENTER){
levelField.focus();
}
}
}
});

var passField = new Ext.form.TextField({
fieldLabel:’Password’,
width : 230,
name:’loginPassword’,
inputType:’password’,
allowBlank:false,
listeners: {
specialkey : function(frm,evt){
if (evt.getKey() == evt.ENTER){
login.getForm().submit({
method:’POST’,
waitTitle:’Connecting’,
waitMsg:’Sending data…’,
success:function(f,a){
var obj = Ext.util.JSON.decode(a.response.responseText);
var redirect = obj.redirect;
window.location = redirect;
},
failure:function(form, action){
if(action.failureType == ‘server’){
var obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert(‘Login Salah!’);
}else{
Ext.Msg.alert(‘Warning!’, ‘Authentication server is unreachable : ‘ + action.response.responseText);
}
login.getForm().reset();
}
});
}
}
}
});

/*var st_leveluser = [“Admin”,”Operator”];

var cmbLevel = new Ext.form.ComboBox({
xtype:’combo’,
fieldLabel: ‘Level’,
hiddenName: ‘loginLevel’,
anchor:’95%’,
store:st_leveluser,
triggerAction:’all’,
emptyText:’Pilih Level’,
allowBlank:true,
id:’lvl’
}); */
var login = new Ext.FormPanel({
iconCls: ‘login’,
labelWidth:70,
url:’ceklogin.php’,
frame:true,
title:’Selamat datang di PBW’,
defaultType:’textfield’,
monitorValid:true,
bodyStyle:’padding: 2 5 5 5′,
items:[
{
xtype:’box’, //create image
autoEl:{
tag: ‘div’,
html: ‘<img id=”pic” src=”images/Chat.png” vspace=”4″ hspace=”105″ style=”background:transparent;” />’
}
},
userField,passField
],

// All the magic happens after the user clicks the button
buttons:[{
text:’Login’,
formBind: true,
// Function that fires when user clicks the button
handler:function(){
login.getForm().submit({
method:’POST’,
waitTitle:’Connecting’,
waitMsg:’Sending data…’,
success:function(f,a){
var obj = Ext.util.JSON.decode(a.response.responseText);a.response.responseText;
var redirect = obj.redirect;
window.location = redirect;
},
failure:function(form, action){
if(action.failureType == ‘server’){
var obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert(‘Login Salah!’); alert(obj.redirect)
}else{
Ext.Msg.alert(‘Warning!’, ‘Authentication server is unreachable : ‘ + action.response.responseText);
}
login.getForm().reset();
}
});
}
}]
});

var picLogin = {
bodyStyle: ‘padding:0px’,
xtype: ‘box’,
width: 150,
autoEl: {
tag: ‘div’,
html: ‘<img id=”pic” src=img/rentacar.ico style=”background:transparent;” />’
}
};

var tpl = new Ext.XTemplate(
‘<tpl for=”.”>’,
‘<div id=”{name}”>’,
‘<div><img src=”{url}” alt=”{shortName}” title=”{name}” /></div>’,
‘</div>’,
‘</tpl>’
);

var store = new Ext.data.JsonStore({
url: ‘get-images.php’,
root: ‘images’,
fields: [‘name’, ‘url’, {
name:’size’,
type: ‘float’
}, {
name:’lastmod’,
type:’date’,
dateFormat:’timestamp’
}]
});

var imageView = new Ext.DataView({
store: store,
tpl: tpl,
autoHeight:true,
autoWidth: true,
overClass:’x-view-over’,
itemSelector:’div.thumb-wrap’,
emptyText: ‘No images to display’,
loadingText: ‘Loading…’,
singleSelect: true
});

var win = new Ext.Window({
layout:’fit’,
width:360,
height:280,
closable: false,
resizable: false,
draggable : false,
plain: true,
border: false,
items: [login]
});

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

win.show();
login.getForm().reset();
userField.focus(false, 500);
});

Untuk koneksi ke database silahkan anda atur sendiri,

buat file koneksi ke database dengan nama filenya ‘koneksi.php’

jangan lupa menyertakan file framework extjs, kemudian file konfigurasi extjsnya ‘extjs.php’ sbb:

<link rel=”stylesheet” type=”text/css” href=”ext-3.2.0/resources/css/ext-all.css” />
<link rel=”stylesheet” type=”text/css” href=”ux/css/GroupSummary.css” />
<link rel=”stylesheet” type=”text/css” href=”ux/css/RowEditor.css” />
<link rel=”stylesheet” type=”text/css” href=”ux/css/ColumnHeaderGroup.css” />
<link rel=”stylesheet” type=”text/css” href=”ux/css/fileuploadfield.css” />
<script type=”text/javascript” src=”ext-3.2.0/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”ext-3.2.0/ext-all.js”></script>
<script type=”text/javascript” src=”ux/NumberFormat.js”></script>
<script type=”text/javascript” src=”ux/Ext.ux.GridPrinter.js”></script>
<script type=”text/javascript” src=”ux/GroupSummary.js”></script>
<script type=”text/javascript” src=”ux/ColumnHeaderGroup.js”></script>
<script type=”text/javascript” src=”ux/RowEditor.js”></script>
<script type=”text/javascript” src=”ux/FileUploadField.js”></script>
<script type=”text/javascript” src=”ux/GMapPanel.js”></script>

 

Sekian, monggo dicoba dulu

Tinggalkan Komentar

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s