Responsive, Real-Time Graphs in WordPress: Form Processing

This tutorial shows how to build a WordPress form for data collection, using a workout tracker as an example. The form collects pushups, workout date, and user login details. A database connection script improves database credential management across multiple files. A PHP file processes form data, preparing it for database insertion. Troubleshooting tips and resources are provided.

Key Takeaways:

• Creates a WordPress form for data entry (pushups, date, user).
• Develops a reusable database connection script.
• Builds a PHP file to process and insert form data into a database.
• Offers troubleshooting guidance for common errors.

Part 1 Recap:

1. Loaded a base plugin containing graphing libraries.
2. Uploaded a blank PHP file via FTP.
3. Configured WordPress to locate custom PHP files.
4. Introduced basic WordPress admin functions.

Part 2 Recap:

1. Created a blank post with a placeholder shortcode.
2. Registered the shortcode with WordPress.
3. Created a database table for data storage.

This section focuses on creating the data collection form. Even with existing database data, reviewing this section is beneficial before proceeding to database querying and data formatting for the graph plugin. This is particularly helpful for beginners. While the example uses a workout tracker, the principles are adaptable to other applications.

Step 1: Building the Pushup Form

This step builds a simple form for recording pushup workouts. Open custom-workout.php (in Plugins > Editor) and replace its contents with the following PHP code:

<?php
function pushups() {
    get_currentuserinfo();
    $current_user = wp_get_current_user();
    $wpuser = $current_user->user_login;
    $currentpage = $_SERVER['REQUEST_URI'];
    echo '[Login]('.$currentpage.') to start adding pushups!';
    echo '[Register]('.$currentpage.') if you have not already.';
    echo '<form method="get" action="add_pushups.php">';
    echo '<label>Number of Pushups: <input type="number" name="pushups_count"></label><br>';
    echo '<label>Date of Workout: <input type="date" name="pushups_date"></label><br>';
    echo '<input type="hidden" name="pushups_wpuser" value="'.$wpuser.'">';
    echo '<input type="hidden" name="current_page" value="'.$currentpage.'">';
    echo '<input type="submit" value="Submit">';
    echo '</form>';
    echo '---';
}
add_shortcode('pushups_sc', 'pushups');
?>

This code uses echo to output the form's HTML. The form is added to the "Add Pushups" post created earlier (containing only the [pushups_sc] shortcode). After adding the code, clear your WP cache to see the changes.

Submitting the form (though it won't yet function) demonstrates data transmission to the next processing step. Styling can be added later.

Step 2: Creating the Database Information Script

Best practice dictates separating database credentials from scripts. This speeds up access across multiple files. Create connect_to_db.php with the following code, replacing the bracketed values with your database credentials (obtainable from your hosting provider):

<?php
/* Database connection details */
function connect_to_db() {
    $username = "{username}";
    $password = "{password}";
    $hostname = "{hostname}";
    $dbname = "{database_name}";
    mysql_connect($hostname, $username, $password) or die(mysql_error());
    mysql_select_db($dbname);
}
?>

Upload this file to the plugins/flot-for-wp/flot folder.

Step 3: Processing Form Data with PHP

Create add_pushups.php and paste this code:

<?php
function pushups() {
    get_currentuserinfo();
    $current_user = wp_get_current_user();
    $wpuser = $current_user->user_login;
    $currentpage = $_SERVER['REQUEST_URI'];
    echo '[Login]('.$currentpage.') to start adding pushups!';
    echo '[Register]('.$currentpage.') if you have not already.';
    echo '<form method="get" action="add_pushups.php">';
    echo '<label>Number of Pushups: <input type="number" name="pushups_count"></label><br>';
    echo '<label>Date of Workout: <input type="date" name="pushups_date"></label><br>';
    echo '<input type="hidden" name="pushups_wpuser" value="'.$wpuser.'">';
    echo '<input type="hidden" name="current_page" value="'.$currentpage.'">';
    echo '<input type="submit" value="Submit">';
    echo '</form>';
    echo '---';
}
add_shortcode('pushups_sc', 'pushups');
?>

This file uses $_GET to retrieve form data, converts the date to a Unix timestamp, and inserts the data into the database. The commented-out echo statements are useful for debugging database connection issues. Upload this file to plugins/flot-for-wp/flot.

Checking Your Work and Troubleshooting

Test the form. If redirection doesn't work, check your code carefully. Use the debugging echo statements to identify problems. Common issues include typos and incorrect database connection details or header location syntax. After successful data insertion, verify the data in phpMyAdmin.

Remember, troubleshooting is a normal part of development. Use online resources (Stack Overflow, Google) and the comments section for assistance.

Recap:

This part created a form, a database connection script, a data processing script, and provided thorough testing and troubleshooting instructions. The next part will integrate a graphing library to visualize the collected data.

The above is the detailed content of Responsive, Real-Time Graphs in WordPress: Form Processing. For more information, please follow other related articles on the PHP Chinese website!