ARTICLE 2

1 add life to your static pages

HTML is static and boring

PHP brings web pages to life

PHP allows you to manipulate web page content on the server just before a page is delivered to the client browser
With PHP in the mix, the web server
is able to dynamically generate HTML web pages on the fly.

Forms are made of HTML

Owen’s Report an Abduction form is built entirely out of HTML tags and attributes. There are text fields for most of the questions, radio buttons to find out if his visitor saw Fang, and a text area for additional comments. And the form is set up to deliver form data to Owen’s email address

Mailto” is a protocol that allows form data to be delivered via email.


form method="post" action="mailto:owen@aliensabductedme.com


The HTML form has problems

The HTML form code is fine, but mailto isn’t a good way to deliver form data.
Owen’s form is perfectly fine until the user clicks the Report Abduction button. At that point you rely on mailto to package up the form data in an email. But this email doesn’t get sent automatically—it’s created in the default email program on the user’s computer instead.
You need a way to take control of the delivery of the web form. More specifically, you need PHP to package the form data into an email message, and then make sure it gets sent. This involves shifting your attention from the client (HTML, mailto, etc.) to the server (PHP).

HTML acts on the CLIENT

Although the report.html web page comes from a web server, it’s
filled out and processed entirely on the user’s web browser.
The server’s role here is limited to just delivering the web page to the browser. When the user submits the form, the browser (client!) is left to its own devices to work out how to get the form data sent via email. The client isn’t equipped to deliver form data—that’s a job for the server

PHP acts on the SERVER

PHP lets you take control of the data a user types into the form by emailing it to you transparently.
The PHP code creates the email message, sends it to you, and then generates a web page confirmation for the user.
PHP code runs on the server and is stored in PHP scripts that usually have a .php file extension. PHP scripts often look a lot like normal HTML web pages because they can contain both HTML code and CSS code. In fact, when the server runs a PHP script the end result is always pure HTML and CSS. So every PHP script ultimately gets turned into HTML and CSS once it’s finished running on the server.

The server returns a pure HTML web page that was generated by the PHP script.

A form element’s action attribute is what connects a form to a PHP script, causing the script to run when the form is submitted.

form action = "report.php" method = "post" /form

Use PHP to access the form data

It’s perfectly normal for a PHP script to include regular HTML tags and attributes


html>
head>
title>Aliens Abducted Me - Report an Abduction
/head>
body>
h2>Aliens Abducted Me - Report an Abduction /h2>

?php
$when_it_happened = $_POST['whenithappened'];
$how_long = $_POST['howlong'];
$alien_description = $_POST['description'];
$fang_spotted = $_POST['fangspotted'];
$email = $_POST['email']; echo 'Thanks for submitting the form.
'; echo 'You were abducted ' . $when_it_happened; echo ' and were gone for ' . $how_long . '
'; echo 'Describe them: ' . $alien_description . '
'; echo 'Was Fang there? ' . $fang_spotted . '
'; echo 'Your email address is ' . $email;
?>
/body>
/html>

Just like a normal web page, this PHP script finishes up by closing out open HTML tags.

PHP scripts must live on a server!

Unlike HTML web pages, which can be opened locally in a web browser, PHP scripts must always be “opened” through a URL from a web server.
Web browsers know nothing about PHP and, therefore, have no ability to run PHP scripts.

Deconstructing Owen’s PHP script

The first chunk of code is pure HTML. It just sets up the page we’re building, including a few HTML tags required of all pages.

html>
head>
title>Aliens Abducted Me - Report an Abduction
/head>
body>
h2>Aliens Abducted Me - Report an Abduction /h2>

?php

This code grabs the form data and stores it away in individual variables so that we can easily access it later. PHP variables allow you to store values, be they numbers, text, or other kinds of data.


$when_it_happened = $_POST['whenithappened'];
$how_long = $_POST['howlong'];
$alien_description = $_POST['description'];
$fang_spotted = $_POST['fangspotted'];
$email = $_POST['email'];

Here the variables we just created are put to work by inserting them into dynamically generated HTML code. The echo command outputs HTML code that gets returned directly to the web browser.


echo 'Thanks for submitting the form.
'; echo 'You were abducted ' . $when_it_happened; echo ' and were gone for ' . $how_long . '
'; echo 'Describe them: ' . $alien_description . '
'; echo 'Was Fang there? ' . $fang_spotted . '
'; echo 'Your email address is ' . $email;
?>
/body>
/html>

A few PHP rules to live by

PHP code is always enclosed by ?php and ?>.

Every PHP statement must end with a semicolon (;)

If there is any PHP code in a web page, it’s a good idea to name the file on the web server with .php, not .html.

PHP variable names must begin with a dollar sign ($).

Finding the perfect variable name

In addition to starting with a $, PHP variable names are also are case-sensitive.
Let’s start with the official rules that will absolutely cause problems if you ignore them when naming variables.

The first character must be a dollar sign ($).

A variable name must be at least one character in length.

The first character after the dollar sign can be a letter or an underscore (_), and characters after that can be a letter, an underscore, or a number.

Spaces and special characters other than _ and $ are not allowed in any part of a variable name.

These last two rules won’t break your code if you ignore them, and you’ll certainly run across PHP code that doesn’t adhere to them yet works just fine. This is because they are just a stylistic convention—but they will serve you well as you begin creating and naming variables of your own.

Use all lowercase for variable names.

Separate words in a multi-word variable name with underscores.

Variables are for storing script data

PHP variables are storage containers that store information kinda like how a cup stores a beverage. Since the $alien_description variable is empty, we know that the form data is never making its way into it. So the $alien_description variable remains empty despite our attempt to assign data to it.
One way to fix the script would be to just assign the exact string we’re expecting to the $alien_description variable, like this:

$alien_description = 'little green men';

Pieces of text in PHP, also known as strings, must always be enclosed by quotes, either indexpic4.style.left = posiLeft + "px"; indexpic4.style.top = posiTop + "px"; indexpic5.style.left = (posiLeft *2) + "px"; indexpic5.style.top = posiTop + "px"; fCenter.style.top = centerPosTop + "px"; fCenter.style.left = centerPosLeft + "px"; } function Field2PosGet() { var fpichangepointer = document.getElementById("picchangepointer"); var ofTop = fpichangepointer.offsetTop; if (window.pageYOffset >= ofTop){ document.getElementById("fielIMG").src = "pic/backgrounds/automobile-fast-number-248747.jpg"; } if (window.pageYOffset <= ofTop) { document.getElementById("fielIMG").src = "pic/backgrounds/auto-automobile-automotive-919073.jpg"; } } function getDescript(event) { var tid = event.target.id; var tidelement = document.getElementById(tid); var divid = tidelement.parentNode.id; var thediv = document.getElementById(divid); var parid = thediv.children[1].id; var theimgid = thediv.children[0].id; var theimg = document.getElementById(theimgid); var thepar = document.getElementById(parid); var imgfog = setInterval(Fogging, 10); var fogmeter = 1; thepar.addEventListener("mouseleave", ProbaFunction); function ProbaFunction(){ clearInterval(imgfog); theimg.style.opacity = 1; thepar.style.opacity = 0; } // remove parent's child// //tidelement.parentNode.removeChild(tidelement);// thepar.style.opacity = "1"; function Fogging(){ fogmeter = fogmeter - 0.005; theimg.style.opacity = fogmeter; if(fogmeter <= 0.55){ clearInterval(imgfog); return; } } } function Reloading(){ location.reload(); var x = window.innerWidth; var y = window.innerHeight; single quotes or double quotes.

Somehow the assignment of alien description form data to the $alien_description variable is coming up empty.
$alien_description = $_POST['description']; What do you think this code is doing wrong?

The problem does have to do with $_POST, which is a mechanism used to pass along form data to a script. So the data in each field of the Report an Abduction form is accessed using $_POST. But what exactly is $_POST... a variable?
$–POST is a special variable that holds form data
$_POST is a special variable that is known as a superglobal because it is built into PHP and is available throughout an entire script.

$–POST transports form data to your script

$_POST is a special kind of PHP storage container known as an array, which stores a collection of variables under a single name. Each element in the $_POST array corresponds to a piece of data entered into a form field. To access the data for a specific form field, you use the name of the field with $_POST. So the duration of an abduction is stored in $_POST['howlong'].
The name of the form field determines how it is accessed within the $_POST array.

The name of the form field in report.html is “aliendescription”, which doesn’t match the name used in $_POST.

We need to change $_POST so that the form field name is correct: ‘aliendescription’.

As it stands, the report.php script is grabbing the data from the Report an Abduction form and generating an HTML confirmation page for the user. But it’s not yet solving the original problem of emailing a message to Owen when the form is submitted.

This email message can be generated from PHP code by putting together a string that combines static text such as "Other comments:" with form field data stored in variables.

Creating the email message body with PHP

Now you need to use concatenation again to build an email message string with variables sprinkled in among static text.

$msg = $name . ' was abducted ' . $when_it_happened . ' and was gone for ' . $how_long . '.' .
'Number of aliens:' . $how_many . 'Alien description: ' . $alien_description . 'What they did: ' .
$what_they_did . 'Fang spotted: ' . $fang_spotted . 'Other comments: ' . $other;

You’ll normally use HTML tags to format the output of PHP code since in most cases PHP is used to dynamically generate a web page. But not in this case.
Here we’re generating an email message, which is plain text, not HTML.

PHP handles strings differently depending on whether they’re enclosed by single or double quotes.

Single-quoted strings are considered raw text, whereas PHP processes double-quoted strings looking for variables.

When a variable is encountered within a double-quoted string, PHP inserts its value into the string as if the strings had been concatenated. So not only is a double-quoted string necessary to make the newlines work in the email message, but it also allows us to simplify the code by sticking the variables directly in the string.

Concatenation is no longer necessary since variables can be referenced directly within a double-quoted string.

$msg = "$name was abducted $when_it_happened and was gone for $how_long.\n" .
"Number of aliens: $how_many\n" .
"Alien description: $alien_description\n" .
"What they did: $what_they_did\n" .
"Fang spotted: $fang_spotted\n" .
"Other comments: $other";

What happens if I need to use a single quote (apostrophe) within a single-quoted string, as in 'He's lost!'?

This is where escape characters come in handy. To use a single quote inside of a single-quoted string, just escape it as \', like this: 'He\'s lost!'. The same applies to a double quote inside of a double-quoted string—use \". You don’t have to escape quotes when they don’t conflict, such as a single quote inside of a double-quoted string: "He's lost!".

Assemble an email message

The following pieces of information are used in pretty much all emails:

  1. The message body
  2. The message subject.
  3. indexpic4.style.left = posiLeft + "px"; indexpic4.style.top = posiTop + "px"; indexpic5.style.left = (posiLeft *2) + "px"; indexpic5.style.top = posiTop + "px"; fCenter.style.top = centerPosTop + "px"; fCenter.style.left = centerPosLeft + "px"; } function Field2PosGet() { var fpichangepointer = document.getElementById("picchangepointer"); var ofTop = fpichangepointer.offsetTop; if (window.pageYOffset >= ofTop){ document.getElementById("fielIMG").src = "pic/backgrounds/automobile-fast-number-248747.jpg"; } if (window.pageYOffset <= ofTop) { document.getElementById("fielIMG").src = "pic/backgrounds/auto-automobile-automotive-919073.jpg"; } } function getDescript(event) { var tid = event.target.id; var tidelement = document.getElementById(tid); var divid = tidelement.parentNode.id; var thediv = document.getElementById(divid); var parid = thediv.children[1].id; var theimgid = thediv.children[0].id; var theimg = document.getElementById(theimgid); var thepar = document.getElementById(parid); var imgfog = setInterval(Fogging, 10); var fogmeter = 1; thepar.addEventListener("mouseleave", ProbaFunction); function ProbaFunction(){ clearInterval(imgfog); theimg.style.opacity = 1; thepar.style.opacity = 0; } // remove parent's child// //tidelement.parentNode.removeChild(tidelement);// thepar.style.opacity = "1"; function Fogging(){ fogmeter = fogmeter - 0.005; theimg.style.opacity = fogmeter; if(fogmeter <= 0.55){ clearInterval(imgfog); return; } } } function Reloading(){ location.reload(); var x = window.innerWidth; var y = window.innerHeight;
  4. The sender’s email address (who the message is FROM).
  5. The recipient’s email address (who the message is TO).

Variables store the email pieces and parts

e the “from” email address is already stored away in the $email variable thanks to the form-handling code we wrote earlier in the chapter.

$email = $_POST['email'];

$to = 'owen@aliensabductedme.com';

$subject = 'Aliens Abducted Me - Abduction Report';

$msg = "$name was abducted $when_it_happened and was gone for $how_long.\n" .
"Number of aliens: $how_many\n" .
"Alien description: $alien_description\n" .
"What they did: $what_they_did\n" .
"Fang spotted: $fang_spotted\n" .
"Other comments: $other";

Sending an email message with PHP

This requires PHP’s built-in mail() function, which sends a message based on information you provide it
These three pieces of information are required by the mail() function, so you always need to provide them.

mail($to, $subject, $msg);

The text ‘From:’ must be prepended to the email address when specifying the address of the email sender.

mail($to, $subject, $msg, 'From:' . $email);

Just add the code that calls mail() to your script.

html> head> title>Aliens Abducted Me - Report an Abduction /title>
/head>
body>
h2>Aliens Abducted Me - Report an Abduction /h2>
?php
$name = $_POST['firstname'] . ' ' . $_POST['lastname'];
$when_it_happened = $_POST['whenithappened'];
$how_long = $_POST['howlong'];
$how_many = $_POST['howmany'];
$alien_description = $_POST['aliendescription'];
$what_they_did = $_POST['whattheydid'];
$fang_spotted = $_POST['fangspotted'];
$email = $_POST['email'];
$other = $_POST['other'];
$to = 'owen@aliensabductedme.com';
$subject = 'Aliens Abducted Me - Abduction Report';
$msg = "$name was abducted $when_it_happened and was gone for $how_long.\n" .
"Number of aliens: $how_many\n" .
"Alien description: $alien_description\n" .
"What they did: $what_they_did\n" .
"Fang spotted: $fang_spotted\n" .
"Other comments: $other";
mail($to, $subject, $msg, 'From:' . $email);
echo 'Thanks for submitting the form.br />';
echo 'You were abducted ' . $when_it_happened;
echo ' and were gone for ' . $how_long . 'br />';
echo 'Number of aliens: ' . $how_many . 'br />';
echo 'Describe them: ' . $alien_description . 'br />';
echo 'The aliens did this: ' . $what_they_did . 'br />';
echo 'Was Fang there? ' . $fang_spotted . 'br />';
echo 'Other comments: ' . $other . 'br />';
echo 'Your email address is ' . $email;
?> /body> /html>



2 Connecting to MySQL

How it fits together