게시판 만들기(4)- Create(게시글 만들기)

게시판 카테고리의 포스팅들은 IntelliJ, Gradle, SpringBoot, Mybatis, H2-Database, Thymeleaf를 사용해
간단한 게시판을 만들어가는 포스팅입니다.

 

지난 포스팅인 게시글 조회에 이어 생성을 진행해보겠습니다.

 

BoardMapper.xml 쿼리문 작성

 

BoardMapper.xml

먼저 id를 입력해주신 후, 파라미터로 도메인을 넘길 수 있도록 domain의 클래스 경로까지 parameterType에 입력합니다. 그 후 INSERT INTO 테이블명 (입력할 컬럼명) VALUES(#{컬럼명})을 위 코드와 같이 작성하면 xml파일 작성이 완료됩니다.

 

BoardMapper Interface 작성

 

BoardMapper interface

위에서 작성한 BoardMapper.xml의 id와 BoardMppaer interface의 메소드 명을 동일하게 입력하고, 파라미터에 넘겨줄 도메인인 즉 Board를 넘겨줍니다. 

 

BoardService 작성

 

BoardService

앞서 작성해왔던 BoardService에 새로운 메소드를 등록하고, BoardMapper의 삽입메소드를 불러오도록 작성합니다.

 

BoardController 작성

 

BoardController

@GetMapping("/upload")를 통해 

http://localhost:8080/board/upload 주소로 Get 방식으로 이동하면 

~/resources/boards/upload.html로 이동하는 입력페이지로의 이동 매핑을 하고,

 

@PostMapping("/upload")를 통해

http://localhost:8080/board/upload 주소로 Post 방식으로 이동하면

service-> mapper interface -> mapper.xml를 통해 앞서 작성한 insert 쿼리를 보냅니다.

이 때 파라미터인 Board board는 html파일에서 전달된 name과 일치하는 클래스(도메인)을 찾아 매핑해줍니다.

그 후 redirect:/board/main을 return함으로서 글 작성이 완료되면, 게시글의 목록을 볼 수 있는 main페이지로 이동해

작성된 글이 추가된 모습을 볼 수 있습니다.

redirect는 return "redirect:/ 이동할 url"을 입력해주시면 됩니다.

 

upload.html 작성

 

html form을 작성해주시는데 여기서 th:action="@{upload}" method=post는 타임리프 문법으로

http://localhost:8080/board/upload를 post방식으로 전송한다는 의미를 가지고 있습니다.

 

th:actions="@{/upload}"로 작성하신다면, http://localhost:8080/board/upload가 아닌 

http://localhost:8080/upload로 이동하기에 주의하셔서 작성해주셔야 합니다.

 

<input>태그의 name="?"은 사용할 도메인 본 포스팅에서는 Board 클래스입니다.

name, title,content를  post방식으로 전달해, 컨트롤러에서는 이를 Board클래스의 컬럼으로 매핑하고

 

service -> interface ->xml으로 쿼리를 날려 동작을 수행할 수 있게 하는 역할을 합니다.

 

테스트

http://localhost:8080/board/upload Get방식의 입력 폼

먼저 http://localhost:8080/board/upload로 이동하면 위에서 작성한 것과 같은 입력 form 페이지를 볼 수 있습니다.

 

그 후 글쓴이 입력, 제목 입력, 내용 입력에 맞는 각 내용들을 입력한 뒤 

 

form에서의 submit역할을 하는 버튼인 btn버튼을 클릭하게 된다면

http://localhost:8080/board/main

쿼리를 통해 게시글의 입력이 완료되고, redirect를 통해 게시글 리스트인 board/main으로 이동하게 되고,

upload를 통해 전달한 내용들이 잘 입력되어있는 모습을 확인할 수 있습니다.

 

h2

그 후 h2 데이터베이스 콘솔로 이동을 하신 뒤 테이블 정보를 출력하면 위에서 작성한 값들이 정상적으로 삽입된 모습을 확인할 수 있습니다.

 

http://localhost:8080/board/view?boardId=11

상세페이지로의 이동 또한 제대로 동작하는 모습을 볼 수 있습니다.

 

 

지금까지의 포스팅에서 게시물의 CRUD 중 C,R 삽입과 조회를 마쳤기에 

다음 포스팅은 U와 D 업데이트, 삭제에 대한 포스팅을 진행하겠습니다.