JSP 강의 Day11

주세환·2023년 4월 14일
Javajqueryjsp자바스크립트
0

JSP

목록 보기
12/16
post-thumbnail

쇼핑몰

홈 화면

틀 만들기

@Select({
	" SELECT i.* FROM item i ORDER BY no DESC "
})
public List<Item> selectItemListAll();

Mapper를 생성하고

@WebServlet(urlPatterns = {"/customer/home.do"})
public class CustomerHomeController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List<Item> list = MybatisContext.getSqlSession().getMapper(ItemMapper.class).selectItemListAll();
		
		request.setAttribute("list", list);
		request.getRequestDispatcher("/WEB-INF/customer/customer_home.jsp").forward(request, response);
	}

CustomerHomeController.java를 위처럼 수정한다.

 <style>
  
  .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr; 
      column-gap: 10px;
      row-gap: 10px;
  }

  .item {
  	padding: 10px;
      border: 1px solid #cccccc;
      min-height: 300px; 
  }
  
  a {
text-decoration: none;
color: #111111;
  }

  a:hover  .item {
color   : red;
border  : 1px solid red;
  }
  </style>

customer_home.jsp의 header의 style을 이렇게,

<body>
	<div class="container">
		<h3>고객용 홈화면</h3>
		
		<a href="home.do" class="btn btn-sm btn-primary">홈으로</a>
		<a href="${pageContext.request.contextPath}/board/select.do" class="btn btn-sm btn-primary">자유게시판</a>
		<c:if test="${sessionScope.id eq null}">
			<a href="login.do" class="btn btn-sm btn-primary">로그인</a>
			<a href="join.do" class="btn btn-sm btn-primary">회원가입</a>
		</c:if>
		
		<c:if test="${sessionScope.id ne null}">
			<label>${sessionScope.name}님 로그인</label>		
			<a href="mypage.do" class="btn btn-sm btn-primary">마이페이지</a>
			<a href="#" class="btn btn-sm btn-primary" onclick="logoutAction()">로그아웃</a>
		</c:if>
		
		<hr />
		
		<div class="grid">
			<c:forEach var="obj" items="${list}">
			<a href="#">
				<div class="item">
					<img src="${pageContext.request.contextPath}/item/image?no=1003"
						style="width:100px; height:100px" />
					물품명 : ${obj.name}<br />
					가격 : ${obj.price}<br />
					내용 : ${obj.content}<br />
				</div>
			</a>
			</c:forEach>
		</div>

	</div>

	<script>
		function logoutAction() {
			var form = document.createElement("form");
			form.setAttribute("action", "logout.do");
			form.setAttribute("method", "post");
			form.style.display="none";
			document.body.appendChild(form);
			form.submit();
		}
	</script>
</body>

body를 이렇게 넣어보자.

이렇게 grid로 생성되고

마우스를 가져다대면 테두리, 글자가 빨간색으로 변한다.

이미지 추가하기

public class Item {
	
	private long no;
	private String name;
	private String content; //clob
	private long price;
	private long quantity;
	private Date regdate ;
	
	private long imageNo; // 대표이미지 번호를 저장할 임시변수
}

dto의 item에 imageNo를 추가한다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List<Item> list = MybatisContext.getSqlSession().getMapper(ItemMapper.class).selectItemListAll();
		
		for( Item obj : list ) {
			// mapper를 호출하여 해당 물품의 가장 먼저 등록했던 이미지 번호 1개를 가져옴.
			long imageNo = obj.getNo();
			obj.setImageNo(imageNo);
		}
		
		request.setAttribute("list", list);
		request.getRequestDispatcher("/WEB-INF/customer/customer_home.jsp").forward(request, response);
	}

CustomerHomeController의 doGet을 위처럼 수정한다.

가장 먼저 등록한 이미지 번호 1개를 가져올 것이니

// 물품번호를 받아서 해당하는 이미지 1개 반환 없으면 0 반환
@Select({
	" SELECT NVL(min(no),0) FROM itemimage WHERE itemno = #{itemno}"
})
public long selectItemImageOne(@Param("itemno") long itemno);

이미지 번호의 숫자가 가장 적은 것을 가져오는 mapper를 생성한다.

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List<Item> list = MybatisContext.getSqlSession().getMapper(ItemMapper.class).selectItemListAll();
		
		for( Item obj : list ) {
			// mapper를 호출하여 해당 물품의 가장 먼저 등록했던 이미지 번호 1개를 가져옴.
			long imageNo = MybatisContext.getSqlSession().getMapper(ItemMapper.class).selectItemImageOne(obj.getNo());
			obj.setImageNo(imageNo);
		}
		
		request.setAttribute("list", list);
		request.getRequestDispatcher("/WEB-INF/customer/customer_home.jsp").forward(request, response);
	}

CustomerHomeController.java를 다시 수정하고

<div class="grid">
	<c:forEach var="obj" items="${list}">
	<a href="#">
		<div class="item">
			<c:if test="${obj.imageNo !=0 }">
				<img src="${pageContext.request.contextPath}/item/image?no=${obj.imageNo}"
					style="width:100%; height:150px" />
			</c:if>
			<c:if test="${obj.imageNo ==0 }">
				<img src="${pageContext.request.contextPath}/resources/images/default.png"
					style="width:100%; height:150px" />
			</c:if>
			물품명 : ${obj.name}<br />
			가격 : ${obj.price}<br />
			내용 : ${obj.content}<br />
		</div>
	</a>
	</c:forEach>
</div>

customer_home.jsp의 img주소를 위처럼 변경한다.

이미지주소가 0이 아니면 이미지를 불러오고, 0이면 default.png를 불러온다.

왜인지 모르겠지만 등록한 이미지들이 날아가고 화난 페페 하나만 남았다.

그래도 화난 페페 게시글의 이미지는 정상적으로 불러온다.

그래서 페페 사진들을 추가했다.

울고불고 난리났다.

주소 연결

<div class="grid">
	<c:forEach var="obj" items="${list}">
	<a href="product.do?itemno=${obj.no}">
		<div class="item">
			<c:if test="${obj.imageNo !=0 }">
				<img src="${pageContext.request.contextPath}/item/image?no=${obj.imageNo}"
					style="width:100%; height:150px" />
			</c:if>
			<c:if test="${obj.imageNo ==0 }">
				<img src="${pageContext.request.contextPath}/resources/images/default.png"
					style="width:100%; height:150px" />
			</c:if>
			
			물품명 : ${obj.name}<br />
			가격 : ${obj.price}<br />
			내용 : ${obj.content}<br />
		</div>
	</a>
	</c:forEach>
</div>

customer_home.jsp의 a href 주소를 product.do~~로 변경하였다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<h3>고객용 홈화면</h3>
		
<a href="home.do" class="btn btn-sm btn-primary">홈으로</a>
<a href="${pageContext.request.contextPath}/board/select.do" class="btn btn-sm btn-primary">자유게시판</a>
<c:if test="${sessionScope.id eq null}">
	<a href="login.do" class="btn btn-sm btn-primary">로그인</a>
	<a href="join.do" class="btn btn-sm btn-primary">회원가입</a>
</c:if>
<hr />
</html>

너무 길어서 customer_header.jsp를 만들었다.

<body>
	<div class="container">
		<jsp:include page="customer_header.jsp"></jsp:include>
		
		<c:if test="${not empty imageNo}">
			<c:forEach var="no" items="${imageNo}">
			<img src="${pageContext.request.contextPath}/item/image?no=${no}" 
					style="width:200px; height:150px" />
			</c:forEach>
		</c:if>
		
		<c:if test="${empty imageNo}">
			<img src="${pageContext.request.contextPath}/resources/images/default.png"
				style="width:200px; height:150px" />
		</c:if>
		
		<p>${obj.no}</p>
		<p>${obj.name}</p>
		<p>${obj.content}</p>
		<p>${obj.price}</p>
		<select>
			<c:forEach var="idx" begin="1" end="1000" step="1">
				<option>${idx }</option>
			</c:forEach>
		</select>
		<input type="button" class="btn btn-sm btn-primary" value="주문하기" />		
	</div>

	<script>

	</script>
</body>

customer_product.jsp를 생성하여 customer_header.jsp를 연동시키고 위처럼 작성하였다.

@WebServlet(urlPatterns = {"/customer/product.do"})
public class CustomerProductController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String itemno = request.getParameter("itemno");
		if(itemno == null) {
			response.sendRedirect("home.do");
			return;
		}
		// itemmapper에서 물품정보 받기
		Item obj = MybatisContext.getSqlSession().getMapper(ItemMapper.class).selectItemOne(Long.parseLong(itemno));
		request.setAttribute("obj", obj);
		
		// itemimage에서 물품이미지 번호 받기(전체)
		List<Long> imageNo = MybatisContext.getSqlSession().getMapper(ItemImageMapper.class).selectItemImageNo(Long.parseLong(itemno));
		request.setAttribute("imageNo", imageNo);
		
		request.getRequestDispatcher("/WEB-INF/customer/customer_product.jsp").forward(request, response);
	}
}

CustomerProductController.java를 생성하여 위처럼 작성하였다.

여기서 작성된 mapper는

@Select({
	" Select i.* FROM item i WHERE no=#{no} "
})
public Item selectItemOne(@Param("no") long no);

@Select({
	" SELECT i.NO FROM itemimage i WHERE ITEMNO = #{itemno} ORDER BY no DESC "
})
public List<Long> selectItemImageNo (@Param("itemno") long itemno);

각각 ItemMapper, ItemImageMapper에 있다.

우는 페페를 누르면

우는페페에 등록된 이미지들과 순서대로 아이템번호, 이름, 내용, 가격이 순서대로 나오고, 구매수량을 정할 수 있다.

주문하기

시퀀스 생성

h2에서 시퀀스를 생성한다.

테이블 생성

h2에서 테이블을 생성한다.

기능 작성

<p>${obj.no}</p>
<p>${obj.name}</p>
<p>${obj.content}</p>
<p>${obj.price}</p>
<form id="form" action="purchase.do" method="post">
	<input type="hidden" name="itemno" value="${obj.no}" />
	<select name="cnt">
		<c:forEach var="idx" begin="1" end="1000" step="1">
			<option value="${idx}">${idx }</option>
		</c:forEach>
	</select>
	<input type="submit" class="btn btn-sm btn-primary" value="주문하기" />		
</form>

customer_product.jsp를 위처럼 수정한다.

@WebServlet(urlPatterns = {"/customer/purchase.do"})
public class CustomerPurchaseController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.getRequestDispatcher("/WEB-INF/customer/customer_purchase.jsp").forward(request, response);
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		// DB에 추가하기
		
		response.sendRedirect("purchase.do");
		
	}
}

CustomerProductController.java를 생성하고 작성한다.

customer_product.jsp를 복사하여 customer_purchase.jsp를 생성한다.

@WebFilter(urlPatterns = {"/customer/mypage.do", "/customer/orderlist.do", "/customer/purchase.do"})
public class CustomerFilter implements Filter{

로그인된 정보를 가져와야하니 filter에 customer/purchase.do를 추가한다.

로그인하지 않았을 때

로그인하지 않은 상태에서 주문하기를 누르면 로그인 창으로 이동한다.

로그인을 하니 home.do로 이동한다.

if(sessionId == null) { // 세션 객체 없으면 로그인 페이지로..
	httpSession.setAttribute("url", request.getRequestURI());
	response.sendRedirect("login.do");
	return; // 메소드를 종료시킴
}

filter를 이렇게 수정하고

if(ret != null) {
	
	// 세션에 기록하기. 기본시간 30분
	HttpSession httpSession = request.getSession();
	httpSession.setAttribute("id", ret.getId());
	httpSession.setAttribute("role", ret.getRole());
	httpSession.setAttribute("name", ret.getName());
	
	String url = (String) httpSession.getAttribute("url");
	if(url == null) {
		response.sendRedirect("home.do");
	}
	else { // 마지막 페이지로 이동
		response.sendRedirect(url);
		httpSession.setAttribute(url, null);
	}
	return;
}

CustomerLoginController에 위처럼 추가한다.

로그인이 되지 않은 상태에서 주문하기를 누르면

로그인창으로 이동하게 된다. 여기서 로그인을 하면

home.do가 아닌 마지막에 접속명령이 들어간 곳으로 이동하게 된다.

구매

item, member, purchase로 뷰를 하나 만든다.

// 주문하기
@Insert({
	" INSERT INTO purchase(cnt, itemno, customerid) ",
	" VALUES( #{obj.cnt}, #{obj.itemno}, #{obj.customerid} ) "
})
public int insertPurahcaseOne(@Param("obj") Purchase obj);

Mapper를 생성한 후

@WebServlet(urlPatterns = {"/customer/purchase.do"})
public class CustomerPurchaseController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.getRequestDispatcher("/WEB-INF/customer/customer_purchase.jsp").forward(request, response);
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		// DB에 추가하기
		Long itemno = Long.parseLong(request.getParameter("itemno"));
		Long cnt = Long.parseLong(request.getParameter("cnt"));
		
		String customerid = (String) request.getSession().getAttribute("id");
		
		Purchase obj = new Purchase();
		obj.setItemno(itemno);
		obj.setCnt(cnt);
		obj.setCustomerid(customerid);
		
		int ret = MybatisContext.getSqlSession().getMapper(PurchaseMapper.class).insertPurahcaseOne(obj);
		
		if(ret == 0) {
			request.setAttribute("url", "product.do?itemno="+ itemno );
		}
		
		response.sendRedirect("purchase.do");
		
	}
}

CustomerPurchaseController.java를 수정한다.

구매하기 위해 로그인을 한다.

품목을 선택하여 들어와서 수량을 선택한 후 주문하기를 누른다.

고객2, 페페, 8개를 구매하였다고 뜬다.

필터

//home(o) -> login(x), logout(x) -> home(o)
//board(o) -> login(x) -> board(o)
//로그인에서 이전페이지 이동을 위한 필터
@WebFilter(urlPatterns = {
		"/customer/*" 
})
public class UrlFilter implements Filter{
	@Override
	public void doFilter(ServletRequest arg0, ServletResponse arg1, FilterChain arg2)
			throws IOException, ServletException {
		HttpServletRequest request = (HttpServletRequest) arg0;
		HttpSession httpSession = request.getSession();
		String uri = request.getRequestURI();

		if( !uri.contains("login.do") && !uri.contains("logout.do") ) {
			// home.do              => null   => queryString이 null임
			// product.do?itemno=33 => itemno=33 => queryString이 itemno=33임 ?는 없음.
			String queryString = request.getQueryString();

			if(queryString == null) {
				httpSession.setAttribute("url", request.getRequestURI());
				System.out.println("url filter => " + request.getRequestURI());
			}
			else {
				httpSession.setAttribute("url", request.getRequestURI()+"?"+ queryString);
				System.out.println("url filter => " + request.getRequestURI()+"?"+ queryString);
			}
		}
		
		arg2.doFilter(arg0, arg1);
	}
}

UrlFilter.java이다. 로그인, 로그아웃을 제외한 다른 주소끼리 이전페이지 이동을 위해 작성하였다.

profile
주세환
이전 포스트

JSP 강의 Day10

다음 포스트

JSP 강의 Day12

0개의 댓글