My Project/시네데이트 일지8 CineDate 프로젝트 - 8(콘 상점) 그 다음은 상점을 구현해 보았습니다. DB에서 가져와서 뿌려주었습니다. document.querySelectorAll('.purchase--btn').forEach(function(btn) { btn.addEventListener('click', function(event) { // 로그인 여부 확인 const principal = "${principal != null ? principal.id : null}"; const itemId = this.id; console.log("item id: ", itemId); // a 태그의 기본 동작을 막기 위해 preventDefault 호출 event.preventDefault(); // data-price 속성에서 가격 정보 추출 const.. 2024. 9. 26. CineDate 프로젝트 - 7(예매 기능) 이제 앞단을 다 만들었으니 영화 예매에 필요한 기능들을 하나씩 추가해보도록 하겠습니다. 저는 경우의 수를 나누어 주었습니다. 무비를 클릭했을 경우와날짜를 클릭했을 경우극장을 클릭했을 경우다 나누어 주었고 그에 맞게 fetch들을 각각 나누어 주었습니다. 영화만 클릭했을경우 그 여와에 맞는 날짜와 극장 데이터를 가져오기 위해 fetch를 날려 주었고 이런식으로 투명도를 낮추어 주었습니다. 그 다음은 sheet부분 JS입니다.const movieSelect = document.getElementById('movie');const container = document.querySelector('.container');const seats = document.querySelectorAll('.row .s.. 2024. 9. 26. CineDate 프로젝트 - 6(영화 예매 영화,극장) 영화리스트를 출력해 보겠습니다. 컨트럴로에서 model로 다 올려 주었습니다.CSS를 주기 위해서 관람가 등급을 다 나눠주었습니다. 극장도 마찬가지 입니다! 처음 웹페이지가 업로드 될 때 실행이 되도록 window.onload를 해주었습니다.극장 부분에 현재 상영중인 지역을 표시해줄 수 있도록 비동기 처리 fetch를 활용해 주었습니다. 투명도를 낮추는 JS입니다. 2024. 9. 26. CineDate 프로젝트 - 5(영화 예매 날짜) 영화 웹페이지의 꽃인 영화 예매를 만들어 보겠습니다. 우선 만들기에 앞서 예매라는 기능은 함수를 타고타고 타고 타는걸 잘 해야하는 시스템입니다. 그렇기에 각 메서드의 기능들을 잘 분리하고 전체적으로 보는 능력을 갖추는것이 중요하다 생각을 합니다. 우선 날짜 부분입니다.날짜 부분의 공휴일에 대한 데이터도 필요해서 파싱을 해보았습니다https://www.data.go.kr/data/15012690/openapi.do 현재 날짜와 다음 달의 모든 날짜를 생성 해주고그 날짜를 담을 리스트르 생성해 줍니다. for문을 돌려서 date의 현재 날짜를 초기화 시켜 주었고만약 현재 날짜가 2024-09-05면 05부터 반복이 가능하도록 기능 설계를 했습니다. date.isBefor은 반복문이 계속될지를 결정하는 조건.. 2024. 9. 26. CineDate 프로젝트 - 4(영화 상세보기) 이제는 파싱했던 정보들로 상세보기 페이지를 구성해보겠습니다. detailPage의 파라미터들은 리뷰를 작성할 때 필요한 파라미터들이기 때문에 title만 있으면 됩니다!그 타이틀에 맞는 정보들을 뽑아내려고 HomePage에 title들을 숨겨두었습니다.원래는 id로 하는것이 맞지만 주간박스오피스는 매주 자동으로 갱신되기 때문에 title로 해보았습니다. 각 영화 타이틀에 맞는 영화정보 상영시간 관람등급 장르 등 다양하 데이터를 뽑아내주었습니다. 2024. 9. 26. CineDate 프로젝트 - 3(오픈 API 파싱하기) 처음 API에서 뽑은 박스오피스 정보의 무비이름을 URI에 넣어주어서 그거에 맞는 매칭을 해줍니다그럼 TMDB에서 맞는 영화들의 정보를 찾습니다.그 후 정확히 일치하는 것만 찾기 위해 equalIgnoreCase를 사용해주고 movieList에 add해줍니다. 데이터 베이스에 삽입을 하기위해 insert를 해주었습니다. 이 방법으로 영화에 대한 포스터 배우 정보, 디렉터 등 프로젝트에 필요한 영화 정보들을 가공했습니다. 주간 박스오피스 정보들을 이쁘게 CSS 입혀서 뽑아내주었습니다 2024. 9. 24. 이전 1 2 다음
