Ext Gwt(Gxt) RIA어플리케이션 개발(9번째)

오늘 강좌에서는 로그인 페이지와 세션에 대해 애기해보자. 우리는 지금까지 어플리케이션의 뼈대를 구성하고 추가적으로 개발할 프로그램이 자리 잡을 수 있도록 프로그램영역과 좌측 트리메뉴 등을 구성했다. 이제 관리자페이지에 접근할 수 있도록 로그인 페이지를 만들고 아이디와 패스워드를 통해 인증처리를 추가해 보도록 하자.

 

로그인 페이지를 만들어 보자 . 우선 본인은 디자이너가 아니므로 내 손으로 html을 만들면 흉해질 것이므로 tistory의 로그인페이지를 살짝 긁어와 맘대로 사용해보자. 뭐 상업적으로 이용하는건 아니니깐 .. 암튼 본인이 바꿀 수 있으면 바꾸시고 ~

▷ 티스토리에서 훔쳐온 로그인페이지를 그대로 이용하자

▷ 소스는 아래와 같다. war폴더에 index.html이라는 이름으로 파일을 생성하자.

	

	
	
	

		

			

				
				
				
			
			
			

				
				
이메일 저장
				|
				아이디
 · 비밀번호 찾기
			
			

		
		

			
티스토리 초대장 받으러가기
			
Copyright (c) 
Daum Communications. All rights reserved.
		
	
	
	

▷ 이제 실행시켜 보자. 근데 실행하기 전에 Run Configuration에 대해 간략히 언급을 하고 가자. 아래와 같이 Run Configuration을 실행해보자.

▶ Run Configuration 의 실행 모습이다. 기본적으로 해당 프로젝트의 Root에 마우스우측 클릭하고 실행하면 그 프로젝트의 이름으로 된 html파일이 실행되도록 설정되어 있다 . 나의 경우 Name필드에 .html을 떼어버리고 RiaApp로 변경하고 그 밑의 Server 탭에서 서버구동시 포트를 변경할 수 있도록 세팅가능하도 여러개의 GWT어플리케이션을 구동할 때 포트를 달리하여 사용할 수 있다..

▶ Server탭의 포트 설정 부분

▶ 위의 설정이 끝나면 Apply를 클릭하고 다음번에 GWT어플리케이션을 실행할 때는 아래 그림처럼 하면 간편하죠!

▶ 자 이제 본론으로 들어가서 브라우저에 우리가 만든 index.html을 실행 해보도 록 하자.

이제 아이디와 패스워드를 아무렇게나 넣고 로그인 버튼을 클릭해보자. 아마 아무 반응이 없을 것이다. 콘솔 창을 통해 무슨일이 일어났는지 보자. 아래 로그를 보니 /common/loginChk.jsp가 없다고 나온다. 우리는 index.html에 계정을 넣고 로그인 버튼을 클릭했을 경우 /common/loginChk.jsp로 보내도록 코딩했다. 이 파일에서는 index.html에서 받아온 계정을 확인하고 세션을 생성하고 실제 Gxt 어플리케이션을 실행하는 역할을 하도록 해야한다.

▶ /common/loginChk.jsp를 생성하고 아래와 같이 코딩하자.

<%
// 1. 로그인 계정의 유효성을 확인하는 로직
// 2. 세션 생성
// Gwt 어플리케이션에서 이 세션을 어떻게 이용할 수 있는지
// 확인할 수 있다.
session.setAttribute("loginid", request.getParameter("loginid"));
%>
< script language='javascript'>
parent.location.href="/RiaApp.html?gwt.codesvr=127.0.0.1:9997#0001";
< /script>

▶ 이제 다시 실행해 보자. index.html을 실행하고 계정을 입력하고 로그인 버튼을 클릭하면 Gxt어플리케이션이 실행될 것이다.

오늘은 여기까지... 다음에는 RiaApp.html을 조금 정비하고 GWT에서 서비스를 이용하는 방법과 세션의 사용법을 배워보도록 하자.