A Simple Order Form Page
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.
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: http://www.htmlgoodies.com/primers/basics.html
<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>
<h2>The Acme Widget Company</h2>
<h3>Get Your Widgets Here!</h3>
<p>Please make your selections from the following choices:</p>
<p>If you have questions or difficulties with this order page, please contact
our Customer Service Department (see our Contacts page.)</p>
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.