Portfolio

sooyeon’s portfolio
제 작 자 박 수 연
2020.03.01~

CONTENTS
01 02 03 04
자기소개
- 사진
- 인적사항
- 이력
- 기술력
- 개발기간(WBS)
- 프로젝트개요
- 개발환경
- 기획
- ERD설계
- 테이블��의서
- 기능구현
- 코드상세화면
프로젝트 개요 기획,설계 기능 구현

자기소개
01
박 수 연 포 트 폴 리 오
박수연
niceboop@naver.com이메일
010-4449-9728전화번호
서울시 영등포구주소
신입(중고신입)지원경력
1990.07.15출생년도
위스콘신대학교(IT관련 공학과) 학사졸업
[201008~201612] 학점 4.0 / 4.5
학력
이름
경력 ㈜누리앱
-BackEnd 자바개발자(웹, 안드로이드)
- 2019.01 ~ 2020.03 (1년 3개월)

01
자기소개
Language
WASDBMS 형상관리
Framework
기술력
Skill
서버

“ ”
02
프로젝트
프로젝트개요
Eclipse툴을 사용한
Spring MVC2 게시판 형태의
관리자 페이지 시스템
(에디터, 자동메일발송, 첨부파일)
프로젝트 개요
“Web, App 개발은 자바 기반입니다. 자바개발자는 두가지가 가능합니다.”
2020.03.01~
개발기간 : 2020.03.01 ~ 2020.03.10

“ ”
H a n s o l ’ s p o r t f o l i o
01
WBS (진행사항)
프로젝트개요
일일보고서
게시판 기능
(파일 업/다운)
개발완료
ERD + 기획 완료 url 링크 업로드
동영상 열람 가능
자동 메일 발송
전체 검색/
콘텐츠 검색
개발 완료
문의/
상담 버튼
폼 완료

02
1) 프로젝트 개요 :
(관리자 페이지 관리 시스템)
다양한 API가 포함되어 있는 관리자 페이지
2) 수행기간 : 2020년03월 02일 ~ 2020년03월 06일
3) 개발환경
개발 목표
다양한 API가 포함되어 있는 게시판 형태의 관리자페이지 구
현
• 언어 : Java8
• 기술 : HTML5, CSS3, JavaScript, Json, Ajax, Jquery, BootStrap
• IDE : Spring Tool Suite3, SQL Developer
• DBMS : Oracle 11g
• API : mail api, file api,
• Library : Logback 1.2.3, ojdbc6, 11.2.0.1.0, Jackson 2.9.8, gson
2.8.5, javax.mail 1.6.2, aspectj 1.9.2, spring-security 5.2.1, commons-
fileupload 1.3.1,
spring-websocket, 5.2.1
• WAS : Apache TomCat v8.5
• 형상관리 : github

03
4) ERD 설계

04
5) 기획
필요 기능:
1) 전체 검색
-- 웹사이트 전체에서 텍스트 검색 기능
2) 콘텐츠 검색
-- 게시판 내 콘텐츠 검색 기능
-- 카테고리 필터링
3) 문의 및 상담 버튼
-- 모든 페이지에서 버튼이 노출되어야 함 (Floating 버튼 형식)
-- 버튼 클릭 시 문의사항 및 상담 요청 사항을 작성할 수 있는 Form 노출
-- Form 작성 완료 후 보내면 자사에서 메일로 해당 내용을 받아볼 수 있어야 함
4) 게시판
-- 동영상 시청 가능 (파일 업로드 형식이 아닌 유튜브 링크를 통해 동영상 열람 가능)
-- 블로그 형식의 게시판 (사진 업로드, 텍스트 입력)
-- 파일 다운로드 가능 (XML 파일)
5) 관리자 사이트
-- 동영상 유튜브 링크 업로드
-- PDF 파일 업로드
-- 사진과 텍스트 입력이 가능한 게시판
6) 웹사이트 내 Form 입력 후 전송 시 자동 메일 발송
-- Contact US 또는 뉴스레터 등록 시 사용자가 Form을 입력하면 입력한 이메로 Thanks mail 발송

dffdf
05
기능
구현기능설명
기능 : 로그인
설명 : 로그인 유지가 되는 로그인 기능
코드설명:
로그인 버튼 클릭시 Form action=“Login.do”로 넘어
간다. Member 컨트롤러에서 @requestMapping으
로 받는다. VO, HttpSession, HttpServletResponse,
JSP에서 설정한 변수, 총 4개를 파라미터로 던진다.
IF문으로 유저가 존재할때, SESSION에 변수를 담았
다. IF문을 주어 유저가 존재할때, 쿠키에 저장을 하
였다.
로그인 유지 기능은 USER_ID, SESSION_ID,
SESSIONLIMIT 파라미터를 날려, USER_ID 가 같으면
SESSION_ID, SESSION_LIMIT을 저장.
로그인 기능은 USER_ID와 USER_PWD가 같으면 비
교하여서 LoginUser라는 변수에 저장하였다.

dffdf
05
주요코드
컨트롤러

ㄴㅇ
06
기능
구현기능설명
기능 : 메인화면
설명 : 제목을 누르면 상세조회가 가능한 메인화면.
상세화면 조회시 조회수 증가.
첨부파일이 존재하면 제목이 보이게 구현.
코드설명 :
컨트롤러에서 JSP화면으로 RETURN값을
넘긴다.
서비스에서 게시판 리스트를 조회해와서
ArrayList로 VO에 저장한다.
그것을 Model에 변수로 담아서 JSP 페이지
로 넘��준다. 파일도 동일한 방식이다.
JSP에서는<c:forEach var="b" items="${ bList }">
안에서 ${ b.boardNo } 변수를 하나씩
불러온다.

jsdfsdfsfdd
7
주요코드

jsdfsdfsfdd
8
기능
구현기능설명
기능 : 메인화면(비밀글 선택시)
설명 : (비밀글) 클릭시 비밀번호 확인창이
뜬다. 비밀번호가 일치하면 상세화면으로
넘어간다.
코드설명 :
1. Id 값�� “checkpwd”를 버튼으로 버튼으로
준다.
2. 확인버튼 클릭시 “checkcheck.do”
컨트롤러로 간다.
컨트롤러를 타고 성공하면, 상세화면으로 가
고, 실패하면 메인화면으로 가게하기위해
비동기방식인 Ajax를 사용한다.

9
주요코드

jsdfsdfsfdd
10
기능
구현기능설명
기능 : 상세화면 조회
코드설명 :
1. Id 값에 “checkpwd”를 버튼으로 버튼으로
준다.
2. 확인버튼 클릭시 “checkcheck.do”
컨트롤러로 간다.
컨트롤러를 타고 성공하면, 상세화면으로 가
고, 실패하면 메인화면으로 가게하기위해
비동기방식인 Ajax를 사용한다.

11

commons-fileupload
12
기능
구현기능설명
기능 : 상세화면(첨부파일 다운로드)
설명 : 첨부파일 클릭시 지정한 경로로 다운로드됨.
코드설명 :
commons-fileupload 1.3.1,
org.imgscalr 4.2 라이브러리 추가,
Model에 서비스에서 조회한 파일리스트를
Map<string, object>형태의 리스트로 가져와서
“File” model 키 값에 담았다.
JSP 에서는 <c:forEach 반복문에 ${file}로
선언하여 펌부파일 이름을 누르면
파일다운로드 컨트롤러를 타게 만들었다.
HttpServletResponse를 이용해 첨부파일을
다운받을수있다.
다운로드시 파일명도 UTF-8로
가져오도록 설정해주었다.

jsdfsdfsdfdd
13
주요코드
상세조회 JSP
컨트롤러

14
기능
(관리자 페이지 관리 시스템) 구현기능설명
기능 : 글쓰기 페이지
설명 : 파일첨부와 비밀번호설정이 가능한 글쓰기
코드설명:
비밀번호 설정은 자바스크립트인 JQuery를
사용하여 $(선택자).동작함수();형태로
버튼을 클릭하면
Pwd에 변수를 넣어 저장하게 되고, text는 (“Y”)
function pwdSetting(str) {
$("input[name=boardPwd]").val(str);
$("#pwdResult").text(" Y ");
}
형태로 저장하였습니다.
제목, 내용, 첨부파일 다 입력후 저장 버튼을
누르면,
<form action="boardInsert.do"
method="post" enctype="multipart/form-data">
컨트롤러를 타서, service -> dao를 타게 됩니다.
컨트롤러에서는 파일 추가를 위해
MultipartHttpServletRequest 를 사용하였다.
MultipartHttpServletRequest 를 통하여서
파일을 업로드 할 수 있기때문이다.
업로드한 파일은 MultipartHttpServletRequest 의
변수에 저장이 된다. 그 저장된 변수를 리스트에 담아서
파일 테이블에 저장시킨다.

서비스에서는
첨부파일 리스트에 파라미터 VO와 MQREQUEST
파라미터를 저장합니다. 서비스에서는 API를 호출해서
FOR문안에 개수를 저장한후, DAO 파일 저장 쿼리에
입력합니다. ㅇㅇ
15
주요코드
코드설명 : 서비스에서는 첨부파일 리스트에 파라미터 VO와 MQREQUEST 파라미터를 저장합니다. 서
비스에서는 API를 호출해서 FOR문안에 개수를 저장한후, DAO 파일 저장 쿼리에 입력합니다.

jsdfsdfsfdd
16
기능
구현기능설명
기능 : 글쓰기(스마트 에디터)
설명 : 글쓰기에 스마트 에디터 적용
코드설명 :
1. Webapp 폴더 안에 summernote zip 파일
추가
2. JSP 에서 summernote css/js script 경로 설정
3. Text 내용부분에 id 값을 “summernote”
라고 준다.
4. Script 부분에 function id값인 “summernote를
가져와서 에디터 설정을 잡아준다.

17
주요코드

jsdfsd
19
기능
구현기능설명
기능 : 상세화면(글삭��)
설명 : 상세화면에 수정버튼 클릭시 글번호를
파라미터를 날려서 테이블을 삭제 할수있다.
코드설명 :
1. Ajax로 컨트롤러 “deleteBoard.do”를 탄다.
2. 컨트롤러에서 서비스 -> dao -> mapper를
거쳐 삭제해준다.

20
주요코드

21
기능
기능 : 상세화면(글수정)
설명 : 상세화면에 수정버튼 클릭시 글 제목, 내용, 파일
첨부를 수정할수있다.
코드설명 :
글 수정은 글쓰기와 유사하다.
글번호(BNO)를 파라미터로 받은뒤 해당글
조회후, 입력상자에 넣어준다.
수정 입력폼은 글쓰기와 달리
Hidden 태그로 글번호를 가지고 있다.
수정컨트롤에서는 글쓰기의 저장 컨트롤과
같이 boardVO로 사용자의 입력값을 받아와서
서비스의 updateBoard 호출한뒤
Db에 update문을 실행하여 테이블에 저장한다.
@ModelAttribute는 사용자가 입력한 내용들의 이름과
지정된 클래스 (boardVO)의 변수 명이 일치하면
자동으로 그 내용을 담아서 반환해 준다.

21
기능
기능 : 메일 보내기
설명 : 메일 보내기
코드설명:
1. 라이브러리 추가
- mail.jar
- Activation.jar
2. 글쓰기 폼 jsp로 만들기
- mailForm.jsp
3. 자바로 SMTP 서버에 로그인 하기 위한
계정정보를 입력한다.
- SMTPAuthenticator.java
4. 객체에 SMTP 서버 접속에 필요한 정보 저장
하고, 세션을 얻어오고, 클래스에 전달할 입
력값들을 저장하여 TRANSPORT 객체의
SEND APTJEM를 이요하여 메일을 보낸다.
- sendMail.jsp

21
주요코드

기능
21
기능
기능 : 사진 첨부
설명 : 사진 첨부
구현 설명:
1. Summernote api 활용
2. Pom.xml 설정
3. url 경로를 통해서 파일 이름을 찾아
서 jsp에서 구현

THANK
YOU
박 수 연

Portfolio

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Similar to Portfolio

Similar to Portfolio (20)

Portfolio