Your Favorite Color: Simple form

  1. Classes
  2. Your Favorite Color
  3. Cleaning your data

Let’s create a page to ask people their favorite color. The basic page is in the resources as “color.php”.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Your Favorite Color</title>

<style>

body {

margin: 10em;

padding: 2em;

border: solid .2em green;

}

h1 {

text-align: center;

}

</style>

</head>

<body>

<h1>PHP Color Extravaganza</h1>

<form method="post" action="color.php">

<p>

What is your favorite color?

<input type="text" name="color" value="" />

</p>

<input type="submit" />

</form>

</body>

</html>

Upload it to your server and view the page. You should see a simple form asking visitors their favorite color.

The form needs a class to manage the answers visitors give us. We will put this class in an include file. Putting functions, variables, and classes in an include file allows us to reuse that code on multiple web pages. Include files add functionality to any web page that “include” them. Your include files should not be viewable in your web site. Store them outside of your web site in an “includes” directory inside your account’s home directory.

Put this in a file called color.phpi and upload it to your includes directory:

<?php

ini_set('display_errors', true);

error_reporting(E_ALL);

//handle favorite color form submissions

class FavoriteColor {

public $value = null;

public function __construct() {

if (isset($_POST['color'])) {

$this->value = $_POST['color'];

}

}

}

?>

This is a very simple class that has one property and one method. In PHP, the __construct method is called whenever you make a new instance of that class. So, in this case, whenever we make a new instance we will set the color property on the object to be whatever color they entered in the form. $_POST contains form responses from the visitor. When they fill out your form input field named “color”, $_POST ends up with a value for “color” that we can access as $_POST['color']. $_POST is the form equivalent of $_SESSION.

In PHP, “null” is a special value meaning no value: the $value property isn’t set until $_POST brings it.

Add this to the very top of color.php:

<?php

include_once('/path/to/your/account/includes/color.phpi');

$color = new FavoriteColor();

?>

Replace /path/to/your/account/includes with the location in your account where you are going to store your include files. The path will probably look something like /home/USERNAME/includes/color.phpi. You need to create the includes directory yourself, in your account’s home directory.

The line with “new FavoriteColor()” takes the class FavoriteColor and creates a new instance of that class. It creates an object that we can use. Above the form, put:

<?php IF (isset($color->value)):?>

<p>You said your favorite color was <?php echo $color->value; ?>.</p>

<?php ENDIF; ?>

And change the form input to:

<input type="text" name="color" value="<?php echo $color->value; ?>" />

image 4When you submit the form you’ll see that it doesn’t lose your response. That’s because we’re echoing the form response back into the form as the field’s value. We also echo the same field value into a paragraph where we tell them what they just entered.

We can do more. Why not show that paragraph in the color they chose? After all, it’s their favorite! Change the “your favorite color was” line to:

<p style="color: <?php echo $color->value; ?>">

You said your favorite color was <?php echo $color->value; ?>.

</p>

image 5Both the form field green default, and the styling of the result to green work because PHP isn’t displayed in the browser. PHP code is replaced on the server end with whatever the PHP code “echoes”. Most of the time, you’ll echo HTML, CSS, or JavaScript, for the visitor’s browser to display. We echoed the favorite color into the form field’s “value” attribute, and into the style attribute’s “color” property. We are thus able to use PHP to alter the appearance of our HTML depending on what the visitor did.

Include file security

Always put your include files outside of your normal web directory; sometimes, this is called “keeping them out of web root”. This helps keep errors and server configuration problems from exposing your code, your paths, your database passwords, and other potentially private information.

Braces vs. colons

Notice how we moved between HTML and PHP in this example. We used IF: and ENDIF; to mark the beginning and end of an if section.

When programming 100% code, braces (the curly brackets { and }) are very useful, because text editors can match the opening brace to the closing brace.

Inside of HTML, however, braces can obfuscate the code. When you have an opening IF toward the top, a whole bunch of HTML, and then a bunch of closing braces, each brace has very little context around it. An ENDIF is usually more readable when interspersing HTML with PHP. This is especially true if your server supports short open tags, because then the IF/ELSE/ENDIF or (we’ll see this later) FOREACH/ENDFOREACH becomes more prominent.

<?IF ($test):?>

<p>Some HTML.</p>

<?ELSE:?>

<p>Some other HTML.</p>

<?ENDIF;?>

  1. Classes
  2. Your Favorite Color
  3. Cleaning your data