팀프로젝트)예약 달력 만들기

이번에 팀 프로젝트로 진료예약 웹을 개발하기로 했다. 그 중 특정 날자를 클릭하면 해당 날자에 예약 할 수 있는 시간이 있는지 확인하는 기능을 추가할 것이다.

 

다음은 우리가 참고한 아산병원의 실시간 진료 예약 페이지의 일부분이다.

해당 기능을 구현하기 위해, javaScript로 작성된 달력을 가져왔고, 

달력에 특정 날을 클릭하면 예약 가능한 시간을 나타낼 수있는 기능을 구현하기위해

onclick 이벤트에 다음과 같은 코드를 작성했다.

 

 

JavaScript

    function calendarChoiceDay(column) {
    
    """
    생략
    """
    // timeTable 생성 시작
        
        // 이전 timeTable 초기화
        while(timeTable.firstChild){
        	timeTable.removeChild(timeTable.firstChild);
        }						// timeTable.innerHTML = ''; 으로도 ul을 초기화 할 수 있다
        
        // 예약 날자 받아오기
        var settedYear = document.querySelector("#calYear").innerHTML;
        var settedMonth = document.querySelector("#calMonth").innerHTML;
        var settedDay = column.innerHTML;
        
        settedYearMonth = settedYear + "-" + settedMonth + "-" + settedDay;
        
        // 진료과 받아오기
        var medicalDept = document.querySelector("#medicalDept").value;
        console.log(medicalDept);
        
        // 의사 받아오기
        var doctor = document.querySelector("#medicalDept").value;
        console.log(doctor);
        
        $.ajax({
        	type: "get",
        	url: "/appointment1/"+settedYearMonth+"/"+medicalDept+"/"+doctor+".json", // GET 방식이라서 parameter에 담아서 보냈다
        	//data: JSON.stringify(settedYearMonth), 만일, POST 방식을 사용할 경우 data를 직접 담아서 보내야한다. 이때, settedYearMonth처럼 String 타입을 보내면 return 값(result)이 xml 형태로 돌아온다.
        								// return을 json 타입으로 받고싶다면, data를 보낼때도 json 형태로 보내야한다. ex) {board_no:reply.board_no,page:reply.page}
        	contentType:"application/json; charset=utf-8",
        	success:function(result){
        		console.log(result);
        		for(var i = 0; i < WorkTime.length; i++){
        			var li = document.createElement("li");
        			var a = document.createElement("a");
        			a.innerText = WorkTime[i];
        			a.href = "#";
        			
        			// WorkTime[i]와 result.list[j].reservationTime을 비교하여
        		    // 해당 시간이 이미 예약된 경우 클릭 이벤트를 비활성화합니다.
        			var isBlocked = false;
        			for(var j = 0; j < result.list.length; j++){
        				if(WorkTime[i] == result.list[j].reservationTime){
        					isBlocked = true;
        					break;
        				}
        			}
        			
        			if(isBlocked){
        				a.style.pointerEvents = "none"; // a 태그의 이벤트 처리를 막음
    					li.classList.add("blockedDay");
        			} else {
        				a.onclick = function(event){ ChoiceTime(event,this); }
        			}
        			
        			li.appendChild(a);
        			timeTable.appendChild(li);
        		}
        		
        	}
        })
    }

 - jsp 파일에서 예약날자, 진료과, 의사 에 대한 정보를 가져와서 DB에 조회한 다음, for문과 if문을 이용해서

달력에서 클릭한 날이 DB에 존재할 경우 해당 a 태그가 클릭되지 않게 만들어준다.

이로서, 병원 진료의 중복 예약을 막을 수 있다.

 

 

Controller

 - js에서 json 형식으로 settedYearMonth를 받아서 rs.getDate를 호출하고 리턴 값을 js로 돌려보낸다.

 

Service , ServiceImpl

 

Mapper , Mappler.xml

 - reservationTime열 중에서 달력에서 클릭한 년,월,일을 포함하고 있으면서 , 

medicalDept 와 doctor 열의 데이터가 유저가 지정한 진료과, 의사 정보와 같다면,

해당 rows의 reservationTime을 시간:분 형태로 가져온다.

 

** 다음과 같이, ajax를 사용해서 비동기식으로 백그라운드에서 DB와 작업할 경우 프로그램 유지 및 보수가 쉽고

데이터를 불러올 때 전체 페이지를 렌더링할 필요가 없어서 좋은 것 같다.