jsp - summernote이용하기

programming/jsp

jsp - summernote이용하기

히연쓰 2021. 5. 11. 18:05

Summernote - Super Simple WYSIWYG editor

Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.

summernote.org

를 이용하여 제작하였당

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>REPLY_BOARD</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="summernote/summernote.min.css" rel="stylesheet">
 
<script src="js/jquery-3.6.0.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="summernote/summernote.min.js"></script>
 
<link href="css/layout.css" rel="stylesheet">
</head>
<body>
    <div class="formBox">
        <h2>자유게시판</h2>
        <form action="board_write_action.jsp" id="joinForm" method="POST">
            <table>
                <colgroup>
                    <col style="width:150px">
                    <col style="width:850px">
                </colgroup>
                <tbody>
<!--                     <tr> -->
<!--                         <th>ID</th> -->
<!--                         <td><input type="text" name="id" id="userID"></td> -->
<!--                     </tr> -->
                    <tr>
                        <th>NAME</th>
                        <td><input type="text" name="name" id="userName" value=""></td>
                    </tr>
                    <tr>
                        <th>E-MAIL</th>
                        <td><input type="text" name="email" id="userEmail" value=""></td>
                    </tr>
                    <tr>
                        <th>SUBJECT</th>
                        <td><input type="text" name="subject" id="subject" value=""></td>
                    </tr>
                    <tr>
                        <th>PASSWORD</th>
                        <td><input type="password" name="password" id="userPassword"></td>
                    </tr>
                    <tr>
                        <th>CONTENTS</th>
                        <td>
                            <textarea name="contents" id="summernote"></textarea>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="btns">
                <input type="submit" value="확인" id="join">
                <input type="reset" value="취소" id="cancel">
            </div>
        </form>
    </div>
    <script>
        $(document).ready(function() {
          $("#summernote").summernote({
              height:350
          });
        });
    </script>
</body>
</html>
 
 
Colored by Color Scripter

cs

->board_write.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

<%@page import="com.heeyeon.model.ReplyBoardDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <%
    request.setCharacterEncoding("UTF-8");
    %>
    <jsp:useBean id="replyBoardBean"
        class="com.heeyeon.model.ReplyBoardBean">
        <jsp:setProperty name="replyBoardBean" property="*" />
    </jsp:useBean>
    <%
    ReplyBoardDao replyBoardDao = new ReplyBoardDao();
    int result = replyBoardDao.insertBoard(replyBoardBean);
    if (result > 0) {
    %>
    <script>
        alert("글이 등록되었습니다");
        location.href = "board_view.jsp";
    </script>
    <%
    } else {
    %>
    <script>
        alert("글 등록이 실패되었습니다.");
        location.href = "board_write.jsp";
    </script>
    <%
    }
    %>
    %>
</body>
</html>
Colored by Color Scripter

cs

-> board_write_action.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

<%@page import="com.heeyeon.model.ReplyBoardBean"%>
<%@page import="com.heeyeon.model.ReplyBoardDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>REPLY_BOARD</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="summernote/summernote.min.css" rel="stylesheet">
 
<script src="js/jquery-3.6.0.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="summernote/summernote.min.js"></script>
 
<link href="css/layout.css" rel="stylesheet">
</head>
<body>
    <%
        int no = Integer.parseInt(request.getParameter("no"));
        ReplyBoardDao replyBoardDao = new ReplyBoardDao();
        ReplyBoardBean replyBoardBean = replyBoardDao.getSelectOne(no);
        System.out.println(replyBoardBean);
    %>
    
    <div class="formBox">
        <h2>자유게시판</h2>
        <form action="board_write_action.jsp" id="joinForm" method="POST">
            <table>
                <colgroup>
                    <col style="width:150px">
                    <col style="width:850px">
                </colgroup>
                <tbody>
<!--                     <tr> -->
<!--                         <th>ID</th> -->
<!--                         <td><input type="text" name="id" id="userID"></td> -->
<!--                     </tr> -->
                    <tr>
                        <th>NAME</th>
                        <td><%=replyBoardBean.getName()%></td>
                    </tr>
                    <tr>
                        <th>E-MAIL</th>
                        <td><%=replyBoardBean.getEmail()%></td>
                    </tr>
                    <tr>
                        <th>SUBJECT</th>
                        <td><%=replyBoardBean.getSubject()%></td>
                    </tr>
                    <tr>
                        <th>PASSWORD</th>
                        <td><input type="password" name="password" id="userPassword"></td>
                    </tr>
                    <tr>
                        <th>CONTENTS</th>
                        <td>
                            <div name="contents" id="summernote" readonly><%=replyBoardBean.getContents()%></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="btns">
                <input type="submit" value="확인" id="join">
                <input type="reset" value="취소" id="cancel">
            </div>
        </form>
    </div>
    <script>
//         $(document).ready(function() {
//           $("#summernote").summernote({
//               height:350
//           });
//         });
        $("#summernote").summernote("destroy");
    </script>
</body>
</html>
 
 
Colored by Color Scripter

cs

-> board_view.jsp

no=1-10까지 지워버려서 그냥 하면 오류가 난다. 그래서 no=11을 작성해줬더니 정상적으로 뜬다

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

@charset "UTF-8";
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    font-family: "Noto Sans KR";
}
a {
    text-decoration:none;
    color:inherit;
}
table {
    border: none;
    border-collapse: collapse;
    border-top: 1px solid #d9d9d9;
}
 
table tr th {
    background-color: #f8f8f8;
}
 
table tr th, table tr td {
    padding: 15px;
    border-bottom: 1px solid #d9d9d9;
}
 
table tr td input[type="text"], table tr td input[type="password"],
    table tr td select {
    height: 30px;
    border: 1px solid #d9d9d9;
    padding: 5px;
    border-radius: 3px;
    width: 50%;
}
 
table tr td select {
    width: 120px;
}
 
.formBox {
    width: 1000px;
    margin: 100px auto;
}
 
.formBox h2 {
    margin-bottom: 50px;
    text-align: center;
}
 
.formBox .btns {
    text-align: center;
    margin-top: 50px;
}
 
.formBox .btns * {
    display: inline-block;
    width: 150px;
    height: 50px;
    line-height:50px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: 500;
    background-color: rgb(109, 109, 109);
    color: #fff;
}
 
.formBox #contents {
    width:100%;
    min-height:400px;
    resize: none;
    border: 1px solid #d9d9d9;
    padding: 5px;
}
 
.formBox .btns #join {
    background-color: rgb(1, 121, 177);
}
 
.formBox .pagination {
    margin-top: 50px;
    text-align: center;
}
.formBox .pagination a {
    display: inline-block;
    width:30px;
    height:30px;
    background-color: #000;
    color:#fff;
    font-size: 14px;
    line-height: 30px;
    border-radius: 3px;
}
 
 
#list tbody td {
    text-align: center;
}
#list tbody tr:hover {
    background-color:#000;
    color:#fff;    
}
 
.formBox .pagination a.clicked {
    background-color: rgb(1, 121, 177);
}
.formBox .pagination a .material-icons {
    width:30px;
    height:30px;
    line-height: 30px;
    vertical-align: top;
}
.searchBox {
    text-align: center;
    width:100%;
    background-color: #f8f8f8;
    border: 1px solid #d9d9d9;
    padding:30px 0;
    margin-top:50px;
}
.searchBox .searchWord{
    height:40px;
    min-width:300px;
    display: inline-block;
    margin:0;
    padding:0;
    border:1px solid #d9d9d9;
    vertical-align: top;
}
.searchBox .select{
    height:40px;
    line-height: 40px;
    display: inline-block;
    margin:0;
    padding:0;
    border:1px solid #d9d9d9;
    padding:0 40px 0 20px;
    appearance: none;
    background: url("../images/bgSelect.png") no-repeat right 0 top 50%;
    background-size: 32px;
    
}
.searchBox input[type="submit"] {
    height:40px;
    background-color: #000;
    color:#fff;
    border-radius: 3px;
    padding:0 20px;
    border-color:#000;
}
Colored by Color Scripter

cs

-> layout.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
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

package com.heeyeon.model;
 
public class ReplyBoardBean {
    private int no;
    private String name;
    private String email;
    private String subject;
    private String password;
    private String contents;
    
    public ReplyBoardBean() {
        super();
    }
    
    public ReplyBoardBean(int no, String name, String email, String subject, String password, String contents) {
        super();
        this.no = no;
        this.name = name;
        this.email = email;
        this.subject = subject;
        this.password = password;
        this.contents = contents;
    }
    public int getNo() {
        return no;
    }
    public void setNo(int no) {
        this.no = no;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public String getSubject() {
        return subject;
    }
    public void setSubject(String subject) {
        this.subject = subject;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getContents() {
        return contents;
    }
    public void setContents(String contents) {
        this.contents = contents;
    }
    @Override
    public String toString() {
        return "ReplyBoardBean [no=" + no + ", name=" + name + ", email=" + email + ", subject=" + subject
                + ", password=" + password + ", contents=" + contents + "]";
    }
    
    
    
}
 
Colored by Color Scripter

cs

-> ReplyBoardBean.java

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

package com.heeyeon.model;
 
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
 
public class ReplyBoardDao {
    String driver = "oracle.jdbc.driver.OracleDriver";
    String url = "jdbc:oracle:thin:@localhost:1521:xe";
    String id= "heeyeon0";
    String pw ="1234";
    
    Connection con = null;
    PreparedStatement pstmt = null;
    ResultSet rs = null;
    
    
    private void getConnection() {
        try {
            Class.forName(driver);
            con = DriverManager.getConnection(url,id,pw);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
    private void close(ResultSet rs,PreparedStatement pstmt, Connection con) {
        try {
            if(rs!=null) rs.close();
            if(pstmt!=null) pstmt.close();
            if(con!=null) con.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    private void close(PreparedStatement pstmt, Connection con) {
        try {
            if(pstmt!=null) pstmt.close();
            if(con!=null) con.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    public int insertBoard(ReplyBoardBean replyBoardBean) {
        int result = 0;
        try {
            getConnection();
            String sql = "INSERT INTO TEMP VALUES (TEMP_SEQ.NEXTVAL,?,?,?,?,?)";
            pstmt = con.prepareStatement(sql);
            pstmt.setString(1, replyBoardBean.getName());
            pstmt.setString(2, replyBoardBean.getEmail());
            pstmt.setString(3, replyBoardBean.getSubject());
            pstmt.setString(4, replyBoardBean.getPassword());
            pstmt.setString(5, replyBoardBean.getContents());
            result = pstmt.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            close(pstmt,con);
        }
        return result;
    }
    
    public ArrayList<ReplyBoardBean> getAllBoard() {
        ArrayList<ReplyBoardBean> replyBoardList = new ArrayList<ReplyBoardBean>();
        
        try {
            getConnection();
            String sql = "SELECT * FROM TEMP";
            pstmt = con.prepareStatement(sql);
            rs = pstmt.executeQuery();
            while(rs.next()) {
                ReplyBoardBean replyBoardBean = new ReplyBoardBean();
                replyBoardBean.setNo(rs.getInt("no"));
                replyBoardBean.setName(rs.getString("name"));
                replyBoardBean.setEmail(rs.getString("email"));
                replyBoardBean.setSubject(rs.getString("subject"));
                replyBoardBean.setPassword(rs.getString("password"));
                replyBoardBean.setContents(rs.getString("contents"));
                replyBoardList.add(replyBoardBean);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            close(rs,pstmt,con);
        }
        return replyBoardList; 
    }
    
    
    public ReplyBoardBean getSelectOne(int no) {
        ReplyBoardBean replyBoardBean = new ReplyBoardBean();
        try {
            getConnection();
            String sql = "SELECT * FROM TEMP WHERE NO = ?";
            pstmt = con.prepareStatement(sql);
            pstmt.setInt(1,no);
            rs = pstmt.executeQuery();
            if(rs.next()) {
                replyBoardBean.setNo(rs.getInt("no"));
                replyBoardBean.setName(rs.getString("name"));
                replyBoardBean.setEmail(rs.getString("email"));
                replyBoardBean.setSubject(rs.getString("subject"));
                replyBoardBean.setPassword(rs.getString("password"));
                replyBoardBean.setContents(rs.getString("contents"));
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            close(rs,pstmt,con);
        }
        return replyBoardBean;
    }
}
 
 
Colored by Color Scripter

cs

-> ReplyBoardDao.java

여전히 사라지지 않는 실행은 되지만 사라지지 않는 오류 ..

왜이럴까 ? ......

? 내가 이거 쓴다고 다 지워버려서 NO = 11 부터 시작되고 있다.

다시 1부터 시작되게 하려면 어떻게 해야하는가 ? ....... 알려주세요........

'programming > jsp' 카테고리의 다른 글

jsp - BEAN 작성 쉽게하기 (0)	2021.05.12
jsp - summernote 이용하기2 (0)	2021.05.11
JSP-자유게시판 (0)	2021.05.04
jsp 회원가입 (2)	2021.05.03
jsp-oracle연결해서 사용 (1)	2021.04.29

현재글jsp - summernote이용하기

안뇽 여긴 내가 그냥 놀고 먹는 곳이야 🤩

삼척, 경포호수,

Today :
Yesterday :

히연쓰 life