게시판 만들기 - 질문 상세페이지 작성

이번 포스트에서는 localhost:8080/question/list 에 출력되는 질문을 클릭했을때

해당 질문의 내용, 댓글, 날짜 등을 상세하게 볼 수 있는 상세 페이지를 만들어보겠습니다.

question_list 수정

먼저 question_list 페이지를 수정해서 질문의 제목을 클릭하면 페이지를 이동시키겠습니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th>제목</th>
				<th>작성일시</th>
			</tr>
		</thead>
		<tbody>
			<tr th:each ="question : ${questionList}">
				<td>
					<a th:href="@{|/question/detail/${question.id}|}" th:text = "${question.subject}"></a>
				</td>
				<td th:text = "${question.createDate}"></td>
			</tr>
		</tbody>
	</table>
</body>
</html>

thymeleaf 를 통해 th:href="@{주소}" 를 사용하면 html 의 하이퍼링크 기능을 사용할 수 있습니다.

우리는 각 질문의 id 값을 통해 해당 질문을 상세하게 볼 수 있는 페이지로 이동하겠습니다.

예를 들어 1번 질문은 "localhost:8080/question/detail/1" 을 입력해서 상세 페이지로 이동할 수 있습니다.

Controller 작성

다음으로 "localhost:8080/question/detail/id값" 에 접속했을때 브라우저를 통해 페이지를 보여줄 수 있도록

QuestionController 를 작성하겠습니다.

package com.crud.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import com.crud.model.Question;
import com.crud.repository.QuestionRepository;
import com.crud.service.QuestionService;

@Controller
public class QuestionController {
	
	@Autowired
	private QuestionService questionService;

	@GetMapping("/question/list")
	public String list(Model model) {
		List<Question> questionList = questionService.getList();
		model.addAttribute("questionList", questionList);
		return "question_list";
	}
	
	@GetMapping("/question/detail/{id}")
	public String detail(Model model, @PathVariable("id") Integer id) {
		return "question_detail";
	}
}

위와 같이 detail 메서드를 작성해서 question_detail 페이지를 보여주도록 합니다.

여기서 주의할점은 @PathVariable 의 괄호 안의 문자는 주소의 데이터와 같은 값이어야 합니다.

"/question/detail/{데이터 변수}" 의 데이터 변수는 @PathVariable("데이터변수") 와 동일해야함

QuestionService 작성

다음으로 QuestionService 에서 id 를 통해 question 데이터를 가져오는 getQuestion 메서드를 작성합니다.

package com.crud.service;

import java.util.List;
import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.crud.model.Question;
import com.crud.repository.QuestionRepository;

@Service
public class QuestionService {

	@Autowired
	private QuestionRepository questionRepository;
	
	public List<Question> getList() {
		return questionRepository.findAll();
	}
	
	public Question getQuestion(Integer id) {
		Optional<Question> question = questionRepository.findById(id);
		// question 없을 경우 예외처리 필요
		
		return question.get();
	}
}

findById(id) 를 통해 question 을 가져오는데 이때 결과는 Optional 객체로 가져옵니다.

때문에 우리는 Optional 객체를 get 메서드를 통해 question 객체로 받아와야합니다.

추후에 id 에 해당하는 question 이 없는 경우를 예외처리 하겠습니다.

Controller 작성 (추가)

위에서 작성한 QuestionController 의 detail 메서드에서 QuestionService 의 getQuestion 메서드를 통해

데이터를 가져오도록 작성하겠습니다.

package com.crud.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import com.crud.model.Question;
import com.crud.repository.QuestionRepository;
import com.crud.service.QuestionService;

@Controller
public class QuestionController {
	
	@Autowired
	private QuestionService questionService;

	@GetMapping("/question/list")
	public String list(Model model) {
		List<Question> questionList = questionService.getList();
		model.addAttribute("questionList", questionList);
		return "question_list";
	}
	
	@GetMapping("/question/detail/{id}")
	public String detail(Model model, @PathVariable("id") Integer id) {
		Question question = questionService.getQuestion(id);
		model.addAttribute("question", question);
		return "question_detail";
	}
}

detail 메서드에서 questionService 의 getQuestion 메서드를 통해 question 을 가져옵니다.

가져온 question 을 model 을 통해 question_detail 페이지에 넘겨주게 됩니다.

question_detail 작성

마지막으로 question_detail 페이지를 templates 디렉토리 안에 다음과 같이 작성합니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1 th:text = "${question.subject}"></h1>
	<div th:text = "${question.content}"></div>
</body>
</html>

localhost:8080/question/list 에 출력되는 질문의 제목을 클릭하면 아래와 같이

해당 질문의 상세 페이지인 /question/detail/1 로 이동하는것을 확인할 수 있습니다.

'Spring > Springboot 실습' 카테고리의 다른 글

게시판 만들기 - bootstrap 적용 (0)	2023.01.09
게시판 만들기 - 답변 등록 기능 추가 (0)	2023.01.09
게시판 만들기 - service 작성 (0)	2023.01.08
게시판 만들기 - 브라우저를 통한 데이터 출력 (0)	2023.01.08
게시판 만들기 - Repository 작성 (0)	2023.01.06