2. 상세페이지로 이동 및 세부 내용 가져오기

지난 시간, 홈 화면을 만들었다. 이제 저 영화 포스터를 클릭하면 상세페이지로 이동하도록 만들어보자

 

 

 

 

먼저 영화 장르 테이블을 만들고, 해당 영화의 넘버를 기존 movie 테이블의 no의 fk로 설정한다. 1번 영화 오펜하이머의 장르는 스릴러와 드라마이다. 2번 영화 해리포터의 장르는 판타지와 어드벤처이다.

 

 

 

 

무비메퍼 인터페이스를 하나 만든 후, 지난 시간 만들었던 moive 테이블의 PK인 no를 조회하여 해당 영화의 상세페이지로 넘어가게끔 하고. 오늘 만든 테이블의 movie_no fk를 이용하여 그 상세페이지 내의 장르 부분을 채워 넣으려고 한다.

 

 

 

 

무비메퍼.xml에서 쿼리문을 작성. 해당 영화의 고유 넘버를 조회하여 해당 영화의 데이터들을 불러오게 하였고, 또 해당 영화의 장르 데이터들을 불러오게 하였다.

 

 

 

어제 만든 홈 화면의 js에 가서, 해당 영화의 넘버를 변수에 집어넣고, 해당 영화의 넘버 주소를 카테고리 형식으로 집어넣는다. 누르면  그 주소로 가게끔 설정

 

 

 

무비 컨트롤러에 와서, 카테고리 형식으로 주소를 지정한 후, GetMapping. @PathVariable을 이용하여 해당 카테고리에 영화의 no를 집어넣는다. 영화 장르의 no 역시 마찬가지. Model을 이용하여 뷰 화면에 조회한 데이터들을 보이게끔 한다. 마지막으로 리턴값에 영화의 상세페이지로 이동하게끔 한다.

영화의 상세페이지인 movie/main.html의 뷰는 이러하다

 

 

 

뷰 화면에 썸네일 이미지는 이미 만든 썸네일 이미지 주소를 이용하여 집어넣고

 

 

 

한 영화에 장르는 여러개이니 each문을 이용하여 조회하게 한다. 그리고 제작년도, 제작국가 역시 다음 형식으로 불러온다.

 

 

 

정보 부분도 마찬가지

 

 

 

완성! 홈으로 가서 해당 영화의 포스터를 눌러보자

 

 

 

 

각 영화의 상세 페이지들 완성! 다음 시간에는 상세 페이지의 출연/제작 부분을 만들 예정이다.