1 / 37

Building E-Commerce and E-Learning Models

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.

chiku
Download Presentation

Building E-Commerce and E-Learning Models

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Building E-Commerce and E-Learning Models Hassanin M. Al-Barhamtoshy hassanin@kau.edu.sa

  2. 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

  3. 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.

  4. 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.

  5. What This Course Covers • In this course you’ll learn to • Build an online productcatalog 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.

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

  7. 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.

  8. Designing for Business • Phase I: Getting a Site Up • Design a database for storing a product catalog containing categories, subcategories, and products. • Write the SQL (Structured Query Language) code and C# code for accessing that data. • Build an attractive and functional user interface (UI) that allows for easy catalog browsing. • 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. • Integrate an external payment processor (with examples for PayPal) to allow visitors to order your products. • Provide a free-text search engine for the database. • Give the site’s administrators a private section of the site where they can modify the catalog online.

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

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

  11. The Balloon Shop

  12. 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 • The data tier

  13. A Simple Scenario

  14. A Simple Scenario

  15. Choosing Technologies and Tools: Using ASP.NET 2.0

  16. Choosing Technologies and Tools: Using SQL Server 2005

  17. 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.

  18. 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.

  19. 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 enabledebug mode for you. Feel free to look at the newly created web.configfile to see what has been done for you.

  20. Exercise: Creating the BalloonShop Project At this moment your project contains three files: • Default.aspxis your Web Form. • Default.aspx.csis the code-behind file of the Web Form. • web.configis the project’s configuration file.

  21. Implementing the Site Skeleton

  22. Exercise: Creating the BalloonShop Project You’ll implement this structure by creating the following: • A Master Page containing the general structure of all the web site’s pages, as shown in the Figure. • 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 • 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)

  23. Implementing the Site Skeleton The following figure shows a few of the Web User Controls you’ll create while developing BalloonShop.

  24. Building the First Page • 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.

  25. 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.

  26. 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>

  27. 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:ContentID="Content1" ContentPlaceHolderID="contentPlaceHolder" Runat="Server"> </asp:Content>

  28. 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:ContentID="Content1" ContentPlaceHolderID="contentPlaceHolder" Runat="Server"> </asp:Content> 8. Press F5 to execute the project.

  29. Building the First Page 8. Press F5 to execute the project.

  30. 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 createa 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.

  31. Adding the Header to the Main Page • 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). Right-click the root entry and select Add Folder ➤ Regular Folder. • 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 clickAdd 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.

  32. 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"> <imgsrc="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. To keep your site’s folder organized, you’ll createa 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.

  33. 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.

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

  35. 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

  36. 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.

  37. 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.

More Related