1. 라라벨 설치
| composer create-project --prefer-dist laravel/laravel turbo | cs |
2. livewire 패키지 설치
| composer require livewire/livewire | cs |
3. 모델, 마이그레이션, 시더, 팩토리생성
| php artisan make:model -msf Product | cs |
-m | 마이그레이션을 만듭니다
-s | 시더를 만듭니다
-f | 공장을 만듭니다
4. 마이그레이션 파일 스키마 작성 (2020_04_17_091934_create_products_table)
| public function up() { Schema::create('products', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('description'); $table->float('price'); $table->timestamps(); }); } | cs |
5. factories/ProductFactory.php 작성
<?php
/** @var \Illuminate\Database\Eloquent\Factory $factory */
use App\Product;
use Faker\Generator as Faker;
$factory->define(Product::class, function (Faker $faker) {
return [
'name' => $faker->word,
'description' => $faker->text(180),
'price' => $faker->numberBetween(50, 100)
];
});
6. seeds/ProductSeeder.php 작성
<?php
use App\Product;
use Illuminate\Database\Seeder;
class ProductSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
factory(Product::class, 50)->create();
}
}
7. seeds/DatabaseSeeder.php 작성
<?php
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
$this->call(ProductSeeder::class);
}
}
8. 마이그레이션 및 시더생성
| php artisan migrate:fresh --seed | cs |
9. tailwindcss 설치
| -테일윈드css npm install tailwindcss -컨피그파일 생성(tailwind.config.js) npx tailwind init -패키지설치 npm install -빌드하기 npm run dev | cs |
10. resources/sass/app/scss
| @tailwind base; @tailwind components; @tailwind utilities; | cs |
11. webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js');
const tailwindcss = require('tailwindcss')
mix.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('tailwind.config.js') ],
})
12. 다시 빌드하기
npm run dev
13. 레이아웃만들기 resources/views/layouts/app.blade.php
Livewire는 app.blade.php라는 레이아웃을 자동으로 검색하여 컨텐츠 섹션을 정의하는 기본적으로 컴포넌트를 렌더링합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@livewireStyles
</head>
<body>
<div class="mx-auto">
@yield('content')
</div>
@livewireScripts
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
14. resources/views/layouts/header.blade.php 파일생성
<nav class="flex items-center justify-between flex-wrap p-6 mb-6 shadow">
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow">
<a href="/" class="block mt-4 lg:inline-block lg:mt-0 mr-4">
Home
</a>
<a href="/products" class="block mt-4 lg:inline-block lg:mt-0 mr-4">
Products
</a>
</div>
</div>
</nav>
15. app.blade.php 파일에 header파일 넣기
16. livewire 구성요소를 추가
php artisan make:livewire home
두가지 파일이 생성됨
CLASS: app/Http/Livewire/Home.php
VIEW: resources/views/livewire/home.blade.php
17. resources/views/livewire/home.blade.php
<div>
<p class="text-center p-6">
<span class="text-4xl">Welcome! 3899</span>
</p>
</div>
18. 라우트 등록
<?php
use Illuminate\Support\Facades\Route;
Route::livewire('/', 'home')->name('home');
php artisna route:list
19. Products 구성요소 추가
php artisan make:livewire Products
CLASS: app/Http/Livewire/Products.php
VIEW: resources/views/livewire/products.blade.php
20. resources/views/livewire/products.blade.php
<div>
<p class="text-center p-6">
<span class="text-4xl">Products Page</span>
</p>
</div>
21. web.php 라우터등록
<?php
use Illuminate\Support\Facades\Route;
Route::livewire('/', 'home')->name('home');
Route::livewire('products', 'products')->name('products');
22. 브라우저 확인을 하면 페이지 이동시 새로고침 되는 것을 볼 수 있다.
이것을 spa처럼 만들어 줄 수 있다.
23. SPA활성화
npm install --save turbolinks
24. resources/js.app.js
require('./bootstrap');
var Turbolinks = require("turbolinks")
Turbolinks.start()
25. css,js 빌드하기
npm run dev
26. 브라우저 확인 새로고침이 없어졌다. (나도 아직 왜 이렇게 작동하는건지 모르겠음)
27. 이제 products 목록을 불러오자
app/Http/Livewire/Products.php
<?php
namespace App\Http\Livewire;
use App\Product;
use Livewire\Component;
class Products extends Component
{
public function render()
{
$products = Product::latest()->get();
return view('livewire.products', compact('products'));
}
}
28. livewire/product.blade.php
<div>
<p class="text-center p-6">
<span class="text-4xl">Products Page</span>
</p>
<hr>
<div class="flex justify-center bg-gray-200">
<table class="table-auto">
<thead>
<tr>
<th class="px-4 py-2">ID</th>
<th class="px-4 py-2">NAME</th>
<th class="px-4 py-2">PRICE</th>
</tr>
</thead>
<tbody>
@foreach($products as $product)
<tr>
<td class="border px-4 py-2">{{ $product->id }}</td>
<td class="border px-4 py-2">{{ $product->name }}</td>
<td class="border px-4 py-2">{{ $product->price }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
29. 브라우저 확인 (DB가 잘 불러와 진다.)
30. resources/views/layouts/pagination.blade.php 파일을 만들자
@if ($paginator->lastPage() > 1)
<ul >
<li class="{{ ($paginator->currentPage() == 1) ? ' disabled' : '' }} inline border-t border-b border-l border-brand-light px-3 py-2 no-underline">
<a href="{{ $paginator->url(1) }}"><<</a>
</li>
@for ($i = 1; $i <= $paginator->lastPage(); $i++)
<li class="{{ ($paginator->currentPage() == $i) ? ' text-green-500' : '' }} inline border-t border-b border-l border-brand-light px-3 py-2 no-underline">
<a href="{{ $paginator->url($i) }}">{{ $i }}</a>
</li>
@endfor
<li class="{{ ($paginator->currentPage() == $paginator->lastPage()) ? ' disabled' : '' }} inline border-t border-b border-r border-l border-brand-light px-3 py-2 no-underline">
<a href="{{ $paginator->url($paginator->currentPage()+1) }}" >>></a>
</li>
</ul>
@endif
31. views/livewire/products.blade.php
테이블 밑에 페이지네이션 불러오는 소스를 삽입한다.
<br>
<div class="w-full flex justify-center pb-6">
{{ $products->links('layouts.pagination') }}
</div>
32. app/Http/Livewire/Products.php 수정
<?php
namespace App\Http\Livewire;
use App\Product;
use Illuminate\View\View;
use Livewire\Component;
use Livewire\WithPagination;
class Products extends Component
{
use WithPagination;
public $search;
public function render(): View
{
return view('livewire.products', [
'products' => $this->search === null ?
Product::paginate(5) :
Product::where('name', 'like', '%' . $this->search . '%')->paginate(5)
]);
}
}
33. 테이블 상단에 검색창을 달아준다.
<br>
<div class="w-full flex justify-center">
<input wire:model="search" type="text" class="shadow appearance-none border rounded w-1/2 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Search products by name...">
</div>
<br>
34. 파일 검색이 실시간으로 된다.
