RESTful Post: PHP Introduction

Page 7

HTML, PHP, MySQL

Overview

Learn some PHP basics such as how to include your hidden database connection file, declare PHP variables, a PHP constant, obtain and display posted data. You'll access data that was posted by your HTML form, within PHP. You'll also learn to display the header, footer and posted data in a Web page with PHP.

Start PHP

First, begin your PHP file with <?php. Last, terminate your PHP file with ?>. The following code is an empty PHP file.

<?php 
?>

For this tutorial, include your hidden PHP file named base-data.php, as described in page six. Define a constant called MAXROWS with the value 10. Declare three variables that you'll use globally. Variables begin with a dollar sign. The variable names correspond to our database column names and form input names, representing user, password and data.

Comments

In functions.php comments begin with double slashes // or begin with /** and end with */. However other techniques exist to comment PHP scripts.

<?php
include ('base-data.php');
define("MAXROWS", 10);
// Globally declared variables.
// Variables beginning with $s used here
// to represent strings.
$sUser = null;
$sPwd = null;
$sData = null;

Show Web Page Header

Call PHP function echo('text...') to display any string, with PHP. Here we'll display a Web page header, title, description, icon, style sheet, the nav bar, opening content and page title. Remember from page five that file post-colors.php calls:

showHeader("Color Table","../../7c.ico","../styles/base.css");

The first parameter is the header title and the page title. The second parameter is a path to the page's icon. The third parameter is a path to the page's style sheet.

In PHP, append strings with the . dot symbol. For example the following line appends the, showHeader(), parameter named $sCSS, to the style import statement. The following line of PHP script imports ../styles/base.css. The line itself will add @import url(../styles/base.css);, to your Web page's HTML markup.

echo' @import url( ' . $sCSS . ');';

would appear in the HTML markup as follows.

@import url(../styles/base.css);

The entire showHeader() PHP function follows.

/**
 * Render a Web page's header.
 * @param string $sTitle: Web page title.
 * @param string $sICO:   Path to Web page icon.
 * @param string $sCSS:   Path to style sheet.
 */
function showHeader($sTitle, $sICO, $sCSS){
 echo' <!DOCTYPE html>';
 echo' <html lang="en-US"><head><title>' . $sTitle . '</title>';
 echo' <meta name="description" content="Score board for the ' . $sTitle . '. Shows the top ten scores."/>';
 echo' <meta http-equiv="content-type" content="text/html; charset=utf-8" />';
 echo' <meta name="viewport" content="width=device-width, initial-scale=1">';
 echo'<style> ';
 echo' @import url( ' . $sCSS . ');';
 echo'</style>';
 echo' <link rel="shortcut icon" href="' . $sICO . '" />';
 echo '</head>';
 echo' <body>';
 echo '<nav><a class="text" href="https://code.7Thunders.biz/index.php" title="Home">Home</a></nav>';
 echo '<div class="content">';
 echo'<h1>'. $sTitle .'</h1>';
}

Obtain Posted Data

Remember, from page five, that our HTML Form calls PHP file, post-colors.php, when the user taps the submit button.

File, post-colors.php, calls PHP function, getPostedData(). Function getPostedData() is defined within file functions.php

Function getPostedData() obtains and saves each value that was posted from our HTML form. Declare $sUser,$sPwd,$sData, as global variables within function getPostedData().

global $sUser,$sPwd,$sData;

The following line obtains data that was posted with our Web form. The values within brackets [...] match the form's input name values exactly.

$sUser = $_POST['user'];
$sPwd = $_POST['pwd'];
$sData = $_POST['data'];

The entire getPostedData() PHP function follows.

/**
 * Obtain the data posted
 * from the Web form.
 * Note 'user', 'pwd' and 'data' are
 * ALSO the values of each name field in your Web form:
 * <input type="text" name="user"  value="user"/>
 */
function getPostedData(){
 // Access global variables here:
 global $sUser,$sPwd,$sData;
 $sUser = $_POST['user'];
 $sPwd = $_POST['pwd'];
 $sData = $_POST['data'];
 // var_dump() is useful while debugging:
 // echo var_dump($_POST);
}

Display the Data to Web Page

Remember from page five that file post-colors.php calls showData(); with no parameters.

Again declare your three variables as global, within showData().

global $sUser,$sPwd,$sData;

If this Web page loads from the form, then data will be posted to the global variables. In other words they won't be null. So show the data to the Web page if sUser is not null, as follows.

if($sUser != null){
 echo '<h2>Welcome: ' . $sUser . '</h2>';
 echo '<p>User: ' . $sUser . ', data: ' . $sData .'</p>';
}

If this Web page loads directly, then sUser will be null because no data was posted before loading the page. Therefore just display Welcome. Here we also give the user a link to a Web page that contains an assortment of PHP scripts.

else{
 echo '<h2>Welcome</h2>';
 echo '<p>See <a href="https://code.7Thunders.biz/ph/topics-php.php" title="PHP & MySQL">PHP & MySQL</a> scripts.';
}

The entire showData() function follows.

/**
 * Display to the user the
 * data that they just input into a form.
 * The user name, password and data are global.
 */
function showData(){
 // Access global variables here:
 global $sUser,$sPwd,$sData;
 if($sUser != null){
  echo '<h2>Welcome: ' . $sUser . '</h2>';
  echo '<p>User: ' . $sUser . ', data: ' . $sData .'</p>';
 }
 else{
  echo '<h2>Welcome</h2>';
  echo '<p>See <a href="https://code.7Thunders.biz/ph/topics-php.php" title="PHP & MySQL">PHP & MySQL</a> scripts.';
 }
}

Show Web Page Footer

Remember from page five that file post-colors.php calls:

showFooter("../post/form-base.php");

The only parameter is the path back to our original form. For games and other online applications you might want the player to be able to return to the game and play more levels. For other online applications the user might want to modify their data fields.

The entire showFooter() function follows.

/**
 * Render a Web page's footer.
 * @param string $sReturnPath: Apply to hyperlink
 * to return to the original application.
 */
function showFooter($sReturnPath){
 echo'</div>';
 echo'<footer><a class="text" href="' . $sReturnPath . '" title="' . $sReturnPath . '">Return to: '. $sReturnPath . '</a></footer>';
}

functions.php

The sections we covered in functions.php, on this page, follow. There's more to file functions.php. See page eight for SQL processing functions within functions.php.

<?php
include ('base-data.php');
define("MAXROWS", 10);
// Globally declared variables.
// Variables beginning with $s used here
// to represent strings.
$sUser = null;
$sPwd = null;
$sData = null;

/**
 * Render a Web page's header.
 * @param string $sTitle: Web page title.
 * @param string $sICO:   Path to Web page icon.
 * @param string $sCSS:   Path to style sheet.
 */
function showHeader($sTitle, $sICO, $sCSS){
 echo' <!DOCTYPE html>';
 echo' <html lang="en-US"><head><title>' . $sTitle . '</title>';
 echo' <meta name="description" content="Score board for the ' . $sTitle . '. Shows the top ten scores."/>';
 echo' <meta http-equiv="content-type" content="text/html; charset=utf-8" />';
 echo' <meta name="viewport" content="width=device-width, initial-scale=1">';
 echo'<style> ';
 echo' @import url( ' . $sCSS . ');';
 echo'</style>';
 echo' <link rel="shortcut icon" href="' . $sICO . '" />';
 echo '</head>';
 echo' <body>';
 echo '<nav><a class="text" href="https://code.7Thunders.biz/index.php" title="Home">Home</a></nav>';
 echo '<div class="content">';
 echo'<h1>'. $sTitle .'</h1>';
}

/**
 * Obtain the data posted
 * from the Web form.
 * Note 'user', 'pwd' and 'data' are
 * ALSO the values of each name field in your Web form:
 * <input type="text" name="user"  value="user"/>
 */
function getPostedData(){
 // Access global variables here:
 global $sUser,$sPwd,$sData;
 $sUser = $_POST['user'];
 $sPwd = $_POST['pwd'];
 $sData = $_POST['data'];
 // var_dump() is useful while debugging:
 // echo var_dump($_POST);
}

/**
 * Display to the user the
 * data that they just input into a form.
 * The user name, password and data are global.
 */
function showData(){
 // Access global variables here:
 global $sUser,$sPwd,$sData;
 if($sUser != null){
  echo '<h2>Welcome: ' . $sUser . '</h2>';
  echo '<p>User: ' . $sUser . ', data: ' . $sData .'</p>';
 }
 else{
  echo '<h2>Welcome</h2>';
  echo '<p>See <a href="https://code.7Thunders.biz/ph/topics-php.php" title="PHP & MySQL">PHP & MySQL</a> scripts.';
 }
}

/**
 * Render a Web page's footer.
 * @param string $sReturnPath: Apply to hyperlink
 * to return to the original application.
 */
function showFooter($sReturnPath){
 echo'</div>';
 echo'<footer><a class="text" href="' . $sReturnPath . '" title="' . $sReturnPath . '">Return to: '. $sReturnPath . '</a></footer>';
}

// There's more to this file...

Summary

This section explained some PHP basics such as including your hidden database connection file, declaring PHP variables and a PHP constant. Most importantly, you obtained the data that was posted by your HTML form, with PHP! You also learned to display the header, footer and access posted data in a Web page, with PHP.

See page eight for the final step in this tutorial! Then you'll know the full process for RESTful posting from a Web form, to a MySQL database, to inserting, updating, deleting rows in the database, and finally displaying the database in a Web page's table.