PHP Laravel Views - создание представлений

Все исходники / Язык программирования PHP / OS Windows / Веб программирование / Frameworks для сайтов и веб-приложений / PHP Laravel Views - создание представлений

Оглавление:

Laravel Views
Стандартные представления Laravel
Операторы и директивы Blade
Создание представлений вручную
Создание представлений с помощью Artisan
Пример представлений
URL запросы
Исходник сайта на фреймворке Laravel

Laravel Views

Laravel – платформа для построения веб-приложений на архитектуре MVC (Model-View-Controller, Модель-Вид-Контроллер, Модель-Представление-Контроллер). Одной из составляющих архитектуры MVC является View (он же Вид, он же Представление) отвечающий за визуализацию выходных данных, которые сформировали модель и контроллер.

В Laravel Views являются файлами PHP в сочетании с разметкой HTML. Для производительности и чистоты кода представлений разработчики Laravel предлагают эргономичный язык шаблонов Blade. Views можно также писать на чистом PHP без использования движка Blade и использовать представления, например, для взаимодействия кода PHP и JavaScript по технологии AJAX.

Создавать представления в Laravel можно вручную или использовать помощник для веб-разработчиков Laravel Artisan для быстрого создания аккуратного программного кода. Ниже приведены примеры создания и использования представлений Laravel.

Установка фреймворка Laravel описана на странице Создание и запуск проекта PHP Laravel. В подтверждение описанной теории к странице прикреплен исходник практического примера создания представлений (видов) для приложения Laravel.

Стандартные представления Laravel

Laravel использует шаблонизатор Blade, позволяющий элегантно встраивать PHP-код в HTML разметку. Blade – это мощный и простой движок, который позволяет создавать динамичные и красивые представления. Файлы Blade имеют двойное расширение:
file_name.blade.php
указывающее на то, что этот файл должен обрабатываться движком Blade и интерпретатором PHP. В таких представлениях можно свободно комбинировать директивы Blade, HTML, CSS и JavaScript код, а также использовать «сырой» PHP-код.

Не следует опасаться снижения скорости создания веб-страниц вследствие дополнительной работы движка Blade: такие представления компилируются в чистый код PHP и кэшируются до тех пор, пока не будут изменены. При веб-запросах фреймворк работает с готовыми кэшированными представлениями. Таким образом работа движка Blade практически не оказывает влияние на производительность фреймворка Laravel. Кэши представлений хранятся в папке storage\framework\views.

Файл движка Blade до компиляции:

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <title>{{ $title}}</title>
</head>

<body>
    {{-- Вставка подпредставления меню --}}
    @include('shared.nav')

    <div class="container pb-3">
        <header class="text-center mb-5">
            <h1>{{ $name_page }}</h1>
        </header>

        {{-- Вставка контента --}}
        @yield('content')
    </div>

    {{-- Вставка подпредставления подвала --}}
    @include('shared.footer')
</body>
</html>

По умолчанию операторы Blade {{ }} автоматически преобразуют символы в объекты HTML через функцию PHP htmlspecialchars() для предотвращения XSS-атак. В скомпилированном файле htmlspecialchars(…) заменяется оболочкой e(…).

Готовое представление шаблона Blade после компиляции:

<!doctype html>
<html lang="<?php echo e(app()->getLocale()); ?>">
<head>
    <title><?php echo e($title); ?></title>
</head>

<body>
    
    <?php echo $__env->make('shared.nav', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

    <div class="container pb-3">
        <header class="text-center mb-5">
            <h1><?php echo e($name_page); ?></h1>
        </header>

        <?php echo $__env->yieldContent('content'); ?>
    </div>

    
    <?php echo $__env->make('shared.footer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
</body>
</html>
<?php /**PATH D:\MyProjects\Programming\PHP\Laravel Views\LaravelViews\resources\views/shared/test.blade.php ENDPATH**/ ?>

Операторы и директивы Blade

Основные операторы и директивы Blade:
{{ … }} - оператор Blade вывода текста, заменяющий конструкцию из функций PHP htmlspecialchars() и echo()для уменьшения количества кода и предотвращения XSS-атак.
{!! … !!} - оператор для вывода неэкранированного (сырого) текста.
@include - позволяет включать одно представление в другое. Используется для уменьшения дублирования кода.
@extends - наследование шаблона макета.
@yield - используется для отображения контента.
@section - определяет раздел контента. Отличается от предыдущей директивы более широкими возможностями.
@parent - вывод контента родительской @section на дочерней странице.

Кроме вышеперечисленных движок Blade включает множество других операторов и директив, например: условные, операторов цикла, комментарии и другие.

Создание представлений вручную

Представления фреймворка Laravel хранятся в каталоге resources/views. Чтобы создать представление вручную достаточно в каталоге хранения создать файл с требуемым именем и двойным расширением file_name.blade.php. В таком случае представление будет обрабатываться движком Blade.

В представлении шаблона Blade нет необходимости в тегах кода PHP <?php ?>, достаточно только HTML и конструкций Blade. Здесь можно повториться: движок Blade не ограничивает использование простого кода PHP в своих шаблонах, в таком случае теги <?php ?> необходимы.

Гибкость Laravel позволяет создавать представления как обычные файлы PHP, с расширением .php . Такие представления подойдут для специфических задач, например для упрощенных веб-страниц без использования контроллеров. Но для представлений с мастер-страницами и подпредставлениями код может оказаться громоздким и сложным для чтения.

Создание представлений с помощью Artisan

Artisan – помощник для веб-разработчиков в виде интерфейса командной строки включенный в состав Laravel. Artisan включает множество полезных команд и повышает комфортность веб-разработки.

Для создания представления с помощью Artisan необходимо запустить окно командной строки в корне фреймворка и выполнить команду:
php artisan make:view file_name - расширение файла указывать не следует, оно добавится автоматически. В результате данной команды создастся представление Blade по пути resources/views. Для создания представлений в подкаталогах достаточно указывать имя подкаталогов через точку:
php artisan make:view pages.games.file_name - представление создастся по пути resources/views/pages/games, причем если указанных каталогов не существует они создадутся автоматически.

Представление созданное посредством Artisan:

<div>
    <!-- I begin to speak only when I am certain what I will say is not better left unsaid. - Cato the Younger -->
</div>

Пример представлений

В качестве примера создадим конструкцию из представлений с наследованием шаблонов:
главный макет по пути resources\views\shared\layout.blade.php,
меню - resources\views\shared\nav.blade.php,
подвал - resources\views\shared\footer.blade.php,
страница - resources\views\pages\index.blade.php,
страница - resources\views\pages\php-lang.blade.php,
страница - resources\views\pages\laravel.blade.php.
Вы можете создать файлы этих представлений любым описанным выше способом и скопировать в них соответствующие коды. Представления-страницы расширяют главный макет имея в начале файла директиву @extends.

Главный макет — это представление с включением подпредставлений навигации и подвала и секциями для вывода содержания дочерних страниц. Для привлекательности веб-страниц используется CSS-фреймворк Bootstrap. Код и разметка главного макета:

<!-- resources\views\shared\layout.blade.php -->
<!doctype html>
{{-- Запрос языковой конфигурации приложения.
    Языковые настройки хранятся в файле конфигурации config/app.php
    --}}
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <style>
        html {
            position: relative;
            min-height: 100%;
        }

        body {
            margin-bottom: 60px;
        }

        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 60px;
            line-height: 60px;
            color: #dddddd;
            background-color: #333333;
        }
    </style>
</head>

<body>
    {{-- Включение представления меню --}}
    @include('shared.nav')

    <div class="container pb-3">
        <header class="text-center mb-5">
            <h1>{{ $page_name }}</h1>
        </header>

        {{-- Место вставки контента от дочерних подпредставлений --}}
        @yield('content', '<h5>Нет контента - секция "content"</h5>')

        {{-- Место вставки контента от дочерних подпредставлений --}}
        @section('content2')
            <h5 class="text-danger ">Контент по умолчанию, который может отображаться в дочерних представлениях</h5>
        @show

    </div>

    {{-- Включение представления подвала --}}
    @include('shared.footer')

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">
    </script>
</body>
</html>

Представление меню включается в состав главного макета директивой Blade @include(). В качестве меню используется компонент Bootstrap Navbar. В коде представления можно заметить функции route(…) — это вызовы именованных маршрутов, о чем написано ниже. Код и разметка меню:

<!-- resources\views\shared\nav.blade.php -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
    <div class="container-fluid">
        <a class="navbar-brand p-0 m-0" href="/">
            <img src="/content/img/laravel-logo.svg" class="p-0 m-0" alt="Laravel logo" width="40" height="40">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav text-center">
                <a class="nav-link" aria-current="page" href="{{ route('url_index') }}">Главная</a>
                <a class="nav-link" href="{{ route('url_php') }}">PHP</a>
                <a class="nav-link" href="{{ route('url_laravel') }}">Laravel</a>
            </div>
        </div>
    </div>
</nav>

Представление подвала простейшее, состоит из одной надписи. Как и меню подвал включается в главный макет директивой шаблонизатора Blade @include(). Код подвала:

<!-- resources\views\shared\footer.blade.php -->

<footer class="footer text-center ">
    <p>Подвал страницы</p>
</footer>

Домашняя страница сайта имеет одну секцию @section для отправки контента в главный макет. Домашняя страница сайта:

<!-- resources\views\pages\index.blade.php -->

@extends('shared.layout')

@section('content2')

{{-- отображение контента секции родительского представления --}}
@parent

{{-- контент для отображения в данной секции на мастер-странице --}}
<div class="row">
    <div class="col">
        <div class="card m-auto " style="max-width: 30rem;">
            <img src="/content/img/php-svgrepo-com.svg" class="card-img-top img-fluid p-2" alt="PHP logo"
                style="max-width:150px;max-height: 150px;">
            <div class="card-body">
                <h5 class="card-title">PHP- скриптовый язык для веб-разработки</h5>
                <p class="card-text">PHP имеет открытый исходный код, прост в использовании, независим от платформы,
                    является лидером среди языков веб-разработки.</p>
                <a href="{{ route('url_php') }}" class="btn btn-primary">about PHP</a>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card m-auto " style="max-width: 30rem;">
            <img src="/content/img/laravel-svgrepo-com.svg" class="card-img-top img-fluid p-2" alt="Laravel logo"
                style="max-width:150px;max-height: 150px;">
            <div class="card-body">
                <h5 class="card-title">Laravel - популярный фреймворк на PHP</h5>
                <p class="card-text">Laravel предоставляет множество инструментов и функциональностей, позволяющих
                    просто создавать масштабируемые веб-приложения.</p>
                <a href="{{ route('url_laravel') }}" class="btn btn-primary">about Laravel</a>
            </div>
        </div>
    </div>
</div>
@endsection

Страница описания языка PHP отправляет свое содержание в главный макет посредством директивы @section. Код страницы:

<!-- resources\views\pages\php-lang.blade.php -->

@extends('shared.layout')

{{-- Контент секции для отображения на веб-странице --}}
@section('content2')

<h1>{{ $content }} - секция 'content2'</h1>

@endsection

Страница описания Laravel включает свое содержимое в главный макет директивами @section. Код представления:

<!-- resources\views\pages\laravel.blade.php -->
 @extends('shared.layout')

{{-- Контент отображения на веб-странице по секциям --}}

@section('content')

<h1>Есть контент в секции 'content'</h1>

@endsection

@section('content2')

<h1>{{ $content }} - секция 'content2'</h1>

@endsection

URL запросы

Теперь необходимо определить маршруты с URL-адресами, по которым будут вызываться созданные выше представления. Маршруты для веб-страниц определяются в файле routes/web.php.

В Laravel для определения маршрутов используются статические функции класса Route. Каждый маршрут связан с конкретным URL-адресом и возвращает соответствующее представление, например для домашней страницы сайта:

Route::get('/', function () {
    return view('pages.index', ['title' => 'Hello from Laravel', 'page_name'=> 'Framework Laravel']);
})->name('url_index');

// Или то же самое упрощенно:
Route::view("/","pages.index", ['title' => 'Hello from Laravel', 'page_name'=> 'Framework Laravel'])->name("url_index");

Возвращая вид можно сразу определить массив переменных для передачи их в представление. Функция name() именует маршрут для вызова маршрута по имени в представлениях. Именование маршрутов упрощает их редактирование: в таком случае изменение URL маршрута в файле routes/web.php избавит вас от необходимости редактировать URL в каждом представлении.

Полный файл маршрутов веб-страниц исходника сайта на Laravel:

 <?php
// файл routes/web.php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('pages.index', ['title' => 'Hello from Laravel', 'page_name'=> 'Framework Laravel']);
})->name('url_index');
// Route::view("/","pages.index", ['title' => 'Hello from Laravel', 'page_name'=> 'Framework Laravel'])->name("url_index");

Route::get('/about-php', function () {
    return view('pages.php-lang', ['content' => 'PHP', 'page_name'=> 'About PHP']);
})->name('url_php');


Route::get('/about-laravel', function () {
    return view('pages.laravel', ['content' => 'Laravel', 'page_name'=> 'About Laravel']);
})->name('url_laravel');
//Route::view('/about-laravel', 'pages.laravel', ['content' => 'Laravel', 'page_name'=> 'About Laravel'])->name('url_laravel');

Route::get('/welcome', function () {
    return view('welcome');
});

Исходник сайта на фреймворке Laravel

Вышеописанного достаточно для построения простейшего сайта на Laravel. На случай затруднений к странице прикрепляется рабочий исходник для тестирования представлений. Исходник написан в среде Visual Studio Code.

Для разработок на PHP Laravel рекомендуется установить следующие расширения: Bootstrap IntelliSense, IntelliPHP - AI Autocomplete for PHP, Laravel Blade formatter, Laravel Blade Snippets, Laravel Extra Intellisense, PHP Tools for Visual Studio Code. Расширения можно скачать и установить на Extensions for Visual Studio Code

Скачать исходник

Тема: «PHP Laravel Views - создание представлений»

LaravelViews-vscode.zip Размер:25336 КбайтЗагрузки:10

Frameworks для сайтов и веб-приложений

похожие исходники