2022. 8. 4. 16:56ㆍHow to become a real programmer
이어서,
4) 게시물 리스팅
- 게시물 리스트 페이지 생성
- 게시물 리스트 페이지에 저장된 게시글 출력
단계 차례인데, 그 전에 게시물들을 좀 생성한 후에 게시물 페이지를 만들면 더 잘 와닿을 것 같기에 SQL문을 활용해 간단하게 제목과 글로 이루어진 게시물 데이터를 만들어 주겠다.
강의 원작자 님의 티스토리에 '데이터 프로시저 생성'부분을 카피하거나, 밑에 그 부분을 복사한 게 있으니 그걸 갖다 써도 무방하다.
https://developer-rooney.tistory.com/153?category=496529
[Spring Boot] 스프링부트 게시판(JPA, Gradle, Thymeleaf) - 영상 자료 포함
스프링부트 게시판 무작정 따라하기! 이 강의는 자바를 이용한 웹 개발 기초 지식, 프레임워크에 관한 지식이 없으신 분도 따라하기만 하면 게시판을 만들 수 있게 구성하였습니다. 물론 완벽하
developer-rooney.tistory.com
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 $$복사한 부분을 Workbench에 복사 붙여넣기 해준다.
하지만 이 상태로 하면 "No database selected..." 하면서 에러가 뜨기에 앞에 데이터베이스 선택이 안되었다고 뜨기에, 맨 앞줄에 use board(데이터베이스 명)을 추가해주고, 맨 마지막 부분에 call testDataInsert;를 추가함으로써 코드에 생성되어 있는 프로시저를 작동시켜준다.
그리고 실행(ctrl + Enter)하면, 밑과 같이 녹색 체크모양이 뜨면서 잘 실행됨을 알 수 있고, 데이터베이스를 확인하면 임의의 데이터가 생성된 것을 알 수 있다.
이제 이러한 데이터를 나타낼 게시물 리스트 페이지를 만들어야 한다. 그 전에 매핑처리부터 해주자.
경로 /board/list에 들어가면 boardlist.html 페이지를 return할 수 있도록 controller 설정을 해두고, templates에 들어가서 boardlist.html 파일을 생성해주자.
내부 내용은 아래와 같이 해주면 된다.
<!DOCTYPE html>
<html lang="en">
<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>
<td>1</td>
<td>제목입니다</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>class가 layout인 div를 만들고 안에 테이블, 그리고 그 안에 thead, tbody를 만들고 위와같이 만들어주면 된다.
style태그 내에 .layout으로 된 부분은 class명이 layout인 부분의 css를 편집하는 것인데, 위와 같은 부분을 boardwrite.html에도 지정해줬다(꼭 안따라해도 됨).
그리고 run후 해당 경로(http://localhost:8080/board/list)에 들어가면,
위와 같이 간단한 리스트가 만들어져있는 것을 확인할 수 있다.
우리가 데이터베이스에 생성했던 데이터들을 불러오는 것은(창에 리스트로 띄우기 위해) BoardService에서 처리를 해주겠다.
BoardService에서 boardlist라는 메서드를 생성해줘서 데이터베이스 내 Board 데이터로 지정된 데이터를 가져오려하기 때문이다.
이를 처리하기 위해 아래 코드를 넣어주면 된다.
public List<Board> boardlist(){
return boardRepository.findAll(); //Board라는 class가 담긴 list를 찾아 반환
}
List에서 빨간 줄이 뜬다면 ctrl + space를 통해서 java.util에서 제공하는 List에 놓고 엔터를 치면 된다.
메서드를 생성하고 나서 controller로 이동해서 데이터를 가져와 홈페이지로 던져주기 위해서 Service에서 생성한 메서드를 써야한다.
@GetMapping("/board/list")
public String boardlist(Model model){ // 데이터를 담아 페이지로 보내기 위해 Model 자료형을 인자로
model.addAttribute("list", boardService.boardlist()); // boardService에서 생성한 boardlist메소드를 통해 list가 반환되는데 해당 list를 "list"라는 이름으로 넘겨주겠다는 것(html에 나올 수 있게)
return "boardlist";
}위 코드를 Controller에서 아까 만든 @GetMapping("/board/list")부분에 적용시킨다.
이렇게 하고 받아온 데이터를 html파일로 페이지에 나타내야 하기에 boardlist.html로 이동한다. data를 받아오는 것은 thymeleaf 탬플릿을 통해 할 수 있기에 이를 사용하기 위해 html태그에서 아래와 같이 설정해준다.
빨간 박스부분을 추가해준다.(어둡게 표시되는 이유는 아직 한번도 사용하지 않았기 때문)
그리고 이를 사용하기 위해 아래 tbody부분을 아래와 같이 추가해준다.
<tbody>
<tr>
<tr th:each="board : ${list}">
<td th:text="${board.id}">1</td>
<td th:text="${board.title}">제목입니다.</td>
</tr>
</tr>
</tbody>여기서 th:each의 each부분은 반복문이다. 즉 list에서 board가 없어질 때 까지(121개니까 121번) 반복한다는 뜻이다.
밑 부분은 그럼 불러와진 board의 id와 title을 불러온다는 것을 유추할 수 있겠다. 이를 run해보고 접속해보자.
잘 불러와졌다. 끝까지 내려보면 데이터베이스 내 120개 파일이 모두 들어있는 것을 볼 수 있다. 이제 이러한 제목을 누르면 content가 보일 수 있도록 처리해보자.
+ 리스트 상세 페이지 출력)
게시글 상세 페이지로, templates에 boardview.html파일을 하나 만들어주자.
그리고 나서, body에 간단히 h1태그하나와 p태그 하나를 생성해주고 각각 제목, 내용이 들어갈 부분으로 적어놓는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>게시글 상세 페이지</title>
</head>
<body>
<h1>제목</h1>
<p>내용</p>
</body>
</html>그리고 controller에 와서 위 페이지를 매핑을 해주자.
이후, 게시글들을 불러와야하기에 메서드 생성을 위해 BoardService로 이동 후, boardview 메서드를 생성해준다(아래).
findById는 I nteger형으로 불러올 수 있기에 Integer자료형인 id를 인자로 주고, 그대로 두면 옵셔널값으로 받아와 빨간줄이 있어 .get()을 통해서 처리해주었다.
그리고 controller에 와서 해당 메서드를 사용해주자.
get방식으로 id 파라미터의 값을 지정해주면 id에 따라 content가 나올 것이다. 아직 html에는 적용안했기에 boardview.html로 이동하자.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>게시글 상세 페이지</title>
</head>
<body>
<h1 th:text="${board.title}">제목입니다.</h1>
<p th:text="${board.content}">내용이 들어갈 부분입니다.</p>
</body>
</html>html파일을 위와 같이 아까 데이터를 불러오듯 thymeleaf를 사용하여 title과 content를 불러오게 설정을 해주자. 그리고 run을 하고 확인해보면..?
뜨든! 잘 불러와졌다. DB id에 맞게 1, 2, 3, 4 수정하면 해당 내용이 계속 바뀔 것이다.
id에 맞게 바뀌는 내용들을 확인가능하다.
이제, 우리가 직접 주소창에 ?id={} 부분을 추가하는게 아닌 클릭해서 들어갈 수 있게 해야한다.
boardlist.html 파일을 수정해주자.
불러오는 content가 데이터베이스 내 불러와지는 board의 id에 따라 달라지므로 thymeleaf를 사용해서 href를 지정해줘야 한다. 그렇기에 조금은 복잡하지만 (id=${board.id}) 이런식으로 지정된 board의 id를 변수로 관리해서 작성해주어야 한다.
<!DOCTYPE html>
<html lang="en" xmlns:th="https://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="board : ${list}">
<td th:text="${board.id}">1</td>
<td>
<a th:text="${board.title}" th:href="@{/board/view(id=${board.id})}">제목입니다.</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>tbody내, tr내를 수정해주었다. 다시 run하고 접속.
a태그로 감싸져 누를 수 있게 되었는데 누르면 id가 잘 바뀔까? 눌러보자.
5번째인 제목4를 눌렀더니 잘 뜨는 것을 확인할 수 있다. 게시물의 쓰고, 들어가서 내용을 확인하는 기초적인 부분을 완성한 것이다.
물론 현재 삭제나 수정버튼이 없고 디자인도 들어가있지 않아 초라하지만, 하나하나 씩 추가해가면 우리가 인터넷에서 자주 사용하는 게시물 페이지가 완성 될 것이다.
이어서,
5) 게시물 삭제
- 게시물 삭제 버튼 생성
을 할 차례이다.
버튼을 일단 만들어주자. 삭제버튼은 상세페이지(board/view?id={})에 만들어 줄 것이기 때문에 boardview.html파일로 이동한다.
button 태그도 있지만, 주소 처리를 쉽게하기 위해 일단 a태그로 하겠다. a태그에서 href="#"으로 지정하게 되면 자기 자신 페이지를 가리킨다.
삭제를 처리할 서비스(메서드)를 만들어주자.
우리가 다른 부분을 처리한 것 처럼, delete도 boardRepository에서 제공하는 Id에 따른 삭제를 사용해주면 된다. 매개변수로 Integer형인 id가 필요하기에, 메서드의 Integer자료형의 id를 인자로 지정한다.
그리고 BoardController로 이동.
위와 같이 매핑하고, id에 의해 삭제하는 처리를 마저 해주었다. boardDelete 메서드 처리 후, return하는 페이지로 redirect를 통해 list로 갈 수 있도록 했다.
redirect와 그냥 "view이름" 방식의 차이는 아래 블로그를 참고하면 되겠다.
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=sim4858&logNo=221007278858
[Spring & Web] return "redirect:/주소" 와 일반 return "view이름"의 차이
이번 포스팅에서는 Spring Web Project에서 URL 요청에 따른 Controller의 처리 중에서 return "red...
blog.naver.com
그냥 view를 보여주냐, url요청(redirect)을 새로하느냐 의 차이인 것 같다.
이제, 버튼에 적용시켜주자. boardview.html 파일로 이동.
id 파라미터를 같이 넘겨주는 delete로 이동하라고 지정해두면 아마 삭제가 될 것이다. 한번 run하고 해보도록 하자.
id가 1인 글의 글 삭제 a태그를 누르면,
짠! list페이지로 redirect되면서 id가 1번인 게시물이 삭제된 것을 확인할 수 있다.
데이터베이스에도 id가 1번인 데이터가 사라진 것을 확인할 수 있다.
다음 단계인
6) 게시물 수정
- 게시물 수정 페이지 생성
- 게시물 수정 처리
7) 게시물 페이징
- 게시물 페이징 처리
- 게시물 리스트 페이지에서 페이징 처리
은, 다음 게시글에서 계속 이어하겠다.
'How to become a real programmer' 카테고리의 다른 글
| 스프링 부트(Spring Boot)로 간단한 게시판 만들기 - 최종 (0) | 2022.08.13 |
|---|---|
| 스프링 부트(Spring Boot)로 간단한 게시판 만들기 - 4 (0) | 2022.08.07 |
| 스프링 부트(Spring Boot)로 간단한 게시판 만들기 - 2 (0) | 2022.08.02 |
| 스프링 부트(Spring Boot)로 간단한 게시판 만들기 - 1(시작) (0) | 2022.08.02 |
| 도커(Docker)란 무엇인가? (0) | 2022.07.31 |