1. app/Http/Livewire/HelloWorld.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class HelloWorld extends Component
{
    public $name = 'anko3899';
    
    public function render()
    {
        return view('livewire.hello-world');
    }
}
cs


2. resources/views/livewire/hello-world.blade.php

<div>
<h2>HELLO WORLD</h2>
<h3>{{ $name }}</h3>
</div>


3. 브라우저에서 확인



저작자표시

'라라벨 > livewire_study' 카테고리의 다른 글

숫자카운터 db비동기  (0) 2020.04.12
라라벨 와이어 동작방법 버튼 카운터  (0) 2020.04.11
데이터바인딩  (0) 2020.04.11
속성사용하기  (0) 2020.04.11
설치 및 사용방법  (0) 2020.04.11

1. 라라벨7 설치

1
composer create-project --prefer-dist laravel/laravel livewiretuto
cs


2. 라이브와이어 설치

1
composer require livewire/livewire
cs


3. welcome에 라이브와이어 주입하기

1
2
3
4
5
6
7
8
9
10
<html>
<head>
    ...
    @livewireStyles
</head>
<body>
    ...
    @livewireScripts
</body>
</html>
cs


4. 새구성요소 만들기

1
php artisan livewire:make HelloWorld
cs


2개의 파일이 생성된다.

CLASS: app/Http/Livewire/HelloWorld.php

VIEW:  resources/views/livewire/hello-world.blade.php


5. view 파일을 간단히 작성해보자(views/livewire/hello-world.blade.php)

1
2
3
<div>
    <h2>HELLO WORLD</h2>
</div>
cs


6. welcome.blade.php파일에 주입해보자

1
 @livewire('hello-world')
cs


7. 브라우저에서 확인

저작자표시

'라라벨 > livewire_study' 카테고리의 다른 글

숫자카운터 db비동기  (0) 2020.04.12
라라벨 와이어 동작방법 버튼 카운터  (0) 2020.04.11
데이터바인딩  (0) 2020.04.11
속성사용하기  (0) 2020.04.11
변수값 넘기기  (0) 2020.04.11

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

1. resources/views/layouts/main.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Movie App</title>

<!-- Tailwind Css Style -->
<link rel="stylesheet" href="/css/main.css">
<!-- Fomtatwesome -->

<link rel="stylesheet" href="/css/app.css">
</head>

<body class="font-sans bg-gray-900 text-white">
<nav class="border-b border-gray-800">

<div class="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between px-4 py-6">
<ul class="flex flex-col md:flex-row items-cneter">
<li>
<a href="#">
<svg class="w-32" viewBox="0 0 96 24" fill="none"><path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4zM35.568 7.047l2.557 7.219 2.543-7.22h2.693V17h-2.057v-2.72l.205-4.697L38.822 17h-1.408l-2.68-7.41.206 4.69V17h-2.051V7.047h2.68zm9.147 6.186c0-.733.141-1.387.424-1.962a3.108 3.108 0 011.216-1.333c.534-.314 1.151-.471 1.853-.471.998 0 1.812.305 2.44.916.634.61.987 1.44 1.06 2.488l.014.506c0 1.135-.317 2.046-.95 2.734-.634.684-1.484 1.026-2.55 1.026-1.067 0-1.919-.342-2.557-1.026-.633-.683-.95-1.613-.95-2.789v-.089zm1.975.144c0 .702.133 1.24.397 1.613.264.37.642.554 1.135.554.478 0 .852-.182 1.12-.547.27-.37.404-.957.404-1.764 0-.688-.134-1.221-.403-1.6-.27-.377-.647-.567-1.135-.567-.483 0-.857.19-1.121.568-.264.373-.397.954-.397 1.743zm8.908 1.21l1.374-4.983h2.064L56.541 17h-1.887L52.16 9.604h2.065l1.374 4.983zM61.996 17h-1.982V9.604h1.982V17zm-2.099-9.31c0-.297.098-.54.294-.732.2-.191.472-.287.814-.287.337 0 .606.096.806.287.201.191.301.435.301.731 0 .301-.102.547-.307.739-.2.191-.467.287-.8.287s-.602-.096-.807-.287a.975.975 0 01-.3-.739zm7.137 9.447c-1.085 0-1.969-.333-2.652-.998-.68-.666-1.019-1.552-1.019-2.66v-.19c0-.744.144-1.407.43-1.99a3.143 3.143 0 011.218-1.354c.528-.319 1.13-.478 1.804-.478 1.012 0 1.807.319 2.386.957.584.638.875 1.543.875 2.714v.806h-4.71c.064.483.255.87.574 1.162.324.292.732.438 1.224.438.761 0 1.356-.276 1.784-.827l.97 1.087a2.99 2.99 0 01-1.202.984 3.98 3.98 0 01-1.682.349zm-.225-6.07c-.392 0-.711.132-.957.396-.242.264-.397.643-.465 1.135h2.748v-.158c-.01-.437-.128-.774-.356-1.011-.228-.242-.551-.363-.97-.363zm10.144 3.882h-3.596L72.674 17h-2.18l3.704-9.953h1.9L79.825 17h-2.18l-.69-2.05zm-3.042-1.66H76.4l-1.25-3.726-1.238 3.725zm13.043.081c0 1.14-.26 2.053-.78 2.741-.514.684-1.211 1.026-2.091 1.026-.747 0-1.351-.26-1.811-.78v3.487h-1.976V9.604h1.832l.068.724c.479-.574 1.103-.861 1.873-.861.912 0 1.62.337 2.126 1.011.506.675.76 1.605.76 2.79v.102zm-1.975-.143c0-.689-.123-1.22-.37-1.593-.241-.374-.594-.56-1.06-.56-.619 0-1.045.236-1.278.71v3.028c.242.488.673.732 1.293.732.943 0 1.415-.773 1.415-2.317zm9.864.143c0 1.14-.26 2.053-.78 2.741-.514.684-1.212 1.026-2.091 1.026-.748 0-1.352-.26-1.812-.78v3.487h-1.975V9.604h1.832l.068.724c.479-.574 1.103-.861 1.873-.861.912 0 1.62.337 2.126 1.011.506.675.759 1.605.759 2.79v.102zm-1.976-.143c0-.689-.123-1.22-.369-1.593-.242-.374-.595-.56-1.06-.56-.62 0-1.045.236-1.278.71v3.028c.242.488.672.732 1.292.732.944 0 1.415-.773 1.415-2.317z" fill="#fff"/></svg>
</a>
</li>

<li class="md:ml-16 mt-3 md:mt-0">
<a href="#" class="hover:text-gray-300">Movies</a>
</li>
<li class="md:ml-6 mt-3 md:mt-0">
<a href="#" class="hover:text-gray-300">TV Shows</a>
</li>
<li class="md:ml-6 mt-3 md:mt-0">
<a href="#" class="hover:text-gray-300">Actors</a>
</li>
</ul>

<div class="flex flex-col md:flex-row items-center">
<div class="relative mt-3 md:mt-0">
<input type="text" class="bg-gray-800 rounded-full w-64 pl-8 px-4 py-1 focus:outline-none focus:shadow-outline" placeholder="Search">
<div class="absolute top-0">
<i class="fas fa-search mt-2 ml-3"></i>
</div>
</div>
<div class="md:ml-4 mt-3 md:mt-0">
<a href="#">
<img src="/img/avatar.png" alt="avatar" class="rounded-full w-8 h-8">
</a>
</div>
</div>
</div>
</nav>

@yield('content')
</body>

</html>





2. index.blade.php

@extends('layouts.main')


@section('content')
<div class="container mx-auto px-4 pt-16">
<div class="popular-movies">
<h2 class="uppercase tracking-wider text-orange-500 text-lg font-semibold">POPULAR MOVIES</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



반응형


3. 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="/img/m1.jpg" alt="parasite" class="w-64 lg:w-96">
<div class="md:ml-24">
<h2 class="text-4xl font-semibold">Parasite(2019)</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">85%</span>
<span class="mx-2">|</span>
<span>Feb 20, 2020</span>
<span class="mx-2">|</span>
<span>Action, Thriller, Drama</span>
</div>

<p class="text-gray-300 mt-8">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam id dicta accusantium tenetur, ut ipsum dolorem nisi et consequatur, architecto repellat ea eum vero quidem. Voluptate iste amet reprehenderit totam?
</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

 


저작자표시

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

테일윈드css 로딩 스피너 설치  (0) 2020.04.12
7. 디테일페이지 만들기  (0) 2020.04.06
3. 구조잡기  (0) 2020.04.05
2. Fontatwesome 설치하기  (0) 2020.04.05
1. 라라벨7설치, 테일윈드css설치  (0) 2020.04.05

1. views/layouts/main.blade.php 파일생성

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Movie App</title>

<!-- Tailwind Css Style -->
<link rel="stylesheet" href="/css/main.css">
</head>

<body>
<nav>Nav goes here</nav>
@yield('content')
</body>

</html>


2. views/index.blade.php 파일생성

@extends('layouts.main')


@section('content')
<div>Index of movies</div>
@endsection


3. views/show.blade.php



4. routes/web.php

<?php

use Illuminate\Support\Facades\Route;

Route::view('/','index');
Route::view('/movie', 'show');


결과


저작자표시

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

테일윈드css 로딩 스피너 설치  (0) 2020.04.12
7. 디테일페이지 만들기  (0) 2020.04.06
4. main, index, show 디자인양식  (0) 2020.04.05
2. Fontatwesome 설치하기  (0) 2020.04.05
1. 라라벨7설치, 테일윈드css설치  (0) 2020.04.05

1. 폰트어썸 설치

npm install --save-dev @fortawesome/fontawesome-free    


2. resources/sass/app.scss

$fa-font-path :"../webfonts";
 
//fontawesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';


3. 웹팩에 추가

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.postCss('resources/css/main.css', 'public/css', [
require('tailwindcss'),
])


4. 빌드하기

npm run dev

public/css/app.css 에 빌드된다.


5. main.blade.php 파일에 등록

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Movie App</title>

<!-- Tailwind Css Style -->
<link rel="stylesheet" href="/css/main.css">

<!-- Fomtatwesome -->
<link rel="stylesheet" href="/css/app.css">
</head>


사용방법

https://fontawesome.com/

저작자표시

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

테일윈드css 로딩 스피너 설치  (0) 2020.04.12
7. 디테일페이지 만들기  (0) 2020.04.06
4. main, index, show 디자인양식  (0) 2020.04.05
3. 구조잡기  (0) 2020.04.05
1. 라라벨7설치, 테일윈드css설치  (0) 2020.04.05

1. 라라벨7 설치

composer create-project --prefer-dist laravel/laravel laravel-movies


2. npm 패키지설치

npm install


3. 테일윈드CSS 패키지설치

https://tailwindcss.com/docs/installation/  


npm install tailwindcss


4. resourcws/css/main.css  파일생성 후 아래의 코드 삽입

@tailwind base;

@tailwind components;

@tailwind utilities;


5. tailwind 구성파일 생성

프로젝트 디렉터리에 tailwind.config.js 파일이 생성된다.


6. 웹팩설정(webpack.mix.js)

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/main.css', 'public/css', [
require('tailwindcss'),
])


7. 빌드 실행 npm run dev

터미널에서 npm run dev 를 입력하면 컴파일을 해준다. 컴파일된 파일은 public/css/main.css 에 빌드된다.


8. views/welcome.blade.php 파일에 <head></head>안에 외부스타일을 링크해준다.

<!-- Styles -->
<link rel="stylesheet" href="/css/main.css">


테일윈드css코드를 입력한다.

<div class="title m-b-md bg-blue-500">
Laravel
</div>


9. 브라우저에서 접속해본다.

 


저작자표시

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

테일윈드css 로딩 스피너 설치  (0) 2020.04.12
7. 디테일페이지 만들기  (0) 2020.04.06
4. main, index, show 디자인양식  (0) 2020.04.05
3. 구조잡기  (0) 2020.04.05
2. Fontatwesome 설치하기  (0) 2020.04.05


오류 해결방법


sudo service apache2 restart

저작자표시

'Ubuntu' 카테고리의 다른 글

git 설치 및 설정  (0) 2020.04.04
mysql root 원격접속 허용  (0) 2019.12.30
marialdb database 생성 및 권한주기  (0) 2019.12.30
php7.2 curl 설치  (0) 2019.12.30
composer 설치하기  (0) 2019.12.30

+ Recent posts

티스토리툴바