Final Report

Project: Vinotemp Online Store

Author: Ken HoangCS491B

Date: June 09, 2005Dr. Sun

I

Table of Content

1. INTRODUCTION..................................................................................................1

2. TECHNOLOGICAL BACKGROUND........................................................1

3. SYSTEM ANALYSIS & DESIGN.................................................................2

3.1 USE CASES..........................................................................................................23.1.1 Customer Interface.....................................................................................33.1.2 Admin Interface..........................................................................................5

3.2 SEQUENCE DIAGRAMS.......................................................................................73.2.1 Customer Interface.....................................................................................73.2.2 Admin Interface..........................................................................................8

3.3 WEBPAGE DIAGRAMS........................................................................................93.3.1 A general diagram of the Customer Side...................................................93.3.2 A general diagram of the Admin Side......................................................11

WEB PAGE......................................................................................................................11

4. IMPLEMENTATION DETAIL....................................................................11

4.1 ADMIN SIDE......................................................................................................124.1.1 Create Username & Password..................................................................124.1.2 Login..........................................................................................................124.1.3 Delete items...............................................................................................124.1.4 Modify items..............................................................................................124.1.5 Query Sale.................................................................................................124.1.6 Query Information....................................................................................124.1.7 Logout........................................................................................................13

4.2 CUSTOMER SIDE...............................................................................................134.2.1 Categories are selected..............................................................................134.2.2 Search Products........................................................................................134.2.3 Buy Items...................................................................................................134.2.4 Continue Shopping...................................................................................134.2.5 View Cart...................................................................................................134.2.6 Change Quantity (in View Cart page)......................................................134.2.7 Remove Items............................................................................................134.2.8 Checkout....................................................................................................134.2.10 Sign-in.......................................................................................................134.2.11 Billing/Shipping Information...................................................................134.2.12 Change (in Bill/Ship Information page)..................................................144.2.13 Submit (in Bill/Ship Information page)...................................................144.2.14 Delete Order (in Confirm page)...............................................................144.2.15 Send Order (in Confirm page)..................................................................14

5. CONCLUSION....................................................................................................14

7. FUTURE WORK................................................................................................15

II

WORKS CITED..............................................................................................................16

APPENDIX A...............................................................................................................17

Appendix B.....................................................................................................................19

III

Vinotemp: An Online Store

Abstract: This report covers the design and implementation of the shopping cart in

‘Vinotemp’, which is the name of the company that I am working for. The application is

implemented in PHP and consists of two main components: Admin and Customer side.

Admin side consists of the features such as Creating Username & Password, Input Items,

Modify Items, Delete items, Query Sale Data, Query Database’s data, and Logout.

Customer side consists of the features such as Select Products, Search Products, Buy

Items, Continue Shopping, View Cart, Checkout, Sign-in, Creating an Account, Bill/Ship

Information, Confirm, Send Order, and Delete Order. There are also the future works for

this application.

1. Introduction

The main goal of this project was to create a shopping cart, which allows customers to

shop and purchase the Vinotemp products online. Moreover, the project is also designed

in such a way it lets managers manage the products information online.

The Vinotemp online store sells wine cellars. Customers can orders products, and they

will be contacted to further process the orders.

2. Technological Background

The tools used to develop the shopping cart include:

- PHP scripting language

- MySQL database server

- Apache server

- HTML

- Text Editor

PHP is a server side scripting language designed specially for the Web. Within an

HTML page, PHP code can be embedded and it will be executed each time the page is

visited. PHP is an Open Source product. PHP source code can be accessed, used,

altered, and redistributed without any charges.

MySQL is a very fast, robust, relational database management system (RDBMS). A

database enables the users to efficiently store, search, sort, and retrieve data.

1

Apache server interprets the PHP code at the Web server and generates HTML or other

output that the visitor will see.

Text editor such as Textpad is used to write the coding in plain text that the Web server

can recognize and translate into binary code.

There are advantages of using these tools to develop and run the software. Apache

server, MySQL server, and PHP are free to download from the internet if one does not

have any tools.

3. System Analysis & Design

The system was analyzed and designed before implementation began. In this section, use

cases, sequence diagrams, and webpage diagrams are described in details.

3.1 Use Cases

The following use cases outline the requirements for the online shopping.

They have been revised during the course of the project to more accurately reflect the

system.

2

3.1.1 Customer Interface

1. Customer shops for a productThe customer initiates this action by clicking on the desired category for item to

be displayed. The page sends a message to the server requesting a listing of all

products from the particular category from the database. The action is complete

when a page is returned for the customer to view, which contains available

products with product names along with their picture, price, capacity, and an

option to add the product to the shopping cart. There is an option to link to next

page, if more products are available than can fit on the page. If a given item is out

of stock, a drop down button with a message “not available” is displayed.

2. Customer searches for item

3

The customer starts this action by typing a query into a text box named

description to search for description of an item. The page sends a message to the

server asking for a listing of products, whose names match the query, from the

database. The action is complete when a page is returned for the customer to

view, which contains a list of the resulting products along with their picture,

price, and an option to add the product to the shopping cart. If a given description

doesn’t match with any descriptions in the database, a message indicating such is

displayed instead of the option to add to cart. The customer can also search for an

item using model number or combination of both description and model.

3. Customer adds an itemThe customer initiates this action by clicking on the buy button on the right side

of to a product’s listing. An item is added to the cart including the price and

displayed with the total price. If the product already exists in the customer’s cart,

its quantity is increased by 1. There is a Continue Shopping button for the

customer to continuing shopping for other products.

4. Customer views cartThe customer initiates this action by clicking on the view cart button, available on

any webpage. The page sends message to the server and shows a list of all

products in the customer’s cart, along with their quantity and total price.

5. Customer removes item from cartThe customer starts this action by clicking on the Remove button on the view cart

page. The web page sends a message to the server, which removes the product

from the customer’s shopping cart.

6. Customer changes quantity from cartThe customer starts this action by changing the quantity of the item and clicking

on the Change button on the view cart page. The web page sends a message to the

server, which updating the product from the customer’s shopping cart.

7. Customer checks outThe customer starts this action by click on checkout button the on the view cart

page. A check out page is displayed letting the customer to create a new account

4

or sign in depending the customer status. An existing customer would sign in

his/her email address and password and click sign in button. The web page is

sending the message to the server. Then, the server validated the email address

and password from the database. If they are both correct, then a shipping and

billing information page is displayed letting the customer to fill out the

information. After submitting billing and shipping information, a confirmation

page is displayed showing item in the customer’s cart and billing and shipping

information.

8. Customer sends orderThe customer starts this action by clicking on the send order from Confirm

Information page. Once send order button is clicked, the page is sending the

message to the server, which sends emails to the customer and sale person. It

also stores the customer’s cart and billing and shipping information into the

database.

3.1.2 Admin Interface

.

5

1. Admin logs in The admin starts this action by inputting the username and password and clicking

on the submit button. The page is sent the message to the server to validate the

information from the database. After successful validation, the logged in page is

returned with options for the admin to add, modify, or delete products, or query

information.

1. Admin inserts itemThe admin starts this action by clicking the Input Items button from the logged in

page. The page is displayed with a form for the admin to insert item and its

details. Once Insert button is clicked, the web page sends this information to the

server, which in turns stores it in the database.

2. Admin removes item The admin starts this action by clicking on the Remove Items button. The web

page is displayed a drop down menu for the admin to send the item he/she wants

to delete. Once, delete button is clicked, the page is send message to the server

which in turns tells the database to remove the item

3. Admin modifies item The admin starts this action by clicking on the Modify Items button. The web

page is displayed a list available products from the database. The admin then

chooses the item he/she wants to modify by clicking on particular item. A page is

displayed letting the admin to modify all item information, except its UPC code

and model name. Once, the Modify button is clicked, the web page sends a

message to the server, which updating the information from the database.

4. Admin queries informationThe admin starts this action by clicking on the Query Sales button. The web page

is displayed, allowing the admin query by period model, or order ID for the sales

information. Once, Query button is clicked, the page is sent message to the server

which in turns requests all sales that match the query from the database.

6

3.2 Sequence Diagrams

The next step is to develop scenarios through sequence diagrams. The sequence diagram

below outlines the requirements for online shopping

3.2.1 Customer Interface

Front End: web browser; Back End: web server; DB : database server

7

3.2.2 Admin Interface

Front End: web browser; Back End: web server; DB : database server

8

3.3 Webpage Diagrams

3.3.1 A general diagram of the Customer Side

Link :

Button:

Web page:

9

submit

confirm.php

A description for the above diagram can be describes as follows:

A customer finds an item to buy by browsing or searching from the categories.php

page. A list of products is displayed. After the customer adds an item to the

shopping cart, the add_to_cart.php page displays the cart’s contents. When the

shopping cart is not empty, the customer can view the cart. In the add_to_cart.php

page (view cart), an item can be removed from the cart or its quantity can be changed.

When the customer clicks on the check out button, the check_out.php page displays a

form for customer to sign in or create a new account. After signing or creating the

account, the bill_ship_infor.php page shows the form for the customer to input the

information. After submitting the billing or shipping information, the

check_bill_ship_infor.php page displays the billing and and shipping information so

that the customer can make a change or submit the desired information. After that

action is done, the confirm.php page displays with cart and billing and shipping

information before the customer sends the order or deletes the order.

10

3.3.2 A general diagram of the Admin Side

Link:

Web page

Like Customer’s webpages, this diagram represents a general look of the admin side through webpages. After logging in, an administrator can input item, delete item, modify item, or query information from the database.

4. Implementation Detail

In the Admin and Customer side, for each feature (e.g. feature Create Username &

Password in Admin side), there are classes’ function(s) or PHP codes in web pages

involving to process the requests from users or display the results on the web pages. The

descriptions of the classes’ functions are in the Appendix A.

11

Delete

4.1 Admin side

4.1.1 Create Username & Password

Validating username and password

Storing valid username and password in database

The PHP codes in creating_userpass.php are used for these processes.

4.1.2 Login

main(): validate the username and password (in check_userpass.php)

4.1.3 Delete items

The PHP codes in the delete_item2.php page are used to delete the item selected

from database and update database.

4.1.4 Modify items

The PHP codes in the queryTable3.php page are used to display the selected item

to be modify on the web page.

The new input data is validated by using the PHP codes in the validate_Input.php

page.

If it is valid, the modified item data is stored in database by using the PHP codes

in the make_change_item2.php page.

4.1.5 Query Sale

validate_from_to() in the query_sales.php page is used to validate the time , from

and to.

process_query() in the query_sales.php page is used to query data from database

and display the result on the webpage.

4.1.6 Query Information

Functions get_customer(), get_order_detail(), get_order_main(), or

get_inventory() in the query_infor_page.php page is used to query the data from a

table in the database and display the data on the webpage for viewing.

4.1.7 Logout

The PHP codes in the login_admin.php page is used to unset the username and

password session variables.

12

4.2 Customer side

4.2.1 Categories are selected

displayItems() displays a list of items on the web page.

calculateProductListing() calculates numbers of rows for the result. This value

parameter is used to query data for each page to be displayed, five items for each

page.

displayPage() displays page result being view (e.g. ‘View page 1 of 5’)

4.2.2 Search Products

displayLinkPage() and displaySearchItems()

4.2.3 Buy Items

addToCart()

4.2.4 Continue Shopping

displayItems(), calculateProductListing(), and displayPage()

4.2.5 View Cart

viewCart(), calculatePrice()

4.2.6 Change Quantity (in View Cart page)

viewCart(), calculatePrice()

4.2.7 Remove Items

viewCart(), calculatePrice()

4.2.8 Checkout

displayForm()4.2.9 Create an Account (in Checkout form)

validateNewUser(), insertNewUserData()

4.2.10 Sign-in

validateSignIn()

4.2.11 Billing/Shipping Information

printBillShipForm2(), printInvalidBill(), printInvalidShip()4.2.12 Change (in Bill/Ship Information page)

printBillShipForm2(), printInvalidBill(), printInvalidShip()

4.2.13 Submit (in Bill/Ship Information page)

printItemsConfirm()

13

4.2.14 Delete Order (in Confirm page)

unsetAllGlobalVariables() in the Confirm.php page is used to erase shopping cart

and sign-in or new user information

4.2.15 Send Order (in Confirm page)

sendOrder(), insertSaleTable(), and unsetAllGlobalVariables()

4.4 DatabaseTables: cat1_cat2cat1_cat2_cat3cat2_cat3categorycategory_Listinventory

customersorder_detailorder_mainsale

(See Appendix B for more details)

5. Conclusion

The application is working well so far, and it is easy to install and use. However, feature

such as ‘Modify Item’ in the Admin side is still not working friendly. It asks users to re-

browse the image and the manual for the item to be modified. This feature will be fixed

in the future works. More designs and decorations should be added to the web pages to

make them more attractive.

7. Future Work

I will fix bugs if they are found. More features will be added into this application. For

example, payment methods such as Pay Pal or credit cards will be available on this online

14

store. The future works also enables users to customize features. Moreover, object-

oriented approach will be applied through out the application.

Works Cited

Achour, Mehdi, Friedhelm Betz, Antony Dovgal, et al. “PHP Manual”. PHP Online Manual. The PHP Group. 15 January 2005

15

<http://us3.php.net/manual/en/index.php>.

Argerich , Choi, et al. Professional PHP 4. Birmingham: Wrox Press Ltd, 2002.

Satzinger John W., Tore U. Orvik, The Object-Oriented Approach: Concepts, System

Development, and Modeling with UML

Wyke, R. Allen, Michael J. Walker, and Robert M. Cox. PHP Developer’s Dictionary.

Indianapolis: SAMS, 2001.

Appendix A

Classes’ functions and functions’ descriptions

class Category_Search

16

- displayLinkPage(Array): it passes an array parameter which contents the information such as search description, search model, number of rows, and page number to display. This information is used to calculate and to generate the number of pages for the search result . Each page contains five items. -displaySearchItems($display_page_arr): it passes an array parameter and is called to display the items of the search result.

class Bill_Ship - printBillShipForm(Array, String, String, String): it passes four parameters, an array and three strings variables. It is called to print out two forms billing and shipping on billing information page.

- stateList(): it is called to print out a drop down list ( HTML select tag) of the states of America- validateBill($bill_ship_array): it passes an array containing the information of the bill form that a customer fills in. The function validates this information and returns an array that contains the validation information - validateShip($ship_infor_array): it passes an array containing the information of the shipping form that a customer fills in. The function validates this information and returns an array that contains the validation information.- printInvalidBill($bill_invalid_array): it is called to print out the invalid field(s) in the billing information form.

- printInvalidShip($ship_invalid_array): it is called to print out the invalid field(s) in the shipping information form

class Checkout_Functions - displayForm(): it prints out a form which includes ‘Create an Account’ and “Sign- in” parts. - validateSignIn($email_pass): An array which contains email and password is passed an a parameter. The function validates the email as a username and password in the “Sign-in” form by checking if they are matching any username and password in the database. The function returns true for valid information. Otherwise, it return false. - validateNewUser($new_user, $templateInstance): An array and a instance are passed as parameters. The array contains the information about a new user in the “Create an Account” form. The instance is used to call the function connectDatabase() of the Template_Functions object. - connectDatabase(): It is a template function called to connect the database. - insertNewUserData($form_information): The parameter is an array containing all information a new user. This information is stored in database. class Dynamic_Functions - printCategories(): this function query data from database and prints out categories’ drop down lists in the sidebar part on the webpage for users to select when they shop. - display_cat1(): It prints out the first category list of items. - display_cat1_cat2($cate1, $cate2): There are two parameters are passed, the first and second selected categories. It queries data from database and prints out the first and the

17

second category list of items. If the third category is already selected and stored in the HTTP_SESSION_VARS, all three categories lists are displayed. - printSelectedCategories($view_items): An array containing selected categories which are printed in the header content (above the main content part of the page). This is to help customers view the selected categories clearer.- displayLinks($links): An array parameter is passed. This parameter containing a list of link pages, which are displayed in the sidebar part of the webpage. - printSearchBox(): It prints out description and model search boxes in the sidebar part on the left most of the webpage.

class Template_Functions - pageHeader(String): it passes a string which is the title of the webpage. It prints out the first line of a HTML page (e.g. "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN “"http://www.w3.org/TR/html4/loose.dtd">”) , and <html> , <head>, <title>, <meta>, <link>, and <body> tag elements. - pageFooter(): it prints out the line “<body></html>” to close the HTML webpage. - connectDatabase(): it is called to connect database. If the connecting database is not successful, an error message will be printed out.- headerArea($bold, $button_arr): it is called to print out the links and the phases in the header area of the webpage while a customer is shopping online. The links “Continue Shopping”, View Cart”, and “Check Out”. The phases include “Shopping”, “Billing”, “Checkout”, and “Confirm”. These phases are used to remind customers that where they are during they are shopping.

- upperSidebar(): it is a template function called to print out a HTML source code in the upper sidebar area. The line it prints is "<table><tr> <rowspan=\"2\"> <div class=\"sidebar\"> <table background=\"images/side_bar.jpg\width=\"250\" height=\"1000\"><td valign=\"top\">"); - lowerSidebar():it is a template function and prints out a HTML source code in the lower sidebar area (see appendix for the function implementation).- upperContentHeader(): it is a template function and prints out a HTML source code (see appendix for the function implementation). - lowerContentHeader(): it is a template function and prints out a HTML source code (see appendix for the function implementation).- upperContent(): it is a template function and prints out a HTML source code lowerContent(): it is a template function and prints out a HTML source code.

class Order_History - signInForm($main_arr): It prints out a form for customers to sign in to request their order history. - displayOrderHistory($main_arr): An array containing data used to connect database and query data from database. An order history page of the specific customer is displayed. class Product_Listing - calculateProductListing(): This functions calculates numbers of pages, and rows, start, and stop values. These data are used to calculate a displaying product listing page.

18

- checkDisplayPage($cat1, $cat2,$cat3,$num_rows,$each_page,$start,$row_displayed): ): It uses these parameters’ values to check if the product listing result is more or less than one page (each page displays five items). - displayPage($cat1,$cat2,$cat3,$num_rows,$each_page,$start,$row_displayed): It displays the page is being viewed.- displayItems($cat1,$cat2,$cat3,$num_rows,$each_page,$start,$row_displayed): It uses the parameters’ values to query data and displays a product listing on the webpage.

- displayButtons($button_arr): It uses the array’s data to display link buttons such as “Continue Shopping”, “View Cart”, or “Checkout”. class Shop_Functions- addToCart():It involve processing HTTP_SESSION_VARS to adds items to cart when a customer chooses to buy an item. - viewCart($link_page, $change_button, $remove_button, $ship_price):

- calculatePrice($cart): It uses parameters’ values to query data from database and calculates price for items in the cart. class Confirm - printItemsConfirm($template, $cart_items,$bill_ship_array): It uses the parameters’ values to print out cart, billing, shipping information to the confirm page for customers to take a review before they place an order. - inputOrder($template, $billing_infor, $cart_items, $all_charge): It stores order information in the database after customers send their orders. - sendOrder($email_body, $order_num, $billing_infor, $cart_items, $all_charges, $seller_email): It sends out order information to customers and shopping cart managers via emails.

Appendix B

Database Schema Definition

19

Table: category_ListFields: -categoryID: int, primary key -category1 : varchar(255) -category2 : varchar(255) -category3 : varchar(255)

Table: inventoryFields: -upc_code -model_name : varchar(255), primary key -category1 : varchar(255) -category2 : varchar(255) -category3 : varchar(255) -suggested_price: decimal(10, 2) -web_price : decimal(10, 2) -image : varchar(255) -thumbnail : varchar(255) -sale : varchar(255) -status : varchar(255) -finish : varchar(255) -discription : text -feature : text -review : text -manual : varchar(255) -brand : varchar(255) -dimension : varchar(255) -capacity : int(6) -weight : decimal(10, 2)

Table: saleFields: -model_name: varchar(255) -orderID : int(6) -quantity : int(4) -price : decimal(10, 2) -total : decimal(10, 2) -date : varchar(255)

Table: cat1_cat2_cat3Fields:categoryID: int(4), not null category1: varchar(255), not null category2: varchar(255), not null category3: varchar(255), not null

20

Table: cat1_cat2Fields: - cat1_cat2_ID: varchar(255) , not null - cat1 : varchar(255) not null- cat2 : varchar(255), not null

Table: categoryFields:categoryID: int(11), not nullcategory1: varchar(255), not nullcategory2: varchar(255), not nullcategory3: varchar(255), not null

Table: cat2_cat3Fields: - cat2_cat3_ID: int(10), not null- cat2 : varchar(255), not null - cat3 :varchar(255), not null

Table: order_detailFields:order_num: int(6), not nullquantity: int(3), not nullitem_num: varchar(255), not null

Table: order_mainFields:order_num:[int(6), not nullorder_date: date, not nullemail: [varchar(30), not nullsubtotal: decimal(7,2) unsigned, nullshipping: decimal(6,2) unsigned, not nulltax: decimal(6,2)unsigned ,nulltotal: decimal(7, 2) undigned, nullship_first: varchar(15), not nullship_last: varchar(50), nut nullship_company: varchar(50), nullship_address[varchar(50), not nullship_city[varchar(50), not nullship_state[char(2), not nullship_zip[varchar(5), not nullship_phone[varchar(12), not nullship_email[varchar(50), not nullbill_first[varchar(50), not nullbill_last[varchar(50), not nullbill_address[varchar(50), not nullbill_city[varchar(50), not nullbill_state[char(2), not nullbill_zip[varchar(5), not nullbill_phone[varchar(12), not nullbill_cell[varchar(12), nullbill_email[varchar(50), null

Table: inventoryFields:upc_code: varchar(255), not nullmodel_name: varchar(255), not nullcategory: varchar(255), not nullcategory2 varchar(255), not nullcategory3: varchar(255), not nullsuggested_price:web_price:image: varchar(255), nullsale: varchar(255), nullstatus: varchar(255), nullfinish: varchar(255), nulldescription: text nullfeature: text, nullreview: text nullmanual: varchar(255), nullbrand:varchar(255), nullcapacity: int(6), nullweight: decimal, null

Table: saleFields:model_name: varchar(255), not nullorder_id: int(6), not null quantity: int(4), not nullprice: decimal(10, 2), not nulltotal: decimail(10, 2), not nulldate: varchar(255), not null

21

Table: customersFields:email: varchar(255), not nullpassword: varchar(255), not nullfirstname: varchar(255), not nulllastname: varchar(255), not null zip: int(5), not null