영보의 SystemOut.log

[Spring] Spring MVC 구조 자유게시판 만들기 - (2) 본문

Spring

[Spring] Spring MVC 구조 자유게시판 만들기 - (2)

영보로그 2020. 11. 10. 21:49
반응형

qh5944.tistory.com/92

 

[Spring] Spring MVC 구조 자유게시판 만들기 - (1)

 개념 정리 # request 구분 일반 MVC 구조 Spring 차이점 1. 사용자 보내준 데이터를 받을 수 있다  → getParameter() 2. 결과값을 모아서 전송해준 기능  3. request안에는 사용자의 정보 (IP,PORT) 존재 1...

qh5944.tistory.com

저번 포스팅에 이어서 게시판을 마저 만들어 보겠습니다~

 

 

 

 개념 정리

 

# RestController 전송시에 한글 깨짐 방지 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- RestController에서 데이터 전송시에 한글이 깨진다 -->
    <mvc:annotation-driven>
        <mvc:message-converters>
            <!-- @ResponseBody Content-Type:application/json;charset=UTF-8  -->
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <property name="supportedMediaTypes">
                    <list>
                        <value>text/html;charset=UTF-8</value>
                    </list>
                </property>
            </bean>
        </mvc:message-converters>
     </mvc:annotation-driven>
 cs

- application-context.xml 코드에 한글 깨짐 방지를 위해 꼭 삽입해주어야 하는 코드입니다.

 

 

 

# Controller 와 jsp 동작 내용

  - board/detail.do => RequestMappingd에서 no값을 받아서 처리하라는 내용

 

 

 

# 프로그램 MVC 구조 및 동작순서

 1. 사용자 요청(브라우저) → .do

   .do (요청)

       1) <a> 
       2) <form>
       3) ajax

       4) location.href=""

 2.  DispatcherServlet → 스프링에서 지원

     1) 해당 RequestMapping()를 찾는다 → HandlerMapping

     2) 찾은 클래스에서 요청 처리 → 프로그래머 작성 (@Controller,@RestController)
     3) 결과값을 Model(인터페이스) : 오라클

     4) ViewResolver → JSP를 찾아서 (Model → request로 변환에 전송)

     5) 전송받은 request를 출력 : Jquery,Ajax,React,Vue

  (책 250page그림, 256page/10장)

 

 코드 

 

# DB에서 SQL 테이블 생성하기

1
2
3
4
5
6
7
8
9
CREATE TABLE spring_board(
    no NUMBER PRIMARY KEY,
    name VARCHAR2(34) NOT NULL,
    subject VARCHAR2(1000) NOT NULL,
    content CLOB NOT NULL,
    pwd VARCHAR2(10) NOT NULL,
    regdate DATE DEFAULT SYSDATE,
    hit NUMBER DEFAULT 0
);
 cs

 - 먼저 DB와 연결하기위해 VO변수값과 동일하게 테이블을 생성해 줍니다.

 

 

 

# list.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
70
71
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%-- SimpleDateFormat --%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
   margin: 0px auto;
   width:900px;
}
h1 {
    text-align: center;
}
</style>
</head>
<body>
   <div class="container">
     <div class="row">
       <h1>스프링 게시판(MyBatis:Annotation)</h1>
       <table class="table">
         <tr>
           <td>
             <a href="insert.do" class="btn btn-sm btn-primary">새글</a>
           </td>
         </tr>
       </table>
       <table class="table table-striped">
         <tr class="danger">
           <th class="text-center" width=10%>번호</th>
           <th class="text-center" width=45%>제목</th>
           <th class="text-center" width=15%>이름</th>
           <th class="text-center" width=20%>작성일</th>
           <th class="text-center" width=10%>조회수</th>
         </tr>
         <%-- 데이터 출력 위치 --%>
         <%--
               for(BoardVO vo:request.getAttribute("list"))
               => request.setAttribute("list",list);
               ${list}=request.getAttribute("list")
          --%>
         <c:forEach var="vo" items="${list }">
           <tr>
               <td class="text-center" width=10%>${vo.no }</td>
               <td class="text-left" width=45%>
                 <a href="detail.do?no=${vo.no }">${vo.subject }</a>
               </td>
               <td class="text-center" width=15%>${vo.name }</td>
               <td class="text-center" width=20%>
                 <fmt:formatDate value="${vo.regdate }" pattern="yyyy-MM-dd"/>
               </td>
               <td class="text-center" width=10%>${vo.hit }</td>
           </tr>
         </c:forEach>
       </table>
       <table class="table">
         <td class="text-center">
          <a href="#" class="btn btn-sm btn-primary">이전</a>
          ${curpage } page / ${totalpage } pages
          <a href="#" class="btn btn-sm btn-primary">다음</a>
         </td>
       </table>
     </div>
   </div>
</body>
</html>
 cs

  - jsp 첫 리스트 페이지를 출력해주는 코드

 

 

 

# detail.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
70
71
72
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
   margin: 0px auto;
   width:700px;
}
h1 {
   text-align: center;
}
</style>
</head>
<body>
   <div class="container">
     <div class="row">
      <h1>내용보기</h1>
      <table class="table table-striped">
        <tr>
          <th width=20% class="text-center danger">번호</th>
          <td width=30% class="text-center">${vo.no }</td>
          <th width=20% class="text-center danger">작성일</th>
          <td width=30% class="text-center"> 
            <fmt:formatDate value="${vo.regdate }" pattern="yyyy-MM-dd"/>
          </td>
        </tr>
        <tr>
          <th width=20% class="text-center danger">이름</th>
          <td width=30% class="text-center">${vo.name }</td>
          <th width=20% class="text-center danger">조회수</th>
          <td width=30% class="text-center">${vo.hit }</td>
        </tr>
        <tr>
          <th width=20% class="text-center danger">제목</th>
          <td colspan="3" class="text-left">${vo.subject }</td>
        </tr>
        <c:if test="${vo.filecount>0 }">
          <tr>
            <th width=20% class="text-center danger">첨부파일</th>
            <td colspan="3" class="text-left">
              <ul>
               <c:forEach var="file" items="${fList }" varStatus="s">
                 <li><a href="download.do?fn=${file }">${file }</a>&nbsp;(${sList[s.index]}Bytes)</li>
               </c:forEach>
              </ul>
            </td>
          </tr>
        </c:if>
        <tr>
          <td colspan="4" class="text-left" valign="top" height=200>
            ${vo.content }
          </td>
        </tr>
        <tr>
          <td colspan="4" class="text-right">
            <a href="update.do?no=${vo.no }" class="btn btn-sm btn-success">수정</a>
            <a href="delete.do?no=${vo.no }" class="btn btn-sm btn-info">삭제</a>
            <a href="list.do" class="btn btn-sm btn-warning">목록</a>
          </td>
        </tr>
      </table>
     </div>
   </div>
</body>
</html>
 cs

 - list에서 임의의 게시물로 들어갔을 때 상세페이지를 출력해주는 코드

 - Spring 232-234page 참고

 

 

 

# update.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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
   margin: 0px auto;
   width:700px;
}
h1 {
   text-align: center;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
let fileIndex=0;
$(function(){
    $('#addBtn').click(function(){
        $('#user-table').append(
           '<tr id=f'+fileIndex+'>'
          +'<td width="15%" class="text-right">파일'+(fileIndex+1)+'</td>'
          +'<td width="85%"><input type="file" name=files['+fileIndex+']>'
          +'</td></tr>'
        );
        fileIndex=fileIndex+1;
    });
    $('#removeBtn').click(function(){
        if(fileIndex>0)
        {
            $('#f'+(fileIndex-1)).remove();
            fileIndex=fileIndex-1;
        }
    });
});
</script>
</head>
<body>
  <div class="container">
    <div class="row">
     <h1>수정하기</h1>
     <form method=post action="update_ok.do" enctype="multipart/form-data">
     <table class="table">
       <tr>
        <th class="text-right danger" width=15%>이름</th>
        <td width=85%>
          <input type=text name=name size=15 value="${vo.name }">
          <input type=hidden name=no value="${vo.no }">
        </td>
       </tr>
       
       <tr>
        <th class="text-right danger" width=15%>제목</th>
        <td width=85%>
          <input type=text name=subject size=50 value="${vo.subject }">
        </td>
       </tr>
       
       <tr>
        <th class="text-right danger" width=15%>내용</th>
        <td width=85%>
          <textarea rows="8" cols="55" name=content>${vo.content }</textarea>
        </td>
       </tr>
       <tr>
         <td colspan="2">
             <table class="table">
               <tr>
                <td class="text-right">
                  <input type=button value="add" class="btn btn-xs btn-success" id="addBtn">
                  <input type=button value="remove" class="btn btn-xs btn-warning" id="removeBtn">
                </td>
               </tr>
             </table>
             <table class="table" id="user-table">
               
             </table>
         </td>
       </tr>
       <tr>
        <th class="text-right danger" width=15%>비밀번호</th>
        <td width=85%>
          <input type="password" name=pwd size=10>
        </td>
       </tr>
       
       <tr>
        <td colspan="2" class="text-center">
          <input type=submit value="수정">
          <input type=button value="취소" onclick="javascript:history.back()">
        </td>
       </tr>
     </table>
     </form>
    </div>
  </div>
</body>
</html>
 cs

 - detail.jsp에서 게시물을 수정이 가능하게 해주는 코드

 

 

 

# insert.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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
   margin: 0px auto;
   width:700px;
}
h1 {
   text-align: center;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
let fileIndex=0;
$(function(){
    $('#addBtn').click(function(){
        $('#user-table').append(
           '<tr id=f'+fileIndex+'>'
          +'<td width="15%" class="text-right">파일'+(fileIndex+1)+'</td>'
          +'<td width="85%"><input type="file" name=files['+fileIndex+']>'
          +'</td></tr>'
        );
        fileIndex=fileIndex+1;
    });
    $('#removeBtn').click(function(){
        if(fileIndex>0)
        {
            $('#f'+(fileIndex-1)).remove();
            fileIndex=fileIndex-1;
        }
    });
});
</script>
</head>
<body>
  <div class="container">
    <div class="row">
     <h1>글쓰기</h1>
     <form method=post action="insert_ok.do" enctype="multipart/form-data">
     <table class="table">
       <tr>
        <th class="text-right danger" width=15%>이름</th>
        <td width=85%>
          <input type=text name=name size=15>
        </td>
       </tr>
       
       <tr>
        <th class="text-right danger" width=15%>제목</th>
        <td width=85%>
          <input type=text name=subject size=50>
        </td>
       </tr>
       
       <tr>
        <th class="text-right danger" width=15%>내용</th>
        <td width=85%>
          <textarea rows="8" cols="55" name=content></textarea>
        </td>
       </tr>
       <tr>
         <td colspan="2">
             <table class="table">
               <tr>
                <td class="text-right">
                  <input type=button value="add" class="btn btn-xs btn-success" id="addBtn">
                  <input type=button value="remove" class="btn btn-xs btn-warning" id="removeBtn">
                </td>
               </tr>
             </table>
             <table class="table" id="user-table">
               
             </table>
         </td>
       </tr>
       <tr>
        <th class="text-right danger" width=15%>비밀번호</th>
        <td width=85%>
          <input type="password" name=pwd size=10>
        </td>
       </tr>
       
       <tr>
        <td colspan="2" class="text-center">
          <input type=submit value="글쓰기">
          <input type=button value="취소" onclick="javascript:history.back()">
        </td>
       </tr>
     </table>
     </form>
    </div>
  </div>
</body>
</html>
 
 cs

 - 리스트에서 새로운 게시물을 쓸 수 있게 해주는 코드

 

 

 

# delete.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row {
   margin: 0px auto;
   width:350px;
}
h1 {
   text-align: center;
}
</style>
</head>
<body>
   <div class="container">
    <div class="row">
      <h1>삭제하기</h1>
      <form action="delete_ok.do" method="post">
      <table class="table">
       <tr>
         <td>
          비밀번호:<input type=password name=pwd size=15 class="input-sm">
            <input type=hidden name=no value="${no }">
         </td>
       </tr>
       <tr>
         <td class="text-center">
           <input type=submit value="삭제">
           <input type=button value="취소" onclick="javascript:history.back()">
         </td>
       </tr>
      </table>
      </form>
    </div>
   </div>
</body>
</html>
 cs

  - list.jsp에서 게시물을 삭제 가능하게 해주는 코드

 

 

 

반응형
저작자표시

'Spring' 카테고리의 다른 글

[Spring] MyBatis와 연동하여 음악 게시판 만들기  (0) 2020.11.14
[Spring] Spring MVC 구조 자유게시판 만들기 - (3)  (0) 2020.11.10
[Spring] Spring MVC 구조 자유게시판 만들기 - (1)  (2) 2020.11.07
[Spring] Spring 데이터 그리드 리스트 출력하기  (0) 2020.11.03
[Spring] STS & Eclipse 글꼴 설정하기  (2) 2020.10.20
'Spring' Related Articles more