Web Publishing with PHP and FileMaker 9- P3 potx

For the time being, you can assume that all HTML documents will begin with an opening
HTML tag and end with a closing HTML tag.
The second and fourth lines of the example are the opening and closing tags for the head
element. All HTML documents should contain a head element. The head element
contains information about the document itself. It can contain a lot of different things,
but for now I am only going to put a title element in it. Here is the title element:
<title>NewCo Home Page</title>
We looked at the structure of the title element already, but I didn’t tell you what it was
for. The content of the title element is the text that appears in the title bar of the web
browser when a user is on your web page. So, if you open this sample file in a browser, it
will say “NewCo Home Page” at the very top of the window.
Directly after the title element comes the closing tag for the head element:
</head>
Next is the opening tag for the body element. You can think of the body element as the
place where all the stuff that is going to show up in the browser window goes. That being
the case, you will pretty much always have a body element in an HTML document.
Okay, now we are getting to the good stuff. Right after the opening tag for the body, we
have an image element. (There is kind of a lot going on with image tags, so if you start to
get lost, just skip it and come back later.)
<img The first thing to note about image element is that it is self-closing, which means it does
not have a closing tag. You can spot self-closing tags because they have a slash before the
> at the end of the opening tag.
The next thing to talk about with the image element is that it has an attribute in it:
src=”NewCoLogo.jpg”
Attributes are name/value pairs that are included in the opening tag of an HTML element.
Most HTML elements can take attributes, but only a few are actually required.
In the interest of keeping things simple, I am going to stay away from attributes except
where they are required for the tag to function. This is one of those cases. If you don’t
specify the source attribute of the image tag, the browser does not know what picture
you are trying to include on the page. In this case, we are including an image called
NewCoLogo.jpg.

You might be wondering where the browser will look for the NewCoLogo.jpg image when
it encounters the
img tag in the preceding example. The short answer is that it will look
in the same directory where the HTML page is stored.
CHAPTER 2 Introduction to HTML
20
If you lump all of your HTML pages and images into the same directory, you can just
point all your
img src attributes at the appropriate image name. In practice, web develop-
ers normally prefer to store their images in a different directory than their HTML docu-
ments, so the image tag might look more like this:
<img src=”images/NewCoLogo.jpg” />
Of course, this means that if NewCoLogo.jpg gets deleted or moved to a new location, the
browser won’t be able to find it and will display a “missing image” icon.
NOTE
I am on the verge of opening up a huge can of worms. For now, let me just say this:
The example here is of a relative path to the image. That is, file system paths relative
to the
home.html document. There is another kind of path called an absolute path,
which ignores the location of the current HTML document. I talk more about the differ-
ence between relative and absolute paths in the context of another tag, so for now,
let’s just leave it at that.
Moving right along, we come to this line:
Where people and food come together
This is just a raw line of text that is not enclosed in opening and closing tags. Well, tech-
nically, it is enclosed in the body tags, but it doesn’t have a special set of tags enclosing it
by itself. That being the case, this string will just be displayed in the browser with no
special handling at all. It’ll just show up.
The next line is an example of a heading element:
<h1>Welcome to NewCo!</h1>

When a browser encounters a heading, it renders the text in a bold font weight and
displays the text on its own line. Furthermore, headings come in six varieties:
h1, h2, h3,
h4, h5, and h6. The lower the number, the higher the priority. So, when displayed in a
browser, an
h1 will be much larger than an h5.
The short line is a horizontal rule:
<hr />
True to its name, a horizontal rule draws a horizontal line across the screen. Normally,
they are used to separate sections of a page, or give some kind of visual organization. As
you can see, it is self-closing like the
img tag that we looked at already, so you won’t find
an
</hr> tag anywhere.
Which brings us to this line:
<a href=”products.html”>Product List</a>
Case 1: Company Home Page
21
2
Okay, now we get to talk about what is arguably the very coolest thing about HTML: the
hyperlink. As you undoubtedly know, hyperlinks are those little hot spots on a web page
that, when clicked, transport you to another web page. The HTML element behind these
links is called the anchor tag.
The anchor tag has something in common with the
img tag, namely, that it has to have
an attribute specified for it to do anything. In this case, it’s the
href attribute followed by
the name of the target HTML document:
href=”products.html”
Unlike the img tag, the anchor element has an explicit closing tag because it has content.

In this example, the content is
Product List, which is the string that shows up in the
browser window for you to click.
In this example, I am using a relative path to point to another page that is in the same
directory as the
home.php page. But what if you want to link to a document that is not on
the same computer?
Suppose you want to add a link to Google’s home page on your page. This is where those
absolute paths I mentioned come in. Here is what a link to Google’s home page looks like:
<a href=” />Notice that the href starts with http://. This probably looks familiar from your browser’s
address bar. Absolute paths are not really any different than a bookmark. It’s just like a
uniform resource locator (URL) you would type into your browser’s address bar.
At this point, you have seen all of the most complex tags, so it’s all downhill from here.
The following line is another anchor tag, but it points to a page named
contact.html
instead of products.html:
<a href=”contact.html”>Contact Us</a>
The anchor tag is followed by another horizontal rule:
<hr />
Here we have another heading element, but this time it is an h3, meaning that it will be
smaller than the
h1 that is farther up the page.
<h3>Corporate Philosophy</h3>
Next, we see something that we have not seen previously—the p tag:
<p>Here are NewCo, we believe that a healthy profit margin is the
➥
best way to make money.</p>
This is a paragraph element, which instructs the browser to output the text just like it
looks, but with some space above and below it.
CHAPTER 2 Introduction to HTML

22
At this point, there isn’t a new tag until the third to last line of the entire document:
<p>Copyright 2007, NewCo, Inc.<br />Site updated 1/26/2007</p>
At first glance, this might appear to be just another paragraph element, but if you look
right in middle of it, there is another tag inside:
<br />
This is a br or line break tag, which instructs the browser to bump down to a new line.
This is different than the line breaks provided by the paragraph tag because the paragraph
tag adds some spacing. The
br tag does not.
That actually brings up a general HTML topic that I have been skirting up until now.
Because we’ve covered everything in the home page document, now’s as good a time as
any.…
You might have noticed that I indented the HTML in the example to reflect the logical
structure of the document. When an element was contained by another element, I
indented the inner element to reflect the logical structure of the document.
You might have also noticed that I put the two anchor links on separate lines in the
HTML, but in the browser they show up next to each other.
What I am trying to draw your attention to is the fact that the browser does not care
about any whitespace in your HTML. So, spaces, tabs, and carriage returns are ignored by
the browser. I could have written the entire example on the same line and it would have
looked exactly the same in the browser. I only indented it and broke things out on sepa-
rate lines because it is much easier to read that way.
So, why are the heading and paragraphs on separate lines in the browser? Read on.…
All the elements that are in the body element of this document fall into one of two cate-
gories: block or inline. Block elements are displayed on their own line. Inline elements
flow next to each other. Heading and paragraphs are block elements, so they force every-
thing else out of the horizontal space that they are occupying.
Images and anchors are inline elements, so they flow right next to each other. That’s why
the two anchor tags are next to each other. It’s also why the line “Where people and food

come together” is next to the logo image. If images were block elements, the line would
have appeared under it.
Whitespace can actually be a very complex topic, and as such, I am going to stop here.
All you need to remember for now is that the formatting of your HTML document does
not matter to the browser. If you want to geek out on HTML whitespace specifications,
feel free to visit this site:
/>Case 1: Company Home Page
23
2
Case 2: Product List
Now that we have covered a bunch of HTML basics by reviewing the home page, we can
move on to a more complex structure. In this section, we look at the product list page
and introduce you to HTML tables.
Figure 2.2 shows the product list page in a browser.
CHAPTER 2 Introduction to HTML
24
FIGURE 2.2 The product list page viewed in a web browser.
Here is the HTML that’s behind the product list page:
<html>
<head>
<title>NewCo Product List</title>
</head>
<body>
<a href=”home.html”>Back to Home Page</a>
<hr />
<table border=”1”>
<tr>
<th>Mfr Number</th>
<th>Name</th>
<th>Price</th>

</tr>
<tr>
<td>MFR-123</td>
<td>Skeeter’s Egg Beaters</td>
<td>$24.99</td>
</tr>
<tr>
<td>MFR-234</td>
<td>Merry Tofu Substitute</td>
<td>$2.99</td>
</tr>
<tr>
<td>MFR-345</td>
<td>Charcuterie de Leo</td>
<td>$14.99</td>
</tr>
</table>
</body>
</html>
Other than the contents of the body tag, this page bears a striking resemblance to the
home page shown and discussed in the previous section. In fact, the only difference on
the first five lines is that I changed the contents of the title element to “NewCo Product
List” so that the text in the title bar of the product list page would be appropriate:
<html>
<head>
<title>NewCo Product List</title>
</head>
<body>
Then a basic anchor tag provides navigation back to the home page:
<a href=”home.html”>Back to Home Page</a>

Next we have a plain old horizontal rule:
<hr />
And now the fun begins:
<table border=”1”>
This is the opening tag for a table element. A table is a section of a document that
contains rows, columns, and cells, like a spreadsheet. They are appropriate to use for
tabular data, such as a product list.
I have included a border attribute in this table opening tag to add borders to the table’s
cells because it makes the data easier to read. If I had not included the border attribute,
Figure 2.2 would have no lines in the product list.
Tables can contain a few different elements, but the only one that we are going to talk
about is the
tr, or table row element. You can see an opening tr tag right after the
opening table tag:
<tr>
This tr contains three instances of the th, or table header element:
<th>Mfr Number</th>
<th>Name</th>
<th>Price</th>
Case 2: Product List
25
2
As you might guess by the name, these will be interpreted by the browser as header cells,
and as such, the text is set in bold and centered in the cell. Refer to Figure 2.2 to see what
I mean.
After the table header cells, you will find a closing
tr tag, which signals the browser that
this row is complete.
A new row is opened up after the header row is closed, but this one contains three
instances of a different sort of element: the

td, or table data element:
<td>MFR-123</td>
<td>Skeeter’s Egg Beaters</td>
<td>$24.99</td>
The table data element represents a data cell. Data in a td is output as plain text, flush left
in the cell. The really cool part about the
td (and the th, actually) is that they expand to
fit the largest piece of data in the column—not just the current cell—which keeps things
all lined up and easy to read. This is extremely convenient, and is really tough to do any
other way.
After these three table data elements is a closing
tr tag, followed by two more rows, each
with three table data elements:
<tr>
<td>MFR-234</td>
<td>Merry Tofu Substitute</td>
<td>$2.99</td>
</tr>
<tr>
<td>MFR-345</td>
<td>Charcuterie de Leo</td>
<td>$14.99</td>
</tr>
Finally, the table is closed:
</table>
The body is closed:
</body>
and the HTML is closed:
</html>
Of course, there is a lot more to tables than this, but what we have covered here will get

you very far before you need to start worrying about the more esoteric features available
in a table.
Which brings us to.…
CHAPTER 2 Introduction to HTML
26
Case 3: Contact Page
So far, we have looked at a handful of core HTML tags, and now you have tables under
your belt. In this section, we look at the contact page and introduce you to HTML forms.
Figure 2.3 shows the contact page in a browser.
Case 3: Contact Page
27
2
FIGURE 2.3 The contact page viewed in a web browser.
Before I show you the HTML for this page, I want to point out a glaring difference
between this page and the previous two pages, namely, that this page accepts input from
the user. This is an enormous difference and brings with it a whole host of sophisticated
issues, not the least of which is security. True to “form” (pun intended), I am going to
stick to the basics of the HTML form. Security and other form-related topics are dealt with
elsewhere in this book.
Here is the HTML that’s behind the contact page:
<html>
<head>
<title>Contact NewCo</title>
</head>
<body>
<a href=”home.html”>Back to Home Page</a>
<hr />
<p>Please enter your info and we will get back to you </p>
<form action=”contact.html” method=”get”>
Your Name: <br />

<input type=”text” name=”cust_name” /><br />
Your Phone: <br />
<input type=”text” name=”cust_phone” /><br />
<input type=”submit” name=”send_button” value=”Send”>
</form>
</body>
</html>
As with the product list example, there is much to this HTML that should look familiar:
HTML tags at the top and bottom, a head section with a title in it, and a body section. All
of the action is in the body, so let’s jump right to the new stuff. Check out this line:
<form action=”contact.html” method=”get”>
This is the opening form tag. It is has two attributes, action and method. These attributes
are very important, but you can ignore them for now. I talk about them both in detail at
the end of this section.
Next, we have some raw text, followed by a line break:
Your Name: <br />
Referring to Figure 2.3, notice that this text is functioning as a label for the data entry
field that follows underneath it. The code for the data entry field can be found on the
next line. It is called an input element:
<input type=”text” name=”cust_name” />
Input elements frequently have lots of attributes specified, but the only two that are
important in this case are the
type and name attributes.
The type attribute determines the look and behavior of the input element. Because I need
a spot for a user to enter some text, I cleverly defined the type as
“text”.
The name attribute is a bit more interesting. When a user enters some text and submits the
form, the value that he enters is assigned to the name that you use for the input. There-
fore, when you have more than one input on a form, you need to make sure that they all
have unique names; otherwise, you will lose some of their data entry.

You should note that input is a self-closing element, so don’t forget your closing slash
when building one yourself.
The
cust_name input is followed by an almost identical pair of lines:
Your Phone: <br />
<input type=”text” name=”cust_phone” /><br />
Note that the only significant difference here is that the name of this input is—and must
be—different than the preceding input.
The next line is the button that will submit the form. Here is the code that draws the
button:
<input type=”submit” name=”send_button” value=”Send” />
Remember when I said that the type attribute of the input element determines the look
and behavior of the input? Well, this is a good example. Refer to Figure 2.3 and notice the
Send button; compare this line with the other inputs. This line is an input just like the
CHAPTER 2 Introduction to HTML
28
others, except that its type is “submit” instead of “text”. That’s why it looks like a
button instead of a data entry field. This line also has a third attribute:
value=”Send”
Setting the value attribute of a submit input is how you get the label on the button in
the browser, so you won’t want to leave it out.
Okay, it’s time to loop back and discuss the attributes in the opening form tag. The
action attribute of a form tag specifies the page that is going to process the form. When a
user clicks a Submit button, the information from a form is sent to the page specified in
the
action attribute. You can think of it as a special kind of hyperlink.
In the case of this example, I am submitting the form to itself. This essentially means that
the form won’t really do anything. However, if you download the sample file and try it
out for yourself, you will see something interesting. Namely, the data that you enter in
the form gets appended to the URL in your browser’s address bar when the Submit button

is clicked.
Here is the URL before I submit it:
http://127.0.0.1/contact.html
And after:
http://127.0.0.1/contact.html?cust_name=jstark&cust_phone=123-1234&send_button=Send
Note the question mark in the second URL. In a URL, a question mark indicates the
beginning of a query string. A query string is a list of one or more name/value pairs, delim-
ited by ampersands. You can see that there are two ampersands in the second URL. They
are there to signify the break between one set of name/value pairs and the next pair. Also
note that the input names that I used in the form are the names in the query string.
Summary
I am going to abruptly stop the discussion of HTML forms at this point. I realize that it’s a
bit of a cliff-hanger—I mean, I have not even explained how to do anything with the data
that a user enters into a form.
I have a good reason for this, which is that to do anything with form input, you need a
special page on your web server to handle it. You need to point your form’s
action
attribute at a page that can read the form input, make decisions based on what it finds,
and do something with the result. For this, we will use PHP, which is covered in the next
chapter. At the end of the PHP chapter, I will loop back and revisit form handling.
In the meantime, please take some time to play around with the HTML examples from
this chapter. Modify them, see what breaks, and see whether you can figure out how to
fix them. It might be a little frustrating at first, but as a wise man once said, “You have to
crawl before you can pole-vault.”
Summary
29
2
This page intentionally left blank
IN THIS CHAPTER
. Downloading and Testing PHP

. Basic PHP Syntax
. Simple Arrays
. Associative Arrays
. Multidimensional Arrays
. Looping
. Form Handling
CHAPTER 3
Introduction to PHP
The title of this chapter should really be “Criminal
Negligence.” PHP is a huge topic, and I am afraid I am only
going to show you enough to be dangerous.
That being said, I think my goal here is a realistic one: to
get you reading and writing basic PHP. The good news is
that a little goes a long way with PHP, and before you
know it, you’ll be creating some very useful scripts.
After you get comfortable with the basics—if you are like
me—you’ll be bitten by the PHP bug. After that, it’ll almost
teach itself to you.
Downloading and Testing PHP
PHP is a scripting language that you can use to dynamically
create Hypertext Markup Language (HTML). Like Apache,
PHP is an extremely powerful, popular, and common
program that is installed on web servers all over the world.
So, rather than having to write a static HTML page for
every occasion, you can write a PHP page that is “smart”
and responds appropriately to the situation at hand.
PHP is often referred to as middleware because it is the soft-
ware that is used to make the communication between the
front end (the web browser) and the back end (the data-
base). It is the software that sits in the middle.

Rather than get all theoretical, let’s just look at some
examples.
Downloading PHP
PHP should already be installed on any web server you
choose to rent, but sometimes it is more convenient to test
on your local machine. If you would like to give that a
shot, there are a couple of ways to get and install PHP, and
they are all free (which boggles my mind). The one that is
right for you depends primarily on your platform and level
of computer expertise. The best place to start is />where you can find complete source code, installers for Windows, and links to installers
for other platforms.
If you are not familiar with compiling from source—or if you don’t even know what that
means—you need to download and run the installer that is appropriate for your platform.
At the time of this writing, a couple of versions of PHP are available. This book was
written using PHP 5.2.1, so it would be best to download that or a more recent version.
Testing Your PHP Installation
After you have PHP installed on your local machine, you should test to make sure every-
thing went well. Follow these steps to do so:
1. Get your hands on a good plain text editor. (Text Wrangler on the Mac or Notepad
on Windows are both free options.)
2. Create a new text document.
3. Type the following line into the new document:
<?php phpinfo() ?>
4. Save the document as info.php.
5. Move
info.php into the top-level web directory on your local machine.
6. Fire up your favorite browser.
7. Point your browser to http://localhost/info.php.
You should see a long page of information about your PHP installation.
To follow along with the upcoming examples, you can save each into your web directory

as a text document named as follows:
example1.php
After being placed there, the file can be opened with a web browser pointed at
http://localhost/example1.php
Note that a common error is to try to open PHP files with the file:// protocol, which
just shows the PHP code in the browser. If you are seeing PHP code in the browser, look at
the address field. It should start with
http://, not file://.
Basic PHP Syntax
A few elements are common to all PHP pages. Consider the following short example:
<?php
echo “Hello World!”;
?>
CHAPTER 3 Introduction to PHP
32
Line 1 is the standard PHP opening tag. It lets the PHP parser know that some PHP
instructions are on the way.
Line 2 is an example of the
echo command. In this case, the echo command prints the
string
Hello World! to the browser. Note that the line ends with a semicolon. As a
general rule, all PHP statements must be terminated with a semicolon. There are some
quirky cases where the semicolon is not required, but they are rare. You might as well just
get into the habit of always using semicolons at the end of your statements.
Line 3 is the closing tag, which tells the PHP parser that it can stop looking for processing
instructions.
Adding Comments to Your PHP Code
After your PHP pages start to get complex, you will find that it is very helpful to
comment your code. This makes it much easier when you come back to a page after a
couple of weeks and need to make changes to it. As with all programming languages, PHP

supports a syntax for comments:
// This is a single-line comment
# This is another single-line comment
/* This is a
multiline comment
*/
One thing to be aware of with comments is that a PHP closing tag ends the comment, so
don’t try to do this:
// A php closing tag looks like this ?> which is sort of nice
If you do, the text, “which is sort of nice,” would be output to the browser.
Using Variables
Almost every useful PHP page requires the use of variables. Variables are a little place in
the computer’s memory where you can temporarily store a value. They only exist for the
duration of the script. Here is an example of a variable in action:
<?php
$myMessage = “Hello World!”;
echo $myMessage;
?>
On line 2, I am assigning the value Hello World! to the variable $myMessage.
You should note a few things about this:
. Variables have to start with a dollar sign, and there can be no space between the
dollar sign and the variable name.
Basic PHP Syntax
33
3
. Variable names can only contain letters (a–z, A–Z), underscores (_), and numbers
(0–9). However, they cannot start with a number.
. Variable names are case sensitive.
. The equal sign is the assignment operator. It is not checking to see if the two
operands are equal—it is telling the PHP processor that they are equal.

. Unlike some other programming languages, you don’t have to declare your variables
prior to assigning a value to them.
On line 3, I am echoing out the contents of the
$myMessage variable. So, the output of
this example would be identical to the output of the previous example.
NOTE
Criminal negligence alert! The topic of variables can get pretty deep, but I do not get
into all of that right now. Rather, I build on the simple concept presented here through-
out the book.
Combining Strings
One of the most common things you will use PHP for is to manipulate strings. Here, I
take two strings and combine them in various ways:
<?php
// set a couple variables
$myVar1 = “Hello”;
$myVar2 = “World!”;
echo $myVar1 . “ “ . $myVar2; // outputs Hello World!
echo “$myVar1 $myVar2”; // outputs Hello World!
echo ‘$myVar1 $myVar2’; // outputs $myVar1 $myVar2
?>
The first echo statement uses PHP’s concatenation operator—the period character—to
combine the two string variables with a space in the middle.
The second
echo statement takes a different approach. As you can see, the two variables
are placed inside double quotes, rather than on either side of them. PHP’s handling of
double-quoted strings is pretty smart. The PHP processor looks at the contents in the
quoted text and if it finds what look like variables in there, it substitutes the values in
their place. This is usually pretty cool, but can sometimes cause confusion. For example,
what if you want to output the actual string
$myVar? That’s where the third echo state-

ment comes in.…
The third
echo statement uses single quotes to enclose the string. PHP treats single quotes
differently than double quotes—PHP does not do any substitutions inside of single
quotes. So, the third
echo statement will output
$myVar1 $myVar2
CHAPTER 3 Introduction to PHP
34