이제 어느정도 페이지 틀은 잡혔고, 기존에 스크립틀릿으로 만든 기능들도 MVC 패턴으로 바꿔놨다.
오늘부터 메인페이지 부분을 수정했고 까먹기 전에 공부 겸 정리하기!
인기 여행지 수정하기
먼저 인기 여행지 부분을 수정했다.
인기 여행지 부분에 DB에서 가져온(공공데이터 API로 저장한 여행지) 값들로 채워넣어야 했다.
구현하고 싶었던 큰 기능들은
1. DB에서 랜덤으로 계속 바뀌면서 출력하기
2. 이미지 클릭 시 해당하는 여행지 페이지로 이동하기
정도였다. 충분히 구현할 수 있다고 생각하고 시작!
내 핫플 페이지에서 DB에 저장된 댓글들을 가져온다고 생각하고 비슷하게 만들어 보려고 했다.
이걸 참고해서! MVC 패턴대로 만들어봤다.
Controller
@Autowired
private HotPlaceService hotplaceService;
// 핫플 테이블의 상세 정보를 랜덤으로 가져오기
@GetMapping("/HomePage/mainpage")
public String showHotplaceDetails(Model model) {
List<Map<String, Object>> hotplaceDetails = hotplaceService.getRandomHotplaceDetail(5);
model.addAttribute("hotplaceDetails", hotplaceDetails);
return "HomePage/mainpage";
}
일단 컨트롤러 먼저!
MainPageController를 만들었고 이렇게 작성했다.
일단 Autowired 어노테이션으로 HotPlaceService 인터페이스를 넣었고
HotPlaceService에서 랜덤으로 5개씩 받아오게 했다.
그러고 List로 저장하게 했고 Map:String = 키, Map:Object = 값 으로 했다.
값을 Object로 둔건 가져올 값의 타입이 다양해서 일단 가장 상위 타입인 Object로 두었다.
JSP로 반환하기 위해 Model 객체에 추가했다.
Service
public interface HotPlaceService {
List<Map<String, Object>> getRandomHotplaceDetail(int limit);
}
랜덤으로 지정된 개수(limit) 만큼 DB의 핫플을 가져오려고 했다. 더 자세한건 구현체인 Impl로!
Impl
@Service
public class HotPlaceServiceImpl implements HotPlaceService {
@Autowired
private HotPlaceDAO hotplaceDAO;
// 랜덤으로 hotplace 상세 정보 가져오기 (firstimage 첫 번째 이미지 처리)
@Override
public List<Map<String, Object>> getRandomHotplaceDetail(int limit) {
List<Map<String, Object>> hotplaces = hotplaceDAO.getRandomHotplaceDetail(limit);
return hotplaces.stream().map(hotplace -> {
String firstimage = (String) hotplace.get("firstimage");
if (firstimage != null && firstimage.contains(",")) {
firstimage = firstimage.split(",")[0].trim();
}
hotplace.put("firstimage", firstimage);
return hotplace;
}).collect(Collectors.toList());
}
}
인터페이스에서 정의한 getRandomHotplaceDetail를 구현하려고 했고
limit 값을 받아서 DB에서 해당 개수만큼 데이터를 가져왔다. 이건 DAO로 넘기기!
hotplaceDAO를 통해서 DB에서 랜덤으로 limit 개수만큼 핫플레이스 데이터를 가져오게 했다.
DAO는 List<Map<String, Object>>로 Map에 저장되게 했다.
근데 문제는 내 DB에 저장되어있는 이미지 값들이 쉼표로 구별된 여러 이미지 주소였다.
그래서 if (firstimage != null && firstimage.contains(","))를 통해서 null이 아니면서 " , " 이 포함되어 있으면
firstimage = firstimage.split(",")[0].trim();를 통해 [0] 번째 부분만 남기게 했다. (0번째 부분이니 실제로는 첫번째)
그러곤 다시 hotplace.put("firstimage", firstimage); // hotplace에 firstimage라는 이름으로 집어넣기!
이렇게 해서 랜덤 limt 개수만큼 가져와서 firstimage 작업을 거친 후 다시 List로 저장해놨다.
DAO
@Repository
public class HotPlaceDAO {
@Autowired
private SqlSession sqlSession;
private static final String MAPPER = "com.human.web.mapper.HotPlaceMapper";
public List<Map<String, Object>> getRandomHotplaceDetail(int limit) {
return sqlSession.selectList(MAPPER + ".getRandomHotplaceDetail", limit);
}
}
getRandomHotplaceDetail로 쿼리ID를 만들었고 이걸 MAPPER로 넘겼다.
뒤에는 limit값을 넣어서 컨트롤러에서 넣은 limit(5)를 받아오게 했다.
@Controller
List<Map<String, Object>> hotplaceDetails = hotplaceService.getRandomHotplaceDetail(5);
MAPPER
<!-- 랜덤 핫플 가져오기 -->
<select id="getRandomHotplaceDetail" resultType="map">
SELECT contentid, title, firstimage, addr1, overview, mapx, mapy
FROM hotplace
ORDER BY RAND()
LIMIT #{limit}
</select>
DAO에서 설정한 id="getRandomHotplaceDetail"로 호출했고 map을 통해 키:값 쌍으로 저장했다.
일단 뭘 쓸지 몰라서 hotplace 테이블에 있는거 죄다 가져왔다.
contentid, title, firstimage, addr1, overview, mapx, mapy
그러고 MySQL에서 제공하는 함수인 RAND()를 통해서 데이터를 랜덤하게 정렬했다.
LIMIT로 행 개수를 제한했고 그 LIMIT값은 #{limit}를 통해 파라미터를 받아서 썼다.
이렇게 한바퀴 돌리고 JSP로 전달!
JSP
<!-- 인기 여행지 섹션 -->
<div class="famous">
<h2>인기 여행지</h2>
<div class="famous-list">
<!-- Model에서 전달된 hotplaceTitles 출력 -->
<c:forEach var="hotplace" items="${hotplaceDetails}">
<div class="famous-item">
<!-- 이미지와 타이틀에 링크 추가 -->
<a href="${pageContext.request.contextPath}/HotPlace/${hotplace.contentid}">
<img src="${hotplace.firstimage}" alt="${hotplace.title}" class="image-placeholder" />
<p>${hotplace.title}</p>
</a>
</div>
</c:forEach>
</div>
</div>
이렇게 c:forEach를 통해서 저장된 값들을 반복 출력했고
hotplaceDetails의 List<Map<String,Object>>형태의 데이터를
hotplace.firstimage 이런 식으로 hotplace라는 Map에서 firstimage라는 키에 해당하는 값을 가져오게 했다.
같은 방식으로 ${hotplace.title}도 해주기!
RESULT
요렇게 랜덤으로 이미지 + 제목 가져오기 성공!
지금까지 진행도
저 이미지를 누르면 detail.jsp로 이동하고 이동할 때 이미지에 해당하는 contentid값도 같이 가지고 가서
한 페이지 안에서 틀만 잡고 내용을 contentid에 해당하는 값으로 가져오게 해놨다.
이 화면들은 모두 한 페이지에서 구성한다! detail.jsp
메인 화면에 뿌려진 어떤 이미지를 클릭해서 들어가도 detail.jsp로 이동되고
이 안에는 틀만 있지만 메인페이지 이미지에서 가져온 contentid 값으로 페이지를 전부 구성되게 했다.
제목은 contentid에 해당하는 title, 사진들은 firstimage, 설명은 overview, 지도는 mapx/mapy로!
각각 해당하는 페이지를 만들 필요가 없기 때문에 DB 관리만 잘 해주면 될 것 같다!!
이것도.. 정리해서 올려 볼 예정!
다음엔.. 여행톡 작성하면 해당하는 contentid에 저장되고,
불러올때도 같이 매치시켜서 해당하는 contentid에 저장한 댓글들만 가져오게 하기!
할게 많다!!! 차근차근 해 나가야지!
'Develop > JSP' 카테고리의 다른 글
| OpenWeatherMap API, canvas 사용하기 (4) | 2024.10.24 |
|---|---|
| 구글 지도 API 써서 일정 페이지 만들기 (4) | 2024.10.22 |
| 핫플 페이지 마무리 겸 정리하기 (2) (8) | 2024.10.06 |
| 핫플 페이지 마무리 겸 정리하기 (1) (10) | 2024.10.06 |
| 페이지 댓글 구현하기 (4) | 2024.10.03 |
