7. 디테일페이지 만들기

1. web.php

<?php

use Illuminate\Support\Facades\Route;

//영화목록

Route::get('/', 'MoviesController@index')->name('movies.index');

//영화디테일페이지 보기

Route::get('/movies/{movies}', 'MoviesController@show')->name('movies.show');

2. MoviesController.php

public function show($id)

{

return view('show');

}

3. resources/views/components/movie-card.blade.php

<div>

<div class="mt-8">

<a href="{{ route('movies.show', $movie['id']) }}">

<img src="{{ 'https://image.tmdb.org/t/p/w500/'.$movie['poster_path'] }}" alt="poster" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

<div class="mt-2">

<a href="#" class="text-lg mt-2 hover:text-gray:300">{{ $movie['title'] }}</a>

<div class="flex items-center text-gray-400 text-sm mt-1">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">{{ $movie['vote_average'] * 10 .'%' }}</span>

<span class="mx-2">|</span>

<span>{{ \Carbon\Carbon::parse($movie['release_date'])->format('M d, Y') }}</span>

</div>

<div class="text-gray-400 text-sm">

@foreach ($movie['genre_ids'] as $genre)

{{ $genres->get($genre) }}@if (!$loop->last), @endif

@endforeach

</div>

</div>

</div>

</div>

4. 영화 디테일정보를 가져온다. 

public function show($id)

{

//영화 디테일 페이지 가져오기

$movie = Http::withToken(config('services.tmdb.token'))

->get('https://api.themoviedb.org/3/movie/'.$id.'?api_key=' . config('services.tmdb.token'))

->json();

dump($movie);

return view('show', compact('movie'));

}

이제 데이터를 가지고 왔으니 show.blade.php 파일에서 치환해주자.

show.blade.php

@extends('layouts.main')

@section('content')

<div class="movie-info border-b border-gray-800">

<div class="container mx-auto px-4 py-16 flex flex-col md:flex-row">

<img src="{{ 'https://image.tmdb.org/t/p/w500/'.$movie['poster_path'] }}" alt="parasite" class="w-64 lg:w-96">

<div class="md:ml-24">

<h2 class="text-4xl font-semibold">{{ $movie['title'] }}</h2>

<div class="flex flex-wrap items-center text-gray-400 text-sm">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">{{ $movie['vote_average'] * 10 .'%' }}</span>

<span class="mx-2">|</span>

<span>{{ \Carbon\Carbon::parse($movie['release_date'])->format('M d, Y') }}</span>

<span class="mx-2">|</span>

<span>

@foreach ($movie['genres'] as $genre)

{{ $genre['name'] }}@if (!$loop->last), @endif

@endforeach

</span>

</div>

<p class="text-gray-300 mt-8">

{{ $movie['overview'] }}

</p>

<div class="mt-12">

<h4 class="test-white font-semibold">Featured Cast</h4>

<div class="flex mt-4">

<div>

<div>Hong Gill-Dong</div>

<div class="text-sm text-gray-400">Screenplay, Director, Story</div>

</div>

<div class="ml-8">

<div>su Jin-won</div>

<div class="text-sm text-gray-400">Screenplay</div>

</div>

</div>

</div>

<div class="mt-12">

<button class="flex items-center bg-orange-500 text-gray-900 rounded font-semibold px-5 py-4 hover:bg-orange-600 transition ease-in-out duration-150">

<i class="fas fa-play-circle"></i>

<span class="ml-2">Play Trailer</span>

</button>

</div>

</div>

</div>

</div>

<div class="movie-cast border-b border-gray-800">

<div class="container mx-auto px-4 py-16">

<h2 class="text-4xl font-semibold">Cast</h2>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">

<div class="mt-8">

<a href="#">

<img src="/img/m1.jpg" alt="parasite" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

<div class="mt-2">

<a href="#" class="text-lg mt-2 hover:text-gray:300">Parasite</a>

<div class="flex items-center text-gray-400 text-sm mt-1">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">85%</span>

<span class="mx-2">|</span>

<span>Feb 20, 2020</span>

</div>

<div class="text-gray-400 text-sm">

Action, Thriller, Comedy

</div>

</div>

</div>

<div class="mt-8">

<a href="#">

<img src="/img/m1.jpg" alt="parasite" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

<div class="mt-2">

<a href="#" class="text-lg mt-2 hover:text-gray:300">Parasite</a>

<div class="flex items-center text-gray-400 text-sm mt-1">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">85%</span>

<span class="mx-2">|</span>

<span>Feb 20, 2020</span>

</div>

<div class="text-gray-400 text-sm">

Action, Thriller, Comedy

</div>

</div>

</div>

<div class="mt-8">

<a href="#">

<img src="/img/m1.jpg" alt="parasite" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

<div class="mt-2">

<a href="#" class="text-lg mt-2 hover:text-gray:300">Parasite</a>

<div class="flex items-center text-gray-400 text-sm mt-1">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">85%</span>

<span class="mx-2">|</span>

<span>Feb 20, 2020</span>

</div>

<div class="text-gray-400 text-sm">

Action, Thriller, Comedy

</div>

</div>

</div>

<div class="mt-8">

<a href="#">

<img src="/img/m1.jpg" alt="parasite" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

<div class="mt-2">

<a href="#" class="text-lg mt-2 hover:text-gray:300">Parasite</a>

<div class="flex items-center text-gray-400 text-sm mt-1">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">85%</span>

<span class="mx-2">|</span>

<span>Feb 20, 2020</span>

</div>

<div class="text-gray-400 text-sm">

Action, Thriller, Comedy

</div>

</div>

</div>

<div class="mt-8">

<a href="#">

<img src="/img/m1.jpg" alt="parasite" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

<div class="mt-2">

<a href="#" class="text-lg mt-2 hover:text-gray:300">Parasite</a>

<div class="flex items-center text-gray-400 text-sm mt-1">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">85%</span>

<span class="mx-2">|</span>

<span>Feb 20, 2020</span>

</div>

<div class="text-gray-400 text-sm">

Action, Thriller, Comedy

</div>

</div>

</div>

<div class="mt-8">

<a href="#">

<img src="/img/m1.jpg" alt="parasite" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

<div class="mt-2">

<a href="#" class="text-lg mt-2 hover:text-gray:300">Parasite</a>

<div class="flex items-center text-gray-400 text-sm mt-1">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">85%</span>

<span class="mx-2">|</span>

<span>Feb 20, 2020</span>

</div>

<div class="text-gray-400 text-sm">

Action, Thriller, Comedy

</div>

</div>

</div>

<div class="mt-8">

<a href="#">

<img src="/img/m1.jpg" alt="parasite" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

<div class="mt-2">

<a href="#" class="text-lg mt-2 hover:text-gray:300">Parasite</a>

<div class="flex items-center text-gray-400 text-sm mt-1">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">85%</span>

<span class="mx-2">|</span>

<span>Feb 20, 2020</span>

</div>

<div class="text-gray-400 text-sm">

Action, Thriller, Comedy

</div>

</div>

</div>

<div class="mt-8">

<a href="#">

<img src="/img/m1.jpg" alt="parasite" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

<div class="mt-2">

<a href="#" class="text-lg mt-2 hover:text-gray:300">Parasite</a>

<div class="flex items-center text-gray-400 text-sm mt-1">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">85%</span>

<span class="mx-2">|</span>

<span>Feb 20, 2020</span>

</div>

<div class="text-gray-400 text-sm">

Action, Thriller, Comedy

</div>

</div>

</div>

<div class="mt-8">

<a href="#">

<img src="/img/m1.jpg" alt="parasite" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

<div class="mt-2">

<a href="#" class="text-lg mt-2 hover:text-gray:300">Parasite</a>

<div class="flex items-center text-gray-400 text-sm mt-1">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">85%</span>

<span class="mx-2">|</span>

<span>Feb 20, 2020</span>

</div>

<div class="text-gray-400 text-sm">

Action, Thriller, Comedy

</div>

</div>

</div>

<div class="mt-8">

<a href="#">

<img src="/img/m1.jpg" alt="parasite" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

<div class="mt-2">

<a href="#" class="text-lg mt-2 hover:text-gray:300">Parasite</a>

<div class="flex items-center text-gray-400 text-sm mt-1">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">85%</span>

<span class="mx-2">|</span>

<span>Feb 20, 2020</span>

</div>

<div class="text-gray-400 text-sm">

Action, Thriller, Comedy

</div>

</div>

</div>

<div class="mt-8">

<a href="#">

<img src="/img/m1.jpg" alt="parasite" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

<div class="mt-2">

<a href="#" class="text-lg mt-2 hover:text-gray:300">Parasite</a>

<div class="flex items-center text-gray-400 text-sm mt-1">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">85%</span>

<span class="mx-2">|</span>

<span>Feb 20, 2020</span>

</div>

<div class="text-gray-400 text-sm">

Action, Thriller, Comedy

</div>

</div>

</div>

</div>

</div>

</div>

@endsection

5. cast

https://developers.themoviedb.org/3/movies/get-movie-credits

조인하려는 모델을 추가하는 경우

https://developers.themoviedb.org/3/getting-started/append-to-response

https://api.themoviedb.org/3/movie/157336?api_key={api_key}&append_to_response=videos

MoviesController.php

public function show($id)

{

//영화 디테일 페이지 가져오기

$movie = Http::withToken(config('services.tmdb.token'))

->get('https://api.themoviedb.org/3/movie/'.$id.'?append_to_response=credits,videos,images'.'&api_key=' . config('services.tmdb.token'))

->json();

dump($movie);

return view('show', compact('movie'));

}

세가지 항목이 조인 되있는 것을 알 수 가 있다.

6.show.blade.php 에 적용하자

@extends('layouts.main')

@section('content')

<div class="movie-info border-b border-gray-800">

<div class="container mx-auto px-4 py-16 flex flex-col md:flex-row">

<img src="{{ 'https://image.tmdb.org/t/p/w500/'.$movie['poster_path'] }}" alt="parasite" class="w-64 lg:w-96">

<div class="md:ml-24">

<h2 class="text-4xl font-semibold">{{ $movie['title'] }}</h2>

<div class="flex flex-wrap items-center text-gray-400 text-sm">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">{{ $movie['vote_average'] * 10 .'%' }}</span>

<span class="mx-2">|</span>

<span>{{ \Carbon\Carbon::parse($movie['release_date'])->format('M d, Y') }}</span>

<span class="mx-2">|</span>

<span>

@foreach ($movie['genres'] as $genre)

{{ $genre['name'] }}@if (!$loop->last), @endif

@endforeach

</span>

</div>

<p class="text-gray-300 mt-8">

{{ $movie['overview'] }}

</p>

<div class="mt-12">

<h4 class="test-white font-semibold">Featured Cast</h4>

<div class="flex mt-4">

@foreach ($movie['credits']['crew'] as $crew)

@if($loop->index < 2)

<div class="mr-8">

<div>{{ $crew['name'] }}</div>

<div class="text-sm text-gray-400">{{ $crew['job'] }}</div>

</div>

@endif

@endforeach

</div>

</div>

<div class="mt-12">

<button class="flex items-center bg-orange-500 text-gray-900 rounded font-semibold px-5 py-4 hover:bg-orange-600 transition ease-in-out duration-150">

<i class="fas fa-play-circle"></i>

<span class="ml-2">Play Trailer</span>

</button>

</div>

</div>

</div>

</div>

<div class="movie-cast border-b border-gray-800">

<div class="container mx-auto px-4 py-16">

<h2 class="text-4xl font-semibold">Cast</h2>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">

<div class="mt-8">

<a href="#">

<img src="/img/m1.jpg" alt="parasite" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

<div class="mt-2">

<a href="#" class="text-lg mt-2 hover:text-gray:300">Parasite</a>

<div class="flex items-center text-gray-400 text-sm mt-1">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">85%</span>

<span class="mx-2">|</span>

<span>Feb 20, 2020</span>

</div>

<div class="text-gray-400 text-sm">

Action, Thriller, Comedy

</div>

</div>

</div>

</div>

</div>

</div>

@endsection

7. 플레이를 누르면 유튜브 예고편을 볼 수 있게 해준다.

8. show.blade.php

{{--동영상이 있으면 랜더링하고 없으면 하지마라 --}}

@if(count($movie['videos']['results']) > 0)

<div class="mt-12">

<a href="https://youtube.com/watch?v={{ $movie['videos']['results'][0]['key'] }}" class="flex items-center bg-orange-500 text-gray-900 rounded font-semibold px-5 py-4 hover:bg-orange-600 transition ease-in-out duration-150">

<i class="fas fa-play-circle"></i>

<span class="ml-2">Play Trailer</span>

</a>

</div>

@endif

예고편 영상보기

9. CAST만들기

<div class="movie-cast border-b border-gray-800">

<div class="container mx-auto px-4 py-16">

<h2 class="text-4xl font-semibold">Cast</h2>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">

@foreach ($movie['credits']['cast'] as $cast)

@if($loop->index < 5)

<div class="mt-8">

<a href="#">

<img src="{{ 'https://image.tmdb.org/t/p/w300/'.$cast['profile_path'] }}" alt="actor1" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

<div class="mt-2">

<a href="#" class="text-lg mt-2 hover:text-gray:300">{{ $cast['name'] }}</a>

<div class="text-sm text-gray-400">

{{ $cast['character'] }}

</div>

</div>

</div>

@endif

@endforeach

</div>

</div>

</div><!-- end movie-cast -->

10. Images만들기

<div class="movie-images">

<div class="container mx-auto px-4 py-16">

<h2 class="text-4xl font-semibold">Images</h2>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">

@foreach($movie['images']['backdrops'] as $image)

@if($loop->index < 9)

<div class="mt-8">

<a href="#">

<img src="{{ 'https://image.tmdb.org/t/p/w500/'.$image['file_path'] }}" alt="image1" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

</div>

@endif

@endforeach

</div>

</div>

</div>

show.blade.php

@extends('layouts.main')

@section('content')

<div class="movie-info border-b border-gray-800">

<div class="container mx-auto px-4 py-16 flex flex-col md:flex-row">

<img src="{{ 'https://image.tmdb.org/t/p/w500/'.$movie['poster_path'] }}" alt="parasite" class="w-64 lg:w-96">

<div class="md:ml-24">

<h2 class="text-4xl font-semibold">{{ $movie['title'] }}</h2>

<div class="flex flex-wrap items-center text-gray-400 text-sm">

<span><i class="fas fa-star text-yellow-400"></i></span>

<span class="ml-1">{{ $movie['vote_average'] * 10 .'%' }}</span>

<span class="mx-2">|</span>

<span>{{ \Carbon\Carbon::parse($movie['release_date'])->format('M d, Y') }}</span>

<span class="mx-2">|</span>

<span>

@foreach ($movie['genres'] as $genre)

{{ $genre['name'] }}@if (!$loop->last), @endif

@endforeach

</span>

</div>

<p class="text-gray-300 mt-8">

{{ $movie['overview'] }}

</p>

<div class="mt-12">

<h4 class="test-white font-semibold">Featured Cast</h4>

<div class="flex mt-4">

@foreach ($movie['credits']['crew'] as $crew)

@if($loop->index < 2)

<div class="mr-8">

<div>{{ $crew['name'] }}</div>

<div class="text-sm text-gray-400">{{ $crew['job'] }}</div>

</div>

@endif

@endforeach

</div>

</div>

{{--동영상이 있으면 랜더링하고 없으면 하지마라 --}}

@if(count($movie['videos']['results']) > 0)

<div class="mt-12">

<a href="https://youtube.com/watch?v={{ $movie['videos']['results'][0]['key'] }}" class="flex inline-flex items-center bg-orange-500 text-gray-900 rounded font-semibold px-5 py-4 hover:bg-orange-600 transition ease-in-out duration-150">

<i class="fas fa-play-circle"></i>

<span class="ml-2">Play Trailer</span>

</a>

</div>

@endif

</div>

</div>

</div>

<div class="movie-cast border-b border-gray-800">

<div class="container mx-auto px-4 py-16">

<h2 class="text-4xl font-semibold">Cast</h2>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">

@foreach ($movie['credits']['cast'] as $cast)

@if($loop->index < 5)

<div class="mt-8">

<a href="#">

<img src="{{ 'https://image.tmdb.org/t/p/w300/'.$cast['profile_path'] }}" alt="actor1" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

<div class="mt-2">

<a href="#" class="text-lg mt-2 hover:text-gray:300">{{ $cast['name'] }}</a>

<div class="text-sm text-gray-400">

{{ $cast['character'] }}

</div>

</div>

</div>

@endif

@endforeach

</div>

</div>

</div><!-- end movie-cast -->

<div class="movie-images">

<div class="container mx-auto px-4 py-16">

<h2 class="text-4xl font-semibold">Images</h2>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">

@foreach($movie['images']['backdrops'] as $image)

@if($loop->index < 9)

<div class="mt-8">

<a href="#">

<img src="{{ 'https://image.tmdb.org/t/p/w500/'.$image['file_path'] }}" alt="image1" class="hover:opacity-75 transition ease-in-out duration-150">

</a>

</div>

@endif

@endforeach

</div>

</div>

</div>

@endsection