Click Here for video
Settings > Permalinks
You wanna work with child themes, so install Child Theme Configurator
I am using child theme of the Hello theme.
Appearance > Theme File Editor > Theme Functions (functions.php)
add_action( ‘elementor_pro/forms/new_record’, function( $record, $handler ) {
//make sure its our form
$form_name = $record->get_form_settings( ‘form_name’ );
if($form_name == ‘AddLeague’) { error_log(‘Hi There’);
$raw_fields = $record->get( ‘fields’); $fields = [];
foreach ( $raw_fields as $id => $field ) {
$fields[$id] = $field[‘value’]; }
wp_remote_post( ‘http://localhost/testsite/my_stuff/create_league.php’, [
‘body’ => $fields, ]);
}
if($form_name == ‘AddPlayer’) { error_log(‘Hi There’);
$raw_fields = $record->get( ‘fields’); $fields = [];
foreach ( $raw_fields as $id => $field ) {
$fields[$id] = $field[‘value’]; }
wp_remote_post( ‘http://localhost/testsite/my_stuff/create_player.php’, [
‘body’ => $fields, ]);
} }, 10, 2);
phpMyAdmin create a table called php_leagues
Create this PHP file in the root directory of your site
mydbfile.php
<?php
# connection to tables
$conn_leagues = new mysqli(“localhost”,”root”,”root”,”testsite”); ?>
Create PHP files in directory called my_stuff
create_league.php
<?php
include ‘../../mydbfile.php’;
$league_name = $_POST[“name”];
$sport = $_POST[“sport”];
$userid = $_POST[“league_user_id”]; error_log(‘league_name = ‘.$league_name); error_log(‘sport = ‘.$sport); error_log(‘userid = ‘.$userid);
$sql = “insert into php_leagues (user_id,league_name,sport) values(‘$userid’, ‘$league_name’, ‘$sport’)”;
error_log(‘sql = ‘.$sql);
$conn_leagues->query($sql);
$conn_leagues->close(); ?>
read_leagues.php
<?php
include ‘../../mydbfile.php’;
global $wpdb;
include ‘../wp-load.php’;
// get current user ID, with default value, if empty
$current_user_id = get_current_user_id();
// next two lines are for debugging, they appear in the php_error.log file // comment them out before putting into production error_log(‘current_user_id ‘.$current_user_id);
error_log($_GET[‘id’]);
$sql = “select * from php_leagues where user_id = “.$current_user_id; $result = $conn->query($sql);
// next line is for debugging, they appear in the php_error.log file
// comment it out before putting into production
error_log(‘sql = ‘.$sql);
echo “<tbody>”;
echo “<tr>”;
echo “<td>League</td><td>Sport</td><td>Update</td><td>Delete</td>”; echo “</tr>”;
while($row = $result->fetch_assoc()) { if ($row[‘league_id’] == $_GET[‘id’]) {
echo ‘<tr><td colspan=”4″><form action=”/testsite/my_stuff/update_league.php” method=”POST”>’;
echo ‘<table border=”1″>’;
echo ‘<tr><td><input type=”text” name=”league_name” value=”‘ . $row[‘league_name’] . ‘”></td>’;
echo ‘<td><select name=”sport” id=”sport”><option value=”‘ . $row[‘sport’] . ‘” selected>’ . $row[‘sport’] . ‘</option><option value=”Basketball”>Basketball</option><option value=”Football”>Football</option><option value=”Soccer”>Soccer</option></select></td>’;
echo ‘<td><input type=”hidden” name=”league_user_id” value=”‘ . $row[‘user_id’] . ‘”><input type=”submit” value=”Save”></td>’;
echo ‘<td><input type=”hidden” name=”league_id” value=”‘ . $row[‘league_id’] . ‘”></td></ tr>’;
echo ‘</form>’;
echo ‘</td></td>’; } else {
echo “<tr>”;
echo “<td>” . $row[‘league_name’] . “</td>”;
echo “<td>” . $row[‘sport’] . “</td>”;
echo ‘<td><a href=”/testsite/add-league/?id=’ . $row[‘league_id’] . ‘”>Update</a></
td>’;
echo ‘<td><a href=”/testsite/my_stuff/delete_league.php?id=’ . $row[‘league_id’] .
‘”>Delete</a></td>’;
echo “</tr>”; }
}
echo “</tbody>”; $conn->close();
?>
update_league.php
<?php
include ‘../../mydbfile.php’;
global $wpdb;
include ‘../wp-load.php’;
// get current user ID, with default value, if empty
$current_user_id = get_current_user_id();
// next two lines are for debugging, they appear in the php_error.log file // comment them out before putting into production error_log(‘update_league current_user_id ‘.$current_user_id); error_log($_GET[‘id’]);
$league_id = $_POST[‘league_id’]; $league_name = $_POST[‘league_name’]; $sport = $_POST[‘sport’];
$sql = “update php_leagues set league_name='”.$league_name.”‘, sport='”.$sport.”‘ where league_id=” . $league_id . ” and user_id=” . $current_user_id;
// next line is for debugging, they appear in the php_error.log file // comment it out before putting into production
error_log(‘sql = ‘.$sql);
$result = $conn->query($sql);
$conn->close();
header(“location: /testsite/add-league/”); ?>
delete_league.php
<?php
include ‘../../mydbfile.php’;
global $wpdb;
include ‘../wp-load.php’;
// get current user ID, with default value, if empty
$current_user_id = get_current_user_id();
// next two lines are for debugging, they appear in the php_error.log file // comment them out before putting into production error_log(‘update_league current_user_id ‘.$current_user_id); error_log($_GET[‘id’]);
$league_id = $_GET[‘id’];
$sql = “delete from php_leagues where league_id=”.$league_id.” and user_id=”. $current_user_id;
// next line is for debugging, they appear in the php_error.log file // comment it out before putting into production
error_log(‘sql = ‘.$sql);
$result = $conn->query($sql);
$conn->close();
header(“location: /testsite/add-league/”); ?>
Create Add League page
WordPress > Add Page
Click Publish
Click Edit with Elementor
Hide Title
Settings > Hide Title Yes
Click On grid in top right of Elementor Editor
Drag Heading widget to Drag widget here Enter text of Add League
Drag a form widget to the Drag widget here
Name the form AddLeague
Keep the Name field change its id to name
Remove the email and message fields in the default form.
Add a Sport select field. Name it sport
Add a User hidden field.
Click on Advanced and make these settings
Drag Heading widget to Drag widget here
Enter text of Current Leagues
Drag an HTML widget to the Drag widget here
Enter this text in the form widget
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <script>
jQuery( document ).on(‘submit_success’, function( event, response ){
read(); });
jQuery( document ).ready(function( $ ){
read(); });
function getReadUrl() {
var params = new URLSearchParams(window.location.search); var url = “../my_stuff/read_leagues.php”;
if (params.has(‘id’)) {
url = url + “?id=” + params.get(‘id’); }
return url; }
function read(){
var url = getReadUrl(); $.get( url, function( data ) {
document.getElementById(“records”).innerHTML = data; });
} </script>
<table id=”records”></table>
Expand the Button section Change the Submit test to Add
Expand the Actions After Submit section
Remove any actions in the Add Action box.
Expand the Additional Options section
Clear out any items in these boxes too
If you have other forms to make, such as add player, you can use the same process above except add new php files and database table and screens like the ones shown below
Go back to the word press editor and try out your new form:
1. Add new Leagues to the database.
2. See if it updates the table of current leagues table on the screen 3. Try the Update link and update a league
4. Try the Delete link and delete a league
video flowsheet
If you have other forms to make, such as add player, you can use the same process above except add new php files and database table and screens like the ones shown below
for example:
Add Player Form
1. This will have the same four C.R.U.D. functions as add league did
2. It will interact with a different database table php_players
3. It will have a starting page called Add Players or Players. Whatever makes sense to
you.
4. Below are some sample screen shots of the form you would build, which is very similar to the leagues page.
phpMyAdmin create a table called php_players
Create Add Player page
WordPress > Add Page
Click Publish
Click Edit with Elementor
Hide Title
Settings > Hide Title Yes
Click On grid in top right of Elementor Editor
Drag Heading widget to Drag widget here Enter text of Add Player
Drag a form widget to the Drag widget here Name the form AddPlayer
Keep the Name field change its id to name
Remove the email and message fields in the default form. Add a User hidden field.
Click on Advanced and make these settings
Drag Heading widget to Drag widget here
Enter text of Current Players
Drag an HTML widget to the Drag widget here
Enter this text in the form widget
Drag an HTML widget to the Drag widget here
Enter this text in the form widget
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script>
jQuery( document ).on(‘submit_success’, function( event, response ){
read(); });
jQuery( document ).ready(function( $ ){
read(); });
function getReadUrl() {
var params = new URLSearchParams(window.location.search); var url = “../my_stuff/read_players.php”;
if (params.has(‘id’)) {
url = url + “?id=” + params.get(‘id’); }
return url; }
function read(){
var url = getReadUrl(); $.get( url, function( data ) {
document.getElementById(“records”).innerHTML = data; });
} </script>
<table id=“records”></table>
create_player.php
<?php
include ‘../../mydbfile.php’;
$wp_id = $_POST[“wp_id”]; $player_name = $_POST[“player_name”];
// comment these lines out before putting into production error_log(‘wp_id = ‘.$wp_id);
error_log(‘player_name = ‘.$player_name);
$sql = “insert into php_players (wp_id,player_name) values(‘$wp_id’, ‘$player_name’)”; error_log(‘sql = ‘.$sql);
$conn_leagues->query($sql);
$conn_leagues->close();
?>
read_players.php
<?php
include ‘../../mydbfile.php’;
global $wpdb;
include ‘../wp-load.php’;
// get current user ID, with default value, if empty
$current_user_id = get_current_user_id();
// next two lines are for debugging, they appear in the php_error.log file // comment them out before putting into production error_log(‘current_user_id ‘.$current_user_id);
error_log($_GET[‘id’]);
$sql = “select * from php_players where wp_id = “.$current_user_id; error_log($sql);
$result = $conn->query($sql);
// next line is for debugging, they appear in the php_error.log file
// comment it out before putting into production error_log(‘sql = ‘.$sql);
echo “<tbody>”;
echo “<tr>”;
echo “<td>Player Name</td><td>Update</td><td>Delete</td>”; echo “</tr>”;
while($row = $result->fetch_assoc()) {
if ($row[‘player_id’] == $_GET[‘id’]) {
echo ‘<tr><td colspan=”4″><form action=”/testsite/my_stuff/update_player.php”
method=”POST”>’;
echo ‘<table border=”1″>’;
echo ‘<tr><td><input type=”text” name=”player_name” value=”‘ . $row[‘player_name’] .
‘”></td>’;
echo ‘<td><input type=”hidden” name=”wp_id” value=”‘ . $row[‘wp_id’] . ‘”><input
type=”submit” value=”Save”></td>’;
echo ‘<td><input type=”hidden” name=”player_id” value=”‘ . $row[‘player_id’] . ‘”></td></
tr>’;
echo ‘</form>’; echo ‘</td></td>’;
} else {
echo “<tr>”;
echo “<td>” . $row[‘player_name’] . “</td>”;
echo ‘<td><a href=”/testsite/add-player/?id=’ . $row[‘player_id’] . ‘”>Update</a></td>’; echo ‘<td><a href=”/testsite/my_stuff/delete_player.php?id=’ . $row[‘player_id’] .
‘”>Delete</a></td>’;
echo “</tr>”; }
}
echo “</tbody>”; $conn->close();
?>
update_player.php
<?php
include ‘../../mydbfile.php’; global $wpdb;
include ‘../wp-load.php’;
// get current user ID, with default value, if empty
$current_user_id = get_current_user_id();
// next two lines are for debugging, they appear in the php_error.log file // comment them out before putting into production error_log(‘update_player current_user_id ‘.$current_user_id); error_log($_GET[‘id’]);
$player_id = $_POST[‘player_id’]; $player_name = $_POST[‘player_name’];
$sql = “update php_players set player_name='”.$player_name.”‘ where player_id=” . $player_id . ” and wp_id=” . $current_user_id;
// next line is for debugging, they appear in the php_error.log file // comment it out before putting into production
error_log(‘sql = ‘.$sql);
$result = $conn->query($sql);
$conn->close();
header(“location: /testsite/add-player/”); ?>
delete_player.php
<?php
include ‘../../mydbfile.php’;
global $wpdb;
include ‘../wp-load.php’;
// get current user ID, with default value, if empty
$current_user_id = get_current_user_id();
// next two lines are for debugging, they appear in the php_error.log file // comment them out before putting into production error_log(‘update_league current_user_id ‘.$current_user_id); error_log($_GET[‘id’]);
$player_id = $_GET[‘id’];
$sql = “delete from php_players where player_id=”.$player_id.” and wp_id=”. $current_user_id;
// next line is for debugging, they appear in the php_error.log file // comment it out before putting into production
error_log(‘sql = ‘.$sql);
$result = $conn->query($sql);
$conn->close();
header(“location: /testsite/add-player/”); ?>