Published: 30 Nov 2009
By: Xianzhong Zhu

In this two-part series, you will learn how to a typical front end of an E-commerce system using the great Microsoft ASP.NET MVC 1.0 framework. In the first part, we will focus upon the following points: system design, functionality design, architecture design, and database design, etc. in the second part, we will discuss the detailed coding related things.

Contents [hide]

Build a Front End of an E-commerce System Using ASP.NET MVC Framework Series

  • Part 1 Build a Front End of an E-commerce System Using ASP.NET MVC Framework Part 1
  • Part 2 Build a Front End of an E-commerce System Using ASP.NET MVC Framework Part 2
  • Introduction

    With the rapid development of Internet, online book sales, as a typical example of the development of Web e-commerce systems, have been deeply mixed up with people's daily life. Staying at home, people can choose to buy their own favorite variety of books, which greatly shortens the buying time and improves efficiency. Across time and spatial constraints to business circulation, online book sales system has not only brought great changes in commercial circulation, but also brought conveniences to consumers.

    Based on the famous MVC design pattern, Microsoft ASP.NET MVC provides a design framework and technical foundation for creating web applications under the .NET platform. It is a lightweight, highly testable framework, which combines the existing excellent ASP.NET characteristics (such as the Master pages, etc.).

    It is worth noting that ASP.NET MVC framework has greatly simplified the complex part of programming inside the ASP.NET Web forms solution; and, at the same time, whether the strength or flexibility are concerned, they are not inferior to the latter at all.

    In this two-part series, we will construct a client side of an online book sales system using the ASP.NET MVC framework.

    NOTE

    The testing environments we'll use in the sample application are:

    Windows XP Professional;

    Visual Studio 2008 Professional (with ASP.NET MVC 1.0 built in);

    SQL Server 2008.

    System Design

    At the very beginning of designing the system, it is highly recommendable to make clear the true requirements of the system from the point of view of the users. Only after this step can we set out to take into account the system design. During the system design phase, we should nail down functionalities and sequences of each module. Only after the completion of all these steps can we start to write code.

    Requirement Analysis

    As an on-line book sales system, it should facilitate users to browse, buy books. And, on the other hand, it needs to be managed and maintained by the system administrator. According to the basic needs of the book sales system, this front end module needs to complete the following tasks:

    • Login functionality. Users have to login before they can place the order using the shopping cart and view the order.
    • Shopping cart functionality. This is to facilitate users to buy goods.
    • Product search feature. This allows users to directly search the required products. When there are plenty of products, the feature is very convenient for users.
    • Order inquiry functionality. The function is to facilitate the members to retrieve all the orders.
    • Book category listing. General merchandise will have a lot of varieties. So, dividing all the books into corresponding categories may be very useful. When users need some special type of books, this feature can help them to jump to find out all the books belonging to this type.
    • Most popular books exhibiting. This function aims to increase the attractiveness of web site users.

    According to the above requirement analysis, we can divide the whole system into six modules, i.e. member management module, shopping cart module, order inquiry module, book searching module, book recommending module, and book classification and listing module, as is shown in Figure 1 below.

    Figure 1: The system module diagram

    The system module diagram

    Functionality Design

    According to the above analysis, this book sales system can be divided into six parts:

    • Member management module. This module includes member logging in, registration, and user information modification. Note that in practical case, members can enjoy different levels of benefits.
    • Shopping cart module. If the users show interests in a particular book they can immediately place it into the shopping cart as with the supermarket shopping cart in the real scenario. And also, they can conveniently add or remove books from the shopping cart.
    • Order inquiry module. With the order inquiry function, members can find information on all of their orders.
    • Book search module. Here, we have only provided the basic searching support, i.e. users can search for books only by entering the book name. Here for readers extra exercises are reserved, such as to add the advanced search feature. Readers can exert their own subjective imagination to better the system, making it a useful tool for their own.
    • Book category listing module. Listing books by category, users can easily view the list of their favorite types of books.
    • Recommended books module. Through the recommended book picture link, users can be quickly navigated to target book information page.

    Next, we will discuss the architecture design.

    Architecture Design

    In this application, we decide to leverage Microsoft ASP.NET MVC framework as the fundamental infrastructure to design our system.

    On the whole, ASP.NET MVC framework provides the following features:

    • ASP.NET MVC framework has deeply integrated the platform features that many users are familiar with, such as the run time, authentication, security nature, caching and configuration features.
    • The whole structure is based upon standard components, so developers can break down or substitute each piece according to their own needs.
    • ASP.NET MVC framework has leveraged the user familiar ASPX and ASCX files for development, and then at run-time rendered them into the HTML marks, and maintained the master page feature.
    • In this framework, URL will no longer be mapped to the ASPX file, but mapped to a number of controller classes. The so-called controller classes are in fact some standard classes that do not contain the UI components.
    • ASP.NET MVC Framework implements the System.Web.IHttpRequest and IHttpResponse interfaces, which enhances the unit test capacity.
    • During the unit test, without through the web request, unit test can be directly carried out in spite of the controller.
    • You can run the unit test on the machine in the absence of ASP.NET environment.

    In a word, the main advantage of using the MVC model is that it can more clearly separate the concerns, making it easier to unit test, and thus better able to control the URL and HTML content.

    Now, let's take a close look at the MVC implementation in the online book store system. Figure 2 shows the files and folders structure in this sample website.

    Figure 2: The files and folders structure in the sample BookShop website

    The files and folders structure in the sample BookShop website

    As is shown in Figure 2, using the ASP.NET MVC Web Application template will generate the following files and folders automatically:

    • App_Data, which is used to hold data, with the same functionality as in the Web Form based ASP.NET website.
    • Content, which is used to hold the application related resource files, such as picture or .css files.
    • Controllers, which is used to place the controller classes in the application.
    • Models, which is used to place the business module components.
    • Scripts, which is used to JavaScript or jQuery files.
    • Views, which is used to hold view files.

    Besides the above structure, there is also a file named Global.asax, which plays an important role, inside which URL addressing code is generated. In fact, file Global.asax is merely a standard ASP.NET file. MVC takes advantage of this file to initialize all the URL routes, for mapping actions and controllers to URLs when the application is first started, using the Application_Start event handler as shown in the following code:

    Listing 1: File Global.asax.cs

    Easily seen, when the application is launched, the event Application_Start is triggered. Then the method RegisterRoutes is invoked, through which the addressing logic is set up. For simplicity, we bypass the detailed discussion about method RegisterRoutes. Please refer to the online ASP.NET MVC tutorials for details.

    Note:

    In ASP.NET MVC, controller and action should be present in every route, because these two parts are required by the controller factory to find the correct controller object and then the correct action method in that controller. All the other parts can optionally map to the action methods' parameters.

    Note that, by default, the application applies the Account template, i.e. it contains several the account related pages. In this system, however, we will not use these automatically-generated pages. So, we deleted the following files: AccountController.cs under folder Controllers, sub folder Account under folder Views, file About.aspx under folder Views/Home, and the user control LoginUserControl.ascx under folder Views/Shared.

    With the whole system architecture in mind, we can shift to discuss the database design.

    Database Design

    In the design of the database, it is not only necessary to meet the current requirements, but also needs to be considered to facilitate future upgrades. Therefore, before you start to design your database, it makes good sense to study the exact and detailed functionalities that the database should accomplish. According to the database functionalities, you can determine the structure of the database to further complete the table design.

    Database Requirements Analysis

    In this book sales system, the functionalities of the database mainly revolves around providing, persisting, updating and querying operation of various kinds of info, including membership information, book information, book classification information, shopping cart information, order information and order details, with various parts of these data holding intrinsic relations. Therefore, towards the characteristics for the system data we can summarize the following needs:

    • Member info, which is used to hold details of members to facilitate sending the order and mailing the cargo.
    • Book info, which is used to hold book price, profile, picture and other information.
    • Books need a classification to facilitate the search.
    • Shopping cart info, which contains the cart number and other related data.
    • Order info, which is used to record information that the user submits.

    With the above system function analysis and requirement summarized, we can design the following data items and structures:

    • Book info, including data items: book number, book title, and sale prices, etc.
    • Member info, including data items: member number, member name, and contact address, etc.
    • Book category info, including only two data items: category number and category name.
    • Shopping cart info, including data items: shopping cart number, book number, and the number of books, etc.
    • Order info, including data items: order number, member number and order date, etc.
    • Order detail info, including data items: order number, book number, , and the amount of consumption, etc.

    Tables Design

    Till now, we can roll up our sleeves to design the SQL Server 2008 database. We name the database BookShop.mdf, which contains six tables, namely, membership information table, book information table, book category information table, shopping cart information table, order information table, and order details table. To save space, we decide to use the table form to describe the table structures of each table since the meaning of many fields is easy to understand.

    Table Users contains all the members' detailed info, including the user ID, name, password, and all compulsory and optional contact info. Below is the structure for table Users.

    Table 1: Structure for table 'Users'

    Field name

    Type

    Nullable

    UserID

    int(4)

    No

    UserName

    nvarchar(16)

    No

    Password

    nvarchar(12)

    No

    Name

    nvarchar(10)

    No

    EMail

    nvarchar(50)

    No

    IDCardNumber

    nvarchar(18)

    No

    TelephoneNumber

    nvarchar(12)

    No

    Address

    nvarchar(50)

    No

    ZoneCode

    nvarchar(10)

    No

    Mobilephone

    nvarchar(12)

    Yes

    Oicq

    nvarchar(20)

    Yes

    MSN

    nvarchar(50)

    Yes

    Table Books contains all the book related info, including the book category ID, book name, introduction, image path, market price and sales price. Below is the structure for table Books.

    Table 2: Structure for table 'Books'

    Field name

    Type

    Nullable

    BookID

    int(4)

    No

    CatID

    int(4)

    No

    BookName

    nvarchar(50)

    No

    BookImages

    nvarchar(50)

    Yes

    BookMarketPrice

    money(8)

    No

    BookPrice

    money(8)

    No

    BookIntro

    nvarchar(500)

    No

    BookAmount

    int(4)

    No

    BookSales

    int(4)

    No

    Table Categories contains the book category info. Below gives the structure for this table.

    Table 3: Structure for table 'Categories'

    Field name

    Type

    Nullable

    CatID

    int(4)

    No

    CatName

    nvarchar(50)

    No

    Table ShopCart contains all the shopping cart info, including the cart ID, book quality, the price and shopping date. Below gives the structure for this table.

    Table 4: Structure for table 'ShopCart'

    Field name

    Type

    Nullable

    CartID

    int(4)

    No

    CartIDString

    nvarchar(50)

    Yes

    BookID

    int(4)

    No

    BookQuality

    int(4)

    No

    ShoppingDate

    datetime(8)

    No

    Table Orders contains the general info for the order, including the use code, and order date. Below gives the structure for this table.

    Table 5: Structure for table 'Orders'

    Field name

    Type

    Nullable

    OrderID

    int(4)

    No

    UserID

    int(4)

    No

    OrderDate

    datetime(8)

    No

    Table OrderContent contains the detailed info for the order, such as quality, and unit cost. Below indicates the structure for table OrderContent.

    Table 6: Structure for table 'OrderContent'

    Field name

    Type

    Nullable

    OrderID

    int(4)

    No

    BookID

    int(4)

    No

    BookQuality

    int(4)

    No

    UnitCost

    int(4)

    No

    Stored Procedures

    Besides above tables, we've also defined twenty-two stored procedures in the database BookShop.mdf to modulate the design of the sample application. Since most stored procedures are relevant to typical table CRUD operation and are easy to understand, we will simply enumerate their functions, respectively.

    1. AddItemtoSrloppingCart

    This stored procedure is used to add a book to the shopping cart. First, obtain the number of goods that the users buy from table ShopCart. Then, update the associated records if the number is greater than 0; or else, insert a new record into the table.

    2. AddOrder

    This stored procedure is used to insert the user's order information into table Orders (holding general order information) and OrderContent (holding order details). Note that the transaction process is used in this stored procedure.

    3. AddUser

    This stored procedure is used to add new users into the database, that is, to perform a simple user registration.

    4. BookByCategory

    This stored procedure is used to acquire a specified category of book info, including book number, book name, book prices, and image, with the name and market price field in the ascending order.

    5. BookDetail

    This stored procedure is used to acquire the detailed book information, including the name of the book, number, the market price, sales price, picture and related introduction.

    6. CheckUser

    This stored procedure is used to determine whether the given user is contained in the database.

    7. CountShoppingCartItem

    This stored procedure is used to calculate the total number of books in the user's shopping cart.

    8. DisplayShoppingCart

    This stored procedure is used to display the shopping cart details, including the book number, name, market price, purchase quantity, selling price, as well as the amount of consumption calculated through the sales price multiplied by the user's purchase quantity.

    9. EmptyShoppingCart

    This stored procedure is used to empty the book data in the shopping cart.

    10. ListBookCategory

    This stored procedure is used to obtain the book classification numbers and names.

    11. ListOrders

    This stored procedure is used to obtain the corresponding order information using the specified user ID.

    12. ModPwd

    This stored procedure is used to modify the membership password.

    13. ModUserInfo

    This stored procedure is used to modify the user's information. Note you can modify all the use info except for the password.

    14. MostSoldBooks

    This stored procedure is used to retrieve the most popular book information. In this sample, it is used to obtain the book information of the sales of the top six.

    15. OrdersDetail

    This stored procedure is used to obtain the detailed order information.

    16. RemoveShoppingCartItem

    This stored procedure is used to remove the book information from the shopping cart, which will be used when the user updates the shopping cart.

    17. SearchBook

    This stored procedure is used to achieve the fuzzy search for the book information. In this sample, we have only achieved searching by the book name.

    18. ShoppingCartTotalCost

    This stored procedure is used to calculate the total amount of consumption in the shopping cart with the help of the Sum() function.

    19. TransplantShoppingCart

    This stored procedure is used to pass the shopping cart info that the user set up before logging to the one after logging.

    20. UpdateShoppingCart

    This stored procedure is used to update the shopping cart information.

    21. UserInfo

    This stored procedure is used to obtain a user's detailed info.

    22. UserPwd

    This stored procedure is used to determine whether the user's original password is correct or not.

    Again, to save space, we are not going to delve into the above stored procedures. Readers can refer to the source code themselves.

    Summary

    As you've seen, this first part mainly focuses upon the system design, functionality design, architecture design, and database design, etc. And for brevity, we have also left out a good many graphics and the scripts for the stored procedures. However, you may have gained a clear understanding with the whole frame of the sample system. In the second part, we will start with the heavy coding work.

    Build a Front End of an E-commerce System Using ASP.NET MVC Framework Series

  • Part 1 Build a Front End of an E-commerce System Using ASP.NET MVC Framework Part 1
  • Part 2 Build a Front End of an E-commerce System Using ASP.NET MVC Framework Part 2
  • <<  Previous Article Continue reading and see our next or previous articles Next Article >>

    About Xianzhong Zhu

    I'm a college teacher and also a freelance developer and writer from WeiFang China, with more than fourteen years of experience in design, and development of various kinds of products and applications on Windows platform. My expertise is in Visual C++/Basic/C#, SQL Server 2000/2005/2008, PHP+MyS...

    This author has published 81 articles on DotNetSlackers. View other articles or the complete profile here.

    Other articles in this category


    Code First Approach using Entity Framework 4.1, Inversion of Control, Unity Framework, Repository and Unit of Work Patterns, and MVC3 Razor View
    A detailed introduction about the code first approach using Entity Framework 4.1, Inversion of Contr...
    jQuery Mobile ListView
    In this article, we're going to look at what JQuery Mobile uses to represent lists, and how capable ...
    Exception Handling and .Net (A practical approach)
    Error Handling has always been crucial for an application in a number of ways. It may affect the exe...
    JQuery Mobile Widgets Overview
    An overview of widgets in jQuery Mobile.
    Book Review: SignalR: Real-time Application Development
    A book review of SignalR by Simone.

    You might also be interested in the following related blog posts


    Open SQL Port for specific IP by ASP.NET Website read more
    SQL 2008 CLR Triggers, use a .NET class library in SQL using WPF read more
    WSE, DIME; WCF, MTOM; OH My! read more
    Exposing Custom WCF Headers through WCF Behaviors read more
    UppercuT - Automated Builds - Custom Tasks read more
    You should NOT use ASP.NET MVC if. . . read more
    Is ASP.NET MVC a half-baked solution? read more
    Silverlight SVC Web Service problems on IIS read more
    Programmatically generating SQL(DDL) from M read more
    ASP.NET MVC Release Candidate 2 read more
    Top
     
     
     

    Discussion


    Subject Author Date
    placeholder Data file Arlen Navasartian 12/16/2009 3:59 PM
    RE: Data file Sonu Kapoor 12/19/2009 5:33 PM
    placeholder About "cannot restore booksh.bak to sql2005" (2) Xianzhong Zhu 12/16/2009 6:13 PM
    Please send me the related scripts Asp Fun 12/17/2009 3:43 PM
    placeholder Data File Arlen Navasartian 12/20/2009 2:27 AM
    Where Edner Jean-Louis 12/22/2009 10:04 AM
    placeholder RE: Where Sonu Kapoor 12/22/2009 10:06 AM
    sql 2005 Arlen Navasartian 12/25/2009 2:55 PM
    placeholder Another one that would like to use SQL 2005 Sune Henriksen 3/25/2010 9:36 AM
    RE: Another one that would like to use SQL 2005 Praveen Nair 4/9/2010 8:53 AM

    Please login to rate or to leave a comment.