web платформа - 2018 : rapid application development (RAD) начинающего web-разработчика!


PHP+JS: интерактивность для ввода и сохранения данных!


Рассмотрим пример организации интерактивности с помощью PHP-функций и сопутствующего им JS. Сделать это просто. Вспомним описание PHP-функций. Если на странице используется некоторая PHP-функция, например php11, то в HTML тексте страницы где-то вставлена переменная {PHP= {php11}}. Эта переменная будет заменена при формировании страницы на блок DIV, содержащий вычисленный контент, т.е. на то, что функция выводит с помощью команд ECHO или PRINT. Указанный блок DIV будет иметь ID=PHP_php11. Таким образом, на странице вместо переменной появляется обозначенное (id=PHP_имяФункции) место, куда вставлены результаты работы PHP-функции.
     С помощью технологии AJAX можно запросить у системы изменение любого параметра любой PHP-функции и получить в ответ.  В ответе будет указаны имена перевычисленых функций, у которых изменился вычисленный контент. Также будет указан и изменившийся контент. Имея имена функций и новое содержимое контента, остается поменять innerHTML соответствующих именованных блоков. При этом вам не надо заботиться о деталях - на стороне пользователя может быть вызвана системная JS-функция getPHP(имя_изменяемого_параметра,новое_значение), которая и запустит всю вышеописанную работу: от отправки данных до изменения информации на странице. Давайте рассмотрим это на примере.

Для создания интерактивности понадобятся две PHP-функции. Одна не будет содержать входящих параметров, не будет генерировать выводимый на страницу контент, при этом будет иметь исходящий параметр, инициализированый начальным значением. Этот исходящий параметр будет являться источником данных для входящего параметра другой PHP-функции, которая будет выводить контент на страницу. Для демонстрации интерактивности нам надо будет менять значение входящего параметра второй функции, чтобы она перевычисляла выводимый контент, а мы будем наблюдать это на странице. Итак, давайте назовем первую start.


и определим, что param_out будет являться исходящей переменной

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

Создадим входящий параметр, тем самым связав его с исходящим параметром первой функции. 

А поскольку первоначальное значение этого параметра является строка "ничего не нажато!", то при формировании страницы будет выведено "значение праметра=ничего не нажато!".

Остается создать интерактивность. Для этого пропишем PHP-функции с именем php11 текст JS-функции, которая отработает при показе страницы.Т.е. после загрузки страницы командами JS добавим после блока с ID=PHP_php11 пару кнопок. Они будут служить для вызова функции, создающей AJAX-связь для обновления контента в нужном месте. Обратите внимание, что для одной кнопки указан входящий параметр, а для второй исходящий. Дело в том, что система по-любому меняет исходящий параметр, так как он может являться источником данных для нескольких входящих переменных в разных функциях.


Замечание: Препочтительно функции getPHP после праметров указать еще и событие щелчка: getPHP('имя_параметра','значение',event), чтобы в браузере FF работал индикатор загрузки "". Результат вы можете увидеть ниже:

значение параметра=ничего не нажато!


Что происходит при нажатии кнопки? Вызывается JS-функция getPHP, которая сообщает системе, что меняется такой-то параметр и передает его значение. Система перевычисляет те PHP-функции, которые затрагивает изменение указанного параметра. Странице передается какие функции изменили выводимый контент и, конечно, сам перевычисленный контент. Поскольку на странице места-блоки DIV, которые содержат контент, вычисленный PHP-функциями, известны через их ID, то информация в нужных местах меняется на присланный контент. Кстати, начните имя PHP-функции с символа '_' (подчеркивание) и ее код будет выполняться при всех перевычислениях, т.е. независимо от входящих переменных или их отсутствия. getPHP может передавать два параметра сразу: getPHP('имя_параметра1','значение_параметра1','имя_параметра2','значение_параметра2') 

Что еще хотелось бы добавить. Страницы могут динамически меняться и без запроса на изменение переменных. Например, вы меняете переменные на одной странице, а контент меняется на другой странице, которая использует эту переменную. Для этого следует использовать JS функцию getSSE(). JS-функция работает подобно getPHP, но без параметров. Ее задача с периодом 1сек (2 сек для IE и EDGE) проверять, нет ли изменений, которые следует вывести на страницу. Проверка на изменения производится без постоянных запросов сервера со страницы, так как один раз запускается и выполняется на сервере. К сожалению, EDGE и IE будут "дергать" сервер каждый раз- поэтому-то и выбран интервал 2сек. 

Рассмотрим достаточно интересный пример использования getSSE(). Положим, что в функции _main делается запрос к базе данных. Наименование начинается с подчеркивания, поэтому эта PHP-функция будет выполняться каждый раз, когда будет иницировано перевычисление. Результат запроса система кэширует посредством md5 и это является значением исходящей переменной. Вторая PHP-функция будет получать значение кэша как входящий параметр, а также самостоятельно обращаться к БД и выводить данные на страницу. Пока запрос из первой функции будет возвращать одни и те же данные, соответственно и кэш не будет меняться и на входе второй функции изменений нет и ее не требуется перевычислять. Как только данные изменятся, то изменится и кэш. А это заставит вторую функцию, которая использует значение кэша как входящий параметр, вычислиться, т.е. обратиться за новыми данными в БД и выдать новый контент на страницу.

Как быть, если PHP-функция генерирует на выходе больше двух полей для ввода данных, например шесть input-ов? В этом случае в JS-скрипте страницы можно использовать функцию getPHP следующим образом:
getPHP('[имя_параметра1=>значение1,имя_параметра2=>значение2,имя_параметра3=>значение3..... и т.д....]')
Т.е. параметром функции getPHP является строка в виде ассоциативного массива. Количество параметров здесь определено массивом, что удобно для добавления записей, например, в базу данных.

Для выбора и ввода информации из таблицы базы данных предусмотрена JS-функция getSPR(event,bdName,tabName,Elem). Параметр event не нуждается в пояснениях, bdName - имя файла базы данных SQLite, tabName - имя таблицы. Если не указывать параметр Elem, то результат выбора будет подставлен в элемент, вызвавший событие click или change, но можно указать как сам элемент страницы, принимающий выбранное згачение, так и его ID. В более продвинутом варианте параметр Elem может быть представле объектом: 
{fields,get_grp,tab_class,elemID,SQLwhere,filter} -скобки указывают, что это объект, могущий иметь следующие свойства:

fields
- имена полей, которые следует показать кроме Name (строка, где имена указаны через запятую),
get_grp - пока не используется,
elemId - это ID приемника выбранного значения, tab_class - имя класса из файла CSS для определения оформления вывода, 
SQLwhere- выражение SQL, которое следует применить при выборке из таблицы,
filter - если указано значение 1, то вверху окна выбора можно будет вводить символы для динамической фильтрации выведенных значений.



Также элемент страницы, принимающий выбранное значение получает атрибут sprID с rowID выбранного значения таблицы. Это позволяет легко организовать ввод значений для таблиц с foreignkey-полями. Какой бы html-элемент не являлся приемником выбранного значения, для него можно определить onchange-функцию (js страницы), которая будет вызвана после выбора значения и записи его в элемент-приемник. Таким образом легко производить контроль за введенным значением. Как видите, перед разработчиками открываются широкие горизонты для работы с базами данных. Система позволяет сосредоточиться на предметной области, оставив ей самой разбираться с деталями!


WEB-платформа для владеющих PHP
» инструмент ускоренной разработки <IMG>-вых сайтов!