This is the first part
of a short series in which we illustrate the development of a web project from
beginning to end. These illustrations are intended to show you a more
complete picture of a web development effort, spanning multiple technologies to
accomplish a single objective.
For this project, that
objective is the creation of a simple order page. This page will enable
the site’s visitor to select from a variety of items being offered for sale.
The page will check for invalid entries. It will count the number of items
selected and show the total cost as items are selected. When the visitor
finalizes their selections, the information entered will be written to a file, a
page confirming their order will be displayed and an email confirmation will be
sent to the email address they provided.
To accomplish all this,
the page will use HTML (surprise, surprise!) to format the page and display the
order form, coupled with JavaScript to perform the error checking and arithmetic
calculations. PHP will be used to process the information, store it in the
file and provide the user with their confirmations.
This project is not a
complete e-commerce solution by any means, but it does illustrate one possible
set of the elements involved in one, and could provide the basis upon which one
could be developed.
As each portion of the
project is demonstrated, reference is made to the tutorials in HTML Goodies
where the fuller explanations of the program code used can be found, with the
exception of the HTML used to provide the page itself. It is considered
pretty much essential that you have a basic understanding of web pages
themselves, and of the HTML used to create them, before this illustration could
be of any real value to you. If you have not yet studied the HTML primers
and are not familiar with HTML, you are, for this reason, strongly encouraged to
do so before getting into this illustration. Here’s a link to them for
you:
https://www.htmlgoodies.com/javascript/javascript-primers-introduction/
Enough of the
introductory stuff, let’s get into the page itself! Here is the HTML that
will provide the basis of our order form page. It doesn’t yet contain the
form — that will come next. neither does it contain any of the JavaScript
code that will make it jump through hoops — that too will come later.
This is just the page framework — and it look like the page is a part of the
famous (or maybe infamous) Acme Widget Company’s enterprise!
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Acme Widgets – Get Your Widgets Here!</title>
</head>
<body bgcolor="#FFFFCC">
<h2>The Acme Widget Company</h2>
<h3>Get Your Widgets Here!</h3>
<p>Please make your selections from the following choices:</p>
<p> </p>
<p>If you have questions or difficulties with this order page, please contact
our Customer Service Department (see our Contacts page.)</p>
</body>
</html>
And there it is! A
simple, basic web page to begin with. It’s worth noting just how simple
this beginning is, because in a few more steps, this page is going to become a
lot more impressive! If you’d like to see the humble base page in action,
click here!
In the next step, we’ll be adding the form itself.