[JSP] 구현 2 - 상세보기

JAVA/JSP

[JSP] 구현 2 - 상세보기

아잠만_ 2024. 7. 2. 16:06

구현< 첫번째 구현 게시물

ProductRepository.java

상세보기를 위한 DAO에 메서드 추가

package kr.or.ddit.dao;

import java.util.ArrayList;
import java.util.List;

import kr.or.ddit.vo.ProductVO;

public class ProductRepository {
	// 싱글톤 객체
	private static ProductRepository dao;
	
	public static ProductRepository getInstance() {
		if(dao==null) dao = new ProductRepository();
		return dao;
	}
	
	private List<ProductVO> listOfProducts = new ArrayList<ProductVO>();
	
	// 기본 생성자 3개의 상품 정보를 설정
	private ProductRepository() {
		ProductVO phone = new ProductVO("P1234", "iPhone 15s", 1250000);
		phone.setDescription("iPhone 15 · A16 Bionic 칩 5코어 GPU 탑재 · 첨단 듀얼 카메라 시스템. 48MP 메인 카메라 2배 망원 지원 울트라 와이드 카메라 · 최대 26시간 동영상 재생 ");
		phone.setCategory("Smart Phone");
		phone.setManufacturer("Apple");
		phone.setUnitsInStock(1000);
		phone.setCondition("New");
		
		ProductVO notebook = new ProductVO("P1235", "LG Gram", 2000000);
		notebook.setDescription("최대 22시간의 배터리 성능이 선사하는 궁극의 프로급 휴대성");
		notebook.setCategory("NoteBook");
		notebook.setManufacturer("LG");
		notebook.setUnitsInStock(1000);
		notebook.setCondition("Old");
		
		ProductVO tablet = new ProductVO("P1236", "갤럭시 탭 S9 Ultra", 1700000);
		tablet.setDescription("디스플레이 369.9 mm 다이나믹 아몰레드 2X · 내구성 IP68 · 프로세서 스냅드래곤8 2세대");
		tablet.setCategory("Tablet");
		tablet.setManufacturer("Samsung");
		tablet.setUnitsInStock(1000);
		tablet.setCondition("Refurbished");
		
		listOfProducts.add(phone);
		listOfProducts.add(notebook);
		listOfProducts.add(tablet);
	}
	
	// ProductVO 객체 타입의 변수 listOfProducts에 저장된 모든 상품 목록을 가져옴
	public List<ProductVO> getAllProducts(){
		return listOfProducts;
	}
	
	// 상품 상세 보기
	// listOfProducts 변수에 저장된 3개 (이상)의 상품 목록 중
	// 선택한 상품의 아이디와 일치하는 상품 정보를 가져옴
	public ProductVO getProductById(String productId) {
		for(ProductVO vo : listOfProducts) {
			String id = vo.getProductId();
			if(id.equals(productId)) {
				return vo;
			}
		}
		return null;
	};
}

products.jsp 수정

상품 div에 click이벤트를 추가 해당 상품을 클릭한다면 productId를 product.jsp에 전달

<%@page import="kr.or.ddit.vo.ProductVO"%>
<%@page import="java.util.List"%>
<%@page import="kr.or.ddit.dao.ProductRepository"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<title>상품 목록</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery-3.6.0.js"></script>
<script>
$(function(){
	$(document).on('click','.col-md-4',function(){
		let id = $(this).attr("name");
		location.href="/product.jsp?pid="+id;
	})
})
</script>
</head>
<body>
	<!-- header -->
	<!-- 
	디렉티브 태그 	속성 	    속성의 값		 -->
	<%@ include file="menu.jsp" %>
	<% // 스크립틀릿
	// 클래스			    객체 	 클래스			     메서드(호출)
	ProductRepository dao = ProductRepository.getInstance();
	// 객체타입		변수		객체	메서드(호출)
	List<ProductVO> list = dao.getAllProducts();
	%>
	<!-- 상품 목록 시작 -->
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3">Product List</h1>
		</div>
	</div>
	<div class="container">
		<div class="row" align="center">
		<c:set var="list" value="<%=list %>"/>
		<!-- 상품 반복 부분 시작 -->
		
		<!-- 객체 타입 변수 list에 저장된 상품 목록 개수만큼 실행하는 JSTL 반복문 -->
		<c:forEach var="vo" items="${list}">
			<div class="col-md-4" name="${vo.productId}">
				<!-- EL 표현문 -->
				<h3>${vo.pname}</h3>
				<p>${vo.description}</p>
				<p><fmt:formatNumber value="${vo.unitPrice}" type="number" pattern="#,###" />원</p>
				<p>
					<a href="product.jsp?pid=${vo.productId}" class="btn btn-secondary" role="button">상세정보 &raquo;</a>
				</p>
			</div>
		</c:forEach>		
		<!-- 상품 반복 부분 끝 -->
		</div>
	</div>
	<!-- 상품 목록 끝 -->
	
	<!-- footer -->
	<%@ include file="footer.jsp" %>	
</body>
</html>

product.jsp (상세 페이지)

<%@page import="kr.or.ddit.vo.ProductVO"%>
<%@page import="java.util.List"%>
<%@page import="kr.or.ddit.dao.ProductRepository"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<title>상품 목록</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
	<!-- header -->
	<!-- 
	디렉티브 태그 	속성 	    속성의 값		 -->
	<%@ include file="menu.jsp" %>
	<!-- 상품 목록 시작 -->
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3">상품 상세</h1>
		</div>
	</div>
	<div class="container">
		<%
			String pid = request.getParameter("pid");
			ProductRepository dao = ProductRepository.getInstance();
			ProductVO vo = dao.getProductById(pid);
		%>
		<c:set var="vo" value="<%=vo %>"/>
		<div class="row">
			<div class="col-md-6"> <!-- style = " width : 50%; "-->
				<span class="badge badge-danger">${vo.condition}</span>
				<h3>
				${vo.pname}</h3>
				<p>${vo.description}</p>
				<p>
					<b>상품 코드 : </b>
					${vo.productId}
				</p>
				<p>
					<b>제조사 : </b>
					${vo.manufacturer}
				</p>
				<p>
					<b>분류 : </b>
					${vo.category}
				</p>
				<p>
					<b>재고 수 : </b>
					${vo.unitsInStock}
				</p>
				<h4>
					<fmt:formatNumber value="${vo.unitPrice}" type="number" pattern="#,###" />원
				</h4>
				<p>
					<a href="/products.jsp" class="btn btn-secondary" role="button">상품 목록 &raquo;</a>
				</p>
			</div>
		</div>
	</div>
	<!-- 상품 목록 끝 -->
	
	<!-- footer -->
	<%@ include file="footer.jsp" %>	
</body>
</html>