Download source code login form using extjs

Pada tutorial kali ini buruh internet akan membahas tentang cara membuat login dengan extjs. Disini saya menggunakan PHP untuk proses loginn ke database dan database yang saya gunakan adalah mysql.

Disini saya menganggap teman-teman sudah membaca postingan saya sebelumnya: membuat form upload file dengan menggunakan extjs dan php, dan Free download theme extjs , jadi teman-teman sudah mempunyai file extjsnya (ext-2.2). Dan saya anggap teman- teman dah mengerti cara memanggil file extjs tersebut. Ok lansung aja masuk ke pokok pembahasan. Berikut adalah file yang dibutuhkan dalam membuat form login ini:

1. koneksi.php
file ini digunakan untuk koneksi ke databse

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


2. index.php file ini digunakan untuk memanggil file extjs dan dan file form login itu sendiri

<html>
<head>
<title>Form Login</title>
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/xtheme-slate/css/xtheme-slate.css" />
<script type="text/javascript" src="http:ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http:ext-2.2/ext-all.js"></script>
<script type="text/javascript" src="login.js"></script>
</head>
<body bgcolor="#FFFFFF">
<div style="height:180px"></div>
<div id="form" align="center"></div>
</body>
</html>


script yang berwarna merah itu urutannya jangan dirubah,, so jika temen-temen merubahnya maka pasti akan ada pesan error yaitu formnya tidak muncul.

3. login.js buat tampilan formnya.

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

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

items:[{
xtype:'box', //buat naruh gambar icon
autoEl:{
tag:'img',
src:'im48x48.png'
}
},
{
fieldLabel:'Username', //buat ngisi username
name:'username',
allowBlank:false
},{
fieldLabel:'Password', // buat ngisi password
name:'password',
inputType:'password',
allowBlank:false
}],


buttons:[{
text:'Login',

handler:function(){
login.getForm().submit({
method:'POST',
waitTitle:'Harap Tunggu',
waitMsg:'Mengirim data...',


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

if (btn == 'ok')
{
var redirect = 'index1.php'; //jika sukses akan di redirec ke 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:'Please Login',
width:315,
height:155,
closable: false,
items: login
});

createwindow.show();
});


4.login.php digunkan untuk proses loginnya. mencocokkan data yang dimasukkan user dengan databse.

<?php
session_start();
include "koneksi.php";

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

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


Contoh diatas saya menggunakan session, dan yang saya session disini adalah username. jika login berhasil maka akan di redirect ke ke file index1.php

5. index1.php hanya untuk mengecek login kita berhasil apa tidak

<?php
session_start();
echo "selamat datang " .$_SESSION['nama'];
?>


6. dan yang terakhir adalah code dari sql itu sendiri.

CREATE TABLE `form` (
`username` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;


OK saya rasa tutorialnya sudah cukup jelas..

kamu bisa mendownload source code lengkapnya dini

jika ada pertanyaan silahkan meninggalkan comment.







Title: Membuat form Login dengan Extjs
Posted by faisal

Thanks for reading about Membuat form Login dengan Extjs