Topics for eCommerce Class four

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: 10/11/00
Link back to course Welcome

Addition for eCommerce Class #4
October 11, 2000

The regular agenda is down below. Here are two items that we went over during that class that are not on the agenda.

On Thursday October 9 I will be presenting this eCommerce course to some WSU faculty from 1:30 to 3:00 PM, in the Adamany Undergraduate Library. Of course you are all invited (but not pressured) to come, but the faculty would like to hear from students about their comments and reactions. If you would like to do this, please let me know by phone or email.
Here are my recommendations for some of the software to use in this course.

Task	Software	Comments
Edit normal web pages	Microsoft Frontpage98	WYSIWYG is great, and very productive, cuts down on errors.
Edit normal web pages	Netscape Composer	Same comments as Frontpage, plus this one is free.
Edit HTML form	Microsoft Frontpage98	Does a great job on forms, with WYSIWYG placement and sizing of the form fields, and point-and-click editing of the form field properties (names and values). Netscape Composer does not do forms at all!
Edit iht file	Windows Notepad (click on Start, go to Programs, then Accessories and Notepad is there)	This does a good job. It has search and replace, and will keep the file name in the list of recent files on the File menu. Make sure that you save as a text function (no formatting) instead of a Word 6 document or a Rich Text Document (both of these have formatting marks in them). Type in the .iht with the file name, but watch out - it may add a .txt at the end of that, which you will have to remove with Windows Explorer.
Edit iht file	Windows Notepad (in the same place as Wordpad)	Does not (in my experience) change the file name, but does not remember the file names either. Like Wordpad, this has search and replace. In Windows95 this has a limit on file size (which you will not exceed in this class).

Agenda for eCommerce Class #4
October 11, 2000

Reminder of what you should be doing online on a regular basis -- these are part of the grade
1. Signin, from the lab, only on days for the class(es) you are taking
2. Weekly course report (if you are taking both classes, a single report will do)
3. Conference postings (one for eCommerce, two for Computers, the Internet, and Society, three if you are taking both)
4. Not required, but do it anyway - check your email on at least a weekly basis. Don't have email: use hotmail - it's easy and free. See me if you need help.
iHTML Project 1
1. The corrected example iHTML file is shown below. You can use this file for your project, with the following changes:
2. aaa - change to your team name (e.g. Team1)
3. 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"
4. 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)
5. ddd - change to the name of the field in this database that will hold the email address
6. 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 (:)
7. 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 (:)
8. 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 ">


<html>
<head>
<title>ggg</title>
</head>
<Body>
Your information, :eee , has been received and will be stored.
Thank you for using our web page.
The email address that you gave us is :fff
</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. "
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>
1. The Team 2 Project 1 is working. Even Team 1 might want to look at it, to get a real feel of what this system of three files does. If you are going to check this out, be sure to at least enter a valid email address (has an "@" in it). This does not mean it has to be an existing email address, just a possible address. But if you don't enter your own email address, you won't get the email. Later on, we will have to go over how the Team should protect itself in case missing data causes an error, either innocently (a mistake) or on purpose (a hack).
 1. I will soon create links from the course web site to your Team's welcome.htm file. Once that happens, you are connected to the rest of the World wide Web. Search sites will find those links, and people may very well come to your web site. some may even be trying to cause trouble.
2. Crashing the web server
 1. Certain errors in iHTML files cause the web server to crash. This is a point against iHTML, but it is also a fact of life in this course. Crashing the web server means that it is locked up, and will not work for you or for other users. This means that when you request a file from www.cll.wayne.edu, using a link, typing in a URL or using a bookmark, you will get an error message saying that the web server is not responding.
 2. Not all errors in your iHTML file will cause the web server to crash, but here are some that have:
 1. Misspelling the name of the DSN (note that the name of the database file does not appear in the iHTML file, only the names of the DSN, the table, and the fields in the table)
 2. Wrong name in the table (bbb above), such as using the name of the database file instead of the name of the table
 3. Misspelling the name of the table, including add the filename extension (.mdb) to the name of the table. Only a file has an extension.
 4. Correct name and spelling used, but that table is missing from the database. For example, until I changed it, the copy of the database file on the Team 2 web site was blank - no tables. Since we changed it during the last eCommerce class, either it was never actually uploaded, or one of the team members uploaded the original version, overwriting the changed version.
 3. If you do crash the web server, I understand that will happen. What you must do is call me and let me know, so that I can restart it.
3. Even if your error does not crash the web server, it will still delay your progress, perhaps for several days. It is worth extra effort to proofread your iHTML file before sending it. The iHTML files are read by a computer - that is, by the dumbest thing you can imagine. Virtually every letter will eventually have to be correct (the only exceptions are whitespace characters - spaces, tabs and new lines, which can be substituted freely for readability). This is no different than other computer programming. Don't just look for the first error you find and fix that one. Look for other errors also, each time.
4. Your Project 1 is the basis for all further work on your eCommerce web site that will be able to take orders. The only new iHTML you will need is the ability to add and find percentages, in order to find the total price if several orders are placed.
 1. It will be important to understand one basic fact of programming, that is not important to Project 1, but will be important later. This is that the iht file (or most programs) is carried out (executed) in the order written. So, for example, if a customer orders several items, and you want to add up the total and tell the customer this total, the the total price must be calculated before (earlier in the file) you tell what the total is. This was not important for Project 1, since the three sections were independent.
 2. We will be going over more iHTML in the future, for example how you could calculate the total.
eCommerce web sites
1. Every web server has a default file name. If the URL contains only a folder without a file name, then the default file is sent. This allows your users to type in a shorter URL. On this web server, the default file name is welcome.htm. The top-level file on your team web site should be named welcome.htm
2. eCommerce forms
  1. Many eCommerce web sites have several connected forms. Here, initially, collect all of the information you need on a single form (file). Tracking a user through several forms is something you can try as an advanced topic.
  2. Your team needs to decide what information it needs to collect to make and fulfill a sale, even if your team is not actually going to deliver the product or charge the credit card.
  3. (Discussion, list on board)
  4. What types of form elements can you create?
    1. Text line for single-line typing input
    2. Text area for multiple-line typing input
    3. Check box - square, can select zero or more
      1. Each has a set value in addition to its name. Clicking the box causes that name-value pair to be sent.
        
        Set the name and value using the Form Field Properties choice. To bring this up, first insert the element, then right-click on it.
    4. Radio button - round, select only one from each group
      1. A group is defined by a group of buttons with the same name. The buttons should all have different values.
    5. Drop-down list. This is very good for state names, for example. Users cannot mistype or make choices that you do not want to allow. Enter the choices in the list using the Properties dialog.
3. Your team needs to decide on the information that customers and potential customer will want to find. (Discussion, list on board).
4. Secure transmissions (shttp) or encryption, and digital certificates. Assuring your customers.
Managing your eCommerce files
1. Keep all of your eCommerce web files in a single folder. Actually, you can several copies of this folder -- one for each member, and perhaps one for the team. Each folder should have all of the files, however.
2. Make all links and insert all graphics only within this folder (relative URLs only)
3. All files get uploaded to the eCommerce web site using the file upload page. To get the files to the right location, you will need the team's User Name and Password. If you use your own, the files will not get to the right place -- they will go to the place for your personal web page
4. Test all graphics and links before you upload with a web Browser -- it's much faster and easier. For Netscape Navigator, use File / Open File in Browser. For Internet explorer, use File / Open. Note that you will not be able to test your iht page(s) this way - that requires the web server
5. Keep track of which files (and what versions) you have uploaded to the web server. If you lose track, I can find out for you - get in touch with me
6. To change or edit a file
 1. For the database, download it from the web server (see below)
 2. For all other files, either use your own copy or download from the web server. Downloading from the web server is the best choice. That way, you will always be building from the latest version. With several people working on the web site, be careful. You can end up destroying someone else's work.
 
 Best: Download, edit, upload, test, inform the CIO
 
 NOTE: If two of you are working on the web site at the same time, without knowing it and/or communicating, you can interfere with each other and do major damage, especially if you are both working on the same file! One solution, unless you are working together in one location, is to coordinate or schedule through the CIO.
7. To download a file
 1. For HTML and graphics files, open the file in your web browser, via the web server
 2. For iht files, use your own copy
 3. For database (mdb) files, put the full URL in your Browser's URL text line and tap<Enter> - the web browser will ask you where you want to save it
What FrontPage menu items will not work on the CLL web server
1. Insert / Timestamp, Table of Contents, Active Elements, FrontPage Component, Database, Advanced
2. Format / Animation, Theme, Page Transition
3. These are items from FrontPage Editor. FrontPage Explorer will not work at all with the CLL web server.
  Please Note; These features will appear to work on the computer you are working on. When you upload the files to the CLL web server, these features will not work.
4. The non-working features require that the "FrontPage Server Extensions" be installed on the web server. The CLL web server does not have the FrontPage Server Extensions installed because of a detail in how the CLL web sever is configured. If, outside of this class, you have access to the FrontPage Server Extensions on another web server, they are nice.
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 The parts of this URL are broken down and analyzed below.
1. http:// - The method (of transfer). http is optional. Other methods are
 1. ftp:// (File Transfer Protocol)
 2. telnet:// (Logging into a computer with a command line interface)
 3. gopher:// (Earlier test-based protocol without links inside documents)
 4. 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 all of your eCommerce team web files (HTML, iHTML and graphics).
 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. Note that you can create and delete folders using FTP.
 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 (e.g. if Team 1 uses ../team2/filename, they can use that team's file on the Team 1 web site! Or, you picture files will be in ../class/filename, but it would be better to copy the file into your Team folder because you have better control over it there.
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. Keep a web site in one folder (or a few folders at most), and use relative URLs whenever possible.
8. Links and IMG tags contain the URL of the referenced files. Wherever possible, these links should be relative, not absolute. Keep all of your files in the same folder, and it will be much easier to make links. If you are going to use subfolders, make sure to have the same folder structure on the computer where you create the files.
9. Making links using MS FrontPage:
 1. Highlight or drag over the text that you want to be linked (i.e. be blue, underlined and clickable).
 2. Choose the link icon with the globe and chain, or choose the menu item Insert / Hyperlink
 3. To make a relative link, type the file name into the URL text box, with extension, or choose the Windows Explorer icon to navigate to the file name and click on it, then click OK.
 4. To test your link, hold down the <Ctrl> button and click on the link. Note that this does not test it on the web server, only on your computer. There is no substitute for a "live test" after you have uploaded the files. If you don't have time to fix a problem, at least inform the CIO that the problem exists. The CIO should keep a list of known problems and who is working on them.
How to get graphics files from other web sites into your web pages
1. Warning: web content is copyrighted. You could be breaking the law if the graphic is not in the public domain, or you do not have permission to copy it. Web art galleries are a good source of graphics. Here is a URL that has links to many galleries for web art (web art = GIF and JPEG/JPG files)
 http://dir.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_and_Layout/Graphics/
2. This is a two-step process.
 1. Download the graphic file to the computer you are working on. How to do this:
 1. Using a web browser, open the web page containing the graphic so that the graphic is on the screen. Opening the graphic file in this way already brings the graphic to the computer you are working on. All that remains is to save it.
 2. To save the graphic file, right-click on it (I think it is <Apple>-click on the Mac). On the local menu that pops up, choose the item Save Image As... (Netscape) or Save Picture As... (Internet Explorer). This brings up the normal Save As... dialog. Select the drive and folder and save.
 3. You can change the name of the file, but do not change its extension. You can change the jpeg extension to jpg for the CLL web server
 2. Upload the graphic file to the web server
 1. For the CLL web server, use the file upload web page. There is a link to this on the course web page.
 2. A better technique is FTP (File Transfer Protocol).
 3. A third possible technique that you may have available on other web servers is "publish". With a web publishing facility, you can upload an entire web site with a single click on a "Publish" button.
 3. In all of these cases, you would assemble all of the files on the computer you are working on. It is important that the arrangement of folders and sub-folders, the folder names, the file names, and which folders given files are stored in, match exactly the way things will be on the web server. One the files are assembled on the computer you are working on, make and check all of the links, both for graphics ("img" tags) and HTML files. Then do the uploading by whichever method in step 2 above that you are using.
Graphics.
1. The "graphics guru" for the eCommerce web teams is NOT the only one supposed to be working on graphics. As will all things that teams need to do, this is a team effort! Rest assured that your grade will not depend upon cool (or uncool) graphics, just upon the eCommerce or interactive aspects - storing information to a database, creating a personalized web page with the information about the purchase, and sending a similar email to confirm.
2. I have trouble getting FrontPage Image Editor to work (to be frank, I haven't figured it out yet). I suggest MS Word. Here, we will go into making drawings with MS Word, that you can then put in your web page.
 1. Please note: all MS Word graphics are apparently 2" high by 3" wide (depending on monitor resolution). So, fill them up! I have succeeded once in reducing the size of an MS Word graphic, but I haven't been able to repeat it.
3. Reminder about the requirements for putting graphics on a web page
 1. On the web (i.e. in HTML) graphics are separate files, not included in the HTML file. Instead, a tag points to the graphic file. When the web Browser comes to a graphics tag, it makes a separte request for the file from the web server, and paints the picture at the location of the tag. Pictures can be centered, for example, and used a link items.
 1. Look at IMG tag in Castro book
 2. Each graphic is a separate file
 3. The file type must be gif or jpeg/jpg (jpg on CLL web server), and the extension must match the file type
 4. The graphic file must be on the web server (or at least on a web server)
 5. There must be a link on the web page to the graphic file (<img source="filename"> or
 <img source="URL"> for a graphics file on another web server.)
 1. Both MS Word and FrontPage will create these links for pictures that you insert.
 2. If you want to include a picture in a conference posting, see the online help, or ask me
 6. Inserting graphics into a web page, using MS FrontPage
 1. Put the cursor where you want the picture and click once to place the insertion point there.
 2. Choose the Insert / Image menu item
 3. Navigate to find the graphic file, highlight it, and click OK
4. MS Word can be used easily to create graphics for web pages that have
 1. Regular shapes (straight lines, circles or ovals, squares or rectangles, etc.)
 2. Solid colors (no gradients)
5. To use MS Word for creating graphics for web pages,
 1. Make the drawing in a regular Word "doc" file. For a doc file, graphics are part of the file, not a separate file. Do not delete this doc file -- you will need it if you ever want to edit the graphic again. On the other hand, do not load the doc file onto the web server, or try to copy it or the graphic into a conference posting. Nothing will get broken - it just won't work.
 2. When the graphic looks the way you want it to, save the document as HTML (File / Save as HTML or File / Save As setting the file format to HTML). You will not need the HTML file; usually you can delete it.
 3. The graphic will also be saved as a gif file with a number included, like "img0001.gif"). You will probably want to change the name to something that means something to you. If you doc file had several graphics, you will have several graphics files, with different numbers.
 4. Note that this is the opposite of my advice for creating HTML files using Word.
6. To create the graphic in MS Word
 1. Start with the menu item Insert / Object / Microsoft Word Picture. Any other method will result in the graphic being ignored when you Save As HTML
 1. This will result in what looks like a new document being opened, but note that the title bar reads "Picture in window name", where window name is the name of the document you are putting the picture in.
 2. Choose the menu item View / Toolbar / Drawing (make sure that Drawing is checked)
 3. Also choose the menu item Draw / Grid / Snap to Grid, unless you are an expert.
 4. Draw using the drawing tools:
 1. Straight lines, optionally with arrow heads
 2. Circle and oval
 3. Square and rectangle
 4. Text box
 5. Freehand (if you are good!)
 6. etc.
 7. The arrow selects an object by clicking on it or dragging over it
 8. For selected objects, you can change line, text or fill (interior) color, line style (solid, dashed, etc.), and line weight (light, heavy, etc.) using the toolbar
 5. Choose the menu item File / Update periodically to save the graphic in your main Word window
 6. When you are done with the graphic, choose the menu item File / Close & Return to window name
 7. Save the document as a Word doc file
 8. Save as HTML
Other graphics methods
1. Digital camera -- best for "real life" objects. Will also, in effect, scan in a photograph.
  1. Bowen will save the picture and convert it (usually to JPG)
2. Simple drawings can be picked off of the web. Actually, they all can, but picking off and using something that took a lot of effort might get you sued. And, everything on the web is copyrighted automatically.
  1. In Windows, right-click, pick "Save Image As..."
  2. Navigate to drive and folder to save.
  3. Do not change the file type or extension. You can change the name.
3. There is a picture gallery on the CLL web, with a link from the course home page. There are also free picture galleries on other web sites.
4. If there are people that want to do more with web graphics, we can have a special session. Let me know. The time and location depends on the number of people who are interested.
5. You can insert clip art from the MS collection included with FrontPage. If you have access to clip art collections, you may be able to use them also, depending on the file formats.
Working with MS Access database files
1. In eCommerce you will always be working with an existing database, so we in this course we will not go into creating a database
2. File / Open works the same as with MS Word
3. There is usually no File / Save or even File / Save As
 1. Databases are so important that changes to a database are usually saved as you make them
 2. Formatting or labeling changes may require saving
4. Databases have several types of objects
 1. Tables
 2. Queries
 3. Reports
5. For each type of object, MS access has Open / Design / New
6. Table
 1. Datasheet view (Open) - add fields, change field name, enter data into records
 2. Design View - add fields, name fields, choose field data type
 3. Data types - choosing data types and subtypes
 4. Adding table - Table / New
7. Datasheet view - this shows a table as an array (rows or records, and columns or fields) of cells, with the field names at the top, running from left to right
 1. To open a table in Datasheet view, click on the table you want, to select it, and then click on the "Open" button
 2. To insert a new field in Datasheet view, chose the menu item Insert / Column
 3. To change a field name in Datasheet view, double-click on the name (highlights the field name), type the new name, and tap <Enter>
8. Design view - this shows the list of field names only, running from top to bottom
 1. To open a table in Design view, click on the table you want, to select it, and then click on the "Design" button
 2. To insert a new field in Design view, click in the next empty space and type a name for the field. To accept this, leave the space by clicking or arrow-keying to another space, or by tapping <Enter>
 3. To change a field name in Datasheet view, click in the space and edit the name, using the normal editing keys
 4. To change the data type for a field, click near the right edge of the "Data Type column for that field. A drop-down arrow pops up - click on it. Select the data type from the drop-down list. The following data types are available:
 1. Text
 2. Number
 3. Date/Time
 4. Currency
 5. Auto Number
 6. Yes/No
 5. Fields also have properties. For example, is the field required, or can it be zero length. The ability to be zero length is important, if your users can leave a field blank. That will create an error that does not lock up the web server, but can be very difficult to debug.
Setting up team web sites
1. Pages and links
2. Creating
3. Uploading
4. Testing