이전에 kimscafe에서는
'당일' 예약만 가능한 시스템이었다
이번엔 언제든 가능한 예약시스템을
사용해보자!
시나리오
자리 선택->년/월/날짜 표시-> 날짜 선택-> 시간표시-> 예약
프런트 서버
html
서버에 정보가 오면
뿌려줄 자리를 만들어 놓는다
js
같은 코드가 겹치는데 나중에 리팩토링 해주고
지금은 백엔드에 최대한 집중하자!
자리를 선택하면
function showDate(seat,month,year)함수가 작동한다
서버와 통신을 하고 성공시
년/월 다음/이전 버튼
$('#nextButton').append("<input type='button' value='다음달' onclick='nextMonth()'>");
$('#beforeButton').append("<input type='button' value='이전달' onclick='beforeMonth()'>");
$('#nextButton2').append("<input type='button' value='다음연도' onclick='nextYear()'>");
$('#beforeButton2').append("<input type='button' value='이전연도' onclick='beforeYear()'>");
날짜들을 뿌려준다
for(var i=1;i<dates.length;i++){
if(dates[i][2]==100){
$('#dateArea'+num).append("<td><input type='button' id='date' onclick='getTime("+dates[i][0]+")' value='"+dates[i][0]+"' disabled></td>");
}
else{
$('#dateArea'+num).append("<td><input type='button' id='date' onclick='getTime("+dates[i][0]+")' value='"+dates[i][0]+"'></td>");
}
if(i%7==0){
num+=1;
}
}
날짜를 선택하면
function getTime(date)함수가 작동하며
시간정보/예약버튼을 가지고와서 뿌려준다
for(var i=0;i<times.length;i++){
if(times[i][2]==100){
console.log('시간이 지났거나 예약이 다참');
$('#timeArea').append("<input type='checkbox' name='time' value='"+times[i][0]+"' disabled>"+times[i][0]+'시~'+times[i][0]+'시'+times[i][1]+"/"+maxPeopleOfTime+" ");
}
else{
$('#timeArea').append("<input type='checkbox' name='time' value='"+times[i][0]+"'>"+times[i][0]+'시~'+times[i][0]+'시'+times[i][1]+"/"+maxPeopleOfTime+" ");
}
if(i>=3&&i%3==0){
$('#timeArea').append('<br>');
}
}
$('#insertOrCancle').append("<input type='button' onclick='buy()' value='예약하기'>");
백엔드 서버
dto
date 가져오기
service
요청 월을 구함
int month=getDateDto.getMonth();
요청 월+연도=날짜를 만듦
LocalDate selectDate=LocalDate.of(getDateDto.getYear(),month,1);
요청 날짜의 월의 마지막을 구함(30/31/29)
YearMonth yearMonth=YearMonth.from(selectDate);
int lastDay=yearMonth.lengthOfMonth();
요청 연의 월에 첫 시작 요일을 구함
DayOfWeek dayOfWeek = selectDate.getDayOfWeek();
시작 요일은 저장함
start=dayOfWeek.getValue();
끝나는 날을 시작 요일만큼 더 해준다
int endDayIdOfMonth=lastDay+start;
시작 요일 검사
예를 들어 수요일 부터시작이라면
수요일 전까진 모두 날짜, 값=0/플래그를 cant로지 정=100(임의지정 숫자)
for(int i=1;i<start;i++) {
dateAndValue[i][0]=0;
dateAndValue[i][1]=0;
dateAndValue[i][2]=cantFlag;
}
날짜 표시 및 검증
다찬요일/이전날은 예약 불가능 플래그 넣어주기
for(int i=start;i<endDayIdOfMonth;i++) {
Timestamp timestamp=Timestamp.valueOf(getDateDto.getYear()+"-"+month+"-"+temp+" 00:00:00");
int countAlready=getCountAlreadyInDate(timestamp,getDateDto.getSeat());
dateAndValue[i][0]=temp;
dateAndValue[i][1]=countAlready;
if(countAlready>=maxPeopleOfDay||utillService.compareDate(timestamp, LocalDateTime.now())){
dateAndValue[i][2]=cantFlag;
}
temp+=1;
}
다찬요일/이전날은 예약 불가능 플래그 넣어주기
getCountAlreadyInDate
json에 담아서 전달 해주자
dates.put("dates", dateAndValue);
dao
time 가져오기
dto
service
전체 영업시간을 구한다
int totalHour=closeTime-openTime;
시간을 검증한다
요청 날의 개수를 찾아온다
for(int i=0;i<=totalHour;i++){
Timestamp timestamp=Timestamp.valueOf(getTimeDto.getYear()+"-"+getTimeDto.getMonth()+"-"+getTimeDto.getDate()+" "+(i+openTime)+":00:00");
int count=getCountAlreadyInTime(timestamp,getTimeDto.getSeat());
timesArray[i][0]=i+openTime;
timesArray[i][1]=count;
System.out.println(count);
if(LocalDateTime.now().getDayOfMonth()==getTimeDto.getDate()){
if((i+openTime)<=LocalDateTime.now().getHour()){
System.out.println("지난시간");
timesArray[i][2]=cantFlag;
}
}
else if(count==maxPeopleOfTime){
System.out.println("자리가 다찬시간");
timesArray[i][2]=cantFlag;
}
}
요청 날짜가 오늘과 같다면 지난 시간인지 검증한다
if(LocalDateTime.now().getDayOfMonth()==getTimeDto.getDate())
if((i+openTime)<=LocalDateTime.now().getHour())
개수가 최대 인원인지 확인한다
(count==maxPeopleOfTime)
json 전송
++추가
if(LocalDateTime.now().getDayOfMonth()==getTimeDto.getDate())를
if(LocalDateTime.now().getDayOfMonth()==getTimeDto.getDate()&&LocalDate.now().getYear()==getTimeDto.getYear())로 바꿔주자
안그러면 2021/8/28과2022/8/28을 구분하지 못한다
테스트를 해보자!
자리 선택
연도/월 변경
29일 날짜 선택
시간별 예약자 수가 잘 출력된다
(미리 넣어놓은 예약이 있다)
다만 9시~9시 이렇게 출력된다 ㅋㅋ
프런트 수정해야겠다!
오늘 날짜 선택
블랙 모드여서 잘 안 나오는데
현재 14시이다
14시 이전 시간들은 모두 disabled로
선택 불가가 잘 적용되었다!
예약하기
구현은 해놨지만 결제 시스템과 연동중이어서
소스는 다음번에 공개하는 게 좋을 거 같다!
(가상계좌/예외시 환불/유효성 검사를 아직다 만들었다!)
a-1
2022/9월/25일
9/15/18를 무작위로 예약해보자
성공!
그렇다면 a-2는?
다른 자리이기 때문에 나타나지 않는다!
만석 테스트
17시가 6이 돼서 선택이 불가능 해졌다
자리를 바꿔보자
자리를 바꾸면 정상적으로 가능하다!
후아! 당일에서
이제 언제나 예약이 가능한 시스템을 만들었다!!
너무 뿌듯하다 ㅠㅠㅠ
다음번에 여기서 결제를 연동시키자!
아임 포트/부트 페이/포트 포워딩을 해야 한다!
+추가
현재는 2021이다
예를 들어 연도를 2022를 선택한다면
다음/이전 버튼을 눌렀을때
2022은 1월 부터 ~12월 까지 나와야한다
하지만 현재 8월 인데
미래 연도에가도 8월 이전을 볼 수 없는 버그가 있다!
프론트만 고쳐주자!
프론트서버
추가해주자
if(year>date.getFullYear()&&month>=1)
같은 코드가 겹치는데 나중에 리팩토링 해주고
지금은 백엔드에 최대한 집중하자!
'Spring boot kim's Shop > 예약시스템' 카테고리의 다른 글
| Springboot 예약내역페이지!(1) 예약내역 보여주기(페이징)+ jpa+mysql inner join (0) | 2021.09.06 |
|---|---|
| Springboot 예약시스템!(3) 일반결제+예약+예외처리+아임포트 (0) | 2021.08.28 |
| Springboot 예약시스템!(2) 가격 계산해서 전달하기! (0) | 2021.08.26 |