Design of
GuitarWorld.com
Group 11:
- Kushal Prasad
- Sahil Mehta
- Simeng Li
- Xingmeng Du
The structure of our design demo
•
•
•
•
•
•
Web description and Features
Website Heirarchy
Database Design
Function module
Modules function and its design.
The division of labor
Website Description
• GuitarWorld.com is a high quality online guitar store,
aiming at providing a large variety of the latest high
quality guitars among the most common brands and
types.
• We offer different ways of finding guitars that suit
your need according to type, price and brand.
• On our online store you may find your dream guitars
not only with good quality but also with unique
personalities.
Features
• To find pryoduct by name, type and brand
• To comment the product you buy.
• To provide detail information like the history of the
guitar.
• To rate the product.
Website Hierarchy
Home page
About us
Return
Policy
Contact
us
Acoustic Type
shopping page
Electrical Type
shopping page
Specific Item
shopping page
Specific Item
shopping page
Shopping Cart
Shopping Cart
Login
Page
Registration
Ordering
Admin
Shipping
/Billing
Modifying
Products
The Database Design
• We have 6 tables.
1. Order_details Table
2.Orders Table
3.Comments Table
4.Particular User Table
5.Product Table
6.Shoppingcart Table
The Database Design
The function of these 7 tables
Overall:
The Order and Orders Table provides order information
for Administrator to check the order information.
Details:
1.Order Table provide details information about each
order,namely,UserId,order Id, address and so on.
2.Orders Table provide connection to the product with
Product ID.
The Database Design
• Moving forward to Particular User Information
Table.
• Overall: This table provide data for Personal
Information and stores registers'Information.Besides
this it can also be used to change password.
The Database Design
• Then refering to Product Table
• Overall:They are used to provide Product
Information and used for sorting guitars by price
rate.
• Detail:Product table provide details information for
each guitar, like image comment rate and so on.
• Products table is used to sort products by price and
rate. And customers could also uses brand name and
type to find particular guitar.
The Database Design
• The shopping cart table provides information like
total price, how many guitars the custormer has
bought and so on for shopping cart page.
The DataBase design
Order Table
Shopping Cart Table
Orders Table
Particular User Table
The DataBase design
Product Table
Products Table
Function Module
•
•
•
•
•
User login module
User Information module
Product Information module
Shopping Cart Information module.
Administrator managing module
Website Modules
•
•
•
•
•
User login module
User Account module
Product Information module
Shopping Cart Information module
Administrator module
Home Page
All users start from the home page when they first visit the webpage.
The webpage contains the header, sidebar, content and footer components of the
master page. The content section is populated with few popular products from the
electric and acoustic categories by default.
• The header shows our website banner and contains the user’s current login status
and options for a logged in user to logout. Also, the link to the user’s shopping cart
is provided on the header.
• The sidebar provides a convenient way for the user to navigate through the
website and narrow down their searches.
• The sidebar is based on the website’s SiteMap xml file that resides in the server.
The navigation menu and it’s hyperlinks are populated from this xml file.
• This xml file is updated dynamically when the administrator modifies the website
structure.
• The content section displays all the dynamically page specific populated
information. This is where the products are listed and product details are shown.
• This content section is populated throughout the website depending on the page
that the user is present on.
Home Page
Home Page
Home Page
Login module
Login module:
We are employing the ASP.Net provided Membership functionalities to
implement the user account creation and security & authentication
management.
There are two types of users, Administrator and regular users. These types are
managed under the roles created using Membership. These have their
respective access rights to the various pages and functionalities of the
website.
The following features are implemented in our login module:
• Login for an already existing user
• Registration for a new user
• Password resetting for an existing user
Login module - Login
• An already existing user can enter their username and
password to login to the website and access functionalities
such as shopping (ordering guitars), commenting on and
rating the products
• The login module provides an option for registering as a new
user and collects the relevant user information for future use.
• An option for resetting the user’s password after verifying the
answer to their secret question is also implemented.
• Upon successful login, the user is redirected to the Home
page.
Login module
After Login
Login module - Registration
• A new user can choose to register on our website by filling a
basic information form which updates the Membership
database accordingly
• Right after this step, we collect some detailed user
information such as their full names, addresses and phone
numbers. We use this information to suggest a possible
delivery location when users checkout of their shopping carts.
• After the forms have been validated, we redirect the newly
registered user to the homepage in logged in status. At the
end of registration, we send a confirmation e-mail to the user.
Login module - Registration
Login module - Registration
Login module – Password Reset
A user who has forgotten or misplaced their password to our
website can apply to get their password reset and e-mailed to
the registered e-mail ID.
This functionality is implemented by ASP.Net Membership. We
set up the e-mail content and SMTP server configurations based
on our website’s portal address.
The users upon resetting their passwords receives a unique
password in their e-mail account which they can use to login to
our website and later choose to change it.
Login module – Password Reset
Login module – Password Reset
Login module – Password Reset
Login module – Password Reset
Brand page
•
•
•
•
•
Using the site navigation sidebar, users can access specific brand pages.
These pages list all the products available under a specific brand.
The user can choose to sort the products based on their names, prices or ratings.
This page mainly allows users to narrow down their searches in case they have
interest in products by a specific brand.
The user can navigate to the product page by clicking on the product image or
name.
Brand page
Product Page
•
•
This page displays a particular product’s complete details.
The information contained in this page includes
– Product name, price, rating and availability (pieces in stock)
– The various images of the product (different angles etc.)
– A description of the product’s specific qualities such as it’s build, materials used, strings
used etc..
– Our return policies and shipping information are also displayed as part of the multiview.
– Commenting functions such as viewing other user comments and also adding a
comment are made available at every product page for registered users.
– Depending on the user’s login status, he/she can choose to rate a particular product.
This rating would cumulatively affect the overall rating for that product.
– The page is populated dynamically based on a request parameter containing the
product’s IDs.
• This page can be reached either through the sidebar navigation or by
selecting this product in either the default, type or brand pages.
Product Page
Product Page
Type page
• Using the site navigation sidebar, the user can access specific
guitar type pages.
• These pages list all the available products of a particular type
(ex. Electric guitars, acoustic guitars etc.)
• The user can choose to sort the products based on their
names, prices or ratings as also seen in the case of brand
pages.
• This page mainly allows users to narrow down their searches
in case they have interest in products of a specific type
• The user can navigate to the product page by clicking on the
product image or name.
Type page – Electric Guitars
Shopping Cart
•
•
•
•
•
•
Our website includes the shopping cart functionality where a user can add
products they like to their respective shopping carts.
The user can visit the shopping cart when they need to modify or finalize the
shopping cart. This is populated dynamically from the database.
Our website provides the option for users to add, delete & modify quantity (no of
product pieces) products to and from their shopping carts.
The user can navigate throughout the website and the shopping cart information
will persist. We implement this persistence by storing the cart information on our
server. This is to allow a user to resume their shopping even if they are
accidentally disconnected from the website.
When the user wants to finalize and order the products in their shopping carts,
they will be prompted to provide the delivery address information.
Our website suggests the default address provided by the user during registration
as the address for delivery. The user can choose to keep these or specify a
different address.
Shopping Cart
Shopping Cart
•
•
•
•
•
The shopping cart information is stored in the database. This table holds the
userID and productID as a composite primary key. This means that one user can
only have one shopping cart and have only one occurrence of a particular product
in the shopping cart.
If the user tries to add a product that already exists in the shopping cart, the
product quantity in the cart is incremented.
When a user checks out, the shopping cart contents are used to place an order in
the orders table. The orders table contains the orderID, productID quantity,
delivery address and other details pertaining to the order. Here, the orderID and
productID are jointly used as composite primary keys.
These records have a ‘status’ field which indicates whether the products have
been shipped or not.
This table is used to maintain a record of all the transactions and orders that take
place on our website and are accessible to the administrators.
Admin Pages
The Admin pages are a gateway to interact with the products and their details on the
website. Only users with their roles as ‘administrator’ can access these pages.
The main function provided on the admin page are:
• Users module
• Products module
• Orders module
User Module:
• The Users Module allows the admin to set roles and modify the user privileges on
the website.
• Here, the admin can search and view users and their roles.
• This functionality is there to give a provision for assigning or removing users as
administrators.
Admin Pages – Products Module
•
•
•
•
•
•
•
The product module is an interface for an administrator to add, delete or modify
products and their details.
This page lists all products sorted according to their names by default.
The admin also has the choice to search for products based on their names or
product ID’s
Once the admin goes to the product page, he can choose to modify it’s contents
or delete the product.
An add button is provided so that an administrator can add a new product to the
website.
At every stage, the administrator has a choice to reset the details to the currently
existing values in the database.
On adding a product the admin would be uploading the images and the product
details to the database’s product table.
Admin Pages – Orders Module
•
•
•
•
•
The orders module provides administrators access to the orders that have been
placed on the website.
Only the pending orders are listed by default. The administrator can choose to
view all the orders that are stored in the database as well.
On viewing orders, the administrator can choose to change their statuses and
indicate that the order has been processed and shipped.
These changes are reflected in the user account details page, where the users can
check if their orders have been dispatched.
This module’s main objective is to allow the administrator to ship the products
when they have confirmation that the money transfers have come through.
User Pages
•
The user pages are available for the user to modify their details such as:
–
–
–
–
–
•
•
Name
Phone Number
Address
E-mail address
Etcetera
The users can choose to modify their passwords as well. This functionality is
directly implemented by the ASP.Net Membership.
The user can view his/her order details and statuses on the ‘orders’ page. Here, all
the orders that the user has made on the website will be displayed. Along with
each order, it’s status will be displayed.
User Pages
User Information module
User Information module
1.loading information from databasse.
2.showing user information
3.changing user information
Product Information module
• 1.sorting guitar by brand, price, rate.
• 2.load product information from database
• 3 comment and rate function
Shopping cart module
1.Relating product and user.
2.caculating all the price and showing all the bought
product price and image information.
Administrator module
1.To check order information
2.To add product from database
3.To change product information
The labor division of our group
UI
Design
Databas
e
Login
Product
Shoppin
g
Adminis
trator
Kushal
X
X
X
X
X
Sahil
X
X
X
Simen
g
X
X
Xingm
eng
X
X
X
X
X
X
Testing
X
X
Thank you!!!