상품 상세
상품 상세
상품 상세의 전반적인 흐름은 아래와 같습니다.
list.jsp 페이지에서 http://localhost/detail/상품코드 형식으로 만들어진 하이퍼링크를 클릭합니다.
상품코드가 Controller, dao, mapper에 순차적으로 전달됩니다. sql 명령어를 실행하여 상품코드에 해당하는 1개의 레코드를 Controller에 되돌려줍니다.
Controller는 그 자료를 저장하여 detail.jsp 페이지에 보내 출력시킵니다.
1. list.jsp
빨간색 부분을 추가합니다. 상품정보에 하이퍼링크를 거는 코드입니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
[생략]
<body>
<h2>상품목록</h2>
[생략]
<c:forEach var="row" items="${list}" varStatus="vs">
<td style="width:20%; word-break: break-word; vertical-align: bottom;">
<c:choose>
<c:when test="${row.filename != '-' }">
<img src="/resources/images/${row.filename}" width="100px" height="100px"><br>
</c:when>
<c:otherwise>
[상품 이미지 미등록]<br>
</c:otherwise>
</c:choose>
<a href="/detail/${row.product_code}">
상품명: ${row.product_name}<br>
가격: <fmt:formatNumber value="${row.price}" pattern="#,###" />원</a>
</td>
<c:if test="${vs.count mod 5 == 0}">
</tr><tr>
</c:if>
</c:forEach>
[생략]
</body>
</html>
[해설]
<a href="/detail/${row.product_code}">
상품명: ${row.product_name}<br>
가격: <fmt:formatNumber value="${row.price}" pattern="#,###" />원</a>
상품정보를 클릭하면 상세페이지로 이동하기 위하여 하이퍼링크를 걸었습니다.
하이퍼링크 태그의 형식은 아래와 같습니다.
<a href=“이동할주소”>텍스트</a>
href에 /detail/${row.product_code} 라고 했습니다.
상품코드가 1번이라면 http://localhost/detail/1 로 url이 구성됩니다.
2. ProductDAO.java
detail() method를 작성합니다.
package com.example.product;
@Repository
public class ProductDAO {
[생략]
public void insert(Map<String, Object> map) {
sqlSession.insert("product.insert", map);
}
public Map<String, Object> detail(String product_code) {
return sqlSession.selectOne("product.detail", product_code);
}
}
[해설]
public Map<String, Object> detail(String product_code)
Controller에서 전달한 상품코드가 String product_code 변수에 저장됩니다.
return sqlSession.selectOne("product.detail", product_code);
mapper에 상품코드를 전달하여 레코드를 조회합니다.
상품코드는 primary key로 설정되어 있으므로 1개만 리턴됩니다. 레코드가 2개 이상이면 selectList(), 1개이면 selectOne()을 사용합니다.
3. product.xml
id가 detail인 태그를 추가합니다.
<?xml version="1.0" encoding="UTF-8"?>
[생략]
<insert id="insert">
[생략]
</insert>
<select id="detail" resultType="java.util.Map">
select * from product
where product_code=#{product_code}
</select>
</mapper>
[해설]
sql 명령어를 실행한 후 map에 자료를 저장하여 dao로 리턴합니다. 상품코드가 일치하는 1개의 레코드가 리턴됩니다.
<select id="detail" resultType="java.util.Map">
select * from product
where product_code=#{product_code}
</select>
4. ProductController.java
detail() method를 작성합니다.
package com.example.product;
@Controller
public class ProductController {
[생략]
@RequestMapping("/insert")
public String insert(@RequestParam Map<String, Object> map, @RequestParam MultipartFile img,
HttpServletRequest request) {
[생략]
}
@RequestMapping("/detail/{product_code}")
public ModelAndView detail(@PathVariable String product_code, ModelAndView mav) {
mav.setViewName("detail");
mav.addObject("product", productDao.detail(product_code));
return mav;
}
}
[해설]
@RequestMapping("/detail/{product_code}")
public ModelAndView detail(@PathVariable String product_code, ModelAndView mav) {
상세화면을 보기 위한 url의 형식을 아래와 같이 만들었습니다.
http://localhost/detail/{상품코드}
상품코드가 1번이라면 http://localhost/detail/1 이 됩니다.
상품코드는 클릭할 때마다 바뀌므로 변수로 처리가 되어야 합니다. 이 변수는 url에 포함되는 변수이므로 @PathVariable 어노테이션을 붙여서 값을 전달했습니다.
mav.setViewName("detail");
출력 페이지를 detail.jsp로 지정합니다.
mav.addObject("product", productDao.detail(product_code));
변수명을 product로 하고 상품코드에 해당하는 레코드를 dao에 요청합니다.
5. detail.jsp
mapper에서 dao로, dao에서 Controller로 넘어온 데이터가 detail.jsp로 전달되어 출력됩니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>상품 정보 편집</h2>
<form name="form1" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>상품명</td>
<td><input type="text" name="product_name" value="${product.product_name}"></td>
</tr>
<tr>
<td>가격</td>
<td><input type="number" name="price" value="${product.price}"></td>
</tr>
<tr>
<td>상품설명</td>
<td><textarea rows="5" cols="60" name="description">${product.description}</textarea></td>
</tr>
<tr>
<td>상품이미지</td>
<td>
<c:if test="${product.filename != '-' }">
<img src="/resources/images/${product.filename}" width="300px" height="300px">
<br>
</c:if>
<input type="file" name="img">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="목록" onclick="location.href='/'">
</td>
</tr>
</table>
</form>
</body>
</html>
[해설]
상세 화면은 write.jsp 페이지와 많이 비슷합니다.
<input type="text" name="product_name" value="${product.product_name}">
상품이름을 태그에 표시하기 위하여 value 속성을 추가했습니다.
<textarea rows="5" cols="60" name="description">${product.description}</textarea>
textarea 는 input 태그와 달리 태그 사이에 내용이 작성되어야 합니다.
<textarea>내용</textarea>
${product.description} 변수가 태그 사이에 추가된 것을 확인하시기 바랍니다.
<c:if test="${product.filename != '-' }">
<img src="/resources/images/${product.filename}" width="300px" height="300px">
<br>
</c:if>
기존에 상품이미지가 업로드된 경우 그 상품이미지를 표시하기 위하여 조건문을 추가했습니다.
6. 상품 상세 실행 결과 확인
상품목록에서 상품정보 링크를 클릭하면 해당되는 상품의 상세 정보를 출력합니다.