SlideShare a Scribd company logo
1 of 27
Portfolio 개인 프로젝트
SNS 웹 프로젝트
Jang Hyun Su
INDEX
1. 개발환경
2. 데이터베이스 테이블 구조
3. Content
개발 툴 : STS(Spring Tool Suite)
운영체제 : Windows7
서버 : Apache tomcat 8.0
DB : MySQL
JAVA(spring, mybatis), JSP/Servlet, JavaScript, HTML/CSS
Bootstrap, JQuery, Ajax
개발환경
데이터베이스 테이블 구조
E-R 다이어그램
Spring MVC Process
1. 사용자의 요청이 Front Controller 에 전달 여기서 적절한 컨트롤러를 찾아서 간다 .
2. 컨트롤러는 적절한 서비스 객체를 찾아서 호출
3. 서비스에서 데이터베이스의 작업을 담당하는 DAO(Data Access Object) 를 이용해서 원하는 데이터를
요청
4. DAO 는 MyBatis 를 이용하는 Mapper 를 통해서 원하는 작업을 수행
5-7. 처리한 데이터를 계속 전달하여 마지막에 뷰를 통해 결과를 보여준다 .
Content
Content
요청에 따른 결과처리
와 URI 에 대한 호출방
식 처리를 관리하는 컨
트롤러 패키지
DB 와의 연결을 담당하
는 DAO 패키지 , 인터
페이스와 구현체
(Impl) 로 구성
비즈니스 로직을 담당
하는 서비스 패키지 ,
마찬가지로 인터페이
스와 구현체 (Impl) 로
구성
화면에서 전달되는
데이터를 수집하기
위한 DTO 패키지
DAO 클래스에
데이터를 전달하기
위해 테이블의
구조를 객체화 시키
는
VO 패키지
로그인 인터셉터
패키지
DAO 가 사용하는 SQL
쿼리문 작성 패키지
이메일 인증과 파일
업로드를 위한 유틸
패키지
Content
회원가입 / 로그인
Ajax 를 이용하여 DB 에 중복되는 아이디가 있는
지
실시간 체크하여 확인 후 가입하면 이메일로 인증
메일이 전송된다 .
로그인을 하지않은 상태일
경우 즉시 로그인 페이지로
이동하며 , remember me 를
체크하여 자동 로그인이
가능하다 .
여기서 회원 정보를 입력하
여 가입을 하고 등록한 이메
일로 인증메일을 받을 수 있
다 .
Content
이메일 인증
자신의 이메일을 확인하면 인증 메일
이
도착해 있고 링크를 클릭하면
인증 화면으로 이동하여 인증키 확인
후 성공시 완료창이 뜨며 , 로그인 화
면으로 이동한다 .
Content
가입 아이디로 로그인
로그인을 하면
홈 화면으로 이동한다
.
프로필 관련과 아무런 글을 등록하지 않은 상태의 홈페이지 초기화
면
프로필 사이드를 클릭하면 계정 페이지로 이동할
수 있으며 , 여기서도 프로필 이미지를 등록 할 수
있지만 , 계정 페이지에서는 자세한 프로필을 수정
할 수 있다 .
Content
홈 화면에서의 프로필 이미지 등록
사진 올리기를 클릭하여 원하는 파일을
선택하면 화면이 어두워지면서 새창으
로 올릴 파일을 미리 확인이 가능하다 .
확인을 클릭하여
올릴 파일을
정하고 나면
Ajax 를 이용하여
실시간으로 프로필
이미지 등록이
완료된다 .
Content
계정 페이지 화면 설명
아무런 글이 등록되
지
않았을 때의 화면
프로필 사이드로 프로필 변경
버튼을 통해 수정이 가능하다
.
클릭시 홈으로 이
동
로고 클릭시 페이지의
top 으로 이동
로그아웃 버튼
Top 배경 및 프로필 수정 버
튼
팔로워가
가장 많은
3 명을
순서대로
보여준다
해당 SQL 문 , 친구 테이블에서 3 개
까지…
Content
계정 페이지에서의 프로필 수정과 top 배경 등록
프로필 변경 버튼 클릭시의 화면
Content
계정 페이지에서의 프로필 수정과 top 배경 등록
올릴 파일을 미리 확인하고 실시간으로 이미지들과 개인정보 수정이 가능하
다 .
Content
계정 페이지에서의 프로필 수정과 top 배경 등록
프로필 수정 및 이미지들의 등록 완료화면
Content
글 등록하기
Content
글 등록하기
글이 등록됨과 동시에 기존에 있던 미등록 화면은 사라지고
등록한 글의 개수가 카운트 된다 .
Content
글 및 사진 등록하기
사진 아이콘 클릭하거나 이미지를 드래그하여 파
일을 선택하면 등록했던 D 드라이브 폴더에 아이
디 / 년도 / 월 / 일 로 폴더가 만들어지며 이미지
가 저장된다 .
썸네일 이미지를 보여주며 폴더에도 따로 저장
Content
글 및 사진 등록하기
사진도 실시간으로
등록됨과 동시에
전체글인 “모닛”과
이미지만 따로 분류되는
“미디어”가 카운트 되며
왼쪽 사이드에도 같이
최근 업로드한 이미지만
6 개를 따로 보여준다 .
Content
왼쪽 사이드 이미지 상세
왼쪽 사이드의 이미지 클릭시 모달창이 뜨면서 원본 사진
을 볼 수 있으며 , 내용이 있을 경우 마우스를 이미지에
올리면 글 또한 상세히 볼 수 있다 .
Content
글 삭제
오른쪽에 있는 X 버튼을 누르면
삭제가 가능한 창이 뜨는데 ,
여기서 Delete 버튼을 클릭하
여
등록했던 글을 실시간으로 삭제
할 수 있다 .
Content
글 삭제 완료
삭제가 완료되면 모닛과 미디어 부분의 카운트도 함께 줄어들면서 왼쪽 사이드
의 이미지도 사라지는 것을 확인 할 수 있다 .
Content
미디어 페이지
업로드 된 사진이란 글과 미디
어 카운트 부분을 누르면 이미
지만 따로 볼 수 있는 페이지
로 이동 할 수 있다 .
Content
팔로우 기능
로그인한 상태로 다른 사람
의 계정 페이지를 보면 그
사람의 계정을 등록 할 수
있다 .
이것 또한 Ajax 를 이용하여
실시간으로 팔로우 하고싶은
사람을 등록할 수 있으며 ,
등록 완료시 팔로잉 버튼으
로
바뀌는데 , 이 버튼을 한번
더
클릭하면 등록이 취소된다 .
Content
팔로잉 페이지
자신의 계정에 있는 팔로잉 페이지를 보면 다른 사람의 계정이 등록 된 것을 확인 할 수
있으며 팔로잉 카운트도 늘어난 것을 확인 할 수 있다 .
Content
팔로워 페이지
팔로워 페이지에서는 자신을 등록한 사람들을 확인 할 수 있으며 , 각각의 계정에는
링크가 걸려있기에 클릭하면 그 사람들의 계정에 들어갈 수 있다 .
Content
좋아요 기능
로그인한 상태에서 좋아요 버튼을 누르면 DB 의 좋아요 테이블에서 해당 유저의 아이디가
있는지 확인하여 존재하지 않을 경우 카운트가 올라감과 동시에 테이블에 아이디가 입력되
고
같은 유저가 한번 더 좋아요를 클릭하면 카운트가 줄어들면서 해당 테이블에 아이디가
Content
다시 한번 홈으로…
홈 화면에서도 다른 페이지들에서와 똑같이 글 등록이나 이미지 업로드 , 확인 등을 할
수 있다 .

More Related Content

Similar to Spring portfolio3

페이스북요약 2
페이스북요약 2페이스북요약 2
페이스북요약 2Jiyoun Kim
 
페이스북요약 2
페이스북요약 2페이스북요약 2
페이스북요약 2Jiyoun Kim
 
AWS DevDay 실습 가이드 - Rekognition 기반 Twitter봇
AWS DevDay 실습 가이드 - Rekognition 기반 Twitter봇AWS DevDay 실습 가이드 - Rekognition 기반 Twitter봇
AWS DevDay 실습 가이드 - Rekognition 기반 Twitter봇Amazon Web Services Korea
 
Siwoo&Japan(private blog)
Siwoo&Japan(private blog)Siwoo&Japan(private blog)
Siwoo&Japan(private blog)Pak Siwoo
 
iOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4UiOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4Usys4u
 
센차 터치2 시작하기 | Devon 2012
센차 터치2 시작하기 | Devon 2012센차 터치2 시작하기 | Devon 2012
센차 터치2 시작하기 | Devon 2012Daum DNA
 

Similar to Spring portfolio3 (8)

페이스북요약 2
페이스북요약 2페이스북요약 2
페이스북요약 2
 
페이스북요약 2
페이스북요약 2페이스북요약 2
페이스북요약 2
 
Delivrary intro
Delivrary introDelivrary intro
Delivrary intro
 
Dubuplus guide
Dubuplus guideDubuplus guide
Dubuplus guide
 
AWS DevDay 실습 가이드 - Rekognition 기반 Twitter봇
AWS DevDay 실습 가이드 - Rekognition 기반 Twitter봇AWS DevDay 실습 가이드 - Rekognition 기반 Twitter봇
AWS DevDay 실습 가이드 - Rekognition 기반 Twitter봇
 
Siwoo&Japan(private blog)
Siwoo&Japan(private blog)Siwoo&Japan(private blog)
Siwoo&Japan(private blog)
 
iOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4UiOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4U
 
센차 터치2 시작하기 | Devon 2012
센차 터치2 시작하기 | Devon 2012센차 터치2 시작하기 | Devon 2012
센차 터치2 시작하기 | Devon 2012
 

Spring portfolio3

  • 1. Portfolio 개인 프로젝트 SNS 웹 프로젝트 Jang Hyun Su
  • 2. INDEX 1. 개발환경 2. 데이터베이스 테이블 구조 3. Content
  • 3. 개발 툴 : STS(Spring Tool Suite) 운영체제 : Windows7 서버 : Apache tomcat 8.0 DB : MySQL JAVA(spring, mybatis), JSP/Servlet, JavaScript, HTML/CSS Bootstrap, JQuery, Ajax 개발환경
  • 5. Spring MVC Process 1. 사용자의 요청이 Front Controller 에 전달 여기서 적절한 컨트롤러를 찾아서 간다 . 2. 컨트롤러는 적절한 서비스 객체를 찾아서 호출 3. 서비스에서 데이터베이스의 작업을 담당하는 DAO(Data Access Object) 를 이용해서 원하는 데이터를 요청 4. DAO 는 MyBatis 를 이용하는 Mapper 를 통해서 원하는 작업을 수행 5-7. 처리한 데이터를 계속 전달하여 마지막에 뷰를 통해 결과를 보여준다 . Content
  • 6. Content 요청에 따른 결과처리 와 URI 에 대한 호출방 식 처리를 관리하는 컨 트롤러 패키지 DB 와의 연결을 담당하 는 DAO 패키지 , 인터 페이스와 구현체 (Impl) 로 구성 비즈니스 로직을 담당 하는 서비스 패키지 , 마찬가지로 인터페이 스와 구현체 (Impl) 로 구성 화면에서 전달되는 데이터를 수집하기 위한 DTO 패키지 DAO 클래스에 데이터를 전달하기 위해 테이블의 구조를 객체화 시키 는 VO 패키지 로그인 인터셉터 패키지 DAO 가 사용하는 SQL 쿼리문 작성 패키지 이메일 인증과 파일 업로드를 위한 유틸 패키지
  • 7. Content 회원가입 / 로그인 Ajax 를 이용하여 DB 에 중복되는 아이디가 있는 지 실시간 체크하여 확인 후 가입하면 이메일로 인증 메일이 전송된다 . 로그인을 하지않은 상태일 경우 즉시 로그인 페이지로 이동하며 , remember me 를 체크하여 자동 로그인이 가능하다 . 여기서 회원 정보를 입력하 여 가입을 하고 등록한 이메 일로 인증메일을 받을 수 있 다 .
  • 8. Content 이메일 인증 자신의 이메일을 확인하면 인증 메일 이 도착해 있고 링크를 클릭하면 인증 화면으로 이동하여 인증키 확인 후 성공시 완료창이 뜨며 , 로그인 화 면으로 이동한다 .
  • 9. Content 가입 아이디로 로그인 로그인을 하면 홈 화면으로 이동한다 . 프로필 관련과 아무런 글을 등록하지 않은 상태의 홈페이지 초기화 면 프로필 사이드를 클릭하면 계정 페이지로 이동할 수 있으며 , 여기서도 프로필 이미지를 등록 할 수 있지만 , 계정 페이지에서는 자세한 프로필을 수정 할 수 있다 .
  • 10. Content 홈 화면에서의 프로필 이미지 등록 사진 올리기를 클릭하여 원하는 파일을 선택하면 화면이 어두워지면서 새창으 로 올릴 파일을 미리 확인이 가능하다 . 확인을 클릭하여 올릴 파일을 정하고 나면 Ajax 를 이용하여 실시간으로 프로필 이미지 등록이 완료된다 .
  • 11. Content 계정 페이지 화면 설명 아무런 글이 등록되 지 않았을 때의 화면 프로필 사이드로 프로필 변경 버튼을 통해 수정이 가능하다 . 클릭시 홈으로 이 동 로고 클릭시 페이지의 top 으로 이동 로그아웃 버튼 Top 배경 및 프로필 수정 버 튼 팔로워가 가장 많은 3 명을 순서대로 보여준다 해당 SQL 문 , 친구 테이블에서 3 개 까지…
  • 12. Content 계정 페이지에서의 프로필 수정과 top 배경 등록 프로필 변경 버튼 클릭시의 화면
  • 13. Content 계정 페이지에서의 프로필 수정과 top 배경 등록 올릴 파일을 미리 확인하고 실시간으로 이미지들과 개인정보 수정이 가능하 다 .
  • 14. Content 계정 페이지에서의 프로필 수정과 top 배경 등록 프로필 수정 및 이미지들의 등록 완료화면
  • 16. Content 글 등록하기 글이 등록됨과 동시에 기존에 있던 미등록 화면은 사라지고 등록한 글의 개수가 카운트 된다 .
  • 17. Content 글 및 사진 등록하기 사진 아이콘 클릭하거나 이미지를 드래그하여 파 일을 선택하면 등록했던 D 드라이브 폴더에 아이 디 / 년도 / 월 / 일 로 폴더가 만들어지며 이미지 가 저장된다 . 썸네일 이미지를 보여주며 폴더에도 따로 저장
  • 18. Content 글 및 사진 등록하기 사진도 실시간으로 등록됨과 동시에 전체글인 “모닛”과 이미지만 따로 분류되는 “미디어”가 카운트 되며 왼쪽 사이드에도 같이 최근 업로드한 이미지만 6 개를 따로 보여준다 .
  • 19. Content 왼쪽 사이드 이미지 상세 왼쪽 사이드의 이미지 클릭시 모달창이 뜨면서 원본 사진 을 볼 수 있으며 , 내용이 있을 경우 마우스를 이미지에 올리면 글 또한 상세히 볼 수 있다 .
  • 20. Content 글 삭제 오른쪽에 있는 X 버튼을 누르면 삭제가 가능한 창이 뜨는데 , 여기서 Delete 버튼을 클릭하 여 등록했던 글을 실시간으로 삭제 할 수 있다 .
  • 21. Content 글 삭제 완료 삭제가 완료되면 모닛과 미디어 부분의 카운트도 함께 줄어들면서 왼쪽 사이드 의 이미지도 사라지는 것을 확인 할 수 있다 .
  • 22. Content 미디어 페이지 업로드 된 사진이란 글과 미디 어 카운트 부분을 누르면 이미 지만 따로 볼 수 있는 페이지 로 이동 할 수 있다 .
  • 23. Content 팔로우 기능 로그인한 상태로 다른 사람 의 계정 페이지를 보면 그 사람의 계정을 등록 할 수 있다 . 이것 또한 Ajax 를 이용하여 실시간으로 팔로우 하고싶은 사람을 등록할 수 있으며 , 등록 완료시 팔로잉 버튼으 로 바뀌는데 , 이 버튼을 한번 더 클릭하면 등록이 취소된다 .
  • 24. Content 팔로잉 페이지 자신의 계정에 있는 팔로잉 페이지를 보면 다른 사람의 계정이 등록 된 것을 확인 할 수 있으며 팔로잉 카운트도 늘어난 것을 확인 할 수 있다 .
  • 25. Content 팔로워 페이지 팔로워 페이지에서는 자신을 등록한 사람들을 확인 할 수 있으며 , 각각의 계정에는 링크가 걸려있기에 클릭하면 그 사람들의 계정에 들어갈 수 있다 .
  • 26. Content 좋아요 기능 로그인한 상태에서 좋아요 버튼을 누르면 DB 의 좋아요 테이블에서 해당 유저의 아이디가 있는지 확인하여 존재하지 않을 경우 카운트가 올라감과 동시에 테이블에 아이디가 입력되 고 같은 유저가 한번 더 좋아요를 클릭하면 카운트가 줄어들면서 해당 테이블에 아이디가
  • 27. Content 다시 한번 홈으로… 홈 화면에서도 다른 페이지들에서와 똑같이 글 등록이나 이미지 업로드 , 확인 등을 할 수 있다 .