[본격 게시판짜기 Part3.2 Spring MVC] lightbox 적용하기

안녕하세요 cocy입니다! 오랜만에 뵙습니다.

무더운 여름이 지나가려니까 태풍이 온다는데 다들 무사히 별일 없기를 기원하며,

이제 개강시즌인데요, 다시 열심히 포스팅 시작 하겠습니다.

저번시간에는 ajax 맛보기를 살짝 해봤는데요,

이번 포스팅에서는 lightbox를 이용해 페이지 리다이렉팅 없이 글내용을 조회하는 페이지를 만들어 보도록 하겠습니다.

여기서 말하는 lightbox는 팝업대신 뒤의 배경을 투명하게 하거나 흑백으로 음영처리하는 레이어 팝업인데요,

Modal, Graybox, Thickbox 등 다양한 이름으로 불리는데 그림으로 보시면 이해가 빠르실겁니다.

그림 3-2-1. lightbox

출처 : http://www.1stwebdesigner.com/freebies/ajax-lightbox-modal-dialog-solutions/

보통 그림에서 보시는 것처럼 이미지를 보여줄때 많이 사용하기도 하고

지저분한 팝업 대용으로도 많이 사용됩니다.

lightbox는 css속성을 이용해 스스로 작성할 수 있지만,

쉽게 적용하기위해 jquery를 사용하도록 하겠습니다.

우선 lightbox를 적용한 코드를 보여드리고, 설명하도록 하겠습니다.

빨갛게 표시된 부분이 추가된 부분입니다.

이해를 위해 밑부분 부터 소스를 보시게되면

lightbox를 표시하기위한 div들을 body태그가 끝나는 하단부분에 추가해 주었고,

임시적으로 idx를 클릭했을때 lightbox를 활성화시키기위해 a태그를 걸고 onclick이벤트를 주었습니다.

그리고 스타일 태그 안에 해당 lightbox에 필요한 css들을 설정해주었으며,

스크립트 태그 안에는 lightbox에 필요한 요소들,

idx를 클릭시 lightbox를 활성화시키는 코드,

키보드 이벤트(esc키)나 배경을 클릭시 lightbox가 닫히는 이벤트 등을 추가하였습니다.

jquery는 이전에 추가해두었기때문에 그대로 사용합니다. 주의하실점은 스크립트 태그안의 내용이

jquery를 가져오는 구문 아래에 존재해야합니다.(순서대로 로드하기때문!)

결과를 보시면 다음과 같습니다.

그림 3-2-2. lightbox 적용화면

해당 글번호를 클릭하면 해당 글번호가 lightbox의 div내용 안에 표시되도록 설정하였습니다.

$('.mw_layer').addClass('open'); < lightbox를 표시하기위해 css로 미리 설정해둔 open클래스를 추가해줍니다.

$('#layer').html(idx); < lightbox의 내용에 idx를 표시해줍니다. html태그는 innerHTML 태그와 동일합니다.

그럼 이제 해당 글번호를 가지고 저번시간에 했던 ajax요청을 사용하여 글 내용을 가져오고, 표시하면 되겠네요!

$('#layer').html(idx); 이 코드 대신에 다음의 코드를 삽입합니다.

function openContent(idx){

$('.mw_layer').addClass('open');

$.ajax({

type:'post',

url:'content.do',

data: ({idx:idx}),

success:function(data){

$('#layer').html(data);

}

});

}

비동기 요청으로 content.do 를 요청하고,

파라미터로 idx를 넘겼습니다.

그리고 해당 요청이 성공시 lightbox에 결과 data를 html메서드를 통해 append 해 주었습니다.

결과는 어떻게 나올까요?

그림 3-2-2. 글보기 lightbox 적용화면

네 이것으로 lightbox의 적용이 끝났습니다.

코드 몇줄 추가했는데 간단하게 적용이 되었네요.

하지만 눈치가 빠르신분들은 지금의 코드수정으로 발생하는 문제점들을 몇가지 짐작되실겁니다.

우선

1. content.do를 직접 호출함으로서 count.do 요청하는 부분이 사라져 count기능이 정상 작동 하지 않습니다.

2. 게시글 조회페이지의 내용이 lightbox안에 출력되지만, 목록으로 버튼 클릭시 다시 페이지 전환이 생깁니다.

3. 게시글 삭제의 경우에도 마찬가지로 페이지 전환이 생깁니다.

1번의 경우 count기능을 정상 작동시키려면 lightbox가 표시될때 content.do로의 요청이 아니라 count.do를 요청해야하는데요

현재 로직상 count기능 후 location.href 구문을 통해 페이지 전환이 생기기때문에 이 부분을 수정해야합니다.

최소한의 수정으로 본래의 기능이 정상적으로 작동할 수 있도록 수정을 해 봅시다.

그럼 먼저 count.do를 호출했을때 카운트액션이 실행되고

content.do?idx=idx 형식의 url을 redirect2.jsp 페이지로 포워딩하는데요,

redirect2.jsp페이지에서 location.href구문을 없애고 이를 비동기 요청으로 고칩시다.

먼저 redirect2.jsp의 기존소스입니다.

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<script>location.href="${url}"; </script>

이 소스를 다음과같이 고쳐줍니다.

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<script>

$.ajax({

type:'post',

url:'${url}',

success:function(data){

$('#content').html(data);

}

});

</script>

<div id="content">

</div>

이렇게 되면 count.do 즉, CountAction.java의 수정없이

redirect2.jsp페이지는 해당 url에서 비동기요청으로 content.do 요청을 실행하게되고,

결과값을 div에 받아와 이를 요청한 count.do의 비동기요청 결과값으로 전달되게 됩니다.

그럼 마지막으로 list.jsp페이지로 돌아가서 content.do를 비동기 요청하는 부분에 url을 count.do로 고쳐줍니다.

$.ajax({

type:'post',

url:'count.do', // content.do -> count.do

data: ({idx:idx}),

success:function(data){

$('#layer').html(data);

}

});

실행해 보시면 그림 3-2-2 와같은 결과가 출력되는것을 확인 하실 수 있습니다.

그럼 이제 두번째로 content.jsp페이지로 가서

'목록으로' 버튼을 lightbox가 해제되도록 고쳐봅시다.

그전에 먼저 list.jsp페이지에 lightbox를 해제시키는 함수 closeContent() 를 추가합시다.

위치는 openContent(idx)함수의 밑이 적절하겠네요

function closeContent(){$('.mw_layer').removeClass('open');}

content.jsp페이지에서는 목록으로가는 a태그의 href속성을 #으로 주고 지금만든 함수를 onclick이벤트에 등록해줍니다.

<a href="#" onclick="closeContent()">목록으로</a>

마지막으로 삭제요청을 비동기로 처리하기위해 잠시 생각해보겠습니다.

삭제요청 자체를 비동기요청으로 전환하는것은 지금까지 한것처럼 해주면 어렵진않지만

삭제가 비동기요청으로 이루어지면 삭제가 완료된후,

리스트에서 해당 데이터로우를 찾아 제거해주고, lightbox를 닫아주어야합니다.

이때 기능 구현의 타협점을 적절히 생각해 보아야합니다.

모든 것을 비동기요청으로 하는것이 과연 적합한것인지,

구현하는데에 드는 시간과 비용이 과연 효율적인지,

구현을 해야만하는지, 굳이 안해도 되는지..

잘 생각해 보시고 한번 구현해 보시기바랍니다.

수고하셨습니다.

다음글 : 드디어 스프링!! > http://cusmaker.tistory.com/129

저작자표시

'Lecture > JSP & Java' 카테고리의 다른 글

[본격 웹보안 Part 1.2] SQL Injection이란 ? (0)	2012.09.19
[본격 웹보안 Part 1.1] 웹 해킹도 로그인부터 (0)	2012.09.19
[본격 게시판짜기 Part3.1 Spring MVC] Ajax란? (20)	2012.07.31
[본격 게시판짜기 Part2.10 Model2 MVC패턴] 파일다운로드/삭제 기능추가 (17)	2012.07.28
[본격 게시판짜기 Part2.9 Model2 MVC패턴] 파일업로드 기능추가 (13)	2012.07.28

Custom + Maker

[본격 게시판짜기 Part3.2 Spring MVC] lightbox 적용하기

'Lecture > JSP & Java' 카테고리의 다른 글

티스토리툴바

[본격 게시판짜기 Part3.2 Spring MVC] lightbox 적용하기

'Lecture > JSP & Java' 카테고리의 다른 글

관련글

티스토리툴바