Создание шаблона приложения Laravel на Bulma CSS

Development, PHP | Amber | Комментировать запись

Laravel – это открытый PHP-фреймворк, в котором вы найдете набор инструментов и ресурсов для создания современных PHP-приложений. Эта серия руководств поможет вам создать простое приложение на платформе Laravel, используя среду разработки PHP, контейнеризованную при помощи Docker Compose. В итоге вы получите одностраничный веб-сайт, которым можно управлять с помощью команд Artisan. На этом сайте вы сможете делиться с аудиторией актуальными ссылками.

Примечание: Другие части этой серии можно найти по этой ссылке.

В предыдущих частях этой серии вы узнали, как настроить таблицы в БД приложения с помощью миграций, как создать модель Eloquent для взаимодействия с таблицей ссылок и как написать команды Artisan для управления ссылками в БД. В последнем мануале вы увидите, как создать собственный шаблон Blade для отображения ссылок во внешнем интерфейсе приложения. Чтобы упростить стилизацию этой страницы и сохранить ее простоту, мы будем использовать Bulma, простой и легкий фреймворк CSS.

Стандартный маршрут, установленный в файле Laravel, указывает на пример шаблона, который вы можете найти по адресу resources/views/welcome.blade.php. Мы создадим новый файл index.blade.php в том же каталоге и отредактируем основной файл маршрутов, чтобы маршрут / указывал на этот шаблон. В определении маршрута нам также нужно получить список всех ссылок, которые мы хотим отобразить в новом шаблоне.

Начнем с обновления файла маршрутов приложения Laravel. Откройте файл routes/web.php в текстовом редакторе или редакторе кода:

nano routes/web.php

Текущий маршрут / указывает на образец страницы, который поставляется вместе с Laravel по умолчанию.

Route::get('/', function () {

    return view('welcome');

});

Чтобы внести предлагаемые изменения, сначала нужно использовать Link (модель Eloquent) – она поможет извлечь все ссылки из БД и отсортировать их в порядке убывания, благодаря чему все новые ссылки будут идти в списке первыми.

$links = Link::all()->sortDesc();

Вспомогательная функция view будет искать файл шаблона по имени welcome.blade.php в корневом каталоге resources/views и возвращать результат визуализации в браузер. Мы отредактируем эту функцию, чтобы она указывала на новый шаблон index.blade.php. Кроме того, нужно передать переменную $links в качестве данных шаблона.

return view('index', [

    'links' => $links

]);

Следующий код внесет все изменения для маршрута /, которые мы обсудили выше. Замените содержимое в вашем файле routes/web.php следующим кодом:

<?php

use Illuminate\Support\Facades\Route;

use App\Models\Link;

/*

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

|

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

|

*/

Route::get('/', function () {

    return view('index', [

        'links' => Link::all()->sortDesc()

    ]);

});

Сохраните и закройте файл, когда закончите.

Файл маршрутов настроен, но, если прямо сейчас вы попытаетесь получить доступ к главной странице приложения, вы получите сообщение об ошибке – потому что шаблон index.blade.php еще не существует. Скоро мы создадим его.

В качестве основы для нашего шаблона мы можем использовать стартовый шаблон Bulma, который предоставляет базовую структуру HTML-страницы с заголовком, подзаголовком и областью для основного контента. Позже мы добавим CSS-стили, чтобы настроить внешний вид этой страницы.

Для начала создайте новый шаблон index.blade.php с помощью текстового редактора или редактора кода:

nano resources/views/index.blade.php

Помимо стандартного кода HTML, который создает структуру страницы и статические элементы (например, заголовки), вам нужно будет отобразить на странице список ссылок, которые были переданы как данные шаблона – это коллекция объектов Link.

В Blade вы можете использовать цикл foreach, чтобы просмотреть ссылки в коллекции и вывести их на страницу:

@foreach ($links as $link)

    <li>

        <a href="{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a>

    </li>

@endforeach

Добавьте следующий код в файл index.blade.php. Если хотите, укажите свой заголовок и дополнительную информацию на странице:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>My Awesome Links</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">

</head>

<body>

<section class="section">

    <div class="container">

        <h1 class="title">

            Check out my awesome links

        </h1>

        <p class="subtitle">

            You can include a little description here.

        </p>

        <ul>

            @foreach ($links as $link)

                <li>

                    <a href="{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a>

                </li>

            @endforeach

        </ul>

    </div>

</section>

</body>

</html>

Сохраните файл, когда закончите.

Теперь перейдите в браузер, чтобы проверить результаты. У вас должна быть возможность получить доступ к своему приложению через порт 8000 локального хоста (localhost) или IP-адрес удаленного сервера, если вы используете удаленный сервер в качестве платформы разработки.

http://localhost:8000

Вы увидите ​​страницу, на которой будут показаны все ссылки, хранящиеся в вашей базе данных, начиная с новейших.

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

Оформление и пользовательская настройка шаблона (опционально)

Теперь, когда базовый шаблон готов, вы можете включить в свое приложение несколько дополнительных настроек CSS для стилизации страницы с помощью функций Bulma и пользовательских стилей.

Чтобы придать этой странице новый вид, начнем с настройки ее фона. В этом руководстве мы будем использовать обои с облаками, но вы, конечно, можете использовать любое другое изображение (к примеру, можно выбрать что-то на unsplash). Вам потребуется URL-адрес изображения; мы будем использовать его для настройки CSS свойства background нашего html-элемента. Также можно настроить другие свойства, чтобы выровнять изображение по центру.

html {

            background: url("https://img.freepik.com/free-photo/fantastic-cloudscape_1232-490.jpg?size=626&ext=jpg") no-repeat center center fixed;

            -webkit-background-size: cover;

            -moz-background-size: cover;

            -o-background-size: cover;

            background-size: cover;

        }

Чтобы оформить список ссылок, мы можем заменить элементы <li> для каждой ссылки компонентами box и включить URL-адрес ссылки в качестве абзаца под описанием.

@foreach ($links as $link)

    <div class="box link">

        <h3><a href="{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a></h3>

        <p>{{$link->url}}</p>

    </div>

@endforeach

Теперь можно создать пару дополнительных CSS-стилей, чтобы настроить внешний вид текста.

div.link h3 {

    font-size: large;

}

div.link p {

    font-size: small;

    color: #718096;

}

Следующий шаблон Blade содержит все предлагаемые выше изменения. Замените текущее содержимое файла index.blade.php на такой код:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>My Awesome Links</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">

    <style>

        html {

            background: url("https://img.freepik.com/free-photo/fantastic-cloudscape_1232-490.jpg?size=626&ext=jpg") no-repeat center center fixed;

            -webkit-background-size: cover;

            -moz-background-size: cover;

            -o-background-size: cover;

            background-size: cover;

        }

        div.link h3 {

            font-size: large;

        }

        div.link p {

            font-size: small;

            color: #718096;

        }

    </style>

</head>

<body>

<section class="section">

    <div class="container">

        <h1 class="title">

            Check out my awesome links

        </h1>

        <p class="subtitle">

            You can include a little description here.

        </p>

        <section class="links">

            @foreach ($links as $link)

                <div class="box link">

                    <h3><a href="{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a></h3>

                    <p>{{$link->url}}</p>

                </div>

            @endforeach

        </section>

    </div>

</section>

</body>

</html>

Сохраните и закройте свой файл.

Перезагрузите страницу, чтобы проверить, как она отображается.

Заключение

В этой серии мануалов вы научились использовать связку Laravel+PHP+Docker Compose для создания простой страницы со ссылками. Также мы применили модель Eloquent, создали команды Artisan оформили страницу с помощью Bulma и CSS-стилей.