[웹 프로젝트]_영화관 홈페이지 제작하기 - 5. 예매 기능을 위한 Javascript 구현 설명

이번에는 예매 기능 구현을 위해 javascript를 어떻게 사용했는지 

정리해 보려고 한다.

영화 선택, 좌석 선택, 예매 내역 확인, 상세 내역 확인을 위해 javascript를 이용하여

어떤 함수들을 만들었는지 살펴 보자.

 

1. 영화 제목과 날짜 선택 함수

 - 영화 제목을 선택하면 영화에 해당하는 날짜가 자동으로 선택되게 하였다.

이벤트 부착

로컬 스토리지에 저장하기 위해 영화 제목과 날짜를 따로 저장하여 return.

 

2. 인원 수 선택 함수

 - '성인', '청소년'의 각 선택 인원수를 저장, 반환하고 총 인원수를 반환하는 함수이다.

 

 

3. 좌석 선택 함수

- 위에서 구한 선택 인원수에 맞게 좌석을 선택하는 함수이다.

 

 *좌석 선택 시 check 클래스를 부여하여 선택 된 좌석을 구분할 수 있게 하였다.

 

4. 결제 금액 계산 함수

 - 위에서 구한 인원수에 해당하는 금액을 곱해 계산하는 함수이다.

 

5. 페이지 초기화 함수

 - [취소] 버튼과 [예매하기] 버튼을 누를 시 페이지를 새로고침 하는 함수로, 예매 과정도 초기화된다.

6. 로컬 스토리지 저장 함수

로컬 스토리지 사용 변수

 -  전체 예매 내역을 하나의 객체로 저장하였고, 새로 고침 후 로컬 스토리지에 값이 있으면 가져오게 하기 위해 if-else문을 이용하여 분기해주었다.

- 객체로 저장된 각 예매 내역을 배열로 저장하기 위해 JSONstringify()를 사용하였다. JSON은 웹 서버와 브라우저에서 데이터를 주고받는 형식 즉, 데이터 포멧의 종류 중 하나다. 본 프로젝트에서 데이터를 주고받을 때 문자열 데이터를 사용해야 하므로, JSONstringify()를 사용하여 Javascript 객체를 문자열로 변환해주었다.

 

7. 로컬 스토리지 검색 및 출력 함수

- 위에서 JSONstringify()로 로컬 스토리지에 객체를 배열로 저장하였으므로, JSON.parse를 이용하여 저장된 데이터를 다시 Javascript 객체로 변환하였다.

- for문을 이용하여 배열을 순회하면서 각 예매 내역 중 '영화 제목'에 대한 부분을 출력한다. 내역을 클릭하면 상세 예매 내역에 대한 확인이 가능해야 하므로 'innerHTML'을 사용하여 <a> 태그를 삽입하여 <list.html> 페이지로 이동할 수 있게 하였다.

- 이동한 <list.html> 페이지에서 각 클릭 항목(영화 제목)에 대한 상세 내역을 확인할 수 있게 하기 위해 변수 'data=i'를 <list.html>로 같이 넘겨 주었다. (ex. i=0이라면 가장 첫번째로 저장된 상세 내역 확인 가능)

 

8. reserve.html로 부터 데이터를 전달받기 위한 함수(예매 페이지 -> 상세 내역 페이지)

- URLSearchParms는 url에서 쿼리 파마리터들을 수정하거나 읽어올 때 사용하므로 예매 페이지에서 넘겨준 데이터를 전달받기 위해 사용하였다.

 

9. 해당 상세 내역을 출력하기 위한 부분

- searchkey()를 사용하여 위(8번)에서 전달받은 값을 활용하였다.

- 변수 print에 로컬 스토리지에 저장되어 있는 값들을 가져와 담은 후 예매 페이지로부터 전달 받은 값에 해당하는 상세 예매 내역을 출력하도록 하였다.

 

10. 상세 내역에 해당하는 예매 내역을 로컬 스토리지에서 삭제하는 함수

- 우선, ls.clear()를 이용하여 로컬 스토리지의 전체 key값을 삭제한다.

- 로컬 스토리지의 key값은 여러 개의 객체를 저장한 하나의 배열로 저장했으므로 key값을 불러와 'print'변수에 미리 저장후 key값을 삭제한다.

- 현재 <list.html>에 표시된 상세 내역에 해당하는 예매 내역을 삭제해야 하므로 print변수에서 <reserve.html>로부터 전달받은 값에 해당하는 부분을 삭제한다.

- 해당 예매 내역이 삭제된 최종 key값을 다시 로컬 스토리지에 저장한다. - JSONstringity()이용

- 내역 삭제 후 페이지를 새로고침한다.