Во второй статье нашей серии о дизайне многостраничных форм мы собираемся создать таблицы базы данных, необходимые для хранения пользовательских данных формы. Мы также углубимся в процесс сохранения первой страницы данных формы и отображения второй страницы для пользователя. Мы используем некоторые базовые PHP и SQL для достижения наших целей проектирования. (Если вы хотите узнать больше о PHP, наш партнерский сайт, PHPMaster.com , предлагает множество руководств от новичка до эксперта .)
Шаг 1: Использование phpMyAdmin для создания таблицы базы данных
Если вы никогда не работали с phpMyAdmin, это большой шаг для вас. Я понимаю, что это может быть сложно, но разработка пользовательских форм обычно означает, что вам понадобятся пользовательские таблицы базы данных. Хотя вы можете использовать существующие встроенные таблицы данных WordPress и сохранять эту информацию в качестве пользовательской мета-версии, вам придется перепрыгивать через множество других обручей, чтобы это работало. В конце концов, избежать phpMyAdmin намного сложнее, чем изучить его.
Итак, перейдите к вашему хостинг-провайдеру домена, войдите в систему и перейдите в панель управления хостингом. Вы должны увидеть кнопку или ссылку для phpMyAdmin или другого инструмента управления базами данных. Поскольку подавляющее большинство провайдеров хостинга доменов используют phpMyAdmin, я буду использовать это в качестве своего примера.
После входа в phpMyAdmin перейдите на вкладку SQL для установки WordPress и вставьте следующий код:
[sourcecode language = ”sql”]
CREATE TABLE `shopping_preferences` (
`id` INT (7) NOT NULL AUTO_INCREMENT,
`first_name` VARCHAR (50) NOT NULL,
`last_name` VARCHAR (50) NOT NULL,
`email` VARCHAR (50) NOT NULL,
`phone` VARCHAR (12) NOT NULL,
`zip_code` VARCHAR (5) NOT NULL,
`гендер` INT (1) NOT NULL,
`age` INT (3) NOT NULL,
`Education` VARCHAR (50) NOT NULL,
`доход` VARCHAR (50) НЕ NULL,
`location` VARCHAR (50) NOT NULL,
`Categories` VARCHAR (400) NOT NULL,
`page` INT (1) NOT NULL,
`timestamp` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
ПЕРВИЧНЫЙ КЛЮЧ (`id`)
)
[/исходный код]
Конечно, вы можете изменить этот код по мере необходимости, но это приведет к созданию новой таблицы данных и позволит вам начать добавлять содержимое из входных данных нашей многостраничной формы.
Шаг 2: Добавление данных первой страницы
Для этого шага мы выполним две вещи:
- Отправьте входные данные из первой страницы в таблицу базы данных, которую мы создали на шаге 1
- Получите идентификатор данных формы, чтобы мы могли продолжать добавлять больше информации по мере того, как пользователь заполняет формы.
Чтобы добавить данные в нашу таблицу базы данных, мы будем использовать встроенный WordPress $ wpdb. Несмотря на то, что вы можете создать сценарий MySQL INSERT, при работе с базами данных WordPress рекомендуется использовать их тщательно разработанную функциональность.
Это простой процесс, который также является наименее интуитивным за всю историю … сначала. Как только вы освоите работу с $ wpdb, все будет в порядке.
Во-первых, нам нужно получить данные POST на первой странице нашей формы. Если вы когда-либо работали с формами, это знакомый процесс.
Процесс вставки начинается с определения столбцов с использованием формата массива, назначенного переменной. Тогда функция вставки берет это оттуда.
[sourcecode language = ”php”]
// Стартовая страница 2 формы
elseif ($ page == 1) {
// Получение данных POST, предоставленных пользователем
$ first_name = $ _POST [‘first_name’];
$ last_name = $ _POST [‘last_name’];
$ email = $ _POST [’email’];
$ phone = $ _POST [‘phone’];
$ zip_code = $ _POST [‘zip_code’];
// Назначаем таблицу и входные данные для нашей следующей функции INSERT
$ page_one_table = ‘shopping_preferences’;
$ page_one_inputs = array (
‘first_name’ => $ first_name,
‘last_name’ => $ last_name,
’email’ => $ email,
‘телефон’ => $ телефон,
‘zip_code’ => $ zip_code,
‘page’ => $ page
);
// Вставляем данные в новую строку
$ insert_page_one = $ wpdb-> insert ($ page_one_table, $ page_one_inputs);
// Захватим ID строки, которую мы вставили для дальнейшего использования
$ form_id = $ wpdd-> insert_id;
echo ‘<h3> Вы попали на 2-ю страницу! </ h3>
Вот ваши входные данные формы:
Имя: ‘ . $ first_name. ‘
Фамилия: ‘ . $ last_name. ‘
Эл. адрес: ‘ . $ email. ‘
Телефон: ‘ . $ телефон. ‘
Почтовый Индекс: ‘ . $ zip_code. ‘
Идентификатор формы: ‘. $ form_id. «;
} // Конечная страница 2 формы
[/исходный код]
В последней части кода мы выполняем небольшую начальную проверку наших данных, отображаем наше сообщение о том, как сделать это на второй странице формы, а затем показываем сохраненные входные значения пользователю, который их предоставил. Если у нас есть значение идентификатора формы, мы успешно вставили строку!
Шаг 3: Добавление формы второй страницы
Итак, мы вставили строку данных с нашей первой страницы формы, и теперь мы готовы собрать еще немного информации. На этот раз мы хотим получить некоторые социально-экономические данные. Даже если в этот момент пользователь нам поможет, у нас все еще есть некоторая полезная информация, которую мы можем использовать, чтобы связаться с ними позже.
После вышеприведенного кода $ form_id мы собираемся заменить остальные и добавить вторую страницу нашей необычной формы:
[sourcecode language = ”php”]
echo ‘<form method = «post» action = «‘. $ this_page. ‘»>
<метка для = «пол» id = «пол»> Пол: </ label>
<выберите имя = «пол» />
<option value = «nothing» selected> Select Gender </ option>
<option value = «0»> Female </ option>
<option value = «1»> Male </ option>
</ Выберите>
<label for = «age» id = «age»> Age: </ label>
<input type = «text» name = «age» id = «age» />
<label for = «education» id = «education»> Образование: </ label>
<выберите имя = «образование» />
<option value = «nothing» selected> Выбрать уровень образования </ option>
<option value = «some_high_school»> Некоторая средняя школа </ option>
<option value = «all_high_school»> Диплом средней школы / GED </ option>
<option value = «some_college»> Some College </ option>
<option value = «all_colleg»> Степень колледжа </ option>
<option value = «some_grad»> Некоторые аспирантуры </ option>
<option value = «all_grad»> Выпускник </ option>
<option value = «some_doc»> Некоторые аспиранты </ option>
<option value = «all_doc»> Докторская степень </ option>
</ Выберите>
<label for = «доход» id = «доход»> доход: </ label>
<выберите имя = «доход» />
<option value = «nothing» selected> Выбрать диапазон дохода </ option>
<option value = «10000» selected> Менее $ 10000 </ option>
<option value = «25000» выбрано> 10 000 — 25 000 $ </ option>
<option value = «50000» выбрано> 25 000 — 50 000 $ </ option>
<option value = «75000» выбран> 50 000 — 75 000 $ </ option>
<option value = «max» selected> Больше чем 75 000 $ </ option>
</ Выберите>
<input type = «hidden» value = «2» name = «page» />
<input type = «hidden» value = «‘. $ form_id.'» name = «form_id» />
<input type = «submit» />
</ Форма> ‘;
} // Конечная страница 2 формы
[/исходный код]
Для краткости я оставил опцию «Возраст» как заполнение пробела, чтобы у нас не было длинной формы с подавляющими опциями. Окончательная версия будет иметь выпадающее меню.
Шаг 4: Построение обработчика страницы 3
Теперь давайте возьмем информацию со второй страницы и убедимся, что мы получили то, что нам нужно. Мы покажем его на странице для тестирования.
Другой оператор ELSEIF необходим для проверки номера страницы. Просто поместите это сразу после комментария «Конечная страница 2» из предыдущего примера кода:
[sourcecode language = ”php”]
elseif ($ page == 2) {
$ пол = $ _POST [‘пол’];
$ age = $ _POST [‘age’];
$ образование = $ _POST [‘образование’];
$ доход = $ _POST [‘доход’];
$ page = $ _POST [‘page’];
$ form_id = $ _POST [‘form_id’];
echo ‘$ пол:’. $ пол. «;
echo ‘$ age:’. $ age. «;
echo ‘$ education:’. $ образование. «;
echo ‘$ доход:’. $ доход. «;
echo ‘$ page:’. $ страница. «;
echo ‘$ form_id:’. $ form_id. «;
}
[/исходный код]
Убедитесь, что ваша функция все еще имеет закрывающую скобку «};» — ее легко скопировать и вставить поверх нее. Отсутствие одной из этих открывающих или закрывающих скобок или скобок может сломать всю вашу форму, поэтому работайте осторожно.
Вывод
Обновите свою форму и вот ! Мы приближаемся! У вас уже есть двухстраничная форма, которая успешно собирает данные и сохраняет их со страницы 1 до страницы 2. Это огромный первый шаг.
В следующей статье я покажу вам, как обновить базу данных с помощью входов на второй странице и как отобразить необязательную версию формы — одну для мужчин и одну для женщин.
Для полноты, вот код, который мы имеем до сих пор:
[sourcecode language = ”php”]
add_shortcode ( ‘multipage_form_sc’, ‘multipage_form’);
function multipage_form () {
глобальный $ wpdb;
$ this_page = $ _SERVER [‘REQUEST_URI’];
$ page = $ _POST [‘page’];
if ($ page == NULL) {
эхо
<form action = «‘. $ this_page.'» method = «post»> <label id = «first_name» for = «first_name»> Имя: </ label>
<input id = «first_name» type = «text» name = «first_name» />
<label id = «last_name» for = «last_name»> Фамилия: </ label>
<input id = «last_name» type = «text» name = «last_name» />
<label id = «email» for = «email»> Электронная почта: </ label>
<input id = «email» type = «text» name = «email» />
<label id = «phone» for = «phone»> Телефон: </ label>
<input id = «phone» type = «text» name = «phone» />
<label id = «first_name» for = «first_name»> Почтовый индекс: </ label>
<input id = «zip_code» type = «text» name = «zip_code» />
<input type = «hidden» name = «page» value = «1» />
<input type = «submit» /> </ form> ‘;
} // Конечная страница 1 формы
// Стартовая страница 2 формы
elseif ($ page == 1) {
$ first_name = $ _POST [‘first_name’];
$ last_name = $ _POST [‘last_name’];
$ email = $ _POST [’email’];
$ phone = $ _POST [‘phone’];
$ zip_code = $ _POST [‘zip_code’];
$ page_one_table = ‘shopping_preferences’;
$ page_one_inputs = array (
‘first_name’ => $ first_name,
‘last_name’ => $ last_name,
’email’ => $ email,
‘телефон’ => $ телефон,
‘zip_code’ => $ zip_code,
‘page’ => $ page
);
$ insert_page_one = $ wpdb-> insert ($ page_one_table, $ page_one_inputs);
$ form_id = $ wpdb-> insert_id;
эхо
<form action = «‘. $ this_page.'» method = «post»> <label id = «пол» для = «пол»> Пол: </ label> </ form> <выберите имя = «пол»> < / select> Select GenderFemaleMale
<label id = «age» for = «age»> Age: </ label>
<input id = «age» type = «text» name = «age» />
<label id = «Education» for = «Education»> Образование: </ label>
<select name = «education»> </ select> Выберите уровень образованияSome High SchoolДиплом средней школы / GEDSome CollegeCollege DegreeSome Graduate SchoolGraduateSome Post GraduateDoctorate
<label id = «доход» для = «доход»> доход: </ label>
<выберите имя = «доход»> </ выберите> выберите диапазон доходаМеньше, чем 10 000 долларов США, 10 000 долларов США, 25 000 долларов США, 25 000 долларов США, 50 000 долларов США, 50 000 долларов США, 75 000 долларов США, более 75 000 долларов США.
<input type = «hidden» name = «page» value = «2» />
<input type = «hidden» name = «form_id» value = «‘. $ form_id.'» />
<input type = «submit» />
«;
} // Конечная страница 2 формы
// Стартовая страница 3 формы
elseif ($ page == 2) {
$ пол = $ _POST [‘пол’];
$ age = $ _POST [‘age’];
$ образование = $ _POST [‘образование’];
$ доход = $ _POST [‘доход’];
$ page = $ _POST [‘page’];
$ form_id = $ _POST [‘form_id’];
echo ‘$ пол:’. $ пол. «;
echo ‘$ age:’. $ age. «;
echo ‘$ education:’. $ образование. «;
echo ‘$ доход:’. $ доход. «;
echo ‘$ page:’. $ страница. «;
echo ‘$ form_id:’. $ form_id. «;
}; // Конечная страница 3 формы
} // Завершаем функцию multipage_form ()
[/исходный код]