Last updated: 9/29/03
Link back to course Welcome

Agenda for Class 4 (eCommerce only)
September 23, 2003

1. 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. Before you leave tonight, make sure I have a User Name and Password for your FTP access to your eCommerce web site.
2. eCommerce in the news: The New York Times business section on Monday 9/22 had an article on the increasing role played by comparison shopping sites, that present information from several online shopping sites together, for comparison.
3. Topics
   1. Protecting against crashes
   2. Web site navigation
   3. eCommerce system
   4. URLs - relative and absolute
   5. Image tags
   6. Link tags
   7. WYSIWYG HTML editors
      1. Netscape composer
      2. Others
   8. Uploading files using FTP
      1. From the lab
      2. From other places
      3. For personal web page
      4. For eCommerce web site
   9. HTML forms
      1. Form tags
      2. Form elements
         1. Name and value of submitted information
         2. Text line
         3. Text area
         4. Check box
         5. Radio button
         6. Drop-down list
         7. What to use when
         8. Submit button, reset button
   10. eCommerce web sites and Active Sever Pages
4. Protecting against crashes. Last class, many if not all of us experienced crashes. I have not experienced this level of problems in this classroom before. In terms of memory and drive capacity, the computers seem adequate for what we are asking of them. Generally, these problems occur in Windows when available memory gets low. Here are some ways of protecting yourself:
   1. First, that was the week of the computer attacks, and things have improved since then, so we can hope.
   2. Do not leave programs open unless you are using them. Just reducing a program to an icon still leaves it in memory. If you are copying and pasting between two programs, that is OK, but if crashes persist you may want to close the one you aren't using right then.
   3. Save any work that you are doing regularly.
   4. I read this next suggestion a couple of times in the past, but other people say it isn't true, but here goes anyway. Open up My Computer and go to the menu item Help > About Windows. Notice the % resources available. The theory is that this cleans up any memory that wasn't released properly when a program was done with it. Even if this doesn't work, if % resources available starts to fall below 50% depending on the size of the programs you are using, problems will occur.
5. 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
6. Overview of how you will create eCommerce web site

   What is needed	What we will use
   1. Web Server, or access to one.	IS Web Server (www2.is.wayne.edu)
   2. Ability to create static web pages (HTML)	Combination of Netscape Composer and Notepad
   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.	Active Server Pages with VBScript
   4. Email management -- ability to send email, perhaps automatically, and receive it.	For sending automatic email, ASP.
   5. Access Restriction. If you are selling content, you need some way to restrict access by people who haven't paid yet.	May not be needed. 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 IS 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?	We will not be doing this. There will be a list of options about how to do it.
   9. Ability to upload files to the web server	FTP Keep all of your eCommerece 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.

7. Relative Vs Absolute URLs - why you should use relative!
   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.
         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. You can test your site using a local copy (for example on your floppy diskette). Local links should work. The files can even be moved to a different server without being changed, and also if the server is renamed, the site will continue to work without change.
         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. Image tags. Images are not embedded in web pages the way they usually are in word processing. Instead there is a an image tag in the HTML file that causes the client to make a separate request to the server for each graphic file. Officially, the quotes shown below are required on the right-hand side of "=". Also, optional fields are shown inside square brackets [] - if you are using these optional fields, DO NOT PUT IN THE BRACKETS!
   1. <IMG SRC="URL" [ALT="alternate text if graphic not available"
      [HEIGHT="height in pixels"] [WIDTH="width in pixels"]/>
   2. Use relative URLs where possible.
   3. Including height and width allows the user's Browser to leave space for the graphic while it is being retrieved from the server, and continue to build the screen image.
   4. You can easily make a graphic become a link by embedding the image tag inside a link tag.
   5. Other attributes are available.
9. Link tags - use relative URLs where possible.
   1. Reminder <A HREF="URL">graphic tag or text</a>
10. WYSIWYG HTML Editors.
    1. Here, we have Netscape Composer. Start Netscape and go to the menu item Window > Composer.
       1. The Netscape icon may have disappeared from your desktop as a by-product of Macomb's cleaning up from the worm / virus attacks. To get it back, start Windows Explorer, click on the "+" beside "My Computer," click on the icon for C:, then right-click and choose "Search" or "Find." Type in "netscp.exe" without the quotes and click OK or tap <Enter>. Windows Explorer should come up with the program executable file. DO NOT BE FOOLED by the shortcut icon, if it exists, the one with the little arrow in the lower left corner. Right click on the regular icon and choose "Create Shortcut" Drag the shortcut onto the computer desktop. You can change the label for the icon by clicking on the label once to select it, then once again to upon up editing. Edit the label and tap <Enter>.
       2. Composer does well at WYSIWYG for the following editing tasks:
          1. Saving and opening existing files
          2. Setting the document title and keywords
          3. Formatting the screen (background color)
          4. Entering text and keyboard editing (space over using arrow keys, <Delete> delete to the right, <Backspace> to delete to the left).
          5. Formatting text (font, size, color, highlight color, bold, italicized, underlined)
          6. Inserting special characters - "entities" such as the forced space (&nbsp;)
          7. Formatting paragraphs (alignment)
          8. Bulleted and numbered lists
          9. Inserting tables, which are frequently used for positioning text and graphics, with zero-width borders, which makes them invisible on the browser screen
       3. Composer does not do WYSIWYG for frames or for publishing (uploading) to the course web site. Other HTML editors may do better at these.
       4. Composer does not do Active Server Pages (ASP), which uses special tags and commands. Microsoft Visual Interdev, I have been told, will do ASP.
    2. One of the great things about the W3C standards is that you can (usually) "mix and match" tools working on the same files. Sometimes the various tools will trample over each other, but usually they are well behaved.
       1. Microsoft FrontPage is what I use. It does better with tables, it does do frames, and it does do simple ASP.
11. Getting your files to the course web site:
    1. Web servers let you read or download files, not upload them, so in order to put web pages or files on the server, we need another means of access besides the Web. We will use FTP (File Transport Protocol) as built in to Microsoft Internet Explorer.
    2. There are two IS web servers:
       1. www.is.wayne.edu, generally for static pages only (we will start with this - inetf03 / inet123). THIS IS FOR PERSONAL WEB PAGES ONLY!
          1. REMINDER about file names for Personal Web Sites. Don't trash your fellow students' files. FTP does not warn if you are going to overwrite a file.
       2. www2.is.wayne.edu, generally for interactive pages (ASP), but here for your eCommerce web site. You will have individual User Names and Passwords for this site, and your own individual folder.
    3. Both web servers are also FTP servers, so we will be using Internet Explorer as an FTP Client. Unlike web servers, FTP Servers and Clients are both bi-directional. The FTP server requires you to log in, and shows a home directory when you do log in.
    4. From the Macomb site we will use MSIE 5 as an FTP Client:
       1. MSIE - opens on www.macomb.edu, sometimes opens on MS Update site
       2. Go to the URL ftp://www.is.wayne.edu (I think that you can bookmark this)
       3. You will get a failure message ("an error occurred...") - this is because you are logged in to your computer with a different user name and password. Click OK, then use the menu item File > Login as... and enter your user name and password. You should be accepted at this point.
       4. You will also want Windows Explorer up and running - you will be copying and pasting between them.
       5. Uploading (your computer to the server): In Windows Explorer, highlight the file, right click on it, then choose Copy. Then go to the right folder in FTP, right click and choose Paste.
       6. Downloading (the server to your computer): In FTP, highlight the desired file, right click on it then choose Copy to Folder... and choose the desired folder.
       7. Deleting a file: in MSIE, highlight and tap the <Delete> key.
       8. Renaming?
    5. I have tried later versions of MSIE and Netscape from other locations, and I have been unsuccessful at using them for FTP. Some, for example, will only connect to anonymous sites where you do not have an account. From other locations, I recommend the following, available free for download from support.wayne.edu (then follow the link "C&IT Download Center" near the Google logo):
       1. For Windows, WS_FTP LE (Light Edition)
       2. For Mac, Fetch

       URLs, User Names, Passwords and so forth will be the same as above. You will not need to run Windows Explorer alongside these. NOTE: For WS_FTP, be careful whether you click on the client-to-server (right-pointing) arrow or the server-to-client (left-pointing) arrow.

12. Forms, Chapter 16 in Castro. HTML forms receive information from user and transport it to the server. The information is processed back at the server, in this class by an Active Server Pages script. Netscape Composer will not do WYSIWYG forms but FrontPage will. Other HTML editors also do WYSIWYG forms. Here, you must edit the form tags "by hand" using Notepad (some prefer Wordpad).
    1. Forms are enclosed within <form ...> and </form> tags enclose the form fields. In order to be active
       1. <FORM METHOD="post" ACTION="program or script">
          Form field tags (see below)
          </FORM>
       2. An alternate method is "get" but this is strongly discouraged, except in a very few cases, because it is subject to malicious attack by sending back very long strings.
       3. <form ...> tag must have a defined "action" -- the name of the program or script processor to receive and process the form data. Strictly speaking, the program or script attribute is a URL, and can even reside on another server. Without folder information, the script must reside in the same folder as the HTML form.
       4. 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".)
       5. RESET button is dangerous for users!
       6. 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. Any regular HTML is not sent. The form tags themselves are not sent. See below for more details of how the information is sent.
          2. The web server looks for the program or script processor, starts it if necessary (script processors usually run all of the time), passes it the form information, and tells it where to leave its response for the user. The program or script processor runs on the server, not on the client. (There are scripting languages such as Javascript and some other scripting languages, and programs such as plug-ins or helpers that do run on the client).
          3. The program or script processor
             • Processes the information (what this means is up to the developer). For example, save the information in a database and/or send an automatic email
             • Prepares a response HTML page for the sever to send back to the client for display as usual
             • Ends
          4. When the web server notices that the program or script has ended, it sends the program's response page back to the client for display
       7. This is the start of your business process. What do you do afterwards? How do you process an order?
    2. Form fields - what goes in between the form tags to receive data.
       1. The form fields all have different tags. The tags are all "input", with the exceptions of the TEXTAREA and the drop-down menu, and have in addition a type (type="...")
       2. Each form field collects information. For some types of form fields, the user types in information using the keyboard (or Copy and Paste). For other types, the user selects a value by clicking. Regardless, the information is sent back to the server with a name and a value. The web developer (you) specifies the name, which the user isn't aware of. The user specifies the value. For example, a text line with the name "First" might be filled in by typing "David." The information would go back in the form of a name/value pair as "Name: David".
          1. It is a bad idea to use spaces in the Name. If you want to use multiple words in Names, separate the words as in FirstName or with an understroke as in first_name.
          2. The web developer (you) can initialize form field information to present values. However, the user can always override.
          3. Castro says (Pg 272) that the Name is still sent even if there is nothing for Value. This is not correct; empty form fields are simply not sent to the server. This may, however, be Browser dependent.
          4. Each form field must have a separate and unique name. The sole exception is the radio button;  a set of collected radio buttons all have the same name.
       3. Each form field also has a "tab order." Knowledgeable users often navigate between form fields using the <Tab> key for forward motion and <Shift><Tab> backwards.
       4. Don't forget that each form field requires a label to tell the user what goes in it. The label is just straight HTML.
       5. Text box - a one-line text box to type in.
          <input type="text" NAME="name" [VALUE="Value"] [SIZE="n"]
          [MAXLENGTH="m"] [TABINDEX="p"]/>
       6. Password box. This is the same as a Text box except the type is "password".
       7. Hidden field. This is a textbox with a preset value that the user does not know is there. The text box value can be set with a client-side Javascript, which is a method we will use later in the course, to send the total cost of an order back to the server.
          <INPUT TYPE="hidden" VALUE="whatever you want"/>
       8. Text area. This is like a multiline text box, except that it has an ending tag as well. It does not use an "input" tag, unlike the other form fields.
          <TEXTAREA NAME="name" ROWS="n" COLS="m" [TABINDEX="p"] [WRAP="virtual"]>
          Initial value goes here, not in tag. If no initial value, put end tag right next to start tag, on the same line.
          </TEXTAREA>
       9. Checkboxes. These are those little square checkboxes; alternate clicks click and unclick them.
          <INPUT TYPE="checkbox" NAME="name" VALUE="value"
          [TABINDEX="p"] [CHECKED]/>
          The value for a checkbox is what you want to have sent as the value if the box is checked. The "checked" attribute displays the box with a checkmark in at the start. If a checkbox is not checked, nothing gets sent back.
       10. Radio button, This is a collection of related round buttons. Only one may be selected, indicated by a solid round dot in the center. Click another, and the first one is unclicked. The set of connected radio buttons is defined by their all having the same Name. A form can have several sets of radio button, each set with a different name. One button in each set will normally be clicked. NOTE: If none of the buttons are clicked initially, users will sometimes not click any of them. If you want to make sure that one is selected, initialize the most common choice and provide an explanation.
           <INPUT TYPE="radio" NAME="name" VALUE="value"
           [TABINDEX="p"] [CHECKED]/>
       11. Drop-down menu. This is a list of options that drops down when the arrow on the right side is clicked. The user selects from the menu by scrolling and clicking.
           <SELECT NAME="name" [TABINDEX="p"] [SIZE="n"]>
             <OPTION [VALUE="value"] [SELECTED]>Menu item</OPTION>
             repeat for as many menu items as needed
           </SELECT>
       12. Reset button. Does not have to be present. It can have something else written on it.
           <INPUT TYPE="reset" [VALUE="what is on the button] [TABINDEX="p"]/>
       13. Submit button. Without this, nothing gets sent to the server. Generally at the bottom of the form.
           <INPUT TYPE="submit" [VALUE="what is on the button] [TABINDEX="p"]/>
    3. What to use when? Users will often mistype. If you ask them for the two-letter abbreviation for their state, you will get MI (correct), mi and Mi, and any one of those with a period at the end. For a computer-based system, this variation can be difficult to handle. In such cases, preset choices, such as checkboxes and drop-down menus, are invaluable.
    4. Linked forms. Many order sites have several web forms, each with a Submit button linking you to the next field. At least at first, you should avoid this, and have a single web form to collect all order information. The problem is that the web offers no intrinsic way to identify that the person who turned in the first and second forms are in fact the same person. There are several solutions for this problem, which will be al least mentioned later on in the course.
13. eCommerce web sites and Active Server Pages (ASP)
    1. What must / can your eCommerce web site do behind the scenes (at the server)?
       1. MUST - prepare a response page for the server to return to the clietn
       2. CAN
          1. Store information in a database, for example to place an order
          2. Retrieve information from a database, for example to verify an order
          3. Send an email
    2. Names, User Names, Passwords, database filenames and DSN
    3. Naming files for your eCommerce web site
       1. For your eCommerce web site, each of you will have an individual folder. This means that your site's home page should have the default file name for that server. In this case, your eCommerce web site should have a home page named welcome.htm
    4. Decisions
       1. Structure of web site - what information is presented when
          1. Links for static HTML information
          2. Order form leads to .asp file which confirms, with a link back to which file?
       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
          2. Once information is strung together, it is hard to break apart. If the user enters information broken apart, it is each to string together.
             1. Example: Enter first and last names separately. But many users will enter their middle initial if you don't provide a space for it!
             2. Example: Separate spaces for City, State and Zip.
       6. What kind of confirmation will you give the user
       7. What information needs to be fed back to the user
    5. Active Server Pages (ASP). Proprietary Microsoft scripting system.
       1. Active Server Pages provides a system for using the form information, reading from and writing to files, sending emails, and more besides. ASP is not a computer language, but can instead use computer languages for processing data. The default language for ASP is Microsoft VBScript, which is what we will be using in this class. For our purposes, there will be very little difference between ASP and VBScript.
       2. ASP is normally scattered in among the information and tags in an HTML document. The parts that are ASP are contained within "<%" and "%>" tags. What is outside the ASP tags is normal HTML, and is sent back to the user as the response page. The ASP parts can also insert information in or write to the response page.
       3. An ASP file has the extension "asp", as in DoGrades.asp
       4. Because no one is a perfect typist, it is an excellent practice to start an ASP document with the tag <%Option Explicit%> This means that all parameters must be explicitly declared in a Dim statement, so that if you mistype (a very common programming error) the script processor will catch it instead of assuming that you knew what you were doing.
       5. ASP is an "Object Oriented" system, which means that data is organized into objects, which are supposed to be things. You can do certain things to an Object (its Methods) and it holds certain pieces of information (its Members). Two important objects in ASP are the Request object, which has all of the form data, and the Response object, which is the response page that is sent to the user.
          1. Request("name") will have the text that the user typed into the HTML Form, in the field with NAME="name".
          2. Response.Write HTML will write the HTML to the Response Object, the web page that gets sent to the user. The "&" character strings parts together. Literal information should be inside quotation marks.
             Response.Write "<big>Hello, " & Request("name") & "!</big><br>"
             will insert the following HTML line in the Response, if the user typed David in the name box.
             <big>Hello, David!<br>
       6. Download Project1.txt from course web site to examine, save to floppy for homework
    6. Techniques
       1. Your Form and ASP pages will have some normal HTML in them. A good technique is to sketch out what the HTML parts will be, and compose these using Netscape Composer. Then switch to Notepad for the Form tags (Form page) and ASP tags (ASP page).
       2. Matching the names. the following names must match between your Form page and your ASP page

          Form Page	ASP Page
          Filename in Form tag (the name in the Action= attribute)	ASP file name
          Name of field in each form field tag	Name in quotes in Request("name")
          Later...
          Name of field in form field tag	Name of field in database

14. Homework
    1. eCommerce web site information
    2. Project 1. Produce an interactive web form that will collect one piece of information from the user, and incorporate this in the response web page together with the time and date. Create the web form with the name welcome.htm. Download the Project1.txt file from the course web site for the basic ASP script (you must at least change the extension to asp; the name must match the Action attribute in the Form tag in your HTML form). Also, the form field name(s) must match the Request fields in the ASP script.
    3. For your eCommerce web site, decide what information you will need to collect from the user. For each form field:
       1. What will be the name of the information?
       2. What information will the user enter?
       3. How will this form field be labeled for the user?
       4. What type will it be (text line, text area, etc.)?
    4. If you will have other interactive forms, such as an order tracking form, describe each of them.