Тел.: (812) 643-77-67*33-56 | Mail: fit.herzen.conf@gmail.com

Поиск по сайту

Баранова Е.В.
профессор кафедры методики информационного
и технологического образования
ev_baranova@mail.ru
Швецов Г.В.
программист отдела информатизации образования
учебно-методического управления
shvetzoff.german@yandex.ru

РГПУ им. А.И. Герцена
г. Санкт-Петербург

Современные технологии реализации веб-ресурсов


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

Baranova E.V.
Shvetsov G.V.

HSPU
St. Petersburg, Russia

Modern technologies for the implementation of web-resources

The article deals with the modern technologies for developing web¬-resources based on the MVC model. Presents the functionality and approach to the implementation of the web-resource system developed by the authors.

Согласно современным тенденциям, разработка веб-приложений, в том числе на языке PHP, преимущественно предполагает использование фреймворков – программных средств, основанных, как правило, на объектно–ориентированной парадигме, и включающих классы, позволяющие ускорить разработку проекта. Фреймворки функционируют на основе модели MVC (Model – View – Controller, «Модель – Представление – Контроллер»). MVC — схема, которая предполагает, что процесс разработки, базируется на трех компонентах:

  • Class model (модель) обеспечивает взаимодействие системы с базой данных (БД);
  • Class сontroller (контроллер) предназначен для обработки действий пользователя при манипуляции элементами интерфейса;
  • Class view (представление) обеспечивает отображение данных и элементов интерфейса, с которыми взаимодействует пользователь.

Взаимодействие компонентов происходит следующим образом (рис. 1):
1. Выполнение пользователем действий в системе (переход по ссылке, ввод данных на форме и их отправка и т.д.) приводит к вызову метода контроллера, в котором реализована обработка этих действий.
2. В методе контроллера происходит обращение к методу модели, который работает с данными на уровне БД: вызывается метод модели для изменения (update, insert, delete) или выборки (select) данных.
3. Метод контроллера передает полученные данные в представление для отображения пользователю.


Рисунок 1. Схема взаимодействия компонентов концепции MVC

Для более наглядной демонстрации описанной выше схемы взаимодействия компонентов рассмотрим программную реализацию вывода информации о преподавателях, которая хранится в БД. Данная реализация описана в условиях использования PHP-фреймворка Laravel [1] и включает следующие этапы:
1. Создание метода модели для выборки списка преподавателей из БД.
2. Реализацию метода контроллера для получения данных из модели и их передачи в представление.
3. Создание представления для отображения данных, полученных из контроллера.

В методе getTeachers модели Teachers возвращаются записи, полученные при выполнении SQL-запроса (листинг 1).

public function getTeachers()
{
return DB::select('select id, name from teachers');
}

Листинг 1. Метод getTeachers модели.

Класс DB, включенный в структуру Laravel по умолчанию, предоставляет ряд методов, которые упрощают работу с БД. Метод select данного класса в качестве входного параметра получает SQL-запрос. Метод возвращает данные в виде массива объектов, каждый из которых является записью, полученной в результате выполнения запроса. Свойства объекта id и name соответствуют одноименным полям записи.

В методе showTeachers контроллера происходит вызов метода модели getTeachers и передача полученных данных в представление teachers.index (листинг 2).

public function showTeachers()
{
$model = new Teachers();
$data = $model->getTeachers();
return view('teachers.index’,['teachers' => $data]);
}
Листинг 2. Метод showTeachers контроллера.

В переменную $model помещается ссылка на созданный объект класса модели Teachers. Далее из контекста этого объекта вызывается метод getTeachers, который возвращает информацию о преподавателях в переменную $data. На последнем шаге, с помощью функции view (встроена в Laravel), данные передаются в представление с наименованием teachers.index. Первым параметром функции является наименование представления, вторым – ассоциативный массив, где ключом является строка teachers, а значением – полученные данные о преподавателях ($data). В результате выполнения функции обеспечивается отображение полученной информации о преподавателях в представлении teachers.index через переменную $teachers.

Представления в Laravel реализуются на основе шаблонизатора Blade (файлы должны иметь расширение .blade.php). Шаблоны могут включать блоки PHP, HTML, JavaScript кода, вызываются из объекта класса View и обеспечивают отображение данных и элементов интерфейса. В листинге 3 представлен вывод списка преподавателей.

@forelse($teachers as $teacher)
<p>{{$teacher->id}} - {{$teacher->name}}</p>
@else
< h2 >Нет данных для отображения.< /h2 >
@endforelse
Листинг 3. Фрагмент представления teachers.index.

В данном фрагменте используется цикл forelse, в котором перебираются элементы массива в том случае, если он не пустой. В противном случае – выполняется код, указанный в блоке else. Информация о преподавателях выводится через обращение к свойствам id и name объектов, переданных из контроллера. Приведенный пример является упрощенной схемой взаимодействия компонентов.

Представленные технологии используются для разработки системы веб-ресурсов для управления учебным процессом в РГПУ им. А. И. Герцена [2]. В систему встроены следующие ресурсы:
1. «Профиль преподавателя». Реализован режим просмотра и редактирования персональных данных, формирование цветовой палитры интерфейса для личного профиля.
2. «Индивидуальный план преподавателя». В ресурсе реализован режим редактирования данных о различных видах работ (методическая и организационная работа, научная и научно-исследовательская, воспитательная, повышение квалификации), также реализован режим печати.
3. «Электронный мониторинг». В ресурсе реализованы режимы:

  • просмотр данных об электронных учебных курсах (ЭУК), реализуемых в рамках дисциплин, которые ведут преподаватели на соответствующем факультете, выполнение заявок на создание ЭУК, экспорт статистики создания ЭУК в Excel;
  • просмотр информации о сроках ГИА и данных, связанных с ВКР студентов (наименование темы, научный руководитель и т.д.), реализована возможность выгрузки данных в Excel о конкретной учебной группе;
  • просмотр, редактирование и печать информации о прохождении проверки ВКР студентов в системе «Антиплагиат».
4. «Образовательный партнер». Реализована возможность просмотра и редактирования данных об образовательных партнерах, заключивших договоры с РГПУ им. А. И. Герцена, формирование новых договоров.
5. «Нагрузка (кафедры)». Реализован режим просмотра и распределения основной нагрузки по основным образовательным программам.
6. В ресурсе реализована гибкая система авторизации, позволяющая каждому пользователю иметь доступ в соответствии с правами.

Архитектура системы реализована так, что для каждого ресурса создается отдельный класс контроллера и модели, так как ресурсы работают с различными таблицами БД и SQL-запросами (листинг 4).

public function __construct(Indplan $model)
{
$this->model = $model;
}

Листинг 4. Фрагмент конструктора класса контроллера ресурса «Индивидуальный план».

В методах контроллера происходит вызов методов модели, обеспечивающих выполнение запросов к БД в соответствии с функционалом ресурса (листинг 5).

public function index()
{
$data = $this->model->getEducLevels();
// Дальнейшая реализация…
}
Листинг 5. Фрагмент метода класса контроллера.

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

public function getEducLevels()
   {
    return DB::select('select 0 as id, \'Все уровни\' as NAME
     from RDB$DATABASE
     union all
     select ed_lvl.id, ed_lvl.name
     from s_educ_level ed_lvl
     where (id > 0) and (id < 4)
     order by 1, 2');
  }
Листинг 6. Метод getEducLevels модели.

При разработке системы веб-ресурсов использовались следующие технологии:
• система контроля версий git для хранения информации об изменении файлов;
• серверная часть: маршрутизации, доступ к БД был реализован с помощью PHP фреймворка Laravel;
• для доступа к библиотекам с открытым исходным кодом были использованы такие пакетные менеджеры как composer и npm [3];
• клиентская часть реализована на языке JavaScript и библиотеке jQuery;
• для реализации адаптивной верстки была использована библиотека фронт-энд компонентов, которая позволяет использовать Google Material Design – Material Design Lite [4];
• в качестве системы сборки для компиляции sass и less файлов, JavaScript модулей, транспиляции JavaScript используется Webpack [5].

Система веб-ресурсов для управления и организации учебным процессом, базирующаяся на рассмотренных технологиях проходит апробацию в РГПУ им. А. И. Герцена.

Литература:
1. Laravel – The PHP Framework [Electronic resource]. – Mode of access: https://laravel.com/. – Date of access: 05.04.2019.
2. Баранова Е.В., Швецов Г.В. Модель интегрированной системы веб-приложений для организации и управления учебным процессом в университете. Новые образовательные стратегии в современном информационном пространстве: Сборник научных статей по материалам международной научной конференции 1 – 12 апреля 2018 года. – СПб.: Изд-во РГПУ им. А.И. Герцена, 2018.
3. Npm – Node.js Package Manager [Electronic resource]. – Mode of access: https://www.npmjs.com/. – Date of access: 06.04.2019.
4. Mdl – Material Design Lite [Electronic resource]. – Mode of access: https://getmdl.io/. – Date of access: 06.04.2019.
5. Webpack [Electronic resource]. – Mode of access: https://webpack.js.org/. – Date of access: 06.04.2019.

Комментарии

Оставьте свой комментарий