1. Диалоговое окно.
Диалоговое окно (Dialog Box) - дочернее окно главного окна приложения, которое применяется как для отображения информации о состоянии приложения, так и для ввода пользователем новых данных.
Виды диалоговых окон:
Модальное (Modal Window или MW) - диалоговое окно получает управление и удерживает его до тех пор, пока его не закроет пользователь.
Немодальные (Modeless Window) – но можно переключиться в основное окно, не закрывая Немодальное (на практике почти не применяется);
В диалоговом окне можно разместить следующие элементы:
элементы управления(Controls) - например кнопки (Button), заголовки полей (label);
поля для ввода текстовых данных (Text Box);
поля для ввода текста (Text Area);
поле для ввода даты и времени (Date Time);
поле для ввода почтового адреса (Email);
поле для ввода пароля (Password);
поле для выбора файла с диска (File);
поле для выбора из списка(List Box) - для выбора элемента из предварительно созданного списка;
поле для выбора флажком (Check Box) - для установки или отмены параметра;
поле переключателя (Radio);
скрытые поля (Hidden) – для дополнительных данных;
и др.
2. HTML формы.
HTML формы — сложные элементы интерфейса, которые включают разные функциональные элементы: поля ввода, списки, подсказки, кнопки и т.д.
Выводится форма на экран на HTML;
Данные введенные в форму обрабатываются с помощью PHP или JS;
Давайте проанализируем вариант обработки результатов ввода в форму на PHP:
форма отображается на ПК пользователя, PHP работает удаленно (на сервере):
пользователь ввел данные в форму и нажал «Ok»;
данные с ПК пользователя «полетели» на сервер для обработки;
сервер обработал данные (например, сохранил в БД) и результаты полетели назад на ПК пользователя;
результат обработки отобразился на ПК пользователя;
Кроме накладных расходов на передачи туда-сюда через интернет вся эта процедура должна перезагрузить страницу на ПК пользователя – т.е. страница закрывается и опять считывается с сервера! Такой способ обработки форм считается устаревшим и сейчас его использование — это «Плохой тон в программировании».
А представьте если надо на ходу проверять результаты ввода в каждом поле сразу после ввода в это поле – например корректность ввода почтового адреса то выполнение такого алгоритма на PHP не представляется возможным.
Сейчас принято обрабатывать результаты ввода в форму на JavaScript, а если быть точным, то с помощью AJAX.
3. AJAX.
AJAX «асинхронный JavaScript и XML» - подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.
Сравнение стандартного подхода и AJAX:
В классической модели веб-приложения:
Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент.
Браузер формирует и отправляет запрос серверу.
В ответ сервер генерирует совершенно новую веб-страницу и отправляет её браузеру и т. д., после чего браузер полностью перезагружает всю страницу.
При использовании AJAX:
Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент.
Скрипт (на языке JavaScript) определяет, какая информация необходима для обновления страницы.
Браузер отправляет соответствующий запрос на сервер.
Сервер возвращает только ту часть документа, на которую пришёл запрос.
Скрипт вносит изменения с учётом полученной информации (без полной перезагрузки страницы).
Преимущества:
Экономия трафика;
Уменьшение нагрузки на сервер;
Ускорение реакции интерфейса;
Возможности для интерактивной обработки;
Мультимедиа не останавливается;
Что бы ускорить, укоротить и сделать удобнее использование JavaScript и AJAX мы будем пользоваться библиотекой JQuery.
4. jQuery.
JQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML, помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.
Возможности JQuery:
Движок кросс-браузерных CSS-селекторов, выделившийся в отдельный проект;
Переход по дереву DOM, включая поддержку XPathкак плагина;
События;
Визуальные эффекты;
AJAX-дополнения;
JavaScript-плагины.
JQuery, как правило, включается в веб-страницу как один внешний JavaScript-файл например с помощью html тега:
5. Валидация.
Еще одно понятие которое потребуется для создания диалоговой формы.
Валидация (Validation) – это набор процедур или действий, направленных на подтверждение при помощи объективных свидетельств, математических методов и измерений, приведения доказательств, что требования к процессу, проекту или системе выполнены и соответствуют заданным параметрам.
Поля в форме предназначены для сбора информации от посетителей страницы. Но несмотря на все усилия и объяснения, получение правильной информации может оказаться трудным делом. Нетерпеливые или невнимательные посетители могут пропускать важные поля, заполнять поле или несколько полей не полностью, да и попросту нажимать неправильные клавиши. Заполнив таким образом форму, они нажимают кнопку "Отправить", и серверная программа получает набор данных, с которыми она не знает, что делать.
Веб-странице требуется проверка введенных данных (валидация полей), т.е. способ обнаружения ошибок во введенных данных, а еще лучше — способ, не допускающий ошибок вообще.
На моем сайте валидация полей осуществляется на лету – непосредственно во время ввода данных. См. картинку:
В красном прямоугольнике – сообщение об ошибке с подсказкой;
В голубом прямоугольнике – подсказка;
В сером прямоугольнике – цвет сообщения – показывает правильность ввода (зеленый текст – правильно, красны – не правильно);
В зеленом прямоугольнике «зеленая галочка» - капча введена верно;
В малиновом прямоугольнике – доступ к кнопке «Отправить» будет открыт только при полном и правильном вводе данных.
6. Капча.
Капча — компьютерный тест, используемый для того, чтобы определить, кем является пользователь системы: человеком или компьютером.
Когда вы видите перед собой картинку с непонятным текстом или цифрами, вы сразу понимаете, что на ней написано, а компьютерная программа так сделать не может [или ей требуется большое количество времени и ресурсов на распознавание].
Капча не должна быть слишком сложной (или неудобочитаемой), и не должна быть слишком простой.
Нужна капча из-за мошенников, которые использую интернет для своих нечистых заработков. Взломы сайтов, рассылка спам сообщений по форумам и блогам, регистрация сотен аккаунтов [учетных записей] в различных сервисах. На всём этом можно зарабатывать.
7. Структурное программирование.
Структурное программирование — парадигма программирования, в основе которой лежит представление программы в виде иерархической структуры блоков - логически сгруппированный набор идущих подряд инструкций в исходном коде программы.
В соответствии с парадигмой, любая программа строится без использования оператора goto из трёх базовых управляющих структур:
последовательность,
ветвление,
цикл;
кроме того, используются подпрограммы. При этом разработка программы ведётся пошагово, методом «сверху вниз».
Подпрограмма - поименованная или иным образом идентифицированная часть компьютерной программы, содержащая описание определённого набора действий. Подпрограмма может быть многократно вызвана из разных частей программы.
При программировании мы будем использовать элементы объектно-ориентированного программирования.
Объектно-ориентированное программирование (ООП) - методология программирования, основанная на представлении программы в виде совокупности объектов, каждый из которых является экземпляром определённого класса, а классы образуют иерархию наследования.
Все это позволяет написать библиотеку программ, которые можно многократно использовать, изменяя лишь параметры вызова библиотеки. Т.е. мы создадим универсальную форму и будем ее использовать для разных потребностей.
8. Схема проекта.
Диалоговые окна поделим на несколько типов:
модальное диалоговое окно для ввода информации (текста и картинок);
модальное диалоговое окно для вывода текста с картинкой;
модальное диалоговое окно для увеличения (вывода) картинки или видео;
для этих модальных окон будем создавать отдельные библиотеки в одном проекте.
Создадим схему проекта см рис., где центр всей библиотеки – «Управляющая программа» – вызываемый файл, управляющий выводом MDW (modal dialog window) и возвращающий результат.
Продумаем систему сокращений для названий файлов. Отталкиваться будем от сокращения «_mdw» - modal dialog window (модальное диалоговое окно):
_mdw_txt - модальное диалоговое окно для ввода информации (текста и картинок);
_mdw_txt_param - файл параметров;
_mdw_txt_ajax_data - файл для приема данных формы из AJAX;
_mdw_txt_ save_img - файл сохранения картинок в папку и имен картинок в базу;
И т.д. по аналогии.
9. Выводы.
Для организации интерактивных страниц необходимо организовать диалог с пользователем;
Для организации диалога мы воспользуемся «Диалоговыми окнами»;
Обрабатывать результат ввода в форму мы будем с помощью JavaScript (JQuery и AJAX);
Данные вводимые в форму нужно проверять на правильность (Валидация);
Для защиты от мошенников необходима Капча.
Итак, на нашей будущей форме должны быть следующие элементы:
Поля для ввода или выбора текстовых данных;
Поля для ввода медиа-данных (картинок);
Поле для зашиты от мошенников – капча:
Кнопки управления формой.
Программировать будем, используя парадигму структурного программирования с элементами объектно-ориентированного программирования. (Строго говоря JavaScript – язык, не полностью совместимый с ООП)
Подходы определены - перейдем к созданию библиотеки.
