자바빈/커넥션 풀/세션을 사용한 Ajax 기반의 게시판 시스템

Presentation on theme: "자바빈/커넥션 풀/세션을 사용한 Ajax 기반의 게시판 시스템"— Presentation transcript:

1 자바빈/커넥션 풀/세션을 사용한 Ajax 기반의 게시판 시스템
12 자바빈/커넥션 풀/세션을 사용한 Ajax 기반의 게시판 시스템 이번 Chapter에서는 웹 프로그래밍의 구조를 좀 더 이해하기 위해 jQuery, 자바빈, 커넥션 풀, 세션을 사용한 게시판 시스템을 작성해 본다.

2 목차(1/2) 게시판 시스템의 개요 게시판 필요 테이블 작성 게시판 자바빈 작성 board 테이블의 구조
01 게시판 시스템의 개요 02 게시판 필요 테이블 작성 board 테이블의 구조 03 게시판 자바빈 작성 데이터 저장빈(BoardDataBean.java) DB 처리빈(BoardDBBean.java)

3 목차(2/2) 게시판 JSP 페이지 작성 메인 페이지 작성하기 글쓰기 페이지 작성하기
04 게시판 JSP 페이지 작성 메인 페이지 작성하기 글쓰기 페이지 작성하기 글목록 보기 페이지 작성(글내용 보기 포함) 글수정 및 삭제 페이지 작성(글내용 보기 포함)

4 게시판 시스템의 개요 01 게시판 시스템의 기본 구조 ▲ 게시판 시스템의 기본 구조

5 게시판 시스템의 개요 게시판 시스템의 기본 구조 [글쓰기]-사용자가 게시판에 글 쓰는 것을 제공
01 게시판 시스템의 기본 구조 [글쓰기]-사용자가 게시판에 글 쓰는 것을 제공 [글목록]-게시판의 쓰인 글의 목록을 제공 [글읽기]-게시판에 쓰인 글의 내용을 읽는 것을 제공 [글수정]-게시판에 쓰인 글의 제목 및 내용의 수정을 제공 [글삭제]-게시판에 쓰인 글의 삭제를 제공

6 게시판 필요 테이블 작성 [board] 테이블의 구조 02 create table board(
num int not null primary key auto_increment, writer varchar(50) not null, subject varchar(50) not null, content text not null, passwd varchar(60) not null, reg_date datetime not null, ip varchar(30) not null, readcount int default 0, ref int not null, re_step smallint not null, re_level smallint not null );

7 게시판 필요 테이블 작성 [board] 테이블의 구조 필드 설명 id num : 글번호를 저장하는 필드
02 [board] 테이블의 구조 필드 설명 id num : 글번호를 저장하는 필드 writer : 글쓴이를 저장하는 필드 subject : 글제목을 저장하는 필드 content :글내용을 저장하는 필드 passwd : 글의 비밀번호를 저장하는 필드 reg_date : 글을 쓴 날짜를 저장하는 필드 ip : 글쓴이의 ip를 저장하는 필드

8 게시판 필요 테이블 작성 [board] 테이블의 구조 필드 설명 id readcount : 글의 조회수를 저장하는 필드
02 [board] 테이블의 구조 필드 설명 id readcount : 글의 조회수를 저장하는 필드 단, 이 게시판 시스템에서는 조회수를 누적하는 부분을 사용하지 않는다. ref : 글을 그룹화하기 위한 필드, 제목글과 그에 딸린 답변글이 그룹화 re_step : 제목글과 답변글의 순서를 정리하기 위한 필드 re_level : 글의 레벨을 저장하는 필드

9 게시판 자바빈 작성 03 개요 ▲ JSP 페이지, 자바빈 및 DB의 관계

10 게시판 자바빈 작성 개요 JSP 페이지, 자바빈 및 DB의 관계 JSP 페이지 - 화면에 내용 표시
03 개요 JSP 페이지, 자바빈 및 DB의 관계 JSP 페이지 - 화면에 내용 표시 JS(자바스크립트) - 서버에 요청 작업 처리 및 응답된 결과 처리 데이터 저장빈 - 데이터를 객체로 관리 DB 처리빈 - DB와 연동해서 쿼리문을 수행 DB 테이블 – 데이터 저장소

11 게시판 자바빈 작성 데이터 저장빈(BoardDataBean.java) 게시판 시스템에서 발생한 데이터를 객체로 생성해 관리
03 데이터 저장빈(BoardDataBean.java) 게시판 시스템에서 발생한 데이터를 객체로 생성해 관리 게시판 시스템에 필요한 정보를 저장하는 프로퍼티 및 프로퍼티 값을 저장하고 얻어내는 setter/getter 메소드로 이루어짐

12 게시판 자바빈 작성 데이터 저장빈(BoardDataBean.java) 03 프로퍼티 명 해당 메소드 num 글번호
setNum(int num) : num값 저장 getNum() : 저장된 num값 가져옴 writer 작성자 setWriter(String writer) : writer값 저장 getWriter(String writer) : 저장된writer값 저장 subject 글제목 setSubject(String subject) : subject값 저장 getSubject(String subject) : 저장된subject값 저장

13 게시판 자바빈 작성 데이터 저장빈(BoardDataBean.java) 03 프로퍼티 명 해당 메소드 content 글내용
setContent(String content) : content값 저장 getCentent(String content) : 저장된content값 저장 passwd 비밀번호 setPasswd(String passwd): passwd값 저장 getPasswd() : 저장된 passwd값 가져옴 reg_date 글쓴날짜 setReg_date(Timestamp reg_date): reg_date값 저장 getReg_date() : 저장된 reg_date값 가져옴

14 게시판 자바빈 작성 데이터 저장빈(BoardDataBean.java) 03 프로퍼티 명 해당 메소드 readcount 조회수
setReadcount(int readcount): readcount값 저장 getReadcount() : 저장된 readcount값 가져옴 ip 글 작성자의 IP setIp(String ip) :ip값 저장 getIp() : 저장된 ip값 가져옴 ref 글의 그룹번호 setRef(String ref) : ref값 저장 getRef() : 저장된 ref값 가져옴

15 게시판 자바빈 작성 데이터 저장빈(BoardDataBean.java) 03 프로퍼티 명 해당 메소드 re_step
제목글과 답변글의 순서 setRe_step(String re_step) : re_step값 저장 getRe_step() : 저장된 re_step값 가져옴 re_level 글 제목의 들여쓰기->제목글은 들여쓰기가 0이고 댓글은 1이다. 댓글의 댓글은 2와 같이 단계에 따라 들여쓰기 값이 커짐. setRe_level(String re_level) : re_level값 저장 getRe_level() : 저장된 re_level값 가져옴

16 게시판 자바빈 작성 DB 처리빈(BoardDBBean.java) 게시판 시스템에서 DB와 연동해서 쿼리문 수행
03 DB 처리빈(BoardDBBean.java) 게시판 시스템에서 DB와 연동해서 쿼리문 수행 커넥션 풀로부터 커넥션 객체를 가져오는 메소드 및 JSP 페이지에서 발생한 데이터를 저장하거나 DB 테이블의 레코드를 얻어내는 등의 쿼리를 수행하는 메소드들로 이루어짐

17 게시판 자바빈 작성 DB 처리빈(BoardDBBean.java) 메소드 getInstance() getConnection()
03 DB 처리빈(BoardDBBean.java) 메소드 getInstance() 전역 BoardDBBean 객체의 레퍼런스를 리턴 getConnection() 쿼리 작업에 사용할 Connection 객체를 커넥션 풀로부터 얻어내서 리턴 insertArticle(BoardDataBean article) 새로운 글을 board 테이블에 추가한다. 글입력 처리에 사용

18 게시판 자바빈 작성 DB 처리빈(BoardDBBean.java) 메소드 getArticleCount()
03 DB 처리빈(BoardDBBean.java) 메소드 getArticleCount() board 테이블의 전체 레코드의 수를 받아옴. 글 목록에서 글번호 및 전체 레코드수를 표시할 때 사용 getArticles(int start, int end) start부터 end 개수만큼의 레코드를 board 테이블에서 검색. 글목록 보기에서 사용 updateGetArticle(int num) id에 해당하는 레코드를 board 테이블에서 검색한다. 글 수정 폼에서 사용

19 게시판 자바빈 작성 DB 처리빈(BoardDBBean.java) 메소드
03 DB 처리빈(BoardDBBean.java) 메소드 updateArticle(BoardDataBean article) 수정된 글의 내용을 갱신할 때 사용. 글 수정 처리에서 사용 deleteArticle(int num, String passwd) id에 해당하는 레코드를 board 테이블에서 삭제. 글 삭제 처리에서 사용

20 게시판 JSP 페이지 작성 구조 회원 게시판에 글을 입력해서 글 목록 및 글의 내용을 보는 것
04 구조 회원 게시판에 글을 입력해서 글 목록 및 글의 내용을 보는 것 글 목록 또는 글의 내용보기에서부터 댓글쓰기, 글 수정, 글 삭제를 수행하는 부분

21 게시판 JSP 페이지 작성 04 구조 게시판 시스템의 영역별 구조 ▶

22 게시판 JSP 페이지 작성 메인 페이지 작성하기 인증된 사용자만 게시판을 사용할 수 있도록 제공
04 메인 페이지 작성하기 인증된 사용자만 게시판을 사용할 수 있도록 제공 사용자 인증에 관한 부분은 loginForm.jsp페이지에서 제공하며, main.jsp 페이지는 인증부분을 표시할 영역을 및 게시판 관련 페이지를 표시할 영역을 제공

23 게시판 JSP 페이지 작성 04 메인 페이지 작성하기 main.jsp 페이지의 구조 ◀ main.jsp 페이지의 구조

24 게시판 JSP 페이지 작성 메인 페이지 작성하기 필요 페이지 main.jsp loginForm.jsp 04
시작 페이지로 메인 화면을 제공하며, 게시판 시스템을 위한 회원 인증 영역과 게시판 영역을 갖고 있다. main_auth영역 : 회원 인증 작업을 표시 main_board영역 : 게시판 관련 페이지를 표시 loginForm.jsp main.jsp의 회원 인증 영역(main_auth)에 사용자 인증여부를 표시 인증되지 않은 사용자영역 : [로그인] 버튼 제공 인증된 사용자 영역 : [로그아웃] 버튼 제공

25 게시판 JSP 페이지 작성 메인 페이지 작성하기 필요 페이지 loginPro.jsp logout.jsp login.js 04
회원 인증을 처리하는 페이지 logout.jsp 인증된 사용자의 인증을 무효화하는 페이지 login.js loginForm.jsp에서 사용하는 자바스크립트 파일로 [로그인], [로그아웃] 버튼을 클릭 시 사용자의 요청을 서버로 전달

26 게시판 JSP 페이지 작성 메인 페이지 작성하기 필요 페이지 main_board.jsp list.jsp style.css 04
메인 화면을 처음 로드 시 main.jsp의 게시판 영역(main_board)에 표시할 내용을 가진 페이지 list.jsp 게시판의 글 목록을 표시하는 페이지 style.css 스타일시트 파일로 웹 페이지 글꼴, 배경색 등의 스타일을 지정

27 게시판 JSP 페이지 작성 글쓰기 페이지 작성하기
04 글쓰기 페이지 작성하기 글 목록에서 [글쓰기], [댓글쓰기] 버튼을 누르면 동작되는 부분으로 글쓰기 폼, 글쓰기 처리 부분으로 이루어짐

28 게시판 JSP 페이지 작성 글쓰기 페이지 작성하기 글쓰기 구조
04 글쓰기 페이지 작성하기 글쓰기 구조 메인 페이지의 main_board 영역에 표시된 list.jsp 페이지의 [글쓰기], [댓글쓰기] 버튼을 누르면 글쓰기 폼인 writeForm.jsp 페이지가 main.jsp의 main_board영역에 표시 글쓰기 폼에 내용을 입력 후 [등록] 버튼을 누르면 writePro.jsp가 글쓰기를 처리 페이지 요청은 write.js가 하며, [글쓰기] 버튼을 누른 경우 제목글 쓰기가 되고, [댓글쓰기] 버튼을 누르면 댓글쓰기가 됨

29 게시판 JSP 페이지 작성 04 글쓰기 페이지 작성하기 글쓰기 구조 게시판 시스템 중 글쓰기 구조 ▶

30 게시판 JSP 페이지 작성 글쓰기 페이지 작성하기 필요 페이지 writeForm.jsp writePro.jsp write.js
04 글쓰기 페이지 작성하기 필요 페이지 writeForm.jsp 글쓰기 폼으로 게시판에 추가할 글을 입력하는 페이지. 제목 글쓰기와 댓글쓰기 제공 writePro.jsp 입력된 글을 넘겨받아 글 추가를 처리하는 페이지 write.js 글쓰기와 관련된 요청을 처리. 글쓰기 폼에서 [등록], [취소] 버튼 클릭 시 작업을 처리

31 게시판 JSP 페이지 작성 글목록 보기 페이지 작성(글내용 보기 포함) 글목록 표시, 페이지 이동 처리
04 글목록 보기 페이지 작성(글내용 보기 포함) 글목록 표시, 페이지 이동 처리 제목글 및 댓글의 글쓰기 폼, 글수정 폼, 글삭제 폼으로 연결을 제공

32 게시판 JSP 페이지 작성 글목록 보기 페이지 작성(글내용 보기 포함) 글목록의 구조
04 글목록 보기 페이지 작성(글내용 보기 포함) 글목록의 구조 [글쓰기] 버튼을 누르면 글쓰기 폼인 writeForm.jsp 페이지가 표시 내가 쓴 글의 경우 [수정], [삭제] 버튼이 표시되고, 다른 사람이 쓴 글의 경우 [댓글쓰기] 버튼이 표시

33 게시판 JSP 페이지 작성 글목록 보기 페이지 작성(글내용 보기 포함) 글목록의 구조
04 글목록 보기 페이지 작성(글내용 보기 포함) 글목록의 구조 [수정] 버튼을 클릭하면 글 수정 폼인 updateForm.jsp 페이지가 표시되고, [삭제] 버튼을 누르면 글 삭제 폼인 deleteForm.jsp 페이지가 표시 [댓글쓰기] 버튼을 누르면 댓글용 writeForm.jsp페이지가 표시

34 게시판 JSP 페이지 작성 04 글목록 보기 페이지 작성(글내용 보기 포함) 글목록의 구조 게시판 시스템 중 글목록의 구조 ▶

35 게시판 JSP 페이지 작성 글목록 보기 페이지 작성(글내용 보기 포함) 필요 페이지 list.jsp list.js 04
게시판의 글 목록을 표시하는 페이지. 글목록과 페이지 이동 영역을 제공. 또한 글쓰기, 댓글쓰기, 글수정, 글삭제와의 연결도 제공 list.js 글 목록과 관련된 요청을 처리한다. 글 목록을 표시하고 [글쓰기], [글수정], [글삭제], [댓글달기] 버튼 클릭 시 작업을 처리

36 게시판 JSP 페이지 작성 글수정 및 삭제 페이지 작성(글내용 보기 포함)
04 글수정 및 삭제 페이지 작성(글내용 보기 포함) 글수정 구조는 글목록에서 [수정] 버튼을 누르면 동작되며 글 수정 폼, 글 수정 처리로 이루어짐

37 게시판 JSP 페이지 작성 글수정 및 삭제 페이지 작성(글내용 보기 포함) 글수정 구조
04 글수정 및 삭제 페이지 작성(글내용 보기 포함) 글수정 구조 글 목록인 list.jsp 페이지에서 [수정] 버튼을 누르면, 글수정 폼인 updateForm.jsp 페이지가 표시 글수정 폼에 수정할 글의 정보를 입력 후 [수정]버튼을 클릭하면 updatePro.jsp 페이지가 글수정을 처리

38 게시판 JSP 페이지 작성 글수정 및 삭제 페이지 작성(글내용 보기 포함) 글수정 구조 04
게시판 시스템 중 ▶ 글수정의 구조

39 게시판 JSP 페이지 작성 글수정 및 삭제 페이지 작성(글내용 보기 포함)
04 글수정 및 삭제 페이지 작성(글내용 보기 포함) 글 삭제 구조는 글 목록에서 [삭제] 버튼을 누르면 동작되며 글 삭제 폼, 글 삭제 처리

40 게시판 JSP 페이지 작성 글수정 및 삭제 페이지 작성(글내용 보기 포함) 글 삭제 구조
04 글수정 및 삭제 페이지 작성(글내용 보기 포함) 글 삭제 구조 글 목록인 list.jsp 페이지에서 [삭제] 버튼을 누르면, 글 삭제 폼인 deleteForm.jsp 페이지가 표시 글삭제 폼에 삭제할 글의 비밀번호를 입력 후 [삭제] 버튼을 클릭하면 deletePro.jsp 페이지가 글 삭제를 처리

41 게시판 JSP 페이지 작성 글수정 및 삭제 페이지 작성(글내용 보기 포함) 글 삭제 구조 04
게시판 시스템 중 글삭제의 구조 ▶

42 게시판 JSP 페이지 작성 글수정 및 삭제 페이지 작성(글내용 보기 포함) 필요 페이지 updateForm.jsp
04 글수정 및 삭제 페이지 작성(글내용 보기 포함) 필요 페이지 updateForm.jsp 글을 수정하기 위한 폼을 제공하는 페이지 updatePro.jsp 글의 수정을 처리하는 페이지 deleteForm.jsp 글을 삭제하기 위한 폼을 제공하는 페이지

43 게시판 JSP 페이지 작성 글수정 및 삭제 페이지 작성(글내용 보기 포함) 필요 페이지 deletePro.jsp
04 글수정 및 삭제 페이지 작성(글내용 보기 포함) 필요 페이지 deletePro.jsp 글의 삭제를 처리하는 페이지 update.js 글 수정과 관련된 요청을 처리한다. 글수정 폼에서 [수정], [취소] 버튼 클릭 시 작업을 처리