Semi-[Pictures.] 04. ReserveOne

[ 세미프로젝트(http://iclasskh.iptime.org:9090/pictures/) 과정 ]

01. 메뉴바 Menubar

02. 메인화면 Main

03. 영화관 상세페이지 Theater

04. 예매단계1 ReserveOne

05. 예매단계2 ReserveTwo

06. 예매단계3 ReserveThree

07. 예매단계4 ReserveFour

08. 예매단계5 ReserveFive & Six

09. 마이페이지-예매/관람확인 MyPage-MiniView

10. 마이페이지/관리자페이지-예매상세확인 MyPage-Reserved/Admin-Reserved

 

1. 예매1단계 ReserveOne 화면

2. 주요기능

-1) Servlet 단계

1. 로그인되지 않은 사용자는 로그인폼으로 이동(필터)

	package com.kh.common.filter;
	import java.io.IOException;
	import javax.servlet.Filter;
	import javax.servlet.FilterChain;
	import javax.servlet.FilterConfig;
	import javax.servlet.ServletException;
	import javax.servlet.ServletRequest;
	import javax.servlet.ServletResponse;
	import javax.servlet.annotation.WebFilter;
	import javax.servlet.http.HttpServletRequest;
	import javax.servlet.http.HttpServletResponse;
	import javax.servlet.http.HttpSession;
	@WebFilter(filterName="loginFilter", urlPatterns={"/reservedOne.do","/reservedTwo.do",
	"/reservedThree.do","/reservedFour.do","/reservedFive.do","/reservedSix.do",""
	+ "/reserveDetail.do","/mypage.me"})
	public class LoginFilter implements Filter {
	@Override
	public void destroy() {
	}
	@Override
	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
	throws IOException, ServletException {
	HttpServletRequest request = (HttpServletRequest) servletRequest;
	HttpServletResponse response = (HttpServletResponse) servletResponse;
	HttpSession session = request.getSession();
	if (session.getAttribute("loginUser") == null) {
	response.sendRedirect(request.getContextPath()+"/loginForm.me");
	return;
	}
	filterChain.doFilter(request, servletResponse);
	}
	@Override
	public void init(FilterConfig arg0) throws ServletException {
	}
	}

view raw LoginFilter.java hosted with ❤ by GitHub

2. 영화관을 통하지 않고 들어왔을 경우 sectionNo 기본값으로 '1' 지정

 

-2) View 단계

1. 지역 선택 시, 영화관 리스트 뜨도록

	<script type="text/javascript">
	$(document).ready(function(){
	var depth1 = $('.depth1');
	depth1.find('>a').on('click', function(){
	depth1.removeClass('active');
	$(this).parent().addClass('active');
	});
	});
	</script>
	<div id="choose_theater" class="threediv">
	<div class="title">영화관선택</div>
	<div class="inner_theater">
	<ul>
	<c:forEach items="${sectionList}" var="s" varStatus="vs">
	<c:set var="isActive" value="${param.sectionNo eq s.sectionNo or empty param.sectionNo and vs.first}"/>
	<li class="depth1 <c:if test="${isActive}">active</c:if>">
	<a href="#changeLocation" onClick="changeLocation('${s.sectionNo}');">${s.name}<em>()</em></a>
	<div class="depth2">
	<ul>
	<c:if test="${isActive}">
	<c:forEach items="${theaterList}" var="t">
	<li class="">
	<a href="#selectTheater" onclick="selectTheater('${t.theaterNo}');">${t.name}</a>
	</li>
	</c:forEach>
	</c:if>
	</ul>
	</div>
	</li>
	</c:forEach>
	</ul>
	</div>
	</div>

view raw reserveOne.jsp hosted with ❤ by GitHub

2. 지역/영화관 선택까지 완료하면 다음 페이즈로 넘어가기

	<form id="form" action="${contextPath}/reservedTwo.do" role="form" method="post">
	<input type="hidden" name="sectionNo" value="<c:out value="${param.sectionNo}" default="1"/>"/>
	<input type="hidden" name="theaterNo" value=""/>
	</form>
	<script>
	function changeLocation(sectionNo) {
	if (!sectionNo) {
	return alert('지역을 선택해 주세요');
	}
	var form = document.getElementById('form');
	form.sectionNo.value = sectionNo;
	form.action = '${contextPath}/reservedOne.do';
	form.method = 'post';
	form.submit();
	}
	function selectTheater(theaterNo) {
	var form = document.getElementById('form');
	if (!form.sectionNo.value) {
	return alert('지역을 선택해 주세요');
	}
	if (!theaterNo){
	return alert('영화관을 선택해 주세요');
	}
	form.theaterNo.value = theaterNo;
	form.action = '${contextPath}/reservedTwo.do';
	form.method = 'post';
	form.submit();
	}
	</script>

view raw reserveOne.jsp hosted with ❤ by GitHub