개요
개발 환경: Spring, MySQL, NexacroN
주제: 호텔 예약 프로그램
프로젝트 목표
1. 넥사크로와 스프링, 데이터베이스 연동하여 활용해보기
2. 넥사크로의 컴포넌트들을 활용해보기
3. 넥사크로로 CRUD 구현해보기
1. 메인페이지
리스트뷰를 통해 데이터베이스 내에 있는 데이터를 출력
이미지를 클릭하면 모달창으로 상세페이지 출력
2. 상세페이지
메인페이지에서 클릭한 셀의 데이터를 전달받아 모달창에 출력
3. 예약페이지
상세페이지의 예약하기 버튼을 누르면 페이지 이동, 예약페이지는 step으로 구현
step1. 예약날짜 선택 및 가격 확인
잘못된 날짜 선택 시 예외 처리
오늘 이전 날짜 선택 시 alert를 띄워 날짜를 다시 선택하도록 유도
입실 날짜보다 퇴실 날짜가 이전 날짜를 선택했을 때 alert를 띄워 날짜를 다시 선택하도록 유도
날짜 선택 후 총 가격 확인 버튼 클릭 시 계산된 총 가격을 확인할 수 있음
step2. 예약자 정보 입력
방번호는 클릭한 셀의 정보를 받아와 수정할 수 없도록 readonly처리
생년월일과 연락처는 숫자만 입력 가능하고 생년월일은 8글자, 연락처는 11글자 입력 시 자동으로 다음 입력창으로 넘어감
step3. 예약 완료
예약하기 버튼 누르면 저장완료 alert가 뜨면서 예약 완료 페이지로 이동
4. 예약조회페이지
메인페이지에서 예약조회 버튼을 누르면 이동하는 페이지
페이지로 오면 바로 이름 입력창에 포커스가 되어있음
이름과 비밀번호를 입력하고 조회를 누르면 해당 정보가 조회됨
삭제 버튼 클릭 시 confirm 창으로 사용자의 확인을 받고 데이터가 삭제됨 (저장 버튼을 눌러야 변경사항이 최종적으로 반영됨)
이메일, 연락처, 생년월일, 메모는 수정이 가능하며 입력창을 눌러 수정하고 저장 버튼을 누르면 변경사항이 저장됨
입실, 퇴실, 예약일자는 데이터베이스에 '.' 점 없이 저장되어 있으며 넥사크로에서 mask로 형식 변경을 해줌
구현하며 해결한 것들
Q1. 메인페이지에서 데이터 조회 시 조회 버튼을 누르지 않고 바로 데이터가 뜨게 하는 방법
A1. onload 함수를 이용하여 frame이 onload 될 때 데이터가 조회하도록 구현
Q2. 모달창에 값 전달이 되지 않을 때
A2. this.opener.변수명 / frame의 경우는 this.parent.변수명으로 전달
this.parent가 안 될 경우 this.parent.parent.변수명으로 시도
Q3. 그리드에 edit 창에 입력이 제대로 안 되는 경우
A3. 데이터셋 컬럼 이름과 그리드의 컬럼 이름이 일치하지 않기 때문
Q4. Edit로 입력 받아 데이터 셋 혹은 데이터베이스에 저장하고 싶을 때
A4. edit에 데이터셋 바인딩 혹은 setColumn 해 줄 수있음
Q5. 데이터 저장이라고 뜨는데 저장되지 않을 때
A5. 예약 정보 입력 페이지의 dataset과 예약 조회 페이지의 dataset의 데이터셋명은 동일하지만 rows의 행의 갯수가 달라 제대로 저장되지 않는 현상이 발생하여 rows 수(인덱스)를 동일하게 맞춰줌
Q6. 예약조회 쿼리문을 제대로 썼는데 데이터가 조회되지 않고, 개발자 도구의 네트워크를 확인했는데 값이 들어오지 않을 때
A6. 데이터셋의 rows 인덱스가 0개였는데 1개로 늘려줬더니 해결됨
참고
https://www.playnexacro.com/#show:learn:5383
https://docs.tobesoft.com/nexacro_n_v24_ko
