Building Online Shopping Website Based: Shunyi Liu
Building Online Shopping Website Based: Shunyi Liu
Building Online Shopping Website Based: Shunyi Liu
Abstract
Author(s)
Title
Number of Pages
Date
Shunyi Liu
Building online shopping website based on ASP.NET and SQL
Server
35 pages + 3 appendix
15 May 2013
Degree
Bachelor of Engineering
Degree Programme
Information Technology
Specialisation option
Instructor(s)
This project aimed to develop an online shopping website prototype selling mainly Asian
food and groceries on the Internet. The website includes both a front-end portal for customers, and a back-end management system used by system administrators to manage
the website in the background.
The website was named Asian Online. It was designed for people who prefer online shopping of Asian items at home in the Helsinki area. The portal was developed using
ASP.NET framework and written in C# language. The back-end system was developed
using Microsoft SQL Server 2008 as database. Visual Studio .NET provided various kinds
of ASP.NET controls.
As a result, the website was developed and most functions for online shopping were implemented. Furthermore, people living in Helsinki can buy their favourite products online.
More Finnish people are offered a platform to become familiar with oriental diet and culture. For further development, market research in Helsinki is necessary before the website
will be formally established.
Keywords
Contents
1
Introduction
2.1
2.2
2.3
2.4
ADO.NET
System analysis
3.1
3.2
3.3
10
3.3.1
10
3.3.2
11
3.4
4
14
4.1
14
4.2
14
4.2.1
15
4.2.2
16
Database design
18
4.3.1
18
4.3.2
19
System Implementation
21
5.1
21
5.2
System implementation
22
5.2.1
22
5.2.2
24
5.2.3
My Account Module
27
5.2.4
News module
28
5.2.5
Comments Module
30
5.2.6
30
5.3
6
12
System design
4.3
Discussion
31
33
6.1
33
6.2
Further Development
33
Conclusion
References
Appendix
34
35
Introduction
E-commerce represents the direction of future trade development. Promotion of ecommerce will bring great benefits to the society and the economy. For example, ecommerce improves the speed and quality of services of transaction, promotes the
globalization of markets, and cuts down cost. For these reasons, this project aimed to
design and implement an online shopping website for selling Asian food and groceries
in the Helsinki area. The website is designed for people who prefer online shopping of
daily necessities, especially Asian food. This website covers the entire process from
product management, classification and querying, to the shopping cart, and user order
processing.
According to a simple market research, there are large domestic supermarket chains
located around every city in Finland and every corner in Helsinki. However, the selection of commodities in these different supermarkets is almost same, and there are only
few Asian food items on the shelf. In addition, only three large scale Asian supermarkets are located in Helsinki and they are in the same place in the city centre. According
to information received from friends, a lot of Finnish people like Asian diet. Thus, the
goal of this project is to provide a platform for more and more Finnish people to become familiar with Asian food and purchase it online, and to develop an independent
online shopping system based on ASP.NET and SQL Server.
In the future, this project could be used for the establishment of a personal online
shopping portal, or it could be sold to a company interested in Asian product trading.
The system includes both a front-end portal for customers and a back-end management system used by administrators to manage the website in the background.
ASP.NET is used as the framework for the project to facilitate software development,
maintenance and upgrading. Background system consists of Microsoft SQL Server as
database and is written in object-oriented C# language.
2
2.1
ASP.NET is the successor of Microsoft ASP (Active Server Pages), but it is developed
to be more powerful than ASP. It can be used to build dynamic websites and webbased distributed applications, respond to data submitted by the user from the HTML
form, and access to the data or database, then return the results to the browser.
ASP.NET is a development platform provided by .NET Framework and features a
completely object-oriented programming model, which includes an event-driven, control-based architecture that encourages code encapsulation and reuse. When coding
ASP.NET applications, programmers have access to classes in the .NET Framework.
ASP.NET is integrated with the .NET framework, which is divided into a large collection
of functional parts totalling more than 10,000 types [1;7]. In addition, it is easy to deploy
and configure. Figure 1 shows an overview of .NET Framework.
The most important aspect of the ASP.NET engine is that it runs in the runtime environment of the CLR (common language runtime). CLR has some major benefits: Firstly,
it provides a pool of threads that can be used by various classes, an object is automatically allocated by space, and unused memory for inaccessible objects is reclaimed by
the garbage collector. Secondly, the compiler can verify that every call is valid at
runtime, and whole categories of low-level errors are completely obliterated by the
safety layer. Thirdly, the information about classes and members is only one of the
types of metadata that .NET stores in a compiled assembly [1;11-12]. Figure 2 shows a
high-level look at the CLR and the .NET Framework.
ADO.NET
Web Forms
Windows Forms
File I/O
(And so on)
Data Access
XML
ASP.NET uses solely OOP (object-oriented programming) language (at present stage
support to C #, VB, Jscript) to develop, using WYSIWYG (What You See Is What You
Get) editor to edit the web form. It supports the separation of code and the content of
the page [3]. Programmers can take full advantage of the object-oriented inheritance,
encapsulation, reusability, and the characteristics of the event-driven for programming.
ASP.NET web form can be visually edited without having to worry about the compiler
automatically adding or modifying code will affect the script running.
2.2
The most essential difference between PHP and ASP.NET is that PHP is a programming language and ASP.NET is a development platform. Approximately 1/3 of the web
applications in the world are written in PHP at present. Most of these PHP programs
run on an Apache server. As a programming language, PHP is independent of the operating platform. In contrast to PHP, ASP.NET is a platform rather than language. The
ASP.NET program not only can be written in C#, but also can be written in any language which was compiled to runs on .NET CLR. Usually, ASP.NET runs in Windows
platform and IIS server. In this sense, the difference between PHP and ASP.NET, like
iPhone and Widows 7. Choose one of them, is equivalent to choose a style. [4]
ASP.NET consumes very large in terms of memory usage and execution time, due in a
long code path. For web-based applications, these limitations would be a serious problem, because on the web, application may be extended to thousands of users per second. Memory usage may also become a problem on the Web server. On the other
side, obviously the advantages of ASP.NET depend on its simple design and implementation. This is the dream of object-oriented programming: Language flexible and
support to complex object-oriented features. In this sense, it could be able to interoperate with the existing skills of programmers. Another advantage of ASP.NET is the development environment. For example, developers can use WebMatrix (a communitysupported tools), Visual Studio .NET or Borland tools (such as Delphi and C + + Builder). Visual Studio allows programmer to set breakpoints, tracking code snippet and
view the call stack. All in all, it is a complex debugging environment. Many other third
party of the ASP.NET IDE solution also will inevitably arise in the future. This project
used ASP.NET as development platform rather than PHP because the environment of
Microsoft (Windows + ASP.NET + SQL Server + Visual Studio 2010) is convenient
than LAMP (Linux + Apache + Mysql + PHP), and it is oriented-object programming. [4]
2.3
Microsoft SQL Server is a database management and analysis system for e-commerce,
line-of-business, and data warehousing solutions, it is a powerful and easy-to-operate
back-end database management system, increasingly favored by the majority of database users[5]. More and more development tools are provided with SQL Server interface. SQL Server is a relational database management system, originally developed by
three companies, Microsoft, Sybase and Ashton-Tate jointly. The first version was
OS/2, launched in 1988. After the release of Windows NT, Microsoft and Sybase SQL
Server developers parted ways, Microsoft moved SQL Server to Windows NT system,
and focused on the development and promotion of SQL Server Windows NT version.
At present, the major database systems already on the market include MySql, Access,
Microsoft SQL Server, Oracle (9i, 10g, 11g). SQL Server and Oracle are the most
common database systems in use. This project selected Microsoft SQL Server 2008 as
database system because of the following reasons: firstly, although Oracle can be run
on all major platforms, and has solved the problem of cross-platform, its enterprise
manager is more complex for use. SQL Server 2008 can only run on Windows, but the
degree of integration with Windows is better than that of Oracle. In addition, SQL Server is easy and convenient to use and study. Secondly, Oracle is suitable for large-scale
projects. SQL Server 2008 applies to small and medium-sized projects. Because the
relationship between the data tables in the system of the final year project is complex,
SQL Server 2008 provides sufficient functionality to meet the project requirements.[6]
SQL Server cannot only be applied to small and medium-sized database management
and the establishment of a distributed relational database, but also to develop a desktop database. In fact, the basic structure of the SQL Server database processing uses
relational database model. SQL Server Enterprise Manager is a key management tool
for SQL Server, and complies with the MMC standard user interface, allowing users to
define the instance of SQL Server group. The SQL Server also supports functions like
registering individual servers the group, configuring all SQL Server options for each
registered server, creating and managing all SQL Server database objects, log-ins,
users and permissions in for each registered server, and defining and executing all
SQL Server administrative tasks on each registered server.
DBMS (Database Management System) is large-scale software used to the manipulation and management of the database. It is used to create, use, and maintain the database. DMDS has unified the management and control of the database to ensure the
security and integrity of it. The user can access the database in the DBMS, and the
administrator through the DBMS database for maintenance. DBMS provides a variety
of functions, and multiple applications, and users can use different methods to create,
modify, or query the database at the same time or at different times. Microsoft SQL
Server is a typical relational database management system, using Transact-SQL language to complete data manipulation. Microsoft SQL Server is an open system, and
other systems can interoperate with it. The features of SQL Server include its reliability,
scalability, availability, manageability, and provide users with a complete database solution.[7]
2.4
ADO.NET
The .NET Framework possesses its own data access technology, ADO.NET.
ADO.NET technology is a programming model to create a standards-based system
oriented for distributed data sharing applications. It is an extension of the ADO (ActiveX
Data Objects) technology and development, and superior to ADO technology in interoperability, maintainability, programmability and performance. ADO.NET contains
many classes. Programmers use these classes to get the data. ADO.NET is commonly
used by programmers to access and modify data stored in relational database systems,
though it can also access data in non-relational sources. The small miracle of
ADO.NET is that it allows a developer to write more or less the same data access code
in web applications that developers write for client-server desktop applications, or even
single-user applications that connect to a local database [2;259].
Generally web pages access a database with the following steps: first create and open
an ADODB connection object interface, and then bound to an object corresponding
data source (both named and unnamed data source), depending on the requirements
decide whether to create or not a record set. Finally the web page is executed or
opened to the corresponding table in the data source link. Figure 4 shows the layered
design between an ASP.NET application and a database.
ASP.NET Applications
User Interface
Table-Specific
(Web Page)
Database
Data
Stored
Table
Precedure
ADO.NET object model has five major components: connection, command, dataset
command, dataset, and data reader. Dataset in ADO.NET operates as a data container,
and is used when the application is disconnected from the database. Dataset contains
one or more data tables. Each data table contains a collection of rows. Generally, a
data table can be seen as a disconnected record set. A data adapter works when connecting to the database. The single data adapters role is to use the data filling with
data table, or return the modified data table to the database. The data adapter requires
a command object to perform different database operations. The command object
stores the SQL statement or the name of a specified data access method procedure.[8]
Each data adapter has four attributes as follows:
Select Command: This command object is used to select data from the database.
Update Command: This command object is used to update existing records in the database.
Insert Command: This command object is used to insert a new record to the database.
Delete Command: This command object is used to delete a database of existing records.
Figure 4 interprets these objects and their relationships.
3
3.1
System analysis
Market demand analysis
In the Helsinki area, a supermarket seems to be the main channel for people shopping,
both daily necessities and food items. However, according to a short survey and talk
with surrounding friends, a lot of people have a great interest in Asian food. Some Finnish people seem to be tired of their native or Western diet. They prefer to go to an
Asian restaurant for lunch, such as sushi, fried noodles and Chinese cuisine. Some of
them even go to an Asian supermarket every week, though it is located far away from
their home. This project was designed for those people, to provide an online website as
a platform for them. People could purchase different styles of food for cooking or eating
while sitting in front of the computer. They only need to click the product, pay it online,
and then wait for the delivery of their package in one or two days.
3.2
This final year project used a B/S (Browser/Server) structure, three layers operation
mode, and at the same time, it was designed for Intranet/Internet. The first layer is a
browser, which is the system interface. The second layer is application logic service.
The third layer is a data link, which functions as the system of data access service.
This three-layer structure greatly simplifies the load of the client computer, reduces
system maintenance, updates costs and the workload, and reduces the overall cost of
the user. In such a structure, the user interface is realized by a www browser, and very
little of the business logic is placed in the front end, i.e. the browser reach. The B/S
structure of the software only needs the management server and the client browser has
no need for any maintenance.
This project used the current mainstream computing mode for development. The frontend development tool was ASP.NET which allows visualization to build the sales module. The back-end code was done with fully object-oriented C#. The ASP.NET is easyto-use, universal and efficient. The back-end database development tool used was
SQL Server 2008. It is able to handle large amounts of data while maintaining data
integrity and provides a number of senior management and data distribution functions.
These two development tools are powerful, and a good interface for development.
Therefore, it is feasible to employ this system.
10
3.3
The implementation of the online shopping process is different from the traditional way
of shopping. First of all, the whole process of online shopping is carried out through the
network. Customers cannot see businesses and commodities in real life, and they must
understand the information on the goods only through the network. The general process of online shopping is as follows: businesses publish new product information on
the web through the system management function, and then customers browse these
product details through the system sales module, and can also search for more targeted product information according to their needs. For ease of administration, the customer must be registered as a member of the site to buy a product and choose the
payment method and mailing option. After the arrival of the goods, the customer inspects and verifies whether the products are practical and match the online description,
and can then give a review for other customers.
Some famous online shopping sites such as Walmart, Amazon, and E-Bay were studied and analysed to establish a logical process of online shopping. Based on this, the
main functional requirements of this system were divided into two modules: sales and
system management. The sales module function allows the customers to browse the
goods. The customers are to be registered as members in order to place products in
the shopping cart and pay for them. System management functions are used to the
release of products, and to manage the registered membership, product information,
order, news, and comments.
3.3.1
To build the online shopping website for Asian food, the portal should have the following sections and functions for the customers:
11
4. Commodity information browsing: The home page displays special columns for
special offers, hot sales, recommended and newly released products, and lists all
products category navigation of the website.
5. Special offers module: The special offers module shows larger discounts of goods.
6. Best-selling: According to the orders record, the home page displays the top ten
best-selling products.
7. Shopping cart: The products selected by a logged in member are temporarily
stored in the shopping car. The customer can modify the number of purchases by
viewing the cart.
8. New releases: According to the database information, the home page displays the
products released within the last three days or a week.
9. News: Home page rolling displays recent news entries according to the time sequence of the recent news.
10. Advertisements: Depending on the time, advertisements will be displayed on the
home page to publicize the different products.
The above functions form the basic pattern of the front-end website.
3.3.2
The system management module is used by the administrator to release products. The
background system functions consist of registered members, product information, orders, news, and comments. The functional requirements of the system management
module are as follows:
1. Members function: Implementation of management of the members who have registered on the website. An administrator can manage all members of the site.
2. Products function: Managing the information of a product, such as description, price,
images, inventory and so on.
3. Order function: For the registered members orders in sales module, the administrator will verify, and then deliver the products. Each order corresponds to only one
member, but it can correspond to multiple products.
4. News function: Managing the news. A news data table can be updated according to
the current date.
5. Administrator function: Managing the basic information of the system administrator,
such as adding an administrator, modifying password. An administrator can maintain the information of all members.
12
In addition, not only for the security requirements, but also in order to standardize the
management of the sales module and management module of the system, the following is to be done:
For customers: The non-registered members are only able to search and browse product information, view special offers, sales ranking, new arrivals and news. Shopping
cart and user centre functions are for registered members only. For administrators: If
the administrator does not enter log in account and password, he/she does not have
access to the system management homepage. If the user bypasses the system administration login page and goes straight to the main page, the system will be forced to
return to the login page.
3.4
The data flow diagram is used to depict the logical model of the system, and describes
an integral module of the system and the relationship of each part, and the flow of information and data conversion.
Firstly, through the product management function in the background system, the administrator saves product information into databases. Then, when a customer is registered as a site member, he/she can select and buy goods. After the completion of the
selection, choice of payment method and shipping method, members submit an order.
Finally, administrators deal with every new order issued by the member. The top-level
data flow diagram of the system is shown in Figure 5.
13
Seller
Product
Information
Asian Online
Unexecuted orders
Administrator
Shopping
oorders
Executed orders
Buyer
System
For the system sales module, the customer provides data to the database, including
registration information, login information, purchase information and the order information. For system management module, the data input is done by the administrator,
including the input of product information and news information, and output of all the
information could be viewed in sales module. The entire data flow is shown in Figure 6
14
System design
The objective of this chapter is to convert the logical model from the requirement analyse in previous chapter, into a physical model of the target system. Specifically the
aspects of system structure design and database design are explained. This simply
means that the results of the requirement analysis in the previous chapter, on what to
do, are used to determine "how to do".
4.1
The system structure and function is the core part in the system design. The structure
can be clearly seemed in the diagram. Each structural module is analysed, in order to
lay the foundation for design and implementation in the future. According to the functional requirements, the system was divided into two sections: sales module and management module. The sales module is used by customers. The management module is
used by administrators. The entire structure of the system is shown in Figure 7.
Sales Module
Management Module
4.2
The system is divided in the sales module and system management module. Each
module has several sub-modules. The sales module includes: the special columns,
shopping cart, membership centre, news, login and other sub-modules. The system
management module includes: product management, order management, membership
management, news management, administrator login and other sub-modules. The design of a specific module is explained in the following sections.
15
4.2.1
Sales modules are used by customers to browse and order all kinds of products. Figure
8 shows the structure of the system sales module.
Special Offers
Hot Sales
Special
Column
New Released
Recommended
Sales ranking
Select
products
Shopping Cart
Delete
products
View my cart
Sales module
Registration
Member
Center
Member login
Reclaim
password
Rolling Ad.
News
News details
16
1. Product special columns displays new arrivals, special offers, hot sales, sales ranking and recommended. Each column is divided according to the product information
in a particular field of database table. For example, the products displayed in special offers column are those with discounts of more than 20%. New arrivals are
products released within the previous three days or one week. Sales ranking is organized according to the number of orders.
2. Shopping cart functions display the select item, view, and empty the cart. Before
the customer submits an order, information about all the selected products is stored
in the dataset of the implementation class file of the shopping cart. When the order
is submitted, the dataset is written into the database. The user cannot use the
submit function before they log in. If the user adds an item into the shopping cart,
the system prompts user login.
3. Membership centre displays registration, login, and reclaim password. For registration function, the system requires the user to enter information depending on the
field of the database membership information in the data table. Parity is achieved
through various types of validation controls. Log in and reclaim the password functions are also required data on the membership information data sheet.
4. News management functions display news in the database on the home page,
while allowing the user to click on a specific news headline for more information.
5. Login and registration: The system is to be emptied of the members login information after they logout.
4.2.2
17
News
Category
Management
Secondary
Category
Add product
Product
Management
Edit
information
Delete
Querying
orders
Orders
Management
module
Excute orders
Modify
information
Membership
Delete
member
Administrator
Modify
password
Login &
Logout
Figure 9 Management module function structure diagram
18
1. Product management function consists of the operations add, edit, delete and others for products. System allows pictures to be uploaded for visitors to view.
2. Order management function consists of the operations view order information, deliver the products, and delete.
3. Membership management function consists of the operation manually edit, delete,
and modify membership information.
4. News management function consists of the operation delete, edit, and publish news.
5. Login and logout: After the administrator exits, the system will delete information
stored during login, such as session information.
4.3
Database design
After the completion of the system analysis it is time to step into the design stage.
Once the data are analyzed, and the relationships between the data understood, the ER model is established, and then the concept structure and logic structure of database
designed. Because SQL Server 2008 can be completed with high efficiency to a variety
of database queries, and can facilitate the use of stored procedures, and its graphical
user interface allows intuitive and simple system and database, it was used for storage
management and maintenance in this project. In addition, due to the support of web
technology, SQL Server 2008 allows users to easily publish data in the database on
the Web page.
4.3.1
The concept design means that abstracting the user requirements depends on the
analysis of information. This step is the key to database design. Generally the bottomto-up method for data abstraction and structural design is used. The entities involved in
this system are as follows:
19
In this system, the relationship between the various entities is one to many: one administrator can manage members, products, orders, news, category, and other physical
objects. A member may issue many order entities. One order entirety correspond to
many order details entities. One order detail consists of only one item entity. The main
categories have several sub-category information entities. One sub-category entity has
more than one item of physical products.
4.3.2
The advantages and disadvantages of the system database design affect the website
data connection speed and the complexity of an update query directly. This section
describes the design of a system from the point of view of the overall structure of the
database and relationship of database table.
The database design of the system follows the system function analysis, according to
the objectives of system requirements. The online shopping system is based on
ASP.NET and SQL Server which stores the most important data tables, such as product details table, registered members table, category information table, and order information table.
Primary key and foreign key in each data table exists their corresponding relationships,
generally the relationships are the product ID, member ID, category ID, order ID, and
administrator ID. The primary key of the elements linked diagram is shown in Figure 10.
And data tables are listed in the appendix.
20
21
System Implementation
The system structure design is completed in the overall design phase. This phase is
divided into modules, and provides the function of each module and the links between
them. After this phase, according to the viewpoint of the software development, the
project will step into the detailed design phase, i.e. the system implementation. The
fundamental goal of this stage is to determine how to achieve the required system, and
give an internal process description of each module. This chapter will give a presentation of the sub-modules of the system implementation.
5.1
This section will describe the system that uses the public classes, such as the generic
class of database access, which is used for returns of a dataset, object, and numbers
of affected rows, and the function class which is used to complete the shopping process. The preparation of public classes in other pages directly calls the methods, properties, and avoids duplication of code writing, which is convenient to the maintenance
of the system code and future system upgrades.
The database operations class depends on the requirements of the system function,
returns a data set, and an object, such as return to the first row and the first column;
number of rows affected (for CRUD operations in the database); and the SqlDataReader. To achieve these functions, there are four static functions. Each of the static
functions depends on whether the imported SqlParameter is overloaded. Because the
static function members cannot act on a specific instance, when call these methods
can be directly used the class name plus the name of the function.
Customers can purchase items on different pages, and these items are ultimately
collected into the same shopping cart. Therefore the system needs a shopping cart
class for the customers shopping process, in order to avoid unnecessary duplication of
code writing, which is convinient to the maintenance and function expansion. When the
user clicks on the "Purchase" button in the shopping page, the product ID is imported
to the class. The product is determined by the item ID. The system will use the
Hashtable class to store this information. Before the user submits the data, the data in
22
Hashtable will be temporarily stored in session variables. After the submission of the
cart, the data will be written to the database.
5.2
System implementation
Websites are more sophisticated than ever. Nowadays it is not enough if a website has
a great look and feel. It has to be easy to use and must present exactly the information
that users want to see. In addition, users want websites to present the information in a
specific way based on their individual preferences. Furthermore, users want to be able
to customize the websites user interface to fit their requirements, in order to the information they need for their demand as soon as they are logged in. Therefore, user profiles have become more important in web development.[2;1215]
5.2.1
When creating a web part page, firstly the layout is structured using HTML tables; for
example, the user login area, website logo area, navigation area, category area on the
left side, the main area in the middle area, news and best-selling area on the right side.
The system uses controls to maintain consistency of style on each page. Figure 11 is
the portal page with a consistent look and feel.
23
The home page mainly displays a dynamically updated website, categories, product
information, the latest news, product search and the entire site navigation menu.
As the second step, a Web Part Manager control must be added, available in the Web
Parts toolbox of Visual Studio. This is an invisible control that knows about all the
available web parts on a page, and manages personalization. Every other web partrelated control depends on it so it needs to be the first control created on a web part
page, and then a Web Part Zone control is added on every section of the page. After
these steps are completed, the web part page is ready to be used. For this system, the
Web sections in the sales module and functions are discussed in chapter 3 and chapter
4. The following code snippet shows the modified portion of the web page.
<div style="width: 181px; height: 22px; margin-top: 93px; margin-left: 241px;">
<asp:TextBox ID="txtUserNo" runat="server" Width="181px" Height="21px">
</asp:TextBox></div>
<div style="width: 220px; height: 22px; margin-top: 15px; margin-left: 241px;">
<asp:TextBox ID="txtPwd" runat="server" Width="120px" Height="21px" TextMode="Password"> </asp:TextBox>
24
5.2.2
Administrators log in to the management module and click Category Manage to publish and update the classification of product information. Category management includes the main categories and sub-categories. The sub-category interface is shown in
Figure 12:
After a successful release, customers can view and purchase the products in the frontend website. Clients can view a list of different products from the website in the differ-
25
ent columns On Sale, Hot Sale, New Release, and Recommend. Categories can
also help clients to view the list of products corresponding to a classification. Product
Search by keyword corresponds to the product information. For example, the On Sale
column displays special offers on products. The design of the interface is as follows:
Through the above product list interface, the customer can click the picture on the
name of a product to get product details, including product names, brands, category
and prices, on the screen. The product details information design is as follows:
26
The shopping cart collects all the users purchase information and can also modify the
quantity of the items or delete any purchases. The web page will display the price and
purchase quantity of each item. After clicking the fill order button, the customer needs
to fill the name, address, phone and other information of the receiver. Finally the customer clicks Check Out to confirm the order. The design interface of shopping cart is
as follows:
When an order is successfully submitted, the administrator will see the order details in
the Order Management, and then make the corresponding processing operations.
The design interface of the background order management is as follows:
27
5.2.3
My Account Module
After log in, users can view their orders in My Order column. This module lists the
order history of customers, both paid and unpaid orders. The user can also delete an
unpaid order. The design of the interface is as follows:
In the user centre, the client can also manage the information on his/her own favourites.
The design of the interface as follows:
28
5.2.4
News module
After the administrator logs in to the background, news management module can be
used to release, delete or update news information. With the release function, the latest
news are updated on the front-end site and displayed. The news management design
interface is as follows:
29
Home page scrolling displays the latest news. A list of all of the news details of the
website can be viewed by clicking the news on the navigation menu. The design of the
interface is as follows:
Users can view the news titles, content and author in this interface by clicking the news
title. Once the news title is clicked, a page with the news details is displayed.
30
5.2.5
Comments Module
Through the product information page, users can give comments after they are logged
in,. The design of the interface is as follows:
5.2.6
When the administrator enters a password, the system will determine whether this
password is correct and match, as well as to determine user permissions. The system
can check each user's permissions, using user permission control specific functional
modules. The user permission can be set in the admin management module. If the
password matches, the system displays the corresponding permission in the main interface of background; an incorrect password will give the user a friendly prompt.
31
Figure 26 is the beginning of all the operations of the entire back-end systems interface,
divided into three parts: the top module, the left-hand menu and the function display
area. After the administrator logs in, the system will decide to either display or hide the
function menu on the left. The design of the interface is as follows:
Only administrators can use the admin manage function. The administrator can add,
delete, and modify their information. Through the search function a query in the user
record and operations are carried out quickly. After user has added the corresponding
information and submitted it, the system will determine whether the account and user
name exist. Password cannot be empty before save. If some information is missing, the
system will give a friendly reminder. The design of the interface is as follow:
5.3
After the system development is completed, the final step is debugging and testing. For
example, in the background the administrator could set a main category and subcategory, and then place a product in the item manage module, and the system will prompt
whether this product upload is successful or not. If in the front-end website displays
normally, it means this product has been successfully uploaded, and the client can
32
browse this product in the corresponding category. Table 1 illustrates the different
module tests for expected and real result.
Test Module
Case
Administrator
Add new
management
Admin
Category
Add a new
management
category
Product info.
Realease a
management
new product
Shopping
function
News
management
Comments
Member
Expected
Able to query,
modify, delete login
normally
Able to query,
modify, delete. Home
page can display
Able to query,
modify, delete. Home
page can display
Submit a
Background can
new order
after login
orders
Release the
news and
content
contents
Submit a
Background can
feedback
after login
feedbacks
Sign up for a
member
login normall;
Background can
manage
Actual
Consistent with
expected results
Consistent with
expected results
Consistent with
expected results
Consistent with
expected results
Consistent with
expected results
Consistent with
expected results
Consistent with
expected results
Result
Pass
Pass
Pass
Pass
Pass
Pass
Pass
33
6
6.1
Discussion
Problems and Solutions
At the beginning, I was a novice of ASP.NET and during this project I came across
many problems. There is not a systemic module to study ASP.NET and MS SQL in the
school. I was reading a lot of books and studying from online tutorials, then summed up
some experience from doing this project. After studying and analysing some famous
B2C and C2C website designs, such as ebay.com, amazon.com, walmart.com, I was
inspired and began to design the layout of this website. While doing the development,
the biggest problem was the design of database table and schema. Finally, I successfully configured the connection with ASP.NET and SQL Server.
The details of the problems encountered in the process of system development were
as follows: When adding static control to dynamic pages, the required information could
not be obtained. Each time a request was submitted to the server, the client page
would be reloaded. If this situation had been ignored, the expected data could not have
been submitted to the server. The solution was to add breakpoints in the behind-code
of the page, and single-step debugging, which eventually resolved the problem. During
the process of solutions, I recognized the importance of the debugging method.
6.2
Further Development
The Asian Online website can run on the local host successfully. However, compared
with other famous shopping websites, there still are shortages to be improved by further development. First of all, the payment function is not an actual link to the bank.
Considering the security and authentication, it is huge work to implement an integral
online payment system, although I could only develop an API to the bank. Secondly,
according to discussions with some friends, it would be better to add some dynamic
graphic and use GDI+ in ASP.NET to give a good user experience. Thirdly, if a chat
function for transactions were developed, it would not be limited to chat. Merchants and
customers could also quickly query about and modify their information.
34
Conclusion
From this system development process, I learned a lot. Previously, I was mostly learning conceptual information, and also had done some piecemeal exercises, which were
very different compared to this system design. This project gave me a great opportunity,
and finally joined together conceptual expertise with practice. Through design of this
system, I summed up the following experience: First of all, I recognized the importance
of the code standard. Especially in some large-scale projects, there would be hundreds
or thousands of functions. If codes were written unstandardized, a series of troubles
would appear in the debugging and checking stage. Furthermore, a complete code-test
is very important. Some errors will not be found until much later. Secondly, I realized
the importance of software design. The projects I developed before were mostly rapid
works, usually designing the next step while developing; they did not require too much
time on the logical design of the software. But with this project, I recognized that if I did
not pay attention to the original design, large areas of code had to be rewritten. Finally,
I recognized the importance of the debugging method. System debugging process is
more complex than the development process. In fact, each operation and each submitting a request to the server includes a lot of small pieces of code execution. If the programmer do not use an appropriate debugging method, he/she will be difficult to identify errors in the program.
35
References
1
MacDonald M, Szpuszta M. Pro ASP.NET 3.5 in C# 2008, Second Edition. United States of American: Apress; 2007.
Appendix 1
1 (3)
Type
Note
Remark
User No
Varchar(50)
User ID
PKSelf-add
Password
Varchar(50)
Login Password
UserName
Varchar(50)
Username
Type
Note
Remark
UserId
Int
ID
PK
PassWord
Varchar(50)
PassWord
UserName
Varchar(50)
UserName
Varchar(100)
Qustion
Varchar(100)
Password Protection
Answer
Varchar(100)
Password Protection
Consignee
Varchar(50)
Receiver Name
Phone
Varchar(50)
Receiver Phone
Mobile
Varchar(50)
ReceiverMobile
Address
Varchar(500)
Receive rAddress
Name
Varchar(50)
ReceiverName
Phone
Varchar(50)
ReceiverPhone
Type
Note
Remark
ID
int
ID
PK
Title
Varchar(50)
Product Name
SCategory
Varchar(50)
Sub Category
Date
Datetime
Publish Date
Pirce
Decimal(182)
Market Price
DiscountPirce
Decimal(182)
DiscountPirce
BuyCount
Int
Purchase Count
Appendix 1
2 (3)
OfferORnot
Varchar(2)
Special Offer
RecommendORt
Varchar(2)
Recommend
Pic1
Varchar(200)
Pic1
Pic2
Varchar(200)
Pic2
Pic3
Varchar(200)
Pic3
Content
Text
Product Details
Table 3 Product Information Table
NEWS
Field Name
Type
Note
Remark
ID
int
ID
PK
Title
Varchar(50)
News Title
PublishTime
Datetime
Publish Time
Content
Text
Detailed Content
Table 4 News table
Comments
Field Name
Type
Note
Remark
ID
int
ID
PK
ProductId
Int
Product ID
CreateDate
Datetime
Publish Time
[Content]
Text
Detailed Content
UserNo
Varchar(50)
User ID
ShopCart
Field Name
Type
Note
Remark
ID
int
ID
PK
UserID
int
Shopping User ID
ProductId
Int
ProductID
Num
Int
Number of Products
Table 6 Shopping cart information table
Appendix 1
3 (3)
Order
Field Name
Type
Note
Remark
ID
int
ID
PK
UserID
int
Shopping User ID
ProductId
Int
ProductID
Num
Int
Number of Products
CreateDate
Datetime
Create Date
Deal
Varchar(50)
Processing status
ReceiptName
Varchar(50)
Receipt Name
ReceiptPhone
Varchar(20)
Receipt Phone
Address
Varchar200
Receipt Address
Remark
Varchar(1000)
Order Remark