Глава 5.1: Шаблоны Blade в Laravel

Время изучения: 40 минут

1. Что такое Blade? Ваш "умный" чертеж

До этого момента мы работали с двумя крайностями: чистым index.html и чистым JSON-ответом от API. Но как создавать полноценные веб-страницы, которые динамически отображают данные из нашего бэкенда?

Blade — это встроенный в Laravel шаблонизатор. Он позволяет нам писать обычный HTML, но с "суперспособностями":

Вставлять переменные и выполнять PHP-код в элегантном синтаксисе.
Создавать переиспользуемые "макеты" страниц (шапки, подвалы).
Использовать циклы и условия прямо в HTML-коде.
Автоматически защищать от XSS-атак.

💡 Космическая аналогия:

Представьте, что HTML — это простой чертеж космического корабля. Blade — это продвинутая CAD-система. Вы не просто рисуете линии, вы добавляете "умные" объекты. Вы говорите: "Здесь будет список экипажа", и Blade автоматически запрашивает данные и заполняет его. "Здесь будет главный экран", и Blade вставляет стандартный интерфейс.

Все файлы Blade имеют расширение .blade.php и хранятся в папке resources/views/.

2. Основы синтаксиса: Отображение данных

Самое простое, что делает Blade — это выводит данные.

Синтаксис {{ }}

Эти двойные фигурные скобки — команда для Blade "взять переменную и безопасно вывести ее содержимое".

Пример:

Маршрут в routes/web.php:
```
<?php
Route::get('/mission-briefing', function () {
    $mission = 'Исследовать систему Kepler-186';
    return view('briefing', ['mission_name' => $mission]);
});
```
- view('briefing', ...) говорит Laravel найти файл resources/views/briefing.blade.php.
- ['mission_name' => $mission] — это массив данных, которые мы "передаем" в наш вид.

Вид в resources/views/briefing.blade.php:

<h1>Миссия ЦУП</h1>
<p>Текущая задача: {{ $mission_name }}</p>

Результат в браузере по адресу /mission-briefing:

<h1>Миссия ЦУП</h1>
<p>Текущая задача: Исследовать систему Kepler-186</p>

🛡️ Важно знать: Blade автоматически экранирует все данные внутри {{ }}. Это значит, что если переменная содержит HTML-теги или вредоносный скрипт, они будут выведены как обычный текст, а не выполнены. Это встроенная защита от XSS-атак.

Для вывода неэкранированного HTML (делайте это с осторожностью!) используется синтаксис {!! $variable !!}.

3. Директивы: Добавление логики в HTML

Директивы Blade начинаются с символа @. Они позволяют использовать циклы, условия и многое другое.

Условия (@if, @else):

@if($planet->is_habitable)
    <p style="color: green;">Планета пригодна для жизни!</p>
@else
    <p style="color: red;">Требуется скафандр. Атмосфера враждебна.</p>
@endif

Циклы (@foreach, @forelse):

@forelse — это очень удобная директива, которая объединяет цикл и проверку на пустоту.

<h2>Список планет в системе:</h2>
<ul>
    @forelse($planets as $planet)
        <li>
            {{ $loop->iteration }}. {{ $planet->name }}
            <!-- $loop - специальная переменная, доступная в цикле -->
        </li>
    @empty
        <li>В этой системе планет не обнаружено.</li>
    @endforelse
</ul>

4. Макеты и секции: Не повторяй себя (DRY)

Самая мощная возможность Blade — создание переиспользуемых макетов (layouts). Вам не нужно копировать шапку и подвал сайта на каждую страницу.

Шаг 1: Создаем мастер-макет (layout)

Создайте файл resources/views/layouts/app.blade.php:

<?php
<!DOCTYPE html>
<html lang="en">
<head>
    <title>ЦУП - @yield('title')</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
    <header>
        <h1>Командный центр галактического флота</h1>
    </header>

    <main>
        @yield('content') <!-- Здесь будет уникальное содержимое страницы -->
    </main>

    <footer>
        <p>&copy; {{ date('Y') }} Space Command. Все права защищены.</p>
    </footer>
</body>
</html>

- @yield('title') и @yield('content') — это "слоты" или "заполнители".

Шаг 2: Создаем дочерний вид, который использует макет

Создайте файл resources/views/planets/index.blade.php:

<?php
@extends('layouts.app') {{-- Наследуем наш мастер-макет --}}

@section('title', 'Список планет') {{-- Заполняем секцию 'title' --}}

@section('content') {{-- Заполняем основную секцию 'content' --}}
    <h2>Зарегистрированные планеты</h2>
    <p>Это список всех известных нам миров.</p>
    {{-- Здесь может быть ваш цикл @forelse для вывода планет --}}
@endsection

Теперь, когда Laravel будет рендерить planets.index, он сначала возьмет layouts.app, а затем вставит в него содержимое из секций @section.

Квиз для закрепления

🚀 Итог главы:

Вы изучили основы Blade — мощного инструмента для создания динамических веб-страниц. Теперь вы умеете:

Выводить данные с автоматической защитой от XSS.
Использовать директивы для добавления логики (@if, @forelse).
Создавать переиспользуемые макеты с помощью @extends и @yield.

Мы подготовили "чертежи" для панелей управления нашего корабля. В следующей главе мы создадим конкретные "панели" (представления) для нашего API и выведем на них реальные данные.