팀 프로젝트 포트폴리오 설명 자료

1. Delibrary
도서정보관리 시스템
프로젝트 소개
작성자 박 재 성

2. 목차
1. 프로젝트 소개
2. 나의 업무 분담
3. 화면 및 설명

3. 1. 프로젝트 소개
프로젝트명 통합 도서 정보 관리시스템 Delibrary
수행 기간 2020.11 ~ 2020.12
사용 언어 JAVA, HTML, CSS, JavaScript(ECMA Script 6)
프레임워크 Jquery, Bootstrap
데이터베이스 Oracle
팀 구성 디자인 2명 / 개발 + 기획 1명 / 개발 3명

4. 2. 나의 업무 분담
업무 분담
1) 데이터베이스 설계, 관리
2) 프로젝트 전반 기획 및 관리
담당 페이지 홈 화면, 도서 검색 결과 화면, 관리자 페이지
파일명
Home.jsp / SearchResult.jsp / ManagerPage.jsp
MainController.java / HomeDAO.java / DBManager.java
MainMapper.xml 등
기타
1) 팀원 작업물 확인 및 git을 이용한 코드 통합
2) 팀 프로젝트 작업 시 다른 팀원들의 코드 작성 도움

5. 3. 화면 및 설명
< 메인 페이지 (네비게이션 바 및 검색 바) >
[네비게이션 바]
- 로그인 / 회원가입 / 사이트맵
등으로 이동
[검색 바]
- 홈 화면에서는 도서 제목으로
도서 검색 가능

6. 3. 화면 및 설명
< 로그인 >
[로그인]
- 담당 부분 설명을 위해 관리자
계정으로 로그인

7. 3. 화면 및 설명
< 메인 페이지 (로그인 이후) >
[관리자 페이지 아이콘]
- 관리자 계정으로 로그인 시 관
리자 페이지로 이동하는 아이콘
생성
[로그아웃 아이콘]
- 로그인 시에 로그아웃 아이콘
으로 변경
[일반 회원으로 로그인]
- 일반 회원으로 로그인 시 관리
자 페이지 이동 아이콘이 생성되
지 않고, 로그아웃 아이콘만 생
성됨

8. 3. 화면 및 설명
< 아이콘 변경 코드 >
[로그인 시 회원 번호 관리]
- 로그인 시에 입력한 Email 과 Pw를 데이터베이스의 값과 비교하여 두 값이
모두 일치하는 경우 로그인을 허용한다.
- 로그인이 허용되는 경우 세션에 해당 회원의 회원번호를 저장하여 메인 화
면에서 회원번호로 관리자 권한의 유무를 판단한다.
- 관리자로 등록된 회원번호로 로그인을 한 경우에는 관리자페이지로 이동
하는 아이콘이 생성되도록 한다.

9. 3. 화면 및 설명
< 관리자 페이지 >
[정보 수정, 삭제 확인]
- 정보 수정, 삭제 시 값 변경 또
는 삭제 전 확인을 위해 값을 출
력해주는 역할을 하는 부분
[관리 테이블 변경 탭]
- 텍스트 클릭 시 하단에 출력되
는 내용(관리 대상 테이블) 이 변
경됨
[관리 대상 테이블]
- 데이터베이스와 연동하여 수정,
삭제 버튼 클릭 시 상단의 확인
부분에 값이 출력되고, 확인 부
분에서 값 수정 후 확인 버튼을
눌러 데이터베이스에 변경 사항
적용

10. 3. 화면 및 설명
< 관리자 페이지 >
[관리자 페이지 로드 시 작업]
- 관리자 페이지 로드 시에 회원, 도서, 대여정보, 게
시글 의 모든 데이터베이스 정보를 받아오도록 한다,
- 그리고 자바스크립트 코드를 이용하여 최초에는
회원 정보가 있는 테이블만 display 되도록 한다.
- 그리고 해당 탭 클릭 시에 그 탭에 해당하는 테이
블을 display 시키고 그 외 모든 테이블을 display :
‘none’ 으로 설정하여 숨긴다.

11. 3. 화면 및 설명
< 관리자 페이지 >
[ 변수 ]
- trs : 테이블의 각 row
- update_buttons : 수정 버튼
- delete_buttons : 삭제 버튼
- update_ok_buttons : 수정 확인 버튼
- delete_ok_buttons : 삭제 확인 버튼
- update_tds : 수정버튼 클릭 시 해당 row의 td
- inputs : 테이블 상단에 값 확인을 위한 input 태그
- data : 값 수정, 삭제 시 ajax 를 통해 보낼 데이터 객체

12. 3. 화면 및 설명
< 관리자 페이지 >
[ 수정, 삭제 버튼 클릭 ]
- 수정, 삭제 버튼 클릭 시에 해당 버튼과
형제 관계에 있는 노드를 찾아 테이블 상
단 input 태그의 value 값으로 설정해주는
자바스크립트 코드

13. 3. 화면 및 설명
< 관리자 페이지 >
[ 수정확인, 삭제확인 버튼 클릭 ]
- 수정확인 버튼 클릭 시에는 수정
할 내용 전부를 input 태그에서
받아와 data에 추가하여 ajax 통
신한다.
- 삭제확인 버튼 클릭 시에는 해당
테이블의 PK만을 전달해주면 되
므로 PK만 data에 추가하여 ajax
통신한다.

14. 3. 화면 및 설명
< 도서 검색 기능 >
[도서 검색 기능]
- 카카오의 책 검색 API를 이용하여 방대한 양의 데이터베이스를 로컬 PC에 저장하지 않
고 도서 정보를 출력, 이용한다.
- 홈 화면에서는 검색어 문자열만을 검색 결과 출력 페이지로 전달하여 검색 결과 페이
지에서 API 통신, 작업을 수행하도록 한다.

15. 3. 화면 및 설명
< 도서 검색 기능(도서 검색) >
[도서 검색 기능]
- 메인 페이지에서는 단순하게 도서의 제목을
입력 후 검색 버튼을 클릭한다.

16. 3. 화면 및 설명
< 도서 검색 기능(도서 검색) >
[도서 검색 기능]
- 검색 결과 페이지 로드 후에 메인 페이지에
서 넘겨준 검색어 문자열을 API 통신의
data 객체에 담아 작업을 수행한다.

17. 3. 화면 및 설명
< 도서 검색 기능(도서 검색) >
[도서 검색 기능]
- 통신이 성공하면(done) 받아온 정보를 동적
노드를 생성하여 그 노드에 정보를 담아
body에 출력해 준다.

18. 3. 화면 및 설명
< 도서 검색 기능(도서 검색) >
[도서 검색 기능]
- 검색 결과 개수에 따라 Paging 처리를
해주기 위한 Jquery 코드이다.

19. 3. 화면 및 설명
< 도서 검색 기능(도서 검색 결과 화면) >

20. 3. 화면 및 설명
< 메인 페이지 (추천 도서 출력) >
[추천 도서 목록 Carousel]
- 카카오 책 검색 API를 활용하여 도서
제목, 도서 이미지, 저자 정보를 검색하
여 출력
- 상단의 화살표 클릭 시 다음 리스트로
이동
- 해당 도서 정보 Card 클릭 시 도서 정
보 상세보기 페이지로 이동

21. 3. 화면 및 설명
< 메인 페이지 (게시글 출력) >
[게시판 게시물 출력 box]
- 데이터베이스 연동하여 홈 화면에서는
제목만 출력하도록 함
- 상단의 전체보기 클릭 시 해당 게시판
으로 이동
- 각 게시물의 제목 클릭 시 해당 게시물
상세보기 페이지로 이동

22. 3. 화면 및 설명
< 전체보기 클릭 시 해당 게시판으로 이동 >

23. 3. 화면 및 설명
< 게시글 제목 클릭 시 상세보기 페이지 >

24. 읽어주셔서 감사합니다.