[팀플 - Travel Jeju] 17th course - Associate Polygon-Board

[ 오늘 할 일 ]

• 폴리곤과 게시판 연동하기 

[ 전체적인 흐름 ]

• 폴리곤 지역 클릭 시 해당 지역 이름을 컨트롤러로 전송 
• 전달받은 지역 이름을 모델에 실어 컨트롤러에서 맛집 게시판으로 전송
• jstl 문법을 이용하여 전달받은 모델이 있을때와 없을 때를 구분 
• 폴리곤을 통해 맛집게시판으로 진입하였을 때는, 지역 이름을 검색바에 넣은 후 자동 클릭 실행 
• 컨트롤러-ibatis를 이용하여 해당지역에 있는 맛집들만 불러옴 
• jsp에서 전달받은 Json 데이터를 카드형식으로 만들어 웹페이지에 띄워줌 

---

 

결과물

 

메인화면에 있는 폴리곤 클릭 시 해당지역에 관한 모달 창이 뜨게 되고,

모달 창에 위치한 상세보기 버튼을 클릭하면 URL을 이용하여 해당 지역 이름을 담아서 전송한다 

컨트롤러에서는 클릭한 지역이름을 변수명이 polygonSearch인 모델에 담아 맛집 게시판으로 return시킨다 

맛집게시판 Jsp에서는 jstl문법을 이용하여 

넘어온 데이터(ploygonSearch)가 있다면 input박스에 그 값을 넣어놓고 

그렇지 않다면 input값을 공백으로 지정한다 

 

맛집 게시판은 폴리곤을 통해서만 오는 것이 아니고, 다른 게시판 버튼을 이용해서도 진입할 수 있기 때문에

모델의 유/무를 통해 어디를 통해 들어왔는지 판별하기 위함이다 

웹페이지가 로딩되면 맨 처음으로 검색바의 value값 즉 검색바가 비어있는지 체크한다 

만약에 공백이라면 기존대로 모든 맛집들을 카드 형식으로 띄워주고,

검색바가 빈 값이 아니라면 (폴리곤을 통해 지역 이름이 채워져 있다면) 

검색 버튼을 강제 클릭시킨다

검색 버튼이 실행되면, 맨 처음으로 카드들이 담겨있는 #body의 모든 내용을 비워주고 searchRequest 함수를 실행시킨다 

이 함수는 ajax의 GET방식을 이용하여 검색바의 value를 파라미터 값으로 전송한다 

이렇게 되면 맛집에서는 검색하는 기능이 2개가 된다 

기존대로 맛집 이름들을 검색할 수 있는 기존 기능과, 

폴리곤을 통해서 넘어온 지역 이름으로 해당 지역의 맛집들을 불러오는 기능이 있다 

 

그렇기 때문에, 컨트롤러에서 전달받는 데이터는 

맛집 이름 or 지역 이름이다

 

우리는 제주도를 총 12개의 행정구역으로 나누었기 때문에 String 배열에 12개의 행정구역들을 담고

반복문과 if 조건문을 이용하여 어떤 sql문을 실행할지 정하였다 

 

폴리곤을 통해 진입한 맛집 게시판은 polygonSearch sql문을 실행시켜 

넘어온 값과 address(맛집 지역 이름)이 동일한 데이터만 전송시킨다 

 

jsp에서는 json 형식으로 들어온 데이터들을 기존에 있는 함수들을 이용하여

카드 형식으로 만들어 웹페이지에 띄워주었다