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-стилей.