[Iws] Диалоговые окна - lesson 02


Диалоговые окна. Подходы к созданию и отладке проекта. Бланк формы. Файл параметров формы. Отладка в Chrome.

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 – для начала научиться просматривать код см. видео. Теперь все готово к добавлению функций формы и настройке формы. Скачать проект текущего урока