Laravel: Создание страниц — Урок 2

Запуск локального сервера и начальное состояние проекта

Для запуска локального сервера перейдите в папку проекта и выполните команду php artisan serve. После этого откройте в браузере необходимый URL-адрес. Изначально на сайте существует только главная страница. Необходимо удалить её шаблон и создать собственные страницы, которые в дальнейшем будут оформлены стилями.

Удаление стандартного шаблона и настройка маршрутов

Удалите файл welcome.blade.php из папки resources/views. Перед созданием HTML-файлов необходимо настроить маршруты. Откройте файл routes/web.php. Удалите имеющиеся комментарии. В этом файле настройте маршруты:

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

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

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

Обратите внимание, что расширение .blade.php здесь не указывается. После удаления шаблона welcome.blade.php при загрузке страницы возникнет ошибка, так как шаблон не будет найден.

Создание HTML-шаблонов и базовой структуры

Создайте в папке resources/views файлы: home.blade.php, about.blade.php и contact.blade.php. В них создайте простую структуру:

home.blade.php:

<h1>Главная страница</h1>

about.blade.php:

<h1>О нас</h1>

contact.blade.php:

<h1>Страница контактов</h1>

После обновления страницы эти шаблоны будут отображаться. Создайте базовую HTML-структуру, используя, например, Emmet в текстовом редакторе (ввод ! и Ctrl+Enter). Дублирование этого кода для каждой страницы неудобно, поэтому далее будет использовано наследование шаблонов.

Наследование шаблонов с помощью Blade

Создайте папку layout в папке resources/views. Внутри создайте файл app.blade.php. Скопируйте в него базовую HTML-разметку, удалив содержимое тега <body>. Добавьте директиву @yield(‘content’):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
</head>
<body>
    @yield('content')
</body>
</html>

В файлах home.blade.php, about.blade.php и contact.blade.php добавьте директивы @extends(‘layout.app’) и @section(‘content’):

@extends('layout.app')

@section('content')
    <h1>Главная страница</h1>
@endsection

Аналогично для других файлов, заменяя содержимое <h1>. Для установки заголовка страницы используйте @section(‘title’).

Включение компонентов: боковая панель, шапка, подвал и блок презентации

Создайте файлы aside.blade.php, header.blade.php, footer.blade.php и presentation.blade.php в папке resources/views/partials. Подключите эти файлы в app.blade.php с помощью директивы @include. В home.blade.php отобразите блок презентации (presentation.blade.php) условно, используя директиву @if(Request::is(‘/’)).

Стиль и подключение Bootstrap

Laravel использует Sass в качестве препроцессора. Для преобразования Sass в CSS используйте npm run dev. В файле resources/sass/app.scss напишите стили. Подключите скомпилированный CSS-файл в app.blade.php. Для автоматического обновления стилей используйте npm run watch. Подключите Bootstrap через CDN, добавив ссылку на CSS-файл Bootstrap в <head> основного шаблона.

В этом уроке мы создали базовый шаблон сайта с тремя страницами, используя наследование шаблонов, Sass для стилей и Bootstrap для готовых стилей. В следующих уроках мы продолжим работу над сайтом.

Что будем искать? Например,программа