<!--
TMDB API 관련한 자세한 정보는 해당 도큐먼트를 확인하세요.
https://developers.themoviedb.org/3/discover/movie-discover
-->

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TMDB 오픈API 활용 예제</title>
<meta name="author" content="맥가">
<meta name="description" content="오픈 API를 활용해 영화 사이트를 만들어 봅니다.">
<!-- 웹폰트 임베디드 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;700&display=swap" rel="stylesheet">
<style type="text/css">
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    font-family: 'Noto Sans KR', sans-serif;
    color: #000;
    font-size: 16px;
}
li, ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.list_wrap {
    width: 100%;
    display: flex;
}
.list_inner {
    max-width: 1152px;
    margin: 0 auto;
}
.list_item {
    width: 192px;
    padding: 16px 8px;
    position: relative;
    float: left;
    word-break: break-all;
    box-sizing: border-box;
}
.list_item .thumb {
    height: 264px;
    width: auto;
    border: 1px solid #eee;
    box-sizing: border-box;
    border-radius: 8px;
}
.list_item .title {
    height: 48px;
}
.list_item .date {
    font-size: 12px;
    color: #666;
    padding-top: 8px;
}

/*반응형 분기 시작 */
@media screen and (max-width:1024px) {
.list_inner {
    max-width: 960px;
    margin: 0 auto;
}
}

@media screen and (max-width:768px) {
.list_inner {
    max-width: 720px;
    margin: 0 auto;
}
.list_item {
    width: 180px;
    padding: 16px 8px;
    position: relative;
    float: left;
    word-break: break-all;
    box-sizing: border-box;
}
.list_item .thumb {
    height: 243px;
    width: 100%;
    border: 1px solid #eee;
    box-sizing: border-box;
    border-radius: 8px;
}
}

@media screen and (max-width:359px) {
.list_inner {
    max-width: 320px;
    margin: 0 auto;
}
.list_item {
    width: 160px;
    padding: 16px 8px;
    position: relative;
    float: left;
    word-break: break-all;
    box-sizing: border-box;
}
.list_item .thumb {
    height: 210px;
    width: 100%;
    border: 1px solid #eee;
    box-sizing: border-box;
    border-radius: 8px;
}
}
</style>
</head>
<?php
// 다국어 지원을 위한 브라우저 언어 체크_차후 사용 가능
$userLanguage = substr( $_SERVER[ 'HTTP_ACCEPT_LANGUAGE' ], 0, 2 ); //언어체크 변수 선언, 언어정보 앞에서부터 2자리까지만 출력	

// TMDB API 시작
$ch = curl_init(); //curl 초기화
$apikey = 발급받은 API키 입력; //TMDB에서 발급받은 API키를 넣어주세요	
curl_setopt( $ch, CURLOPT_URL, "https://api.themoviedb.org/3/discover/movie?api_key=" . $apikey . "&language=ko-KR&sort_by=popularity.desc&include_adult=true&include_video=true&page=1" );
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, TRUE );
curl_setopt( $ch, CURLOPT_HEADER, FALSE );
curl_setopt( $ch, CURLOPT_HTTPHEADER, array( "Accept: application/json" ) );
$response = curl_exec( $ch );
curl_close( $ch );
$result = json_decode( $response, true ); //JSON 형태의 데이터를 $result 변수에 담습니다.
//print_r( $result ); //$result 결과값 테스트 출력, 데이터 확인용으로 페이지 완성 후 주석처리 합니다.
?>
<!-- 영화 리스트 데이터 구조화 시작, URL부분은 차후 수정해주세요.-->
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ItemList",
      "itemListElement": [
	  <?php $positon=0 ?>
	  <?php for($i=0; $i<count($result['results']); $i++){ ?>
	  <?php $positon++ ?>
        {
          "@type": "ListItem",
          "position": "<?php echo $positon ?>",
          "item": {
            "@type": "Movie",
            "url": "http://www.sitename.com/movie.php?movie_id=<?php echo $result['results'][$i]['id'] ?>",
            "name": "<?php echo $result['results'][$i]['title'] ?>",
            "image": "https://image.tmdb.org/t/p/w185/<?php echo $result['results'][$i]['poster_path'] ?>",
            "dateCreated": "<?php echo $result['results'][$i]['release_date'] ?>",
            "review": {
              "@type": "Review",
              "reviewRating": {
                "@type": "Rating",
				"bestRating": "10",
                "ratingValue": "<?php echo $result['results'][$i]['vote_average'] ?>"
              },
              "author": {
                "@type": "Person",
                "name": "사이트이름"
              },
              "reviewBody": "<?php echo $result['results'][$i]['overview'] ?>"
              },
              "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "<?php echo $result['results'][$i]['vote_average'] ?>",
                "bestRating": "10",
                "ratingCount": "<?php echo $result['results'][$i]['vote_count'] ?>"
              }
            }
			<?php if($i == 19){	 ?>
          		}
		  	<?php }else{ ?>
		  		},
		  	<?php } ?>
		  <? } ?>
      ]
    }
</script>
<!-- 영화 리스트 데이터 구조화 끝 -->
<body>
<!-- 리스트 시작 -->
<div class="list_wrap">
  <div class="list_inner">
    <?php for($i=0; $i<count($result['results']); $i++){ ?>
    <div class="list_item">
      <ul>
        <li><img src="https://image.tmdb.org/t/p/w185/<?php echo $result['results'][$i]['poster_path'] ?>" class="thumb" alt="썸네일"></li>
        <li class="title"><?php echo $result['results'][$i]['title'] ?></li>
        <li class="date"><?php echo $result['results'][$i]['release_date'] ?></li>
      </ul>
    </div>
    <? } ?>
  </div>
</div>
<!-- 리스트 끝 -->
</body>
</html>