1. Создадим проект «Диалоговые окна».
См. «Общие понятия - lesson 04» раздел 1. Как создать проект в NetBeans.
См. Диалоговые окна - lesson 01. Основные подходы к программированию.
Создать проект в NetBeans.
Попробуем разобраться как можно заставить правильно взаимодействовать PHP, HTML, CSS и JS на одной странице. Для этого создадим проект в NetBeans:
Открываем NetBeans;
Меню Файл/Создать проект;
Выбираем PHP, жмем далее;
Вводим имя проекта «_mdw» (без кавычек);
Указываем расположение (папку с проектом), жмем далее;
Выполнение: «Встроенный веб-сервер PHP», жмем готово;
Будет создан проект с именем «_mdw» в котором будет создана папка «Исходные файлы» и в ней 1 файл “index.php”.
В папке «Исходные файлы» создадим папку «_library» - сюда будем помещать наши библиотеки. Папка «_library» нужна что бы в дальнейшем мы могли легко переместить библиотеки в любой проект, не изменяя ссылки на файлы.
В папке «_library» создадим папку «_common» для общих файлов и библиотек (работу этой библиотеки рассмотрим далее), которые будут использоваться в других библиотеках:
_base_funk_class.php – класс php для работы с базой данных;
js – генерация капчи;
css - общая библиотека стилей для всех типов модальных окон;
jquery-3.3.1.min.js – библиотека JQuery;
В папке «_library» создадим папку «_mdw_txt» для нашей библиотеки «модальное диалоговое окно для ввода информации (текста и картинок)»;
В папке «_library/_mdw_txt» создадим папку «img» для картинок, используемых в форме:
я в нее уже поместил необходимые картинки, вы их можете заменить;
В папке «_library/_mdw_txt» создадим файлы:
js- управляющий файл JavaScript на языке;
css – файл каскадная таблица стилей проекта на языке css;
php- файл сохранения картинок в папку и имен картинок в базу на языке PHP;
_mdw_txt_check_user_base.php - файл проверки повторения имени пользователя в базе на языке PHP;
Файл index.php удалим.
В папке «Исходные файлы» создадим папку _user_reg (в ней мы создадим библиотеку «Регистрация пользователя» - как пример для вызова библиотеки _mdw_txt);
В папке «_user_reg» создадим файлы:
js- файл параметров для библиотеки _user_reg на языке JavaScript;
php- файл для приема информации из формы из AJAX на языке PHP;
Закройте все открытые файлы в рабочей области.
2. Как будем организовывать создание и отладку проекта.
Итак,
в папке _library/_mdw_txt находятся файлы библиотеки Modal Dialog Window;
в папке _user_reg расположены файлы библиотеки «Регистрация пользователя», которые будут использовать библиотеку Modal Dialog Window;
мы будем вызывать библиотеку «Регистрация пользователя», которая в свою очередь будет вызывать библиотеку Modal Dialog Window, которая вернет назад необходимую информацию.
В реальном проекте вызов библиотеки «Регистрация пользователя» будет производится из нужного места проекта, а пока, для отладки вызов библиотеки «Регистрация пользователя» будем производить из файла «__debug_user_reg.php».
ВНИМАНИЕ! Проект созданный на этом уроке можно скачать в конце урока.
Ну если логика подхода понятна двигаемся дальше.
3. Создадим файл отладки библиотеки.
В папке «Исходные файлы» создадим файл «__debug_user_reg.php» - бланк отладки библиотеки _user_reg, который будем использовать для запуска и отладки библиотек _user_reg и соответственно _mdw_txt. В этом файле:
подключим необходимые библиотеки;
произведем вызов библиотеки регистрации пользователя.
Для подключения библиотек хватайте мышкой файл на панели Проекты и тяните его в рабочую область, не забываем, что подключать эти файлы нужно в области html файла php:
подключим библиотеку JQuery: jquery-3.3.1.min.js
подключим таблицы стилей из папки «mdw_txt»: css
подключим таблицы стилей из папки «_common»: css
подключим файл параметров: js
подключим файл управления отображения формы: js
файл «debug_user_reg.php» будем запускать комбинацией клавиш «shift+F6» (при этом файл должен быть выбран в NetBeans).
Написание стилей CSS я рассматривать не буду (это элементарно - мы договорились, что прежде чем начинать изучение вы должны знать языки, используемые мной в проекте) - таблицу стилей можно взять из моего файла или изменить оформление в соответствии со своими вкусами.
4. Создадим бланк файла параметров формы «_blank_param.js».
Зачем нужен бланк? В дальнейшем мы будем его использовать, копируя в папку новой библиотеки и внося необходимые изменения.
Файл параметров формы «_blank_param.js» (на картинке фрагмент файла) мы дальнейшем будем использовать как бланк будем копировать его в нужную библиотеку и изменять с соответствие с необходимостью.
Файл параметров формы состоит из объектов, содержащих параметры для определенных действий с формой:
param_user_extra - дополнительные параметры для передачи с данными формы "через" AJAX;
fld_display_form - поля для отображения в форме:
Создавать форму мы будем на лету, включая в нее поля, указанные пользователем в объекте «fld_display_form». Из всех полей, перечисленных в этой переменной, включены будут только со значение «true». Какие поля доступны для выбора поля понятно из имен элементов объекта «fld_display_form»;
param_input_form - параметры формы:
Часть параметров можно задать здесь (я задал стандартные), часть в процессе исполнения программы;
param_save_img - параметры сохранения img в папку, и имени img в базу
здесь параметры делятся на две группы - параметры сохранения img в папку и параметры сохранение img в базу. Если первый параметр группы указан FALSE – остальные параметры игнорируются. Параметры имя поля страницы сохранения img и страница сохранения img – дополнительные (пока можно проигнорировать); Параметры ширина img при сохранении на диск и степень сжатия jpeg-img при сохранении на диск – нужны для изменения размеров картинки при сохранении в папку (для экономии места);
param_valid_img - параметры валидации img;
var param_fld - параметры полей формы
параметр «check_repeat_name» - проверить повторение имени в базе – используется при регистрации пользователя;
var param_sum - параметры капчи;
Значения других параметра можно найти в комментариях, в файле параметров.
5. Создадим бланк формы.
Блок бланка формы напишем в файле управления «_mdw_txt.js». Создавать бланк формы будем, тегами html на языке JavaScript. (На картинке фрагмент.) В файле «_mdw_txt.js» начало блока я отметил /* start БЛАНК ФОРМЫ */ конец: /* end БЛАНК ФОРМЫ */
5.1 Список полей формы.
На картинке фрагмент.
Создадим следующие поля в форме:
fld_name (текстовое) - поле ввода имени пользователя;
fld_mail (текстовое) - поле ввода email пользователя;
fld_phone (текстовое) - поле ввода телефона пользователя;
fld_opt_sel (раскрывающийся список) - поле выбора параметра;
fld_radio (переключатели) - поле выбора одного параметра их нескольких;
fld_checkbox (флажки) - поле выбора нескольких параметров их нескольких;
fld_time (время) – поле ввода времени;
fld_date (дата) – поле ввода даты;
fld_pass (пароль) - поле ввода пароля;
fld_pass_conf (подтверждение пароля) - поле ввода подтверждения пароля;
fld_text_area (текстовое) – поле ввода текста;
fld_input_img (data) – поле ввода картинок;
fld_captcha (капча) – поле ввода капчи (или каптчи);
comment – поле отображения комментария;
button (Ok) – кнопка сохранения;
button (Cancel) – кнопка отмены;
5.2 Функции отображения формы.
каждое поле будем создавать с помощью вызова соответствующей функции при условии если поле включено в параметрах:
function set_form_head (param_input_form) – создадим заголовок формы;
function set_fld_name() – создать поле ввода имени;
function set_fld_mail() – создать поле ввода почтового адреса;
… – создать остальные поля;
function set_form_ending (param_input_form) – создадим окончание формы;
Создадим функцию управляющую созданием формы на основе чтения параметров из файла параметров формы
function create_hidden_mw() – создать скрытую форму
после вызова этой функции код html формs будет создан, но на экране форма отображаться не будет (скрытая).
Создадим функцию отображающую форму на экране:
function dispalay_mw() - отобразить mdw с формой;
Создадим функцию настройки стилей формы:
function set_mw_form_style(param_input_form) – изменение таблицы стилей формы;
Создадим функцию управления отображением. Функция сработает после подключения файла «_mdw_txt», сразу после загрузки страницы:
$(document).ready(function () { // ждем загрузки страницы
create_hidden_mw(); // создадим скрытое mdw с формой
dispalay_mw(); // отображаем mdw с формой
});
5.3 Ошибки и предупреждения NetBeans. Объявление глобальных переменных.
На номере строки в рабочей панели NetBeans отображает ошибки и предупреждения:
если навести мышь на значок – всплывет окошко с описанием;
если щелкнуть мышью по значку – выплывет окошко со способами решения;
Перед запуском программы желательно избавиться от всех ошибок и предупреждений.
Сформируем в начале файла строку с глобальными переменными заданными в файле параметров. Для этого:
Наводим мышь на предупреждение NetBeans на номере строки, появится сообщение «Глобальная переменная … не объявлена» (эта глобальная переменная объявлена в другом файле и в этом файле пока не видна, поэтому NetBeans предупреждает);
Щелкаем по предупреждению – отобразится способ разрешить проблему «Создать глобальную директиву …» щелкаем по выбранному предложению (предложений может быть несколько);
Проделать это для всех необъявленных в данном файле переменных, в начале файла будет сформирована строка:
/* global param_input_form, fld_display_form, param_fld, param_valid_img, param_sum, param_save_img, param_user_extra */
6. Создадим файл параметров формы регистрации пользователя.
Скопируем бланк параметров формы js созданный в предыдущей главе в папку _user_reg и переименуем в _user_reg_param.js;
Внесем в параметры необходимые изменения:
В fld_display_form включим параметры:
fld_name: true;
fld_pass: true;
fld_captcha: true;
Остальные параметры false;
param_input_form:
file_output_data: «_user_ajax_data.php»; // имя файла для данных формы "через" AJAX;
file_output_data: «_user_ajax_data.php», // имя файла для данных формы "через" AJAX;
id_input_form_div: «_user_reg_div_id», // id div формы;
id_input_form: «_user_reg_id», // id формы;
legend_form: «Регистрация пользователя», // легенда формы;
ok_form_button_value: «Регистрация», // надпись на кнопке "Ок";
cansel_form_button_value: «Отмена», // надпись на кнопке "Cansel";
param_fld:
check_repeat_name: true, // проверить повторение имени в базе;
Остальные параметры можно проигнорировать или изменить по своему вкусу.
7. Отладка формы.
Отладчик Chrome:
Запускаем файлphp – для этого можно открыть файл в рабочей области NetBeans, а затем меню Выполнить / Выполнить файл (shift+F6). Обратите внимание не запустить проект - для запуска проекта нужен файл “index.php” или “index.html”, а именно выполнить файл; Другой способ (не открывая файл) – щелкаем мышью по файлу в панели «Проекты» и жмем “shift+F6”
откроется браузер chrome и в нем должна отобразиться форма.;
в Chrome жмем ctrl+shift+I – откроется о панель отладки. Если панель открыта впервые, то отобразится «ошибка чтения иконки проекта», при обновлении окна (F5) ошибка не отображается.
В панели «Elements» отображён HTML код страницы, прежде чем продолжать разберитесь как мы его получили.
Необходимо научиться работать с отладчиком Chrome – для начала научиться просматривать код см. видео.
Теперь все готово к добавлению функций формы и настройке формы.
Скачать проект текущего урока