Проектирование и разработка веб-приложения отдела «Аспирантура и докторантура» Ошского государственного университета на основе технологий HTML, CSS И JavaScript
Автор: Кудуев А.Ж., Дарбанов Э.О., Кадырова А.С., Ли Шуци
Журнал: Бюллетень науки и практики @bulletennauki
Рубрика: Технические науки
Статья в выпуске: 5 т.12, 2026 года.
Бесплатный доступ
Описаны проектирование и разработка веб-приложения для отдела «Аспирантура и докторантура» Ошского государственного университета, реализованного как два взаимосвязанных веб-ресурса: модуль аспирантуры и модуль PhD-докторантуры. Функциональная основа решения — предоставление структурированной информации по направлениям подготовки (шифры и названия специальностей/программ), а также быстрый доступ к спискам обучающихся и материалам по курсам. На странице аспирантуры реализована табличная навигация по укрупнённым группам специальностей с выбором курса (1–4) и переходом к полным спискам, что сокращает число действий пользователя при поиске нужного раздела. Для PhD-докторантуры представлен перечень программ с указанием руководителя, выбором курса (1–3) и возможностью просмотра и получения размещённых документов через ссылки «Просмотреть». Цель работы — разработать лёгкий, понятный и расширяемый интерфейс без использования тяжёлых фреймворков на базе технологий HTML, CSS и JavaScript. В ходе работы применены прототипирование структуры страниц, модульная организация разметки и стилей, семантическая разметка, а также функциональное и кроссбраузерное тестирование ключевых пользовательских сценариев (поиск программы, выбор курса, переход к спискам и материалам). Результатом стала единая логика навигации, адаптивное отображение таблиц и ссылок для мобильных устройств, а также клиентская проверка вводимых данных в формах обратной связи. Практическая значимость состоит в унификации представления данных отдела, снижении времени поиска информации для целевой аудитории и создании основы для дальнейшего развития сервиса (расширение перечня программ и документов, подключение административного обновления контента и журналирования обращений).
Веб-приложение, аспирантура, докторантура, HTML, CSS, JavaScript, пользовательский интерфейс, адаптивная верстка, информационная система, образовательный портал, цифровизация образования, университетские веб-сервисы
Короткий адрес: https://sciup.org/14135634
IDR: 14135634 | УДК: 004.422 | DOI: 10.33619/2414-2948/126/19
Design and Development of a Web Application for the Postgraduate and Doctoral Studies Department of Osh State University Based on HTML, CSS, and JavaScript Technologies
The article presents the design and development of a web application for the Postgraduate and Doctoral Studies Department of Osh State University, implemented as two interconnected web resources: a postgraduate module and a PhD doctoral module. The core functionality is to provide structured information on training areas (codes and titles of specialties/programs) and to ensure fast access to student lists and course materials. The postgraduate page offers tabular navigation by consolidated specialty groups with course selection (1–4) and links to full lists, reducing the number of user actions required to reach the target section. The PhD doctoral module contains a program list with the academic supervisor indicated, course selection (1–3), and the ability to view and download published documents via “View” links. The objective was to build a lightweight, user-friendly, and scalable interface without heavy frameworks, using HTML, CSS, and JavaScript. The work applied page-structure prototyping, modular markup and styling, semantic HTML, and functional as well as cross-browser testing of key user scenarios (program search, course selection, and navigation to lists and materials). The result is a unified navigation logic, responsive presentation of tables and links for mobile devices, and client-side validation for feedback forms. Practical significance includes unified departmental data presentation, reduced time for information retrieval, and a foundation for further development (expanding programs and documents, adding administrative content management, and request logging).
Текст научной статьи Проектирование и разработка веб-приложения отдела «Аспирантура и докторантура» Ошского государственного университета на основе технологий HTML, CSS И JavaScript
Бюллетень науки и практики / Bulletin of Science and Practice
УДК 004.422
Цифровая трансформация университетов усиливает требования к качеству веб-сервисов, через которые абитуриенты, аспиранты и докторанты получают информацию и взаимодействуют с учебными подразделениями. Для структурных подразделений, отвечающих за подготовку кадров высшей квалификации, особенно важны доступность и актуальность сведений о программах, курсах и нормативных материалах, а также прозрачность представления списков обучающихся и этапов их аттестации. Практика разработки и эксплуатации веб-интерфейсов показывает, что несогласованная структура страниц и перегруженная навигация ухудшают удобство пользования и повышают вероятность ошибок при поиске данных, особенно при работе с мобильных устройств [1].
Отдельной проблемой является отсутствие единой логики навигации при переходе от перечня программ к данным по конкретному курсу и к сопутствующим материалам. Пользователь вынужден выполнять повторяющиеся действия, переходить по множеству ссылок и вручную уточнять, где размещены документы и списки. Для отдела «Аспирантура и докторантура» Ошского государственного университета данная задача имеет прикладной характер: требуется обеспечить быстрый поиск программы по шифру и названию, выбор курса обучения и переход к спискам аспирантов/докторантов, а также доступ к документам и материалам без дополнительных обращений в подразделение.
В связи с этим актуальной является разработка специализированного веб-приложения, ориентированного на два взаимосвязанных направления: аспирантуру и PhD-докторантуру. В рамках проекта реализовано два модуля с единым подходом к представлению данных: (1) модуль аспирантуры с табличной структурой по укрупнённым группам специальностей, шифрами и наименованиями, а также выбором курса (1–4); (2) модуль PhD-докторантуры с перечнем программ, указанием руководителя, выбором курса (1–3) и ссылками для просмотра размещённых документов. Для списков обучающихся предусмотрено отображение ключевых параметров (направление, курс, статус и даты этапов диссертационного процесса), а также элементы быстрой идентификации записи (в том числе QR-код).
Целью настоящей работы является проектирование и разработка веб-приложения отдела «Аспирантура и докторантура» ОшГУ на основе технологий HTML, CSS и JavaScript, обеспечивающего структурированное представление программ, удобную навигацию по курсам и доступ к спискам обучающихся и документам. Исползуемые веб-технологии и их функциональные возможности соответствуют современным спецификациям HTML, CSS и ECMAScript. Для достижения поставленной цели решались следующие задачи: разработка структуры страниц и сценариев навигации; реализация табличного представления программ и элементов выбора курса; внедрение интерактивных переходов к спискам и материалам; обеспечение адаптивной верстки для мобильных устройств; проведение функционального и кроссбраузерного тестирования ключевых сценариев использования. Практическая значимость работы заключается в создании работающего веб-сервиса, который снижает трудозатраты пользователей на поиск информации и формирует основу для дальнейшего расширения функциональности (поиск и фильтрация, административное обновление контента, журналирование обращений).
Материал и методика
Объектом исследования является веб-приложение отдела «Аспирантура и докторантура» Ошского государственного университета, реализованное в виде двух взаимосвязанных модулей: «Аспирантура» и «PhD-докторантура». Предметом исследования выступают способы структурирования и представления данных о программах подготовки и обучающихся, а также методы построения навигации по курсам и доступа к материалам в условиях вебинтерфейса. Материал исследования включает: перечни специальностей/программ подготовки (шифр и наименование); сведения о руководителях программ (для модуля PhD-докторантуры); данные об обучающихся (Ф.И.О., направление/программа, курс, статус); этапные даты по диссертационному процессу (даты поступления, экспертизы, предзащиты, защиты — при наличии); ссылки на документы/материалы, доступные через действие «Просмотреть»; элементы идентификации записи (включая QR-код на странице списка обучающихся).
Таблица 1
СРАВНЕНИЕ МОДУЛЕЙ ВЕБ-ПРИЛОЖЕНИЯ «АСПИРАНТУРА» И «PHD-ДОКТОРАНТУРА»
|
Параметр сравнения |
Модуль «Аспирантура» |
Модуль «PhD-докторантура» |
|
Назначение |
Публикация перечня специальностей и переход к спискам аспирантов |
Публикация перечня программ PhD, доступ к спискам докторантов и документам |
|
Единица структуры |
Специальность / направление (шифр + наименование) |
Программа (шифр + наименование) + руководитель |
|
Курсы |
1–4 |
1–3 |
|
Основной интерфейс |
Таблица: №, шифр, специальность, выбор курса |
Таблица: №, шифр, программа, руководитель, выбор курса |
|
Действия пользователя |
Выбор курса → переход к списку аспирантов |
«Просмотреть» документы + выбор курса → переход к списку докторантов |
Бюллетень науки и практики / Bulletin of Science and Practice Т. 12. №5 2026 Параметр сравнения Модуль «Аспирантура» Модуль «PhD-докторантура» Документы/материалы Переход к спискам (при наличии материалов — через список) Прямая ссылка «Просмотреть» для открытия/получения документов Данные в списке обучающихся Ф.И.О., направление, курс (по выбранному курсу) Ф.И.О., направление, курс, статус, этапные даты, QR-код Интерактивность (JS) Выбор курса, переход к списку Выбор курса, переход к списку, открытие документов, поиск по таблице (если включён) Адаптивность (CSS) Масштабирование таблиц и кнопок выбора курса Масштабирование таблиц, «Просмотреть», элементов списков и QR-кодов Критерии проверки Корректность переходов по курсу, отображение таблиц Корректность «Просмотреть», переходов по курсу, отображение дат и QR
Разработка выполнена с использованием HTML (семантическая структура страниц и таблиц), CSS (оформление, сетка, адаптивная верстка) и JavaScript (интерактивность: выбор курса, переходы, поиск по таблице, обработка пользовательских действий). Используемые технологии соотносятся с актуальными спецификациями HTML, CSS и ECMAScript.
Для оценки работоспособности применены методы прототипирования интерфейса, модульной организации компонентов, функционального тестирования пользовательских сценариев, а также кроссбраузерной проверки корректности отображения таблиц и элементов управления. Подход к проектированию интерфейса ориентирован на минимизацию действий пользователя и повышение удобства навигации.
Основными тестовыми сценариями выступали: выбор программы → выбор курса → переход к списку обучающихся; открытие документа через «Просмотреть»; проверка отображения на устройствах с разной шириной экрана; проверка стабильности загрузки таблиц и корректности отображения служебных элементов (счётчиков, QR-кодов).
ИСПОЛЬЗОВАННЫЕ ТЕХНОЛОГИИ И ИХ РОЛЬ В РЕАЛИЗАЦИИ
Таблица 2
|
Технология/метод |
Назначение в проекте |
Проверяемый результат |
|
HTML (семантическая разметка) |
Структура страниц, таблиц, формирование читаемых блоков |
Корректная структура таблиц, отсутствие нарушений разметки |
|
CSS (адаптивная верстка) |
Оформление, сетка, читаемость, мобильная версия |
Корректное отображение на разных ширинах экрана |
|
JavaScript |
Выбор курса, обработка событий, переходы, поиск (при наличии) |
Работа сценариев без ошибок, корректность действий пользователя |
|
Прототипирование |
План страниц и сценариев переходов |
Единая логика интерфейса в обоих модулях |
|
Функциональное тестирование |
Проверка сценариев: программа → курс → список; документы |
Все переходы и ссылки работают корректно |
|
Кроссбраузерная проверка |
Проверка отображения и поведения UI |
Отсутствие критических расхождений в браузерах |
Результаты и их обсуждение
В результате выполненной работы реализовано и внедрено веб-приложение отдела «Аспирантура и докторантура» Ошского государственного университета, функционирующее как два взаимосвязанных модуля: «Аспирантура» и «PhD-докторантура». Оба модуля построены на едином принципе представления информации: табличное отображение программ/направлений, выбор курса обучения и переход к итоговым спискам обучающихся. Такой подход обеспечил унификацию пользовательских действий и снизил вероятность ошибок при поиске нужных данных.
Модуль «Аспирантура». Реализована таблица специальностей с указанием шифра и наименования. Для каждой позиции предусмотрен элемент выбора курса (1–4), после чего осуществляется переход к списку аспирантов соответствующего курса. Интерфейс ориентирован на быстрое получение справочной информации и минимизацию переходов: пользователь в рамках одной страницы выбирает направление и курс без необходимости искать дополнительные меню и разделы. Визуально модуль имеет единый стиль компонентов, что упрощает идентификацию раздела и повышает читаемость данных.
Модуль «PhD-докторантура». Реализовано представление программ PhD в виде таблицы с полями: шифр программы, название, руководитель программы. Для каждой записи предусмотрена ссылка «Просмотреть», обеспечивающая открытие и получение размещённых документов. Дополнительно реализован элемент выбора курса (1–3) для перехода к спискам PhD-докторантов по выбранной программе. Тем самым модуль сочетает два ключевых сценария: доступ к документам и переход к персонализированным спискам обучающихся.
Страница списка обучающихся. Для выбранной программы и курса реализована таблица, содержащая персональные и учебно-организационные данные: Ф.И.О., направление/программа, курс, статус (например, PhD-докторант), а также даты, отражающие этапы диссертационного процесса (поступление, экспертиза, предзащита, защита — при наличии). Дополнительно предусмотрено отображение QR-кода, предназначенного для быстрой идентификации записи и удобного доступа к информации при внутреннем использовании (проверка сведений, оперативная сверка данных).
Интерактивность и удобство. В интерфейсе реализованы элементы, повышающие удобство работы: поиск по таблице (для ускорения нахождения нужной записи), счётчики общего количества обучающихся и распределения по курсам, а также единообразные кнопки выбора курса. Благодаря этому пользователь получает не только доступ к спискам, но и быстрый обзор актуального состояния данных (количество записей и их распределение). Подход соответствует принципам проектирования удобных пользовательских интерфейсов и снижает вероятность ошибок при выполнении типовых действий.
Проверка работоспособности. В ходе функционального тестирования подтверждена корректная реализация базовых сценариев: (1) выбор программы/направления → выбор курса → открытие списка обучающихся; (2) открытие документов через «Просмотреть»; (3) корректность отображения таблиц и элементов управления на устройствах с различной шириной экрана. Кроссбраузерная проверка показала устойчивое отображение интерфейса и отсутствие критических нарушений верстки, влияющих на использование основных функций.
Таким образом, полученные результаты демонстрируют, что разработанное вебприложение обеспечивает структурированное представление данных отдела, уменьшает время поиска информации, упрощает доступ к документам и формирует основу для дальнейшего развития. В качестве перспективных направлений расширения можно выделить: добавление административного интерфейса для обновления контента, внедрение фильтров и сортировки по полям, а также подключение централизованного хранения данных и журналирования действий пользователей.
Выводы
Разработано и внедрено веб-приложение отдела «Аспирантура и докторантура» Ошского государственного университета на основе технологий HTML, CSS и JavaScript, включающее два взаимосвязанных модуля: «Аспирантура» и «PhD-докторантура».
Реализована единая логика представления данных и навигации: табличное отображение программ/направлений, выбор курса обучения и переход к спискам обучающихся, что сокращает время поиска информации и уменьшает число пользовательских ошибок.
Для модуля PhD-докторантуры реализован доступ к документам и материалам через ссылки «Просмотреть», обеспечивающий оперативное получение необходимых файлов без дополнительных обращений в подразделение.
Реализована страница списков обучающихся с отображением ключевых сведений (направление/программа, курс, статус, этапные даты диссертационного процесса), а также QR-кодов для быстрой идентификации записей.
Обеспечено адаптивное отображение интерфейса и корректная работа основных сценариев в ходе функционального и кроссбраузерного тестирования, что подтверждает практическую применимость разработанного решения.
Сформирована основа для дальнейшего развития сервиса: внедрение административного обновления контента, расширение поиска и фильтрации, подключение централизованного хранения данных и журналирования действий пользователей.
Интернет-ресурсы:
Система стандартов по информации, библиотечному и издательскому делу.
Библиографическая ссылка. Общие требования и правила составления.
HTML Living Standard / WHATWG.
ECMA-262. ECMAScript® 2025 language specification. 16th edition, June 2025 / Ecma
International.
ECMAScript® 2024 Language Specification (ECMA-262, 15th edition).
CSS Cascading and Inheritance Level 3 / W3C.
All CSS specifications / W3C.
Standard / WHATWG.
Аспирантура ОшГУ: официальный веб-ресурс отдела.
PhD-докторантура ОшГУ: официальный веб-ресурс отдела.
