Transcript 화면 설계_0715x

화면 설계
NoJam
목차
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
로그인 - login.jsp
메인 화면 - main.jsp
사원 정보 상세 보기 – empview.jsp
사원 정보 수정 – empmodify.jsp
공지 리스트 – noticelist.jsp
공지 작성 – noticeinput.jsp
공지 상세 보기 – noticeview.jsp
공지 수정 – noticemodify.jsp
휴가원 작성 – vacation.jsp
•
결재선 팝업 – line.jsp
문서 목록 - doclist.jsp
•
기안 (proposal)
•
미결 (undecide)
•
기결 (decide)
•
완료 (complete)
•
접수 대기 (wait)
•
문서 대장 (document)
기안 문서 리스트
미결 문서 리스트
기결 문서 리스트
완료 문서 리스트
접수 대기 문서 리스트
문서 대장 리스트
17.
18.
19.
20.
21.
22.
23.
24.
25.
사원 목록 – emplist.jsp
사원 등록 – empregister.jsp
문서 상세 페이지
자유 게시판 리스트 – boardlist.jsp
자유 게시판 작성 – boardinput.jsp
자유 게시판 상세 보기 – boardview.jsp
자유 게시판 수정 – boardmodify.jsp
자유 게시판 답글 – boardreply.jsp
사이트 맵 – sitemap.jsp
** 주의사항
공지사항
작성, 수정, 삭제
사원 등록
완료 상태 문서
접수
사원 정보 수정
관리자
가능
가능
가능
전체 가능
인사 팀
불가능
가능
가능
일반 사용자
불가능
불가능
불가능
(단, 사원 번호 제외)
전체 가능
(단, 사원 번호 제외)
일부 가능
결재선 팝업 (line.jsp)를 제외한 모든 화면은 main화면의 content 부분에 출력!
공지사항 게시판은 답변형 X, 자유 게시판은 답변형 게시판
1. 로그인 – login.jsp
제일 처음 보이는 화면
로그인을 해야 메인화면으로 이동
관리자에 의해 부여 받은
ID (사원번호) & PW를 입력
Log-In
메인 화면 – main.jsp 로 이동
2. 메인 화면 – main.jsp
①
③ content list
① 회사 로고
로고를 클릭 하면 HOME 화면으로
이동한다.
②
② 상단 메뉴
login id :
현재 로그인 한 사용자 아이디(사번)
를 나타냄
my page :
클릭 시 상세보기 (empdetail.jsp)
이동
이 페이지에서 개인정보 수정 가능
logout :
로그아웃
④ content
1.
안녕하세요
관리자
2014-07-09
1004
③ content list
메뉴 항목을 클릭하면 각 항목의
리스트로 이동한다
④ content 화면 :
HOME화면 첫 페이지로 공지사항
리스트를 출력
(모든 화면은 content화면에 출력된다)
⑤ site map
클릭 시 site map 페이지로 이동
(siteMap.jsp)
접수 대기 문서, 사원등록은 인사팀 전용
메뉴로 인사팀 아이디로 로그인 한
경우에만 메뉴 출력
⑤
공지작성, 접수 대기 문서, 사원등록은
관리자 전용 메뉴로 관리자아이디로
로그인 한 경우에만 메뉴 출력
일반 사용자는 두 메뉴를 제외한 나머지
메뉴만 출력된다
3. 사원 정보 상세 보기 – empdetail.jsp
메인 페이지 상단 my page 버튼 을 클릭하면 이동하는 페이지로 사원의
상세 정보를 볼 수 있다.
관리자와 사용자 본인은 하단 수정 버튼을 눌러 정보를 수정할 수 있다.
수정 버튼을 클릭하면 사원 정보 수정 페이지로 이동한다
(empmodify.jsp)
완료 버튼을 누르면 HOME으로 이동한다
4. 사원 정보 수정 – empmodify.jsp
사원 정보를 수정 할 수 있는 페이지
사용자는 페이지 상단 정보만 수정이 가능하다
관리자는 사원 번호를 제외한 페이지의 모든 정보 수정이 가능하다
취소 버튼을 클릭 하면 사원 정보 상세보기 페이지로 이동한다
(empdetai.jsp)
완료 버튼을 클릭 하면 작성한 내용으로 사원정보를 변경 후
사원정보 상세보기 페이지로 이동한다 (empdetai.jsp)
5. 공지 리스트 – noticelist.jsp
공지사항 게시판
글 제목을 클릭하면 상세정보 페이지
로 이동 (noticeview.jsp)
일반 사용자는 공지사항을 읽기만 할
수 있다
관리자는 글쓰기,삭제 , 수정 할 수
있다
(수정, 삭제는 상세보기 페이지에서
할 수 있다)
1.
안녕하세요
관리자
2014-07-09
1004
하단 우측 글쓰기 버튼은 관리자로
로그인 할 때만 나타나는 버튼으로,
버튼을 클릭하면 글쓰기 페이지로
이동한다
(noticeinput.j sp)
작성일자를 기준으로 내림차순으로
공지사항을 정렬
글쓰기
6. 공지 작성 – noticeinput.jsp
공지사항을 작성하는 페이지
관리자만 사용 할 수 있는 페이지로 글쓴이는 ‘관리자’ 이름이 고정됨
작성자
날짜는 현재 일자로 자동 입력되므로 제목과 내용만 작성
2014-07-09
목록 버튼 클릭 시 공지 리스트로 이동한다 (noticelist.jsp)
안녕하세요
완료 버튼 클릭 시 글쓰기가 완료 되고 공지 리스트로 이동한다
(noticelist.jsp)
안녕하세요…^^
목록
완료
7. 공지 상세 보기 – noticeview.jsp
공지사항 상세 페이지
일반 사용자들은 글을 보기만 할 수 있다
(일반 사용자로 로그인 한 경우 하단 버튼 중 ‘목록 버튼’만 보임)
작성자
2014-07-09
관리자는 글 수정, 삭제가 가능하다
(관리자로 로그인 한 경우 하단 버튼 세가지만 모두 보임)
안녕하세요
삭제 버튼을 클릭하면 해당 글은 삭제되고 공지 리스트로 이동
(noticelist.jsp)
수정 버튼을 클릭하면 공지 수정 페이지로 이동 (noticemodify.jsp)
안녕하세요…^^
관리자인 경우 생성되는 버튼
목록 버튼을 클릭하면 공지 리스트로 이동 (noticelist.jsp)
8. 공지 수정 – noticemodify.jsp
공지사항 수정 페이지
관리자만 사용 할 수 있는 페이지
작성자
글쓴이 : 관리자
날 짜 : 수정 일자 자동 입력
2014-07-09
수정 시 제목과 내용만 수정 할 수 있다
안녕하세요
취소 버튼을 클릭하면 수정 적용 하지 않고 공지 리스트로 이동한다
(noticelist.jsp)
완료 버튼을 클릭하면 글이 수정 되고 공지 리스트로 이동한다
(noticelist.jsp)
안녕하세요…^^
취소
완료
9. 휴가원 작성 (1) – vacation.jsp
HOME 화면에서 좌측 content List에
휴가원 작성을 클릭 하면
휴가원을 작성 할 수 있는 페이지가
content화면에 출력된다
1.
안녕하세요
관리자
2014-07-09
1004
글쓰기
9. 휴가원 작성 (2) – vacation.jsp
휴가원을 작성하는 페이지
① 성명, 부서
로그인 한 사용자의 이름, 부서명이 자동으로 입력 된다
①
②
④
② 보존 기한
1년, 2년, 3년, 영구 중 택 1
③
7
⑤
③ 문서 번호
년도(4)-부서아이디-문서순번(4) , 문서결재가 완료된 후 접수 시 부여됨
④ 기간
시작일 ~ 종료일 까지를 선택(입력)하면 몇 일간 휴무인지 계산하여 자동 입력
⑤ 사유
작성자가 휴가원을 신청하는 사유를 텍스트 형식으로 적어 제출
⑥ 하단 버튼
• 결재선 : 클릭 시 부서와 부서의 직원 리스트가 나타난다
• 상신 : 클릭 시 입력된 내용이 다음 결재 담당자에게 전송된다
문서 전송 후 기안문서 리스트 페이지로 이동한다
• 취소 : 작성된 내용이 초기화 된다,
⑥
9. 휴가원 작성(Pop Up) – line.jsp
②
③
12121
민영준
디자인팀
수습
23456
관리자
인사팀
대리
7
④
확인
① 결재선 버튼을 클릭 (결재과정은 본인 포함 무조건 3명을 거쳐야 한다)
② 팝업 창으로 부서 트리가 출력되며
부서 선택 시 해당 부서 직원 리스트가 ③ 창에 나타난다.
결재선에 추가할 사원을 클릭 하면 ④ 창에 자동으로 입력된다
①
(우측 삭제버튼을 통해 입력 항목을 삭제할 수 있다)
두명의 결재 직원을 선택 후 하단의 확인 버튼을 누르면
팝업창이 자동으로 닫힌다 (결재선 창이 3칸으로 증가)
10. 문서 목록 – doclist.jsp
화면을 재사용 하기 위해
docList.jsp 페이지에서
KeyValue를 가져와서
각 조건에 맞게 문서 리스트를
출력 해 준다.
목록 - doclist.jsp
테이블 고정 / key value에 따라 내용만 변경
1.
안녕하세요
관리자
2014-07-09
1004
•
•
•
•
•
•
기안
미결
기결
완료
접수
문서
(proposal)
(undecide)
(decide)
(complete)
대기 (wait)
대장 (document)
문서 정렬은 작성일자를 기준으로
내림차순으로 정렬한다
11. 기안 문서 리스트– doclist.jsp [proposal]
로그인 한 사용자가 작성한 모든 문서가 리스트로 표시된다
제목을 클릭하면 해당문서 상세보기 페이지로 이동
문서 승인 상태에 따라 ‘상태’컬럼에 표시된다
기안 문서 리스트
1.
휴가원
2014-03-10
민영준
결재 완료
2..
휴가원
2014-05-12
민영준
결재 완료
3.
휴가원
2014-07-09
민영준
반송
•도착 : 기안 후 첫번째 결재자가 결재를 하지 않은 문서
•반송 : 결재자가 반송 처리한 문서
•결재중 : 첫번째 결재자가 결재 후 다음 결재자의 승인 기다림
•결재 완료 : 모든 결재자가 결재한 문서
•접수 : 인사팀 담당자가 접수 처리한 문서
도착상태와 반송 상태의 문서는 상세화면 조회 페이지의 하단
삭제 버튼으로 삭제가 가능하고, 나머지 상태의 문서는 조회만
가능하다
문서번호 컬럼은 해당 문서가 모두 결재되어 인사부의 ‘접수’
승인까지 받으면 부여된다
12. 미결 문서 리스트– doclist.jsp [undecide]
미결 문서 리스트
1.
휴가원
2014-03-10
민영준
완료
2..
휴가원
2014-05-12
민영준
완료
3.
휴가원
2014-07-09
민영준
반송
로그인 한 사용자가 결재 해야 할 모든 문서가 리스트로 표시
된다
제목을 클릭하면 해당문서 상세보기 페이지로 이동
13. 기결 문서 리스트– doclist.jsp [decide]
기결 문서 리스트
1.
휴가원
2014-03-10
민영준
완료
2..
휴가원
2014-05-12
민영준
완료
3.
휴가원
2014-07-09
민영준
반송
로그인 한 사용자가 결재 승인 한 모든 문서가 리스트로 표시
된다
제목을 클릭하면 해당문서 상세보기 페이지로 이동
사용자가 이미 결재를 마쳤기 때문에 상세 화면에는 목록보기
외에 아무 버튼도 표시되지 않는다.
14. 완료 문서 리스트– doclist.jsp [complete]
완료 문서 리스트
1.
휴가원
2014-03-10
민영준
완료
2..
휴가원
2014-05-12
민영준
완료
3.
휴가원
2014-07-09
민영준
반송
로그인 한 사용자가 결재 한 문서 중, 결재선에 지정된 모든 결
재자의 결재가 왼료된 문서가 리스트로 표시된다.
제목을 클릭하면 해당문서 상세보기 페이지로 이동
15. 접수 대기 문서 리스트– doclist.jsp [wait]
접수 대기 문서 리스트
1.
휴가원
2014-03-10
민영준
완료
2..
휴가원
2014-05-12
민영준
완료
3.
휴가원
2014-07-09
민영준
반송
인사팀 담당자에게만 보이는 메뉴로 모든 완료 문서가
리스트로 표시된다.
제목을 클릭하면 해당문서 상세보기 페이지로 이동한다
상세화면에서 접수 버튼을 눌러 접수가 가능하다.
접수된 문서에는 문서번호가 부여되고, 문서대장으로
이동한다
16. 문서 대장 리스트– doclist.jsp [document]
문서 대장 리스트
1.
1004-22-0000
휴가원
2014-03-10
민영준
완료
2.
1004-22-0000
휴가원
2014-05-12
민영준
완료
3.
1004-22-0000
휴가원
2014-07-09
민영준
반송
로그인 한 사용자가 결재 한 문서 중, 결재선에 지정된 모든 결
재자의 결재가 왼료된 문서가 리스트로 표시된다.
제목을 클릭하면 해당문서 상세보기 페이지로 이동
(문서번호가 부여된 문서만 리스트로 출력)
17. 사원 목록 (1) – emplist.jsp
등록된 사원을 검색하는 리스트
(성명 오름차순으로 정렬된다)
사원 목록 리스트
1.
민영준
디자인 팀
수습
4444
성명을 클릭 하면 팝업창 으로 사원의 정보가 출력된다
(사용자 본인과 관리자, 인사팀으로 접속하여 사원정보 팝업을
띄우는 경우 전체 정보가 출력되고, 사원정보 수정 버튼이 나
타난다. 다른 사용자일 경우 일부의 정보만 출력된다. )
17. 사원 목록 (2) – empdetail.jsp
사용자 본인, 관리자, 인사팀이 보는 페이지
다른 사용자들이 보는 페이지
사원 목록
일반 사용자들은 제한된 정보만 볼 수 있다
사원 목록 버튼을 클릭하면 사원 목록 페이지로 이동한다(emplist.jsp)
관리자와 사용자 본인은 하단 수정 버튼을 눌러 정보를 수정할 수 있다.
수정 버튼을 클릭하면 사원 정보 수정 페이지로 이동한다
(empmodify.jsp)
완료 버튼을 누르면 HOME으로 이동한다
18. 사원 등록 (1) – empregister.jsp
사원 등록
사원 등록
18. 사원 등록 (2) – empregister.jsp
사원등록
관리자와 인사팀이 사용 할 수 있는 페이지
모든 항목을 작성한 후 등록 버튼으로 사원을 등록 할 수 있다
사원 번호는 테이블에서 자동으로 입력 되므로
사원등록 페이지 사원번호 입력 란에 빨간색 글씨로
•자동으로 입력 이라고 텍스트를 출력 해 준다
(사원 번호 : YYYYMM부서번호(3)SEQ(3) = 총 12자리)
ex) 2014200001
등록 후 사원 목록 페이지로 이동 (emplist.jsp)
취소 버튼을 클릭하면 작성 내용이 초기화 된다
*자동으로 입력
19. 문서 상세 페이지 (1) – vacationview.jsp
문서 리스트에서 제목을 클릭하면 문서 상세 보기 페이지로 이동한다
민영준
디자인 팀
버튼 위쪽 파란색 네모 박스의 디자인은 모든 상세 페이지 에서 동일하며,
문서 결재 진행 상황 에 따라 페이지의 하단 버튼이 달라진다
7
[사용 버튼]
[문서 상태]
도착 상태
기안 후 첫 번째 결재가가 결재를 하지 않은 문서
반송 상태
결재자가 반송 처리한 문서
결재 중 상태
한 명 이상의 결재자가 결재하고, 나머지 결재자가 결재 하지 않은 문서
결재 완료 상태
모든 결재자가 결재한 문서
[버튼은 상황에 따라 다르게 출력 된다]
접수 상태
인사팀 담당자가 접수 처리한 문서
19. 문서 상세 페이지 (2)
도착 상태
반송 상태
기안 문서 목록
결재 중 문서
결재 완료 상태
접수 대기 상태
미결 문서 목록
도착 상태
결재 중 상태
19. 문서 상세 페이지 (3)
기결 문서 목록
완료 문서 목록
접수 대기 목록
(인사팀 전용메뉴)
문서 대장 목록
결재 중 상태
완료 상태
완료 상태
완료 상태
접수 상태
20. 자유 게시판 리스트 – boardlist.jsp
자유 게시판
글 제목을 클릭하면 상세정보 페이지
로 이동 (boardview.jsp)
모든 사용자가 글을 작성 할 수 있다
글 작성자는 해당 글을 삭제 , 수정 할 수 있다
(수정, 삭제는 상세 보기 페이지에서 가능)
사원 등록
1.
오늘 회식해요!
권 용국
2014-07-09
1
하단 우측 글쓰기 버튼을 클릭하면
자유 게시판 작성 페이지로 이동
(boardinput.j sp)
작성일자를 기준으로 내림차순으로 정렬
21. 자유 게시판 작성 – boardinput.jsp
자유롭게 글을 작성하는 페이지
권 용국
모든 사용자가 글을 작성할 수 있는 페이지로 작성자 이름은 로그인 한
사용자의 이름으로 고정됨
날짜는 현재 일자로 자동 입력
오늘 회식해요!
pm 6:30 치맥집으로 오세요
목록 버튼 클릭 시 자유 게시판 리스트로 이동한다 (boardlist.jsp)
완료 버튼 클릭 시 글쓰기가 완료 되고 게시판 리스트로 이동한다
(boardlist.jsp)
22. 자유 게시판 상세 보기 – boardview.jsp
자유 게시판 글 상세 보기 페이지
권 용국
모든 사용자가 글을 작성할 수 있는 페이지로 작성자 이름은 로그인 한
사용자의 이름으로 고정됨
날짜는 현재 일자로 자동 입력
오늘 회식해요!
pm 6:30 치맥집으로 오세요
삭제 버튼 클릭 시 해당 글이 삭제 되고 자유 게시판 리스트로 이동한다
(boardlist.jsp)
수정 버튼 클릭 시 수정 사항이 반영 되고 자유 게시판 리스트로 이동한
다 (boardlist.jsp)
답글 버튼 클릭 시 답글 작성 페이지로 이동한다 (boardreply.jsp)
목록 버튼 클릭 시 게시판 리스트로 이동한다 (boardlist.jsp)
23. 자유 게시판 수정 – boardmodify.jsp
자유 게시판 글을 수정하는 페이지
권 용국
해당 글을 수정할 수 있는 페이지로 작성자 이름은 로그인 한 사용자의
이름으로 고정됨
날짜는 현재 일자로 자동 입력
오늘 회식해요!
pm 6:30 치맥집으로 오세요
목록 버튼 클릭 시 자유 게시판 리스트로 이동한다 (boardlist.jsp)
완료 버튼 클릭 시 수정 사항이 반영 되고 게시판 리스트로 이동한다
(boardlist.jsp)
24. 자유 게시판 답글 – boardreply.jsp
자유 게시판 답글을 작성하는 페이지
민 영준
작성자는 로그인 사용자의 이름으로 자동 입력
날짜는 현재 일자로 자동 입력
회식 메뉴
내용은 답글을 작성할 원본글의 내용이 표시되며 클릭 시 내용이 사라
진다
목록 버튼 클릭 시 자유 게시판 리스트로 이동한다 (boardlist.jsp)
소고기로 바꿔요!
완료 버튼 클릭 시 작성 사항이 반영 되고 게시판 리스트로 이동한다
(boardlist.jsp)
25. 사이트 맵 – sitemap.jsp
모든 컨텐츠를 바로 갈 수 있게 한 페이지에 작성
각 항목을 클릭 하면 선택 페이지로 이동 한다
(*관리자 , 인사팀 전용 메뉴는 siteMap에서 삭제)
-END-