Шаблонизатор Blade и верстка интерфейса
Изучение встроенного шаблонизатора Laravel. Создание переиспользуемых шаблонов (Layouts), компонентов и безопасный вывод динамических данных магазина.
Введение в Blade: Элегантный HTML
В паттерне MVC буква V означает View (Представление). В Laravel представления пишутся с использованием мощного шаблонизатора Blade. Файлы Blade имеют расширение .blade.php и хранятся в директории resources/views.
Зачем нужен шаблонизатор, если PHP сам по себе может выводить HTML? Во-первых, безопасность. Когда вы выводите данные в чистом PHP через echo, вы должны вручную использовать функции вроде htmlspecialchars() для защиты от XSS (межсайтового скриптинга). Blade делает это автоматически при использовании синтаксиса двойных фигурных скобок {{ $variable }}. Любой вредоносный JavaScript-код, введенный пользователем, будет экранирован и выведен как обычный текст.
Во-вторых, Blade предоставляет удобные директивы для управления потоком (условия, циклы), которые делают код намного чище. Вместо громоздких конструкций <?php foreach($items as $item): ?> вы используете лаконичное @foreach. Это значительно повышает читаемость кода, особенно при верстке сложных интерфейсов интернет-магазина, таких как каталог товаров или страница оформления заказа.
<!-- Пример файла resources/views/products/index.blade.php -->
<h1>Каталог товаров</h1>
@if(count($products) > 0)
<div class="product-list">
@foreach($products as $product)
<div class="product-card">
<!-- Безопасный вывод данных -->
<h2>{{ $product['name'] }}</h2>
<p>Цена: {{ $product['price'] }} руб.</p>
<!-- Генерация ссылки на основе именованного маршрута -->
<a href="{{ route('cart.add', ['id' => $product['id']]) }}">
Добавить в корзину
</a>
</div>
@endforeach
</div>
@else
<p>К сожалению, товаров пока нет.</p>
@endifНаследование шаблонов (Layouts)
Любой веб-сайт имеет повторяющиеся элементы: шапку (header), подвал (footer), навигационное меню. Чтобы не копировать этот HTML-код на каждую страницу каталога или корзины, в Blade используется концепция наследования шаблонов.
Сначала мы создаем главный файл (Layout), например resources/views/layouts/app.blade.php. В нем мы размещаем весь базовый HTML-каркас. В тех местах, где должен меняться контент (например, основная часть страницы), мы используем директиву @yield('content'). Эта директива работает как 'заполнитель' (placeholder).
Затем, создавая конкретную страницу (например, карточку товара), мы указываем, что она наследует главный шаблон с помощью директивы @extends('layouts.app'). А сам уникальный контент страницы мы оборачиваем в блок @section('content') ... @endsection. Когда Laravel рендерит страницу, он берет главный шаблон и вставляет содержимое секции на место соответствующего @yield. Это классический пример принципа DRY (Don't Repeat Yourself).
<!-- 1. Главный шаблон: resources/views/layouts/app.blade.php -->
<!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>© 2023 Все права защищены</footer>
</body>
</html>
<!-- 2. Дочерняя страница: resources/views/home.blade.php -->
@extends('layouts.app')
@section('title', 'Каталог')
@section('content')
<h1>Добро пожаловать в наш магазин!</h1>
<p>Лучшие товары по лучшим ценам.</p>
@endsection