71
Начало
Создание экземпляра класса
LoginFormType
Проверка наличия у посетителя
активной сессии авторизации
Переадресация на
главную страницу
панели
администрации
(маршрут «/admin»)
Сессия имеется
Сессии не имеется
Переадресация на главную страницу панели
администрации (маршрут «/admin»)
Конец
Форма была отправлена?
Да
Отправка запроса к модели
данных на выборку
информации о пользователе,
чей логин совпадает с
введенным
Создание сессии авторизации
Создание представления на
основе шаблона
login.html.twig
Отображение страницы
авторизации пользователю
НЕТ
Пароль верный?
ДА
НЕТ
Отображение
сообщения об ошибке
Переадресация на главную
страницу витрины (маршрут
«/»)
Пользователь имеет роль
«Сотрудник»?
ДА
НЕТ
Рисунок 21 – Алгоритм работы метода loginAction
После успешного прохождения авторизации, пользователю
отображается либо главная страница панели администрирования (если у
пользователя имеется соответствующая роль), либо главная страница сайта
(если такой роли не имеется).
Методы остальных контроллеров работают аналогичным образом.
72
Для реализации интерактивных элементов пользовательского
интерфейса используются ajax-запросы.
AJAX – это аббревиатура, которая означает Asynchronous Javascript and
XML. При использовании AJAX нет необходимости обновлять каждый раз
всю страницу, так как обновляется только ее конкретная часть.
Обобщим достоинства AJAX:
возможность создания удобного Web-интерфейса;
активное взаимодействие с пользователем;
частичная перезагрузка страницы, вместо полной;
удобство использования.
Для более удобного написания программного кода ajax-запросов была
подключена библиотека jQuery.
jQuery – это JavaScript-библиотека, фокусирующаяся на
взаимодействии JavaScript, HTML и CSS.
С помощью jQuery можно выполнять следующие операции:
обращаться к любому элементу DOM (объектной модели html-
документа) и не только обращаться, но и манипулировать ими;
работать с событиями;
легко осуществлять различные визуальные эффекты;
работать с AJAX.
Перечисленные выше функции можно реализовать и с помощью
обычного Javascript-кода, однако использование библиотеки значительно
упрощает написание программного кода, а также упрощает его структуру и
делает более понятным для понимания.
В данном интернет магазине Ajax используется для того, чтобы
загружать данные из базы данных в зависимости от указанного
пользователем значения. Например, при добавлении товара в комплект в
выпадающем списке необходимо выбрать категорию товара. После выбора
какого-либо значения в выпадающем списке запускается обработчик
73
соответствующего события, который отправляет ajax-запрос и обрабатывает
результат его выполнения.
Результатом обработки такого запроса является json-массив со списком
товаров, которые принадлежат выбранной категории. После его получения
Javascript-код обновляет содержимое второго выпадающего списка – списка
товаров. То есть при выборе какой-то категории в списке категорий товаров
во втором списке (списке товаров) отображаются только те товары, которые
относятся к данной категории.
Исходный код всех программных модулей приведен в приложении.
2.4 Контрольный пример реализации проекта и его описание
После перехода на адрес сайта открывается главная страница (Рисунок 22).
Рисунок 22 – Главная страница сайта
В верхней части сайта расположено навигационное меню с логотипом
компании и её основным телефоном, а также быстрыми ссылками на главные
74
разделы сайта: личный кабинет, корзину покупок, оформление заказа. Ниже
расположена панель навигации по основным разделам сайта, еще ниже –
контентная часть.
Контент главной страницы можно разделить натри блока: навигация по
разделам каталога товаров (расположена слева), слайдер с меняющимися
картинками и четырьмя рекомендуемыми товарами. В самой нижней части
сайта находится футер – небольшая панель с навигацией по основным
разделам сайта.
Таким же образом расположены блоки и на всех других страницах
сайта. При заходе в каталог товаров и открытия какой-либо категории
отображаются все товары данной категории, а также список подкатегорий,
если таковые имеются у просматриваемой категории (Рисунок 23).
Рисунок 23 – Страница категории
Добавить в корзину можно прямо со страницы категории, нажав на
соответствующую кнопку. Тогда в верхней панели сайта отображается
содержимое корзины (Рисунок 24).
75
Рисунок 24 – Отображение содержимого корзины в верхней
панели
При клике мышкой на товар открывается страница просмотра данных
товара (Рисунок 25).
Рисунок 25 – Страница просмотра данных товара
На данной странице можно ознакомится с фотографиями товара,
прочитать его описание, комментарии других пользователей, оставить свой
собственный комментарий (Рисунок 26).
76
Рисунок 26 – Просмотр комментариев к товару
Для того, чтобы оформить заказ на покупку товаров, добавленных в
корзину, необходимо нажать на ссылку оформление заказа в шапке сайта,
либо сначала перейти в корзину, а уже в ней нажать кнопку оформления
заказа. На странице просмотра корзины покупок можно изменить количество
покупаемого товара или вовсе удалить какие-то товарные позиции (Рисунок
27).
Рисунок 27 – Корзина покупок
77
Т.к. для оформления заказа необходимо быть авторизованным на сайте,
то после нажатия кнопки «Оформление заказ» отобразится форма входа для
на сайт (Рисунок 28).
Рисунок 28 – Форма входа на сайт
На данной форме имеется ссылка на форму регистрации (для новых
покупателей) (Рисунок 29).
Рисунок 29 – Форма регистрации на сайте
78
После авторизации на сайте можно продолжить оформление заказа.
Откроется форма, с помощью которой можно оформить заказ: указать
параметры доставки, если такие требуются (Рисунок 30).
Рисунок 30 – Форма оформления заказа
Также на сайте имеется раздел для просмотра готовых ремонтов
ванных комнат. Для их просмотра необходимо нажать на кнопку
«Комплекты» в главном меню сайта. Отроется список всех комплектов,
которые были составлены сотрудниками компании (Рисунок 31).
Рисунок 31 – Список комплектов
79
При щелчке на какой-либо комплект откроется страница с описанием
комплекта. На данной странице можно почитать текстовое описание,
посмотреть дополнительные фотографии (Рисунок 32).
Рисунок 32 – Информация о комплекте
Также можно ознакомится со списком предметов, входящих в
комплект. Предметы можно добавить в корзину прямо со страницы описания
комплекта. (Рисунок 33).
80
Рисунок 33 – Список предметов комплекта
Все оформленные заказы пользователь может посмотреть с помощью
пункта меню «Личный кабинет», выбрав пункт «Мои заказы», откроется
список заказов пользователя (Рисунок 34).
Рисунок 34 – Страница «Мои заказы»
Если авторизованный пользователь имеет роли «Сотрудник», то в этом
же пункте меню имеется подпункт «Управление» (Рисунок 35). Пункт
«Профиль» имеется у всех пользователей.