본문 바로가기

프로젝트29

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.
Servlet과 JSTL이 중요한 이유~ 먼저, Servlet이 중요한 이유는, 자바 진영에서 사용되는 대부분의 Framework의 기본 원리는 Servlet 구조를 갖고 있기 때문입니다. 클라이언트의 요청 정보를 외부에 노출시키지 않고 전달받아 처리한 후 아무도 모르게(?) 다시 클라이언트에게 전달되는 구조를 갖고 있죠. 특히나 웹과 관련된 프로젝트에서 신경 쓰이고 고민스러운 것이 MVC(Model, View, Control)의 분리입니다. 이 중에서 Model 부분은 대부분 분리가 되어 있거나 분리하는데 큰 어려움이 없지만, View부분과 Control 부분의 분리는 쉽지 않습니다. 왜냐하면 이 두 부분은 직간접적인 연결 고리가 있어야 하기 때문입니다. 그건 그런데, 왜 굳이 MVC를 분리해야 하는가에 대한 원론적인 질문을 하게 됩니다. 이.. 2020. 7. 12.
20장 후기 및 배포 파일정보 모든 요소를 모두 자세히 설명드리지는 못했지만 지면이 굉장히 길이졌습니다. 그러나 실제로 코딩된 내용을 차근 차근 보다 보면 그리 많은(?) 내용은 아닐것이라 생각됩니다. 서두에서도 언급했지만 최대한 UI나 UX에 대한 요소는 배제했습니다. 따라서 실행 결과가 그리 멋스럽지는 못했네요. 패포 파일은 zip 파일로 압축했습니다. 적당한 폴더에 압축을 해제 한 후 이클립스에서 import 메뉴를 사용하여 프로젝트를 가져오면 프로그램을 실행해 볼 수 있습니다. 물론 데이터베이스와 테이블에 대한 내용은 각자 별로의 조치가 필요합니다. 끝까지 이 글을 읽어주신 모든 분들께 감사의 말씀을 전하며 이번 프로젝트를 마무리짓겠습니다. 감사합니다. 2020. 5. 14.
19장 댓글 처리 이제 마지막으로 댓글 처리를 해 보도록 하겠습니다. 전체적인 프로그램의 흐름이나 처리 내용은 게시판 입력과 거의 동일합니다. 단지, 다른점이 하나 있다면 댓글이 저장될 때 자신의 원본글의 serial 번호를 pSerial 컬럼에 저장해야 한다는 것입니다. 그렇게 저장되어야 계층형 쿼리를 사용하여 목록을 나열할 때 이상이 없이 나열 됩니다. 이점을 염두해 두고 프로세스를 이해해 주시기 바랍니다. 1. 사용자가 상세보기(view.jsp) 페이지에서 댓글 달기 버튼을 클릭합니다. 2. 자바스크립트(board.js)에 의해서 댓글폼 화면이 실행됩니다. // 댓글 버튼 클릭시 if($id('btnRepl') != null){ let btn = $id('btnRepl'); btn.onclick = function(.. 2020. 5. 10.
18장 삭제 처리 이번 포스팅에서는 게시물을 삭제하는 부분을 만들겠습니다. 삭제와 관련된 별도의 폼 페이지는 없습니다. 스크립트를 통해 삭제 정보를 BoardController에게 보내고 BoardController는 관련 정보를 BoardDao에 전달하여 삭제 처리를 한 후 그 결과를 result.jsp 페이지에 보내 삭제된 결과만을 alert()창으로 표시한 후 다시 select.jsp를 호출하여 목록을 표시해 주도록 작성하였습니다. 당연한 이야기 이지만, 암호가 다르거나 댓글이 있는 글은 삭제되지 않습니다. 그럼, 삭제 프로세스의 흐름을 간단한 그림으로 살펴 보도록 하겠습니다. 1. 먼저 사용자는 상세보기(view.jsp) 페이지에서 삭제 버튼을 클릭합니다. 2. 삭제 버튼이 클릭되면 javascript 파트에서 암.. 2020. 5. 10.
17장 수정 처리 작업 파일 : /WebContent/board/modify.jsp 사용자가 수정하려는 작업은 크게 세 가지로 나누어 볼 수 있습니다. 내용만 수정하는 경우 첨부 파일만 수정하는 경우 내용+첨부 파일 모두를 수정하는 경우 위의 세 가지를 다시 두 가지로 함축하면 내용은 무조건 수정된다고 생각하고 첨부파일의 수정 여부만을 놓고 보면, 첨부파일을 추가하는 경우 첨부파일을 제거하는 경우 첨부파일을 부분 제거, 추가하는 경우 와 같을 것입니다. 이 부분은 실제로 BoardDao의 modifyR()에서 처리하겠지만 프로세스가 어떻게 흘러가는지 염두해 두고 진행해 주시기 바랍니다. 먼저 작업의 결과 동영상을 보도록 하겠습니다. [modify.jsp 전체 코드] 자유 게시물 수정 작성자 제 목 파일첨부 0){ %> 첨.. 2020. 5. 10.
16장 상세보기및 파일 다운로드 작업 페이지 : /WebContent/board/view.jsp select.jsp 페이지에서 게시물의 세부적인 내용을 보기 위해 목록의 한 행을 클릭하면 보게 되는 페이지 입니다. ... 물론 자바스크립트 함수 board.view()에 의해 index.jsp?inc=./board/view.jsp 가 태그의 actioin값으로 전달됩니다. 이 때 view.jsp 페이지에 넘어가는 주요 정보는 nowPage, findStr, serial 입니다. 세부 내용은 자바스크립 코드를 확인해 보시기 바랍니다. 첨부파일이 있는 게시물의 상세보기 하면의 예입니다. [전체 코드] 자유 게시물 상세보기 작성자 | 2020. 5. 10.
15장 게시물 입력폼 만들기 이번 장에서는 게시물을 입력하기 위한 폼을 만들어 보도록 하겠습니다. 작업 파일명 : /WebContent/board/register.jsp 먼처 처리 결과에 대한 간단한 영상을 보시기 바랍니다. 파일 업로드 과정 게시물 저장및 파일 업로드에 대한 전체적인 프로세스의 흐름은 아래의 그림과 같습니다. 차근 차근 만들어 봅시다. 검색 페이지(select.jsp)에서 '입력' 버튼을 클릭하면 board.js에 있는 이벤트 처리 부분에서 './board/register.jsp' 파일이 inc 파라미터 변수에 담겨져 index.jsp 에 보내지면 id='content' 영역에 동적으로 include 됩니다. // select.jsp 페이지 일 부분 // board.js 일부분 let url = 'index.jsp.. 2020. 5. 10.
14장 검색및 페이징 작업 파일 : /WebContent/board/select.jsp 검색 및 페이징 처리를 위한 웹 페이지들은 가장 많은 변화를 줄 수 있으며 , 처리 방법 또한 굉장히 다양한 요소를 품고 있는 페이지가 아닐까 합니다. 또한 검색 프로그램은 사용자 UI와 가장 밀접한 관계를 갖고 있기 때문에 MVC를 구현하고자 할 때 가장 어려운 부분 중 하나 이기도 합니다. MVC: Model, View, Control를 의미하며, 대부분 데이터, UI, 제어의 의미를 갖고 있습니다. 검색 및 페이징 처리 페이지의 기본 흐름은 아주 단순합니다. '변경된 값을 사용하여 자신이 자신을 호출한다.' 입니다. 여기서 변경된 값이라는 것은 아래와 같습니다. 검색어가 변경된 경우 페이지를 이동한 경우 HTTP 프로토콜의 특징중 하.. 2020. 5. 10.
13장 Dao와 Vo 본 포스팅에서 사용되는 자바 클래스들의 종류와 용도입니다. 클래스명 설명 BoardDao.java BoardController로 부터 요청사항을 전달받아 처리한 후 그 결과를 다시 BoardController에게 전달하는 클래스. Page.java 게시물 목록을 볼 때 페이징 처리를 하기 위한 클래스 BoardVo.java 게시물 한 건에 대한 데이터 저장 클래스 AttVo.java 첨부파일 한 건에 대한 데이터 저장 클래스 DBConn.java 오라클 데이터베이스를 연결하기 위한 클래스 FileUpload.java 첨부파일을 업로드 하기위한 클래스 BoardController 사용자의 요청정보를 전달받아 BoardDao에 전달하고 처리된 결과를 BoardDao에게서 리턴받아 사용자에게 전달하는 클래스 .. 2020. 5. 10.
12장 페이지 동적 삽입 11장 메인 페이지와 로그인 처리 만들기에서 이미 언급되었지만, JSP에서 외부의 페이지를 삽입하는 방법을 보다 자세하게 알아보고 진행하도록 하겠습니다. JSP에서 외부 페이지를 삽입하는 방법은 크게 두 가지로 나뉩니다. 정적 삽입 : 지시문 사용 동적 삽입 : 액션 태그 사용 정적 삽입 방법 : 파일명 대신 변수를 사용할 수 없다(파일의 가변성이 없다) 파일의 소스 코드가 그대로 삽입된다. 따라서 변수명 등의 중복 트러블 등이 발생할 수 있다. 동적 삽입 방법 : 파일명을 변수에 담아 대입할 수 있다(파일의 가변성이 있다) 파일의 실행 결과가 삽입되기 때문에 정적 삽입처럼 변수명의 중복 트러블 등과 같은 문제가 발생하지 않는다. 위에서 언급한 특성뿐만 아니라 더 복잡한 내용들이 포함되어 있습니다. 보다.. 2020. 5. 10.
11장 메인 페이지와 로그인 처리 만들기 프로젝트의 시작과 전체 페이지의 운영을 담당하는 메인 페이지를 만들겠습니다. A. 관련 파일명 WebContent/index.jsp, header.jsp, footer.jsp, log.jsp, login_out.jsp WebContent/css/index.css, board.css WebContent/js/index.js, board.js 메인 페이지에서 구현할 기능은 아래와 같습니다. 전체 레이아웃 구성. 로그인 여부에 따른 로그인/로그아웃 페이지 표시 메뉴나 사용자 요청에 따른 페이지 처리 A.1 전체 레이아웃 설정 위의 그림과 같은 골격을 갖기 위해 먼저 index.jsp 페이지에서 태그들을 사용하여 기초작업을 합니다. HTML5에 의하면 메뉴나 링크 모임 같은 것은 태그를, 헤더는 모든 페이지를 .. 2020. 5. 10.
10장 파일구조및 목록 게시판 하나만을 만드는 것이라 파일의 개수가 적을까 생각했다면 아마도 너무 놀랄 수도 있지만 차근차근 만들어가다 보면 어느새 파일의 내용들이 모두 채워져 있을 거라 생각합니다. 파일의 개수만 보고 좌절하거나 낙심하지 마시고 차근차근 만들어 갑시다. Dao 및 Vo (src/bean) BoardController.java ( 요청정보 처리) BoardDao.java (게시판 전반에 걸친 처리) DBConn.java (데이터 베이스 연결) Page.java ( 게시판 목록의 페이지 처리) BoardVo.java (게시판 입출력 자료 저장) AttVo.java (첨부 파일 정보) FileUpload ( 파일 업로드) 게시판 관련 웹페이지 (WebContent/board) insert.jsp (입력 페이지) m.. 2020. 5. 10.
9장 UI 설계(와이어 프레임) 전체적인 레이아웃을 와이어 프레임 형태로 만들어 이미지 슬라이드로 재공 합니다. 실제로 만들어질 웹페이지와는 약간의 차이가 있을 수 있겠지만 찬찬히 살펴보시기 바랍니다. 버튼과 같은 이벤처 처리 방향이나, 페이지의 표시되는 내용에 대한 설명 등등이 기술되어 있는 스토리 보드를 봐야 프로젝트의 흐름을 보다 정확하게 이해할 수 있겠으나 전체 페이지에 게시판이라는 콘텐츠만 있는 관계로 전체적인 레이아웃만을 살펴봤습니다. 보다 구체적인 내용은 실제 HTML과 CSS를 작업할 때 언급하도록 하겠습니다. [관련 코딩 동영상- 전체 골격(묵음)] [관련 코딩 동영상-메뉴 영역추가(묵음)] 2020. 5. 10.
반응형

티스토리툴바