프로젝트/Summernote를 활용한 WYSIWYG 게시판 만들기7 1. 개요 및 개발환경 개요 본 문서는 중급자 이상인 독자들에게 맞추어져 있습니다. 입문자나 초급자인 경우 문서를 이해하는데 다소 어려움이 있을 것 같습니다. 개발환경에서 언급한 것 같이 기본적으로 javascript, jQuery, 서버페이지(jsp), servlet의 사용 경험이 있어야 합니다. 그러나 초급자분들도 쉽게 이해할 수 있도록 설명을 최대한 자세히 넣도록 하겠습니다. 위지윅 에디터에 대한 내용이지만 게시판류의 프로그램처럼 수정, 삭제, 조회, 상세 보기 처리에 대한 부분도 추가되어 있습니다. 주요 실행 화면 summernote를 이해하기 위해 필요한 내용이 아닌 레이아웃 부분은 최대한 배제하였습니다. 개발 환경 개발 툴 종류 설명 Database mysql 5.x Server Tomcat 8.x servlet 3.. 2023. 1. 1. 2. 기본 구조 CDN을 연결하고 summernote 함수를 실행하는 것만으로도 기본 구조를 만들 수 있습니다. 물로 작성된 내용을 DB에 저장하는 서버 페이지는 따로 있어야 하겠지요~ step 1. 이클립스를 사용하여 Dynamic Web Project를 생성한 후 필요한 파일을 생성합니다. 만들어야 하는 파일의 개수가 다소 많지만은 지극히 통상적인 파일의 수라고 할 수 있습니다. 파일의 종류나 개수에 주늑들어 시작도 하기 전에 GG 날리지 마시고 부딪쳐 보세요~^^ - DBConn.java : DB 연결을 위한 클래스 - FileUpload.java : Servlet 3.x를 사용한 파일 업로드 클래스 - SnDao.java : CRUD를 위한 클래스 - SnVo.java : Value Object 클래스 - css.. 2023. 1. 1. 3. 에디터 화면 및 저장 만들기 가장 많은 내용들을 설명하고 있는 부분입니다. 많이 복잡하더라도 최종 결론은 그리 복잡하지 않으므로 하나씩 실행해 보시면서 따라오시기 바랍니다. 기본 페이지 insert.jsp 페이지를 열고 CDN과 기본 폼을 html로 작업합니다. 물론 jquery로 summernote 함수를 호출하는 것만으로도 기본 위지윅 에디터 화면을 볼 수 있습니다. 파일명 : webapp/insert.jsp SUMMERNOTE Editor 제목 : IT 여행자의 수첩입니다. SAVE 목록으로 부트 스트랩과 jQuery와 관련된 CDN은 summernote.org의 Getting started 항목을 확인하시면 쉽게 작업할 수 있습니다. 전체 화면 배치와 한글 폰트 추가 전체 화면의 넓이와 에디터를 비롯한 전체 화면을 브라우저 .. 2023. 1. 1. 4. 수정하기 입력할 때와 마찬가지로 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; p.. 2023. 1. 1. 5. 삭제하기 삭제 처리에서 중요한 내용은 본문(doc) 영역에 삭제할 이미지 정보가 들어 있다는 것입니다. 따라서 DB에서 해당 자료를 삭제하기 전에 먼저 본문에 들어 있는 이미지 정보를 가져와 따로 삭제해야 합니다. 만약 Base64 방법으로 이미지가 본문에 들어 있다면 관련 내용을 삭제할 때 함께 삭제되겠지만 본 글에서는 이미지 정보를 따로 저장 장치에 저장해기 때문에 파일을 별도로 삭제 처리를 해야 합니다. 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.Li.. 2023. 1. 1. 6. 조회하기 특별한 UI나 기능을 모두 제외하고 단지 제목으로 검색이 되도록 작성하였습니다. 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; Prepa.. 2023. 1. 1. 7. 상세보기 목록에서 한건의 serial 번호를 받아와 해당 자료를 표시합니다. 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; PreparedStat.. 2023. 1. 1. 이전 1 다음 반응형
