Особенности верстки проекта
Одной из особенностей верстки проекта является использование технологии Flexbox, которая представляет собой набор CSS-свойств, позволяющих создавать адаптивные макеты для веб-страниц.
Использование Flexbox решает проблему переполнения контента. При использовании свойства flex-wrap элементы переносятся на новую строку, что удобно для разделов, где часто добавляются новые элементы, как раздел со списком тестов на главной странице и в личном кабинете пользователя.
В качестве примера кода с использованием технологии Flexbox на рисунке 3.19 представлен код основной части страницы «Личный кабинет».
Рисунок 3.19 — Код основного части страницы «Личный кабинет»
Еще одной важной особенность являются анимации кнопок, использованные для придания интерфейсу большей интерактивности. Пример анимированный кнопки представлен на рисунке 3.20.
Рисунок 3.20 — Пример анимированной кнопки
Страницы сайта после того, как браузер интерпретирует их HTML-файлы, выглядят так, как показано на рисунках с 3.21 по 3.26.
Рисунок 3.21 — Главная страница сайта
Рисунок 3.22 — Страница конструктора тестов
Рисунок 3.23 — Страница личного кабинета
Рисунок 3.24 — Страница прохождения теста
Рисунок 3.25 — Страница авторизации
Рисунок 3.26 — Страница регистрации
Тестирование веб-ресурса
Составим список тест-кейсов, основываясь разработанных ранее вариантах использования веб-ресурса, отраженных в диаграмме прецедентов и требований к ресурсу, выделенных в техническом задании.
Список проверяемых событий :
Регистрация;
Авторизация;
Поиск тест по названию;
Настройка фильтрации тестов по категориям;
Использование функцию «Случайный тест»;
Прохождение теста;
Создание теста;
Выставление тесту оценки;
Удаление собственного теста;
Выход из профиля.
Проверка регистрации и авторизации
Находясь на главной странице нажимаем на кнопку «Войти в личный кабинет», переходим на страницу авторизации. Нажимаем на ссылку «У меня нет аккаунта» и попадаем на страницу регистрации. Вводим логин и почту ранее зарегистрированного пользователя и нажимаем кнопку «Войти». Видим сообщение «Данный пользователь уже зарегистрирован». Сообщение представлено на рисунке 3.27.
Рисунок 3.27 — Сообщение об ошибке
Теперь введем логин и почту, не используемые ранее. После нажатия кнопки «Войти» попадаем обратно на страницу авторизации с полями, автоматически заполненными введенными ранее данными. Нажимаем кнопку «Войти» и попадаем на главную страницу сайта. Кнопка «Войти в личный кабинет» в шапке сайта изменилась на ссылку «Личный кабинет». Главная страница после авторизации изображена на рисунке 3.28.
Рисунок 3.28 — Главная страница после авторизации
Проверка функции поиска теста по названию
Находясь на главной странице в поисковой строке вводим слово «Ретривер» и нажимаем кнопку «Найти». Страница обновляется и в списке тестов остается только тест, содержащий введенное слово. Скриншот главной страницы после нажатия на кнопку «Найти» представлен на рисунке 3.29.
Рисунок 3.29 — Поиск теста по названию
Проверка фильтрации тестов по категориям
Находясь на главной странице в разделе категорий выбираем «Психологические» и нажимаем кнопку «Найти». Страница обновляется и в списке тестов остается только тесты, принадлежащие к выбранной категории. Скриншот главной страницы после нажатия на кнопку «Найти» представлен на рисунке 3.30.
Рисунок 3.30 — Фильтрация тестов по категориям
Проверка функции «Случайный тест»
Находясь на главной странице нажимаем на кнопку «Случайный тест». Страница обновляется и в списке тестов отображается только один случайный тест. Скриншот главной страницы после нажатия на кнопку «Случайный тест» представлен на рисунке 3.31.
Рисунок 3.31 — Применение функции «Случайный тест»
Проверка возможности прохождения теста
Находясь на главной странице выбираем любой тест и переходим на его страницу. Отмечаем ответы и нажимаем кнопку «Получить результат». внизу страницы выводится полученный результат. Скриншот результата представлен на рисунке 3.32.
Рисунок 3.32 — Вывод результата
Проверка конструктора тестов
Находясь на главной
странице нажимаем на кнопку «Создать
свой тест» и переходим в конструктор
тестов. Заполняем поля «Название теста»
и «Описание теста», нажимаем на кнопку
«Выберите файл». Открывается окно
выбора изображения, представленное на
рисунке 3.33.
Рисунок 3.33 — Окно выбора изображения
Выбираем картинку и нажимаем «Открыть». После этого название выбранного изображения отображается в поле «Выберите фото». В выпадающем списке выбираем одну из категорий. Нажимаем на кнопку «Добавить результат». Появляется форма для создания результата.
Рисунок 3.34 — Форма дня создания результата
Затем нажимаем на кнопку «Добавить вопрос». Ниже появляется форма для создания вопроса.
Результат 3.35 — Форма для создания вопроса
После того как мы добавили все запланированные результаты и вопросы, нажимаем на кнопку «Сохранить». Затем сайт автоматически вернёт нас на главную страницу, где в списке тестов первым будет отображаться только что созданный нами тест.
Проверка функции оценивания тестов
Находясь на главной странице выбираем тест и нажимаем на кнопку «Лайка» или «Дизлайка». Цвет кнопки и счетчик оценки изменяется.
Рисунок 3.36 — Оцененные тесты
Проверка возможности удаления собственного теста
Переходим в личный кабинет. Здесь отображается список созданных нами тестов. Выбираем нужный тест и нажимаем на кнопку «Удалить». Тест удален и больше не отображается на сайте.
Рисунок 3.37 — Личный кабинет
Проверка возможности выхода из профиля
Переходим в личный кабинет. Здесь находим кнопку «Выйти» и нажимаем ее. Попадаем на страницу авторизации. Нажимаем на логотип, чтоб перейти на главную страницу. Видим кнопку «Войти в личный кабинет» вместо ссылки на личный кабинет.
Рисунок 3.38 — Главная страница после выхода из профиля
Для наглядности составим таблицу с результатами прохождения тестирования.
Таблица 3.12 — Чек-лист тестирования
Проверяемые функции |
Ожидаемый результат |
Фактический результат |
Регистрация |
Пользователь создал новую учетную запись и получил права авторизованного пользователя |
Соответствует ожидаемому |
Авторизация |
Пользователь вошел в свою учетную запись и получил права авторизованного пользователя |
Соответствует ожидаемому |
Поиск теста по названию |
Выведен список тестов, содержащих в названии искомые слова |
Соответствует ожидаемому |
Фильтрация тестов по категориям |
Выведен список тестов, принадлежащих к выбранной категории |
Соответствует ожидаемому |
Продолжение таблицы 3.12 — Чек-лист тестирования
Проверяемые функции |
Ожидаемый результат |
Фактический результат |
Функция «Случайный тест» |
Выведен один из тестов, выбранный случайным образом |
Соответствует ожидаемому |
Прохождение теста |
Пользователь получил результат |
Соответствует ожидаемому |
Создание теста |
Тест появился в списке тестов на сайте и в личном кабинете пользователя |
Соответствует ожидаемому |
Оценивание теста |
Счетчик лайков/дизлайков изменился |
Соответствует ожидаемому |
Удаление теста |
Тест больше не отображается в списке на сайте и в личном кабинете |
Соответствует ожидаемому |
Выход из профиля |
Пользователь лишился прав авторизованного пользователя и может заново пройти авторизацию или зарегистрировать новый профиль |
Соответствует ожидаемому |
Вывод
В данном разделе были подробно рассмотрены этапы создания базы данных, разработки дизайна сайта и реализации клиентской и серверной частей веб-приложения и проведено тестирование.
В процессе проектирования базы данных была выбрана модель данных, выделены основные сущности, определены их атрибуты и связи между ними. Проектирование включало построение как логической, так и физической моделей базы данных.
Разработка дизайна сайта включала создание макетов страниц и продумывание цветовой гаммы, чтобы сайт выглядел современно и был удобен для пользователей, а также была продумана информационная архитектура сайта.
Для реализации клиентской и серверной частей веб-приложения была выбрана клиент-серверная архитектура, что позволяет централизовать вычисления и хранение данных на сервере, снижая требования к клиентским устройствам и повышая безопасность данных. Взаимодействие между клиентской и серверной частями осуществляется с помощью REST API. Данные передаются в формате JSON, что упрощает их обработку и интеграцию.
После реализации проекта было проведено функциональное тестирование веб-ресурса.
Таким образом, третий раздел описывает комплексный подход к проектированию и разработке веб-ресурса "ТестРум", охватывая все ключевые аспекты создания функционального, удобного и безопасного веб-приложения.