43
«Подтверждение пароля» должны совпадать, а чекбокс с согласием на хранение и
обработку персональных данных должен быть включен (accepted).
Рисунок 5. Фрагмент кода, отвечающего за валидацию пользовательского ввода
При введении данных, не соответствующих указанным выше правилам,
либо при отсутствии данных в обязательных полях на экран выводится ошибка,
а поле (поля) с некорректными данными подсвечивается красной рамкой
(рисунок 6).
Рисунок 6. Валидация пользовательского ввода
Похожая валидация предусмотрена и для формы аутентификации, где
пользователь вводит e-mail и пароль. При введении некорректных или
ошибочных данных пользователю выводится сообщение «Ошибка
аутентификации», при этом не сообщается, что именно введено неверно: логин
или пароль. Это сделано для того, чтобы при попытке взлома не предоставлять
злоумышленнику лишнюю информацию.
Страница корзины (рисунок 7) содержит табличную часть, включающую
изображение продукта, описание, цену, количество и итоговую сумму.
44
Рисунок 7. Корзина
При нажатии кнопки «Оформить заказ» происходит переход на страницу
оформления заказа. Поскольку оформление заказа доступно только
зарегистрированным пользователям, то при нажатии на кнопку «Оформить
заказ» незарегистрированный пользователь будет переведен на страницу с
формой быстрой регистрацией (это реализовано на уровне middleware('auth') в
файле с прописанными маршрутами сайта). После регистрации пользователь
будет автоматически перенаправлен в корзину для продолжения оформления
заказа.
Форма оформления заказа достаточно проста и состоит всего из трех
полей: дата готовности («К какой дате испечь?»), телефон, адрес доставки.
Причем обязательным является только поле «К какой дате испечь?».
Объясняется это тем, что торты не выпекаются заранее и их приготовление
начинается только после получения заказа. Соответственно, заказать
изготовление торта можно на завтра, либо на более поздние даты. Поэтому поле
«К какой дате испечь?» не должно допускать введения текущей либо прошедшей
даты. Это также обеспечивается функцией валидации пользовательского ввода в
контроллере OrderController:
45
$this->validate($request, [
'shipdate' => 'required|date|after:today'
]);
Поле «Телефон» заполняется пользователем по желанию. Если
пользователь оставляет поле пустым, то связь с ним будет вестись по адресу e-
mail, указанному в момент регистрации.
Адрес доставки — также необязательное поле. Плэйсхолдер данного поля
сообщает пользователю, что если доставка не нужна, то нужно оставить поле
пустым. В этом случае способ доставки будет оформлен как самовывоз.
После успешного оформления заказа пользователь видит сообщение
«Спасибо за заказ», а также получает письмо-подверждение на e-mail. Данное
письмо содержит всю информацию о заказе и контактные данные компании.
Менеджер также получает письмо-извещение о заказе, в котором содержится
информация о заказе и данные для связи с покупателем. Отправка писем
реализована при помощи событий и слушателей, аналогично реализации
отправки писем-подтверждений при размещении на сайте сообщения обратной
связи, которая была описана выше.
В верхнем меню навигации рядом со значком корзины расположен значок
перехода в личный кабинет. В личном кабинете пользователь имеет возможность
просматривать свои заказы, а также отменять их. Отмена заказа пользователем
сопровождается отправкой соответствующих писем-подтверждений покупателю
и менеджеру.
3.1.2 Административная часть сайта
Административная часть сайта (рисунок 8) отличается от клиентской боковым
меню и основным содержанием.
46
Рисунок 8. Административная часть сайта
Также для удобства администратора несколько изменена цветовая гамма,
изменен цвет панели навигации.
Боковое меню административной части включает разделы: «Заказы»,
«Продукция», «Категории», «Покупатели», «Пользователи» и «Настройки».
Каждый раздел представляет собой табличную часть, подобную той, что
представлена на рисунке 8.
На данном рисунке представлен раздел «Заказы», и каждая строка таблицы
соответствует отдельному заказу. Администратор может редактировать заказ
(для этого предусмотрена специальная форма), менять статус заказа и удалять
заказ. При нажатии на кнопку «Удалить» отрабатывает простой скрипт
onclick="return confirm('Вы уверены?');", выводящий alert-сообщение для
подтверждения удаления. Это позволяет избежать ошибочного, случайного
удаления.
В панели администратора также доступна кнопка «Добавить заказ»,
позволяющая администратору или менеджеру добавить новый заказ вручную.
Такая необходимость иногда возникает при заказе по телефону.
Аналогично устроены и остальные разделы административной части
сайта. Администратор имеет возможность просматривать, редактировать,
удалять и создавать новые сущности. Эти возможности заложены в методах
соответствующих контроллеров (так называемые CRUD-операции (от
47
английского create, read, update delete - «создавать, читать, обновлять, удалять»)
— акроним, обозначающий четыре базовые функции, используемые при работе
с хранилищами данных).
Для обеспечения удобного администрирования в таблице имеются
перекрестные внутренние ссылки (на рисунке 8 это ссылки в столбцах «Клиент»
и «Позиции», они выделены зеленым цветом). Данные ссылки позволяют
просмотреть детальную информацию о соответствующем объекте. В частности,
при нажатии на ссылку «Позиции» открывается страница для просмотра
детализированной информации о заказе и входящих в него товарах (рисунок 9).
Рисунок 9. Страница детализации заказа в административной части интернет-магазина
Аналогичная система внутренних перекрестных ссылок позволяет
менеджеру и администратору из раздела покупатели просматривать
информацию о заказах конкретного покупателя (рисунок 10). Так, при клике на
ссылку «Заказы» в строке конкретного покупателя открывается окно со списком
заказов выбранного клиента. Из этого окна, в свою очередь, кликнув на зеленую
ссылку нужного заказа, можно увидеть всю информацию данного конкретного
заказа.
48
Рисунок 10. Просмотр заказов по выбранному покупателю из административной части
интернет-магазина
Раздел «Настройки» бокового меню административной части позволяет
администратору через специальную форму редактирования изменять основную
информацию о сайте: название сайта, название компании, описание, телефон,
адрес, email компании и отдельно email менеджера, URL сайта. Это позволяет
при необходимости внести изменения всего один раз, и они будут динамически
выведены в различных частях сайта.
3.2 Верстка страниц
За основу был взят типовой шаблон, поддерживающий сетку Bootstrap,
который в процессе адаптировался под собственные нужды. Было изменено
цветовое оформление, встроены собственные изображения, на некоторых
страницах перестроена сетка.
Поскольку Laravel использует концепцию MVС, то код проекта, HTML-
код страниц, стили CSS, JS - разделены в отдельные директории. За реализацию
компонента представления (View) отвечает шаблонизатор.
Фреймворк Laravel использует собственный шаблонизатор Blade,
позволяющий отделить верстку от кода PHP. Blade имеет в основе концепции
наследования шаблонов (директива extends), секции (section) и включение
(include) подшаблонов. [34]
49
Все шаблоны Blade имеют расширение .blade.php и располагаются в папке
\resources\views. В качестве разделителя каталогов, при указании пути к шаблону
принято использовать точку, но допускается и символ слеш. В зависимости от
архитектуры проекта папка views может содержать вложенные папки. В
частности, в данном проекте имеются вложенные папки, представленные на
рисунке 11.
Рисунок 11. Структура папки с шаблонами views
В папках admin и client собраны соответственно шаблоны,
представляющие административную и клиентскую части. В папке
errors - шаблоны для представления ошибок 404 и 500. В папке auth - шаблон для
отражения страницы входа на сайт. В папке mails - шаблоны электронных писем.
В папке pages собраны шаблоны основных страниц интернет-магазина, а в
parts - части шаблонов, которые повторно используются (такие как header,
footer). В папке widgets собраны шаблоны виджетов и боковых меню (боковое
меню клиентской и административной частей, виджет оформления
индивидуального заказа и другие).
Фрагмент кода, отвечающий за рендеринг шаблона и передачу переменных
из контроллера SignupController (отвечает за регистрацию новых пользователей)
представлен на рисунке 12:
Рисунок 12. Рендеринг шаблона с передачей в него переменных
50
Как видно на рисунке 12, метод showSignupForm (отвечает за показ
пользователю формы регистрации) возвращает представление
«client.layouts.secondary» и передает ему массив с переменными page,title и msg.
Рассмотрим подробнее представление «client.layouts.secondary», чтобы
наглядно продемонстрировать суть наследования в шаблонизаторе Blade. Код
шаблона «client.layouts.secondary» довольно короткий:
@extends('client.layouts.one-column')
@section('center-column')
@include($page)
@endsection
Директива @extends('client.layouts.one-column') указывает на то, что данный
шаблон наследуется от шаблона one-column.blade.php, который располагается в
папке layouts, которая, в свою очередь, расположена в \resources\views\client. На
рисунке 13 представлен код шаблона one-column.blade.php:
Рисунок 13. Код шаблона one-column.blade.php
Как видно на рисунке 13, данный шаблон включает пять разделов (section):
header, поисковая панель, секция с основным одноколоночным контентом и две
секции для footer. Внутри секций с помощью директивы @include подключены
соответствующие фрагменты шаблонов из описанной выше папки parts. И, что
51
следует отметить особо, верхняя строка @extends('client.layouts.base') вновь
указывает на наследование, уже от базового шаблона base.blade.php, который
является первоначальным.
Механизм наследования в Blade позволяет гибко строить представления
страниц, изменять сетку, наполнение виджетами. В частности, папка client,
хранящая представления для клиентской части интернет-магазина, содержит
девять различных шаблонов-layouts: начиная от базового base.blade.php и
продолжая одноколоночными и двухколоночными, с правым и левым
расположением боковой колонки.
Возможности шаблонизатора Blade позволяют выводить в шаблонах
переменные PHP, использовать циклы и условия. Представленный ниже
фрагмент кода отвечает за вывод категорий в административной части в виде
таблицы.
@forelse($categories as $category)
<tr>
<td> {{ $category->id }} </td>
<td> {{ $category->name }} </td>
<td> {{ $category->slug }} </td>
<td> <a
href="admin/categories/edit/{{$category->id}}">Редактировать</a></td>
<td> <a href="admin/categories/delete/{{$category->id}}" onclick="return
confirm('Вы уверены?');">Удалить</a></td>
</tr>
@empty
Список категорий пуст
@endforelse
@forelse, @empty и @endforelse отвечают за формирование цикла foreach в
шаблоне (@forelse — начало цикла, @empty — формирует ответ в случае, если
перебираемый массив с категориями пуст, @endforelse — конец цикла). Также в
данном фрагменте можно заметить вывод переменных в шаблоне, в частности
52
{{ $category->name }} - на каждой итерации цикла выводит название категории
в тэгах <td> </td>, формируя тем самым строки таблицы в столбце «Название».
На экране администратора данная страница выглядит, как представлено на
рисунке 14.
Рисунок 14. Страница со списком категорий в административной части сайта
Говоря о верстке страниц, стоит также отметить, что интернет-магазин
TheCake, как любой современный сайт, имеет адаптивную верстку. Адаптивная
верстка выполнена с применением медиа-запросов (media queries). Медиа-
запросы предписывают браузеру представлять сайт в наиболее подходящем
конкретному устройству виде. Достигается это с помощью задания
определенных наборов правил в файле CSS. Это предоставляет возможность
задавать стили для устройств по их максимальной/минимальной ширине и
высоте. [13]
Выше, на рисунке 3, приводилось изображение страницы «Ассортимент»
с карточками товаров в формате полноэкранного просмотра. Та же страница
«Ассортимент» при просмотре с планшета будет выглядеть несколько иначе
(рисунок 15).