인텔리가 '되고 싶은' 인텔리재이

[JSP + MyBatis] 7. 게시물 상세페이지 조회하기 본문

✨LEVEL UP🎇/PROJECT

[JSP + MyBatis] 7. 게시물 상세페이지 조회하기

인텔리재이 2023. 3. 24. 17:33

🕶 참고 포스팅

이번 포스팅에서는 게시물 상세화면을 조회할 수 있도록 화면을 만들고 기능을 구현해보도록 하겠습니다😁

이후 게시물 수정, 삭제 기능을 상세 페이지에서 구현할 예정입니다.

 

화면 만들기

list.jsp 수정

<body>
	<jsp:include page="../include/header.jsp" />
	<h2 style="text-align: center">게시물 리스트</h2>

	<div class="list-container">


		<div class="container">
			<button class="btn btn-primary"
				style="display: block; margin-bottom: 10px"
				onclick="location.href='/insert'">글쓰기</button>
			<table class="table table-hover">
				<tr>
					<th>No.</th>
					<th>Subject</th>
					<th>Writer</th>
					<th>Date</th>
				</tr>
				<c:forEach var="i" items="${list}">
					<tr onclick="location.href='/detail/${i.bno}'">
						<td>${i.bno}</td>
						<td>${i.subject}</td>
						<td>${i.writer}</td>
						<!--날짜 포맷팅 -->
						<td>
							<fmt:formatDate var="resultRegDt" value="${i.reg_date}"
								pattern="yyyy-MM-dd" /> ${resultRegDt}
					    </td>
					</tr>
				</c:forEach>

			</table>
		</div>
	</div>
	<jsp:include page="../include/footer.jsp"></jsp:include>
</body>

리스트에서 게시물 번호 부분을 클릭 시 게시물 번호(i.bno)를 파라미터로 전달합니다.

이를 통해 여러 게시물 중 게시물 번호를 통해 원하는 특정 게시물을 찾아 상세조회 화면으로 이동합니다🤗

 

 

기존 화면이 있던 경로(src > main > webapp > WEB-INF > views > board 폴더) 에 detail.jsp를 생성합니다.

detail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="../include/style.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Detail Page</title>
</head>
<body>
	<jsp:include page="../include/header.jsp"></jsp:include>
	<h2 style="text-align: center">게시글 상세</h2>

	<div class="container">
		<form>
			<div class="form-group">
				<label>제목</label>
				<p>${detail.subject}</p>
			</div>
			<div class="form-group">
				<label>작성자</label>
				<p>${detail.writer}</p>
			</div>
			<div class="form-group">
				<label>작성날짜</label>
				<p>
				<fmt:formatDate var="resultRegDt" value="${detail.reg_date}"
					pattern="yyyy-MM-dd" />
				${resultRegDt}
				</p>
			</div>
			<div class="form-group">
				<label>내용</label>
				<p>${detail.content}</p>
			</div>
		</form>
		<button class="btn btn-outline-success"
			onclick="location.href='/update/${detail.bno}'">수정</button>
		<button class="btn btn-outline-danger"
			onclick="location.href='/delete/${detail.bno}'">삭제</button>
		<button class="btn btn-outline-secondary"
			onclick="location.href='/list'">리스트</button>
	</div>
	<jsp:include page="../include/footer.jsp"></jsp:include>

</body>
</html>
  • bootstrap 을 통해 form과 버튼을 간단히 만들었습니다.
  • list.jsp와 동일하게 날짜를 원하는 형식(yyyy-mm-dd)으로 출력하기 위해, fmt 태그를 추가하였습니다.
  • '리스트'버튼을 클릭하면, 이전에 구현했던 리스트 화면(list.jsp)으로 이동합니다.

 

기능 구현하기

본격적으로 DB에서 데이터를 불러오기 위해, controller, domain, mapper, service에 코드를 추가하도록 하겠습니다.

src > main > java > com.example.demo 해당 경로에 

controller, domain, mapper, service 패키지가 생성되어있는지 확인 후, 코드를 작성합니다.

 

1. controller > BoardController.java

  • controller는 화면으로부터 데이터를 받아 VO에 담고, 이를 service로 값을 전달해주는 역할을 담당합니다.
  • 이를 위해 service와의 의존성을 주입해주었습니다.
  • list.jsp에서 넘겨준 파라미터를 활용하여 특정 게시물 상세페이지 화면을 호출하는 메소드를 작성합니다.
package com.example.demo.controller;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import com.example.demo.domain.BoardVO;
import com.example.demo.service.BoardService;

@Controller // 컨트롤러 빈으로 등록
public class BoardController {

	@Resource(name = "com.example.demo.service.BoardService") // Service 의존성 주입
	BoardService mBoardService;

	@RequestMapping("/detail/{bno}") // 게시판 상세페이지 호출
	private String boardDetail(@PathVariable int bno, Model model) throws Exception {

		model.addAttribute("detail", mBoardService.boardDetailService(bno));

		return "board/detail";
	}
 }

 

2. service > BoardService.java

  • Service는 Controller로부터 데이터를 받고, 이를 Mapper로 전달해주는 역할을 담당합니다.
  • 이를 위해 Mapper와의 의존성을 주입해주었습니다.
package com.example.demo.service;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.example.demo.domain.BoardVO;
import com.example.demo.mapper.BoardMapper;

@Service("com.example.demo.service.BoardService")
public class BoardService {
	
	// Mapper 의존성 주입
	@Resource(name = "com.example.demo.mapper.BoardMapper")

	BoardMapper mBoardMapper;
	
	// 게시물 상세페이지
	public BoardVO boardDetailService(int bno) throws Exception {

		return mBoardMapper.boardDetail(bno);
	}
 }

 

3. mapper > BoardMapper.java

  • Mapper 인터페이스는 Service로부터 데이터를 받고, 직접 DB에 접근하여 데이터를 처리합니다.
  • Mapper.xml 에 작성된 SQL 쿼리문을 자바 인터페이스를 통해 호출하여 처리합니다.
package com.example.demo.mapper;

import java.util.List;

import org.springframework.stereotype.Repository;

import com.example.demo.domain.BoardVO;

//DB에 접근하는 클래스
@Repository("com.example.demo.mapper.BoardMapper")
public interface BoardMapper {

	// 게시글 상세
	public BoardVO boardDetail(int bno) throws Exception;
    
}

 

4. mapper > BoardMapper.xml

  • 이곳에 작성된 SQL 쿼리문을 자바 인터페이스를 통해 호출하여 DB에 반영합니다.
  • DB에서 파라미터로 넘어온 게시물 번호(bno)와 동일한 번호를 가진 게시물의 정보를 가져옵니다.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper 
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd" >

<mapper namespace="com.example.demo.mapper.BoardMapper">

	<select
		id="boardDetail"
		parameterType="int"
		resultType="com.example.demo.domain.BoardVO"
	>
		SELECT
		*
		FROM BOARD
		WHERE
		BNO = #{bno}
	</select>
    
</mapper>

코드 작성 후, 기능이 잘 동작하는지 확인합니다.

이로써 다음과 같은 (간단한) 게시물 상세페이지가 완성되었습니다!😎

게시물 리스트 조회에 이어, 작성한 게시물 상세페이지를 출력해보았습니다.😎

다음 포스팅에서는 게시물 수정과 삭제 기능을 구현하도록 하겠습니다!

저작자표시 비영리 변경금지 (새창열림)

'✨LEVEL UP🎇 > PROJECT' 카테고리의 다른 글

[JSP + MyBatis] 8. 게시물 수정 (update), 삭제 (delete) 하기  (1) 2023.03.29
[JSP + MyBatis] 6. 게시물 리스트 + JSTL  (1) 2023.03.06
[JSP + MyBatis] 5. 게시글 작성하기 (insert)  (1) 2023.02.07
[JSP + MyBatis] 4. 화면에 부트스트랩(Bootstrap) 적용하기  (0) 2023.01.27
[JSP + MyBatis] 3. MySQL DB 연동하기  (0) 2023.01.25
'✨LEVEL UP🎇/PROJECT' Related Articles more
Comments