반응형
프로젝트 구조는 아래와 같이 만들었다.
이번에는 게시글 폼(boardwrite.html), 게시글 목록(boardList.html)까지 만들고
컨트롤러, 서비스, repository를 연결해서 게시글을 작성해서 디비에 넣고 글 목록까지 출력하는 것을 구현할 것이다.
🤍게시판 글 작성 구현
먼저 컨트롤러를 작성해 주고
엔티티 작성
- Entity(엔티티) : 데이터베이스에 쓰일 필드와 여러 엔티티간 연관 관계를 정의함.
Repository 작성
- Entity에 의해 생성된 DB에 접근하는 메서드 (EX. findAll()...)들을 사용하기 위한 인터페이스, 위에서 엔티티를 선언함으로써 데이터베이스 구조를 만들었다면 여기에 어떤 값을 넣거나 넣어진 값을 조회하는 등의 CRUD를 해야 쓸모가 있는데 이것을 어떻게 할 것인지 정의하는 기능을 한다고 생각하면 된다.
게시글 작성폼 boardwrite.html 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>게시물 작성폼</title>
</head>
<style>
.layout{
width: 500px;
margin: 0 auto;
margin-top: 40px;
}
.layout textarea{
width: 100%;
margin-top: 10px;
min-height: 300px;
}
.layout input{
width: 100%;
box-sizing: border-box;
}
</style>
<body>
<div class="layout">
<form action="/board/writepro" method="post">
<input name="title" type="text">
<textarea name="content"></textarea>
<button type="submit">작성</button>
</form>
</div>
</body>
</html>
작성 후 실행하면 아래와 같은 투박한(?) 게시글 작성 화면이 나온다.
제목을 입력 후 작성 버튼을 누르면
값이 넘어오는 것을 확인할 수 있다.
이번에는 디비에 값을 넣기 위해 서비스 코드를 작성해 본다.
- save : spring data jpa 메서드임. saveAll은 다건 이상의 데이터를 저장, save는 1건을 저장하는 메소드임.
컨트롤러, 서비스가 완성되었으니 다시 제목과 내용을 입력하고 작성하면
디비 테이블에 알맞게 데이터가 들어왔다!!
🤍게시글 목록 출력 구현
이번엔 같은 흐름으로 게시글 목록을 출력해 보기로 한다.
그전에 먼저 게시글이 여러 개가 존재해야 목록을 출력할 수 있으므로 테스트 데이터 프로시저를 생성하여 게시글 120개를 등록해 준다.
DELIMITER $$
CREATE PROCEDURE testDataInsert()
BEGIN
DECLARE i INT DEFAULT 1;
WHILE i <= 120 DO
INSERT INTO board(title, content)
VALUES(concat('제목',i), concat('내용',i));
SET i = i + 1;
END WHILE;
END$$
DELIMITER $$
테이블을 조회해 보면 테스트 데이터가 알맞게 들어갔다.
게시글 리스트 페이지 boardList.html 생성
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>게시물 리스트 페이지</title>
</head>
<style>
.layout{
width: 500px;
margin: 0 auto;
margin-top: 40px;
}
</style>
<body>
<div class="layout">
<table>
<thead>
<tr>
<th>글번호</th>
<th>제목</th>
</tr>
</thead>
<tbody> <!-- 반복문 -->
<tr th:each="bootboard : ${list}">
<td th:text="${bootboard.id}"></td>
<td th:text="${bootboard.title}"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>- 타임리프 문법을 사용하기 위해 추가
<html xmlns:th="http://www.thymeleaf.org"> //타임리프 문법 사용
이런 식으로 타임리프 문법이 자동으로 나온다.
- th:each -> 반복하려는 html 엘리먼트에 th:each 속성을 사용하여 콜렉션을 반복하며 화면을 처리할 수 있음.
- 여기에서는 게시판 (board)에 담긴 글 목록 (list)를 불러올 것이기 때문에 아래와 같이 작성.
- list는 컨트롤러에서 model.attribute로 넘겨준 값을 적어주면 됨.
여기까지 작성하고 다시 실행해 보면 디비에 저장된 게시글 목록이 알맞게 출력된다!
반응형
'💻 my code archive > 🎨게시판 만들기' 카테고리의 다른 글
| [스프링부트 게시판 만들기] 파일 업로드 구현하기 (0) | 2022.03.13 |
|---|---|
| [스프링부트 게시판 만들기] 글 상세 조회, 게시글 수정, 삭제 구현 (0) | 2022.03.13 |
| [스프링부트 게시판 만들기] IntelliJ 프로젝트 생성, MySQL 연동 (0) | 2022.03.13 |
| [STS Spring] 게시판 만들기 -- 05. 글 등록(INSERT), 글 수정(UPDATE), 글 삭제(DELETE), 글 상세 조회(SELECT) (0) | 2022.01.17 |
| [STS Spring] 게시판 만들기 -- 04. 전체 게시글 조회(SELECT) (0) | 2022.01.16 |
