Vino Temp

Final Report

Final Report

Project: Vinotemp Online Store

Author: Ken Hoang

CS491B

Date: June 09, 2005

Dr. Sun

Table of Content

11.Introduction

12.Technological Background

23.System Analysis & Design

23.1 Use Cases

33.1.1Customer Interface

53.1.2Admin Interface

73.2 Sequence Diagrams

73.2.1Customer Interface

83.2.2Admin Interface

93.3 Webpage Diagrams

93.3.1A general diagram of the Customer Side

113.3.2A general diagram of the Admin Side

11Web page

114.Implementation Detail

124.1 Admin side

124.1.1Create Username & Password

124.1.2Login

124.1.3Delete items

124.1.4Modify items

124.1.5Query Sale

124.1.6Query Information

134.1.7Logout

134.2 Customer side

134.2.1Categories are selected

134.2.2Search Products

134.2.3Buy Items

134.2.4Continue Shopping

134.2.5View Cart

134.2.6Change Quantity (in View Cart page)

134.2.7Remove Items

134.2.8Checkout

134.2.10Sign-in

134.2.11Billing/Shipping Information

144.2.12Change (in Bill/Ship Information page)

144.2.13Submit (in Bill/Ship Information page)

144.2.14Delete Order (in Confirm page)

144.2.15Send Order (in Confirm page)

145.Conclusion

157.Future Work

16Works Cited

17Appendix A

19Appendix B

Vinotemp: An Online StoreAbstract: 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 Databases 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.

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. 3.1.1Customer Interface

1.Customer shops for a product

The 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

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 doesnt 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 item

The customer initiates this action by clicking on the buy button on the right side of to a products listing. An item is added to the cart including the price and displayed with the total price. If the product already exists in the customers 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 cart

The 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 customers cart, along with their quantity and total price.5. Customer removes item from cart

The 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 customers shopping cart.

6. Customer changes quantity from cart

The 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 customers shopping cart.

7. Customer checks out

The 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 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 customers cart and billing and shipping information.

8. Customer sends order

The 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 customers cart and billing and shipping information into the database.

3.1.2Admin Interface

.

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 item

The 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 information

The 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.

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.1Customer Interface

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

3.2.2Admin Interface

Front End: web browser; Back End: web server; DB : database server3.3

Webpage Diagrams

3.3.1A general diagram of the Customer Side

Link :

Button:

Web page:

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 carts 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.

3.3.2A general diagram of the Admin Side

Link:

Web page

Like Customers 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.

4.1

Admin side

4.1.1Create 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.2Login

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

The PHP codes in the delete_item2.php page are used to delete the item selected from database and update database.

4.1.4Modify 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.5Query 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.6Query 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.7Logout

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

4.2

Customer side

4.2.1Categories 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.2Search Products

displayLinkPage() and displaySearchItems()

4.2.3Buy Items

addToCart()

4.2.4Continue Shopping

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

4.2.5View Cart

viewCart(), calculatePrice()

4.2.6Change Quantity (in View Cart page)

viewCart(), calculatePrice()

4.2.7Remove Items

viewCart(), calculatePrice()

4.2.8Checkout

displayForm()

4.2.9Create an Account (in Checkout form)

validateNewUser(), insertNewUserData()

4.2.10Sign-in

validateSignIn()

4.2.11Billing/Shipping Information

printBillShipForm2(), printInvalidBill(), printInvalidShip()

4.2.12Change (in Bill/Ship Information page)

printBillShipForm2(), printInvalidBill(), printInvalidShip()4.2.13Submit (in Bill/Ship Information page)

printItemsConfirm()

4.2.14Delete Order (in Confirm page)

unsetAllGlobalVariables() in the Confirm.php page is used to erase shopping cart and sign-in or new user information4.2.15Send Order (in Confirm page)

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

4.4 Database

Tables:

cat1_cat2

cat1_cat2_cat3

cat2_cat3

category

category_List

inventory

customers

order_detail

order_main

sale

(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 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

.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 Developers Dictionary. Indianapolis: SAMS, 2001.Appendix A

Classes functions and functions descriptions

class Category_Search

- 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 formclass 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 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. "