본문 바로가기

프로젝트/자바 빈과 JSP만을 사용한 게시판 만들기21

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.
8장 테이블과 시퀀스 생성 데이터베이스를 접근할 때 사용하는 계정이나, 데이터베이스 클라이언트 툴에 대한 언급은 따로 하지 않습니다. 만약 필요하다면 댓글을 남겨 주시면 따로 포스팅하도록 하겠습니다. 이점 양지해 주시기 바랍니다. 프로젝트에서 사용하는 테이블과 시퀀스는 아래와 같습니다. 테이블 board : 본문 글이 저장되는 테이블 boardAtt : 첨부 파일이 저장되는 테이블 시퀀스 seq_board : board 테이블에서 사용하는 시퀀스 seq_boardAtt : boardAtt 테이블에서 사용하는 시퀀스 board 테이블 생성 CREATE TABLE BOARD ( SERIAL NUMBER, MDATE DATE, WORKER VARCHAR2(20 BYTE), SUBJECT VARCHAR2(200 BYTE), "CONTEN.. 2020. 5. 10.
7장 프로그램및 라이브러리 설치-file upload API 설치 본 세미 프로젝트를 진행하는 데 있어서 설치하는 마지막 라이브러리입니다. 파일을 업로드하기 위해서 사용되는 라이브러리의 종류들이 꽤나 많이 존재하고, 심지어는 자바 개발자라면 파일을 업로드하는 자바 프로그램을 손수 만들어 사용할 수 도 있습니다. 그러나 프로그램의 안전성이나 개발 생산성이 그리 높지 않기 때문에 대부분 외부에서 개발된 라이브러리를 사용합니다. 대표적으로 servlets.com 사이트에서 재공 하는 라이브러리가 있는 데 사용이 굉장히 쉽고 편리하지만 상용 프로그램이라는 특징이 있습니다. 본 프로젝트에서 사용하려는 라이브러리는 apache 재단에서 무료로 재공 하는 라이브러리입니다. 사이트 : apache.org 파일을 다운로드 받아 압축을 해제한 후 이클립스 프로젝트 폴더 WebConten.. 2020. 5. 10.
6장 프로그램및 라이브러리 설치-oracle 설치 설치할 오라클 버전은 11gXe 버전이지만, 어떤 버전의 오라클을 사용해도 상관없습니다. 다만, 다른 종류의 DBMS라면 실행되는 SQL 문장들을 해당 DBMS 유형으로 바꾸어 작성해야 하며, 자바에서 데이터베이스에 접근할 때 사용하는 JDBC의 정보도 해당 DBMS에 맞게 수정해야 합니다. 따라서 본 포스팅에서는 오라클을 사용한다는 가정하에 진행하도록 하겠습니다. 오라클 XE 버전 간단 소개 XE 버전은 오라클사에서 오라클의 사용자 경험을 늘리기 위해 무료로 재공 되는 DBMS이다. 하나의 데이터베이스만을 재공 하며 추가로 데이터베이스를 만들 수 없다. 상용으로 사용할 만큼의 재원은 갖고 있지 않다.(CPU 수 제한, 메모리 제한, 동시접속자 수 제한 등등이 존재함) 포스팅 시점에서는 18cXE 버전까.. 2020. 5. 10.
5장 프로그램및 라이브러리 설치-eclipse 세 번째로 설치해야 할 프로그램은 자바 진영에서 가장 인기 있는 IDE툴 중 하나인 eclipse입니다. 좀 느리고 무겁다는 평들이 많이 있지만 여러 개의 프로젝트를 관리하고 완성된 프로젝트를 간단한 방법으로 배포 파일을 만들 수 있는 툴입니다. 사이트 : eclipse.org 위의 사이트를 방문하시면 굉장히 많은 이클립스 프로젝트들을 볼 수 있으며 오른쪽 상단 'Download' 메뉴를 선택하면 사용자의 운영체제에 맞는 최신 버전의 이클립스를 다운 로드할 수 있는 메뉴가 보입니다. 만약 다른 버전의 이클립스를 원한 다면 'Download Packages'를 선택하면 됩니다. 어떤 버전을 다운로드해도 상관은 없지만, 반드시 'Eclipse IDE for Enterprise Java Developers'를.. 2020. 5. 8.
4장 프로그램및 라이브러리 설치-Tomcat 설치할 두 번째 프로그램입니다. Tomcat은 JSP(Java Server Page)로 만들어진 프로그램을 컴파일하고 웹에서 실행해 주는 프로그램들 중 하나이며 티멕스의 jeus, 레드헷의 jboss(WildFly)등이 Tomcat과 유사한 기능들을 하는 컨테이너들입니다. 사이트 : tomcat.apache.org 포스팅을 하는 시점에서 Tomcat 10 (alpha) 버전까지 배포되고 있지만 Tomcat 8 버전의 32-bit/64-bit의 installer를 다운로드하여 설치하도록 하겠습니다. 설치 과정은 일반 프로그램들의 설치 과정과 별반 다르지 않기 때문에 설치 과정에 대한 이미지는 따로 올리지 않겠습니다. 다만 설치중 admin 계정에 따른 아이디와 암호, 그리고 http 포트번호를 8080에서.. 2020. 5. 8.
3장 프로그램및 라이브러리 설치-JDK 이번 장이 아마도 가장 힘들고 긴 장이 될 것이라 생각됩니다. 개발 환경 구축이야 말로 '개발의 절반'이라는 말이 있듯이 처음 입문자들에겐 개발도 해 보기 전에 더 없는 좌절감을 줄 수 있는 일이 개발환경 구축 작업입니다. https://repl.it 사이트와 같이 개발 환경을 미리 구축해 놓고, 개발자는 개발만 해도 되는 환경을 재공 하는 서비스도 있지만, 항상 네트워크가 연결되어 있어야 한다는 점과, 서비스되지 않는 요소들은 사용할 수 없다는 몇 가지 단점이 존재합니다. 그러나 그런 것 보다도 개발자라면 적어도 자기가 개발하려는 프로젝트에 필요한 요소들의 종류와 설치 방법쯤은 알고 있어야 되다는 것이 저의 지론입니다. ^^ 설치해야 할 라이브러리와 프로그램들은 아래와 같습니다. JDK 설치 Tomca.. 2020. 5. 8.
2장 개발환경 본 콘텐츠를 진행할 때 사용되는 개발 환경입니다. os : window 10 IDE : eclipse EE Database : oracle 11gXe web container : Tomcat 8.X java : jdk1.8 file upload API : apache commons API 본 콘텐츠들에 사용된 요소들이지만 굳이 개발환경에 종속적일 필요는 없을 것 같습니다. 물론 저의 개발 환경과 이 글을 보고 계시는 독자분들과 완전 동일한 개발 환경을 갖고 있다면 포스팅을 참조할 때 더 많은 이해와 도움이 되겠지만 설령 조금 다르더라도 충분히 이해할 수 있을 것이라 생각됩니다. 단, 개발 환경별 주의 사항이나 참조 사항은 아래를 참조해 주시기 바랍니다. window 10과 window 7에서 메뉴의 호출.. 2020. 5. 8.
1장 개요 현재 웹 서비스를 하기 위한 페이지를 만들기 위해서는 굉장히 다양한 기술들과 노하우가 필요한 것이 사실입니다. 웹 프로그래밍을 시작하려고 하는 입문자들에게는 더없이 높은 벽이기도 하지요. 따라서 이번 카테고리에서는 자바 빈과 순수한 JSP만을 사용하여 웹 서비스 중 하나인 게시판을 만드는 과정을 포스팅하려 합니다. 개발 코드에 중점을 두었기 때문에 다소 UI는 어설프고, UX는 어디가 있는지 찾아볼 수는 없지만(^^) 천천히 실습을 병행하시면서 콘텐츠를 따라오시게 되면 많은 것을 얻을 수 있을 것입니다. 본 카테로리를 통해 배울 수 있는 요소는 아래와 같습니다. 웹의 요청 정보(사용자의 요청정보)를 자바 빈에 전달할 수 있다. 처리된 결과를 웹에 반환할 수 있다. 파일 업로드/다운로드를 구현할 수 있다... 2020. 5. 8.
반응형

티스토리툴바