Разработка web-приложения для дистанционного обучения в вузе | Статья в журнале «Молодой ученый»

Отправьте статью сегодня! Журнал выйдет 28 декабря, печатный экземпляр отправим 1 января.

Опубликовать статью в журнале

Автор:

Рубрика: Информационные технологии

Опубликовано в Молодой учёный №11 (458) март 2023 г.

Дата публикации: 18.03.2023

Статья просмотрена: 483 раза

Библиографическое описание:

Кравченко, З. М. Разработка web-приложения для дистанционного обучения в вузе / З. М. Кравченко. — Текст : непосредственный // Молодой ученый. — 2023. — № 11 (458). — С. 16-26. — URL: https://moluch.ru/archive/458/100830/ (дата обращения: 18.12.2024).



Согласно закону об образовании РК № 137 от 20.03.15 с изменениями от 06.10.2022 года, в нашей стране существуют правила организации дистанционного обучения на разных этапах обучения [1]. И соответственно, для осуществления онлайн-обучения ВУЗам необходима система управления обучением, где может быть предоставлен доступ к личной учетной записи, видна успеваемость, электронное расписание учебных занятий и материалы курсов. Исходя из требований для дистанционного обучения, разработано приложение, использующее следующие программные средства: Open Server Panel, CMS WordPress. Помимо программных средств используются следующие языки программирования: PHP, Java Script, HTML, CSS.

Описание процесса разработки

Запустив локальный сервер Open Server Panel, мы можем получить доступ к сайту и после установки WordPress на экране появится панель администратора или консоль.

https://lh4.googleusercontent.com/clvzqJ2AhHLg4THnJzXW8cE3_uP0khIUJAtpEx836qcsQNb3Kmowxw1Z_UiDDpdz3vQYaWzaHn3tMfuwYIBNv1ZNQIdUcQj7a-8eYFkTDtu4GQPyAM5XUzSFCrI6XHmnwLYXafDYfzng2PIv6nI0mDU

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

Главная страница сайта выглядит следующим образом [12]:

https://lh6.googleusercontent.com/xFVk_EjQrCRCQyHhv4EQMQcgbCnuTeCbl1AtC-URfDWCXH9bqeW4Cr7hb6fMQan05z9u6Dz88jBR5z2RAsBor6aCQNV6sjI_-AEBgRGxpiEUIpT_I9AvMHXLj71YJz4xKx6qbNweh65ZUHcEAOC9fE0

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

https://lh3.googleusercontent.com/j4SwZDLCtqLA9dG9iO4VNyO4lIb8E6sGiuvSIQOB3bSE88rJ5k2upuFxd1DJx9u4Ru5n32E0_OnwTF8n-3j93spI-cI_vNzjV1AMWZcmjn0N50T1Vx-yqlcoU_7kbPIMJrmiyg6CRWi87wKvx5sMEAU

Таким образом мы создает все необходимые страницы, с использованием плагина Elementer [5].

На каждой странице автоматически добавляется Header и Footer, в которых есть ссылки на главную страницу и справочная информация. Также через верхний колонтитул происходит авторизация пользователя.

https://lh6.googleusercontent.com/Z-3MncvR_zdOaONoPTB6Okr9IsKrLeU9wHHyeXZrRMe1jaXbCZjHBYkH5U9OcdPQVj9P9czsWAxNCBeBlwdyDuC4MChYStd2SAmQi-npgrUELvsAevsJJoIX3aPEYjgwsM0O6tChMwrwiFYG3IjgjaE

Для запрета доступа к страницам сайта неавторизованным пользователям добавлено дополнительное условие в шаблоне обычной страницы.

Все неавторизованные пользователи будут переадресовываться на главную страницу, а также будет открываться форма авторизации [2].

https://lh6.googleusercontent.com/_R3undls0gDdDCPmFOFOXgH6b2MmufoQNJ61MUGvZ1d3OQFSV2xHb0c6UNyZwTRab_FNR-SfyMWlzNlFpl1dhAWK6w7NXeKOqWggGnPDt1EotZsLQw2SagL53c_BasoLnb0AwIP65E1eoeDPCbfBRkk

На сайте существует возможность входа только зарегистрированных пользователей, которых вносит администратор. Регистрация производится в разделе Пользователи консоли администратора. В этом же разделе можно посмотреть список существующих пользователей.

https://lh3.googleusercontent.com/S0bGUuO3AcUdWZsPFU7Hn3cPbTpezk2iZcYbDUsblrnM6DR1oi1Fh5E8hWzusfA6TuVJOkPLS0KHzRDJvtqEKqqUWaml6GWuODj8ieKjewavFM_L4GyLvOq7gnaNEBMLzJ_6ZTTJlJv1Alksy9CjxI8

Форма добавления нового пользователя

Тут же определяется роль нового пользователя.

Студенты получают роль Подписчик, Преподаватели получают роль Лидер группы, Администратор — Администратор.

Разделы

На главной странице внизу можно увидеть 4 раздела:

https://lh3.googleusercontent.com/nZiGEQCwZh5YFGdQ6eylq2AxfZj3Fo6JNy-q2NyVM3BSY-olXy7oSnGH8q8rF6K4arcZpaaKQFSOUJ4Xp1VDH6uEEVqyThlATHFKA0yfSlhr0eAE0zZqs-YiRZkBP6cudBT79pLs5VD0z1C9y394fGY

В разделе Расписание отображается в виде календаря расписание пользователей.

https://lh6.googleusercontent.com/XOfoMfGnt0OF_z1B0KZDBpc7LlnT7HP0xn2vhx-OrYvhz3QOWo1pUfeOmpBK01lyKyBJsaGNfIdQXmmIaoVpj7d9CvJYxW5BDug-zkqLeejCrbTVXGOn4vL36Zg_sLaAfm9RKBc1bvKtRU1f_-koTi8

Можно выбрать/поменять режим отображения расписания: Месяц/День.

Содержимое расписания выводится на страницу с помощью собственного шорткода [11].

В меню плагина The Events Calendar создаются категории мероприятий под каждую группу учащихся [3]. Это необходимо для разделения и фильтрации контента в календаре, так как по факту календарь един для всех мероприятий. За отображение необходимого содержимого отвечает написанный шорткод.

https://lh3.googleusercontent.com/arzqYF_kFRGUnRphiORlCgk5c1LXFH1FZ4qKeq2x9JR3kME2AhjpWpBEqWcnoo44WP_y6fMHZ6UiyxHMSkfMykgbxILXKBanFvzJQkgg42_QM1QjXLLsfjdgfaRQedmSkfR2y9fcqKthmYMtSblC6YM

Шорткод в WordPress — это конструкция в тексте, которая будет обработана и заменена на указанный код/текст. Обрабатывается шорткод специальной PHP функцией, указанной при регистрации шорткода.

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

Дисциплины

На странице дисциплин используется встроенный шорткод плагина LMS LearnDash. Который отвечает за отображения контента страницы.

Через консоль администратора происходит добавление, редактирование и настройка курсов, занятий, тестов, тем; всего образовательного материала. Сами дисциплины создаются в подпункте Курсы.

https://lh6.googleusercontent.com/eSmFoGRJzPMQWbkq-IDi37FtU2DtFSw7D_D1b6mVt2bPONfdzNwLN08LXa2IAVqXrKvdO3OKiDXqL-ViX3YY1ZqbFWM5Y3FtIFsh7Nt5Az3WvHliu4Ti_kWEzZljmz-S_ZtAGBBTNpfbXvI-PbSotdU

Эта функция доступна администратору, то есть Преподаватель может подготовить необходимый материал, отдать администратору и тот разместит материалы на сайте. Либо можно предоставить эту функцию преподавателю, для самостоятельно наполнения контента своего предмета. Материалы, которые можно добавить: лекционный материал в виде любых текстовых описаний, либо прикрепить файлы (MS Word, PowerPoint, PDF файлы, видеоматериалы и т. д.). Помимо материалов в структуру предмета можно добавить автоматическое тестирование студентов. Которое может быть запланировано по завершению темы, модуля или всего курса.

Урок содержит в себе определенный Модуль предмета, в котором может быть включено несколько тем.

Для добавления нового предмета/дисциплины нужно в консоле выбрать вкладку Курсы, там нажать Add New. Откроется окно редактирования дисциплины.

https://lh3.googleusercontent.com/_0R2-afyGHdKqNrgsGTS4NBhAwup1jalM-_YHcbQ6ZLMIN4MoP_uVGSqeGbKbFUmUqDhuIaN-OH7-FwhdvXWMIok9niCFUTMQ5Z_LHiufk0z_DQhQogLuZua-HX3Q4rQPCPM6zqfloPJu8zB1tmGkDI

В первом разделе добавляем название дисциплины и ее описание.

Во вкладке Конструктор создается структура курса/дисциплины.

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

В последней вкладке Группы мы осуществляем прикрепление определенных групп к дисциплине/курсу.

После окончания настройки курса, для того чтобы он отображался на сайте, нужно нажать кнопку Опубликовать.

Любой существующий курс можно редактировать и обновлять. И с нового учебного года или семестра определить группы, который его изучают, убрав или добавив новые.

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

https://lh3.googleusercontent.com/l8sXxhIrdpCvQm8fU8CoSIrSSOZSnfU_6GgOgYJRsdDef_WMn09tB4klztSZSFSaBVsk4rtSOuqHSl9Ai-vl2pr0rYve8M2bFSwlsoJcr47yAlLrw-CgGAafS6cBEG4L5Gp4ilBLoMCDxQcd7kqZWas

Раздел Журнал содержит таблицу с успеваемостью по дисциплинам. Пользователи с ролью Преподавателя имеют доступ к форме выставления оценок по своим предметам. Студент видит таблицу со всеми своими дисциплинами и оценками по ним.

https://lh5.googleusercontent.com/CLjD_Vk-mLjtHVF5XUhITadL4z_9N-HWVefqP97qZJqsBHKMxlbUp5JJ2gTQwf1lGwV5gVrTlwCGep0zf0dKAKrzRb8AIoxkeDCIHqri5XZOV-WgKmHQgt8B9Hv7Iioi56i2psvnMl6WlV2Vf6E7VQY

Журнал выглядит в формате 15 недельного обучения. После 3 недель обучения считается автоматически рубежный контроль. Всего их 5. После них идет графа с экзаменационной оценкой. Итоговая считается автоматически по формуле: Итог=((р1+...+р5)*0.7)/5 + экз*0.3

Преподаватели на этой же странице видят результаты тестов по своим дисциплинам.

На странице журнала используется написанный составной шорткод [‘journal’]. [10]

https://lh6.googleusercontent.com/BP0V4FbQ2Ige3gKcTmpq0xSRWVVMryDgRdO5TqphzzV67D6VFzJG7HANxvnnVvXCGEpgLd5VloBnZ3ax6-MUOSX24Wj1RT7DNqcQYABr0qj0_Xl0qVaZJww3Q6pJ_04P4D414ISwBspcR77iVgqTjUs

В начале шорткода объявлены три переменные: id текущего пользователя, булевый флаг, отвечающий за разделение логики для преподавателя и пустой массив таблиц.

Далее объявляется переменная, в которую помещается список групп, в которых состоит текущий авторизованный пользователь [6]. После чего циклически для каждой найденной группы выполняется следующий алгоритм — определяется список всех пользователей данной группы и список дисциплин, затем производится проверка на то, является ли текущий пользователь преподавателем (лидером группы), если результат положительный, то для него формируется и выводится форма для вноса оценок в журнал, если же результат отрицательный, то формируется таблица с оценками и помещается в соответствующий массив. После прохождения всего цикла, пользователю выводятся все сформированные таблицы с оценками.

Форма для преподавателя также формируется динамически и выводится в виде HTML разметки.

За получение списка с оценками отвечает отдельный метод. В случае, если ни одной оценки еще не было поставлено, поля будут заполняться нулями.

https://lh6.googleusercontent.com/i9OUeiG4aFxp-uiNa0-7kXMnAecqIf_bhEKoSOQf4dmVckRc0cK7Ni_uVHCUnn8eofz1c67lvwCcR2KoxYKZGXdLMFNy-89cKe9TjrulyLOhto9OnP0hlaTcVMEe179A84Pv8UQSxkY2vNTVlB-zrQM

При заполнении оценочной формы преподавателем происходит обмен данных между web-интерфейсом и сервером посредством асинхронных ajax-запросов. [11] За это отвечает отдельный скрипт на языке JavaScript.

https://lh4.googleusercontent.com/xCTMhvJWTNnUre2KfmByzu4vufrvNzRzGO0tstPFXiU65t7XOdcYqvUkA24i2cX5A_E9ePzPTB4me859K40xiZwlnJE-4tgTO8jV_J6fQKm-powhjImbwwquAQAg3STLkwR9Odyl9DJhbmaj7lxSAWI

Личный кабинет содержит информацию о изучаемых курсах студентом и прогресс изучения.

У преподавателя видны дисциплины, которые он ведет.

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

Литература:

  1. Закон РК «Об утверждении требований к организациям образования по предоставлению дистанционного обучения и правил организации учебного процесса по дистанционному обучению и в форме онлайн-обучения по образовательным программам высшего и (или) послевузовского образования» [Электронный ресурс]. — Режим доступа: https://adilet.zan.kz/rus/docs/V1500010768
  2. «PHP» [Электронный ресурс]. — Режим доступа: https://ru.wikipedia.org/wiki/PHP
  3. Руководство по PHP. Справочник функций. Функция filectime [Электронный ресурс]. — Режим доступа: https://www.php.net/manual/ru/function.filectime.php
  4. Руководство по PHP. Справочник функций. Функция Календарь [Электронный ресурс]. — Режим доступа: https://www.php.net/manual/ru/book.calendar.php
  5. WordPress — Плагины — Elementor — конструктор сайтов. [Электронный ресурс]. — Режим доступа: https://wordpress.com/ru/plugins/elementor
  6. «PHP 5. Практика создания Web-сайтов» / Кузнецов М., Симдянов И., Голышев С. — БХВ-Петербург — М., 2017. — 960 c.
  7. «MySQL и mSQL: Базы данных для небольших предприятий и Интернета» / Р.Дж. Яргер, Дж. Риз, Т. Кинг. — М.: СПб: Символ-Плюс, 2015. — 560 c.
  8. «Изучаем HTML, XHTML и CSS» / Элизабет Фримен, Эрик Фримен. — М.: Питер, 2016. — 720 c.
  9. «Самоучитель PHP 5/6» / Кузнецов Максим — БХВ-Петербург — М., 2017. — 972 c.
  10. Шорткоды в WordPress. [Электронный ресурс]. — Режим доступа: https://wp-kama.ru/handbook/codex/shortcodes
  11. Что такое AJAX? [Электронный ресурс]. — Режим доступа: https://itchief.ru/javascript/ajax-introduction#what-is
  12. Материалы и изображения официального сайта ЗКАТУ [Электронный ресурс]. — Режим доступа: https://www.google.com/search?gs_ssp=eJzj4tFP1zfMSIpPqTRMMzdgtFI1qDAxNDdMSrYwAAqkmpkbGVsZVFgYpxoYGFtappgZmZkYpyV5cV3YfmHXhQ0Xmy42AwBZhhWM&q= %D0 %B7 %D0 %BA %D0 %B0 %D1 %82 %D1 %83&oq=prfne&aqs=chrome.1.69i57j46i10i131i175i199i433i512j0i10i512l3j46i10i175i199i512j0i10i512l3.2470j0j7&sourceid=chrome&ie=UTF-8
Основные термины (генерируются автоматически): HTML, PHP, преподаватель, главная страница, дистанционное обучение, дисциплина, пользователь, раздел, текущий пользователь, CMS.


Задать вопрос