신입 개발자 포트폴리오(web), 비동기식 게시판
TRANSCRIPT
신입 웹 개발자 천현재
Portfo-lio 2016.12
개인 프로젝트
Tool Kit
Used Language, Library
Database
Content
Last Words
Index
Tool Kit
Eclipse Luna(JDK 1.8.0)
Spring STS 3.2.2(+Maven)
Apache-Tomcat 8.0(WAS)
Mysql(DB)
GitHub(SVN)
Used Language, Li-brary
Used Language- JAVA- JSP- JavaScript- HTML, CSS
Used Open Source Li-brary- Bootstrap(HTML, CSS)- JQuery(JavaScript)- Jackson(JSON)
개체관계모델 (E-R) 다이어그램- MySQL Workbench 6.3 CE 버전으로 작성
Data-base
Content
Spring MVC Process
1. 처리 요청(URL)
Dispatcher Servlet
Handler Mapping
2. 요청 (URL) 과 일치하는 Controller 검색
Controller
3. Mapping 된 Con-troller 에 처리 요청
Data Base
4. DB 질의 5. DB 질의 결과
6. Model And View 리턴
View Resolver
7. Controller 에서 처리된 결과를 출력할 View 검색
View
8. 처리 결과 출력
Content
JaeyaBoard Ver 2.0 Process
URL : localhost/jboard/ (index page)
요청 URL
URL : localhost/jboard/logIn
UserControllerCon-troller
@RequestMapping(“/signUp”)
URL : localhost/jboard/ (index page)요청 URL
URL : localhost/jboard/signUp
UserDaoDAO
userSignUp( )
URL : localhost/jboard/logIn
URL : localhost/jboard/write
URL : …
…
BoardDaoboardList( )…
UserDto
Model
BoardDto
View
index.jsp
BoardController@RequestMapping(“/write”)
AjaxController@RequestMapping(“/…”)
…
…
…
Content
부트스트랩 Modal 을 이용한 기능 제어“SIGN UP 태그 클릭 시 Modal 팝업 호출
로그인 , 글쓰기 , 글 내용 보기 , 글 수정 / 삭제 등 모든 기능을 Modal 로 제어 하였습니다
Content
Bootstrap Modal 기능을 이용해 페이지 이동 없이 index 페이지에서 Sign Form 호출 후 , 회원 가입을 할 수 있도록 했습니다 .
중복된 아이디로 회원 가입 할 수 없도록 ID Check 기능을 구현하였고 , Confirm 버튼을 통해 E-Mail 인증 메시지를 보내도록 하였습니다 .
Content
회원가입 ID 중복 값 제어 “ID Check” 버튼 클릭 시 , 입력한 “ signId” 값을 가지고 컨트롤러에서 ID 중복 체크를 합니다 .
DB 안의 u_id 값과 입력 u_id 값을 비교하여 중복되지 않으면 0 값 리턴 , 중복인 경우 1 값 리턴 , 입력 값이 없을 시 -1 값을 리턴하여 중복 메소드를 제어하였습니다 .
사용 가능한 ID 인 경우 , 입력한 u_id 값을 그대로 리턴하여 번거롭지 않도록 제어 하였습니다 .
Content
인증 Email 제어
“Confirm” 버튼 클릭 시 , 입력한 “ email”값을 컨트롤러에서 받는 메일 주소 “ to” 로 설정합니다 . 메일은 title 과 content 를 설정 하여 보낼 수 있습니다 .
인증 링크는 아직 구현하지 못했습니다 .
Content
로그인 페이지 역시 Bootstrap Modal 기능을 이용해 페이지 이동 없이 in-dex 페이지에서 바로 로그인 할 수 있도록 구현 하였습니다 .
로그인 비밀번호 입력 시 , 최소 8 자리 이상 입력할 경우에만 Log In 버튼을 활성화 할 수 있도록 제어 하였습니다 . ( 회원 가입에도 동일하게 제어 )
Content
기본적으로 비밀번호 입력 창에 focus 되어 있지 않을 시 조건 문구 출력하지 않습니다 .
비밀번호 8 자리 이상 조건 만족 시 , Check 이미지 색상 Red >> Green 으로 출력하고 , Sign In 버튼을 활성화 시킵니다
회원 가입 , 로그인 비밀번호 제어
Content
글 쓰기 , 글 내용 보기 , 글 수정 , 글 삭제 기능들 또한 Bootstrap Modal 기능으로 제어하여 페이지 이동 없이 동작 할 수 있도록 구현하였습니다 .
Content
페이지 이동을 없애기 위한 핵심 로직 – 1 (Ajax 통신 )
테이블 제목 클릭 시 , 그 때의 “ b_num” 값을 매개변수 “ num” 으로 가져간 뒤 “ param” 에 대입하여 param 값을 가지고 contentView.a-jax 를 호출 합니다 .
Content
페이지 이동을 없애기 위한 핵심 로직 – 2 (Ajax 통신 )
기본적으로 @RequestMapping 만 사용하면 return 값을 view 값으로 주기 때문에 xxxx.jsp 로 화면 이동이 일어나게 됩니다 .
@ResponseBody 를 사용 함으로써 자바객체 “ BoardDto” 리턴 값을 xxxx.jsp 페이지가 아닌 “ HTTP 응답 몸체”로 전송하여 페이지 이동 없이 화면에 출력할 수 있습니다 .
Content
Contact 기능은 홈페이지 관리자에게 메일로 코멘트를 남길 수 있는 기능입니다 . 각 내용을 입력하여 Send 버튼을 누려면 지정된 주소로 메일을 보내도록 구현하였습니다 .
Content
Contact 메일을 보내기 위한 핵심 로직 - 1
“Send” 버튼 클릭 시 입력 값들을 가지고 “ sendContact.ajax” 를 호출 합니다 .
Content
Contact 메일을 보내기 위한 핵심 로직 - 2@Autowired 어노테이션을 이용해 “ mailSender” 프로퍼티에 JavaMailSender 타입의 빈 객체를 자동으로 주입합니다 .
“msg” 내용을 설정 한 후 , send
Last Words
시연 영상 : http://blog.naver.com/sskd789/220885170933
개인 블로그 주소 : http://blog.naver.com/sskd789
자세한 소스코드를 보시려면 : https://github.com/Jaeya3274/jaeyaboard
Bootstrap Modal 기능을 중점적으로 이용하여 페이지 이동이 없는 홈페이지를 만들어 보았습니다 . JQuery Ajax 통신을 이용하여 파라미터를 보내어 JSON 혹은 Text 로 응답 데이터를 리턴 받아 화면으로 출력하여 화면이동이 없는 홈페이지를 만들 수 있었습니다 . 이번 프로젝트로 Ajax 통신에 대하여 깊진 않지만 전반적인 프로세스를 이해 할 수 있었습니다 . 신입사원으로 뽑아 주신다면 항상 배우는 자세로 임하여 기대에 어긋남이 없는 인재가 되도록 노력하겠습니다 .