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
• We’ll look at each of these in the following sections.
•What This Course Covers
• In this course you’ll 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 you’ll 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 site’s 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 application’s
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, we’re 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
can’t debug the project as long as debugging is not enabled in
web.config. (actually, at this point, the web.config file doesn’t 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 project’s configuration file.
Implementing the Site Skeleton
Exercise: Creating the BalloonShop Project
You’ll implement this structure by creating the following:
1. A Master Page containing the general structure of all
the web site’s 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 you’ll
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 isn’t 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
haven’t changed the default behavior of Visual Web Developer, you’ll 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, you’ll 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 site’s folder organized, you’ll 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 isn’t currently running (if it is, the editing
capabilities are limited), and that the Solution Explorer window is visible (if it isn’t,
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 isn’t, 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, you’ll have full privileges to SQL Server, and everything will run smoothly;
otherwise, you’ll need to make sure you’re 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.