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.

Home page

Electrical Type shopping page

Acoustic Type shopping page

Specific Item shopping page

Specific Item shopping page

Shopping Cart Shopping Cart

About us

Contact us

Return Policy

Login Page

Registration Ordering Admin

Shipping /Billing

Modifying Products

Website Hierarchy

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 tablesOverall: 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 Orders Table

Particular User TableShopping Cart 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 multi-

view. – 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 information3.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 information2.To add product from database3.To change product information

The labor division of our group

UI Design

Database

Login Product Shopping

Administrator

Testing

Kushal X X X X X

Sahil X X X X

Simeng

X X X X X

Xingmeng

X X X X

Thank you!!!