THE DESIGN AND IMPLEMENTATION OF AN E-COMMERCE SITE FOR ONLINE BOOK SALES. Swapna Kodali

Transcription

1 THE DESIGN AND IMPLEMENTATION OF AN E-COMMERCE SITE FOR ONLINE BOOK SALES By Swapna Kodali Project Report Submitted to the faculty of the University Graduate School in partial fulfillment of the requirements for the degree Master of Science in the Department of Computer and Information Sciences Indiana University South Bend May 2007 Committee Members: Dr. Hossein Hakimzadeh, Advisor Dr. Dana Vrajitoru Dr. Morteza Shafii Mousavi

2 ii

3 2007 Swapna Kodali All Rights Reserved iii

4 Abstract The business-to-consumer aspect of electronic commerce (e-commerce) is the most visible business use of the World Wide Web. The primary goal of an e-commerce site is to sell goods and services online. This project deals with developing an e-commerce website for Online Book Sale. It provides the user with a catalog of different books available for purchase in the store. In order to facilitate online purchase a shopping cart is provided to the user. The system is implemented using a 3-tier approach, with a backend database, a middle tier of Microsoft Internet Information Services (IIS) and ASP.NET, and a web browser as the front end client. In order to develop an e-commerce website, a number of Technologies must be studied and understood. These include multi-tiered architecture, server and client side scripting techniques, implementation technologies such as ASP.NET, programming language (such as C#, VB.NET), relational databases (such as MySQL, Access). This is a project with the objective to develop a basic website where a consumer is provided with a shopping cart application and also to know about the technologies used to develop such an application. This document will discuss each of the underlying technologies to create and implement an e-commerce website. iv

5 ACKNOWLEDGMENTS In completing this graduate project I have been fortunate to have help, support and encouragement from many people. I would like to acknowledge them for their cooperation. First, I would like to thank Dr.Hossein Hakimzadeh, my project advisor, for guiding me through each and every step of the process with knowledge and support. Thank you for your advice, guidance and assistance. I would also like to thank Dr.Shafii Mousavi and Dr.Dana Vrajitoru, my project committee members, who showed immense patience and understanding throughout the project and provided suggestions. Finally, I would like to dedicate this project to my parents, my husband Ram and my friends Kumar and Soumya, for their love, encouragement and help throughout the project. v

6 TABLE OF CONTENTS 1. INTRODUCTION LITERATURE REVIEW PROJECT DESIGN DATA MODEL Database Design PROCESS MODEL Functional Decomposition Diagram Data Flow Diagram (DFD) USER INTERFACE DESIGN IMPLEMENTATION TECHNOLOGIES INTERNET INFORMATION SERVICES (IIS) ASP.NET Authentication in ASP.NET MYSQL DATABASE INTEGRATING IIS AND ASP.NET INTEGRATING THE WEBSITE AND DATABASE WEB PAGE PROGRAMMING OPTIONS SERVER-SIDE PROCESSING CLIENT-SIDE PROCESSING WEB BASED APPLICATION DEVELOPMENT DATABASE CONNECTIVITY ADO.NET CONNECTING ASP.NET APPLICATION TO A DATABASE THE SHOPPING CART APPLICATION SEARCH FOR BOOKS REGISTRATION USER DETAILS SHOPPING CART PLACE AN ORDER CHECK OUT PURCHASE HISTORY TRANSACTIONS IN THE APPLICATION LIMITATIONS AND FUTURE DEVELOPMENT CONCLUSION BIBLIOGRAPHY vi

7 LIST OF FIGURES FIGURE 1 ENTITY RELATIONSHIP DIAGRAM (ERD)... 4 FIGURE 2 FUNCTIONAL DECOMPOSITION DIAGRAM FIGURE 3 CUSTOMER - BROWSE CONTEXT DFD FIGURE 4 CUSTOMER - BROWSE DETAILED DFD FIGURE 5 CUSTOMER SHOPPING CART CONTEXT DFD FIGURE 6 CUSTOMER - SHOPPING CART DETAILED DFD FIGURE 7 CUSTOMER - SHOPPING CART DETAILED DFD FIGURE 8 CUSTOMER - SHOPPING CART DETAILED DFD FIGURE 9 CUSTOMER AUTHENTICATION USERPROFILE DFD FIGURE 10 AUTHENTICATED USER-PURCHASE CONTEXT DFD FIGURE 11 CUSTOMER - AUTHENTICATION - PURCHASE DFD FIGURE 12 CUSTOMER - NEWUSERREGISTRATION DFD FIGURE 13 ADMINSTRATOR CONTEXT DFD FIGURE 14 ADMINISTRATOR DETAILED DFD FIGURE 15 MENU FIGURE 16 DISPLAY OF BOOKS PRESENT IN THE STORE FIGURE 17 FOR SEARCHING THE BOOKS IN THE STORE FIGURE 18 SHOPPING CART FOR THE USER FIGURE 19 REGISTRATION OF THE NEW USER FIGURE 20 AUTHENTICATION OF THE USER FIGURE 21 RELATION BETWEEN IIS AND ASP.NET FIGURE 22 WEB PAGE PROGRAMMING OPTIONS FIGURE 23 COMPILED SERVER PROGRAMS FLOWCHART FIGURE 24 ADO.NET ARCHITECTURE FIGURE 25 BOOK DETAILS FIGURE 26 SERACH FOR BOOKS FIGURE 27 NEW USER REGISTRATION FIGURE 28 USER DETAILS FIGURE 29 SHOPPING CART FIGURE 30 ORDER DETAILS FIGURE 31SHIPPING DETAILS FIGURE 32CHECK OUT FIGURE 33 ORDER CONFIRMATION FIGURE 34 UPDATED INVENTORY AFTER ORDER PLACEMENT FIGURE 35 PURCHASE HISTORY FIGURE 36 BOOK DETAILS FIGURE 37 ADMINISTRATOR - MODIFY BOOKS FIGURE 38 DETAILS ABOUT NEW BOOK FIGURE 39 UPDATED INVENTORY LIST OF TABLES TABLE 1PROCESSING TECHNOLOGY FOR DIFFERENT FILE EXTENSIONS TABLE 2 TRANSACTION ATTRIBUTES vii

8 1. Introduction E-commerce is fast gaining ground as an accepted and used business paradigm. More and more business houses are implementing web sites providing functionality for performing commercial transactions over the web. It is reasonable to say that the process of shopping on the web is becoming commonplace. The objective of this project is to develop a general purpose e-commerce store where any product (such as books, CDs, computers, mobile phones, electronic items, and home appliances) can be bought from the comfort of home through the Internet. However, for implementation purposes, this paper will deal with an online book store. An online store is a virtual store on the Internet where customers can browse the catalog and select products of interest. The selected items may be collected in a shopping cart. At checkout time, the items in the shopping cart will be presented as an order. At that time, more information will be needed to complete the transaction. Usually, the customer will be asked to fill or select a billing address, a shipping address, a shipping option, and payment information such as credit card number. An notification is sent to the customer as soon as the order is placed. 2. Literature Review Electronic Commerce (e-commerce) applications support the interaction between different parties participating in a commerce transaction via the network, as well as the management of the data involved in the process [2]. The increasing importance of e-commerce is apparent in the study conducted by researches at the GVU (Graphics, Visualization, and Usability) Center at the Georgia Institute of Technology. In their summary of the findings from the eighth survey, the researchers report that e-commerce is taking off both in terms of the number of users shopping as well as the total amount people are spending via Internet based transactions. 1

9 Over three quarters of the 10,000 respondents report having purchased items online. The most cited reason for using the web for personal shopping was convenience (65%), followed by availability of vendor information (60%), no pressure form sales person (55%) and saving time (53%). Although the issue of security remains the primary reason why more people do not purchase items online, the GVA survey also indicates that faith in the security of e- commerce is increasing. As more people gain confidence in current encryption technologies, more and more users can be expected to frequently purchase items online [11]. A good e-commerce site should present the following factors to the customers for better usability [11]: Knowing when an item was saved or not saved in the shopping cart. Returning to different parts of the site after adding an item to the shopping cart. Easy scanning and selecting items in a list. Effective categorical organization of products. Simple navigation from home page to information and order links for specific products. Obvious shopping links or buttons. Minimal and effective security notifications or messages. Consistent layout of product information. Another important factor in the design of an e-commerce site is feedback [4]. The interactive cycle between a user and a web site is not complete until the web site responds to a command entered by the user. According to Norman [5], "feedback--sending back to the user information about what action has actually been done, what result has been accomplished--is a well known concept in the science of control and information theory. Imagine trying to talk to someone when you cannot even hear your own voice, or trying to draw a picture with a pencil that leaves no mark: there would be no feedback". 2

10 Web site feedback often consists of a change in the visual or verbal information presented to the user. Simple examples include highlighting a selection made by the user or filling a field on a form based on a user's selection from a pull down list. Another example is using the sound of a cash register to confirm that a product has been added to an electronic shopping cart. Completed orders should be acknowledged quickly. This may be done with an acknowledgment or fulfillment page. The amount of time it takes to generate and download this page, however, is a source of irritation for many e-commerce users. Users are quick to attribute meaning to events. A blank page, or what a user perceives to be "a long time" to receive an acknowledgment, may be interpreted as "there must be something wrong with the order." If generating an acknowledgment may take longer than what may be reasonably expected by the user, then the design should include intermediate feedback to the user indicating the progress being made toward acknowledgment or fulfillment. Finally, feedback should not distract the user. Actions and reactions made by the web site should be meaningful. Feedback should not draw the user's attention away from the important tasks of gathering information, selecting products, and placing orders. 3. Project Design In order to design a web site, the relational database must be designed first. Conceptual design can be divided into two parts: The data model and the process model. The data model focuses on what data should be stored in the database while the process model deals with how the data is processed. To put this in the context of the relational database, the data model is used to design the relational tables. The process model is used to design the queries that will access and perform operations on those tables. 3

11 3.1 Data Model A data model is a conceptual representation of the data structures that are required by a database. The first step in designing a database is to develop an Entity-Relation Diagram (ERD). The ERD serves as a blue print from which a relational database maybe deduced. Figure 1 shows the ERD for the project and later we will show the transformation from ERD to the Relational model. Figure 1 Entity Relationship Diagram (ERD) In the ERD, a rectangle is used to represent a table and a diamond to represent the relationship between the entities. The cardinality is the frequency of a relationship between two entities. The types of cardinality are one to one (1:1), one to many (1:M), zero to many (0:M) and many to many (M:M). One to one means that every record in 4

12 entity A matches exactly one record in entity B and every record in B matches exactly one record in A. One to many means that every record in A matches zero or more records in B and every record in B matches exactly one record in A. If there is a one to many relationship between two entities, then these entities are represented as Associative Entities. In the Relational Database model, each of the entities will be transformed into a table. The tables are shown below along with the attributes. 5

13 3.1.1 Database Design In this section, the basic structure of the tables composing the database for the project are shown along with information about primary and foreign keys. Customer SNO NAME TYPE DESCRIPTION 1 UserID Varchar Primary key for Customer identification 2 Password Varchar Security for Customer 3 First_Name Varchar 4 Last_Name Varchar 5 Address Varchar 6 City Varchar 7 Zip Integer 8 State Varchar 9 Address Varchar 10 Phone_Number Varchar Books SNO NAME TYPE DESCRIPTION 1 InventoryID Integer Primary key for Inventory Identification, ISBN of a book 2 Book_Name Varchar 3 Author Varchar 5 Nr_books Integer 6 Price Double 6

14 State_Tax SNO NAME TYPE DESCRIPTION 1 State Name Varchar Primary key for State Identification 2 Sales Tax Rate Double Sales tax for each state Shopping_Cart_Items SNO NAME TYPE DESCRIPTION 1 ShoppingCartID Integer Primary key for Shopping Cart Identification 2 InventoryID Varchar Foreign key to Inventory 3 Price Double 4 Date Date 5 UserID Varchar Foreign key to Customer 6 Quantity Integer Order_Details SNO NAME TYPE DESCRIPTION 1 OrderID Integer Primary key for Order identification 1 UserID Char Foreign key to Customer 2 Receiver s Name Char If order is to be sent to other address rather than to the customer, we need that address 3 Address Char 4 City Char 5 Zip Integer 6 State Char Foreign key to State Tax 7 Type of Shipping Char Foreign key to Shipping Type 8 Date of Purchase Date 7

15 Shipping_Type SNO NAME TYPE DESCRIPTION 1 Type of Shipping Varchar Primary key to define type of shipping 2 Price Double 3 Approximate days for delivery Integer Credit_Card_Details SNO NAME TYPE DESCRIPTION 1 Credit Username Varchar Primary key for Customer Identification 2 Credit Card Varchar Number 3 Card Type Varchar Master Card, Visa, Discover 4 CVV Number Integer Number present on the back of the card for extra security 5 Expiry Date Date 6 UserID Varchar Foreign key to Customer Book_Review SNO NAME TYPE DESCRIPTION 1 InventoryID Varchar ISBN of the book on which the review is written 2 Reviews Varchar Review on the book 3 Rating Varchar Rating given to the book in a scale of 5 4 Review Date Date 5 User Name Varchar Name of the user providing the review 8

16 Purchase_History SNO NAME TYPE DESCRIPTION 1 UserID Varchar Primary key for Customer Identification 2 InventoryID Varchar Book purchased by the user 3 Date of Purchase Date 4 OrderID Integer Foreign key to Order_details 5 Quantity Integer 6 Price Double 9

17 3.2. Process Model A Process Model tells us about how the data is processed and how the data flows from one table to another to gather the required information. This model consists of the Functional Decomposition Diagram and Data Flow Diagram Functional Decomposition Diagram A decomposition diagram shows a top-down functional decomposition of a system and exposes the system's structure. The objective of the Functional Decomposition is to break down a system step by step, beginning with the main function of a system and continuing with the interim levels down to the level of elementary functions. The diagram is the starting point for more detailed process diagrams, such as data flow diagrams (DFD). Figure 2 shows the Functional Decomposition Diagram for this project. 10

18 Figure 2 Functional Decomposition Diagram 11

19 3.2.2 Data Flow Diagram (DFD) Data Flow Diagrams show the flow of data from external entities into the system, and from one process to another within the system. There are four symbols for drawing a DFD: 1. Rectangles representing external entities, which are sources or destinations of data. 2. Ellipses representing processes, which take data as input, validate and process it and output it. 3. Arrows representing the data flows, which can either, be electronic data or physical items. 4. Open-ended rectangles or a Disk symbol representing data stores, including electronic stores such as databases or XML files and physical stores such as filing cabinets or stacks of paper. Figures 3-14 are the Data Flow Diagrams for the current system. Each process within the system is first shown as a Context Level DFD and later as a Detailed DFD. The Context Level DFD provides a conceptual view of the process and its surrounding input, output and data stores. The Detailed DFD provides a more detailed and comprehensive view of the interaction among the sub-processes within the system. 12

20 Customer-Browse Context DFD Figure 3 Customer - Browse Context DFD Customer-Browse Detailed DFD Figure 4 Customer - Browse Detailed DFD 13

21 Customer - ShoppingCart Context DFD Customer - ShoppingCart Detailed DFD Figure 5 Customer Shopping Cart Context DFD Figure 6 Customer - Shopping Cart Detailed DFD 14

22 Customer-Authentication Context DFD Figure 7 Customer - Shopping Cart Detailed DFD Customer-Authentication-PurchaseHistory DFD Figure 8 Customer - Shopping Cart Detailed DFD 15

23 Customer-Authentication-UserProfile DFD Figure 9 Customer Authentication UserProfile DFD Authenticated User-Purchase Context DFD Figure 10 Authenticated User-Purchase Context DFD 16

24 Authenticated User-Purchase DFD Figure 11 Customer - Authentication - Purchase DFD 17

25 Customer-NewUserRegistration DFD Administrator Context DFD Figure 12 Customer - NewUserRegistration DFD Figure 13 Administrator Context DFD Administrator Detailed DFD Figure 14 Administrator Detailed DFD 18

26 3.3 User Interface Design Before implementing the actual design of the project, a few user interface designs were constructed to visualize the user interaction with the system as they browse for books, create a shopping cart and purchase books. The user interface design will closely follow our Functional Decomposition Diagram (Figure 2). Figures show the initial designs of the web pages. Figure 15 Menu Figure 16 Display of Books present in the store 19

27 Figure 17 For searching the books in the store Figure 18 Shopping Cart for the user 20

28 Figure 19 Registration of the new user 21

29 Figure 20 Authentication of the user 22

30 4. Implementation Technologies The objective of this project is to develop an online book store. When the user types in the URL of the Book Store in the address field of the browser, a Web Server is contacted to get the requested information. In the.net Framework, IIS (Internet Information Service) acts as the Web Server. The sole task of a Web Server is to accept incoming HTTP requests and to return the requested resource in an HTTP response. The first thing IIS does when a request comes in is to decide how to handle the request. Its decision is based upon the requested file's extension. For example, if the requested file has the.asp extension, IIS will route the request to be handled by asp.dll. If it has the extension of.aspx,.ascx, etc, it will route the request to be handled by ASP.NET Engine. Figure 21 Relation between IIS and ASP.NET The ASP.NET Engine then gets the requested file, and if necessary contacts the database through ADO.NET for the required file and then the information is sent back to the Client s browser. Figure 21 shows how a client browser interacts with the Web server and how the Web server handles the request from client. 23

31 4.1. Internet Information Services (IIS) IIS is a set of Internet based services for Windows machines. Originally supplied as part of the Option Pack for Windows NT, they were subsequently integrated with Windows 2000 and Windows Server 2003). The current (Windows 2003) version is IIS 6.0 and includes servers for FTP (a software standard for transferring computer files between machines with widely different operating systems), SMTP (Simple Mail Transfer Protocol, is the de facto standard for transmission across the Internet) and HTTP/HTTPS (is the secure version of HTTP, the communication protocol of the World Wide Web) [12]. Features: The web server itself cannot directly perform server side processing but can delegate the task to ISAPI (Application Programming Interface of IIS) applications on the server. Microsoft provides a number of these including ones for Active Server Page and ASP.NET. Compatibility: Internet Information Services is designed to run on Windows server operating systems. A restricted version that supports one web site and a limited number of connections is also supplied with Windows XP Professional. Microsoft has also changed the server account that IIS runs on. In versions of IIS before 6.0, all the features were run on the System account, allowing exploits to run wild on the system. Under 6.0 many of the processes have been brought under a Network Services account that has fewer privileges. In particular this means that if there were an exploit on that feature, it would not necessarily compromise the entire system. 24

32 4.2 ASP.NET ASP.NET is a programming framework built on the common language runtime that can be used on a server to build powerful Web applications. ASP.NET has many advantages both for programmers and for the end users because it is compatible with the.net Framework. This compatibility allows the users to use the following features through ASP.NET: a) Powerful database-driven functionality: ASP.NET allows programmers to develop web applications that interface with a database. The advantage of ASP.NET is that it is object-oriented and has many programming tools that allow for faster development and more functionality. b) Faster web applications: Two aspects of ASP.NET make it fast -- compiled code and caching. In ASP.NET the code is compiled into "machine language" before a visitor ever comes to the website. Caching is the storage of information in memory for faster access in the future. ASP.NET allows programmers to set up pages or areas of pages that are commonly reused to be cached for a set period of time to improve the performance of web applications. In addition, ASP.NET allows the caching of data from a database so the website is not slowed down by frequent visits to a database when the data does not change very often. c) Memory leak and crash protection: ASP.NET automatically recovers from memory leaks and errors to make sure that the website is always available to the visitors. ASP.NET also supports code written in more than 25.NET languages (including VB.NET, C#, and Jscript.Net). This is achieved by the Common Language Runtime (CLR) compiler that supports multiple languages. 25

33 Authentication in ASP.NET There are two separate authentication layers in an ASP.NET application. All requests flow through IIS before they are handed to ASP.NET, and IIS can decide to deny access before ASP.NET even knows about the request. Here is how the process works [14]: 1. IIS checks to see if an incoming request is coming from an IP address that is allowed access to the domain. If not, the request is denied. 2. IIS performs its own user authentication, if it is configured to do so. By default, IIS allows anonymous access and requests are authenticated automatically. 3. When a request is passed from IIS to ASP.NET with an authenticated user, ASP.NET checks to see whether impersonation is enabled. If so, ASP.NET acts as though it were the authenticated user. If not, ASP.NET acts with its own configured account. 4. Finally, the identity is used to request resources from the operating system. If all the necessary resources can be obtained, the user's request is granted; otherwise the request is denied. 26

34 4.3. MySQL Database In this project, MySQL is used as the backend database. MySQL is an opensource database management system. The features of MySQL are given below: MySQL is a relational database management system. A relational database stores information in different tables, rather than in one giant table. These tables can be referenced to each other, to access and maintain data easily. MySQL is open source database system. The database software can be used and modify by anyone according to their needs. It is fast, reliable and easy to use. To improve the performance, MySQL is multithreaded database engine. A multithreaded application performs many tasks at the same time as if multiple instances of that application were running simultaneously. In being multithreaded MySQL has many advantages. A separate thread handles each incoming connection with an extra thread that is always running to manage the connections. Multiple clients can perform read operations simultaneously, but while writing, only hold up another client that needs access to the data being updated. Even though the threads share the same process space, they execute individually and because of this separation, multiprocessor machines can spread the thread across many CPUs as long as the host operating system supports multiple CPUs. Multithreading is the key feature to support MySQL s performance design goals. It is the core feature around which MySQL is built. MySQL database is connected to ASP.NET using an ODBC driver. Open Database Connectivity (ODBC) is a widely accepted application-programming interface (API) for database access. The ODBC driver is a library that implements the functions supported by ODBC API. It processes ODBC function calls, submits SQL requests to MySQL server, and returns results back to the application. If necessary, the driver modifies an application's request so that the request conforms to syntax supported by MySQL. 27

35 4.4. Integrating IIS and ASP.NET When a request comes into IIS Web server its extension is examined and, based on this extension, the request is either handled directly by IIS or routed to an ISAPI extension. An ISAPI extension is a compiled class that is installed on the Web server and whose responsibility is to return the markup for the requested file type. By default, IIS handles the request, and simply returns the contents of the requested file [13]. This makes sense for static files, like images, HTML pages, CSS files, external JavaScript files, and so on. For example, when a request is made for a.html file, IIS simply returns the contents of the requested HTML file. For files whose content is dynamically generated, the ISAPI extension configured for the file extension is responsible for generating the content for the requested file. For example, a Web site that serves up classic ASP pages has the.asp extension mapped to the asp.dll ISAPI extension. The asp.dll ISAPI extension executes the requested ASP page and returns its generated HTML markup. If the Web site serves up ASP.NET Web pages, IIS has mapped the.aspx to aspnet_isapi.dll, an ISAPI extension that starts off the process of generating the rendered HTML for the requested ASP.NET Web page. The aspnet_isapi.dll ISAPI extension is a piece of unmanaged code. That is, it is not code that runs in the.net Framework. When IIS routes the request to the aspnet_isapi.dll ISAPI extension, the ISAPI extension routes the request onto the ASP.NET engine, which is written in managed code - managed code is code that runs in the.net Framework. The ASP.NET engine is strikingly similar to IIS in many ways. Just like IIS has a directory mapping file extensions to ISAPI extensions, the ASP.NET engine maps file extensions to HTTP handlers. An HTTP handler is a piece of managed code that is responsible for generating the markup for a particular file type. 28

36 4.5. Integrating the Website and Database Customers ordering from an e-commerce website need to be able to get information about a vendor s products and services, ask questions, select items they wish to purchase, and submit payment information. Vendors need to be able to track customer inquiries and preferences and process their orders. So a well organized database is essential for the development and maintenance of an e-commerce site [3]. In a static Web page, content is determined at the time when the page is created. As users access a static page, the page always displays the same information. Example of a static Web page is the page displaying company information. In a dynamic Web page, content varies based on user input and data received from external sources. We use the term data-based Web pages to refer to dynamic Web pages deriving some or all of their content from data files or databases. A data-based Web page is requested when a user clicks a hyperlink or the submit button on a Web page form. If the request comes from clicking a hyperlink, the link specifies either a Web server program or a Web page that calls a Web server program. In some cases, the program performs a static query, such as Display all items from the Inventory. Although this query requires no user input, the results vary depending on when the query is made. If the request is generated when the user clicks a form s submit button, instead of a hyperlink, the Web server program typically uses the form inputs to create a query. For example, the user might select five books to be purchased and then submit the input to the Web server program. The Web server program then services the order, generating a dynamic Web page response to confirm the transaction. In either case, the Web server is responsible for formatting the query results by adding HTML tags. The Web server program then sends the program s output back to the client s browser as a Web page. 29

37 5. Web Page Programming Options An e-commerce organization can create data-based Web pages by using serverside and client-side processing technologies or a hybrid of the two. With server-side processing, the Web server receives the dynamic Web page request, performs all processing necessary to create the page, and then sends it to the client for display in the client s browser. Client-side processing is done on the client workstation by having the client browser execute a program that interacts directly with the database. Figure 22 Web page programming options 30

38 Figure 22 (reproduced from [3]) outlines commonly used server-side, client-side, and hybrid Web and data processing technologies; client-side scripts are in dashed lines to indicate they are unable to interact directly with a database or file but are used to validate user input on the client, then send the validated inputs to the server for further processing Server-side processing. Generally dynamic or data-driven Web pages use HTML forms to collect user inputs, submitting them to a Web server. A program running on the server processes the form inputs, dynamically composing a Web page reply. This program, which is called, servicing program, can be either a compiled executable program or a script interpreted into machine language each time it is run. Compiled server programs. When a user submits HTML-form data for processing by a compiled server program, the Web Server invokes the servicing program. The servicing program is not part of the Web server but it is an independent executable program running on the Web server; it processes the user input, determines the action which must be taken, interacts with any external sources (Eg: database) and finally produces an HTML document and terminates. The Web server then sends the HTML document back to the user s browser where it is displayed. Figure 23 shows the flow of HTTP request from the client to the Web server, which is sent to the servicing program. The program creates an HTML document to be sent to the client browser. Figure 23 Compiled server programs flowchart 31

39 Popular languages for creating compiled server programs are Java, Visual Basic, and C++, but almost any language that can create executable programs can be used, provided that it supports commands used by one of the protocols that establish guidelines for communication between Web servers and servicing programs. The first such protocol, introduced in 1993, for use with HTML forms was the Common Gateway Interface (CGI); many servicing programs on Web sites still use CGI programs. However, a disadvantage of using CGI-based servicing programs is that each form submitted to a Web server starts its own copy of the servicing program on the Web server. A busy Web server is likely to run out of memory when it services many forms simultaneously; thus, as interactive Web sites have gained popularity, Web server vendors have developed new technologies to process form inputs without starting a new copy of the servicing program for each browser input. Examples of these technologies for communicating with Web servers include Java Servlets [8] and Microsoft s ASP.NET [7]; they allow a single copy of the servicing program to service multiple users without starting multiple instances of the program. ASP.NET has introduced many new capabilities to server-side Web programming, including a new category of elements called server controls that generate as many as 200 HTML tags and one or more JavaScript [9] functions from a single server control tag. Server controls support the processing of user events, such as clicking a mouse or entering text at either the client browser or the Web server. Server controls also encourage the separation of programming code into different files and/or areas from the HTML tags and text of a Web page, thus allowing HTML designers and programmers to work together more effectively. Server-side scripts. Web-based applications can also use server-side scripts to create dynamic Web pages that are able to retrieve and display information from a backend database and modify data records. The processing architecture is the same as the processing architecture used for compiled server programs (Figure 21), except the Web 32

40 server processing is performed through and interpreted script rather than a compiled program. If needed, a developer can have a single Web server process a variety of scripts written with any or all of these technologies. The Web server knows which script interpreter to invoke by taking note of the requesting script s file extension. Table 1 below demonstrates some commonly used extensions and the related technologies. Table 1Processing Technology for different File Extensions File Extension.asp.aspx.js.php.vbp Processing technology interpreter/compiler Microsoft Active Server Page Microsoft ASP.NET web page Microsoft Scripting Language JScript file extension PHP Script Visual Basic Project Programs created through ASP.NET are not backward compatible with ASP scripts created through the original ASP server-side scripting technology [10]; upgrading older ASP scripts to ASP.NET requires substantial revision. ASP and ASP.NET programs can, however, run on the same Web server, as ASP.NET programs are distinguished with.aspx file extensions. Server-side hybrid processing. Compiled server-side programs offer two main advantages: First, they are compiled and stored in a machine-readable format; so they usually run faster than scripts. Second, compiled programs are usually created in integrated development environments that provide debugging utilities. The advantage of using scripts is that their modification requires only a text editor rather than installation of an associated development environment. 33

41 Hybrid server-side programming strives to combine the advantages of compiled server-side programs and server-side scripts; a server-side script is created but not compiled. The first time a user accesses a Web page calling the script, the script is compiled into machine-readable format and stored as an executable file. With this approach, the developer works with ordinary text files and does not need to install an integrated programming development environment to modify the script. Performance is improved because the program does not need to be translated into machine language each time it runs. In 1997, Sun Microsystems introduced Java Server Page (JSP) technology. Unlike ASP scripts, JSP source code is automatically compiled into machine-readable format the first time a user accesses it. The Web server saves the compiled JSP program, using it (rather than the source code) the next time anyone else tries to access this particular JSP. This scheme reduces both the processing performed and the time the user has to wait to view a response from the Web server. If a programmer modifies the JSP source code, the Web server notes that the source code file has been modified since the compiled version was created, compiling and saving the compiled program the next time a user access the page. In 2002, Microsoft introduced ASP.NET which is very similar to JSP with the additional flexibility that many different source languages such as VB, C#, J# can be used to implement web based applications. Both ASP.NET and JSP are considered as Hybrid server side technologies. ASP.NET is designed to work under the Windows/Server and IIS web server environment. JSP is more portable as it works in most Operating Environments including Windows and Linux. Choosing server-side processing. From a performance standpoint, because compiled programs execute faster than scripts, busy Web servers should use compiled server-side programs. From a development standpoint, scripts are easier to create, modify and install without having to stop the operation of the web application. 34

42 5.2. Client-Side Processing. Client-side Web page processing is achievable through compiled programs downloaded, installed, and executed on the client workstation or by creating scripts with the HTML Web page commands interpreted by the client browser. Downloading and running compiled programs on client workstations. When a user clicks a hyperlink on a Web page associated with a compiled client-side program, the user s browser must have the ability to run the executable program file; this program interacts with the user, sending and retrieving data from a database server as needed. Many times, the user is asked to install certain ActiveX components to view some animations or play games. This new component plugs in into the existing system, thus extending the functionality of the system. Java Applets are another example of compiled programs on client workstations. An applet is a program written in the Java programming language that can be included in an HTML page, much in the same way an image is included in a page. When we use a Java technology-enabled browser to view a page that contains an applet, the applet's code is transferred to our system and executed by the browser Client-side scripts. In a client-side script, source code written in such languages as JavaScript and VBScript is embedded in an HTML document, along with the static HTML text; it is placed within delimiter tags to indicate to the user s browser that the text is code that must be interpreted. If the user s browser is able to recognize and interpret the code, it is processed. If the browser is unable to recognize and interpret the code, it is displayed as text on the Web page. Although basic client-side scripts cannot be used by a Web page to interact with a remote database, they are often used to validate user inputs entered on HTML forms submitted for processing by a server-side program; for example, a script running on a 35

43 client workstation might check the inputs users submit to a Web page to make sure they entered all required data and appropriate data values. This approach avoids transmitting inputs to the Web server that are incomplete or include errors, while offloading error checking and handling from the Web server program to the client workstation. Client-side scripts can also be used to create advanced Web page features, including: animations, calculations, playing sound and video, and image maps allowing users to move their cursors over an image and click to access different Web page links. JavaScript is the most commonly used client-side scripting language and is supported by most browsers. Use of a client-side scripting language depends on the user s operating system, browser platforms, and developer expertise. If the Web pages in question are to be accessed by a variety of users over the Internet, JavaScript is probably better than VBScript, as JavaScript is the only scripting language able to run on nearly all browsers. If the Web pages are to be accessed on an intranet and if the organization has standardized on Microsoft s browser and Web server, VBScript is a satisfactory scripting language for creating client-side scripts. 6. Web Based Application Development The Web is built on the HyperText Transfer Protocol. HTTP is a client/server request/reply protocol that is stateless. That is, the protocol does not make any association between one transaction and another; e.g.: time since the last transaction, type or client involved in the last transaction, what data was exchanged between the client and the server. As far as HTTP is concerned, each transaction is a discrete event. But this is not what we want in a shopping cart application because we need to preserve the user s shopping selection as they proceed with their purchase, in addition it is useful to have the access to their past purchase history and personal preferences. 36

44 Carrying information from one page to another can be achieved by several ways, such as Cookies, Session variables, Post variables, etc. A cookie is a small file that has a maximum age, a domain and path of applicability, and a security specification. Any time a server sends a response to a client, it may include one or more Set-Cookie headers. When a client receives a Set-cookie header, it stores the content of the header and the cookie, for later use. In our application, every time the client selects an item to put in the shopping cart, the server can send a Set- Cookie whose content is the ID of the item, and whose domain and path of applicability are the URL of the order/payment page. Then, when the user goes to order and pay, the client will send the Cookie headers for each of the selected items. Upon receiving this request, the server can parse the supplied cookies and charge the user appropriately for the selected items. Cookies may also be used to identify the users. However, cookies are very insecure to use since they are transmitted as plain text and the server has no control over how cookies are stored in at the client s side. Another approach is based on a notion of session ID. These notions provide means for the server to track the requests of a client through a session, but unlike cookies, which are stored on the client, Session variables are stored on the Server. A session starts when a user logs in and ends when they log off from the website. The Session object is used to store information about, or change settings for a user session. Variables stored in the Session object hold information about one single user, and are available to all pages in one application. Common information stored in session variables are name, id, and preferences. The server creates a new Session object for each new user, and destroys the Session object when the session expires. information. In this project, the concept of session variables will be used for maintaining state 37

45 7. Database Connectivity In e-commerce applications it is very typical for the Web server to contact the database to get information as needed. ASP.NET uses a technology called ActiveX Data Objects.NET (ADO.NET) to connect to the database. 7.1 ADO.NET Classic ASP pages used ActiveX Data Objects (ADO) to access and modify databases. ADO is a programming interface used to access data. This method was efficient and fairly easy for developers to learn and implement. However, ADO suffered from a dated model for data access with many limitations, such as the inability to transmit data so it is easily and universally accessible. Coupled with the move from standard SQL databases to more distributed types of data (such as XML), Microsoft introduced ADO.NET. Although ADO.NET is known as the next evolution of ADO, it is very different from its predecessor. Whereas ADO was connection-based, ADO.NET relies on short, XML message-based interactions with data sources. This makes ADO.NET much more efficient for Internet-based applications. A fundamental change from ADO to ADO.NET was the adoption of XML for data exchanges. XML is a text-based markup language, similar to HTML that presents an efficient way to represent data. This allows ADO.NET to reach and exchange. It also gives ADO.NET much better performance because XML data is easily converted to and from any type of data. Another major change is the way ADO.NET interacts with databases. ADO requires locking of database resources and lengthy connections for its applications, but ADO.NET does not; it uses disconnected data sets, which eliminates lengthy connections 38

46 and database locks. This makes ADO.NET much more scalable because users are not in contention for database resources. In ADO.NET there are two core objects that allow us to work with data initially: the DataReader and the DataSet. In any.net data access page, before we connect to a database, we first have to import all the necessary namespaces that will allow us to work with the objects required. Namespace in.net is a set of classes that can be used while creating an application. The.NET Framework has about 3,500 classes which can be accessed through a namespace. The application will be using a technology known as Open DataBase Connectivity (ODBC) to access the database; therefore we must first import necessary namespaces. Below is a sample namespace declaration used by.net. <%@ Import Namespace="System" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.Odbc" %> After all the necessary namespaces are imported, a connection to the database is made. OdbcConnetion odbccon = new OdbcConnection ("DRIVER = {MySQL ODBC 3.51 Driver}; SERVER=localhost; DATABASE=project; UID=root; PASSWORD=pwd"); odbccon.open(); The above statement creates a connection to the database with an OdbcConnection object. This object tells ASP.NET where to go to get the data it needs. Since the data is stored in the same computer as the application, the SERVER is given as localhost. Next we open the connection object. Listed below are the common connection object methods we could work with: 39

47 Open - Opens the connection to our database Close - Closes the database connection Dispose - Releases the resources on the connection object. Used to force garbage collecting, ensuring no resources are being held after our connection is used. State - Tells you what type of connection state your object is in, often used to check whether the connection is still using any resources. Once the connection is made, in order to access the data in a database, ADO.NET relies on two components: DataSet and Data Provider [20]. These components are explained below. DataSet The dataset is a disconnected, in-memory representation of data. It can be considered as a local copy of the relevant portions of the database. The DataSet resides in memory and the data in it can be manipulated and updated independent of the database. If necessary, changes made to the dataset can be applied to the central database. The data in DataSet can be loaded from any valid data source such as a text file, an XML database, Microsoft SQL server database, an Oracle database or MySQL database. Data Provider The Data Provider is responsible for providing and maintaining the connection to the database. A DataProvider is a set of related components that work together to provide data in an efficient and performance driven manner. Each DataProvider consists of the following component classes: The Connection object which provides a connection to the database The Command object which is used to execute a command The DataReader object which provides a read only, connected recordset The DataAdapter object which populates a disconnected DataSet with data and performs the update. 40

48 The Connection Object The Connection object creates the connection to the database. Microsoft Visual Studio.NET provides two types of Connection classes: the SqlConnection object, which is designed specifically to connect to Microsoft SQL Server 7.0 or later, and the OleDbConnection object, which can provide connections to a wide range of database types like Microsoft Access and Oracle. The Connection object contains all of the information required to open a connection to the database. The Command Object The Command object is represented by two corresponding classes: SqlCommand and OleDbCommand. Command objects are used to execute commands to a database across a data connection. The Command objects can be used to execute stored procedures on the database, SQL commands, or return complete tables directly. Command objects provide three methods that are used to execute commands on the database: ExecuteNonQuery: Executes commands that have no return values such as INSERT, UPDATE or DELETE. ExecuteScalar: Returns a single value from a database query ExecuteReader: Returns a result set by way of a DataReader object The DataReader Object The DataReader object provides a read-only, connected stream recordset from a database. Unlike other components of the Data Provider, DataReader objects cannot be directly instantiated. Rather, the DataReader is returned as the result of the Command object's ExecuteReader method. The SqlCommand.ExecuteReader method returns a SqlDataReader object, and the OleDbCommand.ExecuteReader method returns an OleDbDataReader object. The DataReader can provide rows of data directly to application logic when one does not need to keep the data cached in memory. Because only one row is in memory at a time, the DataReader provides the lowest overhead in 41

49 terms of system performance but requires the exclusive use of an open Connection object for the lifetime of the DataReader. The DataAdapter Object The DataAdapter is the class at the core of ADO.NET's disconnected data access. It is essentially the middleman facilitating all communication between the database and a DataSet. The DataAdapter is used either to fill a DataTable or DataSet with its Fill method. After the memory-resident data has been manipulated, the DataAdapter can commit the changes to the database by calling the Update method. The DataAdapter provides four properties that represent database commands: SelectCommand InsertCommand DeleteCommand UpdateCommand When the Update method is called, changes in the DataSet are copied back to the database and the appropriate InsertCommand, DeleteCommand, or UpdateCommand is executed. 42

50 ADO.NET follows the below process, Figure 24, to connect to the database and retrieve data to the application [21]. Figure 24 ADO.NET Architecture 43

51 When an ASP.NET application needs to access the database, it submits an appropriate request to ADO.NET through a DataAdapter object, which in turn sends a command to the Connection object. The Connection object establishes a connection to the database and submits the request sent by DataAdapter. The Connection object connects to the database through a Provider such as ODBC.NET. The Provider acts as a translator between the Connection object and the database. It translates the request for data to database s language and brings back the data, if needed. The Provider sends the data back to the DataAdapter through the Connection object and DataAdapter places the data in a DataSet object residing in application s memory. Instead of storing data in a DataSet, a DataReader can be used to retrieve data from the database. Results are returned in a resultset which is stored in the network buffer on the client until a request is made to Read method of the DataReader. Using the DataReader can increase the application performance by retrieving as soon as the data is available, rather than waiting for the entire results of the query to be returned [22]. A DataSet can be used to interact with data dynamically such as binding to a Web Form, cache locally in the application, provide hierarchical XML view of the data, etc. If such functionalities are not required by the application, a DataReader can be used to improve the performance of the application. By using a DataReader, the memory can be saved that is used by the DataSet, as well as the processing required to Fill the contents of a DataSet. When a DataReader is used, a DataAdapter is not required to send the data to the application. In this project, DataReader is used to read the data and Command object called ExecuteNonQuery is used to write into the database. 44

52 7.2 Connecting ASP.NET application to a Database The steps required to connect our ASP.NET application to the MySQL database and access the data are given below: 1. Import the required namespaces. using System; using System.Data; using System.Data.Odbc; 2. Create a connection object. string myconnectionstring; myconnectionstring = DRIVER = {MySQL ODBC 3.51 Driver}; SERVER = localhost; DATABASE = project; UID = root; PASSWORD = OdbcConnection odbccon = new odbcconnection(myconnectionstring) 3. Create a SQL query string str; str="select * from Customer where UserID='admin ; 4. Create a Command object to run the SQL query odbccmd=new OdbcCommand(str,odbcCon); 5. DataReader to read the result OdbcDataReader odbcreader; String text, text2; while (odbcreader.read()) { } text = odbcreader["userid"].tostring(); text2 = odbcreader[ FirstName ].ToString(); 6. Close odbcreader and odbcconnection odbcreader.close(); odbccon.close(); The data can now be used as desired by the application. 45

53 8. The Shopping Cart Application The objective of this application is to provide the user an online website where they can buy books from the comfort of their home. A shopping cart is used for the purpose. The user can select the desired books, place them in the shopping cart and purchase them using a Credit Card. The user s order will be shipped according to the type of shipping selected at the time of placing the order. Website consists of the following web pages: 1. AddBook.aspx 2. BookDetails.aspx 3. BookReview.aspx 4. Books.aspx 5. ChangePassword.aspx 6. CheckOut.aspx 7. FinalOrder.aspx 8. Footer.ascx 9. ForgotPassword.aspx 10. Login.aspx 11. LogOff.aspx 12. Menu.ascx 13. Order.aspx 14. PurchaseHistory.aspx 15. Registration.aspx 16. Search.aspx 17. ShoppingCart.aspx 18. UserDetails.aspx Below figures show some screenshots taken from running the application. All the functionalities are explained accordingly. 46

54 When the user types the web address in the browser, the main page of the application is displayed which has the list of the top ten popular books available in the store, as shown in Figure 25. Figure 25 Book Details The information about books is stored in Books table. The user can know the ISBN of the book, book title, author of the book, number of copies available at the store, price of the book. A link to add the book to the shopping cart and also a link to write a review for the book are also provided. The user does not have to login to add a book to the cart or to read/write a review. 47

55 8.1. Search for Books Books can be searched based on the ISBN, Title or the Author of the book. When searching for books by author Jesse Liberty, two books are displayed as shown in Figure 26. Figure 26 Search for books 48

56 8.2. Registration A new user can register on the site by clicking on the registration button on the menu at the top of the page, as shown in Figure 27. Figure 27 New user registration The * beside the label indicates the required field for successful registration on the site. If the value if not entered, an appropriate message is displayed. If a user with same UserID already exists, the message is displayed. Clicking on Reset will clear all the fields and Submit will submit the information for registration. Upon successful completion, the user is directed to the Books page. 49

57 8.3. User Details On clicking User Details, the detailed profile information of the user who is currently logged in are displayed as shown in Figure 28. Figure 28 User details Here the users can change their profile except for the UserID and these details will be reflected in the database only when the Update button is clicked. If the user has placed any order previously, those details can be viewed by clicking on the Purchase History button. 50

58 8.4. Shopping Cart When Add to Cart is clicked for any book, it is added to the shopping cart illustrated in Figure 29. If that particular book is already present in the shopping cart, the quantity is increased by 1 and the price is changed accordingly; if not, a new entry is made into the table. All the information in the shopping cart is stored in shopping_cart_items table. Adding a book into the shopping cart does not decrease the quantity of books in the Books table. It is decreased only after an order is placed for the book. So, placing the book in the shopping cart does not guarantee the availability of the book at the time of placing the order. Figure 29 Shopping cart 51

59 8.5. Place an Order When Place an Order button is clicked which is located on the bottom of the shopping cart, the application will ask the user to login if he has not already done so. Figure 30 Order Details If the user is placing an order with the web site for the first time, they will be asked to enter the credit card details as shown in the above figure; if not, only the Card Verification Value (CVV) number of the credit card is asked for verification, as shown in Figure

60 At this point, the user can check the shipping address box if shipping address is same as billing address, otherwise the user has to enter the new shipping address as shown in Figure 31. Figure 31Shipping details If the check box provided is checked, the shipping address is obtained from the Customer table. The user also has to select the desired type of shipping for the order. When all the information is entered, the user can Proceed to the Checkout. 53

61 8.6. Check Out Before placing the final order, the user is shown the total price of the order, which includes total price of books selected, shipping rate and state tax as illustrated in Figure 32. If the user is not satisfied with the order, the order can be cancelled at that point. The information in the shopping cart remains intact, so the user can go back to it and make any changes if necessary. When the Place Order button is clicked, the order is placed and the following screen appears which informs the user about the approximate number of days in which the order will be delivered. Figure 32 Check out 54

62 Once the order is placed, the quantity of the books is reduced in the Books table. The shopping cart for the user cleared and an appropriate message is displayed, as shown in Figure 33. Figure 33 Order confirmation The inventory is updated as shown in Figure 34 after the order is placed. Figure 34 Updated inventory after order placement 55

63 8.7. Purchase History Figure 35 details the purchase history of the user skodali. Purchase history can be reached by clicking on the Purchase History tab on User Details screen as shown in the Figure 28. Figure 35 Purchase history 56

64 When viewing the purchase history, the user can view the details of each book by clicking on the book name. The details are displayed as shown in Figure 36. Figure 36 Book details 57

65 Book information can only be changed by the Administrator of the site. All other users can only view the details of the books. The administrator of the site can also Add Book or Remove Book to/from the Books table. Figure 37 allows a book modification form accessible to the administrator. Figure 37 Administrator - Modify books In order to add a book, the administrator will enter the ISBN of the book. If the ISBN is already present in the Books table, the administrator is asked to enter the quantity of the books. 58

66 Figure 38 Details about new book If the entered ISBN book is not present in the Inventory, the administrator is asked to enter the details about the book as shown in Figure 38 to add the book to the inventory. 59

67 entered. Figure 39 shows the updated inventory after the book details in Figure 38 are Figure 39 Updated Inventory 60