JavaScript za E-commerce
JavaScript za E-commerce
Uvod
Lepota JavaScript jezika je da se izvršava na PC-u, pre nego na serveru, pružajući korisniku instant odgovor na akciju.
Ako je dobar balans između izvršenja servera sa strane i klijentovog izvršenja sa strane udaren, korisnik može dobiti bogatije iskustvo, a server može biti pošteđen nekih od svojih opterećenja:
Ovaj dokument ima dva cilja:
Da pokaže da se obim JavaScript jezika proteže daleko izvan pravljenja već dosadnih veb stranica još iritantnijim.
Da obezbedi okvir koji može veb programer da koristi da izgradi online prodavnicu.
Ovaj dokument pretpostavlja da ste upoznati sa JavaScript jezikom, i slobodni sa definisanjem JavaScript objekata, programski manipulišući HTML formama, generišući dokumente dinamično sa document.write (), a odnosi se na objekte i promenljive u različitim okvirima. Neke dobre JavaScript reference možete naći na Mozilla programerskom sajtu http://developer.mozilla.org/en/JavaScript.
Pored toga, trebalo bi da bude slobodni u obavljanju manjih modifikacija na Perl skripti, i instaliranju na veb serverima, kako se o Perl skripti raspravlja u poglavlju pet. Dobro mesto da tražite Perl reference je http://www.perl.com/.
Dokument kao ovaj je više ili manje beskoristan osim ako nije izgrađen oko praktične aplikacije. U tom cilju, mi ćemo koristiti online muzičku prodavnicu kao primer.
Struktura prodavnice
FOMS (naš fiktivan Online Music Shop) prodaje tri vrste proizvoda:
- CD-ove
- Ploče
- Kasete
Za svaki tip proizvoda, postoji broj kategorija na koje stvari mogu pasti:
- Bluz
- Klasična
- Flok
- Dance
- Džez
- Rok
Svaki artikal ima sledeća svojstva:
- Proizvodni Tip (CD, ploča ili kaseta)
- Naziv
- Cena
Izgledaće da postoji imovina koja nedostaje iz prethodnog spiska, odnosno kategorija. Razlog zašto ovo nije uključeno je da kada vlasnik FOMS-a isporučuje predmete, naći će ga preko tipa proizvoda i naziva. Različite kategorije su samo pomoć korisniku online prodavnice.
Okvir
U ovom trenutku imamo dovoljno informacija da izgradimo plovni online shop, pod uslovom da imamo spisak CD-ova, ploča i kaseta za prodaju.
Sajt će biti izgrađen korišćenjem okvira, jer ćemo koristiti JavaScript da skladištimo listu stavki koje je kupac naručio. Ako je to učinjeno sa posebnim stranicama, izgubili biste ovu informaciju svaki put kada korisnik usmerava na drugu stranu, osim ako su kolačići korišćeni za skladištenje ovih podataka. Problem sa ovim je što možete završiti sa puno dupliranih kodova u svakoj stranici za utovar i čuvanje kolačića.
Ekran će biti podeljen u dva različita prostora. Manji prostor će omogućiti korisniku da izabere tip proizvoda i kategorija, kao i da vidi listu stavki. Veći prostor će biti za prikaz samih pojedinačnih stavki. Više ili manje, to će izgledati otprilike ovako:
| [Product Type] |
[Item Name] [Item Price] [Item Picture] [Item Opis] |
| [Category] | |
|
- Item 1 - Item 2 - Item 3 - Item 4 - Item 5 |
Gledajući ovo, treba nam nekoliko HTML dokumenata:
index.html: Ovo će uključiti JavaScript kod za skladištenje liste naručenih stavki, pa će definisati levu stranu (navigacija) i desnu stranu (sadržaj).
main.html: Ovo će uključiti inicijalni sadržaj sadržajnog rama, nešto duž linije "Welcome to FOMS”.
navframe.html: Ovo će definisati tri okvira (vrstu proizvoda, kategoriju i listu stavki) u navigacionom okviru.
product.html: Ovo će uključiti padajuću listu na kojoj korisnik može da izabere željeni tip proizvoda.
cat-cd.html, cat-record.html, cat tape.html: Ova tri fajla će uključiti padajuću listu za sve kategorije u svakoj vrsti proizvoda.
item-initial.html: Ovo će uključiti početni sadržaj okvira liste stavki, što će reći ništa.
item-cd-blues.html, item-cd-techno.html, ..., item-record-classical.html ...: Ovi fajlovi će sadržati listu stavki na raspolaganju u svakoj kategoriji za svaki tip proizvoda....
item-0001.html item-0002.html , item-0983.html ...: Ovi fajlovi će sadržati stvarno ime stavke, opis i sliku za svaku stavku.
Izvor
<html>
<head>
<title>FOMS</title>
<script>
<!--
function makeEmptyArray() {
this.count = 0;
return(this);
}
function item(productType, id, name, price) {
this.productType = productType;
this.id = id;
this.name = name;
this.price = price;
return(this);
}
function olAddItem(productType, id, name, price) {
this.items.count++;
this.items[this.items.count] = new item(productType, id, name, price);
}
function olRemoveItem(id) {
var index = 0;
for(var i = 1; i <= this.items.count; i++) {
if(this.items[i].id == id) {
index = i;
break;
}
}
if(index) {
for(var i = index; i < this.items.count; i++) {
this.items[i] = this.items[i+1];
}
this.items.count--;
}
}
function olClear() {
this.items.count = 0;
}
function orderList() {
this.items = new makeEmptyArray();
this.addItem = olAddItem;
this.removeItem = olRemoveItem;
this.clear = olClear;
}
var myOrderList = new orderList();
//-->
</script>
</head>
<frameset cols="255,*">
<frame name="navFrame" src="navframe.html">
<frame name="contentFrame" src="main.html">
</frameset>
</html>
|
Opis
For the sake of clarity, <noscript> i <noframes> oznake su izostavljene iz izvora. Glavna funkcija ove strane (koliko god je korisnik u pitanju) je definicija glavnog frameset-a. To prilično govori samo za sebe, pa neće biti dalje razmatrano. JavaScript je od mnogo većeg interesa za nas.
Objekat stavke
Item object opisuje jednu stavku, bilo CD-a, ploče ili kasete. On ima sledeće osobine:
- productType: string koji opisuje tip proizvoda. Važeće vrednosti su "CD", "Ploče", "Kasete".
- id: Ceo broj koji jedinstveno identifikuje ovu stavku.
- name: string koji je ljudski čitljiva stavka. Npr: "The Beatles Anthology"
- price: Pokretni-zarez broj koji je cena stavke
Bezvredno je postojanje id imovine. Mogli smo da je izostavimo, ali obezbeđuje uredan način odnošenja na pojedinačne stavke, bez obzira na tip proizvoda. Na primer, ako je The Beatles Anthology bio dostupan i na CD-u i ploči, mnogo je elegantniji (i manje resursno intenzivan) da traži jedan ceo broj nego da pretražujete stavku sa proizvodnim tipom CD-ova i naziv "The Beatles Anthology".
orderList objekat
Objekat orderList definiše niz svih stavki naručenih od strane korisnika, kao i metode za manipulaciju stavkama u tom nizu. Konkretno, ima sledeća svojstva i metode:
- items: 1-based niz stavki objekata. Prvobitno postavljena na nultu dužinu funkcije makeEmptyArrayMetod
- addItem: metod koji dodaje stavke objekta na niz stavki.
- removeItem: Metod koji uklanja stavke objekat iz niza stavki:
- clear: Metod koji prazni stavke niza.
Za razumevanje orderList objekta, moramo da razgovaramo o makeEmptyArray funkciji. Ova funkcija vraća objekat sa jednim svojstvom - Count - koji je prvobitno postavljen na nulu. Da biste dodali element na niz definisan ovom funkcijom, mi povećamo count imovinu i setobject [object.count] da koju god vrednost želimo, element ima.
Ovo je možda bolje pokazano nego objašnjeno. AddItem funkcija radi upravo ono što je opisano u prethodnom pasusu. To povećava count imovinu niza stavki, a zatim stavlja novi objekat stavki u stavke [items.count].
removeItem funkcija uklanja objekat podataka iz niza stavki tražeći ID stavke za uklanjanje, a zatim menja druge stavke u nizu gore po jedan. Konačno, count se dekrementira.
Clear funkcija jednostavno podešava brojanje artikala niza na nulu. Tehnički, to znači da su sve stavke prethodno dodate u nizu još u memoriji negde, ali kako Javascript nema operatera za brisanje, ovo je najbolje što možemo da uradimo.
Razlog zbog kog mi ne koristimo JavaScript Arraz objekat je zato što nije postojao u JavaScript 1.0, za koji je ovaj kod napisan. To znači da će ovaj kod da radi na Netscape 2.0, pretpostavljajući da ga neko negde još uvek koristi.
myOrderList objekat
myOrderList objekat je jedan i jedini slučaj u orderList objektu. Stavke po nalogu kupca će se završiti u myOrderList.items nizu.
Framework - main.html
main.html fajl obuhvata početni sadržaj sadržajnog okvira.
Izvor
<html> <body> <center> <h1>FOMS</h1> </center> <p>Welcome to the Ficticious Online Music Shop. We sell CDs, Records and Tapes, with many different styles of music to choose from.</p> <p>To your left you will see two drop down boxes. Select the type of product you are looking for in the first box, and the style of music in the second box. A list of available items will be displayed. Select an item to view a picture of it and its Opis.</p> </body> </html> |
Opis
Ovaj fajl služi za dobrodošlicu kupca u radnju. To je dobro mesto da se stave najave i slično, ili kratak opis radnje i kako da se krećete.
Framework - navframe.html
navframe.html datoteka definiše tri okvira (vrstu proizvoda, kategorije i listu stavki ) u navigacionom okviru.
Izvor
<html>
<frameset rows="50,50,*" frameborder="no" border="0" framespacing="0">
<frame name="productFrame" src="product.html"
scrolling="no" frameborder="no" border="0"
framespacing="0" marginwidth="8" marginheight="1">
<frame name="categoryFrame" src="cat-cd.html"
scrolling="no" frameborder="no" border="0"
framespacing="0" marginwidth="8" marginheight="1">
<frame name="itemFrame" src="item-initial.html"
frameborder="no" border="0"
framespacing="0" marginwidth="8" marginheight="1">
</frameset>
</html>
|
Opis
Opet, ovo je prilično standardan skup okvira definicija. Kuriozitet je smešan broj frameborder = "ne" i border = "0" koji se pripisuje vezano za < frameset > i < frame > oznake. Ovi atributi će učiniti da okviri nemaju granice, tako da korisnik neće imati nikakvu vizuelnu indikaciju da postoje tri odvojena okvira ovde. Ovi atributi se pojavljuju na mnogim mestima da bi to radilo i u Netscape i Internet Exloreru.
Podrazumevano, proizvodni tip "CD" će biti izabran, zbog čega se cat-cd.html datoteka učitava u kategoriji okvira.
Framework - product.html
product.html fajl sadrži padajuću listu na kojoj korisnik može da izabere željeni tip proizvoda.
Izvor
<html>
<head>
<script>
<!--
function selectProduct() {
var e = document.productForm.selProduct;
parent.categoryFrame.location = e.options[e.selectedIndex].value;
parent.itemFrame.location = "item-initial";
}
//-->
</script>
</head>
<body>
<form name="productForm">
<font size="-1">Product:<br></font>
<select name="selProduct" onChange="selectProduct();">
<option value="cat-cd.html">CDs</option>
<option value="cat-record.html">Records</option>
<option value="cat-tape.html">Tapes</option>
</select>
</form>
</body>
</html>
|
Opis
Padajuće liste definisana ovde ima tri opcije označene "CD", "Ploče" i "Kasete ".
Kada korisnik izabere novi tip proizvoda, funkcija selectProduct se zove. Ova funkcija učitava HTML fajlove specificirane po vrednosti izabranih opcija u kategoriji okvira. Item-initial.html datoteka se zatim učitava u stavci okvira.
Framework - cat-cd.html, ...
Cat-cd.html, cat-record.html, cat-tape.html datoteke uključuju padajuće liste za sve kategorije u svakom tipa proizvoda.
Izvor
<html>
<head>
<script>
<!--
function selectCategory() {
var e = document.categoryForm.selCategory;
parent.itemFrame.location = e.options[e.selectedIndex].value;
if(e.selectedIndex == 0) {
parent.parent.contentFrame.location = "main.html";
}
}
//-->
</script>
</head>
<body>
<form name="categoryForm">
<font size="-1">Category:<br></font>
<select name="selCategory" onChange="selectCategory();">
<option value="item-initial.html" selected>Welcome...</option>
<option value="item-cd-blues.html">Blues</option>
<option value="item-cd-classical.html">Classical</option>
<option value="item-cd-country.html">Country</option>
<option value="item-cd-rock.html">Rock</option>
<option value="item-cd-techno.html">Techno</option>
</select>
</form>
</body>
</html>
|
Opis
Jedino izvor cat-cd.html je naveden ovde.
Ovim datotekama treba gotovo isti oblik kao product.html datoteci, umesto što padajuća lista pokazuje vrste proizvoda pokazuje kategorije.
selectCategory funkcija radi skoro na isti način kao i selectProduct funkcija u product.html fajlu. Razlika je u tome što učitava item * .html fajlove u okvir liste stavki, kao i da, ako je prva opcija ("Dobrodošli ...") izabrana, main.html datoteka se učita u okviru sadržaja.
Framework - item-initial.html
Item-initial.html datoteka sadrži inicijalni sadržaj okvira liste stavki, što će reći ništa.
Izvor
<html> <body> </body> </html> |
Opis
Ova datoteka će biti zamenjena sa listom stavki kada korisnik izabere neku vrstu proizvoda i kategoriju.
Framework - item-cd-blues.html, ...
Item-cd-blues.html item-cd-dance.html, ..., item-record-classical.html fajlovi sadrže listu stavki dostupnu u svakoj kategoriji za svaki tip proizvoda.
Izvor
<html>
<head>
<base target="contentFrame">
</head>
<body>
<table border="0" cellpadding="1" cellspacing="1">
<tr>
<td> </td>
<td><a href="item-0011.html">Led Zeppelin - Remasters</a></td>
</tr>
<tr>
<td> </td>
<td><a href="item-0001.html">Penyon - Some People</a></td>
</tr>
<tr>
<td> </td>
<td><a href="item-0012.html">The Sisters Of Mercy - Vision Thing</a></td>
</tr>
</table>
</body>
</html>
|
Opis
Jedino izvor item-CD-rock.html je naveden ovde..
Ove datoteke su jednostavni spisak linkova za item*.html fajlove koji pokazuju sliku i opis stavki sadržajnog okvira.
Framework - item-0001.html, ...
item-0001.html item-0002.html, ..., item-0983.html fajlovi sadrže stvarne stavke imena, opisa i slika za svaku stavku. Ime datoteke se sastoji od stringa "item-" praćeno jedinstvenim identifikatorskim brojem tapaciranim do četiri cifre.
Izvor
<html>
<body>
<table border="0" cellpadding="1" cellspacing="1">
<tr>
<td><b>Penyon - Some People</b></td>
<td align="right">$10.00</td>
</tr>
<tr>
<td colspan="2">
<img src="images/0001.jpg" width="128" height="128"
border="0" align="left" hspace="8" vspace="4">
<p><i>Penyon</i> is an independent
rock band based in Melbourne, Australia.</p>
<p><i>Some People</i> is their first EP. Sample MP3 files
can be downloaded from their
<a href="http://www.penyon.com/" target="_blank">web site</a>.</p>
<ol>
<li>Resolution
<li>My Way
<li>Break Away
<li>Y.P.D. Bikini
<li>Shweet
<li>Sleazy
<ol>
</td>
</tr>
</table>
</body>
</html>
|
Opis
Samo izvor item-0001.html je naveden ovde..
Ove datoteke su ravne HTML. One će biti učitane u sadržajnom okviru kada korisnik izabere odgovarajuću stavku u item okviru.
Okvir - "Evo Jednog kog sam Ranije Pripremio"
U interesu čuvanja čitaoca od potrebe da iseče i nalepi kod poslednjih osam stranica u radnoj celini, primer do sada je vidljiv ovde.
Proces naručivanja
U ovom trenutku imamo plovnu online prodavnicu, sa jednim blistavim propustom - ne postoji način da korisnik zapravo izabere stavke za naručivanje. U tom smislu, mi ćemo dodati dve stvari FOMS-u:
- Polja pored svake stavke, tako da kupac može da ih izabere.
- Okvir na dnu ekrana da biste prikazali listu trenutno izabranih stavki, i dugme koje kupac može da klikne da finalizira naručivanje.
Moramo da izmenimo item-CD-blues.html, item-cd-techno.html, ..., item-record-classical.html, datoteke koje uključuju kućice i JavaScript kod da dodate stavke u myOrderList objekat stvoren u index.html fajlu.
Moramo da modifikujemo index.html fajl da ukljuši novi okvir za listu odabranih predmeta, i treba da dodamo JavaScript kod za generisanje ove liste.
Manja modifikacija mora biti napravljena na item-initial.html datoteci, tako da JavaScript kod zna da nijedna stavka nije na listi trenutno, kada je ovaj fajl aktivan.
Proces naručivanja - Modifikacije item-CD-blues.html, ...
Mi smo dodali neki JavaScript kod i HTML formu koja sadrži polja za potvrdu pored svakog imena stavke item-CD-blues.html item-cd-dance.html, ..., item-record-classical.html fajlova.
Kada korisnik želi da doda stavku u listu stavki koje idu u red, on proveri kvadratić pored imena stavke. Ako želi da uklonite stavku iz liste, on odčekira čekboks.
Izvor
Novi ili modifikovani kod prikazan je podebljanim tekstom.
<html>
<head>
<base target="contentFrame">
<script language="JavaScript">
function orderItem(checked, id, name, price) {
if(checked) {
top.myOrderList.addItem("CDs", id, name, price);
} else {
top.myOrderList.removeItem(id);
}
}
top.myOrderList.itemsVisible = true;
</script>
</head>
<body onLoad="top.myOrderList.checkItems();">
<form name="itemForm">
<table border="0" cellpadding="1" cellspacing="1">
<tr>
<td><input type="checkbox" name="Item11"
onClick="orderItem(this.checked, 11, 'Led Zeppelin - Remasters', '30.00');"> </td>
<td><a href="item-0011.html">Led Zeppelin - Remasters</a></td>
</tr>
<tr>
<td><input type="checkbox" name="Item1"
onClick="orderItem(this.checked, 1, 'Penyon - Some People', '10.00');"> </td>
<td><a href="item-0001.html">Penyon - Some People</a></td>
</tr>
<tr>
<td><input type="checkbox" name="Item12"
onClick="orderItem(this.checked, 12, 'The Sisters Of Mercy - Vision Thing', '30.00');"> </td>
<td><a href="item-0012.html">The Sisters Of Mercy - Vision Thing</a></td>
</tr>
</table>
</form>
</body>
</html>
|
Opis
Samo je izvor item-CD-rock.html naveden ovde.
Čekboks je umetnut levo od svake stavke. Kada korisnik proveri ili ga otčekira, orderItem funkcija se zove. Ova funkcija se poziva bilo u addItem ili removeItem metodu myOrderList objekta, u zavisnosti od toga da li je polje za potvrdu čekirano ili ne.
Kada se ovaj fajl učita, myOrderList.itemsVisible zastava se postavljena na tačno, znači da se spisak stavki prikazuje . Pored toga,myOrderList.checkItems () metod je pozvan da proveri polja pored svih stavki koje su već izabrane.
myOrderList.itemsVisible i myOrderList.checkItems() se pominju u više detalja u sledećem delu.
Postoji veliki broj stvari koje vredi napomenuti o ovom fajlu:
Proizvodni Tip prosleđen addItem metodu myOrderList objekta je doslovni string. Kada je lista izabranih stavki odštampana, ovaj string se koristi da se odredi šta ide na listu stavki.
Kućice imaju imena u obliku "itemn"gde je n numerička stavka. Ovaj id nije obložen do četiri cifre, ali će raditi isto kao i da jeste. Važno je da imena počinju sa četiri slova ("item"), jer to se oslanja na myOrderList.checkItems () metod onClick funkciju..
OnClick događaj svakog čekboksa zove orderItem funkciju. Ime stavke je prošlo kao string jednog navodnika (na primer: 'Penion - Neki ljudi') Dakle, ako postoje pojedinačna citirana imena, ona se moraju izbeći insering kosom crtom (\) pre njih. Ako su dupli navodnici, ampersands ili drugi simboli za koje postoje HTML kodovi su poželjni u ime proizvoda, odgovarajući HTML kod mora biti ubačen umesto (npr.: " ili &) .
Cene su prošli kao stringovi. To je jednostavan način da se tačan broj decimala pojavi kada je spisak izabranih stavki štampan.
Proces e naručivanja - izmene index.html
Mi smo dodali šest metoda orderList objekta - jedan je za bavljenje čekboksovima, četiri generišu HTML stranicu koja sadrži listu stavki reda, a poslednji je veštačka funkcija koja će na kraju biti korišćena za završetak naručivanja. Pored toga, nekoliko postojećih metoda su neznatno izmenjena. Takođe smo dodali još jedan okvir (orderSummaryFrame) u definiciju frameset-a.
Izvor
Novi ili modifikovani kod prikazan podebljanim tekstom.
<html>
<head>
<title>FOMS</title>
<script>
<!--
function makeEmptyArray() {
this.count = 0;
return(this);
}
function item(productType, id, name, price) {
this.productType = productType;
this.id = id;
this.name = name;
this.price = price;
return(this);
}
function olAddItem(productType, id, name, price) {
this.items.count++;
this.items[this.items.count] = new item(productType, id, name, price);
this.print();
}
function olRemoveItem(id) {
var index = 0;
for(var i = 1; i <= this.items.count; i++) {
if(this.items[i].id == id) {
index = i;
break;
}
}
if(index) {
for(var i = index; i < this.items.count; i++) {
this.items[i] = this.items[i+1];
}
this.items.count--;
}
this.print();
}
function olClear() {
this.items.count = 0;
if(this.itemsVisible) {
for(var i = 0; i < top.navFrame.itemFrame.document.itemForm.elements.length; i++) {
top.navFrame.itemFrame.document.itemForm.elements[i].checked = false;
}
}
this.print();
}
function olCheckItems() {
if(this.itemsVisible) {
for(var i = 0; i < top.navFrame.itemFrame.document.itemForm.elements.length; i++) {
for(var j = 1; j <= this.items.count; j++) {
var checkID = top.navFrame.itemFrame.document.itemForm.elements[i].name.substring(4, top.navFrame.itemFrame.document.itemForm.elements[i].name.length);
if(this.items[j].id == parseInt(checkID))
top.navFrame.itemFrame.document.itemForm.elements[i].checked = true;
}
}
}
}
function olPrintItems(doc, productType) {
var first = true;
var done = false;
for(var i = 1; i <= this.items.count; i++) {
if(this.items[i].productType == productType) {
if(first) {
doc.writeln("<tr><td width=\"50\"> </td><td colspan=\"3\">");
doc.writeln("<b>" + productType + "</b></td></tr>");
first=false;
}
doc.writeln("<tr><td> </td><td width=\"50\"> </td><td width=\"300\">");
doc.writeln(this.items[i].name);
doc.writeln("</td><td width=\"60\" align=\"right\">");
doc.writeln("$" + this.items[i].price + "</td></tr>");
}
}
}
function olPrintTotalPrice(doc) {
doc.writeln("<tr><td colspan=\"3\"><b>Total:</b></td><td align=\"right\"><b>");
var totalPrice = 0;
for(var i = 1; i <= this.items.count; i++) {
totalPrice += parseFloat(this.items[i].price);
}
var totalPriceStr = "" + totalPrice;
if(totalPriceStr.charAt(totalPriceStr.length-2) == '.') totalPriceStr += "0";
if(totalPriceStr.charAt(totalPriceStr.length-3) != '.') totalPriceStr += ".00";
doc.writeln("$" + totalPriceStr + "</b></td></tr>");
}
function olPrintOrderTable(doc) {
doc.writeln("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td colspan=\"4\">");
doc.writeln("<b>Items Selected</b></td></tr>");
this.printItems(doc,"CDs");
this.printItems(doc,"Records");
this.printItems(doc,"Tapes");
this.printTotalPrice(doc);
doc.writeln("</table>");
}
function olPrint() {
top.orderSummaryFrame.document.open("text/html");
top.orderSummaryFrame.document.writeln("<body>");
if(this.items.count > 0) {
top.orderSummaryFrame.document.writeln("<table width=\"100%\" border=\"0\">");
top.orderSummaryFrame.document.writeln("<tr valign=\"top\"><td>");
this.printOrderTable(top.orderSummaryFrame.document);
top.orderSummaryFrame.document.writeln("</td><td align=\"right\"><form>");
top.orderSummaryFrame.document.writeln("<input type=\"button\" value=\"Order Now\" onClick=\"top.myOrderList.order();\">");
top.orderSummaryFrame.document.writeln("<br><br><input type=\"button\" value=\"Clear\" onClick=\"top.myOrderList.clear();\">");
top.orderSummaryFrame.document.writeln("</form></td></tr></table>");
}
top.orderSummaryFrame.document.writeln("</body>");
top.orderSummaryFrame.document.close();
}
function olOrder() {
alert("This is where we will be finalizing the order");
}
function orderList() {
this.items = new makeEmptyArray();
this.addItem = olAddItem;
this.removeItem = olRemoveItem;
this.clear = olClear;
this.checkItems = olCheckItems;
this.printItems = olPrintItems;
this.printTotalPrice = olPrintTotalPrice;
this.printOrderTable = olPrintOrderTable;
this.print = olPrint;
this.order = olOrder;
this.itemsVisible = false;
}
var myOrderList = new orderList();
//-->
</script>
</head>
<frameset rows="*,50">
<frameset cols="255,*">
<frame name="navFrame" src="navframe.html">
<frame name="contentFrame" src="main.html">
</frameset>
<frame name="orderSummaryFrame" src="ordersummary.html">
</frameset>
</html>
|
Opis
Izmene u orderList Object-u
Dodali smo šest novih metoda za orderList object:checkItems, printItems, printTotalPrice, printOrderTable, print i red;i jedan član promenljivi koji se zove itemsVisible.
itemsVisible je postavljen na tačno kada kupac pregleda listu stavki u cateori (item-cd-blues.html itd) i lažno kada nisu.
Takođe smo modifikovali postojeći addItem, removeItem i jasne metode. Konkretno, svaki put kada se jedna od ovih metoda zove, ona opet traži novi za štampanje metod da biste ažurirali listu izabranih stavki. Pored toga, clear metod će poništite polja za potvrdu pored svih izabranih stavki u okviru kategorija.
checkItems Metoda
Kako se korisnik kreće po prodavnici, može da ide u jednu kategoriju i izabere neke stavke naloga, onda ide na neku drugu kategoriju, a zatim se vrati na prvu kategoriju. Kada smo se vratili u prvu kategoriju, moramo da ponovo proverimo polja pored svih stavki koje su naručene. To je ono što checkItems metod radi. To se zove po JavaScript kodu u item-cd-blues.html item-cd-techno.html, ..., item-record- classical.html datotekama.
Print, printOrderTable, printItems i printTotalPrice metodi
Metode štampanja dinamički kreiraju HTML dokument u okviru orderSummary koji sadrži listu stavki naručenih, i dva tastera sa oznakom "Order Now" i "Clear". "Order Now" dugme poziva order metod, i "Clear" dugme zove clear metom.
Spisak stavki naručenih je razbijen od strane vrste proizvoda, pa će izgledati ovako:
|
||||||||||||||||||||
Metod print kreira HTML dokument, a stavlja u "Order Now" i "Clear" tastere. Ona poziva printOrderTable metod za štampanje stvarne liste stavki).
printOrderTable metod naziva printItems metod tri puta - po jedan za svaki od tri tipa proizvoda (CD, ploča i kaseta). Zatim poziva printTotalPrice metod koji petlja kroz stavke dodajući svoje cene na ukupno, što je odštampano na dnu liste.
printItems metod petlje preko svih stavki izabranih ali prikazuje samo stavke identičnog tipa proizvoda koji je prošao u printOrderTable metodu. Ovi tipovi proizvoda su bukvalno žice, a odgovaraju onim definisanim u item-CD-blues.html item-cd-techno.html, ..., item-record classical.html fajlovima.
Metod naručivanja
Metoda naručivanja trenutno ne radi ništa više nego što prikazuje okvir za poruku. To će biti zamenjeno nečim korisnim kasnije.
Izmene u definiciji frameset-a
Okvir za listu stavki izabranih dodat je na dnu ekrana ubacivanjem druge FRAMESET definicije oko naše postojeće. Ime novog okvira je "orderSummaryFrame". HTML fajl koji je inicijalno učitan u ovom okviru se zove ordersummary.html, i prazan je HTML dokument. Radi kompletnosti, izvor je ovde naveden:
<html> <body> </body> </html> |
Proces naručivanja - Modifikacije item-initial.html
Item-initial.html fajl treba jedan mali deo JavaScript koda da mu se doda.
Izvor
Novi ili modifikovani kod prikazan je masnim slovima u tekstu.
<html> <head> <script> <!-- top.myOrderList.itemsVisible = true; --> </script> </head> <body> </body> </html> |
Opis
Kod koji smo dodali postavlja myOrderList.itemsVisible zastavu lažnom, tako da ako kupac pritisne "Clear" dugme,myOrderList.clear metod neće pokušati da poništi grupu čekboksova koji ne postoje.
Proces naručivanja - "Evo Jednog koji sam ranije pripremio" Deo II
Primer do sada je vidljiv ovde. Vi ste u mogućnosti da se krećete po prodavnici dodajete i uklanjate stavke sa liste tako što ćete kliknuti na polja za potvrdu pored imena stavki. Ako se krećete iz jedne kategorije u drugu, onda nazad u prvu kategoriju, svaka stavka izabrana će i dalje biti izabrana. Možete da promenite veličinu okvira na dnu ekrana da biste videli ceo spisak naručenih stavki.
Finalizacija naručivanja
Kada je kupac pogledao po prodavnici i izabrao neke stavke, on će želeti da naruči. U tom cilju, moramo obezbediti stranicu koja im omogućava da unesu svoje detalje plaćanja, a zatim poslati nalog trgovcu.
Idealno, naredba će biti ubačena u bazu podataka koju će trgovac periodično proveravati. Međutim, ovo je izvan opsega ovog dokumenta, tako da ćemo koristiti razumno jednostavan Perl skript..
Stranica koja omogućava unos platnih detalja će se otvoriti u novom prozoru kada korisnik klikne na "order" dugme. To će prikazati listu stavki naručenih, a obuhvatiće polja obrazaca za ime, adresa, način plaćanja i detalje kreditnih kartica. Spisak naručenih stavki će biti uskladišten u skrivenim poljima za slanje trgovcu..
Kod koji generiše ova stranica će biti dodat u index.html fajl.
Finalizacija narudžbe - Modifikacija index.html
Zamenili smo lažni order metod sa kodom koji generiše stranicu finalizacije porudžbine.
Izvor
Novi ili modifikovani kod je prikazan podebljanim tekstom.
<html>
<head>
<title>FOMS</title>
<script>
<!--
function makeEmptyArray() {
this.count = 0;
return(this);
}
function item(productType, id, name, price) {
this.productType = productType;
this.id = id;
this.name = name;
this.price = price;
return(this);
}
function olAddItem(productType, id, name, price) {
this.items.count++;
this.items[this.items.count] = new item(productType, id, name, price);
this.print();
}
function olRemoveItem(id) {
var index = 0;
for(var i = 1; i <= this.items.count; i++) {
if(this.items[i].id == id) {
index = i;
break;
}
}
if(index) {
for(var i = index; i < this.items.count; i++) {
this.items[i] = this.items[i+1];
}
this.items.count--;
}
this.print();
}
function olClear() {
this.items.count = 0;
if(this.itemsVisible) {
for(var i = 0; i < top.navFrame.itemFrame.document.itemForm.elements.length; i++) {
top.navFrame.itemFrame.document.itemForm.elements[i].checked = false;
}
}
this.print();
}
function olCheckItems() {
if(this.itemsVisible) {
for(var i = 0; i < top.navFrame.itemFrame.document.itemForm.elements.length; i++) {
for(var j = 1; j <= this.items.count; j++) {
var checkID = top.navFrame.itemFrame.document.itemForm.elements[i].name.substring(4, top.navFrame.itemFrame.document.itemForm.elements[i].name.length);
if(this.items[j].id == parseInt(checkID))
top.navFrame.itemFrame.document.itemForm.elements[i].checked = true;
}
}
}
}
function olPrintItems(doc, productType) {
var first = true;
var done = false;
for(var i = 1; i <= this.items.count; i++) {
if(this.items[i].productType == productType) {
if(first) {
doc.writeln("<tr><td width=\"50\"> </td><td colspan=\"3\">");
doc.writeln("<b>" + productType + "</b></td></tr>");
first=false;
}
doc.writeln("<tr><td> </td><td width=\"50\"> </td><td width=\"300\">");
doc.writeln(this.items[i].name);
doc.writeln("</td><td width=\"60\" align=\"right\">");
doc.writeln("$" + this.items[i].price + "</td></tr>");
}
}
}
function olPrintTotalPrice(doc) {
doc.writeln("<tr><td colspan=\"3\"><b>Total:</b></td><td align=\"right\"><b>");
var totalPrice = 0;
for(var i = 1; i <= this.items.count; i++) {
totalPrice += parseFloat(this.items[i].price);
}
var totalPriceStr = "" + totalPrice;
if(totalPriceStr.charAt(totalPriceStr.length-2) == '.') totalPriceStr += "0";
if(totalPriceStr.charAt(totalPriceStr.length-3) != '.') totalPriceStr += ".00";
doc.writeln("$" + totalPriceStr + "</b></td></tr>");
}
function olPrintOrderTable(doc) {
doc.writeln("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td colspan=\"4\">");
doc.writeln("<b>Items Selected</b></td></tr>");
this.printItems(doc,"CDs");
this.printItems(doc,"Records");
this.printItems(doc,"Tapes");
this.printTotalPrice(doc);
doc.writeln("</table>");
}
function olPrint() {
top.orderSummaryFrame.document.open("text/html");
top.orderSummaryFrame.document.writeln("<body>");
if(this.items.count > 0) {
top.orderSummaryFrame.document.writeln("<table width=\"100%\" border=\"0\">");
top.orderSummaryFrame.document.writeln("<tr valign=\"top\"><td>");
this.printOrderTable(top.orderSummaryFrame.document);
top.orderSummaryFrame.document.writeln("</td><td align=\"right\"><form>");
top.orderSummaryFrame.document.writeln("<input type=\"button\" value=\"Order Now\" onClick=\"top.myOrderList.order();\">");
top.orderSummaryFrame.document.writeln("<br><br><input type=\"button\" value=\"Clear\" onClick=\"top.myOrderList.clear();\">");
top.orderSummaryFrame.document.writeln("</form></td></tr></table>");
}
top.orderSummaryFrame.document.writeln("</body>");
top.orderSummaryFrame.document.close();
}
function olOrder() {
orderWindow = window.open("", "orderWindow", "scrollbars=yes");
d = orderWindow.window.document;
d.writeln("<html><head>");
d.writeln("<title>FOMS Order Form</title>");
d.write("<scr");
d.writeln("ipt>");
d.writeln("function validateForm() {");
d.writeln(" var valid=true;");
d.writeln(" if(document.orderForm.email.value.indexOf(\"@\")<3) {");
d.writeln(" alert(\"You MUST specify a valid email address.\");");
d.writeln(" valid=false;");
d.writeln(" }");
d.writeln(" return(valid);");
d.writeln("}");
d.write("</scr");
d.writeln("ipt>");
d.writeln("</head>");
d.writeln("<body>");
d.writeln("<form name=\"orderForm\" method=\"post\" action=\"sendorder.cgi\" onSubmit=\"return(validateForm());\">");
d.writeln("<center>");
d.writeln("<table width=\"580\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td align=\"center\">");
d.writeln("<h1>FOMS Order Form</h1>");
d.writeln("Please enter values in all relevant fields.<br> </td></tr>");
d.writeln("<tr><td align=\"center\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td>");
d.writeln("<pre>");
d.write("<b>Salutation: </b>");
d.write("<input type=\"radio\" checked name=\"salutation\" value=\"1\">Mr ");
d.write("<input type=\"radio\" name=\"salutation\" value=\"2\">Mrs ");
d.write("<input type=\"radio\" name=\"salutation\" value=\"3\">Miss ");
d.writeln("<input type=\"radio\" name=\"salutation\" value=\"4\">Ms");
d.write("<b>First Name: <input type=\"text\" size=\"20\" maxlength=\"50\" name=\"firstname\"> ");
d.writeln("Surname: <input type=\"text\" size=\"20\" maxlength=\"100\" name=\"surname\">");
d.writeln("Address: <input type=\"text\" size=\"52\" maxlength=\"100\" name=\"address\">");
d.write("Suburb: <input type=\"text\" size=\"20\" maxlength=\"50\" name=\"suburb\"> ");
d.writeln("State: <input type=\"text\" size=\"20\" maxlength=\"50\" name=\"state\">");
d.write("Postcode: <input type=\"text\" size=\"20\" maxlength=\"50\" name=\"postcode\"> ");
d.writeln("Country: <input type=\"text\" size=\"20\" maxlength=\"50\" name=\"country\">");
d.write("Phone: <input type=\"text\" size=\"20\" maxlength=\"50\" name=\"phone\"> ");
d.writeln("Fax: <input type=\"text\" size=\"20\" maxlength=\"50\" name=\"fax\">");
d.writeln("Email: <input type=\"text\" size=\"52\" maxlength=\"255\" name=\"email\">");
d.writeln("");
d.write("Credit Card: </b>");
d.write("<input type=\"radio\" name=\"cardtype\" value=\"1\">Visa ");
d.write("<input type=\"radio\" name=\"cardtype\" value=\"2\">MasterCard ");
d.write("<input type=\"radio\" name=\"cardtype\" value=\"3\">BankCard ");
d.writeln("<input type=\"radio\" name=\"cardtype\" value=\"4\">AMEX");
d.writeln("<b>Name on Card: <input type=\"text\" size=\"52\" maxlength=\"50\" name=\"cardname\">");
d.write("Card Number: ");
d.write("<input type=\"text\" size=\"20\" maxlength=\"50\" name=\"cardnumber\"> ");
d.writeln("Expires: <input type=\"text\" size=\"20\" maxlength=\"20\" name=\"cardexpires\">");
d.writeln("");
d.writeln("<b>Payment Method:</b>");
d.writeln("</pre><table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr valign=\"top\"><td>");
d.writeln("<input type=\"radio\" checked name=\"paymenttype\" value=\"1\">Use payment details as above");
d.writeln("<br><input type=\"radio\" name=\"paymenttype\" value=\"2\">I will phone you with payment details");
d.writeln("<br><input type=\"radio\" name=\"paymenttype\" value=\"3\">I will fax you payment details");
d.writeln("<br><input type=\"radio\" name=\"paymenttype\" value=\"4\">I will send a cheque/money order");
d.writeln("<br><input type=\"radio\" name=\"paymenttype\" value=\"5\">Cash on Delivery (COD)");
d.writeln("</td><td>");
d.writeln("<b>FOMS</b>");
d.writeln("<br>PO Box 123");
d.writeln("<br>Musicland");
d.writeln("<br>Phone: 1800-998-FOMS");
d.writeln("<br>Fax: 1800-999-FOMS");
d.writeln("</td></tr></table>");
d.writeln("</td></tr></table>");
d.writeln("</td></tr>");
d.writeln("<tr><td align=\"center\"><br>");
this.printOrderTable(orderWindow.window.document);
for(var i=1; i<=this.items.count; i++) {
d.writeln("<input type=\"hidden\" name=\"item" + i + "_productType\" value=\"" + this.items[i].productType + "\">");
d.writeln("<input type=\"hidden\" name=\"item" + i + "_id\" value=\"" + this.items[i].id + "\">");
d.writeln("<input type=\"hidden\" name=\"item" + i + "_name\" value=\"" + this.items[i].name + "\">");
d.writeln("<input type=\"hidden\" name=\"item" + i + "_price\" value=\"" + this.items[i].price + "\">");
}
d.writeln("</td></tr>");
d.write("<tr><td align=\"center\"><br><input type=\"submit\" value=\"Submit Order\"> ");
d.write("<input type=\"reset\" value=\"Clear all Values\"> ");
d.writeln("<input type=\"button\" value=\"Back to Catalogue\" onClick=\"window.close();\"></td></tr>");
d.writeln("</table>");
d.writeln("</center>");
d.writeln("</form>");
d.writeln("</body>");
d.writeln("</html>");
d.close();
}
function orderList() {
this.items = new makeEmptyArray();
this.addItem = olAddItem;
this.removeItem = olRemoveItem;
this.clear = olClear;
this.checkItems = olCheckItems;
this.printItems = olPrintItems;
this.printTotalPrice = olPrintTotalPrice;
this.printOrderTable = olPrintOrderTable;
this.print = olPrint;
this.order = olOrder;
this.itemsVisible = false;
}
var myOrderList = new orderList();
//-->
</script>
</head>
<frameset rows="*,50">
<frameset cols="255,*">
<frame name="navFrame" src="navframe.html">
<frame name="contentFrame" src="main.html">
</frameset>
<frame name="orderSummaryFrame" src="ordersummary.html">
</frameset>
</html>
|
Opis
Izvor stranice koja generiše ovu funkciju će izgledati otprilike ovako:
<html>
<head>
<title>FOMS Order Form</title>
<script>
function validateForm() {
var valid=true;
if(document.orderForm.email.value.indexOf("@") < 3) {
alert(\"You MUST specify a valid email address.\");
valid=false;
}
return(valid);
}
</script>
</head>
<body>
<form name="orderform" method="post" action="sendorder.cgi" onSubmit="return(validateForm());">
<center>
<table width="580" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<h1>foms order form</h1>
please enter values in all relevant fields.<br>
</td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<pre><b>Salutation: </b><input type="radio" checked name="salutation" value="1">Mr <input type="radio" name="salutation" value="2">Mrs <input type="radio" name="salutation" value="3">Miss <input type="radio" name="salutation" value="4">Ms
<b>First Name: <input type="text" size="20" maxlength="50" name="firstname"> Surname: <input type="text" size="20" maxlength="100" name="surname">
Address: <input type="text" size="52" maxlength="100" name="address">
Suburb: <input type="text" size="20" maxlength="50" name="suburb"> State: <input type="text" size="20" maxlength="50" name="state">
Postcode: <input type="text" size="20" maxlength="50" name="postcode"> Country: <input type="text" size="20" maxlength="50" name="country">
Phone: <input type="text" size="20" maxlength="50" name="phone"> Fax: <input type="text" size="20" maxlength="50" name="fax">
Email: <input type="text" size="52" maxlength="255" name="email">
Credit Card: </b><input type="radio" name="cardtype" value="1">Visa <input type="radio" name="cardtype" value="2">MasterCard <input type="radio" name="cardtype" value="3">BankCard <input type="radio" name="cardtype" value="4">AMEX
<b>Name on Card: <input type="text" size="52" maxlength="50" name="cardname">
Card Number: <input type="text" size="20" maxlength="50" name="cardnumber"> Expires: <input type="text" size="20" maxlength="20" name="cardexpires">
<b>Payment Method:</b>
</pre>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td>
<input type="radio" checked name="paymenttype" value="1">Use payment details as above
<br><input type="radio" name="paymenttype" value="2">I will phone you with payment details
<br><input type="radio" name="paymenttype" value="3">I will fax you payment details
<br><input type="radio" name="paymenttype" value="4">I will send a cheque/money order
<br><input type="radio" name="paymenttype" value="5">Cash on Delivery (COD)
</td>
<td>
<b>FOMS</b>
<br>PO Box 123
<br>Musicland
<br>Phone: 1800-998-FOMS
<br>Fax: 1800-999-FOMS
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center"><br>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<b>Items Selected</b>
</td>
</tr>
<tr>
<td width="50"> </td>
<td colspan="3">
<b>CDs</b>
</td>
</tr>
<tr>
<td> </td>
<td width="50"> </td>
<td width="300">
Mozart - Haydn - Gluck: Opera Arias & Von Otter / The English Concert / Pinnock
</td>
<td width="60" align="right">
$30.00
</td>
</tr>
<tr>
<td colspan="3">
<b>Total:</b>
</td>
<td align="right">
<b>$30.00</b>
</td>
</tr>
</table>
<input type="hidden" name="item1_productType" value="CDs">
<input type="hidden" name="item1_id" value="6">
<input type="hidden" name="item1_name" value="Mozart - Haydn - Gluck: Opera Arias & Von Otter / The English Concert / Pinnock">
<input type="hidden" name="item1_price" value="30.00">
</td>
</tr>
<tr>
<td align="center">
<br><input type="submit" value="Submit Order">
<input type="reset" value="Clear all Values">
<input type="button" value="Back to Catalogue" onClick="window.close();">
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
|
Ovde ništa nije posebno fensi, samo standardni HTML obrazac. Spisak stavki naručenih su odštampane na ovoj stranici pomoću printOrderTable funkcije. Pored toga, četiri skrivena polja su kreirana za svaki artikal naredio:. itemn_productType, itemn_id, itemn_name i itemn_price
Finalizacija Naručivanja- sendorder.cgi
Završna faza finalizacije narudžbe šalje nalog trgovcu. To će biti učinjeno putem e-pošte sledeći Perl skript:
Izvor
#!/usr/bin/perl -T
# Use the CGI.pm module
use CGI qw/:standard/;
# Remove environment variables
delete $ENV{'PATH'};
delete $ENV{'BASH_ENV'};
# Location of sendmail program
$mailprog = '/usr/lib/sendmail';
# To (merchant), From (customer) and Subject
$to = '"Tim Serong" <tim@wirejunkie.com>';
$from = '"' . param('firstname') . ' ' . param('surname') . '" <' . param('email') . '>';
$subject = 'Order from FOMS';
# Message body consists of Items Ordered...
$body = "\r\n----- Items Ordered -----\r\n\r\n";
$total = 0;
for($i=1; ; $i++) {
my($s) = param('item' . $i . '_id');
if(!$s) { last; }
$body .= "Name: " . param('item' . $i . '_name') . "\r\n";
$body .= "Product Type: " . param('item' . $i . '_productType') . "\r\n";
$body .= "ID: " . param('item' . $i . '_id') . "\r\n";
$body .= 'Price: $' . param('item' . $i . '_price') . "\r\n\r\n";
$total += param('item' . $i . '_price');
}
# ...Total Price...
$body .= "\r\n----- Total -----\r\n\r\n";
$body .= 'Total: $' . sprintf("%2.2f", $total) . "\r\n";
# ...Shipping Details...
$body .= "\r\n----- Shipping Details -----\r\n\r\n";
$body .= "Name: ";
if(param('salutation') == 1) { $body .= "Mr "; }
elsif(param('salutation') == 2) { $body .= "Mrs "; }
elsif(param('salutation') == 3) { $body .= "Miss "; }
elsif(param('salutation') == 4) { $body .= "Ms "; }
$body .= param('firstname') . ' ' . param('surname') . "\r\n";
$body .= "Address: " . param('address') . "\r\n";
$body .= "Suburb: " . param('suburb') . "\r\n";
$body .= "State: " . param('state') . "\r\n";
$body .= "Postcode: " . param('postcode') . "\r\n";
$body .= "Country: " . param('country') . "\r\n";
$body .= "Phone: " . param('phone') . "\r\n";
$body .= "Fax: " . param('fax') . "\r\n";
# ...and Billing Details.
$body .= "\r\n----- Billing Details -----\r\n\r\n";
if(param('cardtype')) {
$body .= "Credit Card Type: ";
if(param('cardtype') == 1) { $body .= "Visa"; }
elsif(param('cardtype') == 2) { $body .= "MasterCard"; }
elsif(param('cardtype') == 3) { $body .= "BankCard"; }
elsif(param('cardtype') == 4) { $body .= "AMEX"; }
$body .= "\r\n";
$body .= "Card Number: " . param('cardnumber') . "\r\n";
$body .= "Expires: " . param('cardexpires') . "\r\n";
}
$body .= "Payment Method: ";
if(param('paymenttype') == 1) { $body .= "Use payment details as above"; }
elsif(param('paymenttype') == 2) { $body .= "I will phone you with payment details"; }
elsif(param('paymenttype') == 3) { $body .= "I will fax you payment details"; }
elsif(param('paymenttype') == 4) { $body .= "I will send a cheque/money order"; }
elsif(param('paymenttype') == 5) { $body .= "Cash on Delivery (COD)"; }
$body .= "\r\n";
# Send the email
&sendmail($to, $from, $subject, $body);
# Say "thank you"
&print_html("Thank you for your order.", "FOMS Order Form");
#----------
# Subs...
#----------
sub sendmail {
my($to, $from, $subject, $body) = @_;
open (MAIL, "|$mailprog -t") || &error("Can't open $mailprog!");
print MAIL "To: $to\r\n";
print MAIL "From: $from\r\n";
print MAIL "Subject: $subject\r\n";
print MAIL "\r\n$body\r\n";
close MAIL;
}
sub error {
my($msg) = @_;
&print_html("Error!", $msg);
}
sub print_html {
my($body, $title) = @_;
print "Content-type: text/html\n\n";
print "<html>\n";
if($title) {
print "<head>\n";
print "<title>$title</title>\n";
print "</head>\n";
}
print "<body>\n";
print "<center>\n";
if($title) {
print "<h1>$title</h1>\n";
}
print $body;
print "<form><input type=\"button\" value=\"Back to Catalogue\" onClick=\"window.close();\"></form>\n";
print "</center>\n";
print "</body>\n";
print "</html>\n";
}
|
Opis
Ova skripta petlja kroz itemn_ * form polja, nadovezivanjem svakog na string. Zatim dodaje isporuke i informacije o plaćanju i šalje sve trgovcu kao e-mail, koji se završava izgledajući nešto
----- Items Ordered ----- Name: Penyon - Some People Product Type: CDs ID: 1 Price: 10.00 Name: Yes Minister Volume One Product Type: Tapes ID: 19 Price: 30.00 ----- Total ----- Total: $40 ----- Shipping Details ----- Name: Mr Fish Address: 52 Salmon Road Suburb: Guppy State: Trout Postcode: 1234 Country: Aquaraland Phone: 1234-5678 Fax: 1234-5679 ----- Billing Details ----- Credit Card Type: Visa Card Number: 4242424242424242 Expires: 10/01 Payment Method: Use payment details as above |
ovako:skripta koristi CGI.pm modul za jednostavnost. Vi ćete, naravno, morati da promenite vrednosti $ na (e-mail adresu trgovca) i $ predmet ('naručiti od FOMS') na linijama četrnaest i šesnaest. Jedine druge stvari koje bi mogle da budu modifikovane u zavisnosti od servera koji se koristi su lokacija Perl binarni na liniji jedan, i lokacija sendmail binarna na liniji jedanaest.
Ova skripta nije testirana na Windows NT, ali od useva sendmail-for-NT programa tamo treba da radi bez previše poteškoća ako je sendmail lokacija pravilno postavljena. Druga stvar koja može trebati promenu je email adresa u formatu, jer neke verzije sendmail za NT ne razumeju adrese u obliku "Real Name" <email@ddress>.
Finalizacija naručivanja- "Evo Jedan koji sam Pripremio Ranije "Deo III
Primer gotovog sistema je vidljiv ovde. Sada ste u mogućnosti da postavite narudžbe, koje će završiti poslate meni, tako da ne budite previše ludi :)
Imajte na umu da, iako su stavke u ovoj prodavnici prave, ja ne mogu da ih prodam vama, jer ovo nije prava prodavnica. Pominjem ovo samo zato što sam siguran da će neka budala naći ovu stranicu i misliti da može da kupe CD, ploču i kasetu od mene.
Zaključak
Mi sada imamo kompletan i funkcionalan okvir za onlajn prodavnicu koja se može koristiti u mnogim različitim situacijama. Ovaj suštinski sistem je zapravo bio u upotrebi od februara 1998 na http://www.ausadultvideo.com.au/ ali budite oprezni, oni prodaju Adult Video (video za odrasle), CD-ROM i DVD, pa ne gledajte to ako ne želite da vidite takve stvari.
Poenta ovog dokumenta je jezgro funkcionalnosti sistema, tako da samim tim postoji veliki broj oblasti koje mogu da koriste unapređenje:
Navigacija
Ja imam pomešane komentare na navigaciju koju ovaj sistem pruža ; padajuće liste umesto veza i teške upotrebe ramova. Neki ljudi smatraju da je zgodan i intuitivan, a neki ljudi ga mrze.Maintainability
Lako je postaviti prodavnicu od nule koristeći ovaj sistem, ali kada je potrebno da dodate i uklonite proizvode, može biti zbunjujuće s obzirom da morate da zadržite praćenje proizvoda ID i imena datoteka. To se može rešiti sasvim uredno tako što se svi vaši proizvodi čuvaju u bazi podataka na serveru i imajući vrstu proizvoda, kategoriju i stranice stavki generisane na letu.Integritet naručivanja
Moguće je da oportunistički kupac preuzme kopiju prodavnice na njegov računar, menja cene tih artikala, a zatim podnese nalog u nadi da će biti dato na rasprodaju i / ili besplatan proizvod. To se može rešiti tako što trgovac zaista pročita poruku pre slanja naručene robe, ili skladištenja svih proizvode i narudžbi u bazu podataka na serveru na koji samo trgovac ima pristup.Sigurnost naručivanja
Bezbednosna stranica na kojoj korisnik unosi detalje plaćanja nije šifrovana. To se lako može rešiti tako što stavimo stranice na server koji podržava SSL. Ako ne želite da imate celu radnju kodiranu zbog opterećenja koje će staviti na vaš server, možete šifrovati samo thesendorder.cgi skript i izmeniti konačni formular da podnese https://someserver/sendorder.cgi.Drugi problem sa bezbednošću naručivanja je da su kreditne kartice klijenata detaljnije poslate putem e-maila trgovcu, što je smešno nesigurno. To se može rešiti tako što ćete napisati skript koji PGP šifruje narudžbu pre slanja, ili tako što se nalozi čuvaju u bazi podataka na serveru, umesto da se šalju e-poštom.
Zadovoljstvo kupca
Trenutno, jedino obaveštenje koje kupac dobija o njihovom nalogu je stranica koja kaže "Hvala". sendorder.cgi skripta može lako biti modifikovana da pošalje račun kupcu, kao i da trgovcu.
Vaši komentari o ovom dokumentu - bilo da su dobri ili loši -cenjeni su veoma, tako da molimo ne oklevajte da pošaljete email meni.
Ako nađete ovaj tutorijal korisnim i želite da pokažete svoju zahvalnost, mala donacija je najviše dobrodošla, ili u Bitcoins na bitcoin:19QpWDmZPmTqawcr8VsXcbdc4Znq1ecrza?label=wirejunkie+donations ili preko PayPal-a.
