Doing computations

See more about:

Where are we?

You know how to create forms, and get user input into PHP programs. Now let’s do something with the data.

This lesson’s goals

By the end of this lesson, you should:

  • Know how to use PHP variables in computations.
  • Be able to control format of output numbers.
  • Handle radio button input.

A simple order form

Suppose we start a company that sells two dog toys, frisbees and giant chew ropes. Frisbees are the great flying disks from Wham-o. Many dogs love chasing frisbees!

We want to sell the toys over the Web. Let’s create a form like this:

Order form

Figure 1. Order form

The user enters the number of each item s/he wants to order:

Order form with data

Figure 2. Order form with data

The user clicks the button, and a confirmation page appears.

Order confirmation

Figure 3. Order confirmation

We’ll fix the number formats later.

Here’s the HTML for the order form.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Simple Order Form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <h1>Simple Order Form</h1>
    <form action="process-order.php" method="post">
      <p>
        Frisbees:
        <input type="text" name="frisbees" size="3">
        at $8.95 each
      </p>
      <p>
        Giant chew ropes:
        <input type="text" name="giant_chew_ropes" size="3">
        at $12.95 each
      </p>
      <p>
        <button type="submit">Order</button>
      </p>
    </form>
  </body>
</html>

Figure 4. Order form HTML

Nothing new here. Just two text input fields, as before. One field is for the number of frisbees the user wants. The other is for the number of giant chew ropes.

Here’s the code for process-order.php, the file listed in the action attribute of the form.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Order Processed</title>
  </head>
  <body>
    <h1>Order Processed</h1>
    <?php
    //Get the input.
    $frisbees = $_POST['frisbees'];
    $giant_chew_ropes = $_POST['giant_chew_ropes'];
    //Compute totals.
    $frisbees_total = $frisbees * 8.95;
    $giant_chew_ropes_total = $giant_chew_ropes * 12.95;
    $order_total = $frisbees_total + $giant_chew_ropes_total;
    //Output totals.
    ?>
    <p>Thank you for your order.</p>
    <table cellpadding="5" cellspacing="0" border="1">
      <tr>
        <th>Product</th>
        <th>Number ordered</th>
        <th>Unit price</th>
        <th>Total price</th>
      </tr>
      <tr>
        <td>Frisbees</td>
        <td><?php print $frisbees; ?></td>
        <td>$8.95</td>
        <td>$<?php print $frisbees_total; ?></td>
      </tr>
      <tr>
        <td>Giant chew ropes</td>
        <td><?php print $giant_chew_ropes; ?></td>
        <td>$12.95</td>
        <td>$<?php print $giant_chew_ropes_total; ?></td>
      </tr>
      <tr>
        <td colspan="3">Total</td>
        <td>$<?php print $order_total; ?></td>
      </tr>
    </table>
  </body>
</html>

Figure 5. Order processing code

Lines 11 and 12 fetch the data from the form, and put them into PHP variables:

$frisbees = $_POST['frisbees'];
$giant_chew_ropes = $_POST['giant_chew_ropes'];

Line 14 works out the total cost of the frisbees:

$frisbees_total = $frisbees * 8.95;

It’s the number of frisbees ordered (in $frisbees) times the price of one frisbee (8.95). The asterisk (*) means “multiply.” The result is put into $frisbees_total.

Line 15 works out the total cost of the giant chew ropes:

$giant_chew_ropes_total = $giant_chew_ropes * 12.95;

It’s the number of giant chew ropes ordered (in $giant_chew_ropes) times the price of one giant chew rope ($12.95). The result is put into $giant_chew_ropes_total.

Line 16 works out the total cost of the order:

$order_total = $frisbees_total + $giant_chew_ropes_total;

It’s the total cost of the frisbees (in $frisbees_total) plus the total cost of the giant chew ropes (in $giant_chew_ropes_total). The order total is put into the variable $order_total.

The results are output in a <table>. You learned about tables in the lesson A Web page with tables.

Exercise: Circle area

Write a program that computes the area of a circle. Create a form like this:

Form

Figure 1. Form

The user enters a number, and clicks the button:

Form with data

Figure 2. Form with data

The user then sees:

Output

Figure 3. Output

The formula is:

area = 3.14159 x radius x radius

You can try my solution, and download the files. Of course, try it yourself first.

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Fixing the number formats

We’ve seen strange number formats, like this:

Order confirmation

Figure 3 (again). Order confirmation

The prices are messed up. For example, 17.9 should be 17.90.

This is easy to fix with the number_format() function. You tell it the number you want to format and how many decimals you want, and it will return a formatted value. For example:

$x = 17.9;
print number_format($x, 2);

This will output 17.90.

We can change the order processing program like this:

<tr>
  <td>Frisbees</td>
  <td><?php print $frisbees; ?></td>
  <td>$8.95</td>
  <td>$<?php print number_format($frisbees_total, 2); ?></td>
</tr>
<tr>
  <td>Giant chew ropes</td>
  <td><?php print $giant_chew_ropes; ?></td>
  <td>$12.95</td>
  <td>$<?php print number_format($giant_chew_ropes_total, 2); ?></td>
</tr>
<tr>
  <td colspan="3">Total</td>
  <td>$<?php print number_format($order_total, 2); ?></td>
</tr>

Figure 6. Formatting numbers

You can try it.

Exercise: Cylinder volume

Write a program that computes the volume of a cylinder. Create a form like this:

Form

Figure 1. Form

When the user clicks the button, the result appears:

Output

Figure 2. Output

Make sure that the volume is shown to three decimal places.

You can try my solution. You can download the files. Try it yourself first, of course.

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Adding shipping

Let’s add shipping to our form.

Order form with shipping

Figure 7. Order form with shipping

The form uses radio buttons for the shipping method. The user can select only one. You can try it.

Here’s the output:

Order confirmation with shipping

Figure 8. Order confirmation with shipping

Here’s the new HTML.

<div>
  <p>Shipping method</p>
  <p>
    <input type="radio" name="shipping_method" value="standard">
    Standard ($5)
  </p>
  <p>
    <input type="radio" name="shipping_method" value="overnight">
    Overnight ($10)
  </p>
</div>

Figure 9. HTML for shipping method

type="radio" tells the browser you want to use a radio button.

Only one of the radio buttons can be selected. When one is clicked, the other is turned off.

There can be more than one group of radio buttons on a form. Like this:

Radio button groups

Figure 10. Radio button groups

The user can select one button in each group:

Selected buttons

Figure 11. Selected buttons

If the user clicks on a radio button, the others are turned off. But which others? Only the ones in the same group.

Selecting different buttons

Figure 12. Selecting different buttons

How does the browser know which radio buttons belong together? Here’s the HTML:

<p>Favorite animal</p>
<blockquote>
  <input type="radio" name="animal" value="Dog">Dog<br>
  <input type="radio" name="animal" value="Cat">Cat<br>
  <input type="radio" name="animal" value="Horse">Horse<br>
  <input type="radio" name="animal" value="Maggot">Maggot<br>
</blockquote>
<p>Favorite color</p>
<blockquote>
  <input type="radio" name="color" value="Green">Green<br>
  <input type="radio" name="color" value="Blue">Blue<br>
  <input type="radio" name="color" value="Purple">Purple<br>
</blockquote>

Figure 13. Radio button HTML

The name attribute of the radio buttons defines the groups. Radio buttons what belong together have the same name.

Let’s go back to the shipping method for the dog toys. Here is the HTML:

<div>
  <p>Shipping method</p>
  <p>
    <input type="radio" name="shipping_method" value="standard">
    Standard ($5)
  </p>
  <p>
    <input type="radio" name="shipping_method" value="overnight">
    Overnight ($10)
  </p>
</div>

Figure 9 (again). HTML for shipping method

Both radio buttons have the same name: shipping_method (lines 24 and 28). That’s how the browser knows they belong together.

The PHP page will get one piece of form data called shipping_method. It’s value will be either standard or overnight. Which one the PHP gets will depend on what the user chose.

Here’s the PHP page.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Order Processed</title>
  </head>
  <body>
    <h1>Order Processed</h1>
    <?php
    //Get the input.
    $frisbees = $_POST['frisbees'];
    $giant_chew_ropes = $_POST['giant_chew_ropes'];
    $shipping_method = $_POST['shipping_method'];
    //Compute product totals.
    $frisbees_total = $frisbees * 8.95;
    $giant_chew_ropes_total = $giant_chew_ropes * 12.95;
    //Compute shipping cost.
    if ( $shipping_method == 'standard' ) {
      $shipping_cost = 5;
    }
    else {
      $shipping_cost = 10;
    }
    $order_total = $frisbees_total 
      + $giant_chew_ropes_total
      + $shipping_cost;
    //Output totals.
    ?>
    <p>Thank you for your order.</p>
    <table cellpadding="5" cellspacing="0" border="1">
      <tr>
        <th>Product</th>
        <th>Number ordered</th>
        <th>Unit price</th>
        <th>Total price</th>
      </tr>
      <tr>
        <td>Frisbees</td>
        <td><?php print $frisbees; ?></td>
        <td>$8.95</td>
        <td>$<?php print number_format($frisbees_total, 2); ?></td>
      </tr>
      <tr>
        <td>Giant chew ropes</td>
        <td><?php print $giant_chew_ropes; ?></td>
        <td>$12.95</td>
        <td>$<?php print number_format($giant_chew_ropes_total, 2); ?></td>
      </tr>
      <tr>
        <td colspan="3">Shipping</td>
        <td>$<?php print number_format($shipping_cost, 2); ?></td>
      </tr>
      <tr>
        <td colspan="3">Total</td>
        <td>$<?php print number_format($order_total, 2); ?></td>
      </tr>
    </table>
  </body>
</html>

Figure 14. Code for PHP file

Line 13 gets the shipping_method. Lines 18 to 23 work out the shipping cost.

PHP’s if statement is much like JavaScript’s if statement, that we covered earlier. The general form is:

if ( expression ) {
    Do this if expression is true;
}
else {
    Do this if expression is false;
}

In line 18,

$shipping_method == 'standard'

is true if $shipping_method has exactly “standard” in it. Not “STANDARD” or “Standard” or “ standard “ – just “standard”.

Note the ==. Don’t use just =. = means “take the thing on the right and put it in the variable on the left.” Like lines 11, 12, 13, 15, 16, etc. If you want to compare, use ==.

You can use other things besides ==. For example:

if ( age > 21 ) {
if ( age <= 65 ) {
if ( color != 'blue') {

> is greater than. <= is less than or equal to. != means “is not equal to.”

Summary

You learned:

  • Know how to use PHP variables in computations.
  • Be able to control format of output numbers.
  • Handle radio button input.

What now?

Time for some exercises.


How to...

Lessons

User login

Log in problems? Try here


Dogs