반응형
*팝업창
- 쿠키로 구현 가능한 기능
- 웹 애플리케이션에서 회원가입 시 아이디 중복 체크나 간단한 공지사항을 띄워주는 용도로 자주 사용
→ 과거에는 별도 URL을 가지는 ‘팝업창’을 주로 사용하였으나, 불법 광고 홍보에 많이 악용되어.. 최근에는 레이어를 이용한 형태의 팝업 추로 사용 - 레이어 형태 팝업창의 동작 예시 (예시 이미지: ebsi 홈페이지)
→ 처음 방문 시 팝업 공지가 팝업창으로 뜨며, [닫기]를 누르면 사라짐
→ [오늘 하루 열지 않기]를 체크하지 않은 채로 [닫기]를 했다면 새로고침 시 다시 나타남, [오늘 하루 열지 않기]를 체크한 후 닫는다면 하루 동안은 새로고침해도 팝업 공지가 나타나지 않음
(ebsi 홈페이지의 경우, [1일 동안 열지 않기]를 누르면 바로 팝업창이 닫히고, 하루 동안은 새로고침해도 팝업 공지가 나타나지 않음)
*ebsi 홈페이지의 팝업창
(1) ebsi 홈페이지의 팝업창에서 [닫기] 클릭 후 → [F5]키로 홈페이지 새로고침
- 다시 팝업창이 뜸
(2) 홈페이지의 팝업창에서 [1일동안 열지 않기] 클릭 후 → [F5]키로 홈페이지 새로고침
- 다시 팝업창이 뜨지 않음
1. 쿠키 없이 기본 기능 구현하기
쿠키를 사용하지 않아, 체크 여부가 아무런 효과가 없는 페이지 (HTML5, CSS3, 자바스크립트, jQuery 코드로 최소한의 기능을 하는 팝업창 구현)
//PopupMain.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String popupMode = "on"; //1.레이어 팝업창 띄울 지 여부
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쿠키를 이용한 팝업 관리 ver 0.1</title>
//2. CSS로 레이어 팝업창 위치 지정
<style>
div#popup {
position: absolute; top:100px; left:50px; color:yellow;
width:270px; height:100px; background-color:gray;
}
div#popup>div {
position: relative; background-color:#ffffff; top:0px;
border:1px solid gray; padding:10px; color:black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
//3.<script> 태그 전체
<script>
$(function() {
$('#closeBtn').click(function() { //4.닫기 버튼(id="clodsBtn")을 누르면
$('#popup').hide(); //5.팝업창(id="popup")을 숨김 처리
});
});
</script>
</head>
<body>
<h2>팝업 메인 페이지(ver 0.1)</h2>
<%
for (int i = 1 ; i <= 10 ; i++) {
out.print("현재 팝업창은 " + popupMode + " 상태입니다.<br/>");
}
//6.popupMode 값이 "on"일 때만 팝업창 표시
if (popupMode.equals("on")) {
%>
<div id="popup"> //7.공지사항 팝업 화면
<h2 align="center">공지사항 팝업입니다.</h2>
<div align="right"><form name="popFrm">
<input type="checkbox" id="inactiveToday" value="1" /> //8.체크박스
하루 동안 열지 않음
<input type="button" value="닫기" id="closeBtn" /> //9.닫기 버튼
</form></div>
</div>
<%
}
%>
</body>
</html>- popupMode는 레이어 팝업창을 띄울지 알려주는 변수
- 팝업창의 위치와 색상 등의 형태를 지정하는 CSS
- jQuery를 이용하는 자바스크립트 코드
- id가 closeBtn인 요소를 클릭하면 실행됨
- 팝업창을 숨김 처리
- 1.의 변수 popupMode 값이 “on”이면 팝업창을 보여줌
- 공지사항 팝업창의 HTML 코드
- [하루 동안 열지 않음] 체크박스
- [닫기]버튼
2. 쿠키를 이용해 상태 정보 유지하기
1) 1.에서 구현한 팝업창에 쿠키 기능을 추가하여, 제대로 동작할 수 있도록 하기
//PopupMain.jsp에 코드 추가
...
String popupMode = "on";
//추가한 코드
//1.쿠키를 읽어 popubMode 값 설정
Cookie[] cookies = request.getCookies();
if (cookies != null) {
for (Cookie c : cookies) {
String cookieName = c.getName();
String cookieValue = c.getValue();
if (cookieName.equals("PopupClose")) { //2."PopupClose" 쿠키가 존재하면
popupMode = cookieValue; //3.popupMode의 값 갱신
}
}
}
%>
...
$(function() {
$('#closeBtn').click(function() { //4.닫기 버튼을 누르면 실행되는 함수
$('#popup').hide();
//추가한 코드2
var chkVal = $("input:checkbox[id=inactiveToday]:checked").val(); //5.체크 여부
//6.jQuery의 ajax() 함수로 비동기 요청
$.ajax({
url : './PopupCookie.jsp',
type : 'get',
data : {inactiveToday : chkVal},
dataType : "text",
success : function(resData) { //7.요청 성공 시 호출되는 함수
if (resData != '') location.reload();
}
});
});
});
...- 쿠키를 읽어 popubMode 값 설정
- 이름이 “PopupClose”인 쿠키가 존재하는지 여부 체크
- popupMode 변수의 값을 쿠키의 값으로 갱신 (PopupClose 쿠키 값을 “on”으로 설정했다면 팝업창이 더는 뜨지 않을 것)
- [닫기] 버튼 클릭 시 호출되는 함수(팝업창 숨김 처리)
- [하루 동안 열지 않음]을 체크했는지 확인
→ [하루 동안 열지 않음] 박스를 체크박스를 체크하면, chkVal 변수에 “1”이 저장되고, 체크하지 않으면 아무 값도 저장되지 않음
//PopupMain.jsp 코드 해석-id가 "inactiveToday"이면서 "체크된" 체크박스의 값을 읽어와서 chkVal 변수에 저장함
var chkVal = $("input:checkbox[id=inactiveToday]:checked").val();
6. 쿠키 설정 페이지인 PopupCookie.jsp 실행 (ajax( )가 비동기 HTTP 요청을 보내는 jQuery 함수)
//PopupMain.jsp 코드 해석
$.ajax({ //4)비동기로 요청을 보냄
url : './PopupCookie.jsp', //1)PopupCookie.jsp 파일에
type : 'get', //2)HTTP GET 방식으로
data : {inactiveToday : chkVal}, //3)inactiveToday =< chkVal 변수의 값> 데이터를
dataType : "text", //5)응답 데이터의 타입은 일반 텍스트이며
success : function(resData) { //6)요청 성공 시
if (resData != '') //7)응답 데이터가 있다면
location.reload(); //8)페이지를 새로고침함
}
});
7. 요청 성공 시 호출되는 함수
2) 보낸 요청을 받는 PopupCookie.jsp에서 “PopupClose” 쿠키를 적절하게 설정한 후 응답 객체에 추가해야 함
//PopupClose.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%
String chkVal = request.getParameter("inactiveToday"); //1."inactiveToday" 매개변수의 값 얻기
//2.(if문 전체)
if (chkVal != null && chkVal.equals("1")) { //3. 값이 "1"이면 쿠키를 생성해 응답 객체에 추가
Cookie cookie = new Cookie("PopupClose", "off"); // 쿠키 생성
cookie.setPath(request.getContextPath()); // 경로 설정
cookie.setMaxAge(60*60*24); // 유지 기간 설정
response.addCookie(cookie); // 응답 객체에 추가
out.println("쿠키 : 하루 동안 열지 않음");
}
%>
- 체크박스 폼값(”inactiveToday”의 매개변수의 값)을 받음
- 에서 출력하는 문자열은 PopupMain.jsp의 7.부분에서 콜백됨 (쿠키 생성 후 새로고침하면, popupMode에 “off”가 저장되므로 레이어 팝업창은 열리지 않음)
- 값이 “1”이면 이름이 “PopupClose”, 값이 “off”, 경로는 컨텍스트 루트, 유지 기간은 하루인 쿠키를 생성 후 응답 객체에 추가
- PopupMain.jsp 실행 결과 - [하루 동안 열지 않음] 체크 후 [닫기] 클릭 시, 상태가 바로 “off”로 바뀌며 새로고침 시에도 팝업창이 뜨지 않음을 알 수 있음
반응형
'자바(JAVA) > JSP 웹 프로그래밍 공부 (성낙현의 JSP 자바 웹 프로그래밍 참고)' 카테고리의 다른 글
| JAVA/JSP 13. 쿠키(Cookie) - 로그인 아이디 저장(로그인 페이지 작성하기, 로그인 및 아이디 저장 기능 구현하기, 동작 확인 (0) | 2023.06.20 |
|---|---|
| JAVA/JSP 12. 쿠키(Cookie) - 로그인 아이디 저장(편의 기능 구현하기: 자바스크립트 코드 추가, 쿠키 관리자) (0) | 2023.06.08 |
| JAVA/JSP 10. 쿠키(Cookie) - 정의, 기본 동작 확인 (0) | 2023.05.18 |
| JAVA/JSP 9. 내장 객체의 영역(Scope) - session 영역, application 영역 (2) | 2023.05.03 |
| JAVA/JSP 8. 내장 객체의 영역(Scope) - page 영역, request 영역 (0) | 2023.04.30 |