ajax 를 이용해서 DB 이용하기 / 병원 실시간 예약 기능 구현 프로젝트

유저가 사용하기 편하고 직관적인 페이지를 구현하기 위해서

진료과를 클릭하면 해당 진료과의 의사 목록을 불러오고 , 달력의 날자를 클릭하면 해당 시간에 의사의 스케줄을 확인 할 수 있는 기능을 구현하고싶었다.

 

 

왜 ajax ( 비동기식 ) 를 이용했는가?

 - 동기식으로 MVC 모델에서 DB와 연동하려면, 다음과 같은 컨트롤러를 구성한다.

이 경우, 브라우저는 DB와 연동할 때 마다 브라우저를 리랜더링 해야한다. 반면에,

 

ajax를 이용하면 DB와 연동한 뒤, 브라우저에서 필요한 부분만 리랜더링 하기 때문에 유저가 더욱 다이나믹 하게 브라우저를 이용할 수 있다.

 

 

구현 화면

 - 위의 달력의 날자를 클릭하면, DB로 부터 해당 날자에 예약 정보가 있는지 확인한 후,

시간 값이 들어있는 li들을 생성하고, DB에 저장되어 있는 시간에는 붉은색으로 표시가 된다.

 

Java Script

 - for 문을 이용해서 li의 값과 DB로 부터 Select 한 배열의 값을 비교해서, 조건을 만족하면 blockedDay 클래스를 부여하고 a태그를 비활성화 했고 조건을 만족하지 않으면 click 이벤트를 부여한다.

 

Controller

Controller에서 ajax 신호를 처리하려면, 다음과 같이 ResponseEntity<> 형태로 리턴 해야한다. 

 

 

프로젝트에 구현한 기능

 - 진료과를 클릭하면 , 해당 진료과에 속하는 의사 정보를 불러온다

 

 - 예약 취소 버튼을 클릭하면, DB에서 해당 데이터를 삭제하고 list를 리랜더링 한다

 

 - 진료과를 클릭하면 , 해당 진료과에 속하는 의사 정보를 불러온다