본문 바로가기
프로젝트/Summernote를 활용한 WYSIWYG 게시판 만들기

4. 수정하기

by IT여행자 2023. 1. 1.
728x90

입력할 때와 마찬가지로 summernote api를 사용하여 이미지의 추가 삭제를 처리하고 나머지는 dao 객체에게 request를 전달하여 나머지를 처리하도록 하겠습니다.

1) dao수정하기


SnDao 클래스에 modify()메서드를 추가하여 수정 부분을 처리하도록 하겠습니다.

 

package bean;

import java.io.File;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class SnDao {
	String uploadPath = "N:\\workspace\\summernote\\src\\main\\webapp\\";
    Connection conn ;
    PreparedStatement ps;
    ResultSet rs;
    String sql ;
    public SnDao(){
        try{
            conn = new DBConn().getConn();
        }catch(Exception ex){
            ex.printStackTrace();
        }
    }

    … 

    public boolean modify(SnVo vo) {
    	boolean b=false;
    	sql = "update summernote set subject=? , doc=? where serial = ? ";
    	try {
    		conn.setAutoCommit(false);
    		ps = conn.prepareStatement(sql);
    		ps.setString(1, vo.getSubject());
    		ps.setString(2, vo.getDoc());
    		ps.setInt(3, vo.getSerial());
    	
    		int c = ps.executeUpdate();
    		if(c>0){
    			conn.commit();
    			b=true;
    		}else{
    			conn.rollback();
    		}    		
    		
    	}catch(Exception ex) {
    		ex.printStackTrace();
    	}
    	
    	return b;
    	
    }

}

 

2) 수정 폼 만들기


레이아웃은 입력폼과 거의 똑같이 만들어지며, 단지, 입력과 다른 점이 있다면  편집한 자료의 serial값을 갖고 데이터를 먼저 읽어 들여 화면에 표시해 주는 것입니다.

 

<%@page import="bean.SnVo"%>
<%@page import="bean.SnDao"%>
<%@page import="bean.DBConn"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ 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>
<link rel='stylesheet' type='text/css' href='./css/sn.css'>
<link
	href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
	rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script
	src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link
	href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css"
	rel="stylesheet">
<script
	src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

<link rel='stylesheet' type='text/css' href='./css/sn.css'>

</head>
<body>

<%

request.setCharacterEncoding("utf-8");
SnDao dao = new SnDao();
String serial = request.getParameter("serial");
SnVo vo = dao.view(serial);

%>
<div id='list'>
	<h1>수정하기</h1>
	<div id='summer'>
		<form name='frm_summbernote' method='post' action='modify_result.jsp'>
			<label>제목 : <input type='text' size='90' name='subject' value='<%=vo.getSubject()%>'></label>
			<br />
			<textarea id='summernote' name='doc'><%=vo.getDoc() %></textarea>

			<button>수정하기</button>
			<a href='list.jsp'>목록으로</a>
			<input type='hidden' name='serial' value='<%=vo.getSerial() %>' />
		</form>
	</div>
</div> 
	<script src = './js/sn.js'></script>
</body>
</html>

 

summernote 편집창에서 일어나는 이미지 추가나 삭제등의 이벤트 처리는 입력 부분에서 이미 설명해 놨기 때문에 다시 설명하지는 않겠습니다. serial 번호에 해당하는 한건의 데이터를 읽어 들이는 방법은 “상세 보기” 항목에 설명되어 있습니다.

 

3) 수정 결과 페이지지

 

<%@page import="bean.SnDao"%>
<%@page import="bean.SnVo"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="com.mysql.cj.xdevapi.PreparableStatement"%>
<%@page import="bean.DBConn"%>
<%@page import="java.sql.Connection"%>
<%@ 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>
<link rel='stylesheet' type='text/css' href='./css/sn.css'>


</head>
<body>
<%
	request.setCharacterEncoding("utf-8");
		
	String serial = request.getParameter("serial");
	String subject = request.getParameter("subject");
	String doc = request.getParameter("doc");

	SnVo vo = new SnVo();
	vo.setSerial( Integer.parseInt(serial) );
	vo.setSubject(subject);
	vo.setDoc(doc);
	
	SnDao dao = new SnDao();
	boolean b = dao.modify(vo);
	
	if( !b ){
		out.print("오류 발생 !!!!!");
		out.print("<a href='list.jsp'>목록 화면</a>");
		return;
	}

%>
<div id='list'>
	<h1>수정 결과</h1>
	<div class='item'>
		<div class='subject'><%=subject %> </div>
		<div class='doc'><%=doc %></div>
	</div>
	<hr/>
	<a href='list.jsp'>목록으로</a>
</div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'프로젝트 > Summernote를 활용한 WYSIWYG 게시판 만들기' 카테고리의 다른 글

2. 기본 구조  (0) 2023.01.01
3. 에디터 화면 및 저장 만들기  (0) 2023.01.01
5. 삭제하기  (0) 2023.01.01
6. 조회하기  (0) 2023.01.01
7. 상세보기  (0) 2023.01.01

관련글

티스토리툴바