이전 포스팅에서 controller을 만들었습니다. 이번에는 이 컨트롤러를 이용하고 thymeleaf라는 template 엔진을 이용하여 view를 만들어 보겠습니다!!
우선 잘 작동하는지만 확인하기 위해 만든 view라 너무 부끄럽네요 ㅎㅎㅎㅎ
처음 localhost:8080으로 들어왔을 때 보여주기 위한 화면을 만들어보겠습니다.
main > resources > static안에 index.html을 만듭니다.
index.html안의 모습입니다... 아무것도 없죠 ㅎㅎ
서버를 실행시켰을 때 모습입니다 ㅎㅎㅎㅎ
이번에는 글쓰기와 게시글 보러가기를 눌렀을 때 view를 만들어보겠습니다!!
main > resources > templates > basic 안에 board.html과 boards.html을 만들어줍니다.
먼저 글쓰기 view입니다. -> board.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>글쓰는 장소</title>
</head>
<body>
<form action="/basic/board" method="post">
<div>
<input th:type="text" name="text" placeholder="쓰고 싶은 글을 쓰세요">
</div>
<div>
<input th:type="text" name="writer" placeholder="작성자">
</div>
<div>
<button type="submit">등록</button>
</div>
</form>
여기서 글써!!
<a href="/basic/boards">게시글 보러가기</a>
</body>
</html>여기서는 꼭 thymeleaf를 사용할 필요가 없는 html이었습니다.
주의할 점은 form을 post형식으로 /basic/board로 보냈다는 것입니다.
앞의 포스팅의 controller를 봤을 때 어디로 가는지 알겠죠??
서버를 실행기키고 글쓰기를 눌렀을 때 모습입니다!!
이제 마지막으로 게시글 보여주기를 완성시키면 됩니다!!!
게시글 보여주기 ->boards.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<table>
<tbody>
<tr th:each="board : ${boards}">
<td th:text="${board.text}"></td>
<td th:text="${board.writer}"></td>
</tr>
</tbody>
</table>
</div>
<a href="/basic/board">글쓰러 가기</a>
</body>
</html>요번에는 드디어 thymleaf를 사용했습니다!!
model을 통해서 받아온 boards데이터를 활용하면서 사용되었습니다.
th:each="board : ${boards}"에서
받아온 데이터 boards에서 board를 하나씩 꺼내사용하는 것입니다.
boards는 객체의 리스트이고 board는 객체입니다.
그 다음 줄부터는 board객체의 text와 writer를 차례대로 보여줍니다.
위의 글쓰기에서 text와 writer를 쓰고 게시글 보여주기에 들어갔을 때 모습입니다...
지금까지 게시글 만들기 프로젝트였습니다. 너무 작은 프로젝트죠?? ㅋㅋㅋㅋㅋㅋ 사실 이게 끝이 아니에요
구상해둔 기능은 회원가입, 로그인, 댓글과 답글, 게시글 수정이 있고
우선 심각한 view 부터 손을 봐야겠네요!!!
회원가입과 로그인 기능은 스프링 시큐리티와 세션, 쿠키에 대해서 좀 더 공부를 해보고 만드는 걸로 하겠습니다.!!!
다음 포스팅에서 만날게요~@~!@!
댓글