Home » extjs tutorial » Pemrograman Website (EXTJS) » Membuat form Login dengan Extjs

Membuat form Login dengan Extjs

,

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

Categories: ,

+ comments + 14 comments

Reply
iLLusioN
January 31, 2009 at 2:53 AM

gag mudeng aquw c0nk.,,
hahahahaggzzz,, :D

Reply
Anonymous
February 8, 2009 at 3:27 AM

Mantap juga kalau returnya pakai php_json, utk minimalisasi error:

$ret = new stdClass();
$ret->success = true;

if(!$ada)
{
$ret->success = false;
$ret->errors['reason'] = 'Login failed. Try Again';
}

echo json_encode($ret);

Reply
Anonymous
February 8, 2009 at 8:05 AM

ok gun..........

Reply
Anonymous
February 28, 2009 at 4:56 AM

eh bro, ini isa di pake pada blogger gak, soalnya gw dah cari2 cara ini sejak 1 bulan yg lalu buat blog gw,

klo isa blz komennya dunk...

Reply
Anonymous
March 1, 2009 at 1:10 AM

kalo wordpress ada bro.. kalo blogger aq belum tahu.. coba ke mbah google..

Reply
rosi
December 15, 2009 at 7:51 PM

alhamdulillah akhirx ada situsx orang indonesia yg bahas extjs
coz susah bgt nyari tutorial extjs yg bhs indonesia...

Bos...punya script buat kalkulator dgn EXTJS ta?
please post dunkz....!!!
thanks..

Reply
Anonymous
December 15, 2009 at 7:52 PM

alhamdulillah akhirx ada situsx orang indonesia yg bahas extjs
coz susah bgt nyari tutorial extjs yg bhs indonesia...

Bos...punya script buat kalkulator dgn EXTJS ta?
please post dunkz....!!!
thanks..

Reply
Anonymous
December 28, 2009 at 6:33 PM

pakai extjs versi 3.1.0 kok yg tampil cuman form login yah, yg input user dan password tidak tampil.. ?

Reply
chakul26
March 31, 2010 at 9:27 PM

saya baru pertama kali pake extjs,,
gimana cara memanggil file extjs?
trus folder aplikasi kita disimpennya dimana? didalam folder extjs nya ato diluar?
mohon pencerahannya mas,,soalnya nyobain yg diatas from nya ga keluar.. thx b4 :D

Reply
chakul26
March 31, 2010 at 9:27 PM

saya baru pertama kali pake extjs,,
gimana cara memanggil file extjs?
trus folder aplikasi kita disimpennya dimana? didalam folder extjs nya ato diluar?
mohon pencerahannya mas,,soalnya nyobain yg diatas from nya ga keluar.. thx b4 :D

Reply
chakul26
March 31, 2010 at 9:33 PM

saya baru pertama kali pake extjs,,nyobain program yg diatas ko ga jalan yh,,trus cara manggil extjs dan cara nyimpen folder program kita dmn? disatuin ma folder extjs nya ato dipisah? maklum mas masih newbie..
mohon pencerahannya...thx b4 :D

Reply
faisal
April 1, 2010 at 3:33 PM

@rhian

bisa dalam satu folder extjs bisa di pisah mas. coba perhatikan code ini mas

coba perhatikan file index.php pada tutoral ini mas.

pada file tersbut saya memisah file index.php, maksudnya tidak dalam satu folder dengan library extjs.

Reply
Unknown
June 9, 2010 at 1:31 AM

tutorial yg bagus.. :-bd
saya baru pertama pake EXTJS...
Mau tanya, kalo pas login kita mau pake session, supaya ntar kalo page di-reload ga muncul lagi halaman login nya gimana yah?

thx.

Reply
Anonymous
February 26, 2011 at 8:46 AM

buat sekalian form menu jg...
form menunya blom ada...

Post a Comment