"Hello World!": DWR을 이용한 간단한 로그인 예제.

오랜만에 포스팅..

Ajax 와 Java 의 만남으로, DWR(Direct Web Remoting) 라는 좋은 놈이 있다.

이놈을 좀 잘 활용하면, 서블릿이 필요가 읍다.

자바스크립트로 직접적으로 접근을 하니, 그러나 표현하는 데이터가 많으면 속도가 느리다.

적절히 혼합해서 사용하면 정말 굳일듯?

우선 다운로드를 한다.

http://directwebremoting.org/dwr/download

해당 라이브러리 추가후,

아래와 같이 수정

WEB-INF/web.xml
[code].....
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<description>Direct Web Remoter Servlet</description>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>


<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
.....

<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
[/code]

WEB-INF/dwr.xml (신규 생성)
[code]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="Login">
<param name="class" value="test.Login" />
<include method="loginProc" />
</create>
</allow>
</dwr>
[/code]

[code]<create creator="new" javascript="Login">[/code]
- 페이지에서 Login 이라는 자바스크립트 클래스로 이용한다.

[code]<param name="class" value="test.Login" />[/code]
- 위 사용하려는 Login 의 참조 클래스

[code]<include method="loginProc" />[/code]
- Login 클래스의 메소드

test.Login
[code]package test;

public class Login {

public Login(){}

public String loginProc(String id, String pw){
String loginResult = "false";

if( id.equals("test") && pw.equals("test") ){
loginResult = "true";

}

return loginResult;
}

}
[/code]

별거 읍다. test / test 로 들어왔을때 맞는지 아닌지만 확인. 실 이용에는 DB커넥션등.. 뭐 들어가면 될듯.

login.html
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login.html</title>
<meta http-equiv="content-type" content="text/html; charset=EUC-KR">
   <script type='text/javascript' src='../dwr/interface/Login.js'> </script>
<script type='text/javascript' src='../dwr/engine.js'></script>
<script type='text/javascript' src='../dwr/util.js'></script>
<script type='text/javascript'>

function loginProc(){
var id = dwr.util.getValue('id');
var password = dwr.util.getValue('password');

Login.loginProc( id, password, resultData );
}

function resultData(loginResult){
console.info( loginResult );

if( loginResult == "true" ){
document.getElementById("resultLayer").innerHTML = "<b>로그인 완료</b>";
}

if( loginResult == "false" ){
document.getElementById("resultLayer").innerHTML = "<b>로그인 실패</b>";
}

}

</script>
</head>

<body>
test / test
<hr />

<div id="displayLayer">
<div>
<table>
<tr>
<td>id</td>
<td>: <input type="text" id="id" name="id" /></td>
</tr>
<tr>
<td>pw</td>
<td>: <input type="password" id="password" name="password" /><input type="button" value="login" onClick="loginProc();" /></td>
</tr>
</table>
</div>
</div>

<hr />

<div id="resultLayer">
</div>

<div>
</div>
</body>
</html>
[/code]

스크립트 선언에 보면,
[code]<script type='text/javascript' src='../dwr/interface/Login.js'> </script>
<script type='text/javascript' src='../dwr/engine.js'></script>
<script type='text/javascript' src='../dwr/util.js'></script>
[/code]

부분을 볼수가 있는데, 경로는 현재 웹컨덴츠 루트를 선택해 주면 된다.
[code]<script type='text/javascript' src='http://localhost:8080/test/dwr/engine.js'></script>
[/code]

그리고 사용자 정의 클래스를 불러오는 부분이
[code]<script type='text/javascript' src='../dwr/interface/Login.js'></script>[/code]

이 부분이 되겠다. /dwr/interface/ 로 해서 불러오면 끝.

그리고 이제 실 사용부분을 보면,
dwr.util.getValue 는 뭐 보면 아시겠으니 생략
[code]Login.loginProc( id, password, resultData );[/code]

loginProc(String id, String passwrd) 를 사용하므로 id 와 password 를 넘겨준다.

그런데 resultData 라고 하나가 더 들어가있다. 이것은 callBack 부분이므로 리턴값이 있는 경우 사용하면된다.

function resultData 에서 마지막으로 결과 값 처리를 한다.

참 쉽죠~? (사실 나도 처음에 헤맸다. -_-)

"Hello World!"

2009년 5월 14일 목요일

DWR을 이용한 간단한 로그인 예제.

댓글 2개: