김동민Web Developer  / UTC(UI TO CODE)
이 프로젝트의 Tech Stack
javajavascriptjqueryhtmloracle11gtomcat8bootstrap
UTC(UI TO CODE)
HTML 학습 사이트
2018년 11월 18일 ~ 2018년 12월 6일 (18일)
Tech Stack
  • java
  • javascript
  • jquery
  • html
  • oracle11g
  • tomcat8
  • bootstrap
프로젝트 등급 팀프로젝트
  • project image
  • project image
  • project image
  • project image
  • project image
Project 세부내용

UI를 HTML코드로 변환시켜주는 사이트, UTC

HTML을 처음 배우는 사용자들이 더 재밌게 HTML을 학습할 수 있습니다.

수행기간 : 2018.11.19 ~ 2018.12.07

프로젝트 구분 : 팀프로젝트 / 기여도 : 20%

DB 설계

db.png

담당기능

  • 회원가입

스크린샷 20190310 오후 1.58.35.png

구현기능설명
모달을 사용하여 오른쪽 상단의 SIGNUP 버튼을 누르면 회원가입창이 나오게 구현하였고,
사용자는 이름, 이메일, 비밀번호를 입력하여 회원가입을 진행합니다.
javascript를 사용하여 유효성 검사를 적용하였고,
작성하지 않은 항목이 있으면 알림창이 나타나고 포커스를 적용하게 하였습니다.
SMTP를 사용하여 이메일을 인증을 구현하였고,
이메일 인증하기 버튼을 누르면 사용자가 입력한 이메일 주소로 인증번호가 전송되게 구현하였습니다.

  • 로그인

스크린샷 20190310 오후 1.35.46.png

구현기능설명
모달을 사용하여 오른쪽 상단의 LOGIN 버튼을 누르면 로그인창이 나오게 구현하였고,
회원가입이 완료된 이메일 / 비밀번호로 로그인을 합니다. Servlet에서 로그인 정보를 Session 객체에 저장하고,
로그인 한 회원의 회원등급(사용자/관리자)을 구분하여 페이지 이동을 하게 구현하였습니다.

  • Q&A 게시판 CRUD / 페이징

스크린샷 20190310 오후 2.19.21.png

구현기능설명
MyBatis를 이용해서 Q&A 게시판 CRUD를 구현하였습니다.
로그인 정보를 세션 객체에 담고 게시판 페이지에서 객체를 선언한 후에 조건문을 사용하여 값이 있는 경우에만 글쓰기 버튼이 나타나게 하였고,
비회원인 경우에는 글을 열람하는 것만 가능하게 구현하였습니다.
게시글 수정/삭제 기능도 객체에 로그인 정보를 담아서 자신의 게시글 일 때만 수정/삭제 버튼이 보이도록 구현하였습니다.
Oracle 쿼리문을 이용하여 게시물을 10개씩 가져와서 게시판 페이징을 구현하였습니다.**