Руководство пользователя
Назначение программы
Данное веб приложение предназначено для автоматизации регистрации студентов на секцию. А также управлением данных секций и преподавателей.
Основные цели и функции приложения включают:
Регистрация студентов: студент регистрируется на доступную секцию и ее оплачивает, создавая учетную запись.
Просмотр информации в личном кабинете о данных секции.
Преподаватель или студент могут редактировать контактную информацию.
Администратор может заносить данные преподавателя, создавая его учетную запись. Может также удалять или редактировать его данные. При добавлении преподавателя назначаем ему секцию.
Администратор заносит необходимые данные для новой секции. Также может их редактировать или удалять.
Основная цель это все же корректная регистрация на секцию и управление данными, которые используются при регистрации. Чтобы бал актуальный список преподавателей и доступных секций. Добавлена возможность входа на личную страницу, изменение там личных данных.
Описание интерфейса
Интерфейс веб-приложения должен быть интуитивно понятным и удобным для пользователя. Он обеспечивает легкий доступ к информации о секциях, записям на занятия и детальному просмотру доступных услуг.
Навигация в «шапке» страницы: В шапке страницы расположены кнопки, позволяющие пользователю перейти к форме авторизации в личный кабинет. Это делает процесс входа в систему быстрым и удобным.
Главная страница:
Путь пользователя начинается с главной
страницы. Сразу расположена кнопка
регистрации, нажав на которую, пользователь
должен перейти сразу к форме записи на
спортивную секцию, если он уже знаком
с информацией о доступных секциях
(см. рисунок 2).
Рисунок 2 "Шапка" сайта и начало главной страницы
Далее на Главной страницы должны быть размещены карточки секций с необходимой информацией для студента, чтобы соореинтироваться в выборе подходящей секции. Обязательно должно быть указано свободное количество мест у секции. Это обязательно должно отображаться , чтобы пользователь понял на какие дополнительные занятия можно записаться, а на какие места закончились(см. рисунок 3).
Рисунок 3 Доступные секции для записи
Следом должна находиться форма регистрации с обязательными поля студента: имя, фамилия, почта, пароль, группа, институт, выбранная секция из доступных и сумма оплаты. Поля должны быть все обязательными, и в списах выбора секции, ученик не должен иметь доступ к выбору секции у которой свободных мест нет. Должна быть асинхронная проверка на сущетсвование уже в базе данных такого пользователя по почте. И все поля должны быть валидными. Пароль должен состоять из 8 символов. Обязательно в пароле должны быть заглавные и строчные латинские символы, специальные символы и цифры. Если форма валидна, то пользователь должен нажать на кнопку оплаты. Пользователь сначала записывается на секцию и создает учетную запись одновременно, потому что главная его цель это регистрация на занятие. Если бы сначала он регистрировался, а потом записывался на секцию, то есть вероятность что у нас было бы много недействительных пользователей. При совершенном действии у выбранной секции занимается место для данного пользователя на 60 секунд, чтобы он мог оплатить. Сколько время осталось для оплаты пользователю должно отображаться, чтобы он мог соориентироваться в дальнейших действиях. Это улучшит пользовательский опыт.если пользователь оплатил место секции занято и отображаем пользователю сообщение, что он успешно зарегистрировался и возвращаем форму в исходное состояние. Если пользователь не оплатил, значит это забронированное место у секции должно ей вернуться. И поля формы должно возвращаются в исходное состояние в исходное состояние (см рисунок 4, 5, 6, 7, 8)
Рисунок 4 Валидная форма и отображение доступных секций
Теперь покажем работу аренды места.(см рисунок 5)
Рисунок 5 Количество мест на секцию после нажатия на кнопку "Оплатить"
Рисунок 6 Отображение таймера
Рисунок 7 Количество доступных мест на секцию, если не успели оплатить
Рисунок 8 форма регистрации после успешной оплаты
Администратор должен иметь возможность редактировать, удалять, добавлять секции. Для этого у него на странице должна быть соответсвующая форма с полями: название секции, выбор преподавателя из базы данных, время начала и конец занятия, дни для посещения, количество доступных мест на секцию, поле для загрузки фотографии. Добавленная секция должна отображаться автоматически на главной странице и на странице администратора, чтобы понимать, какие секции есть, а какие требуется добавить. Также должны быть кнопки для удаления и изменения секции (см рисунок 9)
Рисунок 9 карточка секции с кнопка удаления и редактирования
При нажатии на «Изменить» для работы с секцией пользователя должен перенестись на форму редактирования. Это сделано для удобства пользователя, чтобы администратору самому не пришлось «скролить» до этой формы. И уже исходные данные должны подставиться в форму, чтобы лучше пользователь смог соориентироваться, что он хочет изменить. Также после нажатия на кнопку «Изменить» на форме должны появится кнопки «Сохранить изменения», «Отмена»(см рисунок 10) Кнопка «Сохранить изменения» вносит изменения в json файл и новые актуальные данные отображаюся у пользователей. При нажатии на кнопку «Отмена» исходные данные возвращаются.
Рисунок 10 Форма редактирования секции
Далее на странице добавления, редактирования, удаления преподавателя тоже должна быть форма. Она должна содержать поля: имя, фамилия, почта, пароль, который при преподаватель может изменить в личном кабинете, также опыт работы и образовательное учреждение. Дальше преподаватель в своем личном кабинете может добавить фотографию и она отобразится на странице администратора. Работа с редактированием и удаление преподавателя построена аналогично с секциями. Только когда мы в редактировании у преподавателя меняем ему секцию. То обязательно у старого преподавателя из его дисциплин данная секцию удаляется и назначается новому. И на карточке преподавателя на странице администратора должны отображаться дисциплины, которые ведет данный преподаватель.(см рисунок 11 и 12)
Рисунок 11 форма добавления учителя в базу данных
Рисунок 12 Карточки преподавателей на страницу администратора
Далее форма авторизации студента, преподавателя, администратора должна быть по почте и паролю. Форма должны быть светлой и понятной что от нее требуют и какие поля. На странице авторизации студента должна быть ссылка на регистрацию. А на странице авторизации для преподавателя и администратора должен быть список для выбора роли.(см рисунок 13,14)
Рисунок 13 Форма авторизации студента
Рисунок 14 Форма авторизации преподавателя и студента
Теперь перейдем к личной страницу преподавателя. На страницу преподавателя должна отображаться личная информация, также секции , которые он ведет, поля для заметок преподавателя, на случай если ему нужно сделать, что-то важное. Также возможность загрузить фотографию. Страница должна быть светлой, расположение значений и кнопок должны располагаться интуитивно понятно. Также пользователь по двойному клику на поля контактной информации мог изменить почту и пароль. Фотография выбрана для примера (см рисунок 15)
Рисунок 15 Личная страница преподавателя
Далее рассмотрит личную страницу студента. Страница студента должны выводить личную информацию. У пользователя должна быть реализована логика изменения пароля и почты по двойному клику на странице студента должно выводиться его расписание секции(см рисунок 16)
Рисунок 16 Личная страница студента