[게시판 만들기] IntelliJ를 활용한 게시판 만들기 4탄 : 게시글 작성, 읽기

Jinju Bae·2022년 2월 20일
0

게시물 포스팅에는 크게 네 단계가 있다.

Create, Read, Update, Delete. (줄여서 CRUD 라고 부른다)

이번 편에서는 게시글을 작성 (Create) 하고 읽는 (Read) 방법을 알아보겠다.

BoardMapper.xml 쿼리문 작성

BoardMapper.xml 에 아래의 코드를 추가한다.

    <insert id="uploadBoard" parameterType="wedatalab.bulletinboard.domain.Board">
        INSERT INTO tbl_board (title, content, name)
        VALUES
        (#{title}, #{content}, #{name});
    </insert>
  • id 를 'uploadBoard' 로 입력한다.

  • 파라미터로 도메인을 넘길 수 있도록 domain 의 클래스 경로까지 parameterType 에 입력한다.

BoardMapper.interface 수정

주석에 '추가'라고 쓰인 줄의 코드를 BoardMapper interface 에 추가한다.

@Repository
public interface BoardMapper {

    int boardCount();

    List<Board> getList();

    Board getBoard(Long boardId);
    
    void uploadBoard(Board board); // 추가

}
  • 위에서 작성한 BoardMapper.xml 의 id 와 BoardMapper interface 의 메소드 명을 'uploadBoard' 로 동일하게 입력한다.

  • 파라미터에 Board 도메인을 넘겨준다.

BoardService.class 수정

BoardService.class 에 아래의 코드를 추가한다.

    public void uploadBoard(Board board) {
        boardMapper.uploadBoard(board);
    }
  • BoardService 에 'uploadBoard' 라는 새로운 메소드를 등록한다.

  • BoardMapper 의 uploadBoard 메소드를 불러오도록 코드를 작성한다.

BoardController.class 수정

    @GetMapping("/upload")
    public String uploadBoardForm() {
        return "/boards/upload";
    }

    @PostMapping("/upload")
    public String uploadBoard(Board board) {
        service.uploadBoard(board);
        return "redirect:/board/main"; // 디렉토리가 아니라 주소라 board 임.
    }
  • @GetMapping("/upload") 를 통해 localhost:8080/board/upload 주소로 이동하면 templates>boards 폴더에 있는 upload.html 로 이동하는 입력페이지로의 이동 매핑을 한다. upload.html 은 게시글 입력 폼으로 만들 것이다.
  • @PostMapping("/upload"): localhost:8080/board/upload 주소로 post 방식으로 이동하면 service -> mapper interface -> mapper.xml 의 과정을 거쳐BoardMapper.xml 에 작성한 쿼리에서 insert 문을 보낸다.

  • 그 후 업로드 버튼을 누르면 업로드를 시행하고, 다시 메인 페이지로 돌아가도록 한다. 그럼 메인 화면에서 추가된 글을 볼 수 있다.

upload.html 작성

게시글 입력 폼으로서 upload.html 을 다음과 같이 작성해준다.

<!DOCTYPE html>
<html xmlns xmlns:th="http://www.w3.org/1999/xhtml" : th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <form th:action="@{upload}" method="post">

        <input type="text" class="form-control" name="name">
        <input type="text" class="form-control" name="title">
        <textarea class="form-control" name="content"></textarea>

        <button type="submit">btn</button>
    </form>
</div>
</body>
</html>
  • th:action="@{upload}" method=post는 타임리프 문법으로

http://localhost:8080/board/upload를 post방식으로 전송한다는 의미다.

  • 태그의 name=" " 은 사용할 도메인 (여기서는 Board 클래스) 이다. name, title, content 를 post 방식으로 전달한다.

  • 그러면 컨트롤러가 이를 Board 클래스의 컬럼으로 매핑하고, service -> interface -> xml 으로 쿼리를 날려 동작할 수 있게 한다.

localhost:8080/board/upload 페이지를 확인해보자.

잘 뜬다.

이제 게시글을 직접 작성해보자.

작성자 - 김만복, 제목 - 오늘 날씨, 내용 - 미세먼지가 많다

위의 내용으로 게시글을 작성했다.

업로드 과정.gif

btn 을 눌러 submit 하면 redirect 를 통해 다시 board/main 으로 이동한다.

메인 페이지에 돌아오면 upload 된 게시글을 확인할 수 있다.

h2 database 에서 데이터 확인

select * from tbl_board; 문을 통해 DB에 값이 잘 삽입됐는지 확인한다.

데이터베이스에도 역시 게시글이 잘 업로드되었다.

이번 편에서는 게시물 create, read 하는 법을 알아보았다.

다음 편에서는 update, delete 하는 내용을 다루도록 하겠다.

profile
진주개발일지 (珍珠開發日誌)

0개의 댓글