플래너 작성폼 ③ 작성한 일정 INSERT 시켜주기,,

ㅋ,ㅋ.....작성한 PLAN과 PLAN에 딸려있는 PLACE들을 INSERT 시켜주기만 하면 되니 금방 끝나겠지라고 생각했다ㅋ

처음 해보는 부분이라 조금 오래걸렸다,,!ㅎ

 

FORM 안에 들어있는 정보는 하나의 Plan Vo + 여러 개의 Place Vo 들이었다.

PlaceList를 만들어서 list의 size()만큼 insert를 해야했다.

 

방법은 2가지가 있었다. (구글링으로 찾은 것과 강사님이 알려주신 거)

① vo에 List형식으로 선언해주고, getter/setter만듦
    form의 name 속성에 인덱스를 부여하여 name=placeList[0].name 이런식으로

   (참고 블로그)

https://mchch.tistory.com/80   

[Spring] vo 여러개 전달하기. LIST<VO> vo를 list 로 넘기기 / 받기

mustache로 하다보니 동적으로 생성되는 input속성의 name을 바꿔줬어야 해서

다ㅏㅏㅏ javasciprt로 다시 name을 설정해줘야 했는데,

아래처럼 하면 할 수 있었지만, js로 name설정 해주다가 뭐하고 있지,, 싶어서 그냥 2번 방법으로 했다. ㅋㅅㅋ

for (let i = 0; i < $('form.place-form div.select-place').length; i++) {
    let name = 'attractionList[' + i + '].name';
			:
    let order = 'attractionList[' + i + '].order';
    

    $('form.place-form div.select-place:nth-child(' + (i+1) + ') .name').attr('name', name);
			:
    $('form.place-form div.select-place:nth-child(' + (i+1) + ') .order').attr('order', order);
}

 

② name속성은 공통되게 놔두고, Controller에서 배열로 받기

List 만들어서 받아온 배열의 길이만큼 장소VO를 만들어서 추가해줬다.

그리고 Service로 Plan과 PlaceList 넘겨줌

public String insertPlan(Model model, HttpServletRequest request, PlanVo plan
           , @RequestParam("name") String[] names, @RequestParam("memo") String[] memos
           , @RequestParam("loc_x") String[] loc_xs, @RequestParam("loc_y") String[] loc_ys
           , @RequestParam("photo_path") String[] photo_paths, @RequestParam("day") Integer[] days
           , @RequestParam("order") Integer[] orders) {

 					:
        List<AttractionVo> placeList = new ArrayList<>();
        for (int i = 0; i < names.length; i++) {
            AttractionVo place = new AttractionVo();
            place.setName(names[i]);
            place.setMemo(memos[i]);
            place.setLoc_x(loc_xs[i]);
            place.setLoc_y(loc_ys[i]);
            place.setPhoto_path(photo_paths[i]);
            place.setDay(days[i]);
            place.setOrder(orders[i]);

            placeList.add(place);
        }

        String new_plan_code = planService.insertPlan(plan, placeList);
        
					:
    }
    return view;
}

 

 

이렇게 경주 2박 3일 플랜을 짜고, <저장> 버튼을 누르면,,,!!!

 

 

 

<저장>버튼을 누르면, 작성한 일정의 상세보기 페이지로 이동한다.

상세보기 페이지 헤더 CSS가 구리기느 ㄴ한데,,,,ㅎ 

아래 사진처럼 일자별 경유 순서대로 장소이름, 메모, 사진 모두 잘 뜬다! 

 

일정보기 목록에서도 확인 가넝~ (작성일 DESC로 정렬)