Form login yang saya bahas di sini adalah salah satu bagian dari program chating yang saya buat jadi ini saya anggap sebagi salah satu bab dari aplikasi chating, karena pada awal kita melakukan proses untuk chating kita akan melakukan registrasi dulu, apakah user kita sudah terdaftar atau belum.langkah pertama yang akan kita lakukan adalah dengan membuat sebuah halaman login.persiapan :
- Download ExtJs.
- Install apache tomcat.
- untuk editor penulis menggunakan dreamweaver dan aptana kalo belum punya tanya sama mbah google.
- PostgreSQL sebagai database server.
- sebuah komputer itu pasti.
Buat foolder baru di webapps pada tomcat anda dengan nama chatextjs, dan buat folder js di dalamnya. lalu kopikan library ExtJs ke dalam folder js anda
- adapter
- resources
- ext-all.js
- ext-core.js
Sebelum kita lanjutkan mari kita buat database dulu pada postgreSQL kita masuk ke dalam postgreSQL dan create database chatextjs, ingat di dalam postgres ini sama dengan bahasa C jadi penulisan huruf besar kecil akan berbeda.setelah membuat database buat sebuah table tulis source di bawah ini:
CREATE TABLE "public"."userproject" (
"kduser" SERIAL,
"nama" VARCHAR(30),
"katakunci" CHAR(32),
"kddepart" CHAR(3),
"tingkat" SMALLINT,
"telp" VARCHAR(20),
"email" VARCHAR(30),
"status" BOOLEAN,
"lastlogin" TIMESTAMP WITHOUT TIME ZONE,
"kduseratas" INTEGER,
"kduserentry" INTEGER,
"tglentry" TIMESTAMP WITHOUT TIME ZONE DEFAULT now(),
"wewenang" SMALLINT DEFAULT 9,
CONSTRAINT "userproject_pkey" PRIMARY KEY("kduser")
) WITHOUT OIDS;
COMMENT ON COLUMN "public"."userproject"."wewenang"IS '1 : Admin 9: user Biasa';
isi data dengan default contoh :Insert into userproject (nama,katakunci) values(’admin’,md5(’admin’));sekarang buat folder koneksi dan chat di dalam folder chatextjs.buat file koneksi.jsp dan kopikan source dibawah ini :
<%@ page import="java.sql.*"%>
<%@page import="java.text.SimpleDateFormat"%>
<%
class clsKoneksi{
public clsKoneksi() {
//koneksi=getFile();
}
public String[] strKoneksi = {"org.postgresql.Driver","jdbc:postgresql://localhost:5432/chatextjs","userkamu","passwordkamu"};
}
class classDB {
/** Creates a new instance of classDB */
public classDB(String [] Koneksi) {
koneksi = Koneksi;
cobaKoneksi(Koneksi);
}
public void cobaKoneksi(String [] koneksi) {
try {
Class.forName(koneksi[0]);
con = DriverManager.getConnection(koneksi[1],koneksi[2],koneksi[3]);
} catch(java.lang.ClassNotFoundException e) {
System.out.println("Koneksi Driver ODBC Gagal");
System.out.println(e.getMessage());
} catch(java.lang.NullPointerException e) {
} catch(Exception exc){}
}
public void ExecSQL(String perintahSQL) {
try {
stmt = con.createStatement();
stmt.executeUpdate(perintahSQL);
stmt.close();
//con.close();
} catch(SQLException ex) {
System.err.println("SQLException: " + ex.getMessage());
}
}
public Object[][] getObjectRS(String SQL) {
ResultSet rs =null;
Object[][] Isi = new Object[1][];;
//System.out.println("SQL di kelasDB " + SQL);
// int [] tipeDataKolom = new int[20];
int baris =0;
try {
stmt = con.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE, ResultSet.CONCUR_READ_ONLY);
rs = stmt.executeQuery(SQL);
// untuk mengetahui berapa kolom dalam hasil ResultSet
ResultSetMetaData metaData = rs.getMetaData();
jmlKolom = metaData.getColumnCount();
for(int i=0; i<jmlKolom; i++) {
namaKol[i]=metaData.getColumnName(i+1);
}
rs.last();
jmlBaris = rs.getRow();
Isi = new Object[jmlBaris][];
rs.first();
Isi [baris] = new Object[jmlKolom];
for(int i=0; i<jmlKolom; i++) {
if (metaData.getColumnType(i+1) == 93 )
Isi[baris][i] = (formatTGL.format(rs.getDate(i+1))==null?"":formatTGL.format(rs.getDate(i+1)));
//(rs.getString("seksi")==null?"":rs.getString("seksi").trim())
else if (
metaData.getColumnType(i+1) == -6 || // -6 tinyint
metaData.getColumnType(i+1) == 5 || // 5 smallint
metaData.getColumnType(i+1) == 4 ) // 4 int
Isi[baris][i] = new Integer(rs.getInt(i+1));
else if (metaData.getColumnType(i+1) == 3 || //3 money
metaData.getColumnType(i+1) == 7 ) //7 real
Isi[baris][i] = new Double(rs.getDouble(i+1));
else
Isi[baris][i] = new String(rs.getString(i+1)==null?"":rs.getString(i+1));
}
baris++;
///Isi data ke Obyek
while (rs.next()) {
Isi [baris] = new Object[jmlKolom];
for(int i=0; i<jmlKolom; i++) {
if (metaData.getColumnType(i+1) == 93 )
//Isi[baris][i] = formatTGL.format(rs.getDate(i+1));
Isi[baris][i] = (formatTGL.format(rs.getDate(i+1))==null?"":formatTGL.format(rs.getDate(i+1)));
else if (
metaData.getColumnType(i+1) == -6 || // -6 tinyint
metaData.getColumnType(i+1) == 5 || // 5 smallint
metaData.getColumnType(i+1) == 4 ) // 4 int
Isi[baris][i] = new Integer(rs.getInt(i+1));
else if (metaData.getColumnType(i+1) == 3 || //3 money
metaData.getColumnType(i+1) == 7 ) //7 real
Isi[baris][i] = new Double(rs.getDouble(i+1));
else
Isi[baris][i] = new String(rs.getString(i+1)==null?"":rs.getString(i+1));
}
baris++;
}
stmt.close();
} catch(SQLException ex) {
System.err.println("SQLException -1: " + ex.getMessage());
} catch(Exception ex) {
System.err.println("SQLException -2: " + ex.getMessage());
}
return Isi;
}
public Object[] getSatuRekord(String SQL) {
ResultSet rs =null;
Object[] Isi = new Object[20];
// int [] tipeDataKolom = new int[20];
int baris =0;
String kata ="";
try {
///con = DriverManager.getConnection(koneksi[1],koneksi[2],koneksi[3]);
stmt = con.createStatement();
rs = stmt.executeQuery(SQL);
// untuk mengetahui berapa kolom dalam hasil ResultSet
ResultSetMetaData metaData = rs.getMetaData();
jmlKolom = metaData.getColumnCount();
tipeDataKol = new int[jmlKolom];
///Isi data ke Grid
while (rs.next()) {
Isi [baris] = new Object[jmlKolom];
for(int i=0; i<jmlKolom; i++) {
if (metaData.getColumnType(i+1) == 93 )
Isi[i] = formatTGL.format(rs.getDate(i+1));
else if (
metaData.getColumnType(i+1) == -6 || // -6 tinyint
metaData.getColumnType(i+1) == 5 || // 5 smallint
metaData.getColumnType(i+1) == 4 ) // 4 int
Isi[i] = new Integer(rs.getInt(i+1));
else if (metaData.getColumnType(i+1) == 3 || //3 money
metaData.getColumnType(i+1) == 7 ) //7 real
Isi[i] = new Double(rs.getDouble(i+1));
else if (metaData.getColumnType(i+1) == 1 || metaData.getColumnType(i+1) == 12 )
Isi[i] = new String((kata=rs.getString(i+1))==null?"": kata );
else
Isi[i] = null;
// System.out.println(Isi[i].toString());
}
baris++;
}
stmt.close();
} catch(SQLException ex) {
System.err.println("SQLException: " + ex.getMessage());
}
return Isi;
}
public int getJumlahRekord(String SQL) {
ResultSet rs =null;
int baris=0;
try {
///con = DriverManager.getConnection(koneksi[1],koneksi[2],koneksi[3]);
stmt = con.createStatement();
rs = stmt.executeQuery(SQL);
// hitung data yang cocok
while(rs.next()) {
baris = rs.getInt(1);
}
stmt.close();
} catch(SQLException ex) {
System.err.println("SQLException: " + ex.getMessage());
}
return baris;
}
public void tutupKoneksi() {
try {
con.close();
}catch (Exception exc ) {}
}
public int [] getTipeDataKolom() {
return tipeDataKol;
}
public String [] getNamaKolom() {
return namaKol;
}
public int getJmlKolom() {
return jmlKolom;
}
public int getJmlBaris() {
return jmlBaris;
}
public ResultSet setRec(String SQL){
ResultSet rst=null;
try{
stmt = con.createStatement();
rst = stmt.executeQuery(SQL);
}catch(SQLException sqlE){
System.out.print(sqlE.getMessage());
}
return rst;
}
public Connection con;
public int limit=100;
Statement stmt;
String[] koneksi;
SimpleDateFormat formatTGL = new SimpleDateFormat("MM-dd-yyyy");
int jmlKolom,jmlBaris;
int [] tipeDataKol;
String [] namaKol= new String[20];
}
%>
Setelah anda membuat file koneksi buat sebuah file index.jsp pada folder chatextjs/chat/index.jsp ketik koding di bawah ini:
<%
//Buat sesion
HttpSession ses = request.getSession(true);
ses.setMaxInactiveInterval(360);
try{
String[] sesi = {""};
ses.setAttribute("user",sesi);
}catch(Exception ex){}
%>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/display.css">
<link rel="stylesheet" type="text/css" href="../js/resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../js/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../js/ext-all.js"></script>
<!-- Common Styles for the examples -->
<script type="text/javascript" src="index.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Login Room</title>
</head>
<body>
</body>
</html>
Buat juga file index.js yang isinya seperti di bawah ini :
// JavaScript Document
Ext.SSL_SECURE_URL="../images/net.png";
Ext.BLANK_IMAGE_URL="../images/net.png";
Login = function(){
var dialog, form;
return{
Init:function(){
var logoPanel = new Ext.Panel({
baseCls: 'x-plain',
bodyStyle: 'background:#f9f9f9 url(../images/Voice.png) no-repeat center center;',
region: 'center'
});
var formPanel = new Ext.form.FormPanel({
baseCls: 'x-plain',
baseParams: {
module: 'login'
},
bodyStyle: 'background:#f9f9f9 none; color:#222; padding:5px 35px;',
defaults: {
width: 150
},
defaultType: 'textfield',
frame: false,
height: 70,
items: [{
fieldLabel: 'User Name',
name: 'user',
value: 'admin'
},{
fieldLabel: 'Password',
inputType: 'password',
name: 'pass',
value: 'admin'
}],
labelWidth:80,
region: 'south'
});
dialog = new Ext.Window({
buttons: [{
handler: function(){
form.submit({
url: 'cekLogin.jsp',
waitMsg:'Please Wait...',
reset:true,
success:Login.Success,
failure:function() {
Ext.MessageBox.alert('Status','User atau Password salah');
},
scope:Login
});
},
scope: Login,
text: 'Login'
}],
buttonAlign: 'right',
closable: false,
draggable: true,
height: 350,
id: 'login-win',
layout: 'border',
minHeight: 350,
minWidth: 330,
plain: false,
resizable: true,
items: [
logoPanel,
formPanel
],
title: 'Chat Login',
width: 330
});
form = formPanel.getForm();
dialog.show();
},
Success: function(f,a){
//Ext.MessageBox.alert('Confirm', a.result.info);
if(a && a.result){
dialog.destroy(true);
window.location = 'main/';
//window.open('menuutama/main.jsp', '', 'fullscreen=yes, scrollbars=auto');
}
}
};
}();
Ext.BasicForm.prototype.afterAction=function(action, success){
this.activeAction = null;
var o = action.options;
if(o.waitMsg){
Ext.MessageBox.updateProgress(1);
Ext.MessageBox.hide();
}
if(success){
if(o.reset){
this.reset();
}
Ext.callback(o.success, o.scope, [this, action]);
this.fireEvent('actioncompleted', this, action);
}else{
Ext.callback(o.failure, o.scope, [this, action]);
this.fireEvent('actionfailed', this, action);
}
}
Ext.onReady(Login.Init, Login, true);
Karena pada program di atas memanggil cekLogin.jsp untuk proses pengecekan nya buat juga file cekLogin.jsp :
<%@ include file="../koneksi/koneksi.jsp" %>
<%
String[] koneksi=new clsKoneksi().strKoneksi;
classDB kelasDB=new classDB(koneksi);
String usr=request.getParameter("user");
String pswd=request.getParameter("pass");
//Buat sesion
HttpSession ses = request.getSession(true);
ses.setMaxInactiveInterval(3600);
try{
Object[] isi=kelasDB.getSatuRekord("select * from tools.fn_login('" + usr + "','" + pswd + "')");
//out.println("Baru2");
if(isi[0].toString().trim().equals("1")){
String[] sesi = {usr};
ses.setAttribute("user",sesi);
out.println("{success:true}");
}else{
String[] sesi = {""};
ses.setAttribute("user",sesi);
out.println("{success:false}");
}
}catch(Exception ex){}
%>
Nah sampai di sini program sudah mendekati jadi, tapi pasti ada pertanyaan dari pembaca trus gimana masalah scuritynya wah ini ada dosen saya yang bilang security bukanlah product tapi proses nah saya coba memanfaatkan kemampuan dari postgreSQL yaitu dengan membuatkan sebuah function untuk proses login yaitu fn_login yang terletak pada schema tools pada postgreSQL untuk source anda dapat kopi dari bawah ini :
CREATE OR REPLACE FUNCTION "tools"."fn_login" (usr varchar, pass varchar) RETURNS smallint AS
$body$
declare
hasil smallint;
begin
hasil :=0;
select count(*) into hasil from userproject where userproject.nama=usr
and userproject.katakunci=md5(pass);
if not found then
hasil :=0 ;
end if;
return (hasil);
end;
$body$
LANGUAGE 'plpgsql' VOLATILE CALLED ON NULL INPUT SECURITY INVOKER;
Ok sederhana kan functionya. setelah semua siap tinggal jalankan. Selamat mencoba….
Untuk dapat mengikuti perjalanan mbahsomo dan tulisan - tulisannya
silakan masuk ke http://mbahsomo.ucoz.com
–> 
