A Simple Order Form Page

By Vince Barnes

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: http://www.htmlgoodies.com/primers/basics.html

 

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&nbsp; - 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>&nbsp;</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.

 

 

Proceed to the next step



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •