Building An Online Shopping Cart Using C And Asp Net

Edit or 's N ot e : Th is a r t icle ' s code h a s be e n u pda t e d t o w or k w it h t h e fin a l r e le a se of t h e .N e t fr a m e w or k .

As w eb developers w e are required t o face a w ide variet y of applicat ion needs. Each w eb sit e developed is unique and furnished according t o each client 's specific needs. The fact is t hat w ebsit es are indeed fabricat ed for each client w it h different specificat ions but every sit e shares som e com m on charact erist ics. Those part s of t he sit e t hat share funct ionalit y feat ures can be t reat ed as separat e applicat ions t o be reused.

I n t his case w e w ill address t he developm ent cycle for one of t he com m on blocks in t oday's w ebsit es - an Online Shopping Cart .

We w ill analyze t he developm ent of a shopping cart as a group of com ponent s described clearly before w e im plem ent t hem , t hus allow ing us t o use t his know ledge in areas ot her t han ASP.NET. Aft er a descript ion of each com ponent t he im plem ent at ion w ill be explained using C# .

The applicat ion w ill be designed t o w ork w it h a SQLServer dat abase for st orage. Applicat ion logic w ill be done w it hin t he Web Form and present ed t o t he user t hrough t he w eb brow ser. Core logic w ill reside in a separat e C#

CATEGORY: Applicat ion Developm ent

ARTI CLE TYPE: Tut orial Reader Com m ent s I n t his art icle Juan Mart ínez discusses and im plem ent s t he building blocks of an online shopping cart -

covering in t his part it em cat alogs, it em det ails, a cart and a checkout syst em . This act s as t he foundat ion for fur t her ar t icles, w here Juan covers ot her funct ionalit y like adm inist rat ion pages and set t ing up credit card paym ent s.

Art icle Discussion Rat e t his ar t icle Relat ed Links I ndex Ent ries

Aft er t hese st eps w e w ill have a clear pat h of developm ent and be ready t o im plem ent our online shopping cart in t he C# language.

D iggin g in t h e On lin e Sh oppin g Ca r t M ode l

We w ill first t ake a look at a sim plified diagram of an Online Shopping Cart . These are t he funct ionalit y blocks t o be discussed.

We t hen have four basic m odules:

z I t e m Ca t a log - Her e w e display t he opt ions t o our client s in an or ganized w ay.

z I t e m D e t a ils - Here w e show t he client as m uch info as w e can t o show off our product . z Sh oppin g Ca r t - Here we m anage t he user's select ed it em s.

z Ch e ck ou t Sy st e m - Her e w e save t he it em s select ed and t he client 's infor m at ion t o close t he t ransact ion.

These are t he basic blocks t o be im plem ent ed in our online st ore. I t includes t he indispensable funct ionalit y t hat w ill be described in det ail lat er. These blocks could be enriched furt her w it h m ore feat ures, w hich w ill be covered in lat er art icles.

D e fin in g r e qu ir e m e n t s

As in every soft w are developm ent cycle, w e need t o define our requirem ent s first so w e can design soft w are capable of giving sat isfact ion t o our cust om ers.

Our online shopping cart applicat ion should do t he follow ing:

z Have a list of cat egories and subcat egories.

z I t em s should be ar r anged in it s corresponding subcat egory. z I t em s could be select ed for cat egory and hom e prom ot ion.

z Each product should have an id, nam e, shor t and long descript ions, sm all and lar ge im ages, st ock and price. z Users should be able t o add product s t o t he basket and rem ove t hem .

z The user should be given an order num ber and w ill be able t o t rack it t hrough an order t racking syst em .

From our requir em ent s w e define t he dat abase schem a. The t ables ar e show n as a concept ual m odel, w it h all t ables used in t his version of t he shopping cart .

The t ables ar e gr ouped as follow s:

z Green - The cat alog part of our applicat ion. z Sky blue - I t em det ails.

z Orange - Shopping cart basket . z Yellow - The checkout syst em .

Ca t a log Se ct ion

sect ion/ subsect ion approach. As t his approach will work in m ost cases, you could im prove t his t o a com plet ely flexible design using r ecur sive sect ions, which will inherit a parent I d.

I t e m D e t a ils

The it em det ails part of our m odel is a t rim m ed down version of an it em det ails design. We have only one t able in which we save t he vit al inform at ion of t he it e m such as descript ion, price and im ages. We have a couple of Boolean values t hat are used t o specify if t he it em should be displayed as a hom e or sect ion it em .

Sh oppin g ca r t ba sk e t

The shopping basket is a sim ple t able t hat is used t em por ar ily t o st or e t he it em s select ed by t he user . We j ust save t he se ssion I d, t he it e m id and t he qu a n t it y. We will im plem ent t his as an in - m e m or y da t a t a ble and hold our select ed it em s in a session var iable. This t able is show n t o show you're t he inform at ion t hat needs t o be ret ained during our session.

Ch e ck ou t syst e m

This is t he m ost com plicat ed par t or our syst em . Upon checkout w e creat e an order I d in t he order t able. Then t he it em s st ored in t he shopping basket are t ransferred and saved in our order I t em s t able. The user inform at ion is st or ed in t he order det ails t able. These t w o t ables inher it t he order I d. We have a fourt h t able which also inherit s t he order I d. This is t he order Progress t able and it is used for order t racking. As progress is done, t he online shop adm inist rat or should add a record t o t his t able indicat ing t he progress done t o dat e. This is t hen checked by t he buyer.

Le t t h e codin g be gin

As our design basis is done, w e are all set t o st art our coding. The archit ect ure will be based on sim ple Web Form s calling cust om User Cont rols. Core logic w ill be done in separat e com ponent s using t he code behind t echnique.

Applica t ion fr a m e w or k

We st art by set t ing our basic fram ew ork. We m ake use of our

web.config

file t o save im port ant applicat ion inform at ion such as our connect ion st ring. This is how our configurat ion file will look:

<configuration>

<appSettings>

<add key="connString" value="server=(local)\NetSDK;database=ShoppingCart;Trusted_Con

</appSettings>

</configuration>

To r et rieve t his inform at ion w e use t he follow ing code snippet .

String connString = ConfigurationSettings.AppSettings["connString"];

As you can see, t his is a very easy and convenient w ay t o st ore applicat ion w ise dat a.

Ca t e gor y List Block

All being set , w e have our first t ask w hich is t o display a list of pr oduct s w hich w ill be filt ered by sect ion and subsect ion if select ed.

The first t ask is t o set up t he w orkspace of our Web Form s. We set up our language and add t he appropriat e nam espaces for our code t o w ork.. We set C# as our language and im port t he

System

nam espace for general purposes. We t hen add t he

System.Data

and

System.Data.OleDb

since w e w ill be using SQLSer ver as our dat abase engine. We should set t he debug flag t o false once w e deliver t his applicat ion t o t he real w orld.

<%@ Page Language="C#" Debug="true" %>

<%@ Import Namespace="System" %>

<%@ Import Namespace="System.Data" %>

<%@ Import Namespace="System.Data.SqlClient " %>

<%@ Register TagPrefix="SC" TagName="Site" Src="uc_header.ascx" %>

cont rol,

uc_catalog_section.ascx

w hich displays t he list of sect ions available on t he sit e. This is done by binding a dat a ret rieval codebehind class t o t he user cont rol.

This is our User Cont rol Code:

<%@ Control Language="C#" Debug="true" Inherits="CodeBehind.UcSection" %>

<%@ Import Namespace="System.Data" %>

<html>

<head>

<title></title>

<script language="C#" runat="server"></script>

</head>

<body>

<font face="Verdana" size="-1">

<asp:DataList id="MySectionList" runat="server"

BorderColor="black"

<a href="catalog.aspx?sectionId=<%# DataBinder.Eval(Container.DataItem,"ca

&sectionIndex=<%#Cont

inform at ion. The

<%# DataBinder.Eval(Container.DataItem, "catalogSectionName") %>

code is used t o select specific inform at ion from t he bound dat a and put it in place.

protected void Page_Load(object sender, EventArgs e) {

if (!IsPostBack) {

Bind_MySectionList();

}

if (Request.QueryString["sectionIndex"] != null) {

MySectionList.SelectedIndex = Int32.Parse(Request.QueryString["sectionIndex"]);

}

}

protected void Bind_MySectionList() {

String connString = ConfigurationSettings.AppSettings["connString"];

SqlConnection myConnection = new SqlConnection(connString);

SqlDataAdapter myCommand = new SqlDataAdapter("SELECT catalogSectionId, catalogSecti

FROM catalogSection ORDER BY catalogSectionName", myConnec

DataSet ds = new DataSet();

MySectionList.DataSource = new DataView(ds.Tables[0]);

MySectionList.DataBind();

}

}

We t hen have t o im plem ent our su bse ct ion u se r con t r ol. This cont rol w ill do a sim ilar t ask t o t he sect ion cont rol. We w ill j ust add a filt er t o t he Query applied t o t he dat abase. We will select subsect ions corresponding t o t he select ed sect ion. The rest is pret t y m uch t he sam e.

"SELECT catalogSubSectionId, catalogSubSectionName FROM catalogSubSection WHERE catalogS

sectionId + " ORDER BY catalogSub

We t hen need t o display our product list . We have t hr ee t ypes of pr oduct s:

z Sit e Product s: These are shown if no sect ion is select ed

z Sect ion Product s: These are shown if a sect ion is select ed but no subsect ion is select ed. z Nor m al Product s: These ar e product s t hat belong t o t he select ed subsect ion.

We need t o filt er t he t hree possibilit ies and creat e t he proper query. This is done in t he

UcProductList

class w it h t his code. Aft er w e have our query w e bind it t o a Dat aGr id Web Cont rol t o display t he it em s in a t able arrangem ent .

string SQLQuery = "SELECT itemId, itemName, itemShortDescription, itemSmallImage, itemPr

FROM item WHERE itemPromoteSite=1 ORDER

int mysectionId = 0;

if (Request.QueryString["sectionId"] != null) {

mysectionId = Int32.Parse(Request.QueryString["sectionId"]);

}

if (mysectionId != 0) {

//If we have a section selected we filter products for this section

SQLQuery = "SELECT item.itemId, item.itemName, item.itemShortDescription, item.itemSma

FROM (catalogSection INNER JOIN catalogSubSection ON catalogSection.catalogSectionI

INNER JOIN item ON catalogSubSection.catalog

WHERE (((catalogSection.catalogSectionId)=" + mysectionId + "

}

int mysubsectionId = 0;

if (Request.QueryString["subsectionId"] != null) {

mysubsectionId = Int32.Parse(Request.QueryString["subsectionId"]);

}

if (mysubsectionId != 0) {

//If we have a subsection selected we filter products for this subsection

SQLQuery = "SELECT itemId, itemName, itemShortDescription, itemSmallImage, itemPrice,

WHERE catalogSubSectionId=" + mysubsectionId + " ORDER BY itemName";

}

This concludes our cat alog present at ion layer which consist s of four m ain user cont rols.

z The first cont rol is responsible for displaying a list of sect ions. z The second cont rol is responsible for t he subsect ion list .

z The t hird cont rol is responsible for displaying a grid of it em s. This list of it em s is ret rieved from one of t hree sql queries depending on t he sit uat ion.

z A final cont rol renders t he t op of t he page.

All t he cont r ols w or k t oget her t o for m

catalog.aspx

. The user cont r ols m ake use of codebehind classes for dat abase access and bind t he Dat aList s in our page.

I t e m D e t a ils

Our next st ep in building our shopping cart is t o show off t he it em det ails. We first w ill use som e of t he code done for t he cat alog present at ion before. We w ill t ake t he basic ht m l fram ew ork and t hree user cont rols. We will reuse t he header, sect ion and subsect ion cont r ol.

The difference here w ill be t o replace t he it e m list cont rol w it h a ne w it e m de t a ils cont r ol. We w ill use a dat a list Web Cont rol t o display t he it em s charact erist ics as well as it s cor r esponding class in our code behind reposit ory.

The code t o do t his sim ple t ask is as follow s for t he user cont r ol:

<%@ Control Language="C#" Debug="true" Inherits="CodeBehind.UcItemDetails" %>

<%@ Import Namespace="System.Data" %>

<%@ Import Namespace="System.Data.SqlClient" %>

<script language="C#" runat="server"></script>

<font face="Verdana" size="-1">

<asp:DataList id="MyItemDetails" runat="server"

BorderColor="black"

BorderWidth="1"

GridLines="Both"

CellPadding="3"

Font-Name="Verdana"

Font-Size="8pt"

Width="600px"

HeaderStyle-BackColor="#aaaadd"

SelectedItemStyle-BackColor="Gainsboro"

RepeatDirection = "Horizontal"

>

<ItemTemplate>

<table>

<tr>

<td valign="top">

<img src="images/<%# DataBinder.Eval(Container.DataItem, "itemLargeImage") %>" wid

</td>

<td valign="top">

<span class="itemTitle"><%# DataBinder.Eval(Container.DataItem, "itemName") %></sp

<br>

<span class="itemText"><%# DataBinder.Eval(Container.DataItem, "itemLongDescriptio

<br><br>

<span class="itemText">Price: <%# (DataBinder.Eval(Container.DataItem, "itemPrice"

<br>

<span class="itemText">Stock: <%# DataBinder.Eval(Container.DataItem, "itemStock")

<br><br>

<a href="catalog.aspx?sectionId=<%=sectionId%>&sectionIndex=<%=sectionIndex%>&subs

&subsectionIndex=<%=subsectionIndex

<span class="itemText"> | </span>

<a href="cart.aspx?cartAction=1&itemId=<%# DataBinder.Eval(Container.DataItem, "it

</td>

</tr>

</table>

</ItemTemplate>

</asp:DataList>

</font>

And our code behind class:

protected void Bind_ItemDetails() {

int myItemId = 0;

if (Request.QueryString["itemId"] != null) {

myItemId = Int32.Parse(Request.QueryString["itemId"]);

}

string SQLQuery = "SELECT itemId, itemName, itemLongDescription, itemLargeImage, itemP

FROM item WHERE itemId

String connString = ConfigurationSettings.AppSettings["connString"];

SqlConnection myConnection = new SqlConnection(connString);

SqlDataAdapter myCommand = new SqlDataAdapter(SQLQuery, myConnection);

DataSet ds = new DataSet();

myCommand.Fill(ds, "item");

MyItemDetails.DataSource = new DataView(ds.Tables[0]);

MyItemDetails.DataBind();

}

Furt her enhancem ent s can be done t o t his sim ple m odule. This form show s t he st ored det ails of t he it em and can be enriched w it h user review s and r elat ed it em list s.

Sh oppin g ca r t ba sk e t

The shopping cart basket im plem ent s t he m aj orit y of t he funct ionalit y. I t should provide w ays t o add, edit and delet e it em s from it . The basket is m erely a t em poral st orage area for t he user t o group t he it em s of int er est . We t hen need som e session m anagem ent t o be able t o r ecognize w hich it em s belong t o each client in it s ow n session.

ASP.NET, as in previous asp applicat ions, provides t he necessary obj ect s t o work wit h sessions. I n t his case we w ill t ake advant age of t he Se ssion obj ect . We will st ore a D a t a Ta ble obj ect as a Session var iable t herefor e all shopping cart basket operat ions ar e done in m em or y. This is a very fast approach but w ill need t o be provided w it h enough m em ory t o handle concurrent client s.

The shopping basket m odule com prises t w o fundam ent al part s. The fir st involves m anaging t he it em s t hat t he user w ant s t o have in t he basket . The second is in charge of displaying t he it em s current ly in t he basket . We w ill see t he det ails now .

We inst ruct our Web Form t o add an it em t o t he cart w it h queryst ring variables. We j ust add an it em t o t he Dat aTable. To im plem ent t he updat e and delet e m et hods w e bind t he Dat aTable t o t he Dat aList Web Cont rol and perform t he operat ions.

void Page_Load(Object Sender, EventArgs E) {

if (Request.QueryString["cartAction"] != null) {

this.cartAction = Int32.Parse(Request.QueryString["cartAction"]);

}

if (Session["ShoppingCart"] == null) {

Cart = new DataTable();

Cart.Columns.Add(new DataColumn("ItemId", typeof(string)));

Cart.Columns.Add(new DataColumn("Item", typeof(string)));

Cart.Columns.Add(new DataColumn("Qty", typeof(string)));

Cart.Columns.Add(new DataColumn("Price", typeof(string)));

Session["ShoppingCart"] = Cart;

Cart = (DataTable)Session["ShoppingCart"];

if (Request.QueryString["cartAction"] != null) {

myCartAction = Int32.Parse(Request.QueryString["cartAction"]);

}

String connString = ConfigurationSettings.AppSettings["connString"];

SqlConnection myConnection = new SqlConnection(connString);

protected void DataCartList_DeleteCommand1(Object Sender, DataListCommandEventArgs e

string item = ((Label)e.Item.FindControl("Label4")).Text;

CartView.RowFilter = "Item='"+item+"'";

protected void DataCartList_EditCommand1(Object Sender, DataListCommandEventArgs e)

CartList.EditItemIndex = (int)e.Item.ItemIndex;

BindCartList();

BindTotalList();

}

protected void DataCartList_CancelCommand1(Object Sender, DataListCommandEventArgs e

CartList.EditItemIndex = -1;

BindCartList();

BindTotalList();

}

protected void DataCartList_UpdateCommand1(Object Sender, DataListCommandEventArgs e

string itemId = ((Label)e.Item.FindControl("Label1")).Text;

string qty = ((TextBox)e.Item.FindControl("Text1")).Text;

string price = ((Label)e.Item.FindControl("Label3")).Text;

DataTable CartTable = (DataTable)Session["ShoppingCart"];

foreach(DataRow myRow in CartTable.Rows) {

Double tempPrice = Double.Parse(myRow[3].ToString());

Int32 tempQty = Int32.Parse(myRow[2].ToString());

mySubTotal += tempPrice * tempQty;

CartTotal.Columns.Add(new DataColumn("SubTotal", typeof(string)));

CartTotal.Columns.Add(new DataColumn("Tax", typeof(string)));

CartTotal.Columns.Add(new DataColumn("Total", typeof(string)));

DataRow drTotal = CartTotal.NewRow();

drTotal[0] = mySubTotal.ToString();

Ch e ck ou t Sy st e m

The checkout syst em has t he responsibilit y of saving t he client info and select ed it em s for processing. We use t hree t ables t o save t he client info. These are t he follow ing:

z order Dat a - St or es t he dat e of t he order and generat es t he order I d.

z orderI t em - List of it em s bought , it also saves t he pr ice at t he t im e of pur chase. z orderDet ail - Saves shipping and billing inform at ion for t he order.

We divide our process int o t hr ee st eps:

z Shipping and Billing I nform at ion - Here w e get t he shipping inform at ion. Wit h t his info w e can calculat e t he shipping cost s. This should be done accor dingly t o each st or e's necessit ies. We validat e credit car d infor m at ion also. This should be done using a specific provider like paypal.

z Confirm at ion - Her e w e present a sum m ary of t he inform at ion received and show t he list of it em s t o be bought , as w ell as t he grand t ot al of t he order. The user is asked t o subm it t he inform at ion if it is correct .

z Sum m ary - We finish t he t ransact ion and show t he user t he order num ber.

We post t he info from t he first t o t he second st ep. We t hen use Web Form Cont rols t o ask for confirm at ion. I f t he info is correct , t hen w e regist er t he order for our client .

We do need t o im plem ent som e form validat ion before post ing t he infor m at ion and im plem ent som e credit card validat ion t hrough an ext ernal pr ovider or your ow n soft w are.

Tr a ck in g y ou r or de r

The final part of our online shopping car t applicat ion is t he t r acking syst em . We w ill im plem ent a basic t racking syst em w hich w ill ask t he user for t heir em ail and order num ber. The syst em w ill t hen show a list of m ilest ones regist ered in t he t racking dat abase.

This is t he code required:

protected void ButtonView_Click(object Source, EventArgs e) {

//Look for order id with provided email and order number

String connString = ConfigurationSettings.AppSettings["connString"];

string strSelect = "SELECT orderId FROM orderDetail WHERE orderId=" + orderIdBox.Text

AND orderDetailShippingEmail='" + emailBox.Text + "'";

SqlConnection myConnection = new SqlConnection(connString);

SqlCommand myCommand = new SqlCommand(strSelect, myConnection);

myConnection.Open();

SqlDataReader dr = myCommand.ExecuteReader();

int newOrderId = 0;

if (dr.Read()) {

//emailBox.Text = "Encontramos!!!";

Bind_TrackingList();

}

myConnection.Close();

}

protected void Bind_TrackingList() {

string SQLQuery = "SELECT orderProgressText, orderProgressDescription, orderProgressD

WHERE orderId = " + orderIdBox.Text;

String connString = ConfigurationSettings.AppSettings["connString"];

SqlConnection myConnection = new SqlConnection(connString);

SqlDataAdapter myCommand = new SqlDataAdapter(SQLQuery, myConnection);

DataSet ds = new DataSet();

myCommand.Fill(ds, "orderProgress");

MyTrackingList.DataSource = new DataView(ds.Tables[0]);

MyTrackingList.DataBind();

D e ploy m e n t of t h e sit e

Deploym ent of t his part icular applicat ion is ver y sim ple.

z Creat e a ne w da t a ba se in SQLServer online shopping cart . Furt her enhancem ent s can be m ade and w ill be t he responsibilit y of t he reader. These enhancem ent s should be m ade t o enrich t he shopping cart applicat ion give a bet t er ser vice t o t he online com m unit y. Som e ideas are present ed here.

Fe a t u r e im pr ove m e n t s

z Recursive sect ions for n levels of pr ofundit y z I t em review s

z I t em relat ed it em s

z User account s and m anagem ent z Mailing list t o cust om ers

z Specific shipping cost s calculat ions

Te ch n ica l im pr ove m e n t s

z Build based on com ponent s for perform ance and possible code reuse z Migrat e t o SQL Server dat abase using st ored procedures for perform ance z I m plem ent SSL in your server ( a m ust but out of scope! )

z I m plem ent real t im e credit card processing and charging.

Con clu sion s

The syst em present ed shows t he basis of a working online shopping cart . I t involves t he m ain aspect s of an online st ore which are t he cat alog of it em s, t he it em det ail m odule, t he shopping cart basket and t he checkout m odule. Every shopping car t online t oday m ust im plem ent t hese basic part s t o be funct ional. Hopefully t his ar t icle has given you t he know ledge t o build your own w it h ease and t o add new funct ionalit y t o m eet your needs as ideas for im provem ent have been given.

I n fut ure art icles, w e w ill cover som e of t he im port ant requirem ent s of a real - w orld shopping cart t hat have been

z See ot her art icles in t he Applicat ion Develo z See ot her Tut orial art icles

z Reader Com m ent s on t his ar t icle z Go t o Previous Art icle

( Opt ion a l)

ht t p: / / w ww.sybase.com / product s/ ent erprisem odeling/ pow erdesigner z Pay Pal: w w w .paypal.com

Ecom m erce Perform ance Securit y Sit e Design XML SO

Dat a Access/ ADO.NET Applicat ion

Developm ent Web Services Graphics/ Gam es Mobile Ot her Technologies

C# Today is brought t o you by Wrox Press (w w w .w rox.com) . Please see our t erm s and condit ions and privacy C# Today is opt im ised for Microsoft I nt ernet Explorer 5 brow sers.

Edit or 's N ot e : Th is a r t icle ' s code h a s be e n u pda t e d t o w or k w it h t h e fin a l r e le a se of t h e .N e t fr a m e w or k . did before, first defining our basic requirem ent s, set t ing up t he necessary m odificat ions, and finally convert ing it t o code.

These enhancem ent s w ill dem onst r at e how easy it is t o add new funct ionalit y t o t he fram ew or k described in t he previous art icle, by adding a cust om er rat ing cont rol for t he available it em s. We w ill also build an adm inist rat ion console, w hich w ill enable us t o m anage t he online st ore t hrough t he w eb. We w ill also discuss t he secur it y issues

CATEGORY: Applicat ion Developm ent

ARTI CLE TYPE: Tut orial Reader Com m ent s I n t his art icle, Juan Mart inez cont inues his work in building an online shopping cart applicat ion. I n part

one, he discussed t he basic fram ew ork of t he applicat ion, now t he t im e has com e t o increase t he feat ures of t he shopping cart and have a com plet e syst em for online use. These enhancem ent s w ill dem onst rat e how easy it is t o add new funct ionalit y t o t he fram ew ork, by adding a cust om er rat ing cont rol for t he available it em s. He w ill also build an adm inist rat ion console, which will enable us t o m anage t he online st ore t hrough t he web, and will discuss t he secur it y issues on t he w eb, and how t o im plem ent SSL in you ser ver for encr ypt ion. Finally he w ill briefly discuss t he various paym ent services available on t he w eb.

Art icle Discussion Rat e t his ar t icle Relat ed Links I ndex Ent ries

Before w e st art t o put t oget her our new com ponent s, w e need t o rem em ber t he archit ect ure of our exist ing shopping cart . We w ill review t he shopping cart m odel and st at e w here our m odificat ions w ill be. We w ill also look back at our exist ing dat abase, w hich w e w ill t hen m odify t o support t he new feat ures.

Th e sh oppin g ca r t m ode l

The shopping cart m odel is a sim plified flow of inform at ion t hat happens in all online shopping car t im plem ent at ions, and is t he basis for our online car t .

We t hen have four basic m odules in our applicat ion:

z I t em Cat alog - Here w e display t he opt ions t o our client s in an or ganized w ay.

z I t em Det ails - Here w e show t he client as m uch info as w e can t o show off our product . z Shopping Cart - Here w e m anage t he user's select ed it em s.

z Checkout Syst em - Her e w e save t he it em s select ed and t he client 's infor m at ion t o close t he t ransact ion.

We w ill build addit ional feat ures inside t he " it em det ails" m odule by coding new user cont rols and sim ply include t hem in t he Web Form .

The adm inist rat ion console w ill cont rol t he inform at ion in t he dat abase. I t w ill not have any influence on t he shopping cart m odel, as it w ill act as a back end.

Th e da t a ba se m ode l

The t ables ar e gr ouped as follow s:

z Green - The cat alog part of our applicat ion. z Blue - I t em det ails.

z Orange - Shopping cart basket . z Yellow - The checkout syst em .

The new feat ures of our applicat ion w ill have t o int eract w it h t his exist ing dat abase schem a. The det ails w ill be discussed aft erw ards.

Th e j ob a h e a d

D e fin in g ou r n e w r e qu ir e m e n t s

As in every soft w are developm ent cycle, w e need t o define our requirem ent s first , so t hat w e can design soft w ar e capable of giving sat isfact ion t o our cust om ers.

Our online shopping cart applicat ion should add t he follow ing feat ures:

z I nclude a cust om er rat ing com ponent .

z An adm inist r at ion console t o m odify t he exist ing infor m at ion for t he cat alog sect ion / subsect ion, it em s and have a list of orders.

z The adm inist rat ion console should allow regist ered users only t hrough a login screen. z The console should also provide a way t o m anage t hese users.

z The sit e should im plem ent SSL encrypt ion in t he back end for securit y. z The shopping cart should also accept online t ransact ions t hrough t he web.

Th e cu st om e r r a t in g fe a t u r e

This w ill be a new feat ure t o int egr at e int o t he exist ing w ebsit e. The goal of t his part of t he art icle is t o show how easy it is t o develop new funct ionalit y int o exist ing websit es using t he ASP. Net fram ew ork.

This new feat ure requires us t o develop a new user cont rol t o im plem ent t he funct ionalit y. This will be

uc_item_rating.ascx, used to display the existing comments and add new ones.

D a t a ba se m odifica t ion s

The dat abase needs t o be m odified t o accom m odat e t he new feat ure. We j ust need t o add a new t able and a relat ionship t o t he it em t able.

N e w con t r ols

Our Web Applicat ion is m ade up of user cont rols. We do t his t o im plem ent funct ionalit y in a m odular fashion. I t is now t im e t o ext end our im plem ent at ion. We w ill add a new user cont rol t o hold t he new funct ionalit y. This cont r ol will present t he list of user reviews, and provide a form t o add new com m ent s. I t will be added w it h t he follow ing code:

Regist ered in t he page:

<%@ Register TagPrefix="SC" TagName="ItemRating" Src="uc_item_rate.ascx" %>

And included in t he page body:

<SC:ItemRating runat="server" />

Code be h in d cla sse s

The code t o achieve t he desired behavior resides in t he UcI t em Rat ing class. The follow ing code populat es t he rat ing list and calculat es t he average rat ing for t he select ed it em :

int myItemId = 0;

if (Request.QueryString["itemId"] != null)

{

myItemId = Int32.Parse(Request.QueryString["itemId"]);

}

//Bind the rating list

string SQLQuery = "SELECT itemRatingAuthor, itemRatingComment, itemRatingRate FROM itemR

WHERE itemId = " + myItemId.ToString() + " ORDER BY itemRatingId ASC";

String connString = ConfigurationSettings.AppSettings["connString"];

SqlConnection myConnection = new SqlConnection(connString);

SqlDataAdapter myCommand = new SqlDataAdapter(SQLQuery, myConnection);

myCommand.Fill(ds, "itemRating");

MyRatingList.DataSource = new DataView(ds.Tables[0]);

MyRatingList.DataBind();

//Calculate the average rating for the item

string strSelect = "SELECT itemRatingRate AS rate FROM itemRating";

myConnection = new SqlConnection(connString);

lblRating.Text = "Average Rating: " + rate.ToString();

The follow ing code adds a new user rat ing t o t he list .

//Retreive new Id from main order table

string strSelect = "SELECT COUNT(itemRatingId) AS myId FROM itemRating";

SqlConnection myConnection = new SqlConnection(connString);

//Add new order to the main order table

itemRatingAuthor, itemRatingComment, itemRatingRate) "

+ "VALUES (" + newRateId.ToString() + ", "

+ "" + myItemId.ToString() + ","

+ "'" + author + "',"

+ "'" + comment + "',"

+ "" + rate.ToString() + ")";

myConnection = new SqlConnection(connString);

myCommand = new SqlCommand(strInsert, myConnection);

myConnection.Open();

int queryResult = myCommand.ExecuteNonQuery();

myConnection.Close();

txtAuthor.Text = "";

txtComment.Text = "";

Radio1.Checked = false;

Radio2.Checked = true;

Radio3.Checked = false;

BindRatingList();

Fin a l scr e e n s

Finally our it em screen should look like t his:

Th e a dm in ist r a t ion con sole

The adm inist rat ion console consist s of t he pages needed t o keep t he sit e up t o dat e. Adm inist rat ion pages should be developed for each t able in t he dat abase t hat is t o be adm inist ered t hrough t he web. We will present t he developm ent of such a page for t he it em t able.

Th e u se r con t r ols

We w ill develop several cont rols for t his page. These cont rols cont ain specific funct ionalit y and are t he building blocks of our Web Form . The cont r ols ar e t he follow ing:

z

uc_admin_menu.ascx

- Displays a list of cat egories.

z

uc_admin_item.ascx

- Displays t he list of it em s for t he select ed cat egory and provides a form t o add new it em s t o t hat cat egory. This w ill be used when we need t o display t he list of it em s and add new it em s. z

uc_admin_item_edit.ascx

- Pr ovides a form t o m odify t he infor m at ion for t he select ed it em . This w ill be

used w hen w e w ant t o see t he it em 's det ails and m odify t hem .

Th e code be h in d cla sse s

We have a couple of user cont rols t hat handle t he inform at ion for t he it em s in t he st ore. The first displays t he list of subsect ions and t he list of it em s in t he select ed subsect ion. I t allow s us t o add a new it em t o t he st or e. The second user cont rol displays a form w it h t he select ed it em inform at ion t hat allows us t o edit t he inform at ion of t he it em . I t also enables us t o delet e t he it em .

Th e it e m list

of our code is in charge of adding cont ent t o it .

<asp:DataList id="MyProductList" runat="server"

BorderColor="black"

HeaderStyle-BackColor="#aaaadd"

SelectedItemStyle-BackColor="Gainsboro"

RepeatDirection = "Horizontal"

<td width=600 colspan=2><a href='admin_item_mod.aspx?subSectionId=<%# DataBinde

"catalogSubSectionId") %>&itemId=<%# DataBinder.Eval(Container.DataIte

%>'><span class="itemText">Edit / Delete</span></a></td>

</tr>

<tr>

<td width=300><span class="itemTitle">Item Id:</span></td>

<td width=300><span class="itemText"><%# DataBinder.Eval(Container.DataItem,

"itemId")

%></span></td>

</tr>

<tr>

<td width=300><span class="itemTitle">Item name:</span></td>

<td width=300><span class="itemText"><%# DataBinder.Eval(Container.DataItem,

"itemName")

%></span></td>

</tr>

<tr>

<td width=300><span class="itemTitle">Item short descripcion:</span></td>

<td width=300><span class="itemText"><%# DataBinder.Eval(Container.DataItem,

"itemShortDescription")

%></span></td>

</tr>

<tr>

<td width=300><span class="itemTitle">Item long descripcion:</span></td>

<td width=300><span class="itemText"><%# DataBinder.Eval(Container.DataItem,

"itemLongDescription")

%></span></td>

</tr>

<tr>

<td width=300><span class="itemTitle">Item small image:</span></td>

<td width=300><span class="itemText"><%# DataBinder.Eval(Container.DataItem,

"itemSmallImage")

%></span></td>

</tr>

<tr>

<td width=300><span class="itemTitle">Item large image:</span></td>

<td width=300><span class="itemText"><%# DataBinder.Eval(Container.DataItem,

"itemLargeImage")

%></span></td>

</tr>

<tr>

<td width=300><span class="itemTitle">Item price:</span></td>

<td width=300><span class="itemText"><%# DataBinder.Eval(Container.DataItem,

"itemPrice")

%></span></td>

</tr>

<tr>

<td width=300><span class="itemTitle">Item Stock:</span></td>

<td width=300><span class="itemText"><%# DataBinder.Eval(Container.DataItem,

"itemStock")

%></span></td>

</tr>

<tr>

<td width=300><span class="itemTitle">Promote in Category Home:</span></td>

<td width=300><span class="itemText"><%# DataBinder.Eval(Container.DataItem,

"itemPromoteCategory")

%></span></td>

</tr>

<tr>

"itemPromoteSite")

%></span></td>

string SQLQuery = "SELECT * FROM item WHERE catalogSubSectionId=" + subSectionId

+ " ORDER BY catalogSubSectionId, itemName";

String connString = ConfigurationSettings.AppSettings["connString"];

SqlConnection myConnection = new SqlConnection(connString);

SqlDataAdapter myCommand = new SqlDataAdapter(SQLQuery, myConnection);

DataSet ds = new DataSet();

myCommand.Fill(ds, "item");

MyProductList.DataSource = new DataView(ds.Tables[0]);

MyProductList.DataBind();

protected void AddItem_Click(object Source, EventArgs e)

{

if (Request.QueryString["subSectionId"] != null)

{

string strSelect = "SELECT MAX(itemId) AS myId FROM item";

SqlCommand myCommand = new SqlCommand(strSelect, myConnection);

myConnection.Open();

SqlDataReader dr = myCommand.ExecuteReader();

int newId = 0;

string strInsert = "INSERT INTO item(itemId, catalogSubSectionId, itemName, itemSh

itemLongDescription, itemSmallImage, itemLargeImage, itemPrice, itemStock, ite

itemPromoteSite) "

+ "VALUES(" + newId + ", " + Request.QueryString["subSectionId"] + ", '"

+ itemName + "', '" + shortDesc + "', '" + longDesc + "', '" + smallIm

+ "', '" + largeImg + "', " + price + ", " + stock + ", "

+ myPromoteCategory + ", " + myPromoteSite + ")";

myConnection = new SqlConnection(connString);

myCommand = new SqlCommand(strInsert, myConnection);

myConnection.Open();

int queryResult = myCommand.ExecuteNonQuery();

myConnection.Close();

BindProductList(Request.QueryString["subSectionId"]);

}

protected void EditItem_Click(object Source, EventArgs e)

{

}

String connString = ConfigurationSettings.AppSettings["connString"];

SqlConnection myConnection = new SqlConnection(connString);

string strUpdate = "UPDATE item "

+ "SET catalogSubSectionId=" + Request.QueryString["subSectionId"]

+ ", itemName='" + itemName + "', itemShortDescription='" + shortDesc

+ "', itemLongDescription='" + longDesc + "', itemSmallImage='"

+ smallImg + "', itemLargeImage='" + largeImg + "', itemPrice=" + pric

+ ", itemStock=" + stock + ", itemPromoteCategory=" + myPromoteCategor

+ ", itemPromoteSite=" + myPromoteSite + ""

+ "WHERE itemId=" + Request.QueryString["itemId"];

SqlCommand myCommand = new SqlCommand(strUpdate, myConnection);

myConnection.Open();

int queryResult = myCommand.ExecuteNonQuery();

myConnection.Close();

Response.Redirect("admin_item.aspx?subSectionId=" + Request.QueryString["subSectio

Response.End();

protected void DeleteItem_Click(object Source, EventArgs e)

{

if (Request.QueryString["subSectionId"] != null &&

Request.QueryString["itemId"] != null)

{

String connString = ConfigurationSettings.AppSettings["connString"];

SqlConnection myConnection = new SqlConnection(connString);

string strDelete = "DELETE FROM item WHERE itemId=" +

Request.QueryString["itemId"];

SqlCommand myCommand = new SqlCommand(strDelete, myConnection);

myConnection.Open();

int queryResult = myCommand.ExecuteNonQuery();

myConnection.Close();

Response.Redirect ("admin_item.aspx?subSectionId=" +

Request.QueryString["subSectionId"]);

Response.End();

}

Th e fin a l scr e e n s

This is how our adm inist rat ion page looks. We achieve t his final screen by including our user cont rols int o t he Web Form . This process is like bolt ing new equipm ent ont o t he sit e. This m odular design enables us t o r euse pieces of code and m akes t he building process m uch m ore m odular.

This screen ( below) shows t he Web Form m aking use of t he

uc_admin_item.ascx

and t he

uc_admin_item.ascx

user cont rols t o display t he list of m enus and t he list of it em s in t he cat egor y, as w ell as t he add new form .

The it em list and Add feat ure:

The Edit / Delet e page:

Se t t in g u p se cu r it y for y ou r se r v e r

A very im port ant aspect t hat m ust be solved befor e you expect t o ask for users' privat e infor m at ion is secur ing your server's connect ion t o t he I nt ernet .

As inform at ion t ravels from t he user's com put er t o your server t hrough t he I nt ernet w ires, it is exposed t o m alicious users t hat could " sniff" int o t he dat a and ret rieve som e vit al inform at ion like credit card num bers.

im port ant inform at ion is t r ansm it t ed bet w een t he client and t he host .

For m ore inform at ion on encrypt ion, please see Richard Conw ay's art icle on Crypt ography - part 1 (ht t p: / / w w w .cshar pt oday.com / cont ent / ar t icles/ 20010823.asp) and part 2

(ht t p: / / w w w .cshar pt oday.com / cont ent / ar t icles/ 20010830.asp) .

This diagram show s t he effect s of having an encrypt ed channel t o t ransm it dat a. The sniffer is unable t o ret rieve useful inform at ion from t he w ires bet ween t he server and your client s.

Now t hat w e know how encrypt ion w orks, w e need t o incorporat e t his encrypt ion for our sit e. We get t his encrypt ion key from a t hird part y vendor, for exam ple Verisign (ht t p: / / w ww.verisign.com) . I nst allat ion of t he key is ver y st r aight forw ard, and Ver isign provides com plet e w alkt hroughs at

ht t p: / / w ww.verisign.com / product s/ sit e/ index.ht m l. Once t he key is up and running in your ser ver , you w ill only need t o redirect your Web Form s t o use ht t ps w here vit al inform at ion is t r ansm it t ed.

z Creat e an encrypt ion key for your server.

z Request t he act ivat ion of your encrypt ion key from Verisign. z I nst all t he key int o your server and configure I I S t o m ake use of it .

z Rout e you im port ant inform at ion t hrough ht t ps by m aking your post / get form s go t hrough ht t ps: / / yourser ver.com / t est .aspx, inst ead of j ust ht t p: / / yourserver.com / t est .aspx.

Det ails on t he first t hree st eps are available in t he Ver isign sit e at t he URL pr ovided above. This includes a det ailed st ep by st ep guide t o inst alling a SSL key t o your server.

Re ce iv in g pa y m e n t fr om cu st om e r s

So w e have a nice online st or e, w e have a secur e connect ion t o pr ot ect our cust om ers, but w e ar e st ill m issing t he part t hat lead us t o build an online st ore in t he first place! We need t o receive paym ent for t he product s w e are selling.

There are m any w ays t o do t his. I n t he early days, w e w ould j ust receive t he raw dat a for t he order and process it m anually. This involved shipping and handling t he product , and perform ing a charge t o t he cr edit car d, usually w it h a regular credit card m erchant , by forcing a t ransact ion w it h t he num ber pr ovided by t he client .

Wit h t oday's t echnology, w e have m or e possibilit ies. We w ill discuss a couple of approaches t hat are available from t hird part ies on t he Web. These services can be grouped as follow s:

z Services t hat receive inform at ion from you sit e for processing

z Services t hat provide special API s t o handle t he t ransact ions wit hin your syst em .

Se r v ice s t h a t r e ce iv e in for m a t ion fr om y ou r sit e for pr oce ssin g

These kinds of services provide you wit h access t o a predefined infrast ruct ure w it hin t heir servers. This w orks in a w ay in w hich you send a form w it h specific fields t o t heir servers, and t hey t ake cont rol of t he w hole t ransact ion for you.

Paypal (ht t p: / / w ww.paypal.com) is a t hird part y vendor t hat offers t his service. I t does so by host ing an account w it h t hem , and post ing inform at ion t o t he appropriat e request handlers of t heirs. There you will be present ed wit h a st andard int erface ( for w hich you can alt er t he st yle) for handling t he pay t ransact ion. I f t he t ransact ion went out successfully, t here will be a new it em in your or der s list for you t o ship.

This is a very sim ple solut ion for t he developer , since you are free of im plem ent ing t he checkout syst em for your applicat ion. This is done ent irely on Paypal's servers, w hich m anage t he shipping calculat ion, credit card charge, securit y and order adm inist rat ion. A t our of t he ser vice can be found at t he follow ing URL

(ht t p: / / w ww.paypal.com / cgi- bin/ w ebscr?cm d= p/ xcl/ rec/ sc- out side) where det ails of t he buying process are present ed.

Det ails and price for t his kind of service vary from vendor t o vendor but t he concept is t o fr ee you fr om t he paym ent t rouble, and concent rat e in building a bet t er sit e t o at t r act m or e cust om ers.

Her e ar e t he pr os and cons for t his approach:

Pros:

z Easy t o im plem ent

z Sim ple, easy t o follow process

Cons:

z St andard user int erface

z None or lim it ed cust om izat ion on t he paym ent process

z Usually share servers wit h ot hers which leads t o a lim it ed num ber of t ransact ions and perform ance lim it at ions

Se r v ice s t h a t pr ov ide spe cia l API s t o h a n dle t h e t r a n sa ct ion s w it h in y ou r sy st e m .

Cybercash (ht t p: / / w ww.cybercash.com) is an exam ple of one of t hese services providers. I t gives you a set of API s and docum ent at ion, which you can use t o develop your checkout syst em . This put s t he responsibilit y on t he developm ent t eam , but also gives t hem t he possibilit y t o creat e t he solut ion t hat best fit s t he needs of t he client . For com plet e docum ent at ion on how t o develop a solut ion w it h Cybercash, go t o t his URL

(ht t ps: / / w w w .verisign.com / cgi- bin/ go.cgi?a= b183338890612000) .

Her e ar e t he pr os and cons for t his approach:

Pros:

z Com plex API gives you t he pow er t o develop your ow n solut ion

z Gives you direct int eract ion wit h t he syst em which gives you m uch m or e det ails on t he t r ansact ion. z Can have m ore cont rol over t he inst alled plat form and can scale t o lar ger sit es

Cons:

z You need t o develop t he w hole checkout syst em w hich can be expensiv e and t im e consum ing z Need for ser ver capable of support ing t he API and securit y.

W r a ppin g u p

We have looked at t he t w o basic approaches t hat are offered on t he w eb for paym ent solut ions. One set s you up w it h a pr edefined solut ion, w hich you use out of t he box. The ot her provides you w it h an API for you t o creat e your ow n solut ion.

Paypal is basically a packaged product t hat w orks out of t he box and pr ovides sat isfact ion t o m ost of our needs in a fast non- expensive w ay ( alt hough t here are som e sm all fees involved) . On t he ot her hand, services like Cybercash, w hich provide com plex API s for developm ent , gives us t he freedom of developing a m ore cust om ized solut ion.

The Cybercash t ype of services provides t he com plet e set of t ools needed t o creat e our applicat ion. This is best suit ed for pr oj ect s w here com plex order m anagem ent is required and need t o be developed specifically for t he occasion.

There are m any m ore providers of t his t ype of service out t here. We can see t hat t hey can range from a sim ple solut ion t o m ore robust st at e of t he art API s, so t he decision as t o which service t o choose lies wit hin t he developer's specific needs. You need t o balance t he pros and cons of t he vendor and evaluat e w hich is bet t er.

I n st a llin g t h e n e w v e r sion

Once w e have finished t he second part of our developm ent , we need t o deploy t he changes. We have t w o choices here, an upgrade or a new inst all.

The upgrade pat h will be needed if you int end t o im plem ent t he changes on t op of t he code from part 1 of t his art icle. This w ill have t o be a t ot ally new inst allat ion of t he sit e. Files ar e included for bot h pat hs in t he dow nloadable zip file.

Upgr a de

The st eps needed t o do t he upgrade are t he following:

z Run t he

upgrade.sql

script t o build t he new it em review t able, and add an adm inist rat or user w it h t he usernam e " adm in" and t he passw ord " adm in" .

z Copy t he

uc_item_rating.ascx

user cont rol t o t he root folder of your applicat ion t o be w it h t he rest of t he cont rols and Web Form s.

z Copy t he adm inist rat ion folder int o your root folder so t he files exist in

http://yourserver/yourapp/admin

.

N e w in st a ll

The st eps needed t o do a new inst all are as follow s:

z Once w e have cr eat ed t he dat abase, w e need t o run t he dat abase creat ion scr ipt

newinstall.sql

, which will t o m anage t he inform at ion in our online st ore. We have also discussed som e t hird part y services t o handle real-t im e online real-t ransacreal-t ions and I nreal-t ernereal-t securireal-t y.

Never t heless, t here is st ill m uch room for im provem ent .

One of t he coolest feat ures nowadays are cust om er m anagem ent syst em s. These incorporat e ideas present ed before like relat ed it em s, user account s, m ailing list s and adds upon t hem . I t is up t o you t o build t he appr opriat e cust om feat ures t o fit your needs.

As for t echnology, w e should also im plem ent som e best pract ices, like building upon com ponent s t o achieve code reuse, and also t he use of st ored procedures. All t his left out for sim plicit y.

Con clu sion s

This concludes a t w o- part art icle t hat show ed how t o creat e an online shopping cart from scrat ch. We have developed a cat alog / sect ion sit e t o display our product s. This w as furt her enhanced w it h an it em r at ing user cont rol in part t w o, and an adm inist r at ion console w as also developed t o m anage t he inform at ion of t he online st ore. We t hen discussed som e securit y and paym ent issues and analyzed t he resources needed t o solve t hem .

Our applicat ion is now capable of handling real w orld use and w ill provide a valuable fram ew ork for furt her developm ent .

z dat abase t able, m odifying z Dat aList cont rol

z DELETE st at em ent

z UPDATE st z user cont r o z VeriSign z w eb form s

H OM E | SI TE M AP | I N D EX | SEARCH | REFEREN CE | FEED BACK | AD V ERTI S

Ecom m erce Perform ance Securit y Sit e Design XML SO

Dat a Access/ ADO.NET Applicat ion

Developm ent Web Services Graphics/ Gam es Mobile Ot her Technologies

C# Today is brought t o you by Wrox Press (w w w .w rox.com) . Please see our t erm s and condit ions and privacy C# Today is opt im ised for Microsoft I nt ernet Explorer 5 brow sers.