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