Bernu Dwi Andika

Icon

explain what this blog is about.

Basic Login dengan ExtJS dan JSP

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.

Advertisements

Filed under: ExtJS, java, Programing, Uncategorized, Web

4 Responses

  1. edi triyadi says:

    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…

    • Bernu says:

      @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’;

  2. […] Berikut isi dari file login.js view sourceprint? […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: