| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 스프링 쇼핑몰 프로젝트
- 회원가입 기능
- 스프링 파일 삭제
- 삭제 구현
- 인증번호 전송
- spring 프로젝트
- 이미지 출력
- BCrypt 적용
- 스프링 이미지
- 스프링 포트폴리오
- 로그아웃 기능 구현
- 스프링 업로드
- 파일 업로드
- arraylist
- oracle 설치방법
- spring 쇼핑몰
- 로그인 기능
- 스프링 프로젝트 설정
- 쇼핑몰 프로젝트
- 스프링 프로젝트
- 스프링 쇼핑몰
- 정규표현식
- 스프링 게시판 구현
- 스프링 프로젝트 기본 설정
- ResponseEntity
- 쇼핑몰 포트폴리오
- 스프링 HikariCP
- 스프링 메일 전송
- 스프링 게시판
- Bcrypt
Archives
- Today
- Total
Kim VamPa
[Spring][쇼핑몰 프로젝트][21] 상품정보 수정 구현 - 1 본문
728x90
반응형
프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188
목표
상품 수정 페이지 구현
상품 수정 페이지와 수정 기능 구현을 목표로 합니다.
순서
1. 수정 페이지 이동
2. 수정 페이지 출력
1. 수정 페이지 이동
수정 페이지로 이동할 수 있는 인터페이스인 버튼과 페이지 이동에 사용될 URL 매핑 메서드를 작성하겠습니다. 더불어 '상품 목록 페이지(gooodsManage.jsp)' 이동 버튼 기능도 구현을 합니다.
goodsDetail.jsp
먼저 'goodsDetail.jsp'는 상품 등록 페이지 코드를 긁어 왔기 때문에 '버튼' 태그와 <form> 태그가 있습니다. 해당 코드를 아래의 코드로 각각 수정해줍니다.
<div class="btn_section">
<button id="cancelBtn" class="btn">상품 목록</button>
<button id="modifyBtn" class="btn enroll_btn">수정 </button>
</div>
<form id="moveForm" action="/admin/goodsManage" method="get" >
<input type="hidden" name="pageNum" value="${cri.pageNum}">
<input type="hidden" name="amount" value="${cri.amount}">
<input type="hidden" name="keyword" value="${cri.keyword}">
</form>
버튼을 동작시키기 위해서 <script> 내부에 Javascript 코드를 추가하였습니다.
/* 목록 이동 버튼 */
$("#cancelBtn").on("click", function(e){
e.preventDefault();
$("#moveForm").submit();
});
/* 수정 페이지 이동 */
$("#modifyBtn").on("click", function(e){
e.preventDefault();
let addInput = '<input type="hidden" name="bookId" value="${goodsInfo.bookId}">';
$("#moveForm").append(addInput);
$("#moveForm").attr("action", "/admin/goodsModify");
$("#moveForm").submit();
});
AdminController.java
수정 페이지로 이동할 수 있는 URL 매핑 메서드를 추가해주어야 합니다. 추가해야 할 수정 페이지 메서드는 '상품 조회 페이지 이동 메서드(goodsDetail)'와 완전히 동일합니다. 따라서 기존의 '상품 조회 페이지 이동 메서드'를 '상품 수정 페이지 이동 메서드'로도 활용할 수 있도록 기존의 어노테이션을 아래와 같이 변경해줍니다.
// 기존
@GetMapping("/goodsDetail")
// 수정 후
@GetMapping({"/goodsDetail", "/goodsModify"})
수정 페이지 추가
'수정 페이지' 이동을 확인하기 위해서 'goodsModify.jsp'파일을 생성 후 수정 페이지 임을 확인하기 위해서 <h1> 태그 문구를 추가합니다.
테스트
'상품 조회 페이지'에서 목록 페이지와 수정 페이지로 이동이 되는지 확인합니다.
2. 수정 페이지 출력
수정 페이지 출력시킬 기본적인 틀을 완성하고자 합니다. goodsModify.jsp와 goodsModify.css(생성 후)에 아래의 코드를 추가하였습니다.
goodsModify.jsp
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../resources/css/admin/goodsModify.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/26.0.0/classic/ckeditor.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
</head>
</head>
<body>
<%@include file="../includes/admin/header.jsp" %>
<div class="admin_content_wrap">
<div class="admin_content_subject"><span>상품 등록</span></div>
<div class="admin_content_main">
<form action="/admin/goodsModify" method="post" id="modifyForm">
<div class="form_section">
<div class="form_section_title">
<label>책 제목</label>
</div>
<div class="form_section_content">
<input name="bookName" value="${goodsInfo.bookName}">
<span class="ck_warn bookName_warn">책 이름을 입력해주세요.</span>
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>작가</label>
</div>
<div class="form_section_content">
<input id="authorName_input" readonly="readonly" value="${goodsInfo.authorName}">
<input id="authorId_input" name="authorId" type="hidden" value="${goodsInfo.authorId}">
<button class="authorId_btn">작가 선택</button>
<span class="ck_warn authorId_warn">작가를 선택해주세요</span>
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>출판일</label>
</div>
<div class="form_section_content">
<input name="publeYear" autocomplete="off" readonly="readonly">
<span class="ck_warn publeYear_warn">출판일을 선택해주세요.</span>
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>출판사</label>
</div>
<div class="form_section_content">
<input name="publisher" value="${goodsInfo.publisher}">
<span class="ck_warn publisher_warn">출판사를 입력해주세요.</span>
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>책 카테고리</label>
</div>
<div class="form_section_content">
<div class="cate_wrap">
<span>대분류</span>
<select class="cate1">
<option selected value="none">선택</option>
</select>
</div>
<div class="cate_wrap">
<span>중분류</span>
<select class="cate2">
<option selected value="none">선택</option>
</select>
</div>
<div class="cate_wrap">
<span>소분류</span>
<select class="cate3" name="cateCode">
<option selected value="none">선택</option>
</select>
</div>
<span class="ck_warn cateCode_warn">카테고리를 선택해주세요.</span>
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>상품 가격</label>
</div>
<div class="form_section_content">
<input name="bookPrice" value="${goodsInfo.bookPrice}">
<span class="ck_warn bookPrice_warn">상품 가격을 입력해주세요.</span>
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>상품 재고</label>
</div>
<div class="form_section_content">
<input name="bookStock" value="${goodsInfo.bookStock}">
<span class="ck_warn bookStock_warn">상품 재고를 입력해주세요.</span>
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>상품 할인율</label>
</div>
<div class="form_section_content">
<input id="discount_interface" maxlength="2" value="0">
<input name="bookDiscount" type="hidden" value="${goodsInfo.bookDiscount}">
<span class="step_val">할인 가격 : <span class="span_discount"></span></span>
<span class="ck_warn bookDiscount_warn">1~99 숫자를 입력해주세요.</span>
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>책 소개</label>
</div>
<div class="form_section_content bit">
<textarea name="bookIntro" id="bookIntro_textarea">${goodsInfo.bookIntro}</textarea>
<span class="ck_warn bookIntro_warn">책 소개를 입력해주세요.</span>
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>책 목차</label>
</div>
<div class="form_section_content bct">
<textarea name="bookContents" id="bookContents_textarea">${goodsInfo.bookContents}</textarea>
<span class="ck_warn bookContents_warn">책 목차를 입력해주세요.</span>
</div>
</div>
<input type="hidden" name='bookId' value="${goodsInfo.bookId}">
</form>
<div class="btn_section">
<button id="cancelBtn" class="btn">취 소</button>
<button id="modifyBtn" class="btn modify_btn">수 정</button>
</div>
</div>
<form id="moveForm" action="/admin/goodsManage" method="get" >
<input type="hidden" name="pageNum" value="${cri.pageNum}">
<input type="hidden" name="amount" value="${cri.amount}">
<input type="hidden" name="keyword" value="${cri.keyword}">
<input type="hidden" name='bookId' value="${goodsInfo.bookId}">
</form>
</div>
<%@include file="../includes/admin/footer.jsp" %>
</body>
</html>
goodsModify.css
더보기
@charset "UTF-8";
*{
margin: 0;
padding:0;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
/* 화면 전체 렙 */
.wrapper{
width: 100%;
}
/* content 랩 */
.wrap{
width : 1080px;
margin: auto;
}
/* 홈페이지 기능 네비 */
.top_gnb_area{
width: 100%;
height: 50px;
background-color: #f0f0f1;
position:relative;
}
.top_gnb_area .list{
position: absolute;
top: 0px;
right: 0;
}
.top_gnb_area .list li{
list-style: none;
float : left;
padding: 13px 15px 0 10px;
font-weight: 900;
cursor: pointer;
}
/* 관리제 페이지 상단 현페이지 정보 */
.admin_top_wrap{
height:110px;
line-height: 110px;
background-color: #5080bd;
margin-bottom: 15px;
}
.admin_top_wrap>span{
margin-left: 30px;
display:inline-block;
color: white;
font-size: 50px;
font-weight: bolder;
}
/* 관리자 wrap(네비+컨텐츠) */
.admin_wrap{
}
/* 관리자페이지 네비 영역 */
.admin_navi_wrap{
width: 20%;
height: 300px;
float:left;
height: 100%;
}
.admin_navi_wrap li{
display: block;
height: 80px;
line-height: 80px;
text-align: center;
}
.admin_navi_wrap li a{
display: block;
height: 100%;
width: 95%;
margin: 0 auto;
cursor: pointer;
font-size: 30px;
font-weight: bolder;
}
.admin_navi_wrap li a:link {color: black;}
.admin_navi_wrap li a:visited {color: black;}
.admin_navi_wrap li a:active {color: black;}
.admin_navi_wrap li a:hover {color: black;}
.admin_list_02{
background-color: #c8c8c8;
}
/* 관리자페이지 컨텐츠 영역 */
.admin_content_wrap{
width: 80%;
float:left;
min-height: 700px;
}
.admin_content_subject{ /* 관리자 컨텐츠 제목 영역 */
font-size: 40px;
font-weight: bolder;
padding-left: 15px;
background-color: #6AAFE6;
height: 80px;
line-height: 80px;
color: white;
}
/* 관리자 컨텐츠 메인 영역 */
.form_section{
width: 95%;
margin-left: 2%;
margin-top: 20px;
border: 1px solid #dbdde2;
background-color: #efefef;
}
.form_section_title{
padding: 20px 35px;
}
.form_section_title label{
display: block;
font-size: 20px;
font-weight: 800;
}
.form_section_content{
padding: 20px 35px;
border-top: 1px solid #dbdde2;
}
.form_section_content input{
width: 98%;
height: 25px;
font-size: 20px;
padding: 5px 1%;
}
.ui-datepicker-trigger { /* 캘린더 css 설정 */
margin-left: 25px;
width: 14%;
height: 38px;
font-weight: 600;
background-color: #dfe8f5;
font-size: 15px;
cursor:pointer;
}
input[name='publeYear'] {
width: 80%;
text-align: center;
}
.authorId_btn { /* 작가 선택 css 설정 */
margin-left: 20px;
width: 14%;
height: 38px;
font-weight: 600;
background-color: #dfe8f5;
font-size: 15px;
cursor:pointer;
}
#authorName_input {
width: 80%;
text-align: center;
}
.ck-content { /* ckeditor 높이 */
height: 170px;
}
/* 버튼 영역 */
.btn_section{
text-align: center;
margin: 80px 0;
}
.btn{
min-width: 180px;
padding: 4px 30px;
font-size: 25px;
font-weight: 600;
line-height: 40px;
}
.enroll_btn{
background-color: #dbdde2;
margin-left:15px;
}
#enrollBtn:hover {
background-color: #c9cbd0;
}
.form_section_content select { /* 카테고리 css 설정 */
width: 92%;
height: 35px;
font-size: 20px;
text-align-last: center;
margin-left: 5px;
}
.cate_wrap span {
font-weight: 600;
}
.cate_wrap:not(:first-child) {
margin-top: 20px;
}
.ck_warn{ /* 입력란 공란 경고 태그 */
display: none;
padding-top: 10px;
text-align: center;
color: #e05757;
font-weight: 300;
}
/* footer navai 영역 */
.footer_nav{
width:100%;
height:50px;
}
.footer_nav_container{
width: 100%;
height: 100%;
background-color:#8EC0E4;
}
.footer_nav_container>ul{
font-weight : bold;
float:left;
list-style:none;
position:relative;
padding-top:10px;
line-height: 27px;
font-family: dotum;
margin-left: 10px;
}
.footer_nav_container>ul>li{
display:inline;
width: 45px;
height: 19px;
padding: 10px 9px 0 10px;
}
.footer_nav_container>ul>span{
margin: 0 4px;
}
/* footer 영역 */
.footer{
width:100%;
height:130px;
background-color:#D4DFE6;
padding-bottom : 50px;
}
.footer_container{
width: 100%;
height: 100%;
margin: auto;
}
.footer_left>img {
width: 150%;
height: 130px;
margin-left: -20px;
margin-top: -12px;
}
.footer_left{
float :left;
width: 170px;
margin-left: 20px;
margin-top : 30px;
}
.footer_right{
float :left;
width: 680px;
margin-left: 70px;
margin-top : 30px;
}
/* float 속성 해제 */
.clearfix{
clear: both;
}
위에서 작성한 jsp, css 코드는 '상품 등록 페이지(goodsEnroll.jsp, goodsEnroll.css)'의 코드를 복사하여 수정한 코드입니다. 주요하게 수정한 사항들은 다음과 같습니다.
- 각 input 태그에 value 속성을 추가하여 각 항목의 값이 출력되도록 하였습니다. ( 출력이 되지 않는 항목들은 다음 포스팅에서 진행합니다.)
- <form> 태그 내부에 'bookId' 항목의 type이 hidden인 <input> 태그를 추가하였습니다. ( 수정을 수행하는 쿼리에서는 bookId가 필요로 하기 때문에 추가하였습니다.)
- 수정할 데이터 태그들을 감싸는 <form> 태그에 action, id 속성을 수정하였습니다.
- goodsDetail.jsp 에서 작성한 id 속성이 'moveForm'인 <form> 태그를 복사하여 붙여넣었습니다. 붙여 넣은 <form>태그 내부에 bookId를 담는 <input> 태그를 추가해주었습니다. (해당 <form> 태그는 수정 페이지에서 조회 페이지 이동할 때, 조회 페이지에서 목록 페이지로 이동을 할 때 필요로 한 데이터 들입니다. )
REFERENCE
DATE
- 2020.04.26
728x90
반응형
'스프링 프레임워크 > 쇼핑몰 프로젝트' 카테고리의 다른 글
| [Spring][쇼핑몰 프로젝트][21] 상품정보 수정 구현 - 3 (5) | 2021.04.28 |
|---|---|
| [Spring][쇼핑몰 프로젝트][21] 상품정보 수정 구현 - 2 (4) | 2021.04.27 |
| [Spring][쇼핑몰 프로젝트][20] 상품조회 기능 구현 - 3 (9) | 2021.04.22 |
| [Spring][쇼핑몰 프로젝트][20] 상품조회 기능 구현 - 2 (3) | 2021.04.21 |
| [Spring][쇼핑몰 프로젝트][20] 상품조회 기능 구현 - 1 (2) | 2021.04.20 |
'스프링 프레임워크/쇼핑몰 프로젝트' Related Articles
more
Comments