Lesson Weekend

Data on its own isn't very useful, even if we're storing it in variables. We need to be able to do things with that data.

In this lesson we're going to build a shipping calculator. We're still going to get some info from our user with a form, but just displaying it back to them is not enough. Let's say that we want the user to enter the weight of the package being shipped and the distance to ship it in miles. Then we will use those numbers to calculate a price and display that back to them.

To use the info from our user to calculate a price for shipping, we will need to use some new tools called operators. Here's an example of how to use arithmetic operators in PHP:

<?php
    $sum = 4 + 5;
    $product = 4 * 2;
    $difference = 12 - 5;
    $quotient = 12 / 2;
?>

<!DOCTYPE html>
<html>
<head>
    <title>Math example</title>
</head>
<body>
    <h1>Here's the results of some math with PHP</h1>
    <p>Sum: <?php echo $sum; ?></p>
    <p>Product: <?php echo $product; ?></p>
    <p>Difference: <?php echo $difference; ?></p>
    <p>Quotient: <?php echo $quotient; ?></p>
</body>
</html>

Notice how the numbers don't have quotes around them. That's because numbers and words are different kinds of data. Any combination of words, characters, and spaces inside of quotes is called a string. Generally, we use strings when we want to write words, sentences, and phrases, and we use numbers when we want to do math.

The one confusing thing about this is that strings can contain characters that happen to be numbers, like the string "My lucky number is 13!" When a number is in a string, it can't be used in math. "4" divided by "2" would make about as much sense to PHP as "apple" divided by "banana". So when we use numbers for calculations, we must always leave off the quotes to distinguish them from strings.

Now, let's see how we can take numbers from a form, do math with them, and display them back to the user. Create a file in your document root called calculator_inputs.html and another one called calculator_results.php. The HTML file will hold our form, which will call the PHP file. Let's start with the HTML file:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <title>Calculate things!</title>
</head>
<body>
    <div class="container">
        <h1>Fill in two numbers to add them together...</h1>

        <form action="calculator_results.php" method="get">
            <div class="form-group">
                <label for="first_number">First number</label>
                <input id="first_number" name="first_number" class="form-control" type="number">
            </div>
            <div class="form-group">
                <label for="second_number">Second number</label>
                <input id="second_number" name="second_number" class="form-control" type="number">
            </div>
            <button type="submit" class="btn">Go!</button>
        </form>

    </div>
</body>
</html>

Note that both of the <input> tags in the form have their type attribute set to "number" instead of "text". This is because text is a different type of data than numbers, and the input field behaves differently. When you open the form in your browser, try to type some words into the input fields instead of numbers, and then submit the form. Surprise! It won't let you.

Now open up calculator_results.php. We're going to get the values of the input fields named first_number and second_number, put those values into the variables called $first_number and $second_number, and then display their sum.

<?php 
    $first_number = $_GET["first_number"];
    $second_number = $_GET["second_number"]; 
    $solution = $first_number + $second_number;
?>
<!DOCTYPE html>
<html>
<head>
    <title>Your Answer Below</title>
</head>
<body>
    <h1>Arithmetic in PHP is easy!</h1>
    <p>The sum of <?php echo $first_number; ?> and <?php echo $second_number; ?> is: </p>
    <p><?php echo $solution; ?></p>
</body>
</html>

This line does our calculation for us: $solution = $first_number + $second_number;.

There is one other very common operator you should know about: it is just a period - . - and it is called the concatenation operator. Sounds fancy, but it is just addition for words. It means take the words on the right of the period and tack them onto the words on the left of the period. Let's see how it works by doing another example.

We are going to make a business card creator. The user will fill in their first, middle, and last names with their occupation, some kind of slogan and an email. Then we will generate a little business card that they could print out.

First, let's create two files in our document root: businesscard_form.html and businesscard_display.php. We'll put the form into the HTML file.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <title>Create a Business Card</title>
</head>
<body>
    <div class="container">
        <h1>Please fill in the text you'd like for your business card!</h1>

        <form action="businesscard_display.php">
            <div class="form-group">
                <label for="first_name">First name</label>
                <input id="first_name" name="first_name" class="form-control" type="text">
            </div>
            <div class="form-group">
                <label for="middle_name">Middle name</label>
                <input id="middle_name" name="middle_name" class="form-control" type="text">
            </div>
            <div class="form-group">
                <label for="last_name">Last name</label>
                <input id="last_name" name="last_name" class="form-control" type="text">
            </div>
            <div class="form-group">
                <label for="occupation">Occupation</label>
                <input id="occupation" name="occupation" class="form-control" type="text">
            </div>
            <div class="form-group">
                <label for="slogan">Slogan</label>
                <input id="slogan" name="slogan" class="form-control" type="text">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input id="email" name="email" class="form-control" type="text">
            </div>
            <button type="submit" class="btn-success">Submit</button>
        </form>

    </div>
</body>
</html>

Next we'll get the information the user put in using $_GET["name_of_input_field"] and display it in their business card using the . operator in our PHP code.

<?php 
    $first_name = $_GET["first_name"];
    $middle_name = $_GET["middle_name"];
    $last_name = $_GET["last_name"];
    $occupation = $_GET["occupation"];
    $slogan = $_GET["slogan"];
    $email = $_GET["email"];
    $card_header = $first_name . " " . $middle_name . " "  . $last_name;
?>

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Create a Business Card</title>
</head>
<body>
    <div class="container">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <div id="card">
                <h3 class="card_header"><?php echo $card_header; ?></h3>
                <h4 class="card_header"><?php echo $occupation; ?></h4>
                <h5 class="card_text"><?php echo $slogan; ?></h5>
                <h5 class="contact"><?php echo $email; ?></h5>
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>
</body>
</html>

We are creating the variable $card_header by combining the first, middle and last names with the . concatenation operator, and then displaying the result in the first line. Let's also practice our CSS and make this look a bit more like a business card. Remember, all we need to do is create a styles.css file in our document root and include a <link> to it in the <head> of our file, setting the href attribute to styles.css. We are displaying the card using businesscard.php, so the link tag goes in there. Start with this, and then try adding the user's phone number and home address to the card, displaying them with the PHP file and styling them with the CSS file.

#card {
  border: 3px solid black;
  min-width: 400px;
  min-height: 200px;
  font-size: 30px;
  font-family: helvetica;
}

.card_header {
  margin-left: 10px;
}

.card_text {
  margin-top: 35px;
  text-align: center;
  font-style: italic;
}

.contact {
  margin-top: 35px;
  margin-right: 10px;
  text-align: right;
  font-style: bold;
}