[팀플 - Travel Jeju] 14th course - Travel Course XI

[ 오늘 할 일 ]

• 경로 저장 클릭 시 로그인한 세션 값을 이용하여 해당 유저의 마이 경로 DB에 저장한 여행 경로 추가 

[ 전체적인 흐름 ]

• DB 설계
• JSP에서 모달 값 Controller에 필요한 데이터(제목/이미지) 보내기 
• Controller에서 받은 데이터를 통해 DB에 INSERT 
• 비로그인시 로그인 페이지로 redirect 

---

여행경로를 모두 선택하고 여행경로 저장 버튼을 클릭 시 

위 사진과 같이 모달 창이 뜨면서 선택한 여행경로를 모두 보여준다

이후에 사용자가 저장하기 버튼을 클릭 시 DB에 경로를 리스트 형식으로 저장해주어야 한다

(사용자가 마이페이지에서 저장한 여행경로를 볼 때 DB에 저장한 여행경로를 가져와서 보여주는 형식)

테이블은 2개를 만들었다 

mycourse 테이블은 PK 값으로 여행경로 아이디를 주었고

누구의 여행경로인지 알기 위해서 user_name 도 칼럼 값으로 주었다 

 

courseDetail 테이블은 사용자가 저장한 여행경로를 모두 저장하는 테이블인데,

여행경로 아이디, 여행경로 순서, 제목, 이미지 값을 테이블에 넣어주었다 

 

여행경로 아이디는 시퀀스를 이용해 중복되지 않게 구성하였다 

처음으로는 jsp에서 모달의 저장하기 버튼을 클릭했을 때,

컨트롤러로 데이터를 넘겨주어야 했다 

 

GET,POST 방식 중 고민하였는데 

GET 방식으로 파라미터 값으로 보낼 때 이미지 값 (../resources/~~) 들의 '/'가 URL에서 혼동이 일어나는 것 같았다

 

결론적으로는 POST 방식으로 데이터를 전송하였는데,

querySelectorAll를 사용하여 모달에 있는 클래스를 가져와 imagePath 변수에 넣어주었다 

 

반복문을 통해 imagePath 안에 들어있는 여러 이미지들의 src (주소)만 checker 변수에 담아주었고

담은 변수들을 images 배열에 넣어주었다 

 

그리고 form을 구성하여 

기존에 있던 names 배열 (각 여행경로의 제목) 과, images (각 여행경로의 이미지 주소)를 컨트롤러로 보내주었다 

컨트롤러에서는 맨 처음 비로그인한 유저를 session 값으로 걸러 로그인 페이지로 redirect 시켰다 

 

그리고 course 모델에 유저 아이디를 넣고 mapper를 통해 DB에 추가해주었다 

 

그 후에는 images와 names를 split하여 각각의 배열에 넣은 후에

반복문을 통해 courseDetail 모델에 실어주었다

실은 결과물들은 다시 mapper를 통해 DB에 저장하는 형식으로 구성하였다 

XML에서는 INSERT문이 실행되기 전에 (BEFORE 이용)

DB에서 가장 높은 여행경로 아이디를 가져왔다 

그리고 그 후에 그 여행경로 아이디에 여행경로들을 순서대로 넣어주었다