[메리크리] 스케줄링 UI/DB

📍계획 및 구상

약속잡기 페이지에 들어가면 12월 달력이 나오고, 유저들은 나의 일정을 확인할 수 있다.

일정이 없는 날을 입력하여 약속잡기 버튼을 누르면, DB에 약속이 저장되고, 달력에 그 약속이 추가된다.

---

📍구현

1. 달력 인터페이스

[schedule.html]

달력은 table을 이용하여 만들었다.

토요일과 일요일은 초록색, 빨간색으로 표현하였고, 각 날짜는 숫자와 줄띄움을 하고 공백을 넣어 추후 이름을 저장할 수 있도록 하였다. 각 날짜에는 추후 스케줄 추가가 쉽도록 id를 설정하였다.

 

이걸 하면서 html entity를 처음 알게 되었는데, html에서의 특수문자이다. 이 코드에서 사용된 &nbsp는 공백란을 뜻한다~

 

2. DB에 저장된 약속 가져오기

[schedule.js]

음악 가져오는 과정과 동일하게 php를 통해 DB에 접근하여 name과 date를 가져온다.

 

[getScheduleTable.php]

getScheduleTable.php 역시 저번 getMusicTable.php와 99퍼센트 동일하고, 이 select 연산에서 가져오는 테이블 이름만 다르다!! (당연함..)

 

[schedule.js]

가져온 name과 date는 JS에서 loadPage 함수를 통해 달력에 추가된다.

해당 날짜 칸을 id로 찾아 element를 가져오고, [날짜/공백] 형태에서 [날짜/이름] 형식으로 텍스트를 바꾸었다!

약속이 저장된 칸은 배경을 검정으로 바꿔 눈에 쉽게 들어오도록 설정하였다.

---

3. 약속 추가하기

[schedule.html]

날짜를 dd 형식으로 작성하고, 등록 버튼을 누르면 약속이 추가된다.

&#41은 닫힘 괄호 )를 뜻한다!

 

[schedule.js]

음악 추가하는 과정과 동일하게 입력 텍스트를 가져오고, 달력에 있는 날짜라면 php로 보내 DB에 저장한다.

 

[insertSchedule.php]

다른 코드는 insertMusicTable.php와 같으나, 이중약속을 피하기 위한 처리를 하여야 한다.

따라서 table 자체적으로 date 항목을 unique로 설정하고, error 케이스 처리를 하여 스케줄 중복을 막았다.

 

3-1 이슈 - 간헐적으로 약속 추가가 안 됨

컴퓨터로 테스트할 때는 약속이 잘 추가되었는데, 핸드폰으로 추가하면 추가 버튼을 세 번은 눌러야 추가되는 문제가 생겼다.

 

오류 log를 보니 DB 저장이 안 되는 오류로 확인되었고, 그 로그를 상세히 찍으니 xhr.status가 0으로 나왔다. 이 상태는 xmlHttpRequest 객체가 초기화 되지 않음을 뜻한다.

 

약속 추가 버튼을 누를 시 xhr 객체는 DB에 약속 저장할 때 호출되고, DB에서 약속을 가져올 때 호출된다.

그렇다면 약속이 저장되기 전에 약속을 가져오는 코드가 실행되는 것은 아닐까? 라는 생각으로

 

[schedule.html]

약속 입력을 form에서 div 형태로 바꾸어 즉시 새로고침 되는 것을 막고,

 

서버에 약속이 저장되었다면 페이지를 새로고치도록 하였다. 그랬더니 말끔하게 해결 완료~ 추가가 아주 잘 된다.

 

나중에 music 기능도 핸드폰에서 해 봤더니 똑같이 세 번은 눌러야 추가되길래 그부분도 똑같이 고쳤당

---

📍결과