Laravel에서 재사용 가능한 블레이드 컴포넌트 생성

Laravel 블레이드 구성요소 — Laravel은 처음부터 관리자 패널을 생성합니다. — 12부

Unsplash의 micheile dot com 사진

블레이드 템플릿

블레이드는 PHP 템플릿 엔진입니다. 블레이드 템플릿을 사용하면 PHP 코드를 직접 사용할 수 있습니다. 파일 확장자는 .blade.php이며 resources/views 디렉토리에 저장됩니다.

Blade is the simple, yet powerful templating engine that is included with Laravel.

블레이드 부품

블레이드 구성 요소는 섹션, 레이아웃 및 포함과 유사합니다. 두 가지 유형의 구성 요소를 만들 수 있습니다.

클래스 기반 구성 요소

익명 구성요소

make:component Artisan 명령은 클래스 기반 구성 요소를 만드는 데 사용됩니다.

php artisan make:component Admin/Form/Input

익명 컴포넌트를 생성하려면 make:component 명령을 호출할 때 --view 플래그를 사용할 수 있습니다.

php artisan make:component admin.form.input --view

위의 명령은 resources/views/components/admin/form/input.blade.php에 Blade 파일을 생성합니다.

공식 Laraveldocument에서 자세히 알아보기

재사용 가능한 블레이드 구성요소 생성

admin panel에 대한 몇 가지 구성 요소를 만들 것입니다. 구성 요소는 보기의 줄 수를 줄입니다. 현재 사용자 인덱스 보기 파일에는 다음 코드가 있습니다.

자원/보기/관리자/사용자/index.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Users') }}
        </h2>
    </x-slot>

<div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <div class="flex flex-col mt-8">
                    @can('user create')
                    <div class="d-print-none with-border mb-8">
                        <a href="{{ route('user.create') }}" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">{{ __('Add User') }}</a>
                    </div>
                    @endcan
                        <div class="py-2">
                        @if(session()->has('message'))
                            <div class="mb-8 text-green-400 font-bold">
                                {{ session()->get('message') }}
                            </div>
                        @endif
                            <div class="min-w-full border-b border-gray-200 shadow overflow-x-auto">
                                <form method="GET" action="{{ route('user.index') }}">
                                <div class="py-2 flex">
                                    <div class="flex pl-2">
                                        <input type="search" name="search" value="{{ request()->input('search') }}" class="rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="Search">
                                        <button type='submit' class='ml-4 inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150'>
                                            {{ __('Search') }}
                                        </button>
                                    </div>
                                </div>
                                </form>
                                <table class="border-collapse table-auto w-full text-sm">
                                    <thead>
                                        <tr>
                                            <th class="py-4 px-4 bg-grey-lightest font-bold uppercase text-sm text-grey-dark border-b border-grey-light text-left">
                                                @include('admin.includes.sort-link', ['label' => 'Name', 'attribute' => 'name'])
                                            </th>
                                            <th class="py-4 px-4 bg-grey-lightest font-bold uppercase text-sm text-grey-dark border-b border-grey-light text-left">
                                                @include('admin.includes.sort-link', ['label' => 'Email', 'attribute' => 'email'])
                                            </th>
                                            @canany(['user edit', 'user delete'])
                                            <th class="py-4 px-4 bg-grey-lightest font-bold uppercase text-sm text-grey-dark border-b border-grey-light text-left">
                                                {{ __('Actions') }}
                                            </th>
                                            @endcanany
                                        </tr>
                                    </thead>

<tbody class="bg-white dark:bg-slate-800">
                                        @foreach($users as $user)
                                        <tr>
                                            <td class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">
                                                <div class="text-sm text-gray-900">
                                                    <a href="{{route('user.show', $user->id)}}" class="no-underline hover:underline text-cyan-600 dark:text-cyan-400">{{ $user->name }}</a>
                                                </div>
                                            </td>
                                            <td class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">
                                                <div class="text-sm text-gray-900">
                                                    {{ $user->email }}
                                                </div>
                                            </td>
                                            @canany(['user edit', 'user delete'])
                                            <td class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">
                                                <form action="{{ route('user.destroy', $user->id) }}" method="POST">
                                                    <div class="flex">
                                                        @can('user edit')
                                                        <a href="{{route('user.edit', $user->id)}}" class="px-4 py-2 text-white mr-4 bg-blue-600">
                                                            {{ __('Edit') }}
                                                        </a>
                                                        @endcan

@can('user delete')
                                                        @csrf
                                                        @method('DELETE')
                                                        <button class="px-4 py-2 text-white bg-red-600">
                                                            {{ __('Delete') }}
                                                        </button>
                                                        @endcan
                                                    </div>
                                                </form>
                                            </td>
                                            @endcanany
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="py-8">
                                {{ $users->appends(request()->query())->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

컴포넌트 생성 후

<x-admin.wrapper>
    <x-slot name="title">
        {{ __('Users') }}
    </x-slot>

@can('user create')
    <x-admin.add-link href="{{ route('user.create') }}">
        {{ __('Add User') }}
    </x-admin.add-link>
    @endcan

<div class="py-2">
        <x-admin.message />
        <div class="min-w-full border-b border-gray-200 shadow overflow-x-auto">
            <x-admin.grid.search action="{{ route('user.index') }}" />
            <x-admin.grid.table>
                <x-slot name="head">
                    <tr>
                        <x-admin.grid.th>
                            @include('admin.includes.sort-link', ['label' => 'Name', 'attribute' => 'name'])
                        </x-admin.grid.th>
                        <x-admin.grid.th>
                            @include('admin.includes.sort-link', ['label' => 'Email', 'attribute' => 'email'])
                        </x-admin.grid.th>
                        @canany(['user edit', 'user delete'])
                        <x-admin.grid.th>
                            {{ __('Actions') }}
                        </x-admin.grid.th>
                        @endcanany
                    </tr>
                </x-slot>
                <x-slot name="body">
                @foreach($users as $user)
                    <tr>
                        <x-admin.grid.td>
                            <div class="text-sm text-gray-900">
                                <a href="{{route('user.show', $user->id)}}" class="no-underline hover:underline text-cyan-600 dark:text-cyan-400">{{ $user->name }}</a>
                            </div>
                        </x-admin.grid.td>
                        <x-admin.grid.td>
                            <div class="text-sm text-gray-900">
                                {{ $user->email }}
                            </div>
                        </x-admin.grid.td>
                        @canany(['user edit', 'user delete'])
                        <x-admin.grid.td>
                            <form action="{{ route('user.destroy', $user->id) }}" method="POST">
                                <div class="flex">
                                    @can('user edit')
                                    <a href="{{route('user.edit', $user->id)}}" class="px-4 py-2 text-white mr-4 bg-blue-600">
                                        {{ __('Edit') }}
                                    </a>
                                    @endcan

@can('user delete')
                                    @csrf
                                    @method('DELETE')
                                    <button class="px-4 py-2 text-white bg-red-600">
                                        {{ __('Delete') }}
                                    </button>
                                    @endcan
                                </div>
                            </form>
                        </x-admin.grid.td>
                        @endcanany
                    </tr>
                    @endforeach
                </x-slot>
            </x-admin.grid.table>
        </div>
        <div class="py-8">
            {{ $users->appends(request()->query())->links() }}
        </div>
    </div>
</x-admin.wrapper>

index.blade.php에 아래 구성 요소를 만들었습니다.

관리자.래퍼

관리자 추가 링크

관리자.메시지

admin.grid.search

관리자.그리드.테이블

admin.grid.th

admin.grid.td

블레이드 구성 요소 렌더링

블레이드 구성 요소를 렌더링하기 위해 태그는 x- 문자열로 시작하고 뒤에 구성 요소 클래스의 케밥 케이스 이름이 옵니다.

<x-alert/>

<x-user-profile/>

구성 요소 클래스가 App\View\Components 디렉토리 내에서 더 깊게 중첩된 경우 . 디렉토리 중첩을 나타내는 문자.

<x-admin.wrapper></x-admin.wrapper>

Laravel 관리자 패널은 https://github.com/balajidharma/basic-laravel-admin-panel에서 사용할 수 있습니다. 관리자 패널을 설치하고 피드백을 공유하세요.

읽어 주셔서 감사합니다.

더 많은 것을 기대해 주세요!

balajidharma.medium.com에서 저를 팔로우하세요.

이전 파트 — 11부:

다음 부분 — 13부: 출시 예정