Final project : Noon

 개발환경

 운영체제

windows7

DBMS

MySQL , Oracle Database Express Edition 11g Release 2

Language

JDK 1.8.0__05, Servlet & JSP, HTML, JavaScript, JQuery, CSS, AJax

 개발도구

Eclipse Java EE IDE Kepler Service Release 2

기타 S/W

 Bootstrap, E-Mail , Chrome , Adobe Photoshop CC

 개발기간

 개발인원

2014.07.08. ~ 2014.08.25

7명

개발 취지 및 목적

1) 사용자간의 파일 공유

사용자간에 공개/비공개/ 친구공개

기능으로 공유하고 싶은 자료만 공유한다

2) 쪽지를 통해 친구들간 커뮤니케이션 및

친구 요청시 메시지를 전송하여 알람가능

DATABASE 구조도

 세부기능 요약 및 설명

 상세화면

  기능설명

# 로그인 및 부가기능 #

1) 회원가입시 ID는 이메일을 사용한다.

2) 옆의 화면과 같이 로그인, 회원가입 , 비밀번호 찾기가 modal로 표시된다.

3) 비밀번호를 분실시 가입한 이메일주소를

입력하면 해당 이메일로 비밀번호 알려둔다.

# 회원 정보 수정 #

1) 회원정보, 회원 이미지 파일을 수정가능하다.

2) 회원가입시 임시 이미지로 표시된다.

회원정보(이름,이메일,연락처,프로필),

회원 이미지 , 비밀번호 클릭시 각각

modal 창이 뜨며 각각 따로 처리된다.

# 파일 리스트 목록 #

1) 게시물을 작성할 수 있는 페이지

2) 업로드, 다운로드, 삭제, 검색 가능

3) 전체 선택과 유형, 제목 등.. 정렬 가능

# 파일 아이콘 목록 #

1) 사용자 이름, 업로드, 다운로드, 삭제, 검색

2) 전체 선택 체크박스 클릭 시 모든 체크박스가 선택된다. 오른쪽엔 다른 방식의 목록을 볼 수 있도록 아이콘 버튼을 뒀다

3) 아이콘을 파일 유형 별로 따로 두었고, 파일 명을 볼 수 있게 설정 해두었다.

# 댓글 입력 #

1) 게시글에 대한 댓글을 입력

2) 댓글 삭제

3) 더 보기 기능 : 처음에 5개의 댓글을 보여주고

더 보기 버튼 클릭 시 댓글이 5개씩 더 나타난다.

# 파일 업로드 #

1) 게시물을 업로드하는 페이지로써 제목, 내용, 업로드할 파일 선택, 파일공개 여부를 설정한다.

2) 내용을 입력하는 부분은 스마트 에디터를 사용하여 글자에 다양한 스타일을 표현할 수 있다

3) 공개 여부에서는 전체 공개, 친구, 비공개를 선택함으로써 다른 사람이 접속했을 때 게시물의 존재 여부를 나누어 게시한다.

# 미리보기 (동영상) #

1) 게시글 옆에 파일 유형을 클릭하면,

그 유형에 맞는 미리 보기가 나타나게 됨

# 미리보기 (이미지) #

1) 게시글 옆에 파일 유형을 클릭하면,

그 유형에 맞는 미리 보기가 나타나게 됨

# 친구 목록 #

1) 서로 친구가 되었을 때 친구들 목록이 나옴

2) 접속은 친구의 페이지로 접속하는 것으로

친구 페이지에서 파일을 다운 받을 수 있다

3) 삭제는 친구 관계를 해제하는 것으로,

클릭시 , 친구 목록에서 삭제되면서 동시에

친구 추가 리스트에 표시되어

다시 친구 관계를 맺을 수 있다.

# 친구 추가 #

1) 친구 추가 할 수 있는 사람들의 목록이다

2) 신청을 클릭시 상대방에게 친구 신청이 된다.

3) 방문은 상대방 페이지에 방문 할 수 있으며

상대방이 “전체공개” 한 파일만 다운로드가 가능

# 내가 신청한 친구 #

1) 내가 신청한 사람의 목록으로

상대방이 응답하지 않았을 시 취소 버튼만 있다.

2) 취소 버튼 클릭 시

친구 신청한 것을 취소하는 것이다.

3) 상대방이 거절 시에는 “재신청”, “취소”

버튼이 표시된다

4) “재신청” 클릭 시 다시 한 번 친구요청이 된다

# 나에게 온 신청 #

1) 상대가 나에게 친구 신청을 한 것이다

2) 수락 버튼을 클릭하면

친구 관계가 되며 친구 목록에 들어간다.

3) 거절을 클릭하면, 정말 거절할 것인지

다이얼로그 창으로 확인하며, 확인을 클릭하면 상대방에게 거절 정보가 넘어간다

# 받은 / 보낸 쪽지함 #

1) List.jsp를 status 변수에 따라 ‘받은 쪽지함’,

‘보낸 쪽지함’ 으로 구분함

2) 체크박스 이용하여 전체 / 일부만 삭제 가능

3) 읽은 쪽지 - ‘회색’

4) 읽지 않은 쪽지 - ‘파란색’

5) 읽지 않는 쪽지의 개수만큼

화면 상단 알람 (종 이미지)에 표시됨

6) 쪽지가 10개 이상일 경우 페이지가 분리됨.

‘이전’, ‘다음’, ‘1’, ‘2’ 클릭하면 이동 가능

# 쪽지 상세 페이지(쪽지 확인) #

1) List.jsp 에서 메시지 내용을 클릭시

보여지는 쪽지 상세 화면

2) 쪽지 내용이 길 경우 list.jsp 에서는 위와 같이 생략되지만 여기서는 전체 내용을 확인 가능

3) 받은 쪽지함에서 메시지를 클릭하여 View.jsp로 이동시에만, 화면 우측 하단에 “답장 ” 버튼이 생성되며, 클릭하면 Insert.jsp의 받는 사람 부분에

상대방의 이메일이 입력된다

# 쪽지 쓰기 #

1) 사용자 상호간 쪽지 전송을 위한 페이지

2) 사용자 이메일(ID) 콤마(,)로 구분해

이메일을 입력 시 다중 전송 가능

3) 수신자 목록 클릭 시

현재 로그인된 사용자의 친구의 이메일 표시.

# 쪽지 쓰기 (연락처) #

1) 쪽지를 받는 사람이 친구 추가가 되어 있다면 친구 목록에서 보다 쉽게 불러올 수 있다.