지금부터 Web 개발의 백엔드를 배우는 in 2018(PHP7편 - 1.3일째)｜자택 서버로 Web 사이트 공개 의 계속입니다.

Laravel은 Blade라는 템플릿 기능을 제공합니다.

그것을 사용한 간단한 구현은 Udemy의 온라인 자료
【2일로 할 수 있는】처음 PHP 7 x Laravel 5.5 입문 에서 배웠지만 Laravel5.5에서 구현되었습니다.

블레이드를 사용하여 컴포넌트 지향 뷰로 만들기

제 환경은 Laravel5.6이므로, 좀 더 나우한 구현에 임하기로 했습니다.
JS 프레임워크로 친숙한 컴포넌트 지향적인 구현으로 바꾸어 보았습니다.

Component의 작성의 기본

Laravel 공식 사이트 | 컴포넌트 사용법

Laravel 5.5와 5.6에서 구성 요소를 작성하는 방법의 차이점

Laravel 5.5에서는 이런 느낌이었습니다.

Laravel5.5의 Component 호출

@component('component.alert', ['foo', $foo])
・・・・・
@endcomponent

Laravel5.6에서는, 보다 간결하고 직관적인 호출이 가능하게 되어 있어, 이번은 그 기술 방법을 채용했습니다.

Laravel5.6의 Component 호출

@alert(['foo', $foo])
・・・・・
@endalert

구현

우선 레이아웃과 컴포넌트를 분리

app/view/layouts/books.blade.php(레이아웃용 템플릿)

@extends('layouts.app')

@section('pageCss')
<link href="{{ asset('css/layouts/book.css') }}" rel="stylesheet">
@endsection

@section('content')
    <div class="container" >
        <div class="card-columns">
            // 本の新規登録コンポーネント
            @newBook
            @endnewBook

            // 本の一覧表示コンポーネント（パラメータとして$books変数を渡す）
            @bookList(['books' => $books])
            @endbookList

        </div>
    </div>
@endsection

app/Http/Controllers/BookController.php

・・・・・・
    public function index()
    {
        // layoutsディレクトリにBookのテンプレートを移動したので、返却するビューにディレクトリ名を付けるよう変更
-        return view('ooks', ['books' => $this->bookService::getBooks()]);
+        return view('layouts.books', ['books' => $this->bookService::getBooks()]);
    }
・・・・・・

app/providers/AppServiceProvider.php

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
+        // Bladeコンポーネントを使えるようにプロバイダー登録 
+        $this->registerComponents();
    }

+    /**
+     * Register Blade components.
+     *
+     * @return void
+     */
+    private function registerComponents(): void {
+        Blade::component('components.new-book', 'newBook');
+        Blade::component('components.book-list', 'bookList');
+    }

app/view/components/new-book.blade.php(책의 신규 등록 컴포넌트)

<div class="card">
    <div class="card-header">
        {{ __('新規書籍の登録') }}
    </div>

    <div class="card-body">
        <!-- Display Validation Errors -->
        @include('common.errors')

        <!-- New Book Form -->
        <form action="/books" method="POST" class="form-horizontal">
            {{ csrf_field() }}

            <!-- Book Name -->
            <div class="form-group">
                <label for="task-name" class="col-sm-3 control-label">{{ __('書籍名') }}</label>

                <div class="col-sm-6">
                    <input type="text" name="name" id="book-name" class="form-control" value="{{ old('book') }}">
                </div>
            </div>

            <!-- Add Book Button -->
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6">
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-plus"></i>{{ __('追加') }}
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

app/view/components/book-list.blade.php (책 목록 구성 요소)

@if (count( $books  ) > 0)
    <div class="card">
        <div class="card-header">
            {{ __('書籍一覧') }}
        </div>

        <div class="card-body">
            <table class="table table-striped task-table">
                <thead>
                    <th>{{ __('書籍名') }}</th>
                    <th>&nbsp;</th>
                </thead>
                <tbody>
                    @foreach ($books as $book)
                        <tr>
                            <td class="table-text"><div>{{ $book->title }}</div></td>

                            <!-- Task Delete Button -->
                            <td>
                                <form action="/books/{{ $book->id }}" method="POST">
                                    {{ csrf_field() }}
                                    {{ method_field('DELETE') }}

                                    <button type="submit" class="btn btn-danger">
                                        <i class="fa fa-trash"></i>{{ __('削除') }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif

화면 표시 가능

책 레이아웃 안에
・상부가 신규 등록 컴포넌트로 표시
・하부가 일람 표시 컴퍼넌트로 표시

도중 곤란한 일

리스트 컴퍼넌트에 건네준 파라미터의\$books입니다만, 최초는 book-list.blade.php측에서
{{$books}}로 작성했지만 잘 인식되지 않고 오류가 계속되었습니다.

호출자의 레이아웃 측에서 매개 변수를 전달할 때

@bookList(['books' => 'books'])
@endbookList

했던 것이 원인이었습니다. 변수로서가 아니라 문자열로 전달했다. . .
이것을

@bookList(['books' => $books])
@endbookList

로, 컴퍼넌트의 템플릿 측은, 보통으로 $books로서 기술하는 일로 제대로 배열로서
컴퍼넌트에 파라미터를 건네줄 수 있어 움직이게 되었습니다.

컴포넌트마다 CSS를 준비하고 분리할 수 있으면 좋겠습니다만, 뭔가 방법 있나요?

이번 수정 내역

집 서버에서 공개한 제작중 앱

책 목록

공부로 만드는 프로젝트 소스