뷰 생성
가장 먼저, 기본 기능인 게시글 작성, 조회에 사용할 view를 먼저 작성해 보자.
<!-- writePosting.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<body>
<div class="container">
<form action="http://localhost:8080/post" method="post">
<p>제목 : <input type="text" name="title"/><br></p>
<p>내용 : <input type="text" name="content"/><br></p>
<input type="submit" name="전송"/>
</form></div>
</body>
</html><form> 태그에서 사용자에게 데이터를 입력 받는다.
<!-- readPosting.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<body>
<%
request.setCharacterEncoding("utf-8");
String title = request.getParameter("title");
String content = request.getParameter("content");
%>
<div class="container">
<p>제목 : <%=title%><br></p>
<p>내용 : <%=content%></p>
</body>
</html>
각각의 게시글 뷰에서는 서버에서 전달해 준 `response`의 필드 값들을 사용해 뷰를 구성한다.
컨트롤러 생성
다음으로는, jsp의 데이터 전송 요청을 처리해 주고, 적절한 뷰를 반환해 주는 컨트롤러를 생성하자.
@RequestMapping("/post")
@Controller
public class PostingController {
@GetMapping
public String createView(){
return "view/posting/writePosting";
}
@PostMapping
public ModelAndView posting(HttpServletRequest request){
String title = request.getParameter("title");
String content = request.getParameter("content");
ModelAndView mv = new ModelAndView("view/posting/readPosting")
.addObject("title", title)
.addObject("content", content);
return mv;
}
}
데이터를 입력 받기 위한 뷰를 반환해 주는 createView() 메서드와 데이터 입력에 대해 적절한 처리를 해 주기 위한 posting() 메서드를 구현하였다.
posting() 메서드는 ModelAndView를 반환하여 뷰의 경로와, 해당 뷰에서 사용할 데이터를 적절히 넣어 주었다.
확인
localhost:8080/post 주소를 입력하면 데이터를 입력받기 위한 창이 보여진다.
값을 넣고 제출 버튼을 누르면 이전에 입력한 값이 바인딩 된 게시글 페이지가 보여진다.
전송 태그가 동작하지 않을 때 :
<form> 태그 안의 <input type="submit"> 을 이용한 전송 태그를 클릭해도 아무런 동작이 없는 상황이 발생했다.
개발자 도구를 켜 확인해 보니, 오른쪽 상단에 작게 오류를 표시 해 주고 있다.
콘솔을 열어 오류 메시지를 확인해 보니 다음과 같았다.
<form> 태그에 사용되는 경로는 프로토콜과 호스트, 경로로 구성이 되어 있어야 한다. <form action = "localhost:8080/post"> 라고 적었을 때는 프로토콜에 해당하는 부분이 없었고, 그 때문에 오류가 난 것이다. http:// 부분을 붙여 주어 문제를 해결하였다.
'프로젝트 > selfmade Blog - V1 (deprecated)' 카테고리의 다른 글
| 9. 유저 관련 기능 - 회원가입 (0) | 2023.08.31 |
|---|---|
| 8. 사용자의 입력 데이터 서버에 저장하기 (0) | 2023.08.31 |
| 6. 유저 CRUD 구현 및 테스트 데이터 삭제 (0) | 2023.08.13 |
| 5. 블로그 글 수정, 삭제 기능 (0) | 2023.08.13 |
| 4. 스프링을 사용한 의존성 주입 (0) | 2023.08.12 |
댓글