Project/TeamProject (37) 썸네일형 리스트형 [팀플 - Travel Jeju] End 최종 프로젝트가 끝이 났다. 3주간 5명의 팀원들과 협업하면서 많은 것들을 배운 것 같다 간트차트를 만들어서 계획을 수립하고 한걸음 한걸음 나아가면서 무사히 끝낼 수 있었다 프로젝트가 끝나기 2일 전부터 우리는 PPT를 만들면서 그동안 해왔던 기능들을 정리하였다 https://github.com/JejuislandToyProject/JejuIsland/blob/dev/Project_travel_jeju_ppt.pdf GitHub - JejuislandToyProject/JejuIsland: 제주도 홍보 토이 프로젝트 제주도 홍보 토이 프로젝트. Contribute to JejuislandToyProject/JejuIsland development by creating an account on GitHub.. [팀플 - Travel Jeju] Usecase & ERD 비회원 여행지 목록 조회 여행지 검색 게시물 검색 게시물 상세 조회 게시물 좋아요 게시물 목록 조회 회원 비회원의 모든 기능 가능 여행 경로 저장 게시물 작성 저장된 여행 경로 조회 작성한 게시글 조회 관리자 방문자 수 확인 회원관리 - 회원 조회 및 게시물 작성 권한 사이트 관리 - 메인 수정 총 테이블 수 : 10개 Admin, Introduce, mycourse, CourseDetail, visit, main_info, famous_restaurant, Locations, User, Tourist_Spot [팀플 - Travel Jeju] 18th course - Board Like Function [ 오늘 할 일 ] 게시판 좋아요 기능 구현 [ 전체적인 흐름 ] 맛집 게시판 Jsp에서 ajax로 좋아요를 카운트할 Id값을 컨트롤러로 전송 컨트롤러에서 ibatis문법을 이용하여 클릭 한 카드의 좋아요 데이터를 update 함 update 한 카드의 정보를 select문으로 가져온 후 jsp로 다시 전송 jsp에서 넘어온 데이터를 innerHTML로 숫자를 카운트해준다 결과물 맨 처음으로 jsp에서는 ajax의 GET 방식으로 좋아요가 눌린 카드의 spotId를 파라미터 값으로 RestController로 넘겨준다 RestController에서는 넘겨받은 id값을 ibatis 매개변수로 사용하여 addLike sql문을 실행한다 id값이 일치하는 DB 데이터의 좋아요 숫자를 +1 증가시켜서 updat.. [팀플 - Travel Jeju] 17th course - Associate Polygon-Board [ 오늘 할 일 ] 폴리곤과 게시판 연동하기 [ 전체적인 흐름 ] 폴리곤 지역 클릭 시 해당 지역 이름을 컨트롤러로 전송 전달받은 지역 이름을 모델에 실어 컨트롤러에서 맛집 게시판으로 전송 jstl 문법을 이용하여 전달받은 모델이 있을때와 없을 때를 구분 폴리곤을 통해 맛집게시판으로 진입하였을 때는, 지역 이름을 검색바에 넣은 후 자동 클릭 실행 컨트롤러-ibatis를 이용하여 해당지역에 있는 맛집들만 불러옴 jsp에서 전달받은 Json 데이터를 카드형식으로 만들어 웹페이지에 띄워줌 결과물 메인화면에 있는 폴리곤 클릭 시 해당지역에 관한 모달 창이 뜨게 되고, 모달 창에 위치한 상세보기 버튼을 클릭하면 URL을 이용하여 해당 지역 이름을 담아서 전송한다 컨트롤러에서는 클릭한 지역이름을 변수명이 polyg.. [팀플 - Travel Jeju] 16th course - Board Search [ 오늘 할 일 ] 카드 게시판 검색 기능 구현 [ 전체적인 흐름 ] 코드 분석 (다른 조원이 만들던 페이지) ajax로 데이터 RestController로 보내기 검색한 내용으로 DB 조회하여 데이터 받아오기 jsp에서 카드로 그려서 페이지에 띄우기 처음으로 한 일은 jsp에서 컨트롤러로 데이터를 전송하는 일이다 검색 버튼과 검색한 내용을 각각 searchBtn, searchValue로 불러와서 버튼에 클릭이벤트를 부여하였다 검색 버튼을 클릭 시 첫 번째로는 카드들이 담겨있는 contents-body를 모두 비워준다 그리고 searchRequest 함수를 실행시키는데 이때 매개변수를 검색할 내용으로 한다 함수는 ajax의 GET방식으로 파라미터값으로 검색할 내용을 담아 전송한다 컨트롤러에서는 jsp에서.. [팀플 - Travel Jeju] 15th course - Travel Course XII [ 오늘 할 일 ] 여행경로 모달 구현 [ 전체적인 흐름 ] Oven 웹 페이지를 이용하여 모달에 사용할 이미지들 만들기 Carousel를 사용하여 모달 슬라이드식으로 구현 맵 위에 위치한 이용방법 버튼을 클릭 시 모달 형식으로 이용방법에 대한 설명이 나오는데, Oven을 사용해서 이용방법 이미지를 만들어 슬라이드식으로 구현할 예정이다 이미지는 Oven 페이지에서 쉽게 구현할 수 있었다 https://ovenapp.io/ OvenApp.io Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공) ovenapp.io https://getbootstrap.com/docs/5.0/components/carousel/ Carousel A slideshow component for.. [팀플 - Travel Jeju] 14th course - Travel Course XI [ 오늘 할 일 ] 경로 저장 클릭 시 로그인한 세션 값을 이용하여 해당 유저의 마이 경로 DB에 저장한 여행 경로 추가 [ 전체적인 흐름 ] DB 설계 JSP에서 모달 값 Controller에 필요한 데이터(제목/이미지) 보내기 Controller에서 받은 데이터를 통해 DB에 INSERT 비로그인시 로그인 페이지로 redirect 여행경로를 모두 선택하고 여행경로 저장 버튼을 클릭 시 위 사진과 같이 모달 창이 뜨면서 선택한 여행경로를 모두 보여준다 이후에 사용자가 저장하기 버튼을 클릭 시 DB에 경로를 리스트 형식으로 저장해주어야 한다 (사용자가 마이페이지에서 저장한 여행경로를 볼 때 DB에 저장한 여행경로를 가져와서 보여주는 형식) 테이블은 2개를 만들었다 mycourse 테이블은 PK 값으로 여.. [팀플 - Travel Jeju] 13th course - Travel Course X [ 오늘 할 일 ] 선택한 카드 Drag & Drop 기능 구현 맵 마커 이미지 변경 & 사이즈 축소 오버레이 카드 순서 기입 Drag & Drop 기능 실행 시 마커/오버레이/카드 순서 해당사항에 맞게 변경 오늘 한 결과물 동영상 첨부 Drag & Drop Js 파일이다 사실 상 드로그앤 드롭 기능은 코드 3줄만 있으면 기능 구현은 가능하다 맨 윗줄 $(function()) , .sortable , 맨 아랫 줄 disableSelection() 하지만, 드로그앤 드롭 기능 후에 맵에 찍혀있는 마커들과 오버레이, 그리고 나중에 모달에 쓸 카드들의 타이틀을 담은 names 배열 등 추가해야 할 코드들이 많았다 stop 함수는 드로그앤 드롭을 한 후에 함수를 실행시키는 것이다 모든 순서가 바뀌기 때문에 좌표.. 이전 1 2 3 4 5 다음
