[JSP][도서쇼핑몰 프로젝트]#3.상품상세 페이지 만들기

728x90

안녕하세요! 오늘은 도서상품목록에서 상품을 클릭했을 때 상세페이지를 보여주도록 만들려고 합니다. 기존 목록페이지에서 상세페이지로 넘어가는 버튼을 만들어주고 상품아이디에 맞는 페이지를 출력해주고자 합니다. 순서는 다음과 같고 마지막에 출력결과를 확인할 수 있습니다.

📋 순서

1. 상품상세정보를 가져오는 메소드

2. 상세페이지 버튼 만들기

3. 상품 상세 정보페이지 만들기

4. 실행결과

#01. 상품 상세 정보를 가져오는 메소드 만들기

ProductRepository클래스 안에 BookId를 찾고 가져오는 코드를 작성합니다.

객체 변수 listOfProducts에 저장된 모든 상품목록에서 북아이디와 일치하는 상품을 가져오는 getProductById()메소드를 작성하여 줍니다. 이때, for문을 이용하여 저장된 상품들을 하나씩 가져오고 if문을 이용하여 조건에 맞는 값을 불러옵니다.

#02. 상품 상세 정보를 가져오는 메소드 만들기

products.jsp에 상품아이디에 대한 상세페이지가 연결되도록 상세정보 버튼을 작성하여 줍니다.

#03. 상품 상세 정보페이지 만들기

먼저, 18행에서 상품목록페이지로 부터 전달되는 상품아이디를 전송받을 수 있도록 request내장 객체의 getParameter() 메서드를 작성해 줍니다. 그리고 19행에서 useBean액션태그에 id 속성값을 통해 ProductRepository클래스의 getProductById()메소드를 호출하여 반환된 결과값을 Product객체 타입의 변수 product에 저장할 수 있도록 합니다.

Product객체타입의 변수 product에 저장된 도서명, 도서정보, 가격 등을 출력하도록 다음과 같이 작성하여 줍니다.

▶ products.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import = "dto.Product" %>
<jsp:useBean id="productDAO" class="dao.ProductRepository" scope="session"/>
<html>
<head>
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>상품상세페이지</title>
</head>
<body>
	<jsp:include page="menu.jsp"/>
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3">상품 정보</h1>
		</div>
	</div>
	<%
		String id = request.getParameter("id");
		Product product = productDAO.getProductById(id);
	%>
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<h3><%=product.getBookName() %></h3>
				<p><%=product.getDescription() %></p>
				<p><b>상품코드: </b><span class="badge badge-danger">
				<%=product.getBookID() %></span>
				<p><b>저자</b> : <%=product.getAuthor() %>
				<p><b>출판사</b> : <%=product.getPublisher() %>
				<p><b>분류</b> : <%=product.getCategory() %>
				<p><b>재고 수</b> : <%=product.getUnitsInStock() %>
				<h4><%=product.getUnitPrice() %>원</h4>
				<p><a href="#" class="btn btn-info">상품주문&raquo;</a>
				<a href="products.jsp" class="btn btn-secondary">상품목록&raquo;</a>
			</div>
		</div>
		<hr>
	</div>
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>

#04. 결과

그럼 다음과 같이 상세페이지가 나오는 것을 확인할 수 있습니다.

저작자표시 비영리 변경금지

'📒 개발기록 > JSP 프로젝트' 카테고리의 다른 글

[JSP][도서쇼핑몰 프로젝트]#6.상품등록데이터 유효성 검사&다국어 처리하기 (1)	2023.01.27
[JSP][도서쇼핑몰 프로젝트]#5.상품이미지 등록하기 (3)	2023.01.22
[JSP][도서쇼핑몰 프로젝트]#4.상품등록페이지 만들기 (0)	2023.01.12
[JSP][도서쇼핑몰 프로젝트]#2.상품목록 만들기 (2)	2022.12.01
[JSP][도서쇼핑몰 프로젝트]#1.시작페이지 (0)	2022.11.21