Price-Grabbing E-commerce Website Using ASP.Net and Oracle

Transcription

1 Price-Grabbing E-commerce Website Using ASP.Net and Oracle Susheel Pal Mudhranthakm Indrapal CIS 690, Spring 2006 Abstract The following documentation is the project report of a price-grabbing, e-commerce website. By implementing this project I intend to strengthen my ASP.Net skills and web development skills in general. 1. Introduction This website is similar to the popular pricegrabber.com and is aimed at implementing most of its features. The approach taken in building this website is to design a good user-interface, provide easy navigation, make the website secure by sending sensitive data such as credit-card numbers, and other personal information in an encrypted format to the server, coding and structuring the web pages in an efficient way so that they load fast without keeping the user waiting. I have built this website using Microsoft.net because it has a great IDE that helps to build dynamic web pages quickly. It follows the concept of separating the design view from the code view unlike traditional web programming languages like ASP, JSP, and PHP. Some of the main features of this website are viewing the main-categories and sub-categories dynamically, viewing the products under a subcategory, side-by-side comparison of the products, accounts for the buyers and sellers, etc. Some of the cool features are validation of creditcard algorithms using Luhn s algorithm, use of breadcrums for easy navigation, encryption of data stored in the database, client-side validation for all the input forms, use of oracle blob data-type for storing product images, etc. scalable and flexible. And of course, security is one of the most important issues that we need to address while building an E-Commerce website of this kind, since the customers only trust websites that are SSL secured or use some kind of data encryption techniques. It is the responsibility of the website developer to make sure that sensitive information such as the personal data of the customer, credit card numbers, etc are secured. I have a decent background building websites using Microsoft.Net using C# for code behind and Oracle for the back end database. But while working on this project, I was involved in every phase of website development like planning, database design, coding, testing, etc. 3. Intended Users Buyer: - They are the users who want to buy some thing from the website online. They have to create an account with this website in order to buy any product. Seller: - Sellers are the people who have their own e- commerce website, or are individuals who want to sell something. They have to register themselves as well as their products in order to sell on this website. Admin: - This is the person(s) responsible for updating the main-categories and sub-categories in the database. He can also change the advertisements being displayed on the web-pages. I have built this website keeping in mind all the design factors such as navigation, user-validation and data validation, flexibility, scalability, extensibility, security, etc. 2. Motivation / Background The motivation behind building this website is to explore the various features and tools provided by Microsoft.Net. I am passionate about E-Commerce websites due to the fact that they implement a lot of complex business logic in making their website dynamic, 1

2 4. UML Class Diagram 2

3 5. Sequence Diagrams 3

4 6. Database Schema The following figure shows the database schema used for my project. A new table is created for each subcategory on the website. Only two product tables Laptop and Digital Camera are shown in the figure for simplicity sake. 7. Implementation 7.1 Design Factors The website has been designed in such a manner that it can be easily visited on a 19 computer monitor as well as a PDA. I have made use of CSS styles wherever possible to make it a smooth experience for the user while navigating through the website. I have used a downloadable menu component for asp.net skmmenu, which can be easily configured and used by writing some XML code. The web-pages have been designed making use of many dynamically loded usercontrols so as to load the pages faster Navigation I have provided a menu at the top of every page in the website. I have also provided bread-crums on some webpages for easy navigation of main-categories, subcategories, products, etc. The website also has a search functionality, which takes the user directly to the desired product with a single click Validation User-Validation There is restricted access to some pages on the website. The user has to enter his username and password in-order to access his profile, order history information, selling history, etc. I have made use of session objects in.net to maintain the state of the user being logged in Input-Data Validation I have made use of the client-side validations controls such as required field validator, regular expression validator, etc., provided by the.net framework to validate the user input. Server-side validation such as validating the username and password, validating the credit-card number, etc has been done Multimedia Every product for sale on this website is associated with an image. These images are being stored as oracle blob data-type. 4

5 7.1.4 Flexibility This website is browser independent. It has been tested with various browsers including Internet Explorer, Mozilla Firefox, Netscape, and Opera. I have tried to make the UI look uniform across these browsers Scalability We can add main-categories, sub-categories in the future. These categories are displayed dynamically as and when added to the database. That is, if you add a new category to the database it will be displayed on the webpage immediately. A good interface has been provided, so that new products could be added to the database. The website scales well for a larger number of categories, products and their images Extensibility The functionality of this website can be easily extended. It has been well structured by using.net webforms and user-controls wherever appropriate. The newly created web pages can be easily linked to the existing web pages. I have designed the header and footer as separate user-controls so that they can be directly dragged onto the new web pages without having to create them for each page Security Sensitive data such as credit-card numbers and other payment information sent to the server is being encrypted. Restricted access is allowed to some web-pages by asking the user to enter a username and password for login. This is done using Session variables in.net. 7.2 Technologies Used Microsoft ASP.NET ASP.NET is a technology for building powerful, dynamic Web applications. It is part of the.net Framework. It helps you deliver real world web applications in record time. ASP.NET server controls enable an HTML-like style of declarative programming that lets you build great pages with far less code than with classic ASP or technologies like PHP or JSP. Best of all, ASP.NET pages work in all browsers including Firefox, Opera, Safari, and Internet Explorer. You can author ASP.NET applications in most.net compatible languages, including Visual Basic, C#, and J#. ASP.NET pages (Web Forms) are compiled, providing better performance than with scripting languages. Web Forms allow you to build powerful forms-based Web pages. When building these pages, you can use ASP.NET server controls to create common UI elements, and program them for common tasks. These controls allow you to rapidly build a Web Form out of reusable built-in or custom components, simplifying the code of a page. The.NET Framework is a development and execution environment that allows different programming languages & libraries to work together seamlessly to create Windows, Web, or Mobile applications that are easier to build, manage, deploy, and integrate with other networked systems or as stand alone applications. The.NET Framework consists of: The Common Language Runtime (CLR) A language-neutral development & execution environment that provides services to help "manage" application execution The Framework Class Libraries (FCL) A consistent, object-oriented library of prepackaged functionality Visual Studio is the Integrated Development Environment (IDE) that developers work inside when creating programs in one of many languages, including Visual Basic, for the.net Framework Internet Information Services (IIS) Internet Information Services (IIS) is a powerful Web server that provides a highly reliable, manageable, and scalable Web application infrastructure. IIS helps organizations increase Web site and application availability while lowering system administration costs. IIS supports the Microsoft Dynamic Systems Initiative (DSI) with automated health monitoring, process isolation, and improved management capabilities Oracle 10g Oracle Database 10g Enterprise Edition offers enterprise-class performance, scalability and reliability on clustered and single-server configurations. It provides comprehensive features to support the most demanding transaction processing, business intelligence, and content management applications. Enterprise Edition: Protects from server failure, site failure, human error, and reduces planned downtime Secures data with unique row-level security, fine grained auditing, and transparent data encryption Includes high-performance data warehousing, online analytic processing, and data mining features Oracle Database 10g Enterprise Edition delivers recordbreaking performance and scalability for transaction processing and large scale data warehouses on Windows, Linux, and UNIX servers. I have used Oracle 10g client and Oracle 9i server (oracle.cis.ksu.edu) in my project. The Oracle Enterprise Manager provided a good user interface for creating tables, stored procedures, triggers, and sequences for this website s database. 5

6 7.2.4 JavaScript JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more. JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, and Opera. I have used JavaScript for displaying pop up messages to alert the user, because ASP.NET is a serverside language and does not support any message boxes to be displayed on the client-side CSS Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, and spacing) to Web documents. Styles define how to display HTML elements. Styles are normally stored in Style Sheets. I have made use of CSS styles in my project, so that all the web pages in the website have similar look and feel. The CSS file contains styles for headings, subheadings, menu items, hyperlinks, etc XML Extensible Markup Language (XML) is a simple, very flexible text format derived from SGML (ISO 8879). Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere. I have made use of XML to configure the freely downloadable ASP.NET menu component - skmmenu. Basically one needs to write some XML code to add menu-items to the menu. 7.3 Functionality General Features View categories and subcategories On the home page the main categories and their corresponding sub categories displayed, so that the user can navigate into the products from a sub-category of his selection. This display of categories is completely dynamic and is subject to change if the admin decides to edit/delete/add new categories in the future. Displaying popular categories and products Popular categories and products are displayed on the home page and on the subcategory web page. These categories and products are selected for display on the basis of their sales. Display subcategories for a main-category When the user selects a main-category the website takes the user to a new page with all the subcategories of that category. The home page only displays about 5 subcategories for every main-category. Viewing products from a sub-category If the user selects a sub-category either from the home page or the sub-category page, the user will be taken to the products page, which lists all the products under that sub-category. This page essentially gives a brief description about each product such as product name, product image, price, model, reviews received, and the number of sellers for each product. Sorting the products on price or ratings On the products page the user can view the products either sorted on the price or the ratings. Filters on products such as manufacturer, price, etc Instead of implementing the advanced search feature in this website, I have provided some filters on the view products page. A list of manufacturers and range of price will be displayed on the left side of the products, so that the user can filter the products he wishes to view. There are two types of filters that I have implemented Basic and Advanced. The only difference between these two modes is that, in advanced filters, the user can select multiple manufacturers for the filter. Viewing detailed product description If the user selects a product, he will be taken to a product description page. This page gives both the general details as well as the detailed information about the product. For example, for a laptop, the general information would be image, price, manufacturer, reviews, etc., and the detailed information would be screen-size, weight, processor, description etc. Side-by-Side Comparison of products Products selected from a sub-category can be compared in a side-by-side view. In such a view, the detailed information of each product including the product image, is displayed in a columnar fashion, so that it is easy for the user to select the product that fits his requirements. Generating such a view involves, getting a dataset from the database and converting the rows in the dataset to columns in a data-grid. Search Products On this website I have included the search functionality in the header of every web page, so that the user can search for products from any page. When the user searches for a product, he may enter the full or partial name of the product and he will be taken to a page that displays the search results. 6

7 Buyer Create an account for every buyer Every person willing to purchase a product on the website has to register first, by giving his personal information such as name, shipping & billing address, credit card number, etc. Edit/Update Profile The website has got interface for the buyer to edit and update his personal information at any time by logging into his account by entering a username and password. Change Password The buyer can change his password by entering his old and new passwords. View Order History The buyer can view the orders he has placed from the time he has registered with this website. The history will essentially display a brief description of the product purchased with the order date, price and the seller. Edit Product Reviews Products purchased can be reviewed by the buyer, by giving 1-5 points on a scale of 5. Seller Create an account for every seller Similar to the buyer, every seller has to register before he can sell any product on the website. An account will be created for the seller with the following information contact name, company name, address, phone, fax, url, etc. View Profile When either the buyer or the seller logs onto his account, he is taken to a page where he can view his current profile, which essentially shows all the information entered while setting up an account with the website. Edit/Update Profile This is one of the several options available to the seller during the period of time he is logged in. The seller can edit/update his profile using this interface. Sell a product now! This is an interface provided to the seller, so that he could register the product he wishes to sell. The seller has to select a main-category; this causes all the subcategories of that main-category to be displayed. Then the seller has to select a sub-category, which shows a list of all the manufacturers for that subcategory (ex. Laptop). By selecting a manufacturer, the seller can see a list of products that have already been entered and stored in the database. Now the seller just has to input the number of products he wants to sell and he is done. If the seller could not find the product he wants to sell in the displayed list, he needs to click a hyperlink and he will be taken to a new page where he can register his product for the first time. This information he enters will be used in the future by any seller who wishes to sell the same product. By doing this, I have avoided duplicate entries of the same product in the database. This page has a form which is completely dynamic in nature. Depending on the sub-category selected to be registered, an input form is created dynamically with the input fields required to populate the database table corresponding to this sub-category. The data-types of these input values have to be stored so that a query is created dynamically to insert a new record into the database. View selling History This option is available to the seller when he is logged in. With the help of this interface the seller can view the products that he has put up for sale on this website. The seller can see a brief description of the product in a tabular fashion. View products sold History Using this interface the seller can view the products he has already sold using this website. The seller can see a brief description of the product along with the order-date, name of the buyer, etc. Cool/Special Features Validation of Credit-Card numbers The buyers have to submit their credit card numbers when they register. I am validating these numbers using the popular Luhn s algorithm. This algorithm is based on the principle that all major credit card issuing companies follow a specific pattern when giving credit card numbers. Every credit card has its own pattern. This algorithm basically checks if the user made any mistake while entering the credit card number, but it cannot check if it is a genuine credit card number. Bread-Crums for easy navigation Bread-Crums are a chain of hyperlinks displayed on the top-left corner of a web-page, providing navigation between a set of web-pages that follow a hierarchy. This basically allows the user to navigate between the webpages without having to click the back and forward buttons of the browser. Menu Bar In the header of every web page of this website I have provided a menu bar, whose menu-items consist of some of the main-categories. This menu bar is a freely available and downloadable asp.net component that can be configured to meet our requirements. It is called 7

8 skmmenu. I had to write an XML file containing the menu items and their URL to enable this menu. Client-Side validation of all input forms Client side validation is one important factor that determines the ease of use of a website. This helps reduce a lot of post-backs, thus making it a smooth experience for the user. I have done this client-side validation using.net components such as required-field validator, regularexpression validataor, compare-field validator, etc. Oracle-blob type for storing images Images are one of the most important multimedia components of a website. Storing these images in the database makes life easier, in retrieving them and displaying them on dynamic web-pages. I had to convert this image to a byte array and store it to the database in a blob data-type. Encryption of data Last but not the least; security is the most important aspect of an E-Commerce website in today s world of identity theft and network sniffing. I have done the encryption and decryption of data using the System.Security.Cryptography namespace and its objects. So the user information will be stored in an encrypted format in the database. 8.Testing All the following tests were performed on my Dell 600m laptop, with Windows XP Professional, Pentium M processor, a clock speed of 1.7 GHz and 512 MB RAM. For the Microsoft ACT performance test I have tested my Website Homepage and for the JMeter load test, the products page was tested. This page displays products from a subcategory. All the requests were sent from the same laptop itself. Microsoft Application Center Test Application Center Test is designed to stress test Web Servers and analyzes performance and scalability problems with Web Applications. It simulates a large group of users by opening multiple connections to the server and rapidly sending HTTP requests. Results The following figure shows the results generated by the Microsoft ACT test. 5 simultaneous browser connections for duration of 3 minutes were used for this test. A total of 2,052 requests were sent to the website. The average time to first byte and the last byte were almost the same, showing that the web page takes almost the same time to load for all the requests. The last section shown in the figure provides some statistics on the error count. As you can see there were no HTTP, DNS or Socket errors found. 8

9 The following figure shows the graph generated by the application center test. It is clear from the graph that even when the numbers of requests were increasing, the response rate was quite consistent throughout the duration of the test. JMeter Load Test Apache JMeter may be used to test performance both on static and dynamic. It can be used to simulate a heavy load on a server, to test its strength or to analyze overall performance under different load types. You can use it to make a graphical analysis of performance or to test your server and website behavior under heavy concurrent load. The following figure shows the graph generated by Jmeter while testing the homepage of my website. I have used a total of 200 threads, simulating 200 simultaneous users, looping 2 times, with a ramp period of 10 seconds. It is clear from the graph that the website performs consistently under heavy load generated by many simultaneous users. 9

10 NUNIT Functionality Test NUnit is a unit-testing framework for all.net languages. It is written entirely in C# and has been completely redesigned to take advantage of many.net language features, for example custom attributes and other reflection related capabilities. Similar to JUnit, we have to create some test cases for the functions we want to test using NUnit. There are two ways we can do this; using the NUnit console or the GUI as shown in the following figure. After writing the test cases, we have to load the dll file of our project into the NUnit GUI, and the GUI shows the tree structure of our test cases. As you can see from the following figure, I have created 11 test cases to test functions from all the web pages that I have created. All test cases have run successfully without any failure, which guarantees that these functions work correctly. 9. Experiences Lessons Learnt Retrieving data from, and updating the database. Processing this data and displaying in a desired format. Designing a good user-interface using ASP.Net forms. Providing security in the form of sessions and encryption. Storing images in the database. Loading input forms and other data dynamically. Performing client-side validations. Designing the database schema for web applications. Testing web applications for performance and functionality using NUNIT, JMeter, Microsoft Application Center Test, and ANTS. Problems faced I faced some problem initially using the oracle blob data type for storing product images and displaying these images on web pages. But I read a lot of articles on the web on this topic and I could resolve this issue. When I started building this project, I had problems with browser compatibility. It was not very visually appealing in Mozilla, as it was with IE. Then, I started using CSS styles for all formatting on my web pages. This solved the problem, and now the look is uniform across various browsers. 10

11 10. Future Work Maintain a favorites list for every buyer Implement the admin section Ability to add/change advertisements Add help in the form of a flash animation Interface to review products, sellers and buyers Besides manufacturer and price, add some more filters dynamically based on the sub-category. 11. Conclusion The purpose of this E-Commerce Price-Grabbing website is to give the best price for a product across many different sellers, so that the user can get all the prices on one website instead of visiting all the seller s web pages to find out the lowest price. This website has been designed in ASP.Net, so it has got a very good user-interface. Asp.net was a good choice, because it has a very good IDE that helps to design and build web pages in a short time. The motivation behind building this website came from the popular pricegrabber.com website, which is one of the most widely used E-commerce website today. It reduces a lot of work and effort, and saves a lot of time for the user by grabbing the best price for a given product across many different sellers. Through this project I have gained a lot of knowledge and experience on designing web pages using ASP.Net and Oracle, which will be useful to me in my future projects. 12. References Microsoft ASP.NET 2.0 Step by Step, by George Shepherd Oracle pl/sql programming, by Scott Urman and Tim Smith. Microsoft.net Home Page, Official Microsoft ASP.Net site, Internet Information Services, efault.mspx Oracle Database Enterprise Edition, tml JavaScript Introduction, Cascading Style Sheets, Cascading Style Sheets, XML, Microsoft Application Center Test, Apache Jmeter, NUNIT, Credit Card Validation Using Luhn's Formula or.asp 11