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


'라라벨 > laravel-movies' 카테고리의 다른 글

알파인js  (0) 2020.04.13
테일윈드css 로딩 스피너 설치  (0) 2020.04.12
4. main, index, show 디자인양식  (0) 2020.04.05
3. 구조잡기  (0) 2020.04.05
2. Fontatwesome 설치하기  (0) 2020.04.05

+ Recent posts