Этапы разработки клиент-серверного web-приложения - Программирование клиентской части web-приложения

Для клиентской части веб-сайта использовались языки разметки HTML и CSS, а также же скриптовый язык JavaScript – обязательные технологии для разработки frontend части любого веб-приложения. Также использовались bootstrap, jQuery и jQuery-dm-uploader [34].

JavaScript подключается к HTML-странице и выполняет код на стороне клиента (браузера). Возможны два варианта подключения JavaScript к странице HTML:

JavaScript-среды поддерживают две версии языка: строгий режим и не строгий режим.

Включим строгий режим путем добавления в начале кода строковой константы:

“use strict”

Разработка на клиентской части велась с использованием строгого режима.

Основная часть клиентского кода велась с использованием библиотеки jQuery.

Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Сейчас разработка jQuery ведётся командой jQuery во главе с Джоном Резигом.

JQuery-dm-uploader – Query Ajax File Uploader Widget. Виджет устанавливаем с открытого репозитория по ссылке https://github.com/danielm/uploader.

Подключение файлов стилей и скриптов осуществляется в файле layouts/app.blade.php. Пути к файлам прописываем с помощью функции asset(). Тэги помещаем в диррективу @section, закрывая ее диррективой @show. Что позволит в последствии подключиться к этой переменной в файле подшаблона и дописать переменную со стилями или скриптами дополнительными элементами.

Рассмотрим реализацию множественной загрузки изображений с помощью перетаскивания. В файле demo-config.js - прослушка событий перетаскивания и вызов серверного скрипта backend/upload/, в котором происходит загрузка файлов на сервер.

$(function(){
  $('#drag-and-drop-zone').dmUploader({ 
    url: '/backend/upload',
    maxFileSize: 3000000, // 3 Megs 
    onDragEnter: function(){
      // Happens when dragging something over the DnD area
      this.addClass('active');
    },
    onDragLeave: function(){
      // Happens when dragging something OUT of the DnD area
      this.removeClass('active');
    },
    onInit: function(){
      // Plugin is ready to use
      ui_add_log('Penguin initialized :)', 'info');
    },
    onComplete: function(){
      // All files in the queue are processed (success or error)
      ui_add_log('All pending tranfers finished');
    },
    onNewFile: function(id, file){
      ui_add_log('New file added #' + id);
      ui_multi_add_file(id, file);
    },
    onBeforeUpload: function(id){
      ui_add_log('Starting the upload of #' + id);
      ui_multi_update_file_status(id, 'uploading', 'Uploading...');
      ui_multi_update_file_progress(id, 0, '', true);
    },
    onUploadCanceled: function(id) {
      // Happens when a file is directly canceled by the user.
      ui_multi_update_file_status(id, 'warning', 'Canceled by User');
      ui_multi_update_file_progress(id, 0, 'warning', false);
    },
    onUploadProgress: function(id, percent){
      // Updating file progress
      ui_multi_update_file_progress(id, percent);
    },
    onUploadSuccess: function(id, data){
       console.log(data);
      var obj = JSON.parse(data);
    });
});

Благодаря библиотеке jQuery, модулю JQuery-dm-uploader и вспомогательным классам была реализована множественная загрузка файлов на сервер.