Topics for eCommerce Class three

Wayne State University College of Lifelong Learning Interdisciplinary Studies Program Fall, 2000 http://www.cll.wayne.edu/isp/drbowen/inetf00	Instructor: David R. Bowen 2311 A/AB Wayne State University Detroit, MI 48202	Daytime tel: (313) 577-1498 Evening tel: (248) 549-8518 FAX: (313) 577-8585 Email: d.r.bowen@wayne.edu
Instructor's home page (David R. Bowen) at http://www.cll.wayne.edu/isp/drbowen
eCommerce: Using the Web to Find and Service Customers AGS 3360 Section 986 Call Number 92073 or ISP 5500 Section 982 Call Number 92136	Computers, the Internet, and Society AGS 3340 Section 981 Call Number 96761 or ISP 5990 Section 982 Call Number 99915

Last updated: 9/27/00
Link back to course Welcome

Agenda for eCommerce Class #3
September 27, 2000

Announcements
1. Don't forget ten conference postings. Looking for a topic? How about writing down how the files in Project 1 work together?
2. Don't forget to sign in tonight.
3. Remember about weekly progress reports?
4. If you haven't filled in the course information form on the course web site, please do this tonight, or at least soon.
5. On Wednesday, October 4, I will miss my office hours (4 to 6 PM in 113 Rackham). Class will start at 6 PM as usual.
iHTML Project 1
1. The corrected 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. Should be preceded by a colon (:)
  6. fff - the name of the field on the HTML form in which the user will type his/her email address. Should be preceded by a colon (:)
  7. ggg - the text that you want on the Browser's title bar.
  Example iHTML file (corrected):
  
  <!ihtml>
  
  
  <iHTML DBNAME="aaaDSN"
  SQL="insert into bbb (ccc, ddd)
  Values(':eee', ':fff')"
  ESC="FALSE"
  FAILURE="Error: :i_error :i_errortext :i_sqlerrortext<br>">
  
  
  <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>
  
  
  <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>
2. Here is how iHTML works. The file has four types of content:
  1. Text not enclosed in tags such as "Thank you for using our web page."
  2. Standard HTML tags, such as <html>, <body>, <p> and so forth.
  3. "Colon variables" that start with a colon, here :eee and :fff that are used by the iHTML system
  4. Extended and proprietary iHTML tags, not part of standard HTML such as <iHTML ... >, <iMAIL ... > and </iMAIL>. The iHTML tags all begin with "i", and while they are case insensitive, like all HTML tags, it helps to have a consistent capitalization.
  The steps in processing the iht file are
  1. The iHTML system (program) is started by the web server when it gets the <form> tag in in the form file after the user clicks the SUBMIT button (which may have something else on its surface). What starts the iHTML system is the file name with the iht extension in the "action" part of the form tag.
  2. The iHTML system receives the form data from the web server and assigns a variable to every input name, and the value entered by the user as the value of that variable. The developer accesses the information by using the name, preceded by a colon (e.g. the variable :fname is given the value "David" (without the quotation marks) if that is what the user typed in.
  3. The iHTML system scans through the iht file, replacing the names with their values (e.g. replacing :fname with David).
  4. The iHTML system scans through the file again, executing the proprietary iHTML tags (e.g. sending the email) and then deleting these tags from the file as they are executed. This includes deleting everything between the <iMAIL ... > and </iMAIL> tags and the tags themselves.
  5. Whatever remains after the replacements and deletions is content a and b above. This remainder is passed to the web server, which sends it to the user as the HTML response.
  6. With more complicated iht files, several more passes through the file may be required. The point is, that iHTML keeps processing the file, pass by pass, until all of the proprietary iHTML tags are either replaced or deleted.
  7. There are many other interactive systems that process their files in a very similar manner - proprietary tags carried out and replaced. Examples are ColdFusion, ASP (MS Active Server Pages) and PHP.
3. This project, like any project involving something new, would be best completed as a series of small steps. For example, first completing the HTML form, then uploading it and viewing it. For the iht file it is composed of three separate parts (the iHTML tag must always be present):
  1. At the top, inserting the form information into a table in the database. This is probably the most difficult section to get to work, since the form file, the iht file and the database have to match exactly.
  2. In the middle, generating a personalized web page. This is the simplest, since it is complete in itself. Even if the user's name does not get onto the web page, the user will probably see something.
  3. At the bottom, sending a personalized email. This is medium difficulty.
  Since the three parts will work alone or together, in any combination and in any order (this will not always be true, but it is true here), your team should consider consider starting with the personalized web page by itself (with the iHTML tag), uploading and testing, then add the email, upload and test, and finally adding the database, upload and test.
4. You can use Notepad or Wordpad to insert iHTML tags. You can still use FrontPage to prepare standard HTML parts, for example by Copy and Paste. The is especially true if you want to make a fancier response page than the one here. In order to get the HTML tags into Notepad or Wordpad, you must copy from FrontPage in the HTML view, but I see that Team 2 is using FrontPage in the HTML view to enter the whole file.
Team Work. Go to handout.
Web site navigation
1. "Thirty seconds or they're gone". Keep your wording simple and direct. Use everyday terms; no "geek speak." Links should explain what you do or see on the destination.
2. "Nothing further than three clicks away". Give your user the choice of what to do next. Try not to have any wrong choices, but guide them if they can make a wrong choice. A "wide" structure rather than a "deep" one.
3. One idea of what people want to know when they get to a new web site is:
  1. Where am I
  2. What can I do here
  3. How can I get back to where I came from
4. Typical eCommerce structure
  1. Deep structure Vs wide structure

Overview of how you will create eCommerce web site

What is needed	What we will use
1. Web Server, or access to one.	CLL Web Server (www.cll.wayne.edu)
2. Ability to create static web pages (HTML)	FrontPage, but anything else is OK. We have gone over a lot of how to use FrontPage.
3. Programming capability. Some people regard producing static web HTML pages to be programming, but here there is something beyond that. To process user input from text boxes etc., you need an active system to store and act on the user's input, and to respond to that input.	iHTML -- inline HTML, requiring NotePad or WordPad to edit files. Not covered yet
4. Email management -- ability to send email, perhaps automatically, and receive it.	For sending automatic email, iHTML. Not covered yet.
5. Access Restriction. If you are selling content, you need some way to restrict access by people who haven't paid yet.	Not needed for any of the groups here. Several possibilities here: "blind URLs" with no links to them, you email your paid-up customers the URL. Also, access can be allowed only with a User Name and Password.
6. Access Logs. All web servers keep logs of hits. This is vital marketing information showing what customers and potential customers are interested in, where they are coming from, how many there are and whether or not they can use your web site. These days, you have about thirty seconds to provide a new user with what they are looking for. Then it's click and goodbye!	You will have access to the server logs for your web site. You will be using Microsoft Access database program to analyze them. Not covered yet.
7. Secure transactions. You must be able to demonstrate that you take customers' security seriously. The attitude that, "I don't care if they are really secure just as long as they think they are" is a marketing disaster waiting to happen. In practice, today this means encrypted (encoded) transmissions for personal information such as addresses, telephone numbers and credit card numbers.	I am currently trying to get this set up on the CLL web server. There is a chance it may not happen this semester. If it does happen, its use will just be to provide links using shttp -- Secure HyperText Transport Protocol -- instead of http. Not covered yet.
8. Credit Card Validation. Don't ship until you know the card is good! How do you get paid if the customer purchases by credit card?	I haven't really sorted this one out yet, and I may not. But there are services that will do this for you on a per-transaction basis, using email. Read McComb here and, for purposes of costing out your operation, pick one of his options.
9. Ability to upload files to the web server	There is a link to an upload page, where you can upload a file to your web site. Each team will have a User Name and a Password. For now Keep all of your web site files and any graphics in the same folder, for example on your floppy diskette Name your main page "welcome.htm" Name all of your other HTML files as you want (extension .htm) Make your links relative, not absolute
10. Ability to create web graphics (GIF or JPEG/JPG file formats). Strictly speaking, this is not required, but cool graphics are a part of the web culture, and also of selling goods.	Many options presented on Agenda 2

FrontPage
1. Clip Art and pictures. All files for your web site should be in a single folder. Why? Because, see the following:
2. Links / URLs. Links (OK, and color. And graphics.) are what make web documents different from the print documents you create. Links come in two varieties -- relative and absolute. But first, the anatomy of a URL (Universal Resource Locator, what you type into the Location or Address window of your browser.
  Example:
  http://www.cll.wayne.edu/isp/drbowen/internet/welcome.htm
  1. http:// - The method (of transfer). http is optional. The other method you will be using here is
    1. file:// (You can open a file directly in your browser to check it out, without going through the web server, and this is the method used in that case. If this appears in a link or an IMG tag, the web server will give users an error message, so be careful if you see it in these circumstances.)
  2. www.cll.wayne.edu - Domain Name of the web server. You can also use the numerical IP address, e.g. 141.217.142.149
  3. /isp/drbowen/internet/ - The path of folders to the requested file, from the "document root" folder of the server.
  4. welcome.htm - The name of the requested file. The browser displays files with extensions of htm, html, gif, jpeg, and jpg, and for others, asks if you want to download the file. If no file is listed, web servers are configured with a default file name, which is sent from the folder in the URL.
  5. What is shown above is an absolute URL.
  6. A relative URL drops at least some of the information above.
    1. If only the filename appears, it is assumed to be on the same server and in the same folder as the present document. I strongly recommend this for
    2. If folders are shown, preceded with a slash, the requested file is assumed to be on the current server, and the path is from the document root of the present server
    3. If folders are shown, without a preceding slash, the folders are assumed to be subfolders of the present folder on the present server
    4. The symbol ".." means one level up from the present folder (the parent folder of the present folder). This can be repeated to go up several levels. subfolders can be specified to down from that level, also.
  7. Relative URLs allow much greater flexibility in restructuring a web site, since files can simply be moved, and the URLs do not have to change. The files can even be moved to a different server without being changed.
    1. Keep a web site in one folder (or a few folders at most)
    2. Use relative URLs whenever possible.
    3. On the web, pictures are not included in the HTML file, but are separate image files with links in the HTML file, using the IMG tag. Links and IMG tags contain the URL of the referenced files. Wherever possible, these links should be relative, not absolute.
  8. To create a link in FrontPage98,
    1. Select (drag over) the link text; that is, the text that will turn blue and be underlined. You can use an image for a link by selecting (clicking on) it as well.
    2. Click on the Link button or choose the menu item Link / Hyperlink...
    3. Type in the destination URL for the link. Alternately you can open an Explorer window with the folder icon, or browse the web using the globe-and-magnifying-glass icon, and select the item (file or URL) you want to link to.
    4. Check that the URL is absolute or relative as desired, and click OK.
    5. You can link to a location within a file if you have defined a Bookmark. Select or type the bookmark name in the Optional / Bookmark text line. If there is no URL, the bookmark is assumed to be in the present file.
  9. To create a bookmark, select the bookmark text and use the menu item Edit / Bookmark. The default bookmark name is the selected bookmark text, but you can type in anything else you want. An image can also serve as a bookmark.
3. Form Fields -- text boxes, check boxes -- receive information from user
  1. <form ...> and </form> tags enclose the form fields. In order to be active
    1. <form ...> tag must have a defined "action" -- the name of the program to receive and process the data. This is known as the CGI (Common Gateway Interface") or Gateway program, e.g.
      1. Example 1: <form action="fls1.exe">
      2. Example 2: <form action="order.iht">
    2. Must have a SUBMIT button to send the information in to the web server. (SUBMIT button can have something else written on it, but internally it is "SUBMIT".)
    3. RESET button is dangerous!
    4. When the SUBMIT button is clicked, here is what happens, in order
      1. Browser sends all content in form fields between <form ...> and </form> containing the button, to the web server. regular HTML is not sent.
      2. The web server looks for the Gateway program, starts it, passes it the form information, and tells it where to leave its response
      3. The Gateway program
        
        Processes the information (what this means is up to the program developer). For example, save the information in a database
        
        Prepares a response HTML page for the user
        
        Ends
      4. When the web server notices that the Gateway program has ended, it sends the program's response page back to the user
    5. This is the start of your business process. What do you do afterwards?
  2. In MS FrontPage, use Insert / Form Field. Types of form fields
    1. The first form field also inserts a dotted box, a SUBMIT button and a RESET button.
      1. Top of dotted box is <form action=...>
      2. Bottom of dotted box is </form>
    2. Click on form field to select it. Selected form field can be deleted, drag to resize, etc.
    3. Each form field has a Type, a Name and a Value. The significance of these changes for the different types of fields. For Submit and Reset buttons
      1. Type = Submit / Reset (invisible to user)
      2. Value = text the user sees on the button
      3. Name = whatever (invisible to user, irrelevant to system)
    4. One-Line Text Box - user puts cursor inside box and types something in from keyboard
      1. Type = text
      2. Value = whatever the user types in (you can initialize it)
      3. Name = name of the value (the label you will use later to access the Value)
      4. E.g. name = FirstName, user types in "John" so value = John
      5. Name is invisible to user, so you must indicate what to type
    5. Scrolling text box (text area). Bounded by <textarea> and </textarea>, whatever is in between gets sent in
      1. Type = text area
      2. Value = whatever user types in (you can initialize it)
      3. Name = name of the value (the label you will use later to access the Value)
    6. Check box. Any number of these can be checked
      1. Type = checkbox
      2. Value = value that gets sent in if it is checked (you set this, MS FrontPage defaults to ON)
      3. Name = name of the value (the label you will use later to access the Value)
      4. Optional checked will have it show up checked.
    7. Radio button. Only one of these in a group can be checked.
      1. Type = radio
      2. Value = the value that gets sent in if it is checked (all radio buttons in a group should have different values)
      3. Name = name of the value. Also, all radio buttons in a group must have the same name. This defines the group.
      4. Optional checked will have it (one) show up checked.
    8. Drop-down menu. Down-pointing arrow on right, click on it to select from list
      1. Type = select
      2. Options = one <option...> </option> pair for each element in the list. What gets sent in can be different from what is seen on the screen
      3. Value = value for the option chosen by the user
      4. Name = name of the value
      5. Optionally, you can choose one option to be selected initially
      6. Consider putting form fields and labels in a table to align them neatly.
  3. Action (like a URL also - make it relative)
    1. Delete from "<--!webbot" to "-->" in the figure below
      
      AND change action to YourIhtFilename.iht
4. Use only the following menu choices. Other menu choices will not be implemented on the CLL web server, at least at this time.
  1. File: all, except Send... won't do very much for you in this class
  2. Edit: all except Add Task...
  3. View: all
  4. Go: all, except that Mail News and Address book won't do very much for you in this class
  5. Insert: use Line Break... (same as <Shift> + <Enter>), Horizontal Line, Symbol..., File..., Image..., Clipart..., Form Field and Hyperlink...
  6. Format: use Font..., Paragraph..., Bullets and Numbering..., Background... and Remove Formatting
  7. Tools: use Spelling..., Thesaurus..., Shared Borders... (I think), Show Image Editor and Options...
  8. Table: use all. Tables are the most effective means of horizontal positioning in HTML
  9. Frame: use all
  10. Window: use all
Team web sites
1. Names, User Names, Passwords, database filenames and DSN
2. Uploading files - placing files on the web server and downloading
  1. Web file upload
    1. On course web site, follow link to "Upload your personal or team web page"
    2. Fill out form
    3. Click on Browse button
    4. Navigate to file, get file name in File name: text box
      1. For picture files, change "Files of type:"
    5. Click Open
  2. Downloading - getting the web server to send you a file. Type in the URL of your web site and add the file name with extension. Your Browser may open the file, and will display it if it is an HTML file, but you can save it to a floppy or hard drive after that. This works with all files except CGI files such iht. This is because the web server does not simply send these files, but starts the system (here, iHTML) to process the file, and then returns the HTML result to the user.
  3. FTP - file transfer protocol. The best way, short of a drive mapping. See handout.
3. Decisions
  1. Structure of web site - what information is presented when
    1. Links for static HTML information
    2. Order form leads to .iht file which confirms, then back to ???
  2. What information do you need from your customer to complete the sale and ship / send the product?
  3. What form field is appropriate for each piece of information
    1. You have less chance of user errors if user selects from list or checks a checkbox or radio button, instead of typing information
    2. If typing cannot be avoided, it can help to show an example, if the format is important, or, for example, to include an Area Code field for a telephone number
  4. What name for each piece of information
  5. What information needs to be recorded in a database
    1. What field name in the database
  6. What kind of confirmation will you give the user
  7. What information needs to be fed back to the user
Database files. If you have not already done so, download your Team's database file to your computer, and save it on the C: drive or A: drive (floppy). Locate the file using Windows Explorer and double-click on it to start MS Access and open the database file. You could also open this file using File / Open, the Folder icon, and there is also a starting dialog when you open MS Access that you can use to open database files.
1. Information in a database is stored in tables, and within each table is stored in records and then fields. A record is all of the information about a particular case. In the University student database, there is a record describing you. For eCommerce, there is probably a table with a record for each sale (transaction). Within a record, each item of information is in a field. For example, for a sale you would have the item ordered, the quantity, the date of the order and so forth. Each of these pieces of information would be a separate field. Within a table, records are the rows, and the fields are the columns, and sometimes the language rows and columns are used instead of records and fields. At any rate, for Project 1, your Team database needs a table, with a field for the personal information and another field for the email address.
2. To create a table with two fields,
  1. With the database open, click on the New button and then choose Datasheet View.
  2. To change the name of the first (leftmost) field from Field1 to FirstName (or any other name), double-click on the letters Field1, type the new name and tap the <Enter> button. This name must match the name you gave the field in the iht file.
  3. Similarly change the name of the second field from Field2 to something that will remind you that it is an email address, which must also match the name you gave this information in the iht file.
  4. Click on the letters for Field3 then choose the menu item Edit / Delete Column to delete Field3. (Reply "Yes" when Access asks if you want to delete the field. Think of what a disaster it would be if you deleted the item ordered field on your company's database!) Delete all of the fields to the right of it also, one by one, until the table only has the two fields that you renamed.
  5. Close the window with your table in it, replying "Yes" when Access asks if you want to save the changes.
  6. After that, you will be asked to give your table a name. Give it the name that you used in the iht file and click "OK".
  7. Click "Yes" to create a primary key. This will act like a transaction number, or the invoice number on your eCommerce web site.
  8. Now you will see your renamed table in the database window. You may end up with several tables in this window at the end of the semester.
Versions of HTML
1. HTML 3.2 Vs HTML 4.0
2. 3.2 is fully implemented in Level 3 Browsers
3. 4.0 is not fully implemented in any Browser
4. Strategies for coping
  1. Big shops can write several different versions
  2. Techie sites will go with the most recent, users watch out for themselves
  3. Most marketing sites without big staffs will have to be conservative - stick with 3.2