Topics for fourth eCommerce Class

Last updated: 10/6/00
Link back to course Welcome

Agenda for Class 6 (eCommerce only)
October 7, 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.
Your web sites for this course:
1. Personal web site on www.is.wayne.edu. Your top-level file should have name of your first initial and full last name, dot htm. Group FTP access, User Name = inetf03, password = !inet123
2. Your Project 1 on www2.is.wayne.edu in your own folder. This has only two files, an HTML form (Project1.htm) and an asp page (Project1.asp) to process the form data.
3. Your eCommerce web site in the same folder as Project1. Your top-level file should be named welcome.htm
Computer setup on www2
1. Each of you has a private folder, not shared with anyone else. There are currently no files in that folder.
2. Each of you has a sub-folder within this private folder named "Dum" for "dummy." There is an empty Access database within that folder. This database is where you will keep the information your users submit on your form. The database and the form will have to be coordinated; we will go into what this means later. But for now,
  1. The field names on the form and database should match
  2. The data type for each field in the database must be appropriate for the data that the user will enter into the corresponding field on the form
  3. Actually, #1 just makes life a lot easier, but #2 is iron-clad.
  4. Your asp page will access your database by means of a DSN. The DSN has the information that the script needs to open the database, put data in it, and get data from it.
3. The web server has been forbidden from getting files from your "Dum" folder. This is an additional level of protection for your customers, so that the information they submit will not end up broadcast over the Internet. Here are the levels of protection:
  1. Users will not know the root folder for the web server (neither will you), so they will not be sure where your web site is on the server.
  2. Users will not know the name of your database file, nor its location, unless they can somehow use your FTP access and your DSN.
  3. The web server will normally send back any file that a user asks for, including your database file. If a user should happen to find your database name and that it is in your Dum folder, in this case the web server would not return it, since the web server has been forbidden from entering your Dum folder.
  You will have FTP access to both your eCommerce web site folder and your Dum sub-folder.
4. 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 eCommerce web site should be named welcome.htm
Web 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. Review of form field types
  1. Text line for single-line typing input
  2. Password - typing appears as *
  3. Hidden - user does not see it (unless they View Source)
  4. Text area for multiple-line typing input
  5. 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.
  6. 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.
  7. Submit button - what the user clicks on to send in the order
  8. Reset button - remove al input from the form, not recommended
3. New: drop-down menu or option list. 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. Users cannot mistype or make choices that you do not want to allow, or type letters where you want numbers.
  <SELECT NAME="name" [TABINDEX="p"] [SIZE="n"]>
  <OPTION [VALUE="value"] [SELECTED]>Menu item</OPTION>
  repeat for as many menu items as needed
  </SELECT>
  If there is no VALUE attribute in an OPTION tag, the VALUE (what is returned to the server) is what appears between the OPTION and /OPTION tags.
Planning your eCommerce web site
1. Planning what information your customers will want or need, how that will be divided up into web pages, and how the pages will be linked together. A diagram showing each file, roughly what it's content is, what it's name is, and the links between files, is a good basis for building the web site. Some methods of uploading files do not work right if there are spaces in a file name. If you want to use a compound name, see suggestions for compound form field names below.
2. Planning what information you will need from your customers regarding an order, laying out the form, naming each field and what type it will be.
  1. Because it will cause trouble with your database, field names on the form should have no blanks (spaces) in them. If a field has a compound name, here are alternatives to blanks:
    1. Use abbreviations, such as FN for First Name (can get confusing, though)
    2. Use only one word, for example First for First Name
    3. Capitalize initial words and butt them together, such as FirstName for First Name
    4. Link words with an understroke, which sort of hides under the words, such as first_name for First Name
  2. It is much easier to divide information up into small chunks, such as FirstName, Initial and LastName, and put them together afterwards, than it is to divide information into small chunks once it has been entered in large chunks, such as Name. Another example is City, State Zip for address instead of Address in one big chunk.
3. Planning what pictures you want, and starting to collect them
Using Netscape to lay out a form using a table
1. Lay out the table, enter the data labels in WYSIWYG mode
2. Insert HTML to type in the form tag
ASP file for Project 1 (handout)
Using Active Server Pages, Installment 1 (handout)
Managing your eCommerce files
1. Keep all of your eCommerce web files in a single folder that may have sub-folders. Actually, you will have at least two copies of this folder -- one on the server and one on a floppy drive (your "local copy"). If you keep copies on one or more hard drives, life is manageable but more complicated.
2. Make all links and insert all graphics only within your local copy and use relative URLs only
3. Test all graphics and links on your local copy with a web Browser -- it's much faster and easier than testing on the server. 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 asp page(s) this way - that requires the web server.
4. 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
5. To change or edit a file
  1. To edit the database, always download it from the web server first, because it may have changed since the last time you downloaded it
  2. For other files (HTML, graphics, asp), if you keep only a single local copy, edit the local copy, text it, then upload and test again
  3. For other files (HTML, graphics, asp), if you have multiple local copies, it is safest to download a file from the web server before working on it. That way, you will always be building from the latest version. (In a situation with several people working on the web site, be especially careful. You can end up destroying someone else's work.)
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 IS web servers
  2. Link the graphic to the right HTML file using and <img> tag.
  3. Upload the HTML and graphic files to the web server using FTP
Web graphics from MS Word.
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.
2. 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
3. MS Word can be used 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)
4. 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.
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. 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.
3. You can insert clip art from the MS collection or other collections using Word for FrontPage to convert them to gif or jpg.
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. Inserting new fields, renaming fields, formatting or labeling changes do 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. I recommend setting Required to No and Allow Zero Length to Yes.
Review of eCommerce course tasks - what you should be working on, what counts in your grade
1. Weekly reports, every week
2. Readings
3. Conference postings
4. Personal web page on www server
5. Project 1 asp project
6. Written description of eCommerce project
7. Layout of eCommerce web site, hand drawn OK
8. Making eCommerce web pages and uploading them, testing links
9. Designing eCommerce order form, hand drawn OK
10. Locating graphics that you will want to use