Last updated: 10/3/99
Link back to course Welcome

Agenda for eCommerce Class #3
October 6, 1999

1. Lab time
2. Team Work
3. 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
4. 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

5. 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 or 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 othe 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. 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 select 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 chages 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, irrlevant 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 initiallize 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 initiallize 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
6. iHTML detail - the system that processes the form information
   1. .iht extension, named as the action, causes the iHTML preprocessor to process the file before the web server sends it to the user
   2. Notepad or Wordpad to insert iHTML tags
   3. Can still use FrontPage to prepare standard HTML parts, for example by Copy and Paste
      1. In order to get the HTML tags into Notepad or Wordpad, must copy from FrontPage in the HTML view
   4. An iHTML file (.iht extension) is a mixture of normal ASCII text, standard HTML tags, and special iHTML tags
      1. The file is "preprocessed" by iHTML before being sent to the user as the system response
      2. Text and HTML tags get passed through to user without change
      3. What happens to iHTML tags
         1. Some cause an action such as sending an email or saving information from the form to a database
         2. Some get replaced with information, such as information from a database or from the form
         3. None get passed through to the user (unless they are replaced)
   5. Details in separate document
7. Team web sites
   1. Names, User Names, Passwords, database filenames and DSN
   2. Uploading files - placing files on the web server
      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
   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 buttion, 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