[Spring] 쇼핑몰 판매자 기능 - 다중 옵션, 옵션 조합, 옵션 별 수량...

[Spring] 쇼핑몰 판매자 기능 - 다중 옵션, 옵션 조합, 옵션 별 수량...

상품 업로드 기능중 옵션별 수량을 입력할 수 있도록 구현해 봤습니다.

사이즈, 색상, 무게 등 의 2종류의 옵션을 조합해서 도출된 옵션에 각각의 수량을 넣을 수 있도록 ajax를 이용하여 입력할 수 있도록 하려고 합니다.

결과화면

1. 옵션명, 옵션 입력 창

2. 조합된 옵션 출력 및 옵션 별 수량칸에 수량 입력

3. DB에 입력된 값 확인

개발화면

1. 입력 jsp

옵션 입력 부분

1 2 3 4 5 6 7 8 9 10 11 12 13 : : Colored by Color Scripter cs

2. 옵션 js

유효성 검사 및 ajax

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 31 32 33 // 옵션 Ajax function add_item(){ // 옵션을 입력하였을 경우 if($("#opt_1stname").val()!=""){ var option1name = $("#option1name").val(); var option1val = $("#option1val").val(); var option2name = $("#option2name").val(); var option2val = $("#option2val").val(); $.ajax({ url : '/optioncom', // 요청 할 주소 type : 'post', dataType : 'text', data : { "option1name" : option1name, "option1val" : option1val, "option2name" : option2name, "option2val" : option2val, }, success : function(data) { // 요청 완료 시 $('#field').html(data); // id값이 field인 태그에 결과값을 받아와서 출력한다. }, error :function(xhr,status,error){ console.log("code:"+xhr.status+"

"+"message:"+xhr.responseText+"

"+"error:"+error); alert(xhr.status); } }); // 옵션을 입력하지 않았을 경우 }else{ alert("옵션값을 입력해 주세요."); return false; } } Colored by Color Scripter cs

3. 옵션 ajax controller

입력한 값은 String으로 받아온 뒤에 split(",")로 입력한 값을 나눠서 배열에 넣는다.

옵션을 1개 입력할경우에는 바로 "optioncom"에 값을 넣어주고,

옵션을 2개 입력했을 경우에는 각 배열에 들어있는 값을 이중for문으로 조합해서 "optioncom"에 넣어준다.

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 31 32 // 옵션 조합하기 @RequestMapping(value = "/optioncom") public String optioncom(HttpServletRequest request, Model model) throws Exception { System.out.println("optioncom"); String option1name = request.getParameter("option1name"); String option1val = request.getParameter("option1val"); String option2name = request.getParameter("option2name"); String option2val = request.getParameter("option2val"); // 옵션을 1개만 입력한 경우 if (option2name == "" || option2val == "") { String[] optioncom = option1val.split(","); model.addAttribute("option1name", option1name); model.addAttribute("optioncom", optioncom); // 옵션을 2개 입력한 경우 } else { String[] option1valarr = option1val.split(","); String[] option2valarr = option2val.split(","); String[] optioncom = new String[option1valarr.length * option2valarr.length]; int k = 0; // 옵션섞기 for (int i = 0; i < option1valarr.length; i++) { for (int j = 0; j < option2valarr.length; j++) { optioncom[k] = option1valarr[i] + " - " + option2valarr[j]; k++; } } model.addAttribute("option1name", option1name); model.addAttribute("option2name", option2name); model.addAttribute("optioncom", optioncom); } return "seller/optioncom"; } Colored by Color Scripter cs

4. 옵션조합 jsp

jstl의 c:foreach 태그를 사용하여

전달받은 배열의 크기만큼 조합된 옵션과 수량을 입력할 수 있는 input태그를 생성해 준다.

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 31 32 33 34 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> Insert title here ${option1name} - ${option2name} 수량 Colored by Color Scripter cs

5. 업로드 controller

옵션을 안쓸경우(단일옵션), 옵션을 1종류만 쓸경우, 옵션을 2종류 쓸 경우 총 3가지경우를 고려해야한다.

1) 옵션을 2종류 작성했을 경우

복수의 input태그가 id값이 모두 동일한 경우

모든 input태그의 value값은 하나의 String객체로 받을 수 있다. ex. ("95-블랙","95-네이비","100-블랙",...)

그렇기 때문에 split(",")로 분리해서 다시 배열에 넣어주는 작업이 필요하다.

또한 기존에 작성한 옵션값을 "95-블랙" 형태로 받았기 때문에

이또한 split("-")로 분리하는 작업이 필요하다.

결국 '첫번째옵션값', '두번째옵션값', '수량값' 총 3개의 배열을 이용하여 list 객체에 값을 넣어준 다음

map객체에 담아서 mapper까지 전달해준다.

예를 들어 첫번째 list에는 {53(상품번호), 사이즈, 95, 색상, 블랙, 12} 형태로 담기게 된다.

2) 옵션을 1종류 작성했을 경우

옵션을 2종류 작성했을 경우와 동일하게

받아온 input태그의 value값을 split(",")로 분리해서 배열에 넣어준다.

'첫번째 옵션값', '수량값' 2개의 배열을 이용하여 list 객체에 값을 넣어준 다음

map객체에 담아서 mapper까지 전달해준다.

예를 들어 첫번째 list에는 {53(상품번호), 사이즈, 95, null, null, 12} 형태로 담기게 된다.

3) 옵션을 작성하지 않은 경우(단일옵션)

옵션을 작성하지 않은 경우에는 상품번호와 입력한 수량만 optionVO객체에 담아서 mapper에 전달한다.

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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 // 옵션을 작성한 경우 if (optioncom != null) { String option1name = request.getParameter("option1name"); String option1val = request.getParameter("option1val"); String option2name = request.getParameter("option2name"); String option2val = request.getParameter("option2val"); // 옵션을 2개 작성한 경우 if(!option2name.isEmpty() || !option2val.isEmpty()) { // 받아온 옵션값 쪼개기 String[] optioncomarr = optioncom.split(","); // 쪼갠 옵션을 받을 배열 String[] opcom = new String[2]; // 옵션별 수량 받아오기 String[] optioncountarr = optioncount.split(","); //list에 값 담아서 service로 넘기기 List list = new ArrayList(); // 각 배열에 값 분배하기 for(int i=0; i map = new HashMap(); map.put("list", list); //map에 list담기 optionService.insertOptions(map); //옵션을 1개 작성한 경우 }else{ // 받아온 옵션값 쪼개기 String[] optioncomarr = optioncom.split(","); // 옵션별 수량 받아오기 String[] optioncountarr = optioncount.split(","); //list에 값 담아서 service로 넘기기 List list = new ArrayList(); // 각 배열에 값 분배하기 for(int i=0; i map = new HashMap(); map.put("list", list); //map에 list담기 optionService.insertOptions(map); } // 옵션을 작성하지 않은경우 }else { System.out.println("옵션을 작성하지 않음"); String opt_count = request.getParameter("opt_count"); OptionVO optionvo = new OptionVO(); optionvo.setGds_num(gds_num); optionvo.setOpt_count(Integer.parseInt(opt_count)); optionService.insertOption(optionvo); } Colored by Color Scripter cs

6. 옵션값 저장 mapper

service와 DAO는 단순하게 요청과 값전달만 하면 되므로 생략한다.

1) 여러옵션 insert(1종 또는 2종류의 옵션을 입력한 경우)

map 형태로 값을 넘겨줬기 때문에 parameterType에는 "java.util.Map"으로 적어준다.

MyBatis의 동적쿼리문 'foreach'를 이용해 다중insert를 해준다. 사용한 foreach의 지원태그는 아래와 같다.

item : 전달받은 값의 데이터형, 보통 alias(VO, DTO) 명으로 쓴다.

collection : 전달받은 형태. List 또는 Array 만 가능하다.

separator : 구분기호. foreach문이 반복하여 실행될 때 그 사이에 출력될 구분기호.

2) 옵션이 없는경우 insert(단일옵션)

전달받은 상품번호와 수량을 insert한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 INSERT INTO project.option (gds_num, opt_1stname, opt_1stval, opt_2ndname, opt_2ndval, opt_count) VALUES (#{option.gds_num}, #{option.opt_1stname}, #{option.opt_1stval}, #{option.opt_2ndname}, #{option.opt_2ndval}, #{option.opt_count}) INSERT INTO project.option (gds_num, opt_count) VALUES (#{gds_num}, #{opt_count}) Colored by Color Scripter cs 다중옵션 입력의 경우 찾아볼 수 없어서 직접 주먹구구식으로 만들었기 때문에 매우 조잡합니다. 이상이 있거나 더 나은방법이 있다면 댓글로 알려주세요.

from http://issaac.tistory.com/6 by ccl(A) rewrite - 2021-12-09 21:01:49