1. FashionToday.com
THE DESIGN AND IMPLEMENTATION OF AN E-COMMERCE SITE FOR ONLINE
STORE
Prepared by :
Samah Harwn
Supervision by :
Dr.Yongming Tang
1

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

3. FashionToday.com
Project Content
Documentation of the FashionToday.com Project
1. Introduction
2. System Requirements
- Application requirements
- Hardware and software environments
3. Data Modeling
- Data entities and their relationships
- Final table schemas
4. System Design
- System level, subsystem level, …, up to functional unit
5. Implementation Strategy
- Techniques used for your assignments from the front end to the back end
including DB
3

4. FashionToday.com
Introduction
E-commerce is fast gaining ground as an accepted and used business paradigm. More and
more business houses are implementing web sites providing functionality for performing
commercial transactions over the web. It is reasonable to say that the process of shopping on the
web is becoming commonplace.
The objective of this project is to develop a general purpose e-commerce store where any
product (such as Makeup, and Skin care) can be bought from the comfort of home through the
Internet. However, for implementation purposes, this paper will deal with an online cosmetic
store.
FashionToday.com is an e-commerce website which would cater to the makeup,
accessories and other various fashion needs for women. We will categorize our products into
Makeup, Skin Care, Fragrance, Nails and Hair. And the products on sale will be mentioned on
the main page for easy access. The website will cater to two kinds of users, customers and site
administrator.
A customer will be able to browse the wide variety of products and pick a quantity, color
and add it to the shopping cart. Customer will also be able to make changes to the shopping cart
before they check out. They will also have an option for a speedy delivery with an additional
cost. The shopping cart will also take care of the intricate details such as adding tax rate before
the total price of the shopping cart is displayed. Customer will receive an email about the
confirmation of the order. Customer can then later login at any time and view their previous
orders to check the status of the delivery or simply for verification.
The site will also cater to an Administrator who will have the privileges to modify the
product information and also add new products into the site. This will help the administrator in
regular maintenance of the site depending on the available stock. To gain Administrator
privileges, a customer has to select an option of administrator when creating an account in the
website.
The website also provides a functionality where the user can create username and
password and log in at any time. We will maintain a session for each user to store the shopping
cart. The user will also be able to securely logoff after a successful purchase without
compromising any of their personal details.
4

5. FashionToday.com
System Requirements
2.1 Application Requirements:
✓ Microsoft Internet Explorer
✓ Mozilla Firefox
✓ Google Chrome
2.2 Hardware and Software Requirements:
Hardware:
✓ Intel Pentium Processor at 1.8ghZ or higher
✓ 1GB RAM or higher
✓ 100 Mbps Ethernet adapter or higher
Software:
✓ Windows XP/Windows Vista/Windows 2000/Windows 7/Windows 8 with SP 1 or
higher
✓ Microsoft Visual Studio 2008 or higher
✓ SQL Server 2008R2
5

6. FashionToday.com
Project Design
In order to design a web site, the relational database must be designed first. Conceptual
design can be divided into two parts: The data model and the process model. The data model
focuses on what data should be stored in the database while the process model deals with how
the data is processed. To put this in the context of the relational database, the data model is used
to design the relational tables. The process model is used to design the queries that will access
and perform operations on those tables.
Data Model
A data model is a conceptual representation of the data structures that are required by a
database. The first step in designing a database is to develop an Entity-Relation Diagram (ERD).
The ERD serves as a blue print from which a relational database maybe deduced. Figure 1 shows
the ERD for the project and later we will show the transformation from ERD to the Relational
model. I’m using SQL Server 2008 R2 to store the data for this website. Following is the list of
tables and the detailed column names, data types and if the column should accept nulls. The
diagram represents the relationships between tables giving us a blueprint of the database .
!
6
Figure 1 Entity Relationship Diagram

7. FashionToday.com
Database Design
In this section, the basic structure of the tables composing the database for the project are
shown along with information about primary and foreign keys.
1. Users:
2. Products:
7

8. FashionToday.com
3. Product Types 4. ProductInOrder
5. Payment 6. Order
7. OrderStatus 8. Size
8

9. FashionToday.com
9. Email 10. Colors
11. Bank
9

10. FashionToday.com
Final Table Schemas
Here are some of the table after installed them on Microsoft SQL
10

11. FashionToday.com
Process Model
A Process Model tells us about how the data is processed and how the data flows from
one table to another to gather the required information. This model consists of the Functional
Decomposition Diagram.
11
FashionToday.Com
AdministratorCustomer
Add/Edit inventory
Update/Edit Cus.Status
Browse
Search
Cancel
item
Create
Shopping
Cart
New User Registration
User Profile
Purchase
Place an Order
Shopping Details
CheckOut
Update # of Purchase
Credit Card
Update Customer
Notifications
Figure 2 Functional Decomposition Diagram.

12. FashionToday.com
Functionalities
User Interface Design
Before implementing the actual design of the project, a few user interface designs were
constructed to visualize the user interaction with the system as they browse for products, create a
shopping cart and purchase products. The user interface design will closely follow our
Functional Decomposition Diagram.
This paper will go through a registration, login and customer’s purchase flow to display
the shopping experience on the website.
Flow One: Registering as an administrator. Load the website. Employee have an access
to add or discard any items that has been published by the dealers. Enter details in the register
section as an administrator and then click on “Register”
12
Home Page

13. FashionToday.com
Login/Registration Page
Registration successful:
13

14. FashionToday.com
Flow Two: Login as an administrator
After the registration has succeed, administrator can enter the correct username and
password in the login section and then click “Login” to do their job such as add new product,
update, delete and update customer status. The image below presents the process of Adding a
new product.
Flow Three:
Product added successful: The only one who can edit and delete any products are
administrators. An administrators will be able to add all the information that the product require.
14

15. FashionToday.com
Flow Four:
Customer : Customer needs to register before add items to the shop cart and fill in the most
important information such as (Full Name, E-mail, Username and Password)
15

16. FashionToday.com
Registration successful: After that customer will be able to login and start shopping
Now, customer can navigate between the products and be able to select what they need to
purchase
16

17. FashionToday.com
Shopping can begin; Customer needs to enter the quantity and color then click on “Add to cart”
It now displays the shopping cart along with shipping and tax details.
17

18. FashionToday.com
On the final confirmation page, customers should make sure that the credit card and
shipping details are correct before hitting on submit. Customers will also be able to check their
order after submitting the order and see the status of this order.
18
Customers will also be able to
check their order

19. FashionToday.com
Flow Fifth: Administrators can login and change the status of the order from pending,process to
shipped and delivery.
19
Order before change
This icon include
pending,Process,
Shipped, Cancel
and Deliver

20. FashionToday.com
Flow Six: Checking the orders. For this flow, customer login on, then click on their profile icon
to see their order status and to see any email that website may send. Now, customers can click on
“Orders” where they can see their previous orders. They can also cancel the order before it
shipped.
20
order status changed
to processed

21. FashionToday.com
Customer may logout of the website when they finish shopping and they are welcome to come
back any time.
21

22. FashionToday.com
Conclusion
The Internet has become a major resource in modern business, thus electronic shopping
has gained significance not only from the entrepreneur’s but also from the customer’s point of
view. For the entrepreneur, electronic shopping generates new business opportunities and for the
customer, it makes comparative shopping possible.
In this project, the user is provided with an e-commerce web site that can be used to buy
cosmetic online. To implement this as a web application we used ASP.NET as the Technology.
ASP.NET has several advantages such as enhanced performance,
This project helps in understanding the creation of an interactive web page and the
technologies used to implement it. The design of the project which includes Data Model and
Process Model illustrates how the database is built with different tables, how the data is accessed
and processed from the tables. The building of the project has given me a precise knowledge
about how ASP.NET is used to develop a website, how it connects to the database to access the
data and how the data and web pages are modified to provide the user with a shopping cart
application.
22