CSCI A348/548
Lecture Notes Nineteen
Spring 2001 (Second semester 2000-2001)
|
|
CSCI A348/548
|
For this reason the lab notes of today will be relying on a similar set of notes used by A201 this week. That's why the lab notes are directly linked there.
::::::::::::::
blank.html
::::::::::::::
<html><head><title>Welcome!</title></head>
<body bgcolor=white>
Welcome to the Shopping Cart application! <p>
Please browse through our on-line catalog and choose those
items of interest to you by using the control panel on the left. <p>
We hope you have a useful and profitable shopping experience.
</body>
</html>
::::::::::::::
control_panel.html
::::::::::::::
<html><head><title>Shopping Cart Controls </title>
<script>
function sortKeys (object) {
this.length = 0;
for (var a in object) {
var pos = 1;
while (pos <= this.length) {
if (this[pos] > a)
break;
pos++;
}
for (var i = this.length; i >= pos; i--)
this[i+1] = this[i];
this[pos] = a;
this.length++;
}
return this;
}
function formatAsPrice (price) {
return price;
}
function cart() {
this.cart = new array();
this.entries = new array();
this.add = add;
this.remove = remove;
this.list = list;
this.show = show;
this.order = order;
this.make_orderForm = make_orderForm;
return this;
}
theCart = new cart();
function array() { }
function add(item) {
if (item == null) return;
if (this.cart[item.catNo]) this.cart[item.catNo]++;
else this.cart[item.catNo] = 1;
this.entries [item.catNo] = item;
}
function remove(item) {
if (item == null) return;
if (this.cart[item.catNo] >= 1) this.cart[item.catNo]--;
}
function list() {
var totalPrice = 0.0;
var result = "<table border>" +
"<th>Cat #<th>Description<th>Quantity<th>Unit Price";
var keys = new sortKeys(this.cart);
for (i = 1; i <= keys.length; i++) {
var a = keys[i];
var catNo = this.entries[a].catNo;
var description = this.entries[a].description;
// if (this.cart[a] > 0) {
result += "<tr><td>" + catNo + "<td>" + description +
"<td>" + this.cart[a] + "<td>$" + this.entries[a].price;
// }
totalPrice += this.entries[a].price * this.cart[a];
}
return result + "<tr><td><td><th>Total<td>$" +
formatAsPrice(totalPrice) + "</table>";
}
function show(aDoc) {
aDoc.clear();
aDoc.open("text/html");
aDoc.writeln("<html><head><title>Current Shopping Cart");
aDoc.writeln("</title></head><body bgcolor=white>");
aDoc.writeln(this.list());
aDoc.writeln("</body></html>");
aDoc.close();
}
function order() {
var orderWin = window.open("");
var a = orderWin.document;
a.clear();
a.open("text/html");
a.writeln("<html><head><title>Order Form</title>" +
"</head><body bgcolor=white><h1>Order Form</h1>");
a.writeln(this.make_orderForm());
a.writeln("</body></html>");
a.close();
}
function make_orderForm() {
var result = "Please confirm this order list. Change the quantity " +
"ordered to 0 to cancel an item. Press \"Order\" to submit the order." +
'<form action="/cgi-bin/shcart" method=POST>' + "<table BORDER>" +
"<th>Cat #<th>Description<th>Quantity";
var keys = new sortKeys(this.cart);
for (i = 1; i <= keys.length; i++) {
var a = keys[i];
var catNo = this.entries[a].catNo;
var quantity = '<input type="text" name="item:' +
catNo + '" value="' + this.cart[a] + '" size=2>';
result += "<tr><td>" + catNo + "<td>" +
this.entries[a].description + "<td>" + quantity + "\n";
}
result += "</table><p>" +
'<table><tr><th>Your name<td><input type="text" name="name">' +
'<tr><th>Customer Number<td><input type="text" name="custNo">' +
'<tr><th>PO Number<td><input type="text" name="PO"></table><p>' +
'<strong>Shipping address:</string><br><textarea name="address" ' +
'rows = 4 cols=40></textarea><p><input type="submit" value="' +
'Place Order">';
return result;
}
function getCurrentItem() {
if (parent.catalog.document.forms.length == 0)
return null;
var itemDesc = parent.catalog.document.forms[0].description.value;
if (itemDesc == null)
return null;
return new catEntry(itemDesc);
}
function catEntry(string) {
var firstColon = string.indexOf(":");
var lastColon = string.lastIndexOf(":");
this.catNo = string.substring(0, firstColon);
this.description = string.substring(firstColon + 1, lastColon);
this.price = string.substring(lastColon + 1, string.length);
return this;
}
</script>
</head>
<body bgcolor=white>
<form name="form1">
<center>
<input type="button" name="add" value="Add Item"
onClick="theCart.add(getCurrentItem());
theCart.show(parent.cart.document)"
>
<input type="button" name="delete" value="Remove Item"
onClick="theCart.remove(getCurrentItem());
theCart.show(parent.cart.document)"
>
<input type="button" name="order" value="Place Order"
onClick="theCart.order()"
>
</center>
</form>
</body>
</html>
::::::::::::::
frameset.html
::::::::::::::
<html>
<head><title>Shopping Cart</title></head>
<frameset rows="60%,*">
<frame src="item1.html" name="catalog">
<frameset cols="30%,*">
<frame src="control_panel.html" name="control_panel">
<frame src="blank.html" name="cart">
</frameset>
</frameset>
</html>
::::::::::::::
item1.html
::::::::::::::
<html><head><title>Item 1</title></head><body bgcolor=white>
<img src=
"http://www.cs.indiana.edu/classes/a348-dger/fall2000/resources/apache.gif"
align=left>
This is <em>Professional Apache</em> <p>
The price for this item is: $32.56<p>
<img src="http://www.best.indiana.edu/left.gif">
<a href="item2.html">Next</a> item. <p>
<form>
<input type=hidden name=description value="PA34:Professional
Apache:32.56">
</form>
</html>
::::::::::::::
item2.html
::::::::::::::
<html><head><title>Item 1</title></head><body bgcolor=white>
<img src=
"http://www.cs.indiana.edu/classes/a348-dger/fall2000/resources/cookbook.jpg"
align=left>
This is <em>The Perl Cookbook</em> <p>
The price for this item is: $29.12<p>
<img src="http://www.best.indiana.edu/left.gif">
<a href="item3.html">Next</a> item. <p>
<form>
<input type=hidden name=description value="PC01:Perl Cookbook:29.12">
</form>
</html>
::::::::::::::
item3.html
::::::::::::::
<html><head><title>Item 1</title></head><body bgcolor=white>
<img src=
"http://www.cs.indiana.edu/classes/a348-dger/fall2000/resources/htsamaws.gif"
align=left>
This is <em>How to Set up and Maintain Web Site</em> <p>
The price for this item is: $42.70<p>
<img src="http://www.best.indiana.edu/left.gif">
<a href="item4.html">Next</a> item. <p>
<form>
<input type=hidden name=description value="LS97:Setup Maintain
Website:42.70">
</form>
</html>
::::::::::::::
item4.html
::::::::::::::
<html><head><title>Item 1</title></head><body bgcolor=white>
<img src=
"http://www.cs.indiana.edu/classes/a348-dger/fall2000/resources/nutshell.jpg"
align=left>
This is <em>Webmaster in a Nutshell</em> <p>
The price for this item is: $10.23<p>
<img src="http://www.best.indiana.edu/left.gif">
<a href="item5.html">Next</a> item. <p>
<form>
<input type=hidden name=description value="WM74:Webmaster Nutshell:10.23">
</form>
</html>
::::::::::::::
item5.html
::::::::::::::
<html><head><title>Item 1</title></head><body bgcolor=white>
<img src=
"http://www.cs.indiana.edu/classes/a348-dger/fall2000/resources/llama.jpg"
align=left>
This is <em>Learning Perl</em> <p>
The price for this item is: $18.95<p>
<img src="http://www.best.indiana.edu/left.gif">
<a href="item1.html">Next</a> item. <p>
<form>
<input type=hidden name=description value="LP95:Learning Perl:18.95">
</form>
A348/A548