-
ajax 를 이용해서 DB 이용하기 / 병원 실시간 예약 기능 구현 프로젝트학원 프로젝트 2023. 5. 9. 14:32
유저가 사용하기 편하고 직관적인 페이지를 구현하기 위해서
진료과를 클릭하면 해당 진료과의 의사 목록을 불러오고 , 달력의 날자를 클릭하면 해당 시간에 의사의 스케줄을 확인 할 수 있는 기능을 구현하고싶었다.
왜 ajax ( 비동기식 ) 를 이용했는가?
- 동기식으로 MVC 모델에서 DB와 연동하려면, 다음과 같은 컨트롤러를 구성한다.
이 경우, 브라우저는 DB와 연동할 때 마다 브라우저를 리랜더링 해야한다. 반면에,
ajax를 이용하면 DB와 연동한 뒤, 브라우저에서 필요한 부분만 리랜더링 하기 때문에 유저가 더욱 다이나믹 하게 브라우저를 이용할 수 있다.
구현 화면
- 위의 달력의 날자를 클릭하면, DB로 부터 해당 날자에 예약 정보가 있는지 확인한 후,
시간 값이 들어있는 li들을 생성하고, DB에 저장되어 있는 시간에는 붉은색으로 표시가 된다.
Java Script
- for 문을 이용해서 li의 값과 DB로 부터 Select 한 배열의 값을 비교해서, 조건을 만족하면 blockedDay 클래스를 부여하고 a태그를 비활성화 했고 조건을 만족하지 않으면 click 이벤트를 부여한다.
Controller
Controller에서 ajax 신호를 처리하려면, 다음과 같이 ResponseEntity<> 형태로 리턴 해야한다.
프로젝트에 구현한 기능
- 진료과를 클릭하면 , 해당 진료과에 속하는 의사 정보를 불러온다
- 예약 취소 버튼을 클릭하면, DB에서 해당 데이터를 삭제하고 list를 리랜더링 한다
- 진료과를 클릭하면 , 해당 진료과에 속하는 의사 정보를 불러온다
'학원 프로젝트' 카테고리의 다른 글
간호사 업무 해소 환자 위치 찾기 프로젝트 (2. 공공데이터 활용 ) (0) 2023.05.30 간호사 업무 해소 환자 위치 찾기 프로젝트 (1. Geolacation API ) (0) 2023.05.26 이메일 인증 구현 / 병원 실시간 예약 기능 구현 프로젝트 (0) 2023.05.10 로그인 기능 구현하기 / 병원 실시간 예약 기능 구현 프로젝트 (0) 2023.05.10 팀프로젝트)예약 달력 만들기 (0) 2023.04.20