라라벨/laravel-movies
7. 디테일페이지 만들기
땀모
2020. 4. 6. 20:27
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
1 | https://api.themoviedb.org/3/movie/157336?api_key={api_key}&append_to_response=videos | cs |
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