14. detail.html
repository에서 Controller로 넘어온 데이터가 detail.html 로 전달되어 출력됩니다.
[파일위치 : src/main/resources/templates/detail.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet">
<script>
function product_update(){
document.form1.action="/update";
document.form1.submit();
}
function product_delete(){
if(confirm("삭제하시겠습니까?")){
document.form1.action="/delete";
document.form1.submit();
}
}
</script>
</head>
<body>
<h2>상품 정보 편집</h2>
<form name="form1" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>상품명</td>
<td><input type="text" name="productName" th:value="${dto.productName}"></td>
</tr>
<tr>
<td>가격</td>
<td><input type="number" name="price" th:value="${dto.price}"></td>
</tr>
<tr>
<td>상품설명</td>
<td><textarea rows="5" cols="60" name="description">[[${dto.description}]]</textarea>
</td>
</tr>
<tr>
<td>상품이미지</td>
<td>
<img th:if="${dto.filename != '-' }" th:src="@{/images/}+${dto.filename}" width="300px" height="300px">
<br>
<input type="file" name="file1">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="hidden" name="productCode"
th:value="${dto.productCode}">
<input type="button" value="수정" onclick="product_update()">
<input type="button" value="삭제" onclick="product_delete()">
<input type="button" value="목록" onclick="location.href='/'">
</td>
</tr>
</table>
</form>
</body>
</html>
[해설]
상세 화면은 write.html 페이지와 많이 비슷합니다.
<input type="text" name="productName" th:value="${dto.productName}">
상품이름을 태그에 표시하기 위하여 th:value 속성을 추가했습니다.
<textarea rows="5" cols="60" name="description">[[${dto.description}]]</textarea>
textarea 는 input 태그와 달리 태그 사이에 내용이 작성되어야 합니다.
<textarea>내용</textarea>
${product.description} 변수가 태그 사이에 추가된 것을 확인하시기 바랍니다.
<img th:if="${dto.filename != '-' }" th:src="@{/images/}+${dto.filename}" width="300px" height="300px">
기존에 상품이미지가 업로드된 경우 그 상품이미지를 표시하기 위하여 조건문을 추가했습니다.
| 번호 | 제목 | 작성자 | 작성일 | 추천 | 조회 |
| 19 |
상품 삭제
vita
|
2023.11.15
|
추천 0
|
조회 132
|
vita | 2023.11.15 | 0 | 132 |
| 18 |
상품 수정
vita
|
2023.11.15
|
추천 0
|
조회 112
|
vita | 2023.11.15 | 0 | 112 |
| 17 |
상품 상세
vita
|
2023.11.15
|
추천 0
|
조회 125
|
vita | 2023.11.15 | 0 | 125 |
| 16 |
상품 등록
vita
|
2023.11.15
|
추천 0
|
조회 105
|
vita | 2023.11.15 | 0 | 105 |
| 15 |
상품 목록
vita
|
2023.11.15
|
추천 0
|
조회 147
|
vita | 2023.11.15 | 0 | 147 |
| 14 |
14. detail.html
vita
|
2023.11.15
|
추천 0
|
조회 120
|
vita | 2023.11.15 | 0 | 120 |
| 13 |
13. write.html
vita
|
2023.11.15
|
추천 0
|
조회 135
|
vita | 2023.11.15 | 0 | 135 |
| 12 |
12. list.html
vita
|
2023.11.15
|
추천 0
|
조회 131
|
vita | 2023.11.15 | 0 | 131 |
| 11 |
11. error.html
vita
|
2023.11.15
|
추천 0
|
조회 123
|
vita | 2023.11.15 | 0 | 123 |
| 10 |
10. main.css
vita
|
2023.11.15
|
추천 0
|
조회 119
|
vita | 2023.11.15 | 0 | 119 |