이번장은 interceptor를 이용하여 로그인 처리를 해보도록 하겠습니다.

인터셉터는 주로 컨트롤러 이벤트 호출전에 가로채서 어떠한 처리를 해주기 위해 사용되는 기능입니다.

만약 인터셉터를 사용하지 않고 일반적 로그인 체크를 코드마다 모두 작성한다고 가정해보도록 하겠습니다

위처럼 로그인이 필수인 컨트롤러를 작성할때 마다 로그인 체크 로직을 CTRL + C/V 해주어야 합니다.

코드도 길어지고 로그인 체크 일부가 변경되면 모두 변경해주어야 하는 번거로움이 있습니다.

이부분을 해결하기위해 별도로 로그인 체크유틸을 만들어서 사용하는 분들도 계시긴하지만 

만약 유틸클래스명이나 사용하려는 메서드 일부가 변경이된다면?

일일이 모두 변경해주어야 하는 번거로움이 있습니다.

인터셉터를 만약에 정의하게 된다면?

위처럼 인터셉터를 거쳐서 통과시 컨트롤러 호출이 진행됩니다.

세션체크가 필요한 페이지는 XML 설정에 의해 정의해줌으로써 

각 페이지마다 로그인 체크 해주는 코드를 작성해줄 필요가 없습니다.

그럼 로그인체크를 예를 들어서 인터셉터 설정을 잡아보도록 하겠습니다.

mvc-config.xml 코드추가

<mvc:interceptors>
	    <mvc:interceptor> 
	   	   <mvc:mapping path="/admin_main"/>
	   	   <!-- 여러개 컨트롤러 추가 가능 --> 
	   	   <!-- 
	   	   		<mvc:mapping path="/admin_write"/>
	   	   		<mvc:mapping path="/admin_update"/> 
	   	   		<mvc:mapping path="/admin_delete"/>
	   	   		.
	   	   		.
	   	   		.
	   	   -->
	   	   <!-- 로그인체크 인터셉터 클래스 -->
	       <bean class="com.spring.interceptor.Interceptor"/>
	    </mvc:interceptor>
	</mvc:interceptors>

mvc-config.xml에 정의한 인터셉터 코드를 말씀드리자면 

여러개의 인터셉터를 정의할수 있습니다.

mvc:interceptor 태그들을 mvc:interceptors내에 여러개 정의하여 

컨트롤러 성향별로 인터셉터 여러개를 정의할 수 있습니다.

ex) 관리자 로그인, 사용자 로그인 등...

그리고 mvc:mapping 태그들을 mvc:interceptor 태그내에 여러개 정의하여 

하나의 인터셉터로 여러개의 컨트롤러를 제어 할 수 있습니다.

ex) 관리자 로그인 후 글쓰기페이지,글수정페이지,삭제기능 등....

interceptors 태그 추가를 하였으면 

"com.spring.interceptor" 패키지 생성 후에 "Interceptor" 클래스를 생성합니다.

그런 다음 코드를 작성해봅니다.

Interceptor클래스 코드작성

public class Interceptor extends HandlerInterceptorAdapter{
	
	@Override
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
		try {
			//admin이라는 세션key를 가진 정보가 널일경우 로그인페이지로 이동
			if(request.getSession().getAttribute("admin") == null ){
					response.sendRedirect("/");	
					return false;
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		//admin 세션key 존재시 main 페이지 이동
		return true;
	}

	@Override
	public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
		super.postHandle(request, response, handler, modelAndView);
	}

	@Override
	public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
		super.afterCompletion(request, response, handler, ex);
	}

	@Override
	public void afterConcurrentHandlingStarted(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
		super.afterConcurrentHandlingStarted(request, response, handler);
	}
}

위에 보시면 4가지의 인터셉터에 대한 오버라이드 속성이 존재합니다.

1. preHandle - controller 이벤트 호출전

2. postHandle - controller 호출 후 view 페이지 출력전

3. afterCompletion - controller + view 페이지 모두 출력 후

4. afterConcurrentHandlingStarted - 뭐 동시에 핸들링 해주는 메서드인대 정확히는 모르겠습니다.

위 4가지 방식 중 preHandle만 사용하였습니다.

기존 StudyController 컨트롤러 클래스에 컨트롤러 코드 추가

/**
 * 가상의 로그인체크 컨트롤러
 * @param request
 * @return
 */
@RequestMapping("/login")
public String login(HttpServletRequest request){
	String returnURL = "";
	//웹페이지에서받은 아이디,패스워드 일치시 admin 세션key 생성
	if(request.getParameter("id").equals("admin") && request.getParameter("password").equals("1234")) {
		Map<String, Object> map = new HashMap<String,Object>();
		map.put("admin_id", "admin");
		map.put("admin_name", "관리자");
		request.getSession().setAttribute("admin", map);
		returnURL = "redirect:/admin_main";
	//일치하지 않으면 로그인페이지 재이동
	}else {
		returnURL = "redirect:/"; 
	}
	return returnURL;
}
	
	
/**
 * 관리자메인 컨트롤러
 * @return
 */
@RequestMapping("/admin_main")
public String admin_main(){
	return "admin_main";
}

2가지 컨트롤러를 생성하였는데 

"/login" 컨트롤러는 임의로 로그인 체크를 위하여 생성한 컨트롤러이고 

"/admin_main" 컨트롤러는 로그인 이후 세션이 생성된 시점에 접근이 가능한 관리자 메인 컨트롤러입니다.

각 컨트롤러에 return 페이지에 다음 코드를 작성해보겠습니다.

"/" 는 webapp/index.jsp를 의미하므로 index.jsp 파일의 body태그내에 다음과 같이 코드를 작성합니다.

index.jsp BODY태그 추가코드

<form action="/login" method="post">
	<input type="text" name="id"/>
	<input type="password" name="password"/>
	<input type="submit" value="전송" />
</form>

마지막으로 "/admin_main" 컨트롤러 호출로부터

 return 되는 jsp페이지를 "WEB-INF/view/"  경로에 추가 생성 한 다음 

BDOY태그에 다음과 같이 코드작성을 합니다.

admin_main.jsp BODY태그 추가코드

<h3>관리자메인페이지</h3>
관리자 아이디 : ${sessionScope.admin.admin_id }<br/>
관리자 이름: ${sessionScope.admin.admin_name }

위처럼 코드 작성을 해보았다면 실행을 해보도록 합니다.

세션유무로 인하여 페이지 접근권한 테스트를 해보기 위해서 

최초로 URL에 바로 "/admin_main" 페이지를 접속해보도록 합니다.

실행결과 메인URL로 이동되어 로그인 페이지가 출력되었습니다.

세션이 존재 하지 않기때문에 로직에 따라서 자동으로 인터셉터에서 튕겨준 것입니다.

로그인테스트를 해보도록 하겠습니다.

admin/1234를 입력하여 전송버튼을 클릭해주도록 합니다.

그럼 위처럼 관리자 아이디와 이름을 확인할 수 있는 

"/admin_main" 페이지로 성공적으로 이동이 되었습니다.

새로고침해도 역시 세션이 존재하고 있어서 페이지가 유지되고있습니다.

위처럼 인터셉터를 이용하여 로그인 세션체크를 해주시면 되겠습니다.

by 개발로짜

이번 포스팅은 ExtJS에서 제공하는 데이터뷰(DATAVIEW)를 이용하여 

기본적인 리스트 출력을 해보도록 하겠습니다.

dataview 는 사용자가 정의한 템플릿 레이아웃을 출력하고 

그 출력된 데이터를 사용할때 유용한 컴포넌트입니다.

제일먼저 목록출력시 필요한 스타일을 간단하게 꾸며보도록 하겠습니다.

.default { 
  padding: 0 3px 0 3px;
}
	
.item {
    border-width: 1px;
    border-style: solid;
    background-color: blue;
    color: white;
}
	
.over {
	border-width: 2px;
    border-style: dotted;
    background-color: red;
    color: white;
}

a.default_a{
	color: white;
}

위처럼 스타일을 정의하셨다면 

dataview 컴포넌트 출력을 위하여 ExtJS 코드를 작성해보도록 하겠습니다.

Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		renderTo : Ext.getBody(),
		title : 'DATAVIEW 샘플코드',
	    items:[
	           {
	        	   //Ext.view.View
	               xtype : 'dataview',
	               tpl: new Ext.XTemplate(
	            		   '<tpl for=".">',
	            		   		'<div class="item">',
	            		   				'<a href="{url}" target="_blank" class="default_a">{title}</a>',
           		   				'</div>',
         		   			'</tpl>'),
	               //기본 클래스 적용
	               cls: 'default',
	               //목록 아이템
	               itemSelector: '.item',
	               overItemCls: 'over',
   	               trackOver : true,
	               store : Ext.create('Ext.data.Store',{
				     	           fields : ['title','url'],
				     	           data: [
				     	                {title:'네이버',url : 'http://www.naver.com'},
				     	                {title:'티스토리',url : 'http://www.tistory.com'},
				     	                {title:'다음', url : 'http://www.daum.net'},
				     	                {title:'구글', url : 'http://www.google.com'}
				     	           ],
				 	 	           proxy: {
				 	 			        type: 'memory'
				 	 			   }
		 	        		})
	           }
	     ]
	});
})

코드설명 전에 실행먼저 해보도록 하겠습니다 ^^

실행결과는 위와 같습니다.

"직접 레이아웃 스타일 잡고 HTML태그 이용해서 사용해도 되는거 아닌가요?"

라고 의문을 가지시는 분들이 계실텐데요

일반적인 html을 사용하셔도 무관하나 이벤트 및 메소드 등 지원되는 기능들이 많으니

 DATAVIEW를 사용하지 않을 이유는 없는거 같습니다.

위 코드에 대해서 필요부분에 대해서 하나씩 설명해보겠습니다.

PANEL 컴포넌트 내부에 xtype이 dataview인 컴포넌트로 목록을 출력 해보았는대요

dataview를 사용하실때는 패키지 개념의 필수로 작성해주어야 하는 속성이 있습니다.

바로 store, tpl, itemSelector 이 3가지는 필수로 선언이 되어야 합니다.

tpl 속성은 "Ext.XTemplate" 클래스를 이용하여 템플릿을 만들어 주기 위해 필요한 속성입니다.

※ 속성에 정의된 코드를 보시면 JSP에서 JSTL을 사용해보셨던 분이시라면 익숙한 구조일거라 생각됩니다.

    바로 C태그의 <c:forEach></c:forEach> 태그와 비슷한 개념입니다.

for문에 "."은 root 데이터를 의미하는것이라 대부분 "." 을 사용하면 되는부분이여서 크게신경안쓰셔도 되며 

내부 적으로 보시면 {url},{title} 처럼 마치 JSP의 EL 태그와 유사한 치환자를 보실 수 있습니다. 

Ext.data.Store 공간내에 담겨있는 데이터를 출력시켜주기위해 데이터스토어의 fields 내에 정의된 값들와 매칭 시켜주면 되겠습니다.

※ JSTL과 같이 IF태그 AND/OR 등도 사용이 가능합니다. 하지만 이번 포스팅에서는 다루지 않도록 하겠습니다.

그리고 필수요소 마지막인 itemSelector라는 속성이 있는데 

이 속성은 이벤트나 메서드와 같은 dataview에서 지원해주는 기능들을 

적용해주기 위한 셀렉터를 의미하는 겁니다.

그외에 cls는 전체 목록에 default로 적용시킬 클래스명을 명시해주면 되겠으며, 

마지막으로 overItemCls속성의 경우는 

dataview 아이템에 mouseover 되었을 경우의 적용시키고자 하는 클래스명을 

작성주시면 되겠습니다.

overItemCls 속성 적용시 trackOver값을 true로 주면 어떤 역할을 하는거 같은대

 확실히 어떤 역할을 하는지는 정확히 모르겠네요;;

저는 단순하게 a 태그에 링크를 걸어서 새창띄워주는 기능을 하였으나 

리스너의 아이템클릭등과 같은 이벤트를 이용하여 사용하시면 되겠습니다.

by 개발로짜

jQuery에서 지원되는 함수만으로 간단하게 태그값들을 확인 할수 있습니다.

그리고 반대로 원하는 값을 태그값에 적용 또한 가능합니다.

html()함수와 text() 함수 그리고 val() 함수에 대하여  

포스팅 해보도록 하겠습니다.

$("셀렉터").html()

셀렉터태그내에 존재하는 자식태그을 통째로 읽어올때 사용되는 함수

※ 태그 동적추가할때 주로 사용되는 함수

$("셀렉터").text()

셀렉터태그내에 존재하는 자식태그들 중에 html태그는 모두 제외 한 채 문자열만 출력하고자 할때 사용되는 함수

※ html태그까지 모두 문자로 인식시켜주는 함수

$("셀렉터").val()

INPUT 태그에 정의된 value속성의 값을 확인하고자 할때 사용되는 함수

위에 대한 함수들을 각 예제를 통하여 이해해보도록 하겠습니다.

1. $("셀렉터").html() 을 이용하여 태그내 값 가져오기 및 값 적용해보기

제일먼저 HTML태그를 가져와 보도록 하겠습니다.

body 태그내에 다음과 같이 코드를 작성합니다.

<div id="getTag">
	<h3>11111111<br/><span>22222</span>333333333</h3>
</div>

작성이 완료되셨으면 스크립트 코드를 다음과 같이 추가합니다.

$(function(){
	var getTag = $("#getTag").html();
        var getText = $("#getTag").text();
	alert(getTag);
        alert(getText);
});

실행을 해보도록 하겠습니다.

html() 실행결과

text() 실행결과

위처럼 HTML함수는 태그를 포함한 문자열을 통째로 가져왔고 

TEXT함수는 태그를 제외한 문자열만 출력을 시켜주었습니다.

다음으로 html() 함수와 text()함수를 적용하여 

특정 레이어 영역에  HTML 태그 및 텍스트 태그를 적용해보도록 하겠습니다.

기존 body태그내에 정의해놓은 태그를 다음처럼 재작성 합니다.

<div id="getTag" style="border-width: 1px;border-style: solid;border-color: red;"></div>
<br/>
<div id="getText" style="border-width: 1px;border-style: solid;border-color: blue;"></div>

이어서 스크립트 코드들도 다음과 같이 재작성 해줍니다.

$(function(){
	var setTag = "<input type='text'><br />텍스트태그 동적추가하기";
	$("#getTag").html(setTag);
	$("#getText").text(setTag);
});

코드 작성 후 실행을 해보도록 하겠습니다.

빨간네모칸친 영역이 html()함수를 적용한 결과이고 

파란네모칸 영역이 text()함수 적용 결과데이터입니다.

순수하게 특정 태그내에 존재하는 태그가 문자열만 존재할경우에는

 html() 함수나 text() 함수 아무거나 사용해도 무관하지만

태그가 들어있는 경우라면 

상황에 따라서 각각의 함수들을 사용하시면 되겠습니다.

마지막으로 val() 함수를 이용하여 input 태그의 값을 가져오고 

value속성에 특정값을 set해보도록 하겠습니다.

body 태그내에 다음과 같이 코드를 재작성 해줍니다.

<input type="text" id="txt" value="텍스트값" />
<input type="password" id="pwd" value="패스워드값" />
<input type="checkbox" id="chk" value="체크박스값"/>

위처럼 다양한 종류의 input 태그들을 예를들기위해 작성하였습니다.

이제 각 태그들의 value값을 가져오도록 해보겠습니다.

$(function(){
	//get value
	var txtValue = $("#txt").val();
	var pwdValue = $("#pwd").val();
	var chkValue = $("#chk").val();
	alert(txtValue);
	alert(pwdValue);
	alert(chkValue);
});

input 태그의 value값을 각각의 변수에 담아서 alert을 이용하여 화면에 출력 시켜 보았습니다.

값을 얻어왔으면 이제 추가로 value값을 set 해보도록 하겠습니다.

기존 코드에서 input type="text"인 태그의 value를 변경해보도록 하겠습니다.

기존 스크립트 코드를 재정의 해주셔도 되고 기존코드 다음에 하단 코드를 추가해주셔도 무관합니다.

$("#txt").val("텍스트변경하기");

결과를 확인해보도록 하겠습니다.

 text태그내에 담겨있는 "텍스트값"이라는 value값이 

"텍스트변경하기" 라고 변경되는 것을 확인 할 수 있었습니다.

다음장은 태그들의 속성값에대한 확인 및 속성값 설정에 대하여 포스팅 하도록 하겠습니다.

by 개발로짜