쇼핑몰의 관리자 모드로 들어가 상품을 등록, 수정, 삭제하는 기능을 구현해보자
📌 1. 관리자 모드에서 상품 등록하기
📖 productmanager.jsp
<jsp:useBean id="productMgr" class="pack.product.ProductManager"></jsp:useBean>
<body>
*** 전체 상품 정보(관리자) ***<br/>
<%@include file="admin_top.jsp" %>
<br/>
<table style="width: 90%">
<tr style="background-color: yellow;">
<th>번호</th>
<th>상품명</th>
<th>가격</th>
<th>등록일</th>
<th>재고량</th>
<th>상세보기</th>
</tr>
<%
ArrayList<ProductDto> plist = productMgr.getProductAll();
if(plist.size() == 0){
%>
<tr>
<td colspan="6">등록된 상품이 없습니다.</td>
</tr>
<%
}else{
// 상품이 있을경우
for(ProductDto p:plist){
%>
<tr>
<td><%=p.getNo() %></td>
<td><%=p.getName() %></td>
<td><%=p.getPrice() %></td>
<td><%=p.getSdate() %></td>
<td><%=p.getStock() %></td>
<td>
<a href="javascript:productDetail('<%=p.getNo() %>')">상세보기</a>
</td>
</tr>
<%
}
}
%>
<tr>
<td colspan="6">
<a href="productinsert.jsp"><b>[ 상품 등록 ]</b></a>
</td>
</tr>
</table>
<%@include file="admin_bottom.jsp" %>
<form action="productdetail.jsp" name="detailFrm" method="post">
<input type="hidden" name="no">
</form>
</body>상품 정보를 보여주는 매커니즘이다.
ArrayList<ProductDto> plist = productMgr.getProductAll() 은 ProductManager 클래스 내에서 plist라는 이름의 ArrayList 변수를 선언한다.
getProductAll() 메서드를 통해 데이터베이스에서 모든 상품 정보를 가져와서 저장한다.
상품이 있을 경우에는 DB에서 불러온 상품의 정보를 테이블 형식으로 출력이 된다.
상품 등록 링크를 클릭하면 productinsert.jsp으로 이동한다.
📖 productinsert.jsp
<form action="productproc.jsp?flag=insert" method="post" enctype="multipart/form-data">
<!-- 생략 -->
<tr>
<th colspan="2">* 상품 등록 *</th>
</tr>
<tr>
<td>상품명</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>가격</td>
<td>
<input type="text" name="price">
</td>
</tr>
<tr>
<td>설명</td>
<td>
<textarea rows="5" style="width: 98%" name="detail"></textarea>
</td>
</tr>
<tr>
<td>재고량</td>
<td>
<input type="text" name="stock">개
</td>
</tr>
<tr>
<td>이미지</td>
<td>
<input type="file" name="image" size="30">
</td>
</tr>
<!-- 생략 -->
</form>폼 태그안에 있는 데이터 값들은 productproc.jsp 으로 넘어가게 된다.
flag=insert 라는 파라미터를 추가하여 productproc.jsp 쪽에서 어떤 작업을 할지를 식별한다.
enctype="multipart/form-data" 코드는 주로 대량의 데이터나 파일 전달 시 사용한다.
📖 productproc.jsp (flag = insert)
<jsp:useBean id="productMgr" class="pack.product.ProductManager"></jsp:useBean>
<%
request.setCharacterEncoding("UTF-8");
String flag = request.getParameter("flag");
// 초기에는 아무런 작업도 수행되지 않았기 때문에 결과는 실패(false)로 가정하는 것
boolean result = false;
// 그 요청에 대하여 퍼시스트레이어를 찾아간다.
// flag 변수가 "insert"와 일치하는지 확인하고 일치하는 경우 문장 실행
if(flag.equals("insert")){
result = productMgr.insertProduct(request);
// // flag 변수가 "update"와 일치하는지 확인하고 일치하는 경우 문장 실행
}else if(flag.equals("update")){
result = productMgr.updateProduct(request);
// // flag 변수가 "delete"와 일치하는지 확인하고 일치하는 경우 문장 실행
}else if(flag.equals("delete")){
result = productMgr.deleteProduct(request.getParameter("no"));
}else{
response.sendRedirect("productmanager.jsp");
}
if(result){
%>
<script>
alert("정상 처리 되었습니다.");
location.href="productmanager.jsp";
</script>
<%}else{%>
<script>
alert("오류 발생\n관리자에게 문의 하세요.");
location.href="productmanager.jsp";
</script>
<%
}
%>전 페이지에서 전 페이지에서 사용자로부터 flag 파라미터값을 받아온다. 그런데 String 타입인 이유가 뭘까?
그 이유는 HTTP 요청에서 파라미터의 값은 모두
문자열형태로 전달되기 때문이다.
전 페이지에서 flag 파라미터 값을 insert 으로 받아왔기 때문에
if(flag.equals("insert")){
result = productMgr.insertProduct(request);
}이 문장이 실행이 된다.
insertProduct(request) 메서드 값의 결과값을 result에 저장한다.
📖 insertProduct(HttpServletRequest request)
public boolean insertProduct(HttpServletRequest request) {
boolean b = false;
try {
// 업로드할 폴더 경로는 절대 경로!
String uploadDir = "C:/work/jsou/java_web7shop/src/main/webapp/upload";
MultipartRequest multi = new MultipartRequest(request, uploadDir, 5 * 1024 * 1024, "utf-8", new DefaultFileRenamePolicy());
//System.out.println(multi.getParameter("name"));
conn = ds.getConnection();
String sql = "insert into shop_product(name,price,detail,sdate,stock,image) values(?,?,?,now(),?,?)";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, multi.getParameter("name"));
pstmt.setString(2, multi.getParameter("price"));
pstmt.setString(3, multi.getParameter("detail"));
pstmt.setString(4, multi.getParameter("stock"));
// 이미지 선택을 안하는 사용자를 고려해서 if문
if(multi.getFilesystemName("image") == null) {
pstmt.setString(5, "ready.gif");
}else {
pstmt.setString(5, multi.getFilesystemName("image"));
}
if(pstmt.executeUpdate() > 0) b = true;
}
//...생략
return b;
}관리자가 이미지를 업로드했을 때 해당 이미지 파일이 서버의 지정된 디렉토리 경로에 저장한다.
if(multi.getFilesystemName("image") == null) {
pstmt.setString(5, "ready.gif");
}else {
pstmt.setString(5, multi.getFilesystemName("image"));
}위 코드는 사용자가 이미지를 선택안했을 때는 ready.gif 이미지가 설정이 되고, 이미지를 선택했을 때는 선택한 이미지가 설정이 된다.
📌 2. 관리자 모드에서 상품 수정하기
관리자가 올린 상품 정보들을 수정하는 기능을 구현해보자.
📖 productdetail.jsp (UPDATE)
<!-- 생략 -->
<tr>
<td colspan="3" style="text-align: center;">
<a href="javascript:productUpdate('<%=dto.getNo() %>')">수정하기</a>
</td>
</tr>
<form action="productupdate.jsp" name="updateForm" method="post">
<input type="hidden" name="no">
</form>수정하기 링크를 클릭하면 자바스크립트 파일에 있는 productUpdate 함수를 찾아가게 되는데,
dto.getNo()와 함께 넘어가게 된다.
function productUpdate(no){
document.updateForm.no.value = no;
document.updateForm.submit();
}updateForm 으로 인해 폼을 서버로 제출(submit)하는 역할을 한다. 따라서 수정하기 링크를 클릭하면 자바스크립트 submit( ) 으로 인해 productupdate.jsp 넘어가게 된다.
📖 productupdate.jsp
<jsp:useBean id="productMgr" class="pack.product.ProductManager"></jsp:useBean>
<%
ProductDto dto = productMgr.getProduct(request.getParameter("no"));
%>
<!-- 생략 -->
<form action="productproc.jsp?flag=update" enctype="multipart/form-data" method="post">
<tr>
<td>상품명</td>
<td><input type="text" name="name" value="<%= dto.getName()%>"></td>
</tr>
<tr>
<td>가격</td>
<td><input type="text" name="price" value="<%= dto.getPrice()%>"></td>
</tr>
<tr>
<td>설 명</td>
<td>
<textarea rows="5" style="width: 100%" name="detail"><%=dto.getDetail() %></textarea>
</td>
</tr>
<tr>
<td>재고량</td>
<td><input type="text" name="stock" value="<%= dto.getStock()%>"></td>
</tr>
<tr>
<td>이미지</td>
<td>
<img src="../upload/<%=dto.getImage() %>" width="150"/>
<input type="file" name="image">
</td>
</tr>
</form>
<!-- 생략 --> 상품명을 수정한 데이터 값들이 productproc.jsp 으로 이동하게 되는데 이번엔 flag의 파라미터 값이 update이다.
📖 productproc.jsp (flag = update)
// 생략
else if(flag.equals("update")){
result = productMgr.updateProduct(request);
}flag값이 update 인지 비교하고 값이 일치하다면 다음 코드 문장을 실행한다.
updateProduct(request) 메서드 값의 결과값을 result에 저장한다.
📖 updateProduct(HttpServletRequest request)
public boolean updateProduct(HttpServletRequest request) {
boolean b = false;
try {
// 업로드할 폴더 경로는 절대 경로!
String uploadDir = "C:/work/jsou/java_web7shop/src/main/webapp/upload";
MultipartRequest multi = new MultipartRequest(request, uploadDir, 5 * 1024 * 1024, "utf-8", new DefaultFileRenamePolicy());
conn = ds.getConnection();
// 이미지는 수정에서 제외될 때
if(multi.getFilesystemName("image") == null) {
//System.out.println(multi.getParameter("name") + multi.getParameter("no"));
String sql = "update shop_product set name=?,price=?,detail=?,stock=? where no=?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, multi.getParameter("name"));
pstmt.setString(2, multi.getParameter("price"));
pstmt.setString(3, multi.getParameter("detail"));
pstmt.setString(4, multi.getParameter("stock"));
pstmt.setString(5, multi.getParameter("no"));
} else {
String sql = "update shop_product set name=?,price=?,detail=?,stock=?,image=? where no=?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, multi.getParameter("name"));
pstmt.setString(2, multi.getParameter("price"));
pstmt.setString(3, multi.getParameter("detail"));
pstmt.setString(4, multi.getParameter("stock"));
pstmt.setString(5, multi.getFilesystemName("image"));
pstmt.setString(6, multi.getParameter("no"));
}
if(pstmt.executeUpdate() > 0) b = true;
//... 생략
return b;
}위 코드는 사용자(클라이언트)가 이미지를 빼고 수정할 때와 이미지도 같이 수정할 수 있기 때문에 if ~ else문으로 코드를 나눠 작성했다.
if(pstmt.executeUpdate() > 0) b = true;위 코드는 전체 수정이 아닌 한 개라도 수정이 된다면 true을 반환해 UPDATE가 된다는 것이다.
📌 3. 관리자 모드에서 상품 삭제하기
마지막으로 관리자가 올린 상품 정보들을 삭제하는 기능을 구현해보자.
📖 productdetail.jsp (DELETE)
<tr>
<td colspan="3" style="text-align: center;">
<a href="javascript:productDelete('<%=dto.getNo() %>')">삭제하기</a>
</td>
</tr>
</table>
<form action="productproc.jsp?flag=delete" name="deleteForm" method="post">
<input type="hidden" name="no">
</form>수정하기와 똑같이 삭제하기 링크를 클릭하면 자바스크립트 파일에 있는 productDelete 함수를 찾아가게 되는데, dto.getNo()와 함께 넘어가게 된다.
function productDelete(no){
document.deleteForm.no.value = no;
document.deleteForm.submit();
}deleteForm 으로 인해 삭제하기 링크를 클릭하게 되면 productproc.jsp 로 넘어가게 된다.
이번엔 flag의 파라미터 값이 delete 이다.
📖 productproc.jsp (flag=delete)
}else if(flag.equals("delete")){
result = productMgr.deleteProduct(request.getParameter("no"));
}전 페이지에서 파라미터 값으로 받아온 delete와 일치하는지 확인하고 일치하면 다음 코드 문장을 실행한다.
그리곤 deleteProduct(request.getParameter("no")) 메서드 값의 결과값을 result에 저장한다.
📖 deleteProduct(String no)
public boolean deleteProduct(String no) {
boolean b = false;
try {
conn = ds.getConnection();
String sql = "delete from shop_product where no=?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, no);
if(pstmt.executeUpdate() > 0) b = true;
}
//... 생략
return b;
}SQL 쿼리문은 shop_product 테이블의 해당 상품의 번호를 삭제한다는 의미이다.
백엔드 개발자 유광진 입니다.