오늘로서 맡은 페이지를 95% 정도(?) 마무리했다.
지금까지 해오면서 어려웠던 것들이랑 기억해야 할 것들을 정리해야겠다.
다 했다고 손 놓고 있으면 나중에 남는 게 없는 거 같다. 아는 것도 한 번 더 정리하다 보면 기억에 잘 남으니까 정리 시작!
전체적인 흐름을 먼저 잡고 가는게 보기도 편하고 이해하기 쉬우니까 흐름 먼저 잡기!
먼저 페이지 구성은 이렇게 되어있다.
1. DB저장 흐름
가장 먼저 DB저장 흐름먼저 잡아놓고 가면 편할 것 같다.
모든 API는 공공데이터포털 → 한국관광공사_국문_관광정보서비스_GW를 이용했다.
(https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15101578)
나는 여기서
지역코드 조회 → 지역기반 관광정보조회 → 공통정보 조회 + 이미지 정보 조회 → 모든 결과값 DB 저장
흐름으로 구성했다.
처음부터 공통정보와 이미지 정보를 조회하면 될 줄 알았지만
공통정보,이미지 정보에서 모두 필수값으로 contentID값을 요구하고 있었기 때문에
일단 지역코드를 얻고 → 지역기반 관광정보조회에서 지역코드를 넣으면 →
contentID값을 받아서 → 공통정보와 이미지정보를 얻으려고 했다.
지역코드는 그냥 적어놓고 첫 화면에서 지역코드를 제공했고, 해당하는 지역코드를 검색하면 contentID를 가져오게 했다.
for (int i = 0; i < itemsArray.length(); i++) {
JSONObject item = itemsArray.getJSONObject(i);
Map<String, String> itemData = new HashMap<>();
itemData.put("title", item.optString("title", "정보 없음")); // 제목
itemData.put("addr1", item.optString("addr1", "정보 없음")); // 주소
itemData.put("areacode", item.optString("areacode", "정보 없음")); // 지역 코드
itemData.put("contentid", item.optString("contentid", "정보 없음")); // 콘텐츠ID
itemData.put("firstimage", item.optString("firstimage", "정보 없음")); // 이미지원본
itemList.add(itemData);
}
/areaBasedList1(지역기반 관광정보조회)을 사용했고 여기서 제공하는 값들(title,addr1,areacode ... )을 itemList에 담고
request.setAttribute("items", itemList);
request에 items 라는 이름으로 저장해서 jsp에서 사용할 수 있게 했다.
그러고 결과값을 보여주기 위해 jsp에서
<c:forEach var="item" items="${items}">
이렇게 c:forEach를 통해 items 리스트를 반복(title, addr1, areacode, contentid ... ) 하게 했고, 각 요소는 item으로 담고
<form id="contentForm">
<ul>
<c:forEach var="item" items="${items}">
<li>
<p><strong>제목:</strong> ${item.title}</p>
<p><strong>주소:</strong> ${item.addr1}</p>
<p><strong>지역 코드:</strong> ${item.areacode}</p>
<strong>콘텐츠 ID:</strong>
<label class="check">
${item.contentid}
<input type="checkbox" class="content-checkbox" value="${item.contentid}" onclick="updateContentIds()">
</label class="check">
<p>이미지:
<c:choose>
<c:when test="${item.firstimage != '정보 없음'}">
<img src="${item.firstimage}" alt="이미지"; ">
</c:when>
<c:otherwise>
${item.firstimage}
</c:otherwise>
</c:choose>
</p>
</li>
</c:forEach>
</ul>
</form>
화면에 이렇게 출력시켰다.
화면에 title, addr1, areacode, 가장 중요한 contentID, firstimage(/areaBasedList1에서 제공하는 이미지)를 출력했고
여기서 contentID를 입력해서 상세정보 검색으로 넘기면
공통정보조회(/detailCommon1) + 이미지정보조회(/detailImage1)에 contentID가 들어가서 더 많은 정보들을 얻게 했다.
공통정보조회(/detailCommon1)
String apiUrl = "http://apis.data.go.kr/B551011/KorService1/detailCommon1";
String params = "?serviceKey=" + apiKey
+ "&MobileOS=ETC"
+ "&MobileApp=APP"
+ "&_type=json"
+ "&contentId=" + contentId
+ "&defaultYN=Y"
+ "&firstImageYN=Y"
+ "&addrinfoYN=Y"
+ "&mapinfoYN=Y"
+ "&areacodeYN=Y"
+ "&overviewYN=Y";
이미지정보조회(/detailImage1)
String imageApiUrl = "http://apis.data.go.kr/B551011/KorService1/detailImage1";
String imageParams = "?serviceKey=" + apiKey
+ "&MobileOS=ETC"
+ "&MobileApp=APP"
+ "&_type=json"
+ "&contentId=" + contentId
+ "&imageYN=Y"
+ "&subImageYN=Y";
한개의 contentID로 한번에 조회하고 나온 값들 화면에 출력하기
<form id="detailForm">
<ul>
<c:forEach var="detail" items="${details}">
<li>
<label class="check">
DB에 저장:
<input type="checkbox" class="detail-checkbox" value="${detail.contentid}" onclick="updateSelectedDetails()">
</label>
<p><strong>제목:</strong> ${detail.title}</p>
<p><strong>주소:</strong> ${detail.addr1}</p>
<p><strong>지역 코드:</strong> ${detail.areacode}</p>
<p><strong>콘텐츠 ID:</strong> ${detail.contentid}</p>
<p class="overview"><strong>설명</strong>: ${detail.overview}</p>
<p><strong>위도:</strong> ${detail.mapy}</p>
<p><strong>경도:</strong> ${detail.mapx}</p>
<div class="additional-images">
<span>
<img src="${detail.firstimage}" alt="이미지">
</span>
<!-- 추가 이미지들 출력 -->
<c:forEach var="image" items="${detail.images}">
<span>
<img src="${image.originimgurl}" alt="추가 이미지">
</span>
</c:forEach>
</div>
</li>
</c:forEach>
</ul>
</form>
설명과 이미지들이 필요했기 때문에 이렇게 얻어내고 화면에 출력!
필요한 설명과 이미지들이 잘 가져와서 출력되고 있었다. 이제 마지막으로 필요한 DB를 체크 후 저장하기.
만약 준비된 테이블이 없으면 테이블을 만들 게 했고(hotplace 테이블)
String createTableSQL = "CREATE TABLE IF NOT EXISTS hotplace ("
+ "id INT AUTO_INCREMENT PRIMARY KEY," // id는 auto_increment
+ "contentid VARCHAR(255) NOT NULL," // 콘텐츠 id
+ "title VARCHAR(255)," // 제목
+ "addr1 VARCHAR(255)," // 주소
+ "overview TEXT," // 설명
+ "mapx DOUBLE," // 경도
+ "mapy DOUBLE," // 위도
+ "firstimage TEXT," // 이미지 url (TEXT형으로 바꿔서 여러개 저장 가능하게)
+ "areacode VARCHAR(255)" // 지역 코드
+ ")";
각 값에 맞는 속성들을 DB에 넣어줬다. 그리고 firstimage는 이미지 주소들이 DB에 저장될 때 각각 쉼표로 저장되게 했다.
String insertSQL = "INSERT INTO hotplace (contentid, title, addr1, overview, mapx, mapy, firstimage, areacode) "
+ "VALUES (?, ?, ?, ?, ?, ?, ?, ?)";
// 추가 이미지들을 쉼표로 구분된 문자열로 변환
StringBuilder imageUrls = new StringBuilder((String) detailData.get("firstimage")); // firstimage 추가
List<Map<String, String>> images = (List<Map<String, String>>) detailData.get("images");
if (images != null && !images.isEmpty()) {
for (Map<String, String> imageData : images) {
if (imageUrls.length() > 0) {
imageUrls.append(","); // 기존 이미지가 있다면 쉼표 추가
}
imageUrls.append(imageData.get("originimgurl")); // 추가 이미지 URL 추가
}
}
DB에 잘 저장된거 확인!
이제 이 저장된 값들을 화면에 적절하게 출력하면 된다.
다시 페이지 구성으로 돌아와서..
2. 제목, 주소
제목과 주소는 DB에 저장된 제목, 주소값 가져오기
<div class="h_title-container">
<c:forEach var="item" items="${itemList}">
<h2>${item.title}</h2> <!-- 제목 -->
<h3>${item.addr1}</h3> <!-- 장소 -->
</c:forEach>
</div>
3. 공유하기
공유하기는 페이스북, 엑스, 카카오톡, 밴드 4개를 넣어서 구성했다.
공유하기 버튼을 누르면 배경이 회색으로 되게 했다.
URL 복사 부분의 주소는 readonly로 막아두고 누르면 복사되게 했다.
여기서 페북,엑스,밴드는 간단하게 해결했는데 카카오톡 공유하기는 API를 사용해야 가능했다.
Kakao developers 들어가서 앱 키 발급받고 WEB 플랫폼 추가하고 Javascript 키를 사용했다.
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
// 카카오톡에 공유 (카카오 JavaScript SDK 필요)
function shareToKakao() {
if (!Kakao.isInitialized()) {
Kakao.init('kakao developer key중에 javascriptKey'); // 카카오 SDK 초기화
Kakao.Link.sendDefault({
objectType: 'feed',
content: {
title: '핫플 여행지를 공유합니다!',
description: '핫플 여행지를 확인하세요!',
imageUrl: '이미지url',
link: {
mobileWebUrl: getCurrentUrl(),
webUrl: getCurrentUrl(),
},
},
});
}
이렇게 해서 카카오톡에 공유까지 js로 만들어줬다.
4. 네비바
네비바는 이미지, 설명, 여행톡 부분에 섹션을 줘서 해당하는 곳으로 바로 이동되게 했다.
sticky 옵션으로 화면에서 고정되게 했고
처음엔 z-index값을 안줘서 공유하기 팝업이 열릴때도 상단에 떠있는 오류가 있었다.
네비바에 overlay와 공유하기 팝업 보다 낮은 z-index 값으로 바꿔서 해결했다.
이미지 부분부터는 (2)에서 다시 정리!
'Develop > JSP' 카테고리의 다른 글
| 메인 페이지 정리, 페이지 하나로 DB 총 관리하기 (1) (3) | 2024.10.14 |
|---|---|
| 핫플 페이지 마무리 겸 정리하기 (2) (8) | 2024.10.06 |
| 페이지 댓글 구현하기 (4) | 2024.10.03 |
| 공공데이터 API JSP에 적용하기, DB 저장하기 (최종) (0) | 2024.09.28 |
| 공공데이터 API JSP에 적용하기, DB 저장하기 (4) (3) | 2024.09.28 |
