Статьи

Адаптивные графики в реальном времени в WordPress: обработка форм

В этой серии мы создали функциональность, необходимую для создания удивительных графиков в реальном времени. До этого момента мы сделали следующее:

Часть 1

  1. Мы загрузили базовый плагин, который загружает наши библиотеки графов
  2. Мы загрузили пустой файл PHP через FTP
  3. Мы рассказали WP, как найти наши пользовательские файлы PHP
  4. Мы ознакомились с функциями администратора для начинающих

Часть 2

  1. Мы создали пустой пост с шорткодом
  2. Мы рассказали WordPress о вашем шорткоде
  3. Мы создали таблицу базы данных для сбора данных

В этой части серии будет создана форма для начала сбора данных. Если у вас уже есть много данных в вашей базе данных, вы все равно можете просмотреть эту часть, просто чтобы перейти к следующей части серии, где мы запрашиваем базу данных и форматируем данные для нашего графического плагина.

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

Шаг 1: Создать форму для отжиманий

Теперь вы можете немного пошатнуться после этого последнего шага, если раньше никогда не работали с phpMyAdmin или любой другой базой данных. Ну, этого следовало ожидать. Но вы должны подталкивать себя и продолжать учиться! На данный момент у вас есть только пустой шорткод и пустая таблица базы данных. Но вы так близки к тому, чтобы иметь эти графики в реальном времени, и вы даже не знаете этого! Итак, давайте выберем простую форму для создания записи тренировки отжиманий.

Откройте этот custom-workout.php в «Плагины»> «Редактор». Мы собираемся добавить некоторые функции в нашу функцию отжиманий. Если вы следили за этим, сейчас у нас есть только один оператор в нашей функции отжимания. Я хочу, чтобы вы заменили все содержимое файла следующим кодом:

[sourcecode language = ”php”]

<? PHP

функция pushups () {

get_currentuserinfo ();
$ current_user = wp_get_current_user ();
$ wpuser = $ current_user-> user_login;
$ currentpage = $ _SERVER [‘REQUEST_URI’];

echo ‘<a href=»‘. wp_login_url().'»> Войдите </a>, чтобы начать добавлять отжимания!’;
echo ‘<p> <a href=»‘. home_url().’/wp-register.php»> Зарегистрируйтесь </a>, если вы этого еще не сделали. </ p>’;
echo ‘<form action = «‘. plugins_url ($ path). ‘/flot-for-wp/flot/add_pushups.php» method = «get» id = «add_pushups»>’;
echo ‘<label> Количество отжиманий: </ label> <input type = «text» name = «pushups_count» /> <br />’;
echo ‘<label> Дата тренировки: </ label> <input type = «date» name = «pushups_date» /> <br />’;
echo ‘<input type = «hidden» value = «‘. $ wpuser. ‘» name = «pushups_wpuser» />’;
echo ‘<input type = «hidden» value = «‘. $ currentpage. ‘» name = «current_page» />’;
echo ‘<input type = «submit» value = «Добавить отжимания» form = «add_pushups» /> </ form> <hr />’;

// Наш шорткод, который вы помещаете в posts = [pushups_sc]
add_shortcode (‘pushups_sc’, ‘pushups’);

?>

[/исходный код]

Поскольку мы работаем с PHP, я использую echo для вывода формы HTML на страницу. Все, что мы сделали, это добавили форму к сообщению «Add Pushups», которое мы создали в последней части этой серии , где сообщение содержит только шорткод [pushups_sc] в теле. Перейдите на свой сайт WordPress и перейдите к своему сообщению «Добавить отжимания». Вот как выглядит моя:

Примечание. Возможно, вам придется перейти в «Настройки»> «Кэш WP», удалить кеш и отключить его, чтобы увидеть любые изменения. Независимо от того, насколько вы обновляете чертову страницу, если ваш WP-кэш включен, вы не увидите изменений в течение очень и очень долгого времени.

Теперь у нас есть форма! Давай и представь некоторую информацию. Это не сработает, но полезно посмотреть, как эта форма отправляет данные на следующий шаг процесса.

И я знаю, что это еще не красиво. Вы всегда можете вернуться и стилизовать формы к своему удовольствию. Прямо сейчас мы изучаем сложные вещи, поэтому давайте продолжим обработку формы.

Шаг 2: Создайте скрипт для базы данных

Одна из лучших практик, которую я хотел бы включить в свои плагины, — это разделение учетных данных моей базы данных и моих сценариев. С одной стороны, это делает это намного быстрее, если у вас есть десятки файлов, которые обращаются к вашей базе данных. Обычно вы можете поместить свои учетные данные базы данных в каждый файл. Но вы всегда можете использовать функцию PHP include () для доступа к вашей базе данных.

Создайте новый пустой файл с именем connect_to_db.php. Вставьте этот код и обновите то, что в скобках, чтобы быть вашими учетными данными базы данных. Возможно, вам придется войти в свой хостинг-провайдер домена и получить эту информацию:

[sourcecode language = ”php”]

<? PHP

/ *
Поместите ваши детали подключения БД прямо здесь, чтобы вы не
Я должен постоянно обновлять их. Это также
делает это намного быстрее, если вы хотите использовать все свои
Настройки на другом сайте.
* /

function connect_to_db () {
$ Имя пользователя = «{имя пользователя}»;
$ Пароль = «{пароль}»;
$ hostname = «{hostname}»;
$ dbname = «{database_name}»;

mysql_connect ($ hostname, $ username, $ password) или die (mysql_error ());
mysql_select_db ($ dbname);

}

?>

[/исходный код]

У нас есть простая функция, которую вы можете вызывать в любое время для создания соединения с базой данных. Нам нужно сделать это для отправки данных и получения данных из той таблицы, которую мы создали ранее. Загрузите этот файл в папку plugins / flot-for-wp / flot, и все готово.

Шаг 3: Добавьте файл PHP для обработки данных формы

Если вы попытались отправить свою форму, вы, вероятно, получили ошибку 404, но в панели браузера у вас было много дополнительной информации. Это информация, которую мы будем использовать для обновления таблицы отжиманий, которую вы создали в своей базе данных на шаге 1. Чтобы сделать эти обновления, нам нужна функция для преобразования данных в то, что ваша база данных может переварить.

Создайте еще один новый пустой PHP-файл. Вставьте следующий код и назовите его add_pushups.php

[sourcecode language = ”php”]

<? PHP
// Получить соединение с БД
include («connect_to_db.php»);
connect_to_db ();

$ pushups_count = $ _GET [‘pushups_count’];
$ pushups_date = strtotime ($ _ GET [‘pushups_date’]) * 1000; // Преобразование в метку времени Unix
$ pushups_wpuser = $ _GET [‘pushups_wpuser’];
$ currentpage = $ _GET [‘current_page’];

$ query = «INSERT INTO pushups (pushups_count, pushups_date, pushups_wpuser, active)
VALUES (‘$ pushups_count’, ‘$ pushups_date’, ‘$ pushups_wpuser’, 1) «;
mysql_query ($ запроса);

/ *
Если вы не получаете желаемых результатов, закомментируйте
заголовок («Location: $ currentpage»); ниже и
раскомментируйте код эха ниже. Это будет отображать
данные отправляются в форму. Если все поля имеют данные,
тогда у вас, вероятно, проблема с подключением к базе данных

echo ‘<p> Query:’. $ запрос. ‘</ Р>’;
echo ‘<p> Pushups:’. $ pushups_count. ‘</ Р>’;
echo ‘<p> Date:’. $ pushups_date. ‘</ Р>’;
echo ‘<p> WP USer:’. $ pushups_wpuser. ‘</ Р>’;
echo ‘<p> URL:’. $ current_page. ‘</ Р>’;
* /
заголовок («Location: $ currentpage»);

mysql_close ();
?>

[/исходный код]

Итак, здесь много чего происходит. Если вы новичок в MySQL, то это может быть полным бредом, и это нормально. Вы должны начать где-нибудь.

В начале файла мы используем файл connect_to_db.php, который мы создали на шаге 3. Затем мы получаем всю информацию из нашей формы. Когда пользователи нажимают «Отправить», информация в форме «вставляется» в строку URL. Используя $ _GET, мы можем сообщить нашему файлу add_pushups.php, что делать с этой информацией.

Я также хочу объяснить, что происходит с $ pushups_date. Графическая библиотека, которую мы будем использовать в следующей части этого руководства, требует, чтобы ваше время было в метках времени Unix. Не волнуйтесь, если вы не знакомы с этим. Я позаботился о проблеме в коде.

Загрузите этот файл с помощью FTP в папку plugins / flot-for-wp / flot. Именно здесь мы указали ваш пост «Добавить отжимания», чтобы отправить информацию.

Проверка вашей работы

Перейдите к своему сообщению «Добавить отжимания» на своем сайте и введите некоторую информацию. Вы должны быть автоматически перенаправлены на страницу «Добавить отжимания». Если нет, тщательно прочесайте свой код. У меня есть базовый код проверки ошибок, но вам придется вручную закомментировать строку заголовка и раскомментировать коды эха. Вы не можете одновременно работать с заголовком и эхо-кодами, иначе вы получите ошибку PHP.

Большинство ваших проблем будут заключаться в простых опечатках в разделе соединений с базой данных или в синтаксисе вашего расположения заголовка (внизу).

После того, как вы успешно добавили некоторые данные на свой сайт, войдите в свою учетную запись phpMyAdmin и перейдите к таблице отжиманий. Нажмите на вкладку «Обзор» и полюбуйтесь на данные!

Нажмите, чтобы увидеть весь вид)

Исправление проблем

Независимо от того, как методично я это кодирую, будет много людей, которые столкнутся с проблемами. Устранение неполадок является нормальной частью процесса, и вам просто нужно быть терпеливым, когда вы работаете с ошибками. Разочарование следует ожидать; Вот как мы учимся.

Если вы столкнетесь с ошибками, существует множество удивительных сайтов, на которые вы можете сослаться со StackOverflow.com, чтобы просто напечатать ошибку в Google. Не бойтесь задавать вопросы в комментариях ниже, так как здесь есть много талантливых разработчиков, которые могут помочь, как и я.

резюмировать

Итак, давайте посмотрим на то, что мы достигли в этой части урока. Мы много сделали вместе! На самом деле, я думаю, что знаю тебя слишком хорошо. Но держись там — мы собираемся добраться до забавных вещей.

  1. Мы создали форму с использованием PHP для нашего поста Add Pushups на нашем сайте.
  2. Далее мы создали скрипт для подключения к нашей базе данных.
  3. Затем мы загрузили PHP-документ, который взял данные из нашей формы и вставил их в нашу базу данных.
  4. Наконец, мы проверили наши результаты, чтобы убедиться, что наши данные собираются в нашей базе данных.

В следующей части этой серии мы будем использовать уже созданную библиотеку кода для создания адаптивного графического инструмента, который автоматически извлекает наши данные pushup в большой красивый граф. Ты так близко, так что держись со мной!