Dept. of ISDS Western Illinois University

IS 524, Assign#5 Alternate Amaravadi

ELECTRONIC STORE FRONT

This assignment will use Front page and Notepad to create an electronic store front, such as might be used on a commercial site. The main features that will be highlighted in this assignment include:

Order form
Use of thumbnail images
Confirmation buttons
Java script
Tables.
Links to other pages.

The primary purpose of this assignment is to give you a sense of what is involved in an e-commerce set up. You will simply modify the given storefront and create one that has your content/design.

THE OVERALL CONCEPT

A corporate web site typically contains information about the company and its products. The main feature is that for the site to sell products, there must be forms for ordering and taking payments. Our web site will simulate the order taking part. In commercial sites, the product and pricing information is drawn from queries embedded in scripts, which are processed by the E-commerce server. Here we will simply use prices embedded in the Javascript. Our “storefront” consists of three files, yourstore.htm (your main file, see image below) which allows users to select items from a list of items, confirm.htm which confirms the selected items and the thanks.htm form which acknowledges the order.

Yourstore.htm will be edited (using publisher or Notepad) from varyti.htm given to you. Given that information systems are customized from off-the-shelf components, this is considered as a software development method. In the main page, (Yourstore.htm) you will look at the HTML code corresponding to the table in a html editor and modify it according to your requirements. You will need to add your own items, itemcodes and colors if necessary. You will embed values here, which will be passed on to the script in confirm.htm. An example of this is shown below. Here, the checkbox is called V-091-0001, it is associated with a string value having the description and price, which is parsed later in confirm.htm.

<input type=checkbox name="V-091-0001" value="v0910001- South_Indian_Chicken*15.00$"

You will also copy confirm.htm and customize it if needed. A large part of confirm.htm consists of the script which will build up the table of items which have been marked as ordered in the main page. You will have to make minor modifications to the script, which may potentially involve initiative and intelligent guesses on your part, regarding what the script is doing. Scripts are very very fragile, so you will need to be very careful.

Once the web pages are ready, you will need to transport them to the host (ecom) using a communications software (Winscp) available on the web. Winscp software shows the local and remote directories so you know what is in there (when you are logged in). Sending a file is intuitive, you select the local file and and drag and drop items. However, you need to give permission for others to view your web site, for which you need to go the ecom web site at WIU.edu and set permissions. The web server expects that the index page will be under the directory, “HTTP.” This directory is assumed and is not specified in pathnames.

GETTING STARTED

Please note that it is necessary to have some understanding of directory structures (what does a:\varyti\varyti.htm mean?) to do this assignment – see appendix.
Study the example web site of Varyti inc. (Varyti.htm) given to you.
Think of a company that you would like to have, we will call this yourstore – it must have some tangible items to sell (books, CDs, Toys, furniture, guitars, sports equipment etc.). The file name (e.g. “befit.htm”) must be less than or equal to seven characters.
You will be using “Notepad” (found under “accessories” in MS Windows) to edit the script, and Frontpage to edit the visual elements of your site.
Using the Windows Explorer, create a directory in your jumpdrive that will contain your storefront e.g. f:\yourstore where yourstore is the name of your main html file. You need to make sure you save all files to this directory so that they are easily accessed/referenced.
Save each of the three website files to this directory as follows. Go to the web site and for each file, save the images using the right mouse button, noting carefully their file types (i.e. .jpg or .gif). Then, in a similar fashion, save the .htm files, by opening each, using the mouse right button and selecting “save source.” You should have the three “.htm” files (i.e. yourstore.htm, confirm.htm and thanks.htm) and the five image files. Now you should have a fully functional web site on your disk. Please note that if you are using Internet Explorer, you will need to use the “file,” “save as” options when saving .htm files.
Check that it is fully functional by opening yourstore.htm from your directory (in the a: drive) using Frontpage (preview button) or Internet Explorer (Open file). If you open the correct file, and it is not functional, you may have the wrong names for the files (see previous step). Note also the 7 character limit for file names.
You need to find four to five pictures of the items to sell. Browse the web and when you find a suitable picture, using the right mouse button, select “save as,” (at this stage note the image extension that displays i.e. is it a .jpg or .gif file?) and save it into your drive (f:\yourstore). Keep all the pictures (e.g. prod1.jpg, prod2.jpg etc.) in the same directory in which you will create the web pages. Please make sure all file names are <= 7 characters.
You also need a picture for the “confirmation” page and “thanks” pages. Find and save them in a similar fashion.
Open up yourstore.htm and confirm.htm in Frontpage. From this point on, make changes one at a time (as discussed in class, see next section) and check that your “site” is still functioning. Save the changes as you move forward, taking care to close and re-open the file at each save operation. This will force the changes to be stored to disk (i.e. your jump drive).

WORKING ON THE MAIN PAGE

While in Frontpage, go into the yourstore.htm file and change the title (“VARYTI”) to the name of your company “YOURSTORE.”
Next, change the images one at a time. Rightclick on the image and go into “picture properties,” and change the “source” of each image to be that of the product images that you have already captured (viz. prod1.jpg, prod2.jpg etc.).
Modify the text of the images as well (item descriptions, prices and codes).
For the last column, you will need to modify the “value” associated with “input types.” Go into the “HTML” tab (of Frontpage, yourstore.htm) and modify the names and values for each of the store’s items. You will have to put in a new number instead of “V-091-0001” (see below) and modify the value, and price too, being careful not to delete the “delimiters” (“-“, “$”, “*”). May need to do this in more than one location.

<input type=checkbox name="V-091-0001" value="v0910001-South_Indian_Chicken*15.00$"

Modify your contact information and email too, by going into HTML view and seeing where the modification needs to be done. Be careful not to disturb the formatting.
Save this file.

/***********************************************************************************/

CONFIRM.HTM SCRIPT

<html>

<head>

function decodeString() {

valNum = new Array();

valData = new Array();

var string, length, dataCount, orderData, grandTotal;

string = "" + unescape(location.search);

string = string.substring(1,string.length);

length = location.search.length;

orderData = "";

dataCount = 1;

for (var c = 0; c < string.length; c++)

if (string.charAt(c).indexOf("&") != -1) dataCount++;

orderData = "<table border=1 align = left width=400>";

orderData += "<tr<td bgcolor= LIME > <b>Item</b</td>"

orderData += "<td bgcolor = LIME<b>Description</b</td>"

orderData += "<td bgcolor = LIME<b>Cost</b</td</tr>";

grandTotal = 0;

for (var i = 0; i < dataCount; i++)

{

valNum[i] = string.substring(0,string.indexOf("="));

string = string.substring(string.indexOf("=")+1,string.length);

if (i == dataCount-1) valData[i] = string;

else valData[i] = string.substring(0,string.indexOf("&"));

ampd = valData[i].indexOf("&");

pipe = valData[i].indexOf("-");

star = valData[i].indexOf("*");

line = valData[i].indexOf("$");

itemnum = string.substring(0,pipe);

itemdsc = string.substring(pipe+1,star);

itemcst = string.substring(star+1,line);

string = string.substring(ampd+1,string.length);

orderData += "<tr>";

orderData += "<input type=hidden name=item" + (i+1) + "num value='" + itemnum + "'>";

orderData += "<input type=hidden name=item" + (i+1) + "dsc value='" + itemdsc + "'>";

orderData += "<input type=hidden name=item" + (i+1) + "cst value='$" + itemcst + "'>";

orderData += "<td>" + itemnum + "</td>";

orderData += "<td>" + itemdsc + "</td>";

orderData += "<td>" + itemcst + "</td>";

orderData += "</tr>";

grandTotal += parseFloat(itemcst);

}

orderData += "<tr>";

orderData += "<td colspan=2 align=center>Total</td<td>" + grandTotal + "</td>";

orderData += "</tr>";

orderData += "<tr>";

orderData += "<td colspan=3 align=center<input type= button value='Confirm Order!' onClick = openThanks()> or <a href='javascript:history.go(-1)'>Go Back</a</td>";

orderData += "</tr>";

orderData += "<input type=hidden name=grandtotal value='$" + grandTotal + ".00'>";

orderData += "</table>";

document.write(orderData);

}

function openThanks() {

window.open("thanks.htm");

}

</script>

</HEAD>

<BODY>

<p<font size="5" <font color="#FF0000"<b>ORDER CONFIRMATION</b</font</font</p>

<p<img border="0" src="v_pak.gif" align="left" width="181" height="118"</p>

<p </p>

decodeString();

</script>

</center>

</body>

</html>

/***********************************************************************************/

WORKING ON THE CONFIRMATION PAGE

As with the main page, using Frontpage, change the image on the “confirm.htm” page and save the file. If you see a table, carefully select it with the mouse and delete only the table. Be careful that you might accidentally delete the script.
Save and close this file and open it in Notepad (the script editing can be done in Frontpage, but Notepad is more convenient).
Study the script here. The script begins with <SCRIPT LANGUAGE="JavaScript"> and ends with </SCRIPT>. There are two functions here, decodestring() and openThanks (). The first takes the itemstrings from yourstore.htm and creates and populates the table definitions, one row at a time. It also calls the openThanks () function when the confirmation button is pressed (see confirm.htm page above).
Fortunately, you do not have to modify the script except for the background colors (locate “bgcolor” in the script and note the color codes). Go to for other color codes.

THANKS PAGE

For this page, you simply need to modify the text and image. This is left as a challenge for you.

WRAPUP/EXPORT YOUR FILES

Check to make sure your storefront is working (go into “Preview”). Note that if you get two confirmation tables, you need to open up “confirm.htm” in the HTML editor and delete the table that you see. Be careful not to delete anything else.
The next step is to upload your .htm and image files. Winscp is a communications program that transfers files from a client computer (your machine) to a host (ECOM).

Use Google to search for “WINSCP download.”

You need to download the “Portable executable.” You need to save it and then run it by double clicking on your saved file.

You are presented with the WINSCP login panel (see below). You need to enter ftp.wiu.edu for host name and your wiu username and password. It may ask you again for user name and password.

Now you should be in the main menu (see screen below). Find your directory by clicking on the appropriate directory on the left side of the panel. You can find your thumb drive by opening up the menu in the top left hand side (where it says “My Documents”).

In the right side panel of Winscp you should have a “http” directory – you will drag and drop your image files and slide.htm files into this subdirectory. If you don’t have a subdirectory, you need to create one. Position the cursor on the folder on the right side panel, go into “Files” and “New” and create a directory. Call it “http.” Now send the files over by dragging and dropping from your hard drive or thumbdrive into the “http” directory.

Go into the http directory by clicking on it to see if you transferred the files correctly over. Then go back up so you can see the “http” directory. Select “http” and right click and open properties. You should see something like the screen given below. You need to give permissions for others to view your web site. This is also left as a challenge for you to figure out.

View your “web site” by typing your account address (e.g. “mumi3” without the quotes) as in account/yourstore.htm. Print and submit the first page. If you cannot view it, you need to go back and experiment with the permissions.

For an additional challenge, see if you can add credit card processing to your site. (Hint: you can search on Java Script sites such as “The JavaScript Source!!”, [

APPENDIX

A NOTE ON PATHNAMES: Note the link addresses and how they change with directory structure.

WEBSITE STRUCTURE DIRECTORY STRUCTURE

main.htm

http

main.htm (file)

<prod> (subdirectory )

prod.htm (file) <cont> (subdirectory)

cont.htm (file)

prod.htm cont.htm

main.htm http

main.htm (file)

prod.htm (file)

cont.htm (file)

cont.htm prod.htm

DOWNLOAD AND INSTALL WINSCP – DOWNLOAD THE EXECUTABLE PKG

THE WINSCP LOGIN PANEL (Note the host name)

WINSCP MAIN MENU

CREATING A HTTP DIRECTORY

Dept. of ISDS Western Illinois University