Пользовательский интерфейс
Интерфейс приложения
Для удобства понимания информации пользователем, весь функционал программы привязан к карте Москвы, взятой из Яндекса. Интерфейс позволяет просматривать расположения образовательных центров, места жительства клиентов, число распределенных и нераспределенных учеников в каждом ОЦ. Также пользователю в любой момент доступна статистика, которая содержит в себе информацию о текущем значении прогнозируемой прибыли, предыдущем её значении, числе распределенных и нераспределенных клиентов, числе набранных групп, числе нераспределенных клиентов, записанных на конкретный курс.
Интерфейс веб-приложения
Мастер - страницы
Пользовательский интерфейс веб-приложения был построен на использовании мастер-страниц, что позволило нам достичь разделения между разметкой верстки и разметкой содержимого нашего сайта. Используя мастер-страницы, мы можем с легкостью обновить весь сайт иным стилем. Мастер-страница, которую будут видеть пользователи сайта, представлена на рисунке .
Рисунок 10. Мастер-страница
Слева в верхнем углу расположено название организации, которое является также ссылкой на главную страницу сайта. Правее, также в верхней панели, находится имя пользователя (если пользователь авторизован). Также имеется меню, позволяющее быстро находить веб-страницу с необходимой информацией (рис.).
Рисунок 11. Меню сайта
Аутентификация и авторизация
Взаимодействие пользователя с сайтом начинается с авторизации. Без авторизации информация будет недоступна, но при этом пользователь обязательно увидит инструкции о возможных дальнейших действиях. Страница с авторизацией представлена на рисунке .
Рисунок 12. Страница с авторизацией
Если пользователь не пройдет авторизацию, он будет проинформирован.
Рисунок 13. Результат неверной авторизации
Регистрация нового пользователя
Если пользователь не имеет учетной записи, он может зарегистрироваться в системе. Но при этом, ему не будет предоставлено прав доступа к ресурсам до тех пор, пока администратор сайта не подтвердит регистрацию и не присвоит учетной записи необходимые роли. В системе авторизация определена проверкой, назначена ли пользователю определённая роль, имеющая доступ к ресурсам. Таким образом, пользователи с разными ролями видят различную информацию.
Зарегистрироваться в системе пользователь может, используя следующую форму регистрации:
Рисунок 14. Регистрация нового пользователя
Восстановление пароля
Если пользователь забыл пароль, он может пройти процедуру восстановления пароля. Тогда пользователю предлагается ввести ответ на секретный вопрос, который он указывал при регистрации. Если ответ был введён верно, то новый пароль будет отправлен пользователю на его почту. Эти шаги представлены на рисунках , и
Рисунок 15. Восстановление пароля. Шаг 1
Рисунок 16. Восстановление пароля. Шаг 2
Рисунок 17. Восстановление пароля. Шаг 3
Письмо с новым паролем, которое придет пользователю на почту, будет иметь вид:
Рисунок 18. Письмо с новым паролем
Главная страница сайта
После прохождения авторизации, пользователь будет сразу же перенаправлен на главную страницу сайта, где будет представлена информация о правах пользователя на доступ и на модификацию информации в базе данных.
Рисунок 19. Главная страница
Веб-страница “Клиенты”
Рассмотрим страницу “Клиенты” (рисунок ). Здесь предусмотрен поиск по фамилии, имени и отчеству. Важно заметить, что пользователи с разными ролями видят различную информацию. Так, например, администратор сайта будет видеть только колонку с ID клиента и ФИО ученика.
Рисунок 20. Веб-страница "Клиенты"
Веб-страница “Преподаватели”
Аналогично будет выглядеть и страница с информацией о преподавателях. Только если у клиента преподаватель может видеть практически все поля, то, например, у своих коллег он сможет увидеть только их имена, телефоны и место работы (Рисунок ). Если эту страницу будут просматривать клиенты, они видят дополнительно стаж преподавателя и его профилирующий предмет.
Рисунок 21. Веб-страница "Преподаватели"
Веб-страница “Платежи”
Если преподаватель попробует перейти по вкладке Платежи, то он будет перенаправлен на страницу с сообщением об ошибке (Рисунок ). Если же страницу будет просматривать контент-менеджер, то он сможет увидеть всю информацию об ученике, а также все сделанные им платежи, введя в поле ID ученика.
Рисунок 22. Попытка преподавателем просмотреть страницу платежей
Рисунок 23. Веб-страница "Платежи"
При этом данная веб-страница создана с использованием веб-технологии AJAX, что позволяет не загружать всю страницу с сервера каждый раз для получения необходимой информации. Будут загружаться только необходимые поля, что значительно снижает нагрузку на сервер.
Веб-страница “Курсы”
Следующая страница, к которой каждый может получить доступ, содержит информацию о курсах. Пользователь сайта может найти и выбрать подходящий курс, пользуясь поисковым фильтром на название курса, на название предмета, а так же введя класс, в котором учится будущий клиент.
Рисунок 24. Веб-страница "Курсы"
Панель администратора
Ни в одной из вышеизложенных страниц не предусмотрено изменение данных, так как они рассчитаны на получение информации, а не на модификацию. Для большей безопасности изменение данных производится в панели администратора. В панель администратора можно перейти по ссылке
http://localhost:4537/Intellect%20site/admin/
На каждой странице предусмотрено изменение и удаление информации. Например, веб-страница “Курсы” при модификации информации будет иметь следующий вид:
Рисунок 25. Панель администратора