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

Авторы: ,

Рубрика: Технические науки

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

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

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

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

Кирин А. П., Виноградова М. В. Активный клиент веб-приложения для репозитория методических материалов // Молодой ученый. — 2017. — №13. — С. 54-60. — URL https://moluch.ru/archive/147/41431/ (дата обращения: 21.10.2018).



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

Ключевые слова: репозиторий методических материалов, активный веб-клиент, JavaScript, jQuery

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

Программа для работы с репозиторием должна обеспечивать:

1) Загрузку в репозиторий документов и их паспортов;

2) Формирование паспорта документа на основе имеющихся наборов дескрипторов и атрибутов, а также создание дескрипторов и атрибутов «на лету»;

3) Автозаполнение паспорта документа на основе его файла;

4) Поиск подходящих дескрипторов при вводе поискового запроса.

Для создания эргономичного приложения по работе с репозиторием требуется реализовать следующие возможности:

1) Динамические изменения элементов на веб-странице — это увеличивает гибкость формирования паспорта документа на страницах браузера;

2) Работа с сервером без перезагрузки страниц (AJAX) — это даст быстрое время отклика;

3) Реализация наиболее простого и приятного интерфейса для пользователя — повысит удобство работы с репозиторием.

Выбор технологии.

Существует несколько технологий создания веб-страниц: с помощью серверного языка программирования (PHP, Ruby, Python и т. д.), с помощью языка JavaScript и с помощью готовых библиотек JavaScript. Оценим эти технологии.

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

Язык JavaScript пригоден, так как он делает web-страницы «живыми» и в каждый браузер встроен интерпретатор JavaScript.

Использование библиотек упрощает разработку, поскольку обеспечивают удобную работу с HTML элементами, хорошую читаемость и упрощение кода. Готовые библиотеки JavaScript представляют собой набор многократно используемых объектов и функций. Они повышают эффективность разработки и уровень кросс-браузерности при разработке веб-приложений.

Существует множество JavaScript библиотек — jQuery, Mootools, Prototype и т. п. Библиотека jQuery имеет над другими библиотеками преимущества за счет широкой распространенности; качественной документации; хорошей производительности; наличия улучшенных UI-контроллеров; легкости освоения и простоты интеграции в веб-сайт.

Активная веб-страница для формирования паспорта документа.

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

На странице создания паспорта документа с набором дескрипторов и атрибутов используются 5 списков:

− Список всех дескрипторов и список выбранных дескрипторов (рис. 1);

− Список всех атрибутов и список выбранных атрибутов (рис. 2);

− Обобщенный список выбранных дескрипторов и атрибутов (рис. 3).

Рис. 1. Создание набора дескрипторов

Рис. 2. Создание набора атрибутов

Рис. 3. Результирующий набор дескрипторов и атрибутов

При клике пользователя по кнопке «вправо» или «влево» вызывается обработчик событий jQuery click() и с помощью метода appendTo() выполняется перенос из общего списка в список выбранных элементов. При добавлении дескриптора или атрибута в правый список, он автоматически добавляется в результирующий список элементов с помощью метода clone() и appendTo(). Данная реализация позволяет легко и понятно для пользователя собирать нужные наборы атрибутов и дескрипторов для дальнейшего заполнения.

Пример кода HTML:

//блок с общим списком

Теги

поле для поиска

//блок со стрелками



//блок со списком выбранных элементов

Результат набора тегов

Удалить свои теги

Пример кода jQuery:

//перемещение из колонки в колонки

$("body").on('click','.move', function(){

var i = $(this).attr("in"); // куда переместить

var o = $(this).attr("out"); // откуда переместить

//перечисление всех возможных вариантов

if (i == "result-tags" && o == "sel-tag") //из общего списка дескрипторов в выбранный список

{

$("#sel-tag option:selected").clone().appendTo("#sel2"); //создание копии элемента в конечный список

$("#sel-tag option:selected").appendTo("#result-tags"); //перенос в список выбранных десркипторов

}

//перечисление других возможных вариантов переноса

})

Рассмотрим задачу формирования полей паспорта из результирующего набора дескрипторов и атрибутов (рис.4). Для ее реализации необходимы один элемент типа «select” и одна кнопка для обработки выбранных элементов.

Рис. 4. Получение списка полей атрибутов и дескрипторов

При нажатии на кнопку вызывается обработчик события click(). И внутри события вызывается метод appendTo(). При решении предыдущей задачи он добавлял элемент внутрь списка, а сейчас он добавляет внутрь блока.

Пример jQuery:

//формирование поля для дескрипторов

$("#list-tegs").append('

  • '+optionsText[i]+'×
  • ');

    $("#list-tegs li > a").addClass('delete-li-field').addClass('pointer');

    //формирование поля для атрибутов

    $("#list-fields").append('

  • Удалить поле
  • ');

    $("#list-fields li > a").addClass('delete-li-field').addClass('pointer');

    Если пользователь по ошибке добавил не те атрибуты и дескрипторы, то по клике на надпись «Удалить поле» или «х» с помощью обработчика событий click() и методов appendTo() и remove() реализуется возврат дескриптора или атрибута в начальное поле и удаление из текущего блока.

    Пример jQuery:

    $("body").on('click','.delete-li-field', function () {

    $('#sel-attr').append('');

    $(this).parent().remove(); }

    На странице формирования паспорта после выбора прикрепленного файла необходимо автоматически генерировать наборы дескрипторов и атрибутов со значениями относительно этого файла, например, тип файла, его размер или дату создания. Для решения этой задачи необходимы следующие HTML-элементы (рис. 5):

    1. HTML-элемент со свойством type равным значению file (;
    2. HTML-элемент

      , для вывода результата загрузки файл на сервер;

    3. HTML-элемент , для формирования кнопки «Автозаполнение».

    Рис. 5. Автозаполнение атрибутов и дескрипторов для выбранного файла

    Пример HTML:

    Автозаполнение

    Пример jQuery:

    $(document).on('click', '.auto_check_file', function(){

    var path = $(this).attr('path');

    console.log(path);

    $.ajax({

    type: "POST",

    url: "/include/ajax/auto_check_file.php",

    data: "path="+path,

    dataType: "json",

    success: function (data) {

    $("#list-fields").append('

  • Удалить поле
  • ');

    //добавляем поля которые нам необходимы

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

    При нажатии у нас снова вызывается обработчик событий.click(). В нем вызывается ajax-запрос в формате jQuery ($.ajax();), который отправляет запрос на сервер для получения информации о выбранном файле (дата создания, владелец, расширение, MIME-type), данные он принимает в формате json. И с помощью метода appendTo() вставляет в блок элементы, перечисленные в решении предыдущей задачи (рис.6).

    Рис. 6. Результат обработки физического файла

    Активная веб-страница для формирования поискового запроса.

    Поиск осуществляется по ключевым словам — дескрипторам. Для упрощения ввода дескрипторов предлагается отображать список подобных (рис. 7). Для решения этой задачи необходимы поле ввода и блок для вывода результатов.

    Рис. 7. Выпадающий список дескрипторов при поиске

    При вводе некоторого набора символов вызывается обработчик событий keyup(), который реагирует на отжатие клавиши. Он принимает значение и вызывает ajax-запрос на сервер через файл-обработчик, который выполняет запрос в базу данных по поиску дескрипторов, удовлетворяющих вводимому значению. Данные возвращаются в формате json и выводятся с помощью метода appendTo(). При выборе некоторого дескриптора, его значение вставляется в поле ввода, для дальнейшего поиска.

    Пример jQuery:

    $('#input-tags-for-search').keyup(function(e){

    var nameTag = $(this).val();

    var lengthVal = nameTag.length;

    //если количество символов больше 0, то вызываем AJAX запрос

    if (lengthVal != 0) {

    $(this).next().css('display', 'inline-block').addClass('more-tags-srch').addClass('click-button'); //добавляем стили и классы к объекту

    //выполняем сам запрос

    $.ajax ({

    type: "POST",

    url: "./include/ajax/search_tags_by_name.php",

    data: "name="+nameTag,

    dataType: "json",

    success: function(data){

    //выводим результат как нам удобно

    $('#list-result-search-tags').empty();

    if (data.length > 0) {

    $('#list-result-search-tags').append('

    Возможно, вы хотели набрать:

    ');

    for (var i = 0; i < 5; i++) {

    $('#list-result-search-tags').css('display', 'block');

    $('#list-result-search-tags').append('

  • '+data[i].name+'
  • ');

    } }

    Заключение.

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

    Литература:

    1. Алексеев А. П. Введение в Web-дизайн. М.: СОЛОН-ПРЕСС, 2008. 192 с.
    2. Самойлов Е. Э. Web-дизайн для начинающих. М.: Триумф, 2009. 192 с.
    3. Мэрдок К. Л. JavaScript. Наглядный курс создания динамических Web-страниц: пер. с англ. / под ред. В. М. Неумоина. М.: Издательский дом «Вильямс», 2001. 288с. [Kelly L. Murdock. Your visual blueprint for building dynamic Web pages. Foster City, CA: IDG Books Worldwide, Inc, 1998. 288p.].
    4. Афанасьев Г. И., Тимофеев В. Б. Использование систем управления контентом для разработки и сопровождения web-приложений в целях учебного процесса // Инженерный вестник. МГТУ им. Н. Э. Баумана. Электрон. журн. 2013. № 11. Режим доступа: http://engbul.bmstu.ru/doc/640819.html (дата обращения 04.03.2017).
    5. Белоус В. В., Спиридонов С. Б., Постников В. М. Формализация процесса реализации цикла выпуска электронных периодических изданий // Наука и образование: электронное научно-техническое издание. 2013. № 11. С. 279–294. DOI: 10.7463/1113.0658430
    6. Виноградов В. И., Виноградова М. В. Возможности программирования libreoffice/openoffice для создания программ обработки документов // Инженерный журнал: наука и инновации. 2014. № 1. Режим доступа: http://engjournal.ru/catalog/it/hidden/1060.html (дата обращения 01.03.2017).
    7. Самохвалов Э. Н., Ревунков Г. И., Гапанюк Ю. Е. Генерация исходного кода программного обеспечения на основе многоуровневого набора правил // Вестник МГТУ им. Н. Э. Баумана. Сер. Приборостроение. 2014. № 5 (98). С. 77–87.
    8. Джексон П. Введение в экспертные системы: пер. с англ. М.: Издательский дом «Вильямс», 2001. 624с. [Jackson P. Introduction to Expert Systems. New York: Addison-Wesley Publishing Company, 1998. 624p.].
    9. Тоноян С. А., Сараев Д. В. Темпоральные модели базы данных и их свойства // Инженерный журнал: наука и инновации. 2014. № 12 (36). С. 15. Режим доступа: http://engjournal.ru/catalog/it/hidden/1333.html (дата обращения 21.03.2017).
    10. Галкин В. А., Осипов А. В. Оценка параметров системы мониторинга рабочих станций в локальной вычислительной сети // Инженерный вестник. МГТУ им. Н. Э. Баумана. Электрон. журн. 2014. № 10. С. 24. Режим доступа: http://engbul.bmstu.ru/doc/730565.html (дата обращения 21.03.2017).
    Основные термины (генерируются автоматически): HTML, атрибут, дескриптор, AJAX, список, помощь метода, пользователь, паспорт документа, элемент, активная веб-страница.


    Ключевые слова

    JavaScript, репозиторий методических материалов, активный веб-клиент, JQuery

    Похожие статьи

    Встраивание CSS-стилей в HTML-документы | Статья в журнале...

    Часто HTML документы используются для передачи в почтовых сообщениях

    Возможно указание правил стилизации применительно лишь к одному элементу с помощью HTML атрибута style.

    Также клиентское приложение служит входной точкой для пользователя.

    Использование JQuery на веб-сайтах | Статья в журнале...

    Документу производится с помощью тега. Сам тег.

    Обработать это событие можно с помощью метода ready().

    В JQuery есть несколько возможности обращение элемента страниц.

    Селектор может быть тег HTML, идентификатором, классом и т. д.

    Исследование угроз и проектирование модели разграничения прав...

    − целостности ЭД — неизменность системных атрибутов ЭД, четко идентифицирующего его в системе, а также прочих элементов ЭД сквозь все этапы его

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

    IT-технологии в маунтинбайке. Проект Spotmap

    Данный веб-сервер умеет обслуживать статические запросы, индексные файлы, автоматически создавать списки файлов и кеш дескрипторов открытых файлов.

    [8] AJAX, (Asynchronous Javascript and XML) — подход к построению интерактивных пользовательских интерфейсов...

    Автоматизированное добавление печатных штампов при помощи...

    Рисунки, таблицы, текст в несколько колонок, атрибуты шрифта и параграфы — все остается

    С помощью этого метода получается двойной интерфейс к объекту JavaScript, который связан с PDDoc.

    Добавить первую страницу другого PDF-документа в обработанный PDF-документ.

    Технология создания веб-сайта туристского предприятия...

    Страницы «Страны», «Визы», «Типы туров» и «Помощь туристу» содержат список дополнительных подразделов по

    Начиная с версии WordPress 3.6, если тема поддерживает HTML5 Markup, что имеет место, если включена такая поддержка с помощью функции

    Сетевые атаки. Виды. Способы борьбы | Статья в сборнике...

    РНР-скрипт в ответ на данный запрос генерирует HTML-страницу

    Различают XSS атаки двух видов: активные и пассивные.

    XML (eXtensible Markup Language) – это всем известный язык разметки, с помощью которого создаются XML документы, имеющие древовидную структуру.

    Управление техническими системами с помощью web-интерфейса

    Атрибутом этого уровня является центр управления производством, который

    Веб-интерфейс — это совокупность средств, при помощи которых пользователь

    Информация может быть введена пользователем в управляющих элементах форм в HTMLстраницах или передана...

    Обсуждение

    Социальные комментарии Cackle

    Похожие статьи

    Встраивание CSS-стилей в HTML-документы | Статья в журнале...

    Часто HTML документы используются для передачи в почтовых сообщениях

    Возможно указание правил стилизации применительно лишь к одному элементу с помощью HTML атрибута style.

    Также клиентское приложение служит входной точкой для пользователя.

    Использование JQuery на веб-сайтах | Статья в журнале...

    Документу производится с помощью тега. Сам тег.

    Обработать это событие можно с помощью метода ready().

    В JQuery есть несколько возможности обращение элемента страниц.

    Селектор может быть тег HTML, идентификатором, классом и т. д.

    Исследование угроз и проектирование модели разграничения прав...

    − целостности ЭД — неизменность системных атрибутов ЭД, четко идентифицирующего его в системе, а также прочих элементов ЭД сквозь все этапы его

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

    IT-технологии в маунтинбайке. Проект Spotmap

    Данный веб-сервер умеет обслуживать статические запросы, индексные файлы, автоматически создавать списки файлов и кеш дескрипторов открытых файлов.

    [8] AJAX, (Asynchronous Javascript and XML) — подход к построению интерактивных пользовательских интерфейсов...

    Автоматизированное добавление печатных штампов при помощи...

    Рисунки, таблицы, текст в несколько колонок, атрибуты шрифта и параграфы — все остается

    С помощью этого метода получается двойной интерфейс к объекту JavaScript, который связан с PDDoc.

    Добавить первую страницу другого PDF-документа в обработанный PDF-документ.

    Технология создания веб-сайта туристского предприятия...

    Страницы «Страны», «Визы», «Типы туров» и «Помощь туристу» содержат список дополнительных подразделов по

    Начиная с версии WordPress 3.6, если тема поддерживает HTML5 Markup, что имеет место, если включена такая поддержка с помощью функции

    Сетевые атаки. Виды. Способы борьбы | Статья в сборнике...

    РНР-скрипт в ответ на данный запрос генерирует HTML-страницу

    Различают XSS атаки двух видов: активные и пассивные.

    XML (eXtensible Markup Language) – это всем известный язык разметки, с помощью которого создаются XML документы, имеющие древовидную структуру.

    Управление техническими системами с помощью web-интерфейса

    Атрибутом этого уровня является центр управления производством, который

    Веб-интерфейс — это совокупность средств, при помощи которых пользователь

    Информация может быть введена пользователем в управляющих элементах форм в HTMLстраницах или передана...

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