본문 바로가기
웹 개발/쇼핑몰 프로젝트(개인)

쇼핑몰 만들기(5)-상품 관리

osy9907 2024. 4. 15. 09:31
728x90
 

쇼핑몰 만들기(4)-관리자 상세보기, 부트스트랩 적용

2024.04.05 - [웹 개발] - 쇼핑몰 만들기(3)-관리자 리스트, 관리자 메뉴, 권한 변경 쇼핑몰 만들기(3)-관리자 리스트, 관리자 메뉴, 권한 변경 쇼핑몰 만들기(2)-관리자 로그인,로그아웃 쇼핑몰 만들기(

broad-backend.tistory.com

 

이번에는 상품들을 보여주는 상품관리 페이지를 만들것이다.

등록돼있는 상품들을 보여주는 goodsList, 상품을 추가하는 addGoodsForm, addGoodsAction을 구현할것.

또한 상품을 상세하게 볼 수 있는 goodsOne

상품 수정을 할 수 있는 updateGoodsForm, updateGoodsAction

상품 삭제를 할 수 있는 deleteGoodsForm, deleteGoodsAction 또한 구현 할 것이다.

 

addGoodsForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="java.util.*"%>
<%@page import="java.sql.*"%>

<!-- Controller Layer -->
<%@ include file="/emp/inc/commonSessionCheck.jsp"%>

<%
	/* DB 연결 및 초기화 */
	Class.forName("org.mariadb.jdbc.Driver");
	Connection conn = null;
	conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3307/shop", "root", "****");
	
	String getCategorySql = "SELECT category FROM category";
	PreparedStatement getCategoryStmt = null;
	ResultSet getCategoryRs = null;
	getCategoryStmt = conn.prepareStatement(getCategorySql);
	getCategoryRs = getCategoryStmt.executeQuery();
	
	ArrayList<String> categoryList = new ArrayList<String>();
	while(getCategoryRs.next()) {
		categoryList.add(getCategoryRs.getString("category"));
	}
%>

<!-- View Layer -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<link href="/shop/css/w3.css" rel="stylesheet" type="text/css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
<!-- 메인 메뉴 -->
<jsp:include page="/emp/inc/empMenu.jsp"></jsp:include>

	<div class="col"></div>

	<div class="col-6">
		<div class="w3-border w3-round" style="margin-top: 20px;">
			<div class="w3-container w3-dark-grey " style="padding: 10px;">
				<h1>상품 등록</h1>
			</div>	
			
			<div class="w3-card-4" style="padding-top: 15px;">
				<form class="w3-container" action="/shop/emp/goods/addGoodsAction.jsp" method="post" enctype="multipart/form-data">
				
					<div>
						<label>카테고리</label>
						<select class="w3-select" name="category" required="required">
							<option value="">선택</option>
							<%
								for(String s : categoryList) {
							%>
									<option value="<%=s%>"><%=s%></option>
							<%
								}
							%>
						</select>
					</div>
					
					<!-- emp_id값은 action쪽에서 세션변수에서 바인딩 -->
					<div>
						<label>상품명</label>
						<input class="w3-input" type="text" name="goodsTitle" required="required">
					</div>
					
					<div>
						<label>이미지</label>
						<input class="w3-input" type="file" name="goodsImg" required="required">
					</div>
					
					<div>
						<label>가격</label>
						<input class="w3-input" type="number" name="goodsPrice" required="required">
					</div>
					
					<div>
						<label>수량</label>
						<input class="w3-input" type="number" name="goodsAmount" required="required">
					</div>
					
					<div>
						<label>설명</label>
						<textarea class="w3-input" rows="5" cols="50" name="goodsContent" required="required"></textarea>
					</div>
					
					<div>
						<button class="w3-button w3-section w3-block w3-dark-grey w3-ripple" style="width: 60%; margin: 0 auto;" type="submit">상품 등록</button>
					</div>
				</form>
			</div>
		</div>
		
	</div>
	
	<div class="col"></div>
</div>

</body>
</html>

 

DB를 연결하고 [DB]shop.category 카테고리가 담겨있는 db에서 모든 category를 SELECT쿼리로 가져올 것이다.

상품을 추가할 때 카테고리 같은 경우는 select박스를 이용해 선택 해줄 것이기때문!

 

그 후 SELECT한 category를 ResultSet에서 ArrayList로 옮겨준다.

그리고 goods테이블에 맞게 추가해야 할 것들을 폼으로 만들고 값을 입력하면 addGoodsAction.jsp로 값이 넘어간다!

아 여기서 중요한 것은 톰캣에 이미지파일을 업로드하기위해 form태그의 enctype을 multipart/form-data로 변경해줘야한다. multipart/form-data로 변경하게되면 입력값이 byte형태로 전달되게 된다.(이미지는 그냥 보낼 수가 없음!)

addGoodsAction.jsp

<%@page import="java.nio.file.Files"%>
<%@page import="java.sql.*"%>
<%@page import="java.util.*"%>
<%@page import="java.io.*"%>
<%@page import="java.nio.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!-- Controller Layer -->
<%@ include file="/emp/inc/commonSessionCheck.jsp"%>

<!-- Session 설정 값 : 입력할 때 로그인한 emp의 emp_id값이 필요하기 때문! -->
<%
	HashMap<String, Object> loginMember = (HashMap<String, Object>)(session.getAttribute("loginEmp"));
%>

<!-- Model Layer -->
<%
	// 요청 값 분석
	String category = request.getParameter("category");
	String goodsTitle = request.getParameter("goodsTitle");
	String goodsPrice = request.getParameter("goodsPrice");
	String goodsAmount = request.getParameter("goodsAmount");
	String goodsContent = request.getParameter("goodsContent");
	
	// 이미지 파일 업로드
	Part part = request.getPart("goodsImg");
	String originalName = part.getSubmittedFileName();
	// 원본 이름에서 확장자만 분리
	int dotIndex = originalName.lastIndexOf(".");
	String ext = originalName.substring(dotIndex);	// 확장자(ex. jpg, png ...)
	
	UUID uuid = UUID.randomUUID();
	String imgName = uuid.toString().replace("-", "");
	imgName = imgName + ext;
	
	
	// 요청 값이 1개라도 null일시
	if(category == null || goodsTitle == null || goodsPrice == null || 
			goodsAmount == null || goodsContent == null) {
		response.sendRedirect("/shop/emp/goods/addGoodsForm.jsp");
	}
	
	// 요청값 디버깅
	System.out.println("addGoodsAction - category = " + category);
	System.out.println("addGoodsAction - goodsTitle = " + goodsTitle);
	System.out.println("addGoodsAction - goodsPrice = " + goodsPrice);
	System.out.println("addGoodsAction - goodsAmount = " + goodsAmount);
	System.out.println("addGoodsAction - goodsContent = " + goodsContent);
	System.out.println("addGoodsAction - imgName = " + imgName);
%>

<!-- Controller Layer -->
<%
	/* DB 연결 및 초기화 */
	Class.forName("org.mariadb.jdbc.Driver");
	Connection conn = null;
	conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3307/shop", "root", "****");

	/* [DB]shop.goods에 goods 추가하는 sql */
	String addGoodsSql = "INSERT INTO goods(category, emp_id, goods_title, img_name, goods_content, goods_price, goods_amount) VALUES (?, ?, ?, ?, ?, ?, ?)";
	PreparedStatement addGoodsStmt = null;
	
	addGoodsStmt = conn.prepareStatement(addGoodsSql);
	addGoodsStmt.setString(1, category);
	addGoodsStmt.setString(2, (String)(loginMember.get("empId")));
	addGoodsStmt.setString(3, goodsTitle);
	addGoodsStmt.setString(4, imgName);
	addGoodsStmt.setString(5, goodsContent);
	addGoodsStmt.setInt(6, Integer.parseInt(goodsPrice));
	addGoodsStmt.setInt(7, Integer.parseInt(goodsAmount));
	
	int row = addGoodsStmt.executeUpdate();
	
	if(row == 1) {
		// 상품 등록 성공
		// part -> 1. inputStream -> 2. outputStream -> 3. 빈 파일 생성
		
		// 1번
		InputStream is = part.getInputStream();
		// 3번 + 2번 같이
		String imgPath = request.getServletContext().getRealPath("upload");
		System.out.println("addGoodsAction - imgPath = " + imgPath);
		System.out.println("addGoodsAction - imgName = " + imgName);
		File image = new File(imgPath, imgName);	// 빈 파일 생성
		OutputStream os = Files.newOutputStream(image.toPath());	// os + file
		is.transferTo(os);
		
		os.close();
		is.close();
		
		System.out.println("상품 등록 성공");
		response.sendRedirect("/shop/emp/goods/goodsList.jsp");
	} else {
		// 상품 등록 실패
		System.out.println("상품 등록 실패");
		response.sendRedirect("/shop/emp/goods/addGoodsForm.jsp");
	}
		
%>

 

누가 추가했는지 알기위해 loginEmp의 session값을 가져와 HashMap에 담아준다.

 

폼에서 입력받았던 요청값들을 getPatameter()메서드로 변수에 담고

 

이미지 파일을 업로드 하기위한 작업을 한다.

Part에 getPart를 사용해 이미지 요청값을 담아준다.

그 후 원본 이미지 이름을 가져와 확장자를 분리해준다.

그리고 UUID로 중복되지않게 randomUUID를 만들어 이름을 바꿔준다.

 

그리고 받아온 요청값들을 INSERT쿼리를 통해 날려준다.

이미지파일은 이미지파일의 이름을 DB에 올린다. 이미지는 InputStream과 OutputStream을 통해 하나의 폴더를 생성하고 그곳에 이미지를 생성하면, 해당 폴더에 있는 이미지의 경로를 통해 페이지에 이미지를 보여주는 것이다.

 

그 전에 이미지가 바이트로 넘어오게 되면 InputStream과 OutputStream을 통해 변환해주는 작업이 필요하다

작업이 끝나면 상품 리스트인 goodsList로 redirect해주면 끝이다!

 

상품 추가 과정

 

이런식으로 상품이 추가된다.

현재 상품 목록에는 mock데이터와 내가 몇개 추가를 더 해놔서 여러 상품들이 있는 상태이다.

 

다음은 상품을 볼 수 있는 페이지인 goodsList를 볼 것이다.

goodsList.jsp

<%@page import="java.util.*"%>
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!-- Controller Layer -->
<%@ include file="/emp/inc/commonSessionCheck.jsp"%>

<%
	/* DB 연결 및 초기화 */
	Class.forName("org.mariadb.jdbc.Driver");
	Connection conn = null;
	conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3307/shop", "root", "****");

	/* 상품 목록 페이징 */
	
	// 현재 페이지 구하기
	int currentPage = 1;	// 현재페이지
	if(request.getParameter("currentPage") != null) {
		currentPage = Integer.parseInt(request.getParameter("currentPage"));
	}
	
	// currentPage 세션 값
	session.setAttribute("currentPage", currentPage);
	System.out.println("goodsList - currentPage 세션 값 = " + session.getAttribute("currentPage"));	// currentPage 세션 값 체크
	
	// 페이지당 보여줄 row 수
	int rowPerPage = 30;
	
//  	// select 박스로 rowPerPage 구하기
//  	if(request.getParameter("rowPerPage") != null) {
//  		rowPerPage = Integer.parseInt(request.getParameter("rowPerPage"));
//  	}
	
	// 전체 goods 수 구하기
	String getTotalGoodsRowSql = "SELECT COUNT(*) cnt FROM goods";
	PreparedStatement getTotalGoodsRowStmt = null;
	
	// category 요청 값
	String category = request.getParameter("category");
	System.out.println("goodsList - category = " + category);
	
	// category 세션 값
	if(category != null) {
		session.setAttribute("category", category);
		System.out.println("goodsList - category 세션 값 = " + session.getAttribute("category"));	// category 세션 값 체크
	} else {
		category = "all";
	}
	
	// category
	if(category.equals("all")) {
		getTotalGoodsRowStmt = conn.prepareStatement(getTotalGoodsRowSql);
	} else {
		getTotalGoodsRowSql = "SELECT COUNT(*) cnt FROM goods WHERE category = ?";
		getTotalGoodsRowStmt = conn.prepareStatement(getTotalGoodsRowSql);
		getTotalGoodsRowStmt.setString(1, category);
	}
	
	ResultSet getTotalGoodsRowRs = getTotalGoodsRowStmt.executeQuery();
	
	int totalRow = 0;
	if(getTotalGoodsRowRs.next()) {
		totalRow = getTotalGoodsRowRs.getInt("cnt");
	}
	System.out.println("goodsList - totalRow = " + totalRow);
	
	// 마지막 페이지 구하기
	int lastPage = totalRow / rowPerPage;
	if(totalRow % rowPerPage != 0) {
		lastPage += 1;
	}
	System.out.println("goodsList - lastPage = " + lastPage);
	
	// 페이지당 시작할 row
	int startRow = (currentPage - 1) * rowPerPage;
	System.out.println("goodsList - startRow = " + startRow);
	
%>

<!-- Model Layer -->
<%	
	/* 카테고리 별 상품 수 가져오는 sql쿼리 */
	String getCategorySql = "SELECT category, COUNT(*) cnt FROM goods GROUP BY category ORDER BY category ASC";
	PreparedStatement getCategoryStmt = null;
	ResultSet getCategoryRs = null;
	
	getCategoryStmt = conn.prepareStatement(getCategorySql);
	getCategoryRs = getCategoryStmt.executeQuery();
	ArrayList<HashMap<String, Object>> goodsCntPerCategory = new ArrayList<HashMap<String, Object>>();
	
	while(getCategoryRs.next()) {
		HashMap<String, Object> m = new HashMap<String, Object>();
		m.put("category", getCategoryRs.getString("category"));
		m.put("cnt", getCategoryRs.getInt("cnt"));
		goodsCntPerCategory.add(m);
	}
	
	// 디버깅
	System.out.println(goodsCntPerCategory);
%>
<%
	/* category 별로 상품 보여주는 sql */
	/*
		category
		
		null이면
		SELECT * FROM goods
		
		null이 아니면
		SELECT * FROM goods WHERE category = ?
	
	*/
	
	String getTotalGoodsSql = "SELECT goods_no goodsNo, category, goods_title goodsTitle, img_name imgName, goods_content goodsContent, goods_price goodsPrice, goods_amount goodsAmount FROM goods ";
	PreparedStatement getTotalGoodsStmt = null;
	
	ResultSet getTotalGoodsRs = null;
	
	if(category.equals("all")) {
		getTotalGoodsSql = getTotalGoodsSql + "ORDER BY create_date DESC LIMIT ?,?";
		getTotalGoodsStmt = conn.prepareStatement(getTotalGoodsSql);
		getTotalGoodsStmt.setInt(1, startRow);
		getTotalGoodsStmt.setInt(2, rowPerPage);
		getTotalGoodsRs = getTotalGoodsStmt.executeQuery();
		
	} else {
		getTotalGoodsSql = getTotalGoodsSql + " " + "WHERE category = ? ORDER BY create_date DESC LIMIT ?,?";
		getTotalGoodsStmt = conn.prepareStatement(getTotalGoodsSql);
		getTotalGoodsStmt.setString(1, category);
		getTotalGoodsStmt.setInt(2, startRow);
		getTotalGoodsStmt.setInt(3, rowPerPage);
		getTotalGoodsRs = getTotalGoodsStmt.executeQuery();
	}
	
	ArrayList<HashMap<String, Object>> goodsList = new ArrayList<HashMap<String, Object>>();
	
	while(getTotalGoodsRs.next()) {
		HashMap<String, Object> m = new HashMap<String, Object>();
		m.put("goodsNo", getTotalGoodsRs.getString("goodsNo"));
		m.put("category", getTotalGoodsRs.getString("category"));
		m.put("goodsTitle", getTotalGoodsRs.getString("goodsTitle"));
		m.put("imgName", getTotalGoodsRs.getString("imgName"));
		m.put("goodsContent", getTotalGoodsRs.getString("goodsContent"));
		m.put("goodsPrice", getTotalGoodsRs.getString("goodsPrice"));
		m.put("goodsAmount", getTotalGoodsRs.getString("goodsAmount"));
		goodsList.add(m);
	}
	
	// 디버깅
// 	System.out.println(goodsList);
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<link href="/shop/css/w3.css" rel="stylesheet" type="text/css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<!-- 메인 메뉴 -->
	<jsp:include page="/emp/inc/empMenu.jsp"></jsp:include>

	<div>
		<!-- 사이드바 - 서브메뉴 카테고리별 상품리스트 -->
		<div class="w3-sidebar w3-light-grey w3-bar-block" style="width:15%">
			<h3 class="w3-bar-item">카테고리</h3>

			<a href="/shop/emp/goods/goodsList.jsp?category=all" class="w3-bar-item w3-button">전체(<%=getTotalGoodsRowRs.getInt("cnt")%>)</a>
			<%
				for(HashMap m : goodsCntPerCategory) {
			%>

					<a href="/shop/emp/goods/goodsList.jsp?category=<%=(String)(m.get("category")) %>" class="w3-bar-item w3-button">
						<%=(String)(m.get("category")) %>
						(<%=(Integer)(m.get("cnt")) %>)
					</a>

			<% 
				}
			%>
		</div>
		
		<!-- goodsList 본문 -->
		<div style="margin-left:15%; ">
			<div style="padding:20px 5%;">
				<h1 style="display: inline-block;">상품 목록</h1>
				<div class="w3-right">
					<a href="/shop/emp/goods/addGoodsForm.jsp">상품 등록</a>
				</div>
			</div>
			
			<!-- goods 목록 출력 -->
			<div>
				<div class="row" style="margin: 0 3%;">				

					<%
						for(HashMap<String, Object> m : goodsList) {
					%>
							
							<div class="col-md-3" style="height: 250px; margin: 20px 10px; width: 15%;">
							
								<div class="w3-card-2" style="height: 100%;">
							
									<!-- 상품 이미지 -->
									<div class="w3-border-bottom" style="text-align: center; height: 70%; padding-bottom: 5%;">
										<a href="/shop/emp/goods/goodsOne.jsp?goodsNo=<%=m.get("goodsNo")%>">
											<img alt="" src="/shop/upload/<%=m.get("imgName") %>" style="max-width: 100%; height: 100%;">
										</a>	
									</div>
									
									<!-- 상품 내용(이름, 가격) -->
									<div style="height: 30%; text-align: center;">
									
										<div style="margin-top: 10%;">
											<a href="/shop/emp/goods/goodsOne.jsp?goodsNo=<%=m.get("goodsNo") %>">
												<%=m.get("goodsTitle") %>
											</a>
										</div>
										
										<div>
											<%=m.get("goodsPrice") %>원
										</div>
										
									</div>
								
								</div>
							
							</div>
							
			
					<%
						}
					%>
	
				</div>
			</div>
			
			
			
			<!-- 페이징 버튼 -->	
			<div class="w3-bar w3-center">
		
				<%
					if(currentPage > 1) {
				%>	
						<a class="w3-button" href="/shop/emp/goods/goodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=1">처음페이지</a>
						<a class="w3-button" href="/shop/emp/goods/goodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=<%=currentPage-1%>">이전페이지</a>
				<%		
					} else {
				%>
						<a class="w3-button" href="/shop/emp/goods/goodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=1">처음페이지</a>
						<a class="w3-button" href="/shop/emp/goods/goodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=1">이전페이지</a>
				<%		
					}
		
					if(currentPage < lastPage) {
				%>
						<a class="w3-button" href="/shop/emp/goods/goodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=<%=currentPage+1%>">다음페이지</a>
						<a class="w3-button" href="/shop/emp/goods/goodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=<%=lastPage%>">마지막페이지</a>
				<%		
					} else {
				%>
						<a class="w3-button" href="/shop/emp/goods/goodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=<%=lastPage%>">다음페이지</a>
						<a class="w3-button" href="/shop/emp/goods/goodsList.jsp?category=<%=session.getAttribute("category") %>&currentPage=<%=lastPage%>">마지막페이지</a>
				<%
					}
				%>
		
			</div>
		</div>
		
	</div>
	
</body>
</html>

 

일단 페이징을 하기위한 작업을 했다.

그리고 카테고리별로 보여주기 위해 [DB]shop.category를 SELECT쿼리로 가져왔다.

또한 카테고리별로 페이징도 하기위해서 category 세션변수를 만들었다.

전체를 볼 때는 category를 all로, 나머지는 카테고리 이름별로 세션 변수에 들어가게 했다.

그리고 카테고리가 all일 경우와 선택됐을 경우 쿼리를 따로 만들어 실행되도록 했다.

goodsList 상품 페이지

 

다음은 상품이미지나 상품이름을 클릭하면 나오는 상세페이지이다.

goodsOne.jsp

<%@page import="java.util.*"%>
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- Controller Layer -->
<%@ include file="/emp/inc/commonSessionCheck.jsp"%>

<%
	// 요청 값 확인
	String goodsNo = request.getParameter("goodsNo");
	// 요청 값 디버깅
	System.out.println("goodsOne - goodsNo = " + goodsNo);
%>

<%
	/* DB 연결 및 초기화 */
	Class.forName("org.mariadb.jdbc.Driver");
	Connection conn = null;
	conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3307/shop", "root", "****");
	
	/* 상품 하나의 모든 정보 가져오는 쿼리 */
	String getGoodsInfoSql = "SELECT category, emp_id empId, goods_title goodsTitle, img_name imgName, goods_content goodsContent, goods_price goodsPrice, goods_amount goodsAmount, create_date createDate FROM goods WHERE goods_no = ?";
	PreparedStatement getGoodsInfoStmt = null;
	ResultSet getGoodsInfoRs = null;
	getGoodsInfoStmt = conn.prepareStatement(getGoodsInfoSql);
	getGoodsInfoStmt.setString(1, goodsNo);
	getGoodsInfoRs = getGoodsInfoStmt.executeQuery();
	
	HashMap<String, Object> goodsInfo = new HashMap<String, Object>();
	while(getGoodsInfoRs.next()) {
		goodsInfo.put("category", getGoodsInfoRs.getString("category"));
		goodsInfo.put("empId", getGoodsInfoRs.getString("empId"));
		goodsInfo.put("goodsTitle", getGoodsInfoRs.getString("goodsTitle"));
		goodsInfo.put("imgName", getGoodsInfoRs.getString("imgName"));
		goodsInfo.put("goodsContent", getGoodsInfoRs.getString("goodsContent"));
		goodsInfo.put("goodsPrice", getGoodsInfoRs.getString("goodsPrice"));
		goodsInfo.put("goodsAmount", getGoodsInfoRs.getString("goodsAmount"));
		goodsInfo.put("createDate", getGoodsInfoRs.getString("createDate"));

	}
	
%>

<%
	/* session의 정보 가져오기(상품을 올린 emp_id가 같거나, grade가 0보다 클때만 상품 수정,삭제 가능) */
	HashMap<String, Object> getSessionMap = (HashMap<String, Object>)(session.getAttribute("loginEmp"));
%>
<!-- View Layer -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<link href="/shop/css/w3.css" rel="stylesheet" type="text/css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
<!-- 메인 메뉴 -->
<jsp:include page="/emp/inc/empMenu.jsp"></jsp:include>

	<div class="col"></div>

	<div class="col-5">
		<table class="w3-table w3-centered w3-card-4 w3-bordered" style="margin-top: 50px; width: 100%;">
			<thead class="w3-dark-grey">
				<tr>
					<td colspan="3">
						<h1><%=goodsInfo.get("goodsTitle") %>의 상세정보</h1>
					</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td rowspan="9" style=" border: solid 1px #ddd">
						<img alt="" src="/shop/upload/<%=goodsInfo.get("imgName") %>" style="width: 100%;">
					</td>
				</tr>
				<tr>
					<td>상품번호</td>
					<td><%=goodsNo %></td>
				</tr>
				<tr>
					<td>카테고리</td>
					<td>
						<%=goodsInfo.get("category") %>
					</td>
				</tr>
				<tr>
					<td>관리자</td>
					<td>
						<%=goodsInfo.get("empId") %>
					</td>
				</tr>
				<tr>
					<td>상품명</td>
					<td>
						<%=goodsInfo.get("goodsTitle") %>
					</td>
				</tr>
				<tr>
					<td>설명</td>
					<td>
						<%=goodsInfo.get("goodsContent") %>
					</td>
				</tr>
				<tr>
					<td>가격</td>
					<td>
						<%=goodsInfo.get("goodsPrice") %>
					</td>
				</tr>
				<tr>
					<td>수량</td>
					<td>
						<%=goodsInfo.get("goodsAmount") %>
					</td>
				</tr>
				<tr>
					<td>등록일</td>
					<td>
						<%=goodsInfo.get("createDate") %>
					</td>
				</tr>
				
				<!-- 동일한 관리자거나 관리자 등급 0보다 클때만 수정,삭제 가능 -->
				<%
					if(getSessionMap.get("empId").equals(goodsInfo.get("empId")) || (int)getSessionMap.get("grade") > 0) {
				%>
						<tr>
							<td colspan="3">
								<form action="/shop/emp/goods/updateGoodsForm.jsp?goodsNo=<%=goodsNo%>" method="post" style="display: inline-block;">
									<button type="submit" class="btn btn-outline-secondary">수정</button>
								</form>
									
								<form action="/shop/emp/goods/deleteGoodsForm.jsp?goodsNo=<%=goodsNo%>" method="post" style="display: inline-block;">
									<button type="submit" class="btn btn-outline-secondary">삭제</button>
								</form>
							</td>
						</tr>
				<%
					}
				%>
			</tbody>
		</table>
		
	</div>
	
	<div class="col"></div>
</div>

</body>
</html>

 

이미지나 상품명을 클릭하면 goodsNo값을 요청값으로 넘긴다.

요청값을 받고 나면 조건을 통해 SELECT절로 [DB]shop.goods에서 필요한 데이터를 모두 뽑아온다.

그리고 HashMap에 데이터를 키,값 형태로 담아주면 페이지에 뿌릴 준비가 끝난다.

그리고 값들을 출력해주면 끝!

상품 상세 페이지

상품 수정과 삭제는 다음에 하도록 하겠다

728x90

'웹 개발 > 쇼핑몰 프로젝트(개인)' 카테고리의 다른 글

쇼핑몰 만들기(7)-카테고리 관리  (0) 2024.04.15
쇼핑몰 만들기(6)-상품 관리(상품 수정, 삭제)  (0) 2024.04.15
쇼핑몰 만들기(4)-관리자 상세보기, 부트스트랩 적용  (0) 2024.04.11
쇼핑몰 만들기(3)-관리자 리스트, 관리자 메뉴, 권한 변경  (1) 2024.04.05
쇼핑몰 만들기(2)-관리자 로그인,로그아웃  (0) 2024.04.04

'웹 개발/쇼핑몰 프로젝트(개인)' Related Articles

티스토리툴바