reProject_28_상품 등록 페이지/상품 상세 페이지/삭제/수정

reProject_27_체크박스 전체선택/전체해제 버튼으로 처리하기

2024.01.18

상품 관리페이지에서 td에 onclick="location.href"로 처리해서 체크박스를 제외한 어디를 클릭해도 상품으로 이동하도록 작업했다. tr에 작업했었으나 checkbox를 클릭하는 경우에도 처리되므로 제외시켰다.

 

1. ProductController.java

package com.w2.admin.controller;
 
import java.io.IOException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import javax.servlet.http.HttpServletResponse;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
 
import com.w2.product.ProductVO;
import com.w2.product.service.ProductService;
import com.w2.util.RandomString;
import com.w2.util.ResponseDTO;
import com.w2.util.Search;
 
@Controller
public class ProductController {
    @Autowired
    private ProductService productService;
    
    /**
     * 상품 목록 가져오기
     * @param model
     * @return
     */
    @RequestMapping("productList.mdo")
    public String productList(Model model, @RequestParam(required = false, defaultValue = "1") int page,
            @RequestParam(required = false, defaultValue = "1") int range, @RequestParam(required = false, defaultValue = "productName") String searchType,
            @RequestParam(required = false) String keyword, @ModelAttribute("search") Search search) {
        
        // 검색
        model.addAttribute("search", search);
        search.setSearchType(searchType);
        search.setKeyword(keyword);
        
        // 전체 게시글 개수
        int listCnt = productService.getProductListCnt(search);
        
        // 검색 페이지 정보
        search.pageInfo(page, range, listCnt);
        // 페이징
        model.addAttribute("pagination", search);
        // 화면 출력
        model.addAttribute("productList", productService.getProductList(search));
        
        return "product/productList";
    }
 
    /**
     * 상품 등록 화면 호출
     * @return
     */
    @RequestMapping("registerProduct.mdo")
    public String registerProduct() {
        return "product/registerProduct";
    }
 
    /**
     * 상품 등록
     * @return
     */
    @ResponseBody
    @RequestMapping("registerProductProc.mdo")
    public ResponseDTO<ProductVO> registerProductProc(ProductVO product, String colorList, String sizeList, String cntList, String productPrimeCost) {
        System.err.println("registerProductProc");
        
        String[] color = colorList.split(",");
        String[] size = sizeList.split(",");
        String[] stock = cntList.split(",");
        
        List<String> optionColorList = Arrays.asList(color);
        List<String> optionSizeList = Arrays.asList(size);
        List<Integer> stockCntList = new ArrayList<>();
        for(String s: stock) {
            stockCntList.add(Integer.parseInt(s));
        }
        
        String productId = product.getProductId() + RandomString.setRandomString(5, "num");
        product.setProductId(productId);
        
        Map<String, Object> pro = new HashMap<String, Object>();
        pro.put("product", product);
        pro.put("optionColorList", optionColorList);
        pro.put("optionSizeList", optionSizeList);
        pro.put("stockCntList", stockCntList);
        pro.put("productPrimeCost", productPrimeCost);
        
        Integer statusCode = HttpStatus.OK.value();
        int code;
        String resultCode;
        String msg;
 
        try {
            int result = productService.insert(pro);
            System.err.println(">>>>>>>>" + product.getProductId());
            
            if(result > 0) {
                code = 1;
                resultCode = "success";
                msg = "상품 등록이 완료되었습니다. \n상품 상세페이지로 이동하시겠습니까?";
            } else {
                code = -1;
                resultCode = "fail";
                msg = "오류가 발생했습니다. 다시 시도해주세요";
            }
        } catch (Exception e) {
            e.printStackTrace();
            code = -1;
            resultCode = "fail";
            msg = "오류가 발생했습니다. 다시 시도해주세요";
        }
        
        return new ResponseDTO<ProductVO>(statusCode, code, resultCode, msg, product);
    }
    
    /**
     * 상품 상세 화면 호출
     * @return
     */
    @RequestMapping("productInfo.mdo")
    public String productInfo(@RequestParam("productId")String productId, Model model) {
        HashMap<String, Object> product = productService.getProduct(productId, model);
        if(product == null) {
            model.addAttribute("data", "nodata");
        }
        model.addAttribute("product", product);
        return "product/productInfo";
    }
 
    /**
     * 상품 수정
     * @return
     */
    @ResponseBody
    @RequestMapping("modifyProductProc.mdo")
    public ResponseDTO<ProductVO> modifyProductProc(ProductVO product, String colorList, String sizeList, String cntList, String productPrimeCost) {
        String[] color = colorList.split(",");
        String[] size = sizeList.split(",");
        String[] stock = cntList.split(",");
        
        List<String> optionColorList = Arrays.asList(color);
        List<String> optionSizeList = Arrays.asList(size);
        List<Integer> stockCntList = new ArrayList<>();
        for(String s: stock) {
            stockCntList.add(Integer.parseInt(s));
        }
        
        Map<String, Object> pro = new HashMap<String, Object>();
        pro.put("productId", product.getProductId());
        pro.put("product", product);
        pro.put("optionColorList", optionColorList);
        pro.put("optionSizeList", optionSizeList);
        pro.put("stockCntList", stockCntList);
        pro.put("productPrimeCost", productPrimeCost);
        
        Integer statusCode = HttpStatus.OK.value();
        int code;
        String resultCode;
        String msg;
 
        try {
            int result = productService.modify(pro);
            
            if(result > 0) {
                code = 1;
                resultCode = "success";
                msg = "상품 수정이 완료되었습니다. \n상품 상세페이지로 이동하시겠습니까?";
            } else {
                code = -1;
                resultCode = "fail";
                msg = "오류가 발생했습니다. 다시 시도해주세요";
            }
        } catch (Exception e) {
            e.printStackTrace();
            code = -1;
            resultCode = "fail";
            msg = "오류가 발생했습니다. 다시 시도해주세요";
        }
        
        return new ResponseDTO<ProductVO>(statusCode, code, resultCode, msg, product);
    }
 
    /**
     * 상품 삭제
     * @return
     */
    @ResponseBody
    @RequestMapping("deleteProduct.mdo")
    public ResponseDTO<String> deleteProduct(String productId) {
        System.err.println("modifyProductProc");
        
        Integer statusCode = HttpStatus.OK.value();
        int code;
        String resultCode;
        String msg;
        
        try {
            int result = productService.delete(productId);
            
            if(result > 0) {
                code = 1;
                resultCode = "success";
                msg = "상품이 삭제되었습니다. 상품관리 페이지로 이동합니다.";
            } else {
                code = -1;
                resultCode = "fail";
                msg = "오류가 발생했습니다. 다시 시도해주세요";
            }
        } catch (Exception e) {
            e.printStackTrace();
            code = -1;
            resultCode = "fail";
            msg = "오류가 발생했습니다. 다시 시도해주세요";
        }
        
        return new ResponseDTO<String>(statusCode, code, resultCode, msg, productId);
    }
 
    /**
     * 상품 상태 수정
     * @param model
     * @return
     */
    @PostMapping("modifyProductStatus.mdo")
    public void modifyProductStatus(Model model, HttpServletResponse response, @RequestBody List<Map<String, String>> checkList) throws IOException {
        
        Integer statusCode = HttpStatus.OK.value();
        int code = -1;
        String resultCode = "fail";
        String message = "오류가 발생했습니다. 다시 시도해주세요";
        
        code = productService.modifyProductStatus(checkList);
 
        response.setContentType("application/json");
        response.getWriter().write(String.valueOf(code));
    }
}
 

 

 

2. ProductService.java

package com.w2.product.service;
 
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import org.springframework.ui.Model;
 
import com.w2.product.ProductVO;
import com.w2.util.Search;
 
public interface ProductService {
 
    List<ProductVO> getProductList(Search search);    // 상품 목록 가져오기
    int getProductListCnt(Search search);            // 상품 목록 개수 가져오기
    int insert(Map<String, Object> pro);            // 상품 등록
    HashMap<String, Object> getProduct(String productId, Model model);            // 상품 상세
    int modify(Map<String, Object> pro);            // 상품 수정
    int delete(String productId);                    // 상품 삭제
    int modifyProductStatus(List<Map<String, String>> checkList);    // 상품 상태 변경
}
 

 

 

3. ProductServiceImpl.java

package com.w2.product.service;
 
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.ui.Model;
 
import com.w2.product.ProductDAO;
import com.w2.product.ProductVO;
import com.w2.util.Search;
 
@Transactional
@Service("ProductService")
public class ProductServiceImpl implements ProductService {
 
    @Autowired
    private ProductDAO productDAO;
    
    @Override
    public List<ProductVO> getProductList(Search search) {
        return productDAO.getProductList(search);
    }
    
    @Override
    public int getProductListCnt(Search search) {
        return productDAO.getProductListCnt(search);
    }
 
    @Override
    public int insert(Map<String, Object> pro) {
        int result = -1;
        try {
            result = productDAO.insertProduct((ProductVO)pro.get("product"));
            result = productDAO.insertPrice(pro);
            result = productDAO.insertOption(pro);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }
 
    @Override
    public HashMap<String, Object> getProduct(String productId, Model model) {
        return productDAO.getProduct(productId, model);
    }
 
    @Override
    public int modify(Map<String, Object> pro) {
        int result=-1;
        try {
            result = productDAO.modifyProduct((ProductVO)pro.get("product"));
            result = productDAO.modifyPrice(pro);
            result = productDAO.deleteOption((String)pro.get("productId"));
            if(result > 0) {
                result = productDAO.insertOption(pro);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }
 
    @Override
    public int delete(String productId) {
        int result = -1;
        result = productDAO.deletePrice(productId);
        result = productDAO.deleteOption(productId);
        result = productDAO.deleteProduct(productId);
        return result;
    }
 
    @Override
    public int modifyProductStatus(List<Map<String, String>> checkList) {
        return productDAO.modifyProductStatus(checkList);
    }
}
 

 

 

4. ProductDAO.java

package com.w2.product;
 
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import org.springframework.ui.Model;
 
import com.w2.util.Search;
 
@Repository
public class ProductDAO {
    @Autowired
    private SqlSessionTemplate sqlSessionTemplate;
 
    public List<ProductVO> getProductList(Search search) {
        return sqlSessionTemplate.selectList("ProductDAO.getProductList", search);
    }
 
    public int getProductListCnt(Search search) {
        return sqlSessionTemplate.selectOne("ProductDAO.getProductListCnt", search);
    }
 
    public int insertProduct(ProductVO product) {
        return sqlSessionTemplate.insert("ProductDAO.insertProduct", product);
    }
 
    public int insertPrice(Map<String, Object> pro) {
        return sqlSessionTemplate.insert("ProductDAO.insertPrice", pro);
    }
 
    public int insertOption(Map<String, Object> pro) {
        List<OptionVO> optionList = new ArrayList<OptionVO>();
        List<String> optionColorList = (List<String>)pro.get("optionColorList");
        List<String> optionSizeList = (List<String>)pro.get("optionSizeList");
        List<Integer> stockCntList = (List<Integer>)pro.get("stockCntList");
 
        
        for(int i=0; i<optionColorList.size(); i++) {
            for(int j=0; j<optionSizeList.size(); j++) {
                OptionVO option = new OptionVO();
                option.setProductId(((ProductVO)pro.get("product")).getProductId());
                option.setOptionColor(optionColorList.get(i));
                option.setOptionSize(optionSizeList.get(j));
                option.setStockCnt(stockCntList.get(((i+1)*(j+1)-1)));
                System.err.println("option : " + option);
                optionList.add(option);
            }
        }
        return sqlSessionTemplate.insert("ProductDAO.insertOption", optionList);
    }
 
    public HashMap<String, Object> getProduct(String productId, Model model) {
        model.addAttribute("optionInfo",sqlSessionTemplate.selectOne("ProductDAO.getOptionInfo", productId));
        model.addAttribute("optionList",sqlSessionTemplate.selectList("ProductDAO.getOptionList", productId));
        model.addAttribute("detailImageList",sqlSessionTemplate.selectList("ProductDAO.getDetailImage", productId));
        return sqlSessionTemplate.selectOne("ProductDAO.getProduct", productId);
    }
 
    public int modifyProduct(ProductVO product) {
        return sqlSessionTemplate.update("ProductDAO.updateProduct", product);
    }
 
    public int modifyPrice(Map<String, Object> pro) {
        return sqlSessionTemplate.update("ProductDAO.updatePrice", pro);
    }
 
    public int deleteOption(String productId) {
        return sqlSessionTemplate.delete("ProductDAO.deleteOption", productId);
    }
 
    public int deleteProduct(String productId) {
        return sqlSessionTemplate.delete("ProductDAO.deleteProduct", productId);
    }
 
    public int deletePrice(String productId) {
        return sqlSessionTemplate.delete("ProductDAO.deletePrice", productId);
    }
 
    public int modifyProductStatus(List<Map<String, String>> checkList) {
        int result = -1;
        for(Map<String, String> product: checkList) {
            result = sqlSessionTemplate.update("ProductDAO.updateStatus", product);
            if(result < 1) {
                return -1;
            }
        }
        return result;
    }
}
 

 

 

5. product-mapping.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
                 
<mapper namespace="ProductDAO">
    <resultMap id="optionInfoResult" type="hashMap">
        <result property="optionColor" column="optionColor" />
        <result property="optionSize" column="optionSize" />
        <result property="stockCnt" column="stockCnt" />
    </resultMap>
    
    <resultMap id="insertResult" type="String">
        <result property="productId" column="productId" />
    </resultMap>
 
    <select id="getProductList" resultType="product">
        SELECT p.*, CONCAT(pm.imageDir, pm.imageName) as mainImage, pr.productPrice
        FROM product p
        LEFT JOIN product_image pm ON (p.productId = pm.imageBy AND pm.imageStatus = '대표')
        LEFT JOIN product_price pr ON (p.productId = pr.productId)
        <trim prefix="WHERE" prefixOverrides="AND|OR">
            <if test="keyword != null and keyword != ''">
                <if test="searchType == 'productName'">
                    AND productName like CONCAT('%', #{keyword}, '%')
                </if>
                <if test="searchType == 'productId'">
                    AND productId like CONCAT('%', #{keyword}, '%')
                </if>
            </if>
        </trim>
        ORDER BY productRegDate DESC
        LIMIT #{startList}, #{listSize};
    </select>
    
    <select id="getProductListCnt" resultType="int">
        SELECT count(*)
        FROM product
        <trim prefix="WHERE" prefixOverrides="AND|OR">
            <if test="keyword != null and keyword != ''">
                <if test="searchType == 'productName'">
                    AND productName like CONCAT('%', #{keyword}, '%')
                </if>
                <if test="searchType == 'productId'">
                    AND productId like CONCAT('%', #{keyword}, '%')
                </if>
            </if>
        </trim>
    </select>
    
    <select id="getProduct" resultType="hashmap">
        SELECT p.*, pr.*, CONCAT(pm.imageDir, pm.imageName) as mainImage
        FROM product p
        LEFT JOIN product_price pr ON(p.productId = pr.productId) 
        LEFT JOIN product_image pm ON (p.productId = pm.imageBy AND pm.imageStatus = '대표')
        WHERE p.productId=#{ productId }
    </select>
    
    <select id="getOptionInfo" resultType="hashmap">
        SELECT GROUP_CONCAT(DISTINCT optionColor SEPARATOR ',') as optionColorList, 
                GROUP_CONCAT(DISTINCT optionSize SEPARATOR ',') as optionSizeList
        FROM option_info
        WHERE productId=#{ productId }
    </select>
    
    <select id="getOptionList" resultMap="optionInfoResult">
        SELECT optionColor, optionSize, stockCnt
        FROM option_info
        WHERE productId=#{ productId }
    </select>
    
    <select id="getDetailImage" resultType="hashmap">
        SELECT CONCAT(imageDir, imageName) as detailImage
        FROM product_image
        WHERE imageBy=#{ productId } AND imageStatus='상세'
    </select>
    
<!-- 상품 등록 -->
    <insert id="insertProduct" parameterType="product" useGeneratedKeys="true" keyProperty="productId">
        INSERT INTO product(productId, productName, productContent, productCate, productSell) 
        VALUES(#{ productId }, #{ productName }, #{ productContent }, #{ productCate }, 'Y')
    </insert>
    
<!-- 가격 등록 -->    
    <insert id="insertPrice" parameterType="hashmap">
        INSERT INTO product_price(productId, productPrimeCost) 
        VALUES(#{ product.productId }, #{ productPrimeCost })
    </insert>
    
<!-- 옵션 등록 -->
    <insert id="insertOption" parameterType="list">
        INSERT INTO option_info(productId, optionColor, optionSize, stockCnt)
        VALUES
        <foreach collection="list" item="option" separator=",">
            (#{ option.productId }, #{ option.optionColor }, #{ option.optionSize }, #{ option.stockCnt })
        </foreach>
    </insert>
    
<!-- 이미지 등록 -->
<!--     <insert id="insertImage" parameterType="list"> -->
<!--         INSERT INTO product_image(imageId, imageName, imageDir, imageStatus, imageBy) -->
<!--         VALUES -->
<!--         <foreach collection="list" item="imvo" separator=","> -->
<!--             (#{ imvo.imageId }, #{ imvo.imageName }, #{ imvo.imageDir }, #{ imvo.imageStatus }, #{ imvo.imageBy }, ) -->
<!--         </foreach> -->
<!--     </insert> -->
 
<!-- 상품 수정 -->
    <update id="updateProduct" parameterType="product">
        UPDATE product
        SET productName=#{ productName }, productContent=#{ productContent }
        WHERE productId=#{ productId }
    </update>
    
<!-- 가격 수정 -->    
    <update id="updatePrice" parameterType="hashmap">
        UPDATE product_price
        SET productPrimeCost=#{ productPrimeCost } 
        WHERE productId=#{ product.productId }
    </update>
 
<!-- 상품상태 수정 -->
    <update id="updateStatus" parameterType="hashmap">
        UPDATE product
        SET productSell=#{ productSell }
        WHERE productId=#{ productId }
    </update>
<!-- 옵션 수정 -->
    <update id="updateOption" parameterType="list">
        UPDATE option_info
        SET 
        (productId, optionColor, optionSize, stockCnt)
        VALUES
        <foreach collection="list" item="option" separator=",">
            (#{ option.productId }, #{ option.optionColor }, #{ option.optionSize }, #{ option.stockCnt })
        </foreach>
        WHERE productId=#{ productId }
    </update>
    
<!-- 옵션 삭제 -->
    <delete id="deleteOption">
        DELETE FROM option_info WHERE productId=#{ productId }
    </delete>
    
<!-- 상품가격 삭제 -->
    <delete id="deletePrice">
        DELETE FROM product_price WHERE productId=#{ productId }
    </delete>
    
<!-- 상품 삭제 -->
    <delete id="deleteProduct">
        DELETE FROM product WHERE productId=#{ productId }
    </delete>
    
<!-- 이미지 수정 -->
<!--     <update id="updateImage" parameterType="list"> -->
<!--         UPDATE product_image
            SET 
            (imageId, imageName, imageDir, imageStatus, imageBy) -->
<!--         VALUES -->
<!--         <foreach collection="list" item="imvo" separator=","> -->
<!--             (#{ imvo.imageId }, #{ imvo.imageName }, #{ imvo.imageDir }, #{ imvo.imageStatus }, #{ imvo.imageBy }, ) -->
<!--         </foreach> -->
<!--     </update> -->
</mapper>

 

 

6. registerProduct.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WeatherWear 관리자</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 
<!-- Font Awesome -->
<link href="resources/admin/AdminLTE/plugins/fontawesome-free/css/all.min.css" rel="stylesheet">
<!-- Theme style -->
<link href="resources/admin/AdminLTE/dist/css/adminlte.min.css" rel="stylesheet">
<!-- dropZone -->
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css"/>
<link rel="stylesheet" href="resources/util/css/dropzone.css"/>
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<style>
    #option-div { display: none;}
</style>
</head>
<body class="hold-transition sidebar-collapse layout-top-nav">
    <div class="wrapper">
        <%@ include file="../header.jsp" %>
    
        <div class="content-header">
            <section class="content-header">
                <div class="container">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1>상품 등록</h1>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item"><a href="main.mdo">메인</a></li>
                                <li class="breadcrumb-item active">상품 등록</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </section>
            <section class="content">
                <div class="container">
                    <div class="row">
                        <div class="card card-primary" style="width:48%;">
                            <div class="card-header">
                                <h3 class="card-title">Product</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <h4>Information</h4>
                                <div class="form-group" id="dropzone">
                                    <form action="https://httpbin.org/post" class="dropzone needsclick" id="demo-upload">
                                        <div class="dz-message needsclick">
                                            <span class="text">
                                                <img src="resources/util/image/dropzone_camera.png" alt="Camera" />
                                                메인 이미지를 등록하세요 <br><code>DROPZONE 사용하고 싶다</code>
                                            </span>
                                            <span class="plus">+</span>
                                        </div>
                                    </form>
                                </div>
                                <div class="form-group">
                                    <label for="exampleSelectBorder">카테고리</label>
                                    <select class="custom-select form-control-border" id="exampleSelectBorder">
                                        <option value="11">OUTER</option>
                                        <option value="12">TOP</option>
                                        <option value="13">PANTS</option>
                                        <option value="14">SKIRTS</option>
                                        <option value="15">DRESS</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputBorderWidth2"> 상품명<code></code></label>
                                    <input type="text" name="productName" class="form-control form-control-border border-width-2" id="exampleInputBorderWidth2" placeholder="상품명">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputBorderWidth2"> 공급가<code> 과세율 0.1, 마진율 1.5 >> 판매가 : <span id="cost"></span></code></label>
                                    <input type="text" name="productPrimeCost" class="form-control form-control-border border-width-2" id="exampleInputBorderWidth2" placeholder="공급가" onchange="checkCost()">
                                </div>
                                <h4>Option Setting</h4>
                                <div class="form-group">
                                    <label for="exampleInputRounded0">색상<code></code></label>
                                    <input type="text" class="form-control rounded-0" id="exampleInputRounded0" name="optionColor" placeholder="블랙, 화이트">
                                    <input type="hidden" name="optionColorList">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputRounded0">사이즈<code></code></label>
                                    <input type="text" class="form-control rounded-0" id="exampleInputRounded0" name="optionSize" placeholder="S, M, L">
                                    <input type="hidden" name="optionSizeList">
                                </div>
                                <button type="button" class="btn btn-block btn-outline-primary" id="apply-option">옵션적용</button>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <div style="width:20px;"></div>
                        <div class="card card-secondary" style="width:48%;" id="option-div">
                            <div class="card-header">
                                <h3 class="card-title">Option/Stock</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <h4>Stock</h4>
                                <div class="card-body p-0" style="min-height: 600px; height:auto;">
                                    <table class="table table-sm">
                                        <colgroup>
                                            <col width="100px"/>
                                            <col width="100px"/>
                                            <col width="100px"/>
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th>색상</th>
                                                <th>사이즈</th>
                                                <th>수량</th>
                                            </tr>
                                        </thead>
                                        <tbody class="option-stock">
                                            
                                        </tbody>
                                    </table>
                                </div>
                                <div class="input-group mb-3">
                                    <!-- /btn-group -->
                                    <input type="number" class="form-control" value="10" name="allStock">
                                    <input type="hidden" class="form-control" name="stockList">
                                    <div class="input-group-prepend">
                                        <button type="button" class="btn btn-primary" id="applyStockAll">재고 일괄 적용</button>
                                    </div>
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                    <div class="card card-outline card-primary">
                        <div class="card-header">
                            <h3 class="card-title">상세 내용</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div id="summernote"></div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
                <div class="input-group-prepend">
                    <button type="button" class="btn btn-primary" onclick="submit('register')">SUBMIT</button>
                </div>
            </section>
        </div>        
        <%@ include file="../footer.jsp" %>
    </div>
<!-- jQuery -->
<script src="resources/admin/AdminLTE/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="resources/admin/AdminLTE/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Bootstrap 4 -->
<script src="resources/admin/AdminLTE/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Summernote -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
 
<script src="resources/admin/js/manageProduct.js"></script>
<script src="resources/admin/js/uploadImage_registerProduct.js"></script>
</body>
</html>

 

 

 

7. productInfo.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WeatherWear 관리자</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 
<!-- Font Awesome -->
<link href="resources/admin/AdminLTE/plugins/fontawesome-free/css/all.min.css" rel="stylesheet">
<!-- Theme style -->
<link href="resources/admin/AdminLTE/dist/css/adminlte.min.css" rel="stylesheet">
<!-- dropZone -->
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css"/>
<link rel="stylesheet" href="resources/util/css/dropzone.css"/>
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
</head>
<body class="hold-transition sidebar-collapse layout-top-nav">
    <div class="wrapper">
        <%@ include file="../header.jsp" %>
        <c:if test="${ data eq 'nodata' }">
            <script>
                alert("잘못된 접근입니다. 상품 관리 페이지로 이동합니다.");
                location.href="productList.mdo";
            </script>
        </c:if>
        <div class="content-header">
            <section class="content-header">
                <div class="container">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1>상품 상세</h1>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item"><a href="main.mdo">메인</a></li>
                                <li class="breadcrumb-item active">상품 상세</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </section>
            <section class="content">
                <div class="container">
                    <div class="row">
                        <div class="card card-primary" style="width:48%;">
                            <div class="card-header">
                                <h3 class="card-title">Product</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <h4>Information</h4>
                                <div class="form-group" id="dropzone">
                                    <form action="https://httpbin.org/post" class="dropzone needsclick" id="demo-upload">
                                        <div class="dz-message needsclick">
                                            <img src="${ product.mainImage }" style="width: 150px;">
                                            <span class="text">
                                                메인 이미지를 수정하려면 클릭하세요 <br><code>DROPZONE 사용하고 싶다</code>
                                            </span>
                                            <span class="plus">+</span>
                                        </div>
                                    </form>
                                </div>
                                <div class="form-group">
                                    <label for="exampleSelectBorder">카테고리</label>
                                    <select class="custom-select form-control-border" id="exampleSelectBorder">
                                        <option value="11" <c:if test="${product.productCate == 11}">selected="selected"</c:if>>OUTER</option>
                                        <option value="12" <c:if test="${product.productCate == 12}">selected="selected"</c:if>>TOP</option>
                                        <option value="13" <c:if test="${product.productCate == 13}">selected="selected"</c:if>>PANTS</option>
                                        <option value="14" <c:if test="${product.productCate == 14}">selected="selected"</c:if>>SKIRTS</option>
                                        <option value="15" <c:if test="${product.productCate == 15}">selected="selected"</c:if>>DRESS</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <input type="hidden" name="productId" value="${ product.productId }">
                                    <label for="exampleInputBorderWidth2"> 상품명<code></code></label>
                                    <input type="text" name="productName" class="form-control form-control-border border-width-2" id="exampleInputBorderWidth2" placeholder="상품명" value="${ product.productName }">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputBorderWidth2"> 공급가<code> 과세율 0.1, 마진율 1.5 >> 판매가 : <span id="cost"></span></code></label>
                                    <input type="text" name="productPrimeCost" class="form-control form-control-border border-width-2" id="exampleInputBorderWidth2" placeholder="공급가" onchange="checkCost()" value="${ product.productPrimeCost }">
                                </div>
                                <h4>Option Setting</h4>
                                <div class="form-group">
                                    <label for="exampleInputRounded0">색상<code></code></label>
                                    <input type="text" class="form-control rounded-0" id="exampleInputRounded0" name="optionColor" placeholder="블랙, 화이트" value="${ optionInfo.optionColorList }">
                                    <input type="hidden" name="optionColorList">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputRounded0">사이즈<code></code></label>
                                    <input type="text" class="form-control rounded-0" id="exampleInputRounded0" name="optionSize" placeholder="S, M, L" value="${ optionInfo.optionSizeList }">
                                    <input type="hidden" name="optionSizeList">
                                </div>
                                <button type="button" class="btn btn-block btn-outline-primary" id="apply-option">옵션수정</button>
                            </div>
                            <!-- /.card-body -->
                        </div><div style="width:2%"></div>
                        <div class="card card-secondary" style="width:48%;" id="option-div">
                            <div class="card-header">
                                <h3 class="card-title">Option/Stock</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <h4>Stock</h4>
                                <div class="card-body p-0" style="min-height: 600px; height:auto;">
                                    <table class="table table-sm">
                                        <colgroup>
                                            <col width="100px"/>
                                            <col width="100px"/>
                                            <col width="100px"/>
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th>색상</th>
                                                <th>사이즈</th>
                                                <th>수량</th>
                                            </tr>
                                        </thead>
                                        <tbody class="option-stock">
                                            <c:forEach items="${ optionList }" var="option">
                                                <tr>
                                                    <td>${ option.optionColor }</td>
                                                    <td>${ option.optionSize }</td>
                                                    <td><input type='number' class='custom-select form-control-border' name='stCnt' id="stCnt${ option.optionColor }${ option.optionSize }"  value="${ option.stockCnt }"></td>
                                                </tr>
                                            </c:forEach>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="input-group mb-3">
                                    <!-- /btn-group -->
                                    <input type="number" class="form-control" value="10" name="allStock">
                                    <input type="hidden" class="form-control" name="stockList">
                                    <div class="input-group-prepend">
                                        <button type="button" class="btn btn-primary" id="applyStockAll">재고 일괄 수정</button>
                                    </div>
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                    <div class="card card-outline card-primary">
                        <div class="card-header">
                            <h3 class="card-title">상세 내용</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="detailImage">
                                <c:forEach var="image" items="${ detailImageList }">
                                    <img src="${ image.detailImage }" style="width:200px;">
                                </c:forEach>
                            </div><br>
                            <div id="summernote">${ product.productContent }</div>
                        </div>
                        <!-- /.card-body -->
                      </div>
                    <div class="input-group-prepend">
                        <button type="button" class="btn btn-primary" onclick="submit('modify')">수정하기</button>&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn btn-outline-warning" onclick="location.href='productList.mdo'">취소하기</button>&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn btn-outline-danger" onclick="deleteProduct()">삭제하기</button>
                        <script>
 
                        </script>
                    </div>
                </div>
            </section>
        </div>        
        <%@ include file="../footer.jsp" %>
    </div>
<script>
 
</script>
<!-- jQuery -->
<script src="resources/admin/AdminLTE/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="resources/admin/AdminLTE/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Bootstrap 4 -->
<script src="resources/admin/AdminLTE/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Summernote -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
 
<script src="resources/admin/js/manageProduct.js"></script>
<script src="resources/admin/js/uploadImage_registerProduct.js"></script>
</body>
</html>

 

 

 

>> 상품 등록 실행  

-- 현재 DROPZONE 기능을 전부 구현하지 못해 이미지를 제외한 다른 기능만 먼저 작업

 

>>> 옵션 적용시

--- 재고 일괄 적용이나 개별 수정 가능

 

>>> 상세내용 입력

 

>>> 등록 성공시 confirm 알림창 뜸

확인 클릭시 : 상품 상세 페이지로 이동

취소 클릭시: 상품 관리페이지로 이동 

 

 

>>> 확인 릭

 

 

>>> 바로 상품 정보 변경 가능

 

 

>>> 확인클릭

 

 

>>> 변경된 내용 확인

 

>>> 삭제 클릭시 한 번 더 물어보기 

 

 

>>> 확인 클릭시 상품 삭제됨

 

reProject_29_관리자 주문 관리 페이지