💻 코딩 일기 : [Spring] '간단한 게시판 만들기' 편

🔔 '간단한 게시판 만들기'에 대해서 알아보자!

간단한 게시판을 만들기 :
1. 글쓰기 기능(C)
2. 작성된 글을 보여주는 기능(R)
3. 게시물 수정하는 기능(U)
4. 게시물 삭제하는 기능(D)

Board 자바 빈을 생성합니다.

@Data
public class Board {
    private Integer id;
    private String title;
    private String content;
    private String writer;
    private LocalDateTime inserted;
}

💟 글쓰기 기능(CREATE)

BoardController

@GetMapping("/add")
public String add() {
    return "board/add";
}

@PostMapping("/add")
public String addPost(Board board, RedirectAttributes redirectAttributes) {
    service.add(board);
    redirectAttributes.addAttribute("id", board.getId());
    return "redirect:/";
}

• @GetMapping("/add") : localhost:8080/add 경로로 요청이 들어오면 add() 메서드가 호출되며 게시글을 추가하는 뷰 페이지로 이동합니다.
• @PostMapping("/add") : addPost() 메서드가 호출되며 게시글을 추가하고 추가된 게시글의 ID를 포함한 페이지로 리다이렉트합니다. ex) localhost:8080/board?id=10
• service.add(board); : 전달된 게시글 정보를 검증하고 비즈니스 로직을 실행합니다.

BoardService

public void add(Board board) {
    mapper.insert(board);
}

• 주어진 Borad 객체를 받아 Mapper를 통해 DB에 새로운 게시글을 추가합니다.

BoardMapper

@Insert("""
        INSERT INTO board (title, content, writer)
        VALUES (#{title}, #{content}, #{writer})
        """)
@Options(useGeneratedKeys = true, keyProperty = "id")
int insert(Board board);

• 게시글을 추가하기 위해 @Insert 어노테이션을 추가하고 @Options 어노테이션을 사용하여 useGeneratedKeys = true로 설정하여 자동 생성된 키(id)를 사용하도록 설정합니다.

사용자가 게시글 추가 요청을 하면 컨트롤러에서 해당 요청을 처리하고, 서비스 계층을 거쳐서 데이터베이스에 새로운 게시글을 추가하는 과정이 수행됩니다. 추가된 게시글은 컨트롤러를 통해 사용자에게 알려지고, 사용자는 추가된 게시글의 ID를 포함한 페이지로 리다이렉트됩니다.

💟 작성된 글을 보여주는 기능(R)

☑️ 모든 게시글을 보여주는 기능

BoardController

@GetMapping("/")
public String home(Model model) {
    // 게시물 목록 조회(Select)
    // 모델에 넣고
    model.addAttribute("boardList", service.list());
    //jsp로 포워드
    return "board/home";

• 서비스 계층의 리스트를 호출하여 게시물 목록을 가져와 이를 모델에 추가합니다.
• 게시판 홈 페이지를 보여주는 뷰로 이동합니다.

BoardService

public List<Board> list() {
    return mapper.selectAll();
}

• Borad 객체의 리스트를 받아 Mapper를 통해 DB있는 모든 게시물 목록을 가져옵니다.

BoardMapper

@Select("SELECT * FROM board ORDER BY id DESC")
List<Board> selectAll();

• DB의 모든 게시물을 조회하고 최신 게시물부터 정렬하여 List에 담아 반환합니다.

전체 게시물을 조회하는 요청을 하면, 서비스의 list() 메서드가 호출되고, 이 메서드는 매퍼를 통해 해당 게시물을 조회합니다. 조회된 게시물은 서비스를 통해 컨트롤러로 반환되어 사용자에게 보여지게 됩니다.

☑️ 특정 id를 받아 보여주는 기능

BoardController

@GetMapping("/board")
public String view(Integer id, Model model) {
    // 게시물 조회(select) 조회 결과 모델에 넣고 jsp로 포워딩
    Board board = service.get(id);
    model.addAttribute("board", board);
    return "board/view";
}

• 서비스에서 id를 받아와 받아온 게시물을 모델 추가하고 해당 아이디의 게시글을 보여줍니다.

BoardService

public Board get(Integer id) {
    return mapper.selectById(id);
}

• get(Integer id) : 매개변수로 받은 ID에 해당하는 게시물을 가져오는 메서드입니다. 매퍼를 통해 해당 ID를 가진 게시물을 조회합니다.

BoardMapper

@Select("SELECT * FROM board WHERE id = #{id}")
Board selectById(Integer id);

• 주어진 ID에 해당하는 게시물을 조회합니다. #{id}는 매개변수로 받은 ID를 대체합니다.

사용자가 특정 ID를 가진 게시물을 조회하는 요청을 하면, 서비스의 get() 메서드가 호출되고, 이 메서드는 매퍼를 통해 해당 게시물을 조회합니다. 조회된 게시물은 서비스를 통해 컨트롤러로 반환되어 사용자에게 보여지게 됩니다.

💟 게시물 삭제하는 기능(DELETE)

BoardController

@PostMapping("/delete")
public String delete(Integer id) {
    service.remove(id);
    return "redirect:/";
}

• 사용자가 게시물 삭제를 위해 POST요청을 보내면 delete() 메서드가 호출됩니다.
• 서비스의 remove(id) 메서드를 호출하면 전달받은 ID에 해당하는 게시글을 삭제합니다.
• 게시물 삭제 후 홈페이지로 리다이렉트합니다.

BoardService

public void remove(Integer id) {
    mapper.deleteById(id);
}

• 매퍼를 호출하여 게시물의 id를 매개변수로 받아 해당 id에 해당하는 게시물을 삭제합니다.

BoardMapper

@Delete("DELETE FROM board WHERE id = #{id}")
int deleteById(Integer id);

• DELETE 쿼리를 작성하여 주어진 id에 해당하는 게시물을 DB에서 삭제합니다.

사용자가 게시물 삭제 요청을 하면 컨트롤러에서 해당 요청을 처리하고, 서비스 계층을 거쳐서 데이터베이스에서 해당 게시물이 삭제됩니다. 그리고 삭제된 후에는 홈 페이지로 리다이렉트됩니다.

💟 게시물 수정하는 기능(UPDATE)

BoardController

    @GetMapping("/modify")
    public String modifyForm(Integer id, Model model) {
        //조회 해서 모델에 넣고
        model.addAttribute("board", service.get(id));
        //view로 포워드
        return "board/modify";
    }

    @PostMapping("/modify")
    public String modifyPost(Board board, RedirectAttributes redirectAttributes) {
        service.modify(board);
        redirectAttributes.addAttribute("id", board.getId());
        return "redirect:/board"; // 수정 된 글을 보는 화면으로 리다이렉트
    }

• modifyForm() 메서드:

  • @GetMapping("/modify"): 사용자가 게시물을 수정하고자 할 때 호출됩니다.
  • 전달된 게시물의 ID를 사용하여 해당 게시물을 조회하고, 수정을 위한 폼에 이 정보를 채웁니다.
  • 수정 폼에 필요한 데이터를 모델에 추가하고, "board/modify" 뷰로 포워딩하여 사용자에게 보여줍니다.

• modifyPost() 메서드:

  • @PostMapping("/modify"): 사용자가 게시물을 수정한 내용을 제출하면 호출됩니다.
  • 전달된 게시물 정보를 사용하여 해당 게시물을 수정합니다.
  • 수정된 게시물의 ID를 포함한 페이지로 리다이렉트합니다.

BoardService

public void modify(Board board) {
    mapper.update(board);
}

• 매퍼를 호출하여 board 매개변수로 받아 해당 board 객체에 해당하는 게시물을 수정합니다.

BoardMapper

@Update("""
        UPDATE board 
        SET title = #{title}, content = #{content}, writer = #{writer}
        WHERE id = #{id}
        """)
int update(Board board);

• 매개변수로 받은 Board 객체를 사용하여 해당 게시물을 수정하는 메서드를 나타냅니다.

서비스는 게시물을 수정하는 메서드를 호출하여 비즈니스 로직을 처리하고, 컨트롤러는 사용자의 요청을 받아 해당 요청에 맞는 서비스 메서드를 호출하며, 매퍼는 전달된 게시물 정보를 이용하여 데이터베이스에서 해당 게시물을 수정합니다.

💟 전체 코드

BoardController

@Controller
@RequiredArgsConstructor
public class BoardController {

    private final BoardService service;

    @GetMapping("/add")
    public String add() {

        return "board/add";
    }

    @PostMapping("/add")
    public String addPost(Board board, RedirectAttributes redirectAttributes) {
        System.out.println("BoardController.addPost");
        System.out.println("board = " + board);
        service.add(board);
        redirectAttributes.addAttribute("id", board.getId());
        return "redirect:/";
    }

    // /board?id=3
    @GetMapping("/board")
    public String view(Integer id, Model model) {
        // 게시물 조회(select) 조회 결과 모델에 넣고 jsp로 포워딩
        Board board = service.get(id);
        model.addAttribute("board", board);
        return "board/view";
    }

    @GetMapping("/")
    public String home(Model model) {
        // 게시물 목록 조회(Select)
        // 모델에 넣고
        model.addAttribute("boardList", service.list());
        //jsp로 포워드
        return "board/home";
    }

    @PostMapping("/delete")
    public String delete(Integer id) {
        service.remove(id);
        return "redirect:/";
    }

    @GetMapping("/modify")
    public String modifyForm(Integer id, Model model) {
        //조회 해서
        // 모델에 넣고
        model.addAttribute("board", service.get(id));
        //view로 포워드
        return "board/modify";
    }

    @PostMapping("/modify")
    public String modifyPost(Board board, RedirectAttributes redirectAttributes) {
        System.out.println("board = " + board);
        service.modify(board);
        redirectAttributes.addAttribute("id", board.getId());
        return "redirect:/board"; // 글을 보는 화면으로 리다이렉트
    }

}

BoardService

@Service
@RequiredArgsConstructor
@Transactional(rollbackFor = Exception.class)
public class BoardService {

    private final BoardMapper mapper;

    public void add(Board board) {
        mapper.insert(board);
    }

    public Board get(Integer id) {
        return mapper.selectById(id);
    }

    public List<Board> list() {
        return mapper.selectAll();
    }

    public void remove(Integer id) {
        mapper.deleteById(id);
    }

    public void modify(Board board) {
        mapper.update(board);
    }
}

BoardMapper

@Mapper
public interface BoardMapper {

    @Insert("""
            INSERT INTO board (title, content, writer)
            VALUES (#{title}, #{content}, #{writer})
            """)
    @Options(useGeneratedKeys = true, keyProperty = "id")
    int insert(Board board);

    @Select("SELECT * FROM board WHERE id = #{id}")
    Board selectById(Integer id);

    @Select("SELECT * FROM board ORDER BY id DESC")
    List<Board> selectAll();

    @Delete("DELETE FROM board WHERE id = #{id}")
    int deleteById(Integer id);


    @Update("""
            UPDATE board 
            SET title = #{title}, content = #{content}, writer = #{writer}
            WHERE id = #{id}
            """)
    int update(Board board);
}

---

JSP

hoem(첫 화면)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>home</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

</head>
<body>

<c:import url="/WEB-INF/fragment/navbar.jsp"/>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-6">
            <h3>게시물 목록</h3>
            <table class="table">
                <thead>
                <tr>
                    <th style="width: 50px">NO</th>
                    <th>제목</th>
                    <th style="width: 170px">작성자</th>
                </tr>
                </thead>
                <tbody class="table-group-divider">
                <c:forEach items="${boardList}" var="board">
                    <c:url value="/board" var="viewLink">
                        <c:param name="id" value="${board.id}"/>
                    </c:url>
                    <tr>
                        <td>${board.id}</td>
                        <td>
                            <a href="${viewLink}">${board.title}</a>
                        </td>
                        <td>${board.writer}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>
</html>

navbar

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>

<nav class="navbar navbar-expand-lg bg-body-tertiary bg-primary mb-4" data-bs-theme="dark">
    <div class="container">
        <a class="navbar-brand" href="/">BOARD😎</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="/" class="nav-link">
                        목록
                    </a>
                </li>
                <li class="nav-item">
                    <a href="/add" class="nav-link">
                        글쓰기
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

view(해당 id 게시글 화면)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

</head>
<body>


<c:import url="/WEB-INF/fragment/navbar.jsp"/>

<div class="container">

    <div class="row justify-content-center">
        <div class="col-6">
            <h3>${board.id} 번 게시물</h3>
            <div class="mb-3">
                <label for="inputTitle" class="form-label">
                    제목
                </label>
                <input id="inputTitle" class="form-control" type="text" value="${board.title}" readonly>
            </div>
            <div class="mb-3">
                <label for="textareaContent" class="form-label">
                    본문
                </label>
                <textarea id="textareaContent" class="form-control" cols="30" rows="10"
                          readonly>${board.content}</textarea>
            </div>
            <div class="mb-3">
                <label for="inputWriter" class="form-label">
                    작성자
                </label>
                <input id="inputWriter" class="form-control" type="text" readonly value="${board.writer}">
            </div>
            <div class="mb-3">
                <label for="inputInserted" class="form-label">
                    작성일시
                </label>
                <input id="inputInserted" class="form-control" type="datetime-local" readonly value="${board.inserted}">
            </div>
            <div class="mb-3">
                <button form="formDelete" class="btn btn-danger">삭제</button>
                <a href="/modify?id=${board.id}" class="btn btn-primary">수정</a>
            </div>
        </div>
    </div>
</div>


<div style="display: none">
    <form id="formDelete" action="/delete" method="post" onsubmit="return confirm('삭제 하시겠습니까?')">
        <input type="hidden" name="id" value="${board.id}">
    </form>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>
</html>

add(글쓰기 화면)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>추가</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<body>

<c:import url="/WEB-INF/fragment/navbar.jsp"/>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-7">
            <h3 class="mb-4">새 게시물 작성</h3>

            <form action="/add" method="post">
                <div class="mb-3">
                    <label for="inputTitle" class="form-label">
                        제목
                    </label>
                    <input class="form-control" id="inputTitle" type="text" name="title" required>
                </div>
                <div class="mb-3">
                    <label for="textareaContent" class="form-control">
                        본문
                    </label>
                    <textarea class="form-control" id="textareaContent" name="content" cols="30" rows="10"
                              required></textarea>
                </div>
                <div class="mb-3">
                    <label for="inputWriter" class="form-label">
                        작성자
                    </label>
                    <input class="form-control" id="inputWriter" type="text" name="writer" required>
                </div>
                <div class="mb-3">
                    <button class="btn btn-primary btn-lg">저장</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>
</html>

modiy(게시글 수정 화면)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>수정</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

</head>
<body>
<c:import url="/WEB-INF/fragment/navbar.jsp"/>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-7">

            <h3 class="mb-4">${board.id}번 게시물 수정</h3>
            <form action="/modify" method="post">
                <input type="hidden" name="id" value="${board.id}">
                <div class="mb-3">
                    <label for="inputTitle" class="form-label">
                        제목
                    </label>
                    <input id="inputTitle" class="form-control" type="text" value="${board.title}" name="title"
                           required>
                </div>
                <div class="mb-3">
                    <label for="textareaContent" class="form-label">
                        본문
                    </label>
                    <textarea id="textareaContent" class="form-control" cols="30" rows="10" name="content"
                              required>${board.content}</textarea>
                </div>
                <div class="mb-3">
                    <label for="inputWriter" class="form-label">
                        작성자
                    </label>
                    <input id="inputWriter" class="form-control" type="text" value="${board.writer}" name="writer"
                           required>
                </div>
                <div class="mb-3">
                    <button class="btn btn-secondary">수정</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src=" https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>
</html>

---

화면(view)

첫 화면

게시물 작성 화면

제목 클릭 시 해당 게시물로 넘어가는 화면