Дипломная (вкр): Разработка личного кабинета преподавателя

В папке assets располагаются все подключаемые файлы, которые составляют клиентскую часть приложения. Структура папки представлена на рисунке 9.

Рисунок 9. Папка assets

Рисунок 10. Папка system

В папку uploads загружаются все публикации преподавателей. Все они сохраняются в папке, название которой id пользователя. Ссылки на файлы хранятся в базе данных.

В папке user (см. рис. 11) расположены все файлы, отвечающие за мое веб-приложение.

В папке views расположены файлы, отвечающие за внешний вид, то есть коды HTML. В папке config находится файл с подключением и настройками базы данных. В папке controller расположены основные функции сайта, которые отвечают за серверную часть проекта.

Рисунок 11. Папка user

Как и для любого веб-сайта, разработку следует начинать с верстки шаблона. Верстка любого макета начинается с языка HTML. После этого мы визуализируем шаблон с помощью каскадных таблиц стилей CSS.

Самая первая страница, представленная на рисунке 12, которую увидит пользователь, будет страница авторизации в системе. Предполагается, что логин и пароль «администратора» будет выдаваться новому администратору, после того как он обратиться к владельцу для получения веб-приложения или после того как зарегистрируется на сайте и скачает архив с системой.

Рисунок 12. Страница авторизации

Код формы авторизации представлен ниже:

Сама форма заключена в два блока, с помощью которых задается задний фон и анимация. Фон задается с помощью класса login-background в CSS.

Задав стилизацию для заднего фона, нужно расположить форму по центру страницы, делается это с помощью следующего кода.

После этого необходимо красиво оформить поля ввода и кнопку.

После авторизации на главной странице всех групп будет отображаться календарь (см. рис. 1). Для групп «преподаватель» и «студент» в календаре будут отмечаться числа, на которые запланирован тест.

Рисунок 13. Главная страница

         
5. Функциональность веб-приложения для группы «администратор»

Далее рассмотрим функциональность для группы «администратор». На странице «уровни пользователей» (см. рис. 14) выводятся все группы пользователей, для которых можно устанавливать уровни доступа. В начале их будет три: главный администратор, преподаватель, студент. Максимальный уровень доступа 100, минимальный 0.

Рисунок 14. Страница "Уровни пользователей"

На странице «доступ для редактирования» настраивается доступ для редактирования таблиц баз данных. Открыть или закрыть доступ к редактированию можно, добавив таблицу и группу пользователя в список. Это можно сделать, нажав на кнопку «Назначить доступ» и выбрать все необходимое из выпадающих списков. Страница показана на рисунке 15.

Рисунок 15. Страница "Доступ для редактирования"

Добавление групп учащихся происходит на одноименной странице, которая представлена на рисунке 16, после нажатия кнопки «добавить группу». Все добавленные группы будут отображены в списке, который выводится из одноименной таблице базы данных. При добавлении группы, в появившемся модальном окне нужно указать наименование группы, год начала обучения и год окончания обучения.

Рисунок 16.Страница "Группы"

На странице «студенты» (см. рис. 17) администратор добавляет студентов в группы. В процессе он заполняет поля: имя, фамилия, отчество, e-mail и пароль, а также выбирает группу из выпадающего списка. Все студенты отображаются в списке на странице, который формируется из одноименной таблицы базы данных.

Преподаватели добавляются аналогичным образом, как и студенты. Только преподаватель не привязывается к какой-либо определенной группе. Все записи хранятся в таблице в базе данных и выводятся списком на страницу. Страница продемонстрирована на рисунке 18.

Рисунок 17. Страница "Студенты"

Рисунок 18. Страница "Преподаватель"

Предметы добавляются на странице «предметы» (см. рис. 19). Чтобы это сделать, нужно просто нажать на кнопку и написать название предмета. Запись автоматически добавится в список и в таблицу базы данных.

Рисунок 19. Страница "Предметы"

На странице «настройка расписания» (см. рис. 20) можно настроить время начала и окончания пар. Эти настройки будут влиять на расписание студентов и преподавателей. Чтобы отредактировать поле необходимо два раза щелкнуть мышкой по пиктограмме карандаша.

Система обмена сообщениями для всех групп одинаковая. Чтобы написать новое сообщение, необходимо выбрать адресат из предыдущих или начать диалог с новым контактом, нажав на соответствующую кнопку «Написать сообщение». Выбрав адресат, появится поле диалога, где будут отображены все сообщения. Написать новое сообщение можно в поле над диалогом. Нажав на кнопку отправить, сообщение моментально отправится адресату. У получателя появится цифра в пункте меню «сообщения», говорящая о том, сколько непрочитанных сообщений ждут его внимания. Пример продемонстрирован на рисунке 21.

Рисунок 20.Страница "Настройка расписания"

Рисунок 21. Страница "Сообщения"

Рисунок 22. Страница "Семестры"

Рисунок 23.Страница "Семестры", добавление семестра

Чтобы составить расписание необходимо нажать на пиктограмму карандаша у определенного семестра. После этого открывается журнал для этого семестра, для определенной группы по определенному предмету. Нажав на кнопку «добавить», можно создать новое занятие, которое будет отображаться в расписании и в журнале. Пример проиллюстрирован на рисунках 24 и 25.

Рисунок 24. Страница "Редактирование журнала"

Рисунок 25. Добавление нового занятия в расписание

Чтобы выйти из аккаунта, необходимо нажать на кнопку «выход», которая располагается на последнем месте в главном меню.

Только что была рассмотрена структура проекта для группы «администратор». Как можно заметить, все необходимые настройки будут выполняться именно отсюда.

          6. Функциональность веб-приложения для группы «преподаватель»

Теперь приступим к разработке преподавательской и самой главной части проекта. Она будет отличаться от структуры администраторской группы.

Как уже было упомянуто, после авторизации пользователь попадает на главную страницу с календарем, где для групп «преподаватель» и «студент» будут отображаться даты тестов.

На странице «публикации» (см. рис. 25) преподаватель может посмотреть список всех ранее загруженных работ, а также добавить новые. Для этого предусмотрена система вкладок. В верхней части страницы располагаются две вкладки «список публикаций» и «добавить публикацию». Перейдя по последней вкладке (см. рис. 27), пользователь попадет на страницу с формой добавления публикации. Заполнив все поля и загрузив файл, преподавателю необходимо нажать на кнопку «добавить публикацию». После этого запись автоматически добавиться в таблицу базы данных, а файл загрузится на сервер.

Рисунок 26. Страница "Публикации"

Рисунок 27. Страница "Публикации", вкладка "Добавление публикаций"

На странице «расписание» преподаватель может посмотреть свое расписание на всю неделю. Также над таблицей располагается подсказка, говорящая о том, какая неделя сейчас идет, четная или нечетная.

Электронный журнал будет располагаться на странице «контроль успеваемости» (см. рис. 28). На странице выводится список всех электронных журналов преподавателя для каждой группы, который создается администратором на странице «семестры». Чтобы отредактировать какой-либо журнал, необходимо нажать на пиктограмму карандаша. После этого открывается журнал для всей группы (см. рис. 29). Преподаватель может проставить оценки или указать причину пропуска занятия. Система будет построена так, что должны быть заполнены все поля оценок студента, так как в конце будет автоматически посчитана средняя арифметическая оценка - накопленная. Также в журнале указываются числа текущей недели, а также подсказка четной или нечетной недели. Числа по тому или иному предмету формируются из составленного расписания.

Рисунок 28. Страница "Контроль успеваемости"

Рисунок 29. Страница "Контроль успеваемости", редактирование журнала

Далее идет страница «сообщения», но она была подробно описана для группы «администратор». Во всех группах функционал идентичен.

Создавать и проверять тесты можно на странице «тестирование». На этой странице выводится список всех тесов, которые прошли и которые запланированы на будущее. Таблица со списком будет содержать информацию о каждом тесте, то есть будут выводиться данные о количестве вопросов в тесте, статус теста, завершен он или в режиме ожидания, а также дата и время, на которую тест назначен и дата создания теста. Статус будет изменяться автоматически, после того, как пройдет дата тестирования. Страница продемонстрирована на рисунке 30.

На странице есть система вкладок. Перейдя по вкладке «добавить тест», появится форма создания теста (см. рис. 31). Форма содержит в себе такие поля, как наименование теста, дата назначения теста, время начала и время окончания теста, а также семестр, где выбирается предмет и группа, для которой создается тест. Нажав на кнопку «добавить вопрос», создается форма добавления вопроса, в которой нужно ввести сам вопрос и ввести 4 варианта ответа. Под каждым ответом стоит галочка, которая определяет, какой ответ верный. Это необходимо для того, чтобы система смогла самостоятельно посчитать правильные ответы и вывести процент верных ответов для каждого студента.

Рисунок 30. Страница "Тестирование"

Чтобы редактировать личную информацию преподавателя, необходимо нажать на имя пользователя в панели меню под изображением. Откроется модальное окно. Что отредактировать любое поле, нужно нажать на пиктограмму карандаша. Как можно видеть на рисунке 32, для редактирования доступны поля «статус» и «объявление». Это очень удобно, когда преподавателю необходимо сообщить какую-то информацию или напомнить о каком-либо мероприятии.

Рисунок 31. Страница "Тестирование", добавление теста

Рисунок 32. Личный профиль пользователя

Для выхода из аккаунта нужно нажать на кнопку «выход» в панели меню слева.

          7. Функциональность веб-приложения для группы «студент»

Теперь я хочу перейти к разработке структуры для группы «студент». Пользователи этой группы имеют достаточно ограниченный функционал.

Главная страница выглядит также, как и в других группах. На странице «расписание» (см. рис. 33) студент может посмотреть свое расписание на неделю. Над таблицей выводится подсказка, какая сейчас идет неделя. Расписание формируется автоматически.

Рисунок 33. Страница "Расписание" для студентов

Электронный журнал продемонстрирован на рисунке 34. На этой странице будет отображаться список предметов для студента. Нажав на пиктограмму глаза, пользователь перейдет к просмотру определенного журнала, где проставлены его оценки и причины пропусков.

Страница «сообщения» идентична одноименным страницам других групп. Прохождение или просмотр тестов, созданных преподавателем, осуществляется на одноименной странице. На странице выводится список всех тестов и информация о них. Все точно также, как и для группы «преподаватель» за исключением пиктограммы глаза, нажав на который, студент перейдет к прохождению теста, а также к просмотру результатов. Страница продемонстрирована на рисунке 35.

Рисунок 34. Страница "Электронных журнал"

Рисунок 35. Страница "Тестирование" для студента

Требования к серверу

Для корректной работы приложения необходимо определить требования к серверу. От этого будет зависеть какого хостинг-провайдера необходимо использовать.

Так как система разрабатывалась на локальном сервере, который поддерживает язык PHP версии 5.4, то рекомендовано искать сервер с поддержкой языка аналогичной версии и выше. При разработке использовалась СУБД MySQL. Следовательно, эта система необходима для корректной работы приложения. Ниже приведен список требований к серверу:

·        PHP 5.4

·        MySQL

8. Разработка алгоритмов

Рисунок 36. Алгоритм авторизации на сайте

Большинство алгоритмов в данной работе одинаковы. Это отправление запроса к базе данных и выборка элементов из определенных таблиц в базе данных. Но есть один самый главный алгоритм (см. рис. 36), который определяет, к какой группе относится пользователь после авторизации.

По блок схеме, представленной выше можно сказать, что после ввода e-mail и пароля в соответствующие поля, запускается проверка введённых данных. Если данные не верны, то цикл возвращается в начало. В случае успешной проверки переходим к следующему этапу. На этом этапе уже проверяется к какой группе относится идентификатор пользователя, который пытается авторизоваться. В зависимости от этого загружается определенная структура веб-приложения. На этом алгоритм завершает свою работу.

          9. Сценарий работы с приложением

Сценарий работы с приложением максимально прост. После того, как администратор получает свои данные для доступа к приложению, он авторизуется на сайте. После этого пользователь начинает настраивать все, что ему необходимо. Если это преподаватель и он просто для себя хочет вести электронный журнал своей группы, проводить тесты, общаться со студентами и использовать весь функционал приложения, то ему достаточно создать себе аккаунт преподавателя. После этого нужно авторизоваться под созданным аккаунтом и использовать функционал для преподавателя.