32 HTTP Parameters

So far, your PHP programs have not been able to get any input from the user. In a simple server-side app, user input is collected with an HTML form that contains input elements. The values in the input elements get sent as parameters along with the HTTP Request when the form is submitted.

You should have already worked with input elements in the client-side chapter on Input Elements. If you feel a little rusty, you should go back to brush up on input element attributes and styling.

A Basic HTML Form

The form element is an optional container for input elements. Here’s a simple example:

<form action="nextpage.php">
    <input type="text">
    <input type="submit">
</form>

The attribute type=”submit” in the second input element is new. It creates a button that, when pressed, acts like a link and launches a new HTTP Request. The action attribute of the form element indicates that this form launches requests to nextpage.php when it is submitted. (Many browsers will also submit forms when the user hits enter while an input element in the form has focus.) You can change the text of the submit button by adding a value attribute.

<form action="nextpage.php"> 
    <input type="text"> 
    <input type="submit"> 
</form>

Sending Form Data

In a client-server web app, the programmer usually wants the form data to be sent to the server when the form is submitted. You can configure the form to send the data by giving every input element a name attribute.

You should also constrain the user as much as possible by using input element attributes like min and max (see the Input Elements chapter). On most browsers, these attributes will prevent the form from being submitted when their constraints are violated. You can also use the required attribute (no value needed) to indicate that an input element must be filled in before the form can be submitted.

Do it Yourself

Create a new page using template.html from the Full Stack Example Pack. Include the form shown below in the body of the page.

<form action="nextpage.php"> 
    <input type="number" name="streetnumber" required min="1"> 
    <input type="text" name="streetname" required> 
    <input type="submit"> 
</form>

First try submitting the form without filling it in, or with a number less than 1. Note the errors from Chrome.

Now fill in the form and press submit. Examine the URL and see if you can find the data you entered.

Finally, open the Chrome Developer Tools and go to the Network tab. Resubmit the form, then click the HTTP Request in the Network tab and look at the “Payload” to see the parameters. See Figure 1 below for an example of what this might look like.

In the form from the Do it Yourself box above, when the user presses the submit button, nextpage.php will load, and will be sent the data from the text and number fields. When the form is submitted, you will be able to see the parameters in the URL. They will look like something like this:

http://localhost/myfolder/nextpage.php?streetnumber=88&streetname=Elm

The question mark in the URL separates the path from the data. The data is in the form parameter=value, and each parameter/value pair is separated using an ampersand (&) character.

You can also see the parameters in the Network tab of the Chrome Developer Tools (look in the “payload” tab for any HTTP Request that had parameters attached).

GET vs. POST Parameters

The form element also allows you to add a method attribute. You can use method=”get” or method=”post”. If you don’t specify a method, the default value is “get“. Here’s an example of a form that uses the post method.

<form action="nextPage.php" method="post">
    <input type="number" name="streetnumber" required min="1">
    <input type="text" name="streetname" required>
    <input type="submit">
</form>

If you use post, the parameters will be sent in the body of the HTTP Request, rather than in the header as part of the URL. You will still be able to view them in the Network tab of Chrome Developer Tools, but they will not be easily visible to the user. You should use post for sensitive information like passwords and credit card numbers, and for very long pieces of information such as multi-paragraph social media posts that might exceed the maximum length of the URL.

Using post does not encrypt the data or make its transmission secure. But it does stop someone from reading it over the user’s shoulder, and it stops the user from accidentally bookmarking it or sharing it with somebody as part of the URL.

Receiving Form Data

There are several ways to retrieve parameters from an HTTP Request. We’re going to use the PHP filter_input function because that is one of the safest and most secure ways of receiving parameters. Later in the Introduction to Security Issues chapter, we’ll talk about why this is so important.

Receiving Integers

The URL below can be used to launch an HTTP request for the nextpage.php file. It contains two get parameters named streetnumber and streetname.

http://localhost/myfolder/nextpage.php?streetnumber=88&streetname=Elm

To receive the streetnumber parameter, we would include the following code in the nextpage.php program:

$streetnum = filter_input(INPUT_GET, "streetnumber", FILTER_VALIDATE_INT);

The filter_input function looks for a get parameter named streetnumber. It will return:

• null if the parameter is not found (i.e. the client didn’t send it)
• false if the parameter was found but is not an integer (e.g. streetnumber=idontknow)
• an int if the parameter is found and is correctly formatted

If you want to check that you got a properly formatted parameter, you’ll need if statements to make sure $streetnum isn’t null or false. You must use strict equality or inequality (=== or !==) for this. Because of PHP’s weak typing, if $streetnum is 0, $streetnum == null and $streetnum == false will both evaluate to true.

INPUT_GET is a pre-defined global constant. Change it to INPUT_POST if you want to receive POST parameters.

FILTER_VALIDATE_INT is also a pre-defined global constant. It signals that filter_input should attempt to interpret the parameter as an integer.

$streetnum = filter_input(INPUT_GET, "streetnumber", FILTER_VALIDATE_INT);
if ($streetnum === null or $streetnum == false) {
    echo "<p>Parameter Error</p>";
} else {
    echo "<p>Received $streetnum.</p>";
}

Receiving Strings

To receive the streetname parameter from the URL above, we would include the following code in the nextpage.php program:

$streetname = filter_input(INPUT_GET, "streetname", FILTER_SANITIZE_SPECIAL_CHARS);

The only thing different here is the use of FILTER_SANITIZE_SPECIAL_CHARS. This is a pre-defined global constant for a sanitize filter rather than a validate filter. It makes sure that special characters get replaced with  codes known as HTML entities so that they will display correctly when you echo them onto your web page. For example the character ‘<‘ gets replaced with the html entity &lt;. If you were to echo ‘<‘ directly into the HTTP Response, the browser would treat it as if it were the start of an HTML tag. (You can read more about HTML Entities at w3Schools.)

In the case of FILTER_SANITIZE_SPECIAL_CHARS, the filter_input function will return:

• null if the parameter is not found (i.e. the client didn’t send it)
• a string with special characters “sanitized” for safe output if the parameter is found

You should use $streetname === null or $streetname !== null to make sure the parameter was received properly.

$streetnum = filter_input(INPUT_GET, "streetnumber", FILTER_VALIDATE_INT);
$streetname = filter_input(INPUT_GET, "streetname", FILTER_SANITIZE_SPECIAL_CHARS);
if ($streetnum === null or $streetnum == false or $streename === null) {
    echo "<p>Parameter Error</p>";
} else {
    echo "<p>Received $streetnum $streetname.</p>";
}

Other Validate Filters

If you are receiving parameters containing numbers or specially formatted strings, you should use a validate filter that matches what you are expecting to receive. Some pre-defined constants for filters are shown below. The names of the filters indicate what they are intended to validate:

• FILTER_VALIDATE_INT
• FILTER_VALIDATE_FLOAT
• FILTER_VALIDATE_EMAIL
• FILTER_VALIDATE_URL

All validate filters will return null if the parameter is not found, false if it’s not formatted correctly, or a value of the appropriate type otherwise.

One Page PHP Apps

A small PHP app doesn’t really have to have separate pages for the input and output. You can create a one-page app with a form on it that redirects back to the same page instead. In an app like this, whenever the page is loaded, a PHP script checks to see if the correct parameters were sent from the form (i.e. does filter_input return null or false).  If it finds valid parameters, it processes them and displays the results. But no matter what, it still presents a form that redirects back to the one page app again. If there are no parameters present, the page should just display the form.

For example, a simple restaurant tip calculator might have a form with two number inputs to fill in (one for bill amount, one for percentage to tip). Submitting the form would reload the app. If the app received two valid numeric parameters, it would display the correct tip amount, then show the form again so the user can calculate another tip.

Aside: JavaScript for Form Validation

Sometimes the input element attributes like min, max, and required are not enough to fully validate a form. For example passwords and userids have rules that must be followed, email addresses are often collected twice to make sure they match, and so on.

If special validation is required, you can attach a JavaScript event listener to the form. The event to listen for is the submit event. The JavaScript function will be called when the form is submitted, but before the page reloads. It can retrieve the values of the input elements and check them to see if they are correct. If they are not correct, the JavaScript function should give feedback, and stop the form from being submitted. The event object contains a preventDefault() method that can be used to stop the browser from performing the default action in response to an event. In this case, it will stop the form from submitting.

Here’s the general structure of the JavaScript code you would need to write, showing a submit listener and event.preventDefault().

myform.addEventListener("submit", function (event) {
    // check form values
    if (something is wrong with the form) {
        // give feedback
        event.preventDefault();
    }
});