728x90
반응형
SMALL

질문 등록 버튼 및 화면 생성

/templates/question_list.html

...
<a th:href="@{/question/create}" class="btn btn-primary">질문 등록하기</a>
....

 

localhost:8080/question/list

질문 등록하기 버튼 생성.

 

URL 매핑하기

/question/create에 해당하는 URL 매핑 추가.

/question/QuestionController.java

...
@GetMapping("/create")
	public String questionCreate() {
		return "question_form";
	}
...

 

템플릿 만들기

/templates/question_form.html

<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container">
	<h5 class="my-3 border-bottom pb-2">질문등록</h5>
	<form th:action="@{/question/create}" method="post">
		<div class="mb-3">
			<label for="subject" class="form-label">제목</label>
			<input type="text" name="subject" id="subject" class="form-control">		
		</div>
		<div class="mb-3">
			<label for="content" class="form-label">내용</label>
			<textarea name="content" id="content" class="form-control" rows="10"></textarea>
		</div>
		<input type="submit" value="저장하기" class="btn btn-primary my-2">
	</form>
</div>
</html>

질문 내용은 글자 수 제한이 없는 textarea 사용.

 

질문 저장 POST 요청 처리 

질문등록 화면에서 저장하기 버튼을 클릭하면 form의 action url로 이동하며 POST방식으로 전송된다. 또한 제목과 내용의 값이 담기는 곳에 name 속성을 지정해놨기 때문에 그 변수에 담아 값을 전달한다.

/question/QuestionController.java

@PostMapping("/create")
public String questionCreate(@RequestParam(value="subject") String subject, 
	@RequestParam(value="content") String content) {
	//TODO: 질문 저장.
	return "redirect:/question/list";
}

 

=>저장하기 버튼을 클릭하면 question/list로 돌아가는지 확인.

 

서비스 수정하기

질문 데이터를 저장하기 위해 서비스를 수정해보자.

/qeustion/QuestionService.java

public void create(String subject, String content) {
		Question q = new Question();
		q.setSubject(subject);
		q.setContent(content);
		q.setCreateDate(LocalDateTime.now());
		this.questionRepostiory.save(q);
}

 

다음으로 이 생성한 서비스를 사용할 수 있도록 컨트롤러도 수정해보자.

/question/QuestionController.java

@PostMapping("/create")
	public String questionCreate(@RequestParam(value="subject") String subject, @RequestParam(value="content") String content) {
		this.questionService.create(subject, content);
		return "redirect:/question/list";
}

 

테스트를 해보면

질문의 제목과 내용을 입력하고 저장하기 버튼을 클릭한다.
question/list로 다시 이동하고 방금 등록한 질문이 등록된 것을 확인할 수 있다.

 

728x90
반응형
LIST

+ Recent posts