유아용품 정기 렌탈 서비스 사이트입니다.
개발기간 : 2019.09.02~2020.02.27
개발인원 : 6명
개발환경 : open jdk 1.8, Oracle 11g DB, Javascript, Spring 5.0.7, Bootstrap, Apache Tomcat 8.5, Github, Source Tree
개발내용 :
DB 설계
메인 페이지
- 전체 UI/UX 디자인.
- Header부분을 스크롤을 내려도 보이도록 고정시키고 아이콘 클릭 시 전체메뉴 나옴.
- 로그인시 ‘로그아웃’으로 바뀌고 프로필 사진을 띄워줌. 사진 클릭하면 마이페이지로 이동
- 함수를 사용하여 구독 신청 날자 까지 남은일, 시, 분, 초를 표시.
아이디 찾기
- 아이디/패스워드 Javascript tab사용하여 페이지 이동 없이 각각 해당하는 데이터 전송하여 db값과 비교
- 이름과 핸드폰 번호를 입력받아 데이터베이스에서 확인 후
일치할 경우에는 해당 아이디를 화면에 띄워주고,
일치하지 않을 경우에는 Alert창으로 일치하는 ID가 없음을 알려줌.
비밀번호 찾기
- 입력 받은 아이디, 이름, 핸드폰번호를 데이터베이스에서 확인.
- 일치할 시 ServiceImpl단에서 .randomUUID()로 8자리 난수 생성후 db에 변경된 비밀번호로 저장.
- 난수로 변경 된 비밀번호를 javax.mail, SMTP 프로토콜, mailSender 이용하여 해당 이메일로 발송.
- 정보 불일치 시 alert창.
회원정보 수정
- 데이터 베이스에 저장된 데이터를 불러와 회원정보 수정form에 띄워 줌.
- 사진 등록 시 드래그&드랍 기능 구현.
- 닉네임 변경 시
- 중복확인 필수, 변경하지 않을 시 중복확인 필요 없음.
- 비밀번호 변경 원할 시
- 입력 후 변경하기 버튼 클릭.
- Ajax 이용하여 페이지 이동 없이 변경 가능.
- 새로운 비밀번호 입력 시
- 유효성 검사 후 변경.
- 불만족시 javascript에서 .show()와 .hide()로 비밀번호8자리 이상, 일치여부 보여줌.
파트너 페이지
- Selectbox 이용하여 기존의 파트너사의 정보를 불러와 카테고리 세분화.
- 데이터베이스에 저장된 파트너사 목록(파트너사 대표사진)을 ajax로 불러와 hover 기능을 이용하여 회사명 등을 사진 위에 띄워줌.
- 파트너 가입신청 버튼 클릭 시 모달 창으로 정보를 받아 관리자가 수락/거절 할 수 있도록 데이터베이스에 저장.
Contact Us 페이지
- 카카오맵 API를 이용하여회사 위치 표시.
- 큰지도 보기, 길찾기 링크를 통해 카카오맵 연결 및 현재 나의 위치에서 회사까지 가는 길찾기 제공.
관리자 페이지
- dataTable 라이브러리, Ajax, JSON을 이용하여데이터베이스에 저장 된 전체 회원 목록을 띄워줌.
- 상세정보 클릭 시 해당 회원에 대한 정보를 모달 창으로 띄워줌.
- 검색기능, 한 페이지에 나오는 정보 개수, 페이징 처리는dataTable 라이브러리에서 자동 처리.
- Ajax를 이용하여 일반회원이나 비매너회원 클릭 시 페이지 이동 없이 정보 변경 가능.
위 내용들은 첨부해 놓은 포트폴리오 파일에 실제 구현한 페이지와 함께 설명되어 있습니다.
और देखें
