Last updated: 9/13/00

iHTML Project 1
(eCommerce only)

1. This project, which is the first eCommerce assignment, is to create a web-based system so that:
   1. users
      1. fill out a web form with a personal piece of information, such as first name, and an Internet email address (the kind with "@" in it)
      2. click on a button to send the information back to the web server
   2. the system at the web server
      1. stores the information entered on the form into a database
      2. generates a personalized web response page to return to the user
      3. generates a personalized automatic email message back to the user
2. This project requires that your team generate three files and then upload them to the team web site:
   1. The HTML file with the web form (extension "htm" or "html") which you can generate with Frontpage Editor
   2. An iHTML script file to process the data (store, respond, email) which you will generate using Notepad or a similar text editor.
   3. A database file (one has already been created on your team web site)
3. HTML form
   1. An HTML form has fields for entering information (clicking or typing). The user enters information, which is called the value. The information also has a name, determined by you, the web developer, when you generate the HTML form file. Together, the two consitute a name-value pair. There is a name-value pair for each field on the form. To use the value, the web developer specifies the name. For example, if your form has a field for first name, you might set the name to fname (you can name this anything you want, but something that reminds you of the meaning will prevent confusion later on). If the user types "David" in that field, then the value of fname is David. The next user might type in "Jane", and that time the value of fname would be Jane. The value changes from use to use, but the name remains the same. The user's Browser sends the form information (names and values) to the web server when the clicks on the Submit button. You can change the text on the Submit button (for example, to "Send in my information"), but it is still the Submit button.
   2. Creating a web page in FrontPage editor is very much like word processing. One big difference is that, in the print world, color is expensive, while in the web world, color is free, so use color!
   3. To put a form file on a web page, choose the menu item Insert / Form Field and then choose the type of field you want. For this project, use two One-Line Text Boxes. When you insert the firstText box, you also get, as below:
      1. A Submit button (sends the information to the web server)
      2. A Reset button (clears all the entered information. I like to delete this because it can be frustrating for users, if they click this by accident in the middle of filling out a long form)
      3. A dotted line indicating the top and bottom of the form. the Submit button and the Reset button (if present) act on all of the fields between the top of the form and the bottom of the form.

4. The elements inside the dotted line can be moved around like letters using spacebar, tab, Enter (new line) etc. You can move the cursor around with the error keys, just as with letters. You can type the labels for the text boxes by putting the cursor just at the left side of the text box and typing the label. You can also put other text and/or pictures in the form.
5. To name a form field, right-click on it and select Form Field Properties... and then type in the name and click OK.
6. After you have the form and the rest of the web page looking the way you want, save the file. You will have to remember the path and name of the file, so you should write these down. Then there is one last change you must make - tell iHTML what iht file to use to process this information when it is submitted. So, decide at this point on the name of the iHTML file that you will used (for example, project1.iht). With your form still open in FrontPage, click on the HTML tab near the lower left corner of the screen, and find the <form...> tag. You will probably see something like

<form method="POST" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="_private/form_results.txt" S-Format="TEXT/CSV"
S-Label-Fields="TRUE" -->

7. Change this as follows:
   7. In the <form...> tag, inside the quotation marks replace what is there with the name of the iHTML file you will generate. Include the extension .iht
   8. Delete the comment starting with <!-- and ending with -->. There may be more than one comment. Delete them all.
   9. Switch back to Normal view and verify that the web page still oooks OK
   10. Perform a final Save. Switch back to HTML view and verify that these edits have not been changed by FrontPage
   11. Close FrontPage

5. iHTML file
1. With iHTML, special non-HTML tages are used, that look like HTML tags, but carry out tasks such as storing information in a database or sending an email. The user never sees these special tags, since they are stripped out by the iHTML file processor. Also, if the form has a filed named fname, then :fname is replaced in the file with the value (such as David). If the form has a field named email, for email address, then :email is replaced in the file with the value (such as d.r.bowen@wayne.edu).
2. An example iHTML file is shown below. You can use this file for your project, with the following changes:
   1. aaa - change to your team name (e.g. Team1)
   2. bbb - change to the name of the table in your database that will store the information from the form. You will actually create this table later. As always, use names that describe the content, not formal names such as "Field1"
   3. ccc - change to the name of the field in this database table that will hold the personal information (the names of the database fields do NOT need to match the name of the corresponding fields on the HTML form, but may match)
   4. ddd - change to the name of the field in this database that will hold the email address
   5. eee - the name of the field on the HTML form in which the user will type his/her personal information
   6. fff - the name of the field on the HTML form in which the user will type his/her email address
   7. ggg - the text that you want on the Browser's title bar.

Example iHTML file:

<!ihtml>

<!--Inserting the current information into the Plan Table-->
<iHTML DBNAME="aaaDSN"
SQL="insert into bbb (ccc, ddd)
Values(':eee', ':fff')"
ESC="FALSE"
FAILURE="Error: :i_error :i_errortext :i_sqlerrortext<br>">

<!--Display information on the response page-->
<html>
<head>
<title>ggg</title>
</head>
<Body>
<p>Your information, <i>:eee </i>, has been received and will be stored.</p>
<p>Thank you for using our web page.</p>
<p>The email address that you gave us is :fff</p>
</body>
</html>

<!-- Automatic Email generation -->
<iMAIL ADDRESS="fff"
FROM="aaa@www.cll.wayne.edu"
HOST="www.cll.wayne.edu"
SUBJECT="Email confirmation"
OUTPUT="Your confirmation was emailed successfully.<br>"
REPLYTO="aaa@www.cll.wayne.edu"
SENDER="aaa">
Name: :eee
We have stored the information you entered on our web site.
End of message
</iMAIL>

6. Database file
   1. Using FTP, download your startup database file from your team web site, to a known location on your computer (A or C drive)
   2. Start Microsoft Access and open your database file from the known location
   3. Create a new table, using the name bbb above
   4. In the new table, create fields with names ccc and ddd above
   5. Close the database and close Access
7. Testing
1. Upload your HTML form file and your iHTML file and your changed database file to your team web site, using either FTP or the web file upload page.
2. Bring your form up in a web Browser by typing the URL for your team web site and appending the file name of the HTML form file.
3. Fill in the form. Please make sure to use a valid Internet email address in the form.
4. Click on the Submit button
5. Observe the response page. Expect errors and look for clues as to what is wrong.
6. Check the email address that you typed in. It may take several minutes to deliver the message.
7. Download your team database file, using either FTP or the URL for the database file, and open the file and your table using Access.
8. Do a second test of the file and repeat the checks in 5 - 7.
9. Send an email to the instructor saying that your project is ready for checking.