Building E-Commerce and

E-Learning Models
Hassanin M. Al-Barhamtoshy

hassanin@kau.edu.sa

How This Course Is Structured

Chapter 1: Starting an E-Commerce Site Chapter 2: Laying Out the Foundations Chapter 3: Creating the Product Catalog: Part I Chapter 4: Creating the Product Catalog: Part II Chapter 5: Searching the Catalog

Chapter 1: Starting an E-Commerce Site

Deciding Whether to Go Online. Making Money. Designing for Business

Phase I: Getting a Site UpNaming Service.
Phase II: Creating Your Own Shopping Cart Phase III: Processing Orders

The Balloon Shop Conclusion.

Deciding Whether to Go Online

Although there are hundreds of possible reasons to go online, they tend to fall into the following motivations

Getting More Customers

Making Customers Spend More

Reducing the Costs of Fulfilling Orders

Well look at each of these in the following sections.

What This Course Covers

In this course youll learn to Build an online product catalog that can be browsed and searched. Implement the catalog administration pages that allow adding, modifying, and removing products, categories, and departments. Create your own shopping basket and checkout in ASP.NET. Increase sales by implementing product recommendations. Handle payments using PayPal, DataCash, and VeriSign Payflow Pro. Implement a customer accounts system. Integrate with XML Web Services, such as Amazon E-Commerce Service.

Considering the Risks and Threats

Some risks are particularly relevant to e-commerce companies, such as Hacking and identity theft Credit-card scams Unreliable shipping services Hardware failures A B Request Code Software errors Changing laws
DATA
Transfer Data

DATA

E-Commerce Tutorial
e-commerce tutorial that covers taxation, shipping, and many of the issues youll face when designing your site at :
http://hotwired.lycos.com/webmonkey/e-business/ building/tutorials/tutorial3.html

Check this out before you start designing your own site.

Designing for Business

Phase I: Getting a Site Up
1. Design a database for storing a product catalog containing categories, subcategories, and products. 2. Write the SQL (Structured Query Language) code and C# code for accessing that data. 3. Build an attractive and functional user interface (UI) that allows for easy catalog browsing. 4. Implement an efficient error-reporting system that notifies the administrator in case the site runs into trouble and displays an Ooops message to the visitor when a critical error occurs. 5. Integrate an external payment processor (with examples for PayPal) to allow visitors to order your products. 6. Provide a free-text search engine for the database. 7. Give the sites administrators a private section of the site where they can modify the catalog online.

Designing for Business

Phase II: Creating Your Own Shopping Cart
1. Build your own ASP.NET (Active Server Pages .NET) shopping cart. 2. Pass a complete order through to PayPal for credit-card processing. 3. Create an orders administration page. 4. Implement a product recommendations system in the form of a customers who bought this product also bought list.

Designing for Business

Phase III: Processing Orders
1. Build a customer accounts module, so that customers can log in and retrieve their details every time they make an order. 2. Establish secure connections using SSL so that data sent by users is encrypted on its travels across the Internet. 3. Authenticate and charge credit cards using third-party companies such as DataCash and VeriSign, and their XML (Extensible Markup Language) web services. 4. Store credit-card numbers securely in a database. 5. Learn how to integrate the Amazon E-Commerce Service into your web site.

The Balloon Shop

The Magic of the Three-Tier Architecture

The three-tier architecture has become popular today because it answers most of the problems discussed so far by splitting an applications functionality unit into three logical tiers: The presentation tier The business tier Presentation Tier (Layer) The data tier
Business Tier (Layer)

Data Tier (Layer)

A Simple Scenario

A Simple Scenario

Choosing Technologies and Tools: Using ASP.NET 2.0

Choosing Technologies and Tools: Using SQL Server 2005

Exercise: Creating the BalloonShop Project

Follow the following steps to create the ASP.NET Web Site.

Start Visual Studio.NET 2005 Choose File New. Select Web Site.

Exercise: Creating the BalloonShop Project

Choose ASP.NET Web Site. Select HTTP at Location. For the purpose of this exercise, were creating the project in the http://localhost/BalloonShop location. Click OK. Visual Studio now creates the new project in the BalloonShop folder you specified.

Exercise: Creating the BalloonShop Project Execute the project in debug mode by pressing F5. At this point, Visual Web Developer will complain (as shown in Figure) that it cant debug the project as long as debugging is not enabled in web.config. (actually, at this point, the web.config file doesnt even exist). Click OK to allow Visual Studio to enable debug mode for you. Feel free to look at the newly created web.config file to see what has been done for you.

Exercise: Creating the BalloonShop Project

At this moment your project contains three files: 1. Default.aspx is your Web Form. 2. Default.aspx.cs is the code-behind file of the Web Form. 3. web.config is the projects configuration file.

Implementing the Site Skeleton

Exercise: Creating the BalloonShop Project

Youll implement this structure by creating the following: 1. A Master Page containing the general structure of all the web sites pages, as shown in the Figure. 2. A number of Web Forms that use the Master Page to implement the various locations of the web site, such as the main page, the department pages, the search results page, and so on 3. A number of Web User Controls to simplify reusing specific pieces of functionality (such as the departments list box, the categories list box, the search box, the header, and so on)

Implementing the Site Skeleton

The following figure shows a few of the Web User Controls youll create while developing BalloonShop.

Building the First Page

1. 2. Click Website Add New Item (or press Ctrl+Shift+A). In the dialog box that opens, choose Master Page from the Visual Studio Installed Templates list. Choose Visual C# for the language, check the Place code in a separate file check box, and change the page name to BalloonShop.master (the default name MasterPage.master isnt particularly expressive). The Add New Item dialog box should now look like in the Figure.

Building the First Page

3. Click Add to add the new Master Page to the project. The new Master Page will be opened with some default code in Source View. You can see now the code, it is look like as in the Figure.

Building the First Page

4. Now switch again to Design View; you should see something like in the figure. If you havent changed the default behavior of Visual Web Developer, youll see that the ContentPlaceHolder object is marked with a little green arrow sign (which is probably hardly visible in the figure). This indicates that the control is marked to be executed at server-side (on the server). All server-side controls (including Labels, TextBoxes, and so on) on the page will be marked with the same green symbol. If you look at the HTML code of the ContentPlaceHolder, youll see the runat="server" clause:

<asp:ContentPlaceHolder ID="contentPlaceHolder" runat="server"> </asp:ContentPlaceHolder>

Building the First Page

5. Right-click Default.aspx in Solution Explorer and choose Delete. Confirm the deletion. 6. Right-click the project root in Solution Explorer and select Add New Item. Choose the Web Form template, leave its name as Default.aspx, make sure both check boxes Place code in separate file and Select Master Page are checked, verify that the language is Visual C#, and click Add. When asked for a Master Page file, choose BalloonShop.master and click OK. Your new page will be created with just a few lines of code, all the rest being inherited from the Master Page: <%@ Page Language="C#" MasterPageFile="~/BalloonShop.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Welcome to BalloonShop!" %> <asp:Content ID="Content1" ContentPlaceHolderID ="contentPlaceHolder" Runat="Server"> </asp:Content>

Building the First Page

7. Change the title of the page from Untitled Page to Welcome to BalloonShop! by either using the Properties window in Design View (see Figure 2-14) or by editing the code in Source View like this: <%@ Page Language="C#" MasterPageFile="~/BalloonShop.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Welcome to BalloonShop!" %> <asp:Content ID="Content1" ContentPlaceHolderID="contentPlaceHolder" Runat="Server"> </asp:Content>

8. Press F5 to execute the project.

Building the First Page

8. Press F5 to execute the project.

Adding the Header to the Main Page

After so much theory about how useful Web User Controls are, you finally get to create one. The Header control will populate the upper-right part of the main page and will look like as shown in the Figure bellow.

To keep your sites folder organized, youll create a separate folder for all the user controls. Having them in a centralized location is helpful, especially when the project grows and contains a lot of files.

Adding the Header to the Main Page

1. Make sure that the project isnt currently running (if it is, the editing capabilities are limited), and that the Solution Explorer window is visible (if it isnt, choose View Solution Explorer or use the default Ctrl+Alt+L shortcut). Rightclick the root entry and select Add Folder Regular Folder. 2. Enter UserControls as the name of the new folder, as shown in the figure.

3. Create the Header.ascx user control in the UserControls folder. Right-click UserControls in Solution Explorer and click Add New Item. In the form that appears, choose the Web User Control template and change the default name to Header.ascx. Leave the other options in place (as shown in Figure), and click Add.

Adding the Header to the Main Page

4. The Header Web User Control automatically opens in Source View. Modify the HTML code like this:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Header.ascx.cs" Inherits="Header" %> <p align="center"> <a href="Default.aspx"> <img src="Images/BalloonShopLogo.png" border="0"> </a> </p>
5. Open BalloonShop.master in Design View, drag Header.ascx from Solution Explorer, drop it near the Header text, and then delete the Header text from the cell.

Adding the Header to the Main Page

6. Click Debug Start (F5 by default) to execute the project. The web page will look like Figure 2-20.

Congratulations once again! Your web site has a perfectly working header!

Exercise: Creating a New SQL Server Database

1. In your Visual Web Developer project, make sure the Database Explorer window is open. If it isnt, you can either select View Database Explorer or press the default shortcut keys Ctrl+Alt+S. 2. In Server Explorer, right-click the Data Connections entry, and select Create New SQL Server Database. In the window that appears (see Figure), enter the name of the SQL Server instance where you want to create the database

Exercise: Creating a New SQL Server Database

If you installed SQL Server Express using the default options as shown in Appendix A, then your server name should be (local)\SqlExpress; in the installation process you are provided with the necessary data to connect to your database. Enter BalloonShop for the name of the new database. The figure shown bellow is used for Creating a new SQL Server database using Visual Web Developer Note Using Windows Authentication, your local Windows account will be used to log in to SQL Server. If you installed SQL Server yourself, youll have full privileges to SQL Server, and everything will run smoothly; otherwise, youll need to make sure youre provided with administrative privileges on the SQL Server instance. With SQL Server Authentication, you need to provide a username and password, but note that this authentication mode is disabled by default in SQL Server.

Downloading the Code

The code for this book is available for download in the Source Code area of the Apress web site: http://www.apress.com Unzip the file and open Welcome.html for installation details.