Шаблонизатор Blade: Создание пользовательского интерфейса

Студент освоит шаблонизатор Blade для создания переиспользуемых компонентов интерфейса (layouts) и вывода динамических данных на страницах.

Прогресс урока: 0%

Введение в шаблонизатор Blade. В классическом PHP разработчики смешивали HTML-разметку и логику, используя теги . Это делало код грязным, трудночитаемым и уязвимым. Laravel использует встроенный шаблонизатор Blade, который решает эти проблемы. Blade-файлы имеют расширение .blade.php и хранятся в папке resources/views. Главная особенность Blade — он компилируется в чистый PHP-код и кэшируется до тех пор, пока в шаблон не будут внесены изменения, что означает нулевые потери производительности. Для вывода данных используется синтаксис двойных фигурных скобок: {{ $productName }}. Самое важное свойство этих скобок заключается в том, что они автоматически пропускают данные через PHP-функцию htmlspecialchars. Это обеспечивает базовую защиту от XSS (Cross-Site Scripting) атак. Если злоумышленник попытается ввести JavaScript-код 'alert(1)' в качестве имени товара, Blade выведет его как обычный текст, а не исполнит в браузере пользователя. Для вывода неэкранированного HTML (например, форматированного описания товара из WYSIWYG-редактора) используется синтаксис {!! $description !!}, но применять его нужно с крайней осторожностью.

html

<!-- resources/views/products/index.blade.php -->
<h1>Каталог товаров</h1>

@if(count($products) > 0)
    <div class="grid">
        @foreach($products as $product)
            <div class="card">
                <h3>{{ $product['name'] }}</h3>
                <p>Цена: ${{ number_format($product['price'], 2) }}</p>
                <button>В корзину</button>
            </div>
        @endforeach
    </div>
@else
    <p>Товары не найдены.</p>
@endif

Наследование шаблонов (Layouts). Любой интернет-магазин имеет повторяющиеся элементы на всех страницах: шапка (header) с логотипом и корзиной, навигационное меню, подвал (footer) с контактами. Копировать этот HTML-код на каждую страницу — нарушение принципа DRY. Blade решает эту задачу с помощью механизма наследования. Мы создаем главный шаблон (Master Layout), например resources/views/layouts/app.blade.php, который содержит общий HTML-каркас (теги , , ). Внутри этого каркаса мы определяем 'зоны', куда дочерние шаблоны будут вставлять свой контент, используя директиву @yield('content'). Когда мы создаем страницу каталога, мы используем директиву @extends('layouts.app'), чтобы указать, какой каркас использовать, и оборачиваем уникальный контент страницы в @section('content') ... @endsection. При рендеринге страницы Laravel соберет эти части воедино. Этот подход (Scaffolding структуры UI) позволяет легко менять дизайн всего сайта, редактируя только один файл layout'а.

html

<!-- resources/views/layouts/app.blade.php (Master Layout) -->
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title', 'Мой Магазин')</title>
</head>
<body>
    <header>
        <nav>Меню | <a href="{{ route('cart.index') }}">Корзина</a></nav>
    </header>

    <main>
        @yield('content')
    </main>

    <footer>&copy; 2023 Магазин</footer>
</body>
</html>

Компоненты и директивы управления потоком. Помимо @if и @foreach, Blade предоставляет множество удобных директив. Например, @forelse позволяет объединить цикл с проверкой на пустоту: она перебирает массив, но если он пуст, выполняет блок @empty. Также Blade поддерживает включение одних шаблонов в другие с помощью директивы @include('partials.sidebar'). В современных версиях Laravel активно используются Blade-компоненты (Components). Компоненты работают подобно компонентам во фронтенд-фреймворках (React/Vue). Вы можете создать компонент кнопки (Купить) или карточки товара, инкапсулировав в них HTML и логику отображения. Это высший уровень переиспользования кода в UI. Директивы Blade также тесно интегрированы с системой авторизации: @auth выведет контент только для залогиненных пользователей (например, ссылку 'Мой профиль'), а @guest — только для неавторизованных (ссылки 'Войти' и 'Регистрация').

Флеш-карточки

1 /

Какая директива Blade используется для определения 'зоны' (плейсхолдера) в главном шаблоне (layout), куда будет вставлен контент из дочерних шаблонов?

Нажмите, чтобы увидеть ответ

@yield('имя_секции')

Нажмите, чтобы вернуться

Как в шаблоне Blade вывести переменную $htmlData, содержащую HTML-теги, чтобы они отрендерились в браузере, а не экранировались?

Нажмите, чтобы увидеть ответ

Использовать синтаксис {!! $htmlData !!}

Нажмите, чтобы вернуться

Задание

Сценарий: Создание страницы конкретного товара (Product Show Page). Используя методологию Chunking, разбейте задачу на шаги создания шаблонов.

Убедиться в наличии главного шаблона layouts/app.blade.php с @yield('content').
Создать файл resources/views/products/show.blade.php.
В начале файла show.blade.php добавить директиву @extends('layouts.app').
Открыть секцию @section('content').
Использовать двойные фигурные скобки {{ $product->name }} для вывода безопасного текста и {!! $product->description !!} для вывода HTML-описания товара.
Закрыть секцию директивой @endsection.

10 баллов

Предыдущий урок Следующий урок

Уроки курса