Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > PHP/MySQL/Scripting

PHP for the Web: Visual QuickStart Guide: Using Numbers

  • Print
  • + Share This
The chapter begins by creating an HTML form that will be used to generate number variables. Then you’ll learn how to perform basic arithmetic, how to format numbers, and how to cope with operator precedence. The last two sections of this chapter cover incrementing and decrementing numbers, plus generating random numbers. Throughout the chapter, you’ll also learn about other useful number-related PHP functions.
This chapter is from the book

Chapter 2, “Variables,” briefly discussed the various types of variables, how to assign values to them, and how they’re generally used. In this chapter, you’ll work specifically with number variables—both integers (whole numbers) and floating-point numbers (aka floats or decimals).

The chapter begins by creating an HTML form that will be used to generate number variables. Then you’ll learn how to perform basic arithmetic, how to format numbers, and how to cope with operator precedence. The last two sections of this chapter cover incrementing and decrementing numbers, plus generating random numbers. Throughout the chapter, you’ll also learn about other useful number-related PHP functions.

Creating the Form

Most of the PHP examples in this chapter will perform various calculations based on an e-commerce premise. A form will take price, quantity, discount amount, tax rate, and shipping cost circle-a.jpg, and the PHP script that handles the form will return a total cost. That cost will also be broken down by the number of payments the user wants to make in order to generate a monthly cost value circle-b.jpg.

To start, let’s create an HTML page that allows the user to enter the values.

To create the HTML form:

  1. Begin a new HTML document in your text editor or IDE, to be named calculator.html (Script 4.1):
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>Product Cost Calculator </title>
    </head>
    <body><!-- Script 4.1 - calculator.html -->
    <div><p>Fill out this form to calculate the total cost:</p>

    Script 4.1. This basic HTML form will be the origination of the numbers on which mathematical calculations will be performed in several PHP scripts.

    1    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    2       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    4    <head>
    5       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    6       <title>Product Cost Calculator </title>
    7    </head>
    8    <body><!-- Script 4.1 - calculator.html -->
    9    <div><p>Fill out this form to calculate the total cost:</p>
    10
    11   <form action="handle_calc.php" method="post">
    12
    13   <p>Price: <input type="text" name="price" size="5" /></p>
    14
    15   <p>Quantity: <input type="text" name="quantity" size="5" /></p>
    16
    17   <p>Discount: <input type="text" name="discount" size="5" /></p>
    18
    19   <p>Tax: <input type="text" name="tax" size="3" /> (%)</p>
    20
    21   <p>Shipping method: <select name="shipping">
    22   <option value="5.00">Slow and steady </option>
    23   <option value="8.95">Put a move on it.</option>
    24   <option value="19.36">I need it yesterday!</option>
    25   </select></p>
    26
    27   <p>Number of payments to make: <input type="text" name="payments" size="3" /></p>
    28
    29   <input type="submit" name="submit" value="Calculate!" />
    30
    31   </form>
    32
    33   </div>
    34   </body>
    35   </html>
  2. Create the initial form tag:
    <form action="handle_calc.php" method="post">

    This form tag begins the HTML form. Its action attribute indicates that the form data will be submitted to a page named handle_calc.php. The tag’s method attribute tells the page to use POST to send the data. See Chapter 3, “HTML Forms and PHP,” for more details.

  3. Create the inputs for the price, quantity, discount, and tax:
    <p>Price: <input type="text" name="price" size="5" /></p>
    <p>Quantity: <input type="text" name="quantity" size="5" /></p>
    <p>Discount: <input type="text" name="discount" size="5" /></p>
    <p>Tax: <input type="text" name="tax" size="3" /> (%)</p>

    XHTML has no input type for numbers, so you create text boxes for these values. A parenthetical indicates that the tax should be entered as a percent.

    Also remember that the names used for the inputs have to correspond to valid PHP variable names (letters, numbers, and the underscore only; doesn’t start with a number, and so forth).

  4. Add a field in which the user can select a shipping method:
    <p>Shipping method: <select name="shipping">
    <option value="5.00">Slow and steady</option>
    <option value="8.95">Put a move on it.</option>
    <option value="19.36">I need it yesterday!</option>
    </select></p>

    The shipping selection is made using a drop-down menu. The value of the selected option is the cost for that option. If the user selects, for example, the Put a move on it. option, the value of $_POST['shipping'] in handle_calc.php will be 8.95.

  5. Complete the HTML form:
    <p>Number of payments to make: <input type="text" name="payments" size="3" /></p>
    <input type="submit" name="submit" value="Calculate!" />
    </form>

    The final two input types take a number for how many payments are required and then create a submit button (labeled Calculate!). The closing form tag marks the end of the form section of the page.

  6. Complete the HTML page:
    </div>
    </body>
    </html>
  7. Save the script as calculator.html and view it in your Web browser.

    Because this is an HTML page, you can view it directly in a Web browser.

  • + Share This
  • 🔖 Save To Your Account