른록노트

[NetBeans로 Spring MVC 게시판 만들기] 3. 프로젝트 진행(#2) 본문

Web/[Spring]

[NetBeans로 Spring MVC 게시판 만들기] 3. 프로젝트 진행(#2)

른록 2017. 7. 22. 00:10

안녕하세요 른록입니다.

진행중에 에러가 안나셨으면 합니다~

게시판 리스트까지 다 되셨으면 이제 글을 작성해 보겠습니다.


[계획]

1. 소개(개념)

-1. Spring FrameWork MVC
-2. NetBeans

2. 프로젝트 환경 구성
-1. Maven
-. POM.xml

-2. Web.xml과 ApplicationContext,dispatcher_servlet.xml

-. Mybatis(Mysql)

-. Log4j


3. 프로젝트 진행

-1. 게시판 리스트 보기

-2. 게시판 글 작성

-. HandlerMethodArgumentResolver

-3. 게시판 글 상세 조회

-4. 게시판 글 수정

-5. 게시판 글 삭제



[NetBeans로 Spring MVC 게시판 만들기] 3. 프로젝트 진행(#2)

- 게시판 글 작성

우선 HandlerMethodArgumentResolver에 대하여 배워야합니다.

그런데 저희는 처음 설정 당시 이 Resolver를 구성했었습니다.

HandlerMethodArgumentResolver에 대한 자세한 정보는

http://addio3305.tistory.com/75 이 블로그에서 확인하세요

간단하게 말하면 Parameter를 자동으로 Map형태로 받게하는 설정입니다.

예전엔 Request.getParamet를 사용했지만 이 resolver를 사용함으로써

parameter를 쉽게 사용할 수 있습니다. 그 작업에 앞서


1. CSS(스타일) 및 공통작업 작성

Web pages에 resources폴더를 생성해주시고 하위에 css,images,include,js폴더를 생성해주세요


그리고 css폴더에 ui.css 파일을 생성해주시고 다음 코드를 복붙해주세요

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@CHARSET "UTF-8";
 
a:link, a:visited {text-decoration: none; color: #656565;}
 
.board_list {width:100%;border-top:2px solid #252525;border-bottom:1px solid #ccc}
.board_list thead th:first-child{background-image:none}
.board_list thead th {border-bottom:1px solid #ccc;padding:12px 0 13px 0;color:#3b3a3a;vertical-align:middle}
.board_list tbody td {border-top:1px solid #ccc;padding:10px 0;text-align:center;vertical-align:middle}
.board_list tbody tr:first-child td {border:none}
.board_list tbody td.title {text-align:left; padding-left:20px}
.board_list tbody td a {display:inline-block}
 
.board_view {width:50%;border-top:2px solid #252525;border-bottom:1px solid #ccc}
.board_view tbody th {text-align:left;background:#f7f7f7;color:#3b3a3a}
.board_view tbody th.list_tit {font-size:13px;color:#000;letter-spacing:0.1px}
.board_view tbody .no_line_b th, .board_view tbody .no_line_b td {border-bottom:none}
.board_view tbody th, .board_view tbody td {padding:15px 0 16px 16px;border-bottom:1px solid #ccc}
.board_view tbody td.view_text {border-top:1px solid #ccc; border-bottom:1px solid #ccc;padding:45px 18px 45px 18px}
.board_view tbody th.th_file {padding:0 0 0 15px; vertical-align:middle}
 
.wdp_90 {width:90%}
.btn {border-radius:3px;padding:5px 11px;color:#fff !important; display:inline-block; background-color:#6b9ab8; border:1px solid #56819d;vertical-align:middle}
 
 
cs


2. 자바스크립트 공통함수

가장 자주 사용되는 두가지 기능을 만들겁니다. 첫째는 널(null)을 체크하는 함수,

둘째는 submit 기능을 하는 함수를 만드려고합니다.


두번째인 submit 기능을 함수는 보통 form과 <input type="submit">을 많이 생각하시는데, 그렇지만 이는 파라미터의 동적 추가나 공통적인 파라미터 추가, 아무것도 없을때의 화면이동이 불편한 경우가 많습니다. 따라서 숨겨둔 form을 하나 만들어놓고, 그 폼을 이용해 페이지의 이동 및 입력값을 전송 하려합니다.

지금 이게 무슨소리읹 이해가 안갈수도 있지만, 여기서 일단 만들어놓고 나중에 화면에서 어떻게 사용하는지 다시 설명하겠습니다.

(http://addio3305.tistory.com/79 인용)



resources-js 폴더에 common.js 파일을 생성해주세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
 
function gfn_isNull(str) {
    if (str == null) return true;
    if (str == "NaN") return true;
    if (new String(str).valueOf() == "undefined") return true;   
    var chkStr = new String(str);
    if( chkStr.valueOf() == "undefined" ) return true;
    if (chkStr == null) return true;   
    if (chkStr.toString().length == 0 ) return true;  
    return false;
}
 
function ComSubmit(opt_formId) {
    this.formId = gfn_isNull(opt_formId) == true ? "commonForm" : opt_formId;
    this.url = "";
     
    if(this.formId == "commonForm"){
        $("#commonForm")[0].reset();
    }
     
    this.setUrl = function setUrl(url){
        this.url = url;
    };
     
    this.addParam = function addParam(key, value){
        $("#"+this.formId).append($("<input type='hidden' name='"+key+"' id='"+key+"' value='"+value+"' >"));
    };
     
    this.submit = function submit(){
        var frm = $("#"+this.formId)[0];
        frm.action = this.url;
        frm.method = "post";
        frm.submit();  
    };
}
 
cs


이제 boardList.jsp파일을 수정해주세요


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <%@ include file="/resources/include/include-header.jspf"%>
    </head>
    <body>
        <h2>게시판 목록</h2>
        <table style="border:1px solid #ccc">
            <colgroup>
                <col width="10%"/>
                <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>
                <c:choose>
                    <c:when test="${fn:length(list) > 0}">
                        <c:forEach items="${list }" var="row">
                            <tr>
                                <td>${row.board_num }</td>
                                <td>${row.title }</td>
                                <td>${row.hit_cnt }</td>
                                <td>${row.crea_date }</td>
                            </tr>
                        </c:forEach>
                    </c:when>
                    <c:otherwise>
                        <tr>
                            <td colspan="4">조회된 결과가 없습니다.</td>
                        </tr>
                    </c:otherwise>
                </c:choose>
 
            </tbody>
        </table>
        <button class="btn" id="write">글작성</button>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#write").on("click", function (e) {
                    e.preventDefault();
                    fn_openBoardWrite();
                })
            });
 
            function fn_openBoardWrite(){
                var conSubmit = new ComSubmit();
                conSubmit.setUrl("<c:url value="/BoardWrite.do"/>");
                conSubmit.submit();
            }
                    
      </script>
 
        <%@ include file="/resources/include/include-body.jspf"%>
    </body>
 
 
</html>
 
cs


이렇게 사용하는 이유는 페이지 이동 시에 데이터 포함해서 보낼 경우, 공통함수를 사용해서 편리하게 사용할 수 있습니다.


이제 Controller에서 'boardWrite.do'을 맵핑해주세요


1
2
3
4
5
   @RequestMapping(value = "/BoardWrite.do")
    public ModelAndView BoardWrite(CommandMap commandMap) throws Exception {
        ModelAndView mv = new ModelAndView("/boardWrite");
        return mv;
    }
cs


그리고 BoardWrite.jsp 파일을 만들어주시고 아래 코드를 복붙해주세요.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <%@ include file="/resources/include/include-header.jspf" %>
    </head>
    <body>
        <form id="frm">
            <table class="board_view">
                <colgroup>
                    <col width="15%">
                    <col width="*"/>
                </colgroup>
                <caption>게시글 작성</caption>
                <tbody>
                    <tr>
                        <th scope="row">작성자</th>
                        <td><input type="text" id="crea_id" name="crea_id" class="wdp_90"></td>
                    </tr>
                    <tr>
                        <th scope="row">제목</th>
                        <td><input type="text" id="title" name="title" class="wdp_90"></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="view_text">
                            <textarea rows="20" cols="100" title="내용" id="contents" name="contents"></textarea>
                        </td>
                    </tr>
                </tbody>
            </table>
 
            <a href="#this" class="btn" id="write" >작성하기</a>
            <a href="#this" class="btn" id="list" >목록으로</a>
        </form>
 
        <%@ include file="/resources/include/include-body.jspf" %>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#list").on("click", function (e) {
                    e.preventDefault();
                    fn_openBoardList();
                });
 
                $("#write").on("click", function (e) {
                    e.preventDefault();
                    fn_openBoardWrite(frm);
                });
 
 
            });
 
            function fn_openBoardList() {
                var comSubmit = new ComSubmit();
                comSubmit.setUrl("<c:url value='/BoardList.do'/>");
                comSubmit.submit();
            }
            function fn_openBoardWrite() {
                var comSubmit = new ComSubmit("frm");
                comSubmit.setUrl("<c:url value='/insertBoard.do'/>");
                comSubmit.submit();
            }
        </script>
    </body>
</html>
 
cs

(유효성 검사는 따로 하지 않겠습니다.)


이제 Controller -> Service -> Dao -> Mapper 순으로 코드를 작성해주시면 됩니다.


Controller에 추가해주세요

1
2
3
4
5
6
7
8
    @RequestMapping(value = "/insertBoard.do")
    public ModelAndView insertBoard(CommandMap commandMap) throws Exception {
        ModelAndView mv = new ModelAndView("redirect:/BoardList.do");
        
        boardService.insertBoard(commandMap.getMap());
        
        return mv;
    }
cs


이제 서비스를 만들어주시고

1
2
 
    public void insertBoard(Map<String, Object> map) throws Exception;
cs

DAO와 Mapper를 만들어주세요


1
2
3
4
 
       public void insertBoard(Map<String, Object> map) {
         insert("board.insertBoard", map);
    }
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
  
    <insert id="insertBoard" parameterType="hashmap">
         <![CDATA[
        INSERT INTO TB_BOARD
        (
            parent_num,
            title,
            contents,
            hit_cnt,
            crea_id
        )
        VALUES
        (
            #{board_num}+1,
            #{title},
            #{contents},
            0,
            #{crea_id}
        )
    ]]>
    </insert>
cs


이렇게 모든 코드를 작성하시면 제대로 실행이 될겁니다.

dto를 따로 만들지 않는이유는 Map을 사용하기 때문입니다.


반응형
'Web/[Spring]' Related Articles more
Comments