Spring Boot 로 웹 서비스 출시하기 -3. 게시판 구현하기 ( 웹페이지 CRUD 구현하기 )

uss0915·2021년 2월 23일
0

이번에는 Crud를 HTML페이지를 통하여 구현해보도록 하겠습니다.

CRUD 적용하기

1. Read 만들기

먼저 웹페이지 스타일을 위해 resources/static/css/style.css를 만들어주겠습니다.

@CHARSET "UTF-8";

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css);

html{overflow:scorll;}
html, body, div, h1, h2, a, form, table, caption, thead, tbody, tr, th, td, submit {
    margin:0; outline:0; border:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;
}
body {
    font-size:0.875em; line-height:1.5; color:#666; -webkit-text-size-adjust:none; min-width:320px;
    font-family:'NanumGothic','나눔고딕',dotum, "Helvetica Neue", Helvetica, Verdana, Arial, Sans-Serief;
}
h1, h2, h3 {font-size: 1.5em;}
p{margin:0; padding:0;}
ul{margin:0;}
a:link, a:visited {text-decoration:none; color: #656565;}
input{vertical-align:middle;}
input:focus {outline:0;}
caption {display:none; width:0; height:0; margin-top:-1px; overflow:hidden; visibility:hidden; font-size:0; line-height:0;}

.container {max-width:1024px; margin:30px auto;}
.board_list {width:100%; border-top:2px solid #252525; border-bottom:1px solid #ccc; margin:15px 0; border-collapse: collapse;}
.board_list thead th:first-child {background-image:none;}
.board_list thead th {border-bottom:1px solid #ccc; padding:13px 0; color:#3b3a3a; text-align: center; vertical-align:middle;}
.board_list tbody td {border-top:1px solid #ccc; padding:13px 0; text-align:center; vertical-align:middle;}
.board_list tbody tr:first-child td {border:none;}
.board_list tbody tr:hover{background:#ffff99;}
.board_list tbody td.title {text-align:left; padding-left:20px;}
.board_list tbody td a {display:inline-block}

.board_detail {width:100%; border-top:2px solid #252525; border-bottom:1px solid #ccc; border-collapse:collapse;}
.board_detail tbody input {width:100%;}
.board_detail tbody th {text-align:left; background:#f7f7f7; color:#3b3a3a; vertical-align:middle; text-align: center;}
.board_detail tbody th, .board_detail tbody td {padding:10px 15px; border-bottom:1px solid #ccc;}
.board_detail tbody textarea {width:100%; min-height:170px}

.btn {margin:5px; padding:5px 11px; color:#fff !important; display:inline-block; background-color:#7D7F82; vertical-align:middle; border-radius:0 !important; cursor:pointer; border:none;}
.btn:hover {background: #6b9ab8;}

.file_list a {display:inherit !important;}

src/main/resources/templates/board 폴더속에 list.html을 만들겠습니다.

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>board</title>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
</head>
<body>
<div class="container">
    <h2>회원 목록</h2>
    <table class="board_list">
        <colgroup>
            <col width="15%"/>
            <col width="*"/>
            <col width="15%"/>
            <col width="20%"/>
        </colgroup>
        <thead>
        <tr>
            <th scope="col">회원번호</th>
            <th scope="col">이름</th>
            <th scope="col">직업</th>
            <th scope="col">작업</th>
        </tr>
        </thead>
        <tbody>
        <tr th:if="${#lists.size(list)} > 0" th:each="list : ${list}">
            <td th:text="${list.id}"></td>
            <td class="title"><a href="/board/updateMember/" th:attrappend="href=${list.id}" th:text="${list.name}"></a></td>
            <td th:text="${list.job}"></td>
            <td><a href="/board/updateMember/" th:attrappend="href=${list.id}">수정</a> / <a href="/board/deleteMember/" th:attrappend="href=${list.id}">삭제</a> </td>
        </tr>
        <tr th:unless="${#lists.size(list)} > 0">
            <td colspan="4">조회된 결과가 없습니다.</td>
        </tr>
        </tbody>
    </table>
    <a href="/board/openBoardWrite.do" class="btn">회원 가입</a>
</div>
</body>
</html>

여기서는 thymeleaf 템플릿 엔진을 이용한 속성값들을 사용하여서 View와 Database간의 소통을 도와줍니다. 자세한건 여기에 잘 나와있으니 참고하면 좋을 것 같습니다.

다음으로 Read에 해당하는 MemberController를 수정하도록 하겠습니다.
저번글에서 작성한 컨트롤러는 주석처리를 하고 참고하여 하나씩 추가하도록 하겠습니다.

@RestController
public class MemberController {

    @Autowired
    MemberServiceImpl memberService;

    @RequestMapping("/board/openBoardList.do")
    public ModelAndView openBoardList() throws Exception {
        ModelAndView mv = new ModelAndView("/board/list");

        List<MemberVO> list = memberService.selectAllMembers();
        mv.addObject("list", list);

        return mv;
    }

ModelAndView를 이용하여 thymeleaf 템플릿 엔진과 소통하는 방법을 사용하였습니다.
여기에서 mv에 addObject 한 값을 토대로 th:text${list.id} 이런식으로 표현을 하게되면

List<MemberVO> list = memberService.selectAllMembers();

모든멤버를 담은 리스트에서의 id를 데이터베이스에서 읽어와서 HTML 파일에 가져올 수 있게 됩니다.

localhost:9090/board/openBoardList.do 으로 들어가 보겠습니다.

성공적으로 조회가 되는것을 볼수가 있습니다.!

2. Create 만들기

다음으로는 Create 즉 회원가입을 만들어보겠습니다.
(Controller에서는 Board로 되어있는데 처음에 기획할때 게시판을 만들자 했지만 컬럼값을 줄이기 위해 회원으로 변경한 것이니 이해바랍니다.)

먼저 MemberController 에서 글을 쓰는 페이지로 이동하는 매핑작업을 하겠습니다.

    @RequestMapping("/board/openBoardWrite.do")
    public ModelAndView openBoardWrite() throws Exception{


        return new ModelAndView("/board/write");
    }

다음으로는 src/main/resources/templates/board 폴더속에 write.html을 만들겠습니다.

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>board</title>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
</head>
<body>
<div class="container">
    <h2>회원 등록</h2>
    <form id="frm" name="frm" method="post" action="/board/insertBoard.do">
        <table class="board_detail">
            <tr>
                <td>이름</td>
                <td><input type="text" id="name" name="name"/></td>
            </tr>
            <tr>
                <td>직업</td>
                <td>
                    <input type="text" id="job" name="job">
                </td>
            </tr>
        </table>
        <input type="submit" id="submit" value="저장" class="btn">
    </form>
</div>
</body>
</html>

localhost:9090/board/openBoardWrite.do 에 접속하면 성공적으로 화면을 볼수가 있습니다.

이제 등록 처리기능을 만들어 보겠습니다.
저번에 미리 기능은 만들어 놓았으니 매핑과 기술적 부분만 해결해주면 될 것 같습니다!
다시 MemberController로 돌아가서

    @PostMapping("/board/insertBoard.do")
    public ModelAndView insertMember(@ModelAttribute MemberVO member){
        memberService.insertMember(member);

        return new ModelAndView("redirect:/board/openBoardList.do");
    }

form태그의 action주소인 /board/insertBoard.do 를 매핑해준다음 멤버 등록 작업을 하여줍니다.

성공적으로 추가가 되었습니다.

3. UPDATE 만들기

이번에는 Update 즉 수정을 해보도록 하겠습니다.
미리 list.html에 수정과 삭제를 만들어 놓았었는데 수정과 삭제에 해당하는 주소에 따라서 매핑을 만들고 처리하는 작업을 진행해보도록 하겠습니다.

먼저 MemberController로 이동하여서 update를 할수있는 페이지부터 만들어주겠습니다.

    @RequestMapping("/board/updateMember/{id}")
    public ModelAndView openUpdate(@PathVariable int id) throws Exception{
        ModelAndView mv = new ModelAndView("/board/update");

        mv.addObject("id", id);

        return new ModelAndView("/board/update");
    }

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>board</title>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
</head>
<body>
<div class="container">
    <h2>회원 수정</h2>
    <form class="zz" role="form" method="put" action="/board/updateMember.do">
        <table class="board_list">
            <tr>
                <td>회원번호</td>
                <td th:text ="${id}"> </td>
                <td>
                    <input type="hidden" name="id" th:value="${id}">
                </td>
            </tr>
            <tr>
                <td>이름</td>
                <td><input type="text" id="name" name="name"/></td>
            </tr>
            <tr>
                <td>직업</td>
                <td>
                    <input type="text" id="job" name="job">
                </td>
            </tr>
        </table>
        <input type="submit" id="submit" value="저장" class="btn">
    </form>
</div>
</body>
</html>

다시 Controller으로 돌아와서 로직을 작성해주겠습니다.

    @RequestMapping(value="/board/updateMember.do")
    public ModelAndView updateMember(@RequestParam("id") int id, @ModelAttribute MemberVO member){
        memberService.updateMember(id, member);

        return new ModelAndView("redirect:/board/openBoardList.do");
    }

이렇게 작성하면 완성입니다.

4번 회원인 길씨를 무직으로 만들어보겠습니다..


저의 클릭한번으로 직장을 잃어버렸네요..

여기서의 핵심은
(list.html)
여기서 받아온 ${list.id}값을 그대로Mapping안에 {id} 값을 둔 다음에 @PathVariable을 통하여 주소에서의 id 값을 int id로 빼낸다음

/board/update html파일을 찾아가서 addObject를 사용하여 thymeleaf 템플릿 엔진에 id란 값을 넣어 준다음

hidden으로 id값을 form action하여 컨트롤러에 다시 넘겨서

@RequestParam("id")를 하여서 요청된 id값을 int id로 빼내고

updateMember 메소드를 호출한 다음 list화면으로 redirect 해주는 것입니다..
정말 복잡한데 이렇게 하는게 맞나 싶기도 하네요 더 쉬운 방법이 있으면 알려주세요..

4. Delete 만들기

방금 Update로 생고생을 하고나니 delete 기능은 1분만에 만들어버렸습니다..
먼저 MemberController에 매핑을 하나 추가하고 가겠습니다.

    @RequestMapping(value="/board/deleteMember/{id}")
    public ModelAndView deleteMember(@PathVariable int id){
        memberService.deleteMember(id);

        return new ModelAndView("redirect:/board/openBoardList.do");
    }

주소창에 id를 담으면 바로 삭제가 되겠네요

th:attrappend 기능을 통하여 list.id값을 매핑주소에 담아줍니다.
그러면 아까 로직이 실행될거고 삭제가 알아서 되겠네요~

아까 취직시켰던 메시를 지워버리겠습니다.

사라졌네요 끝~

profile
컴린이

0개의 댓글