Yang perlu di persiapkan :
1. IDE (Saya gunakan netbeans, download di http://www.netbeans.com/downloads/index.html)
2. JSP/Servlet Container (Apache Tomcat *netbeans include)
3. ExtJs library(download dari http://www.extjs.com/products/js/download.php)
Sementara ini proses validasi login masih bersifat hardcode, belum menggunakan database.
Ada 3 file yang perlu kita buat yaitu index.jsp , login.js , dan login.jsp
-index.jsp yaitu untuk memuat konten HTML form Login
-login.js yaitu berisi kode-kode JavaScript ExtJS untuk Login GUI pada HTML di index.jsp. File ini (login.js) juga berisi kode/logika proses validasi hasil pengiriman data ke server yg membalikan respon berupa JSON apakah login berhasil atau tidaknya, jika berhasil maka halaman akan dialihkan ke halaman lain/utama.
-login.jsp yaitu berisi kode/logika proses validasi login
Mulai
Pertama buka atau jalankan Netbeans.
-New Project (Ctrl + Shift + N)
-Pilih Categories : Java Web
-Pilih Project : Web Application
Secara default kita akan dibuatkan sebuah file index.jsp yang berisi “Hello World”, nanti kita akan menyesuaikan isi file tersebut atau mudahnya hapus seluruh isi (Kode2) di dalam index.jsp (default) tersebut.
Kemudian library ExtJS yang sudah kita download sebelumnya, extract here dengan winrar dan rename folder hasil extract tersebut dengan nama “ext”.
Setelah direname kita memasukan folder “ext” tersebut ke dalam Web Pages pada project netbeans yang telah dibuat sebelumnya.. caranya dengan copy folder tersebut, lalu kita paste langsung di dalam Tree Project Netbeans (klik kanan paste pada Folder Web Pages).
index.jsp
<pre><%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"> <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext/ext-all.js"></script> <script type="text/javascript" src="login.js"></script> </head> <body></body> </html>
login.js
Buat sebuah file baru pada project (Ctrl + N)
-Pilih Categories : Web
-Pilih File Types : JavaScript File
Beri nama “login”
Berikut isi dari file login.js
Ext.onReady(function(){
Ext.QuickTips.init();
var login = new Ext.FormPanel({
labelWidth:80,
url:'login.jsp', //server side yg menghandle proses validasi
frame:true,
title:'Please Login',
defaultType:'textfield',
monitorValid:true,
items:[{
fieldLabel:'Username',
name:'loginUsername',
allowBlank:false
},{
fieldLabel:'Password',
name:'loginPassword',
inputType:'password',
allowBlank:false
}],
buttons:[{
text:'Login',
formBind: true,
handler:function(){
login.getForm().submit({
method:'POST',
waitTitle:'Connecting',
waitMsg:'Sending data...',
success:function(){
Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
if (btn == 'ok'){
var redirect = 'main.jsp'; //halaman jika berhasil
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);
}
login.getForm().reset();
}
});
}
}]
});
var win = new Ext.Window({
layout:'fit',
width:300,
height:150,
closable: false,
resizable: false,
plain: true,
border: false,
items: [login]
});
win.show();
});
login.jsp
Buat sebuah file baru pada project (Ctrl + N)
-Pilih Categories : Web
-Pilih File Types : JSP
Beri nama “login”
Isi file login.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%
String result;
String loginUsername = request.getParameter("loginUsername");
String loginPassword = request.getParameter("loginPassword");
if (null != loginUsername && loginUsername.length() > 0) {
if (null != loginPassword && loginPassword.length() > 0) {
if (loginUsername.equals("nama_anda") && loginPassword.equals("password_anda"))
result = "{success:true}";
else
result = "{success:false,errors:{reason:'Login failed.Try again'}}";
} else {
result = "{success:false,errors:{reason:'Login failed.Try again'}}";
}
} else {
result = "{success:false,errors:{reason:'Login failed.Try again'}}";
}
%>
<%=result %>
Selesai
Coba untuk running project netbeans anda (tombol F6)
Jika tidak ada kesalahan/error maka akan muncul jendela login pada HTML
Silahkan dicoba untuk memasukan username dan password, sesuaikan dengan String “nama_anda” dan String “password_anda” pada file login.jsp
jika berhasil akan beralih ke halaman main.jsp, berhubung belum dibuat maka akan muncul pesan error dari apache tomcat.
Filed under: ExtJS, java, Programing, Uncategorized, Web
mas maw tanya, itu klo berhasil login bisa tidak diarahkan, misalnya ke sebuah website…???
kalau bisa, editingnya di file mana dan di bagian mana…???
trims…
@Edi Triyadi
Tentu bisa,
Kita tinggal rubah variable redirect URL nya pada file login.js (baris ke 36)
di contoh yang saya berikan:
var redirect = ‘main.jsp’;
anda bisa rubah misalnya menjadi:
var redirect = ‘http://url.tujuan.com’;