라라벨/livewire_study

laravel livewire turbolinks

땀모 2020. 4. 17. 18:06

1. 라라벨 설치

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


2. livewire 패키지 설치

1
composer require livewire/livewire
cs


3. 모델, 마이그레이션, 시더, 팩토리생성

1
php artisan make:model -msf Product
cs


-m | 마이그레이션을 만듭니다

-s | 시더를 만듭니다

-f | 공장을 만듭니다

4. 마이그레이션 파일 스키마 작성 (2020_04_17_091934_create_products_table)

1
2
3
4
5
6
7
8
9
10
11
12
    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. 마이그레이션 및 시더생성

1
php artisan migrate:fresh --seed
cs



9. tailwindcss 설치

1
2
3
4
5
6
7
8
9
10
11
-테일윈드css
npm install tailwindcss
 
-컨피그파일 생성(tailwind.config.js)
npx tailwind init 
 
-패키지설치
npm install 
 
-빌드하기
npm run dev
cs


10. resources/sass/app/scss

1
2
3
@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. 파일 검색이 실시간으로 된다.