Acknowledgements

Abstract
The aim of this project is to produce a working e-commerce bakery themed website with
working functionalities and requirements specified. Upon completion of this project, the website
will be working as any other standard e-commerce business to consumer website with
customizable cake product options. The main motivation of pursuing this project is to
accomplish e-commerce website for bakery with options to customize cake product. Also, by
embracing and using latest technologies and concept such as Model View Controller (MVC)
concept Don’t Repeat Yourself (DRY) coding techniques and responsive user interface design is
great driving force in completing this project. One of main problem that I am trying to tackle is
to produce e-commerce website look similar between different media such as smartphone, tablet
and desktop. Also, another problem is to implement product customization which works well
between different types of media. In order to solve different media issue on viewing website, an
technique called responsive user interface design was implemented so that website looks great in
different medias such as smartphones and tablets. By implementing this techniques and
implementation of requirements, production of Vinn Cake House website was successful with
MVC implementation, responsive user interface design and defined requirements.
Table of Contents
Authorship Declaration....................................................................................................................2

Acknowledgements..........................................................................................................................3

Abstract............................................................................................................................................4

Table of Contents.............................................................................................................................5

List of Figures..................................................................................................................................8

List of Tables...................................................................................................................................9

Chapter 1: Introduction..............................................................................................................10

1.1 Project Background.........................................................................................................10

1.2 Project Aims....................................................................................................................11

1.3 Project Objectives...........................................................................................................11

1.4 Product Overview...........................................................................................................13

1.5 Project Scope...................................................................................................................14

Chapter 2: Analysis...................................................................................................................15

2.1 Literature Review............................................................................................................16

2.1.1 E-Commerce............................................................................................................16

2.1.2 Business to Consumer (B2C)...................................................................................16

2.1.3 Bakery using E-Commerce......................................................................................16

2.1.4 Benefit of E-Commerce for Bakery.........................................................................16

2.1.5 Authentication..........................................................................................................18

2.1.6 Authorization...........................................................................................................18

2.1.7 Encryption................................................................................................................18

2.2 Technologies used...........................................................................................................20

2.2.1 PHP..........................................................................................................................20
 2.2.2 HTML......................................................................................................................22

2.2.3 JavaScript.................................................................................................................23

2.2.4 MySQL....................................................................................................................23

2.3 Development Tools.........................................................................................................24

2.3.1 Sublime Text editor.................................................................................................24

2.3.2 XAMPP....................................................................................................................24

2.4 Requirements Specification............................................................................................25

2.4.1 Requirement Gathering............................................................................................25

2.4.2 Functional Requirement and Non Functional Requirement....................................27

2.4.3 Use Case Diagram...................................................................................................30

2.5 Methodology...................................................................................................................32

2.6 Product Constraints.........................................................................................................35

2.7 Conclusion......................................................................................................................36

Chapter 3: Synthesis..................................................................................................................37

3.1 Analysis Model...............................................................................................................37

3.1.1 Class Diagram..........................................................................................................37

3.2 Design Specification.......................................................................................................40

3.2.1 Entity Relationship Diagram...................................................................................40

3.2.2 Data Dictionary........................................................................................................43

3.3 HCI Considerations.........................................................................................................44

3.3.1 Responsive Website Design....................................................................................44

3.3.2 Website Navigation.................................................................................................47

3.4 Implementation...............................................................................................................49

3.5 Testing.............................................................................................................................56

Chapter 4: Evaluation................................................................................................................57
 4.1 Evaluation of Product......................................................................................................57

4.1.1 Important Features...................................................................................................57

4.1.2 Strengths and Weakness in Meeting Requirements.................................................58

4.1.3 Significant Techniques............................................................................................58

4.1.4 Product limitation and bugs.....................................................................................58

4.1.5 Conclusion...............................................................................................................59

4.2 Evaluation of Project Process.........................................................................................60

4.2.1 Progress against Project Plan...................................................................................60

4.2.2 Skill acquired and lesson learned............................................................................60

4.2.3 Performance Problem..............................................................................................61

4.2.4 Conclusion...............................................................................................................61

Chapter 5: Conclusion and Recommendations..........................................................................62

5.1 Conclusion......................................................................................................................62

5.2 Recommendations...........................................................................................................63

References and Bibliography.........................................................................................................64

Appendixes....................................................................................................................................68

Appendix A – Terms of References...........................................................................................68

Appendix B – Use Case Description..........................................................................................76

Appendix C – Data Dictionary...................................................................................................83

Appendix D – User interfaces of Vinn Cake House website.....................................................87

List of Figures
Figure 1 shows Use Case Diagram for Vinn Cake House.............................................................30
Figure 2 displaying prototyping model (Complex Tester, 2012)..................................................33
Figure 3 displaying Vinn Cake House Class Diagram..................................................................38
Figure 4 displaying Entity-relationship Diagram of Vinn Cake House........................................41
Figure 5 displaying website view on desktop................................................................................45
Figure 6 showing website view on mobile devices.......................................................................46
Figure 7 displays navigation and its position on top.....................................................................47
Figure 8 displays persistent navigation which always remain on top...........................................48
Figure 9 displays category website breadcrumbs..........................................................................48
Figure 10 shows product website breadcrumbs.............................................................................48
Figure 11 displaying codes of products list with sorting...............................................................49
Figure 12 displaying codes of products list with sorting...............................................................49
Figure 13 displaying individual product item................................................................................50
Figure 14 showing base function for latest products and similar products...................................51
Figure 15 showing JavaScript zoom function using elevateZoom plugin.....................................51
Figure 16 displaying implementation of image zoom and carousel for multiple photos..............51
Figure 17 displaying cake message icing input.............................................................................52
Figure 18 displaying Do It Yourself partial function....................................................................52
Figure 19 showing first part of final step on checkout and purchase save to database function...54
Figure 20 showing final step on checkout and purchase save to database function......................55
List of Tables
Table 1 summarizing analysis of existing bakery websites...........................................................22
Table 2 shows use case descriptions for Vinn Cake House...........................................................65
 Chapter 1: Introduction
1.1 Project Background
Electronic commerce also known as e-commerce can be defined as describes business that is
conducted over the Internet using any of the applications that rely on the Internet (Webopedia,
2013). Traditionally commerce is conducted direct interaction where a customer can walk into
any store and starts interact with salesman and view the products before purchasing it. Customer
could feel the product and try it before purchasing it. E-commerce have evolved the way of
transaction are being made. E-commerce has taken traditional approach and redefined it digitally.
A person can buy anything using internet with credit card or another suitable payment method.
There are thousands stores available that allow customer to purchase products from them.

E-commerce features direct interaction but it is slightly different than traditional approach. E-
commerce store lists all available information to user, also, by implementation of live chat with
sales representative and displaying similar items creates an interaction between store and user.
Operating e-commerce website cost is very low compare to running brick and mortar store. Also,
reach of e-commerce is considered globally with advertisement and help of search engine.
E-commerce is no longer strange to internet user in Malaysia. On 2010, RM 1.8 billion are spent
on e-commerce, by 2014 is it predicted to reach RM 5 billion in Malaysia (Wong, 2012). With
this rapid progression, creation of e-commerce for bakery with customized product will boost
and help bakery to make more turnover annually. Malaysia internet penetration are at 60.7% out
of 29.2 million population on year 2012, which roughly translate into 17.7million online users
(InternetWorldStats, 2012).

There are number of e-commerce solutions available, which most of them are available as open
source web application, for example, OpenCart, PrestaShop, WooCommerce and osCommerce.
These open source platform web applications provide great range of options and functionality to
web developer. These open source e-commerce web application provides generic product
placement, it is not very suitable for bakery type of store as customization of product is needed.
With keeping their implementation and structure design, a much suitable e-commerce web
application will be developed where it can cater for bakery type of e-commerce alongside with
product customization.

Besides standard e-commerce functions, product customization are to allow end user to modify
and make their own cake based on subset option provided by system administrator. This allows
more interactive features and personalization option are included to user. A user can make their
own cake by selecting their own toppings, flavors and shapes. In order to create successful
bakery e-commerce web application, extensive research will be done on HCI concepts
particularly on User Experience (UX) and User Interface (UI) and available current open source
solutions.

1.2 Project Aims

To develop an electronic commerce web application with do it yourself cake customization
option using PHP as programming language and MySQL as database with jQuery as JavaScript
library.

1.3 Project Objectives

1. Investigation and Research

a. Investigation and research into web application development.
b. Research into designing e-commerce web application for bakery
c. How to designing user interface as user friendly using HCI concepts
d. Web application security

2. Learning New and Enhance Knowledge in the following areas

a. Implementation of testing procedure into web application
b. Designing web application for multiple devices including smartphone and tablets
c. HCI concepts to create interactive web application
d. Web application development using PHP as a backend and MYSQL as a
database.
 e. Integration of do it yourself product customization concept into web application
f. UML Modeling.
g. Model View Controller development concept

3. Production of System Documentation

a. Introduction
b. Literature review
c. Requirements specification
d. Methodology
e. UML modeling
f. Implementation
g. HCI considerations
h. Testing
i. Evaluation

4. Development of E-Commerce Bakery Web Application

a. Design web application via HTML5 and CSS using Twitter Bootstrap as
framework
b. Using jQuery as JavaScript library to do product customization
c. Design MySQL database table schema
d. Using PHP to connect with database server to retrieve and save information
e. Basic web security to prevent SQL Injection, XSS attack
f. Sanitation and filtering of user input
g. Implementation of Email Service to email customers who registered or order
details

5. Investigating Open Source E-commerce solutions

a. Finding available open source e-commerce solutions
b. Compare and contrast functionality of e-commerce solutions
c. Testing and looking thru available open source e-commerce
 6. Project Evaluation
a. Evaluate the outcome of project
b. Evaluate the created website
c. Evaluate the documentation prepared

1.4 Product Overview

Bakery shop Vinn Cake House website is an e-commerce based business to consumer. Vinn
Cake House sells cakes via its website where users are able to purchase cakes without having to
go to physical store. Vinn Cake House also allows user to create their own cakes by using do it
yourself function. Vinn Cake House cakes can be added to shopping cart with multiple choices
and quantity. User can input their text messages to be iced on cake for cakes which can be iced.
Shopping cart supports adding of custom cakes and normal cakes available via website together
in a single cart. Cost calculation of cake will be displayed in realtime to user so that user can
know how much their total of purchase.

Vinn cake house allows free delivery within the great state of Penang, Malaysia. For the rest of
people outside of Penang state, they can opt to use TA-Q-BIN delivery services where Vinn
Cake House will send their cake via cold logistic services. Also, user are able to pick up their
cake at physical location of Vinn Cake House store. User is presented with two payment methods
which are by paying using third party payment system called Paypal and manual bank transfer.
Once payment are transferred to Vinn Cake House, the user can view the order invoice and their
order status will be updated by Administrator to show the status of cake.

For the backend management of Vinn Cake House, administrator can modify product
information which will be shown to frontend users. Administrator can create multiple categories
to show different types of cakes. The displayed product has to be added by administrator so that
the user can view them. Besides that, the order submitted by user are visible to administrator, the
administrator can update the cake information and print invoice to send to baker. Administrator
also can manage blogs to post latest updates and promotions about Vinn Cake house visible to
everyone. Also, administrator can view earning reports of particular date range to see how much
website have generated profit for Vinn Cake House.
1.5 Project Scope
This project scope mainly is to develop an electronic commerce business to consumer website
for Vinn Cake House. Standard e-commerce business to consumer functionality is observed after
researching implementation of similar websites. Also, business logic from Vinn Cake House is
translated into requirement specification to be implemented on website. Delivery and
coordination between Vinn Cake House staff of using website is not included in scope of project.
Also the bank transfer manual payment handling is not included in the project scope as well.
 Chapter 2: Analysis
There is plenty of e-commerce website out there which caters for various businesses. Revolving
from traditional e-commerce which requires physical present at store to selling product digitally
without needing physical present, anyone with internet connection and acceptable payment
method can purchase any item from anywhere. A user from Malaysia can buy products sold by
merchant in UK by paying using credit card. The merchant then would ship the item by using
delivery company such as FedEx or DHL. The entire process of buying product has become
easier with e-commerce.

Specialized e-commerce website for bakery in Malaysia is quite rare and low in amount. By
developing e-commerce website for bakery, I can show that they are many ways e-commerce
system can be used to attract visitors to purchase cake and make their own cake design via
website. No longer visitor have to physically present at cake store to purchase cake or to give
specified order as visitor can design their cake and view cake product within the website. Each of
e-commerce website has unique or special function which can be used and integrated on e-
commerce bakery website I am developing. As any website available on internet, e-commerce
website are prone to attack by malicious users and hackers due to confidential and sensitive data
such as user information and payment information. Finding and research from experts regarding
security breach on e-commerce website will be given extra emphasize and will be implemented
on website.

The e-commerce website for bakery developed can be used by any cake house as website
contents including title, contents can be dynamically changed by system administrator without
have to modify source files. As such, the system will be developed for fictional company called
Vinn Cake House. Vinn Cake House is conducting their business via traditional method where
user has to walk in to purchase products. After completion of this system, Vinn Cake House can
sell their products online by showing products digitally and ability to allow user to create their
own cakes.
2.1 Literature Review

2.1.1 E-Commerce
According to Rouse (2005), Electronic commerce (e-commerce) can be defined as usage of
internet together with web to make business transaction digitally. E-commerce features direct
interaction but it is slightly different than traditional approach. E-commerce store lists all
available information to user, also, by implementation of live chat with sales representative and
displaying similar items creates an interaction between store and user. Operating e-commerce
website cost is very low compare to running brick and mortar store. Also, reach of e-commerce
is considered globally with advertisement and help of search engine. E-commerce is no longer
strange to internet user in Malaysia. On 2010, RM 1.8 billion are spent on e-commerce, by 2014
is it predicted to reach RM 5 billion in Malaysia (Wong, 2012). With this rapid progression,
creation of e-commerce for bakery with customized product will boost and help bakery to make
more turnover annually. Malaysia internet penetration is at 60.7% out of 29.2 million population
on year 2012, which roughly translate into 17.7million online users (InternetWorldStats, 2012).

2.1.2 Business to Consumer (B2C)

Business to consumer e-commerce model revolves

2.1.3 Bakery using E-Commerce

There are quite many e-commerce websites catering their products to customers globally.
However, it is not same for local bakeries situated in Penang, Malaysia. Very little bakeries
owner has their own website with e-commerce functions. Few of them have their own website
displaying their products and without e-commerce function. Even, some of websites never really
update with latest products, promotions and news.

2.1.4 Benefit of E-Commerce for Bakery

E-commerce has revolutionized face of economy and the method business being operated daily.
E-commerce helps businesses to expand their reach by venturing into new territory markets. The
following points describe what the benefits of bakery using e-commerce
1. No Physical Present Required
In order to buy product, one need to be physically present on shop making product
purchase. Travelling to shop and spending money on transportation is required
before you can successfully make purchase. With implementation of e-commerce
solutions into bakeries, this will allows customers to buy products from bakery at
any time without having to go to physical location of shop. This saves customers
time and cost from having to travel.

2. Provides Rich information

Customer can learn more about products by reading the product description and
viewing images. Also, bakery owner can display rich information regarding the
product. Also, videos and other customer testimonials can be displayed to assists
customer making product purchase. Without e-commerce implementation, bakery
shop staff can only explain certain things if the staff is not busy and sometimes the
information might differ because of human error.

3. Always Online
Customer can visit and purchase product at any time even if physical shop not
operating. Bakery e-commerce shop are always online and sales transaction can be
conducted at any time. Instead of have to wait for shop operating hours and day,
customers can place order immediately.

4. Attract New Customer

Online e-commerce website attracts customers mainly from search engine using
targeted keywords. Internet users can search for matching keyword on search
engine and there is high chance that matching keyword of bakery website will be
listed in result (Schiff, 2009). Lately, there is social media network such as
Facebook, Twitter and Instagram which drives traffic to e-commerce website.
News, products, purchase order and review of bakery product shared on social
media indirectly promotes bakery brand and products. Sharing images of product
helps drive internet traffic from social media network to bakery website.
2.1.5 Authentication
In order to distinguish users, authentication system must be implemented, so that a user can
authentication themselves in the system using their own created name and password. This will
act as their personal identifier once they are authenticated. An authenticated user is able to
perform special functions designed to authenticated user than non-authenticated users.
Authentication system also prevents authorized access from others without having correct
personal identifier. Vinn Cake House uses standard username and password identification
method. From preventing malicious users from guessing or attacking user authentication, Vinn
Cake House will have a soft block if frequent wrong identifier entered.

2.1.6 Authorization
Authorization can be defined as giving permission for a type of users to perform special
functions assigned to that type (Rouse, 2006). An e-commerce system must have authorization
system to categorize type of users available on system. There are various types of users in an e-
commerce system, commons are customer and administrator. Customer type of user is able to
perform registration, checking product information, using shopping cart and buying products.
Administrator type of user handles the system by adding products, generating reports,
maintaining product data, liaising with sales team and checking system logs. Vinn Cake House
implements authorization function to allow administrator to perform system functions meanwhile
customers are able to checkout products.

2.1.7 Encryption
Encryption plays vital role in securing user data stored on database for e-commerce website.
Storing sensitive user data like password on plaintext will cause major problem if website is
compromised. Encryption can be defined as calculated process of conversion of data into
unreadable format by unauthorized person (Rouse, 2006).

Encryption needed to be implemented because:

1. Sensitive and important user data has to be encrypted so that their safety and privacy is
guaranteed from breach.
 2. Payment data exchanged between Vinn Cake House and customer has to encrypt so that
originality of data can be tracked and not tampered with by third party (ThinkQuest,
1999).
3. By encrypting data, even if data intercepted by third party while transmission, the data
would render useless because of encrypted message (ThinkQuest, 1999).

2.1.7.1 Symmetric Encryption

Symmetric encryption is a one way encryption where a secret key is applied to plaintext data
(Slaviero, 2010). For example, a plaintext called “Hello” when applied against secret key called
“abcdef9059302”, the plaintext now has become “hdsf38fh390erjfi34” which does not make any
sense to normal people. Data which have been encrypted are confidential and as long as both
sender and intended recipient knows the “secret key”, they can decipher the code and understand
the real meaning. Vinn Cake house will implement symmetric encryption on various different
aspect of site. For instance, user password will be “salted” which means the plaintext user
password will be applied against secret key to protect the password. Even if attacker manage to
get the password hash, it proves useless without “salt” secret key.
2.2 Technologies used
Vinn Cake House will be developed using PHP as programming language because PHP has good
documentation and huge community to help developer with problem for example website
www.stackoverflow.com. PHP codes are easily available on internet for reference. MySQL are
used as database for Vinn Cake House to store information such as product detail, user detail and
payment information. jQuery javascript library are used to handle instant interaction between
user and system, jQuery is used on do it yourself cake system to generate cake instantly and also
modal pop up is built on jQuery. The website are built using HTML and CSS to display to user.

Below are discussions about why the aforementioned programming languages are chosen and
used to build Vinn Cake House website.

2.2.1 PHP
PHP is one of web application development programming language. PHP is used as Vinn Cake
House programming language. The main reason why PHP was selected because of it easiness to
use and code and PHP doesn’t require complex setting it up as it comes as bundle with XAMPP
which will be discussed on tools section.

PHP justification as programming language for Vinn Cake House:

1. Cross platform compatible
a. PHP can run on all operating system such as Windows, Linux and Apple OS. This
ensure that deployment of project can be virtually made on any operating system
without having to worry about platform compatibility (PHP, 2013).
2. Open source
a. Using PHP doesn’t require to purchase or get license to run as it is open source
(PHP, 2013).
3. Easily integrate with MySQL
a. PHP can be easily use to call and work on function with MySQL database, hence
setting it up on desktop environment made easier by XAMPP tools (Angelov,
2013).
2.2.1.1 Yii Framework
Yii framework is used as Model View Controller (MVC) framework for PHP. Yii framework
allows Vinn Cake House to be developed via rapid manner without having to rewrite basic codes
where Yii framework will handle it. Yii framework encourages Don’t Repeat Yourself (DRY)
style of coding where when a function is written to repeated coding so that in case there is
changes in future, only codes in single function have to be changed for others code to take effect
(YiiFramework, 2013). Besides that, Yii framework also ensure that the application written on
top of it to be efficient, extensible and easily maintainable (YiiFramework, 2013).

There are various MVC frameworks available for PHP language. Yii Framework is mainly
selected because of
1. Automatic code generation for create, update and view based on database entity
a. This helped fast creation of database entity to be shown to user without having to
manually input each entity into PHP form.

2. Detailed documentation
a. Yii framework user manual and documentation are very extensive and detailed.
Finding information about certain function is a lot easier due to detailed
documentation (YiiFramework, 2013)

3. Vast of third party codes and plugin

a. Third party plugin such as shopping cart are available as third party plugin, where
integration is easier and can be handled in DRY manner without having to write
repeated code all over again.
2.2.2 HTML
HyperText Markup Language (HTML) is a set of markup codes that gives presentation to
website (Rouse, 2005). There are various standards for HTML, HTML 4.01 Strict, Transitional
and Frameset (W3C, 2002). Also, there is XHTML 1.0, 1.1 and the most recent are HTML5
which haven’t been consider as standard yet because of active development being made to
HTML5 specification (W3C, 2002). Vinn Cake House will use XHTML 1.1 and HTML5
scarcely to display website to user. All HTML codes will be properly written to ensure that there
are no errors or problem for user who visits Vinn Cake House.

2.2.2.1 Twitter Bootstrap

Twitter bootstrap is part of HTML, CSS and JavaScript collection to help developer to build
more consistent and nice user interface (Cochran, 2012). Twitter bootstrap has defined CSS
classes to allow developer to use it to build buttons, layout grid and navigation.

Vinn Cake House is using Twitter Bootstrap as a framework to develop the website user
interface. All user interfaces on Vinn Cake House website are produced using HTML semantic
and CSS classes based on Twitter Bootstrap. By using this, Vinn Cake House are easy to
maintain throughout interfaces without having to change to implement custom CSS classes
which might not work very well on different browsers.

Twitter bootstrap provides reusable components which allow developer to reuse the components
on single page multiple time without any conflict (Cochran, 2012). This helps faster and
consistent approach to build website. Also according to Cochran (2012), Twitter Bootstrap has
been tested multiple times against cross browsers to produce similar output.
2.2.3 JavaScript
JavaScript is one of client-side scripting language. JavaScript are used to make modification to
HTML element on the fly without having to wait for server-side processing (Coyier, 2009).
JavaScript helps form validation to appear at once to user without having to wait for server
processing, this show instantaneous message to user without having to wait output from server.
Vinn Cake House website are using JavaScript to do form validation, inserting content based on
user selection of cake types and so forth.

2.2.3.1 jQuery
jQuery is one of JavaScript library, jQuery simplifies JavaScript coding by providing a lot of
functions to achieve what can be done in JavaScript in simpler and faster way (Dubois, 2010).
jQuery is used extensively on Vinn Cake House to provide form validation, html objects
modification, display of modal popup to user and so forth. Without jQuery, wirting in native
JavaScript is a lot harder and a lot of functions have to be written again which consumes a lot of
time. So by using jQuery, writing complex interaction between HTML have been simplified by
jQuery.

2.2.4 MySQL
MySQL is a database storage system used on website. MySQL allows developer to create
relational database to hold their database schema (Blue Moose, 2013). MySQL is popularly used
with PHP and other programming language to store data and retrieve data. Unlike Microsoft
Access database, MySQL is also open source database which means no license required to install
or run it (Blue Moose, 2013).. PHP will be used to communicate with MySQL to produce user
login system and many functionalities of Vinn Cake House. MySQL is chosen to be database
vendor for Vinn Cake House mainly because of no license required and MySQL available via
XAMPP tool for easier installation and integration.
2.3 Development Tools

2.3.1 Sublime Text editor

Sublime Text editor is a file editor which acts as simple notepad but with many advance features
to helps developer to write code better and easier. Sublime text editor is the primary tool used to
write codes for Vinn Cake House. The color scheme provided by sublime text are great and not
straining to eyes instead of writing code on white background, writing on dark background
seems effective and easier to read and faster to write based on my opinion.

2.3.2 XAMPP
XAMPP is a software bundle stack with Apache webserver, MySQL server and PHP
programming language (Thakral, 2011). This comes with windows executable format where
installing XAMPP just take seconds without needing of configuration. Installing Apache,
MySQL and PHP individually would be very troublesome for people without advance
knowledge. XAMPP provides easier path to allow them run together in synergy (Thakral, 2011).
Besides that, XAMPP allow developer to set MySQL and Apache to run as service, which
means, even after restarting computer, the Apache and MySQL runs automatically without
having to manually start again.

Another important reason for using XAMPP is that, phpMyAdmin web application comes with it
where managing and editing database on MySQL is a lot easier and faster without having to
install additional software to manage MySQL. This have obviously speeds up process of
deploying database and attributes for Vinn Cake House.
2.4 Requirements Specification

2.4.1 Requirement Gathering

One of method to gather requirements about the Vinn Cake House website is to research the
functions available on similar websites who shares same model as Vinn Cake House.

An analysis will be conducted on existing bakery websites to find out which requirements can be
implemented on Vinn cake house.
1. Kaori Decorative Cakes - http://kaoricake.com.my
2. SK Homemade Cakes - http://www.skhomemadecakes.com
3. Secret Recipe - http://www.secretrecipe.com.my

Table 1 summarizing analysis of existing bakery websites

Kaori Decorative SK Homemade Secret Recipe
Navigation Has clear navigation on There are a lot of Clear and descriptive
top and bottom navigation which can be navigation
confusing
Product Display Product is clearly Products are categorized Products are categorized by
separated according to by their flavors instead their types and product
categories. Products of their types. Product is displayed by grids. Has clear
displayed has no prices displayed neatly vertical. pricing information and
or any distinctive Lacks product product information.
description information and pricing
is only available by
enquiries.
Product Search No Yes, Google Custom Yes, built-in search
Search
Communication No contact us form but Yes, with live support No information
has contact details and newsletter
Content Has general content but Well written content Well written content and
not individual content with certain product abundance of information
for their product but information only. available on website. All
 overall summary of products are descriptive with
products only available. support images and privacy,
No mention of privacy return policy and user terms
policy and user terms
Promotions Display promotions on Has promotion list Has a separate section for
mainpage but without showing images and promotions with full images
full information contains full information and information.
including full disclosure
Social Media No social media network Has Face book Badge Has Face book Like button
Network integration at all allowing users to view and share on top navigation
integration SK Face book page. which has high visibility.
Each promotion, news Products are clearly
and product has options integrated with social media
to be shared on social network where user can like,
media such as Face share and comment. This
book, Twitter and increase product exposure.
Google
Delivery Notice Free delivery on selected Make uses of TA-Q-BIN Only available on KL area
point on Penang. Can be cold logistic courier for selected post codes only
arranged for other states service on selected states
with extra charges
Shopping Cart No, manually order No, manually order Has full fledge shopping cart
using form using form with real time price updates
and order status
News and Has latest news section Has a blog roll showing Homepage shows latest news
Announcement on homepage latest news and and announcement via
announcement slideshow images
Multimedia Low usage of static Medium usage of static Rich in multimedia, contains
images images video and images slideshow
Web Usability Has clear navigation and Contain navigations and Navigation appears on top
readability of text is background is using with clear instruction, three
clear and typography is dark and font using column layout but contents
correctly used as white color creates good are greatly separated without
heading. Usage of white contrast and helps overcrowding information.
 background and white readability. However, Page background using red
text improve readability some user prefers bright color displaying corporate
background and dark color and black text for
text. better readability

The above table shows the requirements that I have gathered by visiting and researching their
functions and also by logging in and meddling with their user functions. Based on the summary
of findings, functional requirements for Vinn Cake House can be established which will be
discussed on next section.

2.4.2 Functional Requirement and Non Functional Requirement

Commonly, requirements can be categorized into two types, which are functional requirements
and non-functional requirements. Functional requirements are linked with supporting functions,
tasks and behaviors meanwhile non-functional requirements are background requirements that
needed for Vinn Cake House to work as intended.

2.4.2.1 Functional Requirement

1. Register and Login
a. Guests are able to register his account on Vinn Cake house and able to login using
same credentials.
2. Email Verification
a. Registered account should be verified by email and not able to login without
verification.
3. User management
a. User able to inquiry about products and send inquiry directly to staff.
4. Multiple addresses
a. User should be able to have multiple addresses with single default address.
5. Delivery Option
a. Delivery option should be provided for purchase made from Penang. Vinn cake
house system will request user location and handle.
b. For people outside of the state of Penang, there is delivery option provided by
utilizing TA-Q-BIN Cold Logistic services. This will cost RM20.
6. Searching product
a. Users are able to search product without having to logging in.
7. View product and detailed information.
8. Shopping cart
a. Registered users are able to use shopping cart to add product, modify quantity and
remove product from shopping cart.
9. Payment and checking out process
a. User able to checkout their shopping cart and select payment method.
b. Two types of payment method, one is pay via Paypal for credit card and another
one is via bank transfer manually.
c. System records shopping cart information and handles payment information.
10. Order status and invoice
a. System will show order status whether it has been dispatched, on process or
rejected.
b. Invoice will be emailed to user for their order.
11. Do it yourself (DIY) cakes
a. User able to create their own cakes by selecting predefined options available to
them.
b. This cake will be billed according to selected options.
12. Authorization system
a. Able to distinguish user’s type such as Guest, Registered User and
Administrators.
b. Each set of user type has specialized functions attached to them.
13. Administrator menu
a. Administrator can add products, categories and manage system settings.
b. Administrator can generate reports according to criteria such as date, amount, by
user and total sales.
c. Manage users information.
d. Manage user’s inquiry and provide customer support.
14. Blog
 a. Administrator can post updates regarding Vinn Cake House latest information and
news with image.

2.4.2.2 Non-functional Requirement

1. Performance
a. Vinn Cake House Business to Consumer function (E-commerce) website will load
under 3 seconds for optimum connection speed users.
b. System will not crash even if there is high number of visitors.

2. Security
a. Users’ data are safeguarded and encrypted with encryption method called sha1 to
prevent unauthorized access.
b. Website is protected from known exploit method such as SQL injection, XSS
attacks and Brute Force attack.

3. Usability
a. Website is following current trends and follows web 2.0 guidelines.
b. User interface and User Experience are designed to helps user to understand the
website without needing of training.
2.4.3 Use Case Diagram
Use case diagram can be defined as graphical explanation over interaction with elements, actors
and system (Rouse, 2013). Use case diagram shows system boundary where usually system
refers to system being developed. There are actors on use case diagram where actors responsible
to be owner of use cases. There are relationship between actors and uses cases such as extends,
includes, generalization and association.
Figure 1 shows Use Case Diagram for Vinn Cake House
Based on Use case diagram on figure 4, there are 4 actors in Vinn Cake House, the first actor are
Customer. Customer are main actor on this use case diagram. Administrator in charged with
handling backend of Vinn Cake House by Manage product, Manage Category and Generate
report use cases. Guest refers to Vinn Cake House visitor who haven’t logged in and just surfing
or viewing availability or product. Paypal system actor are actually system actor to handle
payment gateaway information between Vinn Cake House and paypal server.

2.4.3.1 Use Case Description

According to Ritter (2008), use case descriptions are that explain what happen on specific use
cases along with beginning and exiting condition. Please refer to Appendix B for use case
description
2.5 Methodology
A methodology generally refers to specific set of guidelines and ways to solve problems
occurred. Methodology as a body of methods, rules, and postulates employed by a discipline: a
particular procedure or set of procedures.
There are various methodologies in order to develop the on-line application for Vinn Cake
House. Methodology model such as Waterfall mode, Spiral model and agile model are more
focused on software development. Website development although same as software development
in core but the approach and extra steps needed for website development that is not available on
software development .A general review conducted before selecting better methodology. A
general comparison is conducted among methodology to find out which suits better for Vinn
Cake House Business to Consumer website development.
 1. Waterfall
a. Projects in waterfall model flows steadily throughout the phases of planning,
analysis, design and implementation.
b. Waterfall model requires requirement to be concretely defined as changes to
requirement during middle of phases requires initial planning again.
2. Dynamic Systems Development Method (DSDM)
a. Development of project involves short phase’s time to develop and fix bugs all
together. DSDM based on agile model is very flexible as requirements can be
changed at any time and the processes of implementation of new requirement are
in short time span (Agile Modeling, n.d.).
b. More web applications keen to follow agile modeling because of frequent updates
to codebase and functionality and new code can be added in rapid manner.
3. Prototyping
a. Projects done using prototyping model focuses on prototype versioning instead of
developed final version. Prototyping model usually involves incremental
prototyping which requires client feedback for each prototype.
b. Requirements changes can be integrated on next prototype version and allows
easier maintainability.

Figure 2 displaying prototyping model (Complex Tester, 2012)

Waterfall model is not suitable for Vinn Cake House type of project is because waterfall model
has huge lifecycle where once implementation phase has finished, changes in requirements takes
a lot of time to be started back on implementation. The main issue with waterfall model is that
system can only be produced at very late stage of lifecycle (Alam, 2012). Prototypes are not an
option in this methodology as Vinn Cake House will be developed directly without any
prototyping. So user feedback cannot be gained until Vinn Cake House are completed.

Dynamic Systems Development Method (DSDM) does not required requirements to be well
constructed but allows for progressive requirement to be added or removed. This can hinder
development time if requirements are constantly changed by client. Also, DSDM requires
constant involvement from client for their input on the processes where Vinn Cake House client
are not readily available.

Based on research conducted and information collected from internet, Prototyping methodology
is selected to develop the online application Vinn Cake House. The main reason to select the
prototyping as project methodology is because of rapid development of prototype. Each features
or modules are break into prototype and prototype is developed for each module rather than
building entire part of Business to Consumer website. Figure 1.0 displaying prototyping model,
Design Phase, Prototype Phase, Evaluation Phase and Review Phase are constantly (Complex
Tester, 2012).
2.6 Product Constraints
There are few constraints and limitations in Vinn Cake House online system. Since Vinn Cake
House online application also part of E-commerce, there is some limitation and constraint of E-
commerce. Below are list of constrains for Vinn Cake House business to customer e-commerce
online system.

Connectivity Issue
In order to use Vinn Cake House, user must have an active internet connection and able to surf
Vinn Cake House website to purchase products. Without an internet connection, user cannot
make use of Vinn Cake House.

Payment Method
User must follow payment option provided by Vinn Cake House. Vinn Cake House accepts
PayPal and Bank transfer as payment options. Vinn Cake House online services do not accept
payment by cheques.
2.7 Conclusion
After thorough and extensive analysis conducted on similar websites, we know the strengths and
advantages can be used to implement into Vinn Cake House website. Based on software to build
in this system, PHP is selected as scripting language and usage of JavaScript and jQuery
facilitate website to be more interactive. Also, by using MySQL as database engine, performance
is guaranteed and support for MySQL can be obtained from normal forums in case any problem
occurred. Requirements divided into functional requirements and non-functional requirements,
requirements identified will facilitate in development and design phase of Vinn Cake House. By
using prototyping methodology, online application for Vinn Cake House can be use to built a
final model of website instead of building the entire website at once.
 Chapter 3: Synthesis
All technical and design development are produced on synthesis chapter. Analysis model will
produce class diagram meanwhile design overview will produce entity-relationship diagram.
Also, data dictionary of entity-relationship diagram and use case description describing each use
case stories are produced on synthesis chapter. HCI considerations explains about user interfaces
usability and accessibility. Usability encompasses everything on websites, the way how it looks,
how the navigation formed and how is the color contrast. Meanwhile, accessibility refers to
people with disabilities can understand and interact with Vinn Cake House website.
Implementation section discusses about interesting and critical code of Vinn Cake House website
and also implementation problem and how these problems are solved. Final section of synthesis
chapter are testing, on this section, testing conducted on Vinn Cake House are discussed and
explored with deliverable of test case plan and strategies.

3.1 Analysis Model

Analysis model explains the Vinn Cake House implementation of data and objects based on
requirement analysis on functional and non-functional requirement identification.

3.1.1 Class Diagram

According to Rouse (2007), a class diagram can be defined as display of relationship and
dependencies of actual code among classes in Unified Modeling Language (UML). A class
contains operations and variables in an object.
Figure 3 displaying Vinn Cake House Class Diagram

Based on requirement specification, Vinn Cake House requires two types of user which are
Customer and Administrator, Administrator class responsible to check user level and permission
to allow to access administrator panel of Vinn Cake House. Based on {figure} User class has
been generalized into two generalization class which are Customer and Administrator. Vinn
Cake House requires products to be displayed to users, Product class has matching attributes
such as images, description, title, price and so forth. This products requires to be matched with
categories, Category class holds each products to a category. Also, user able to create their
custom cakes, so Custom class handles their custom cake product. So one Category can have
many Product. Furthermore, Vinn Cake House requires administrator to create coupons, there are
two types of coupon. Coupon class generalized into Fixed class and Percentage class, where
fixed coupon reduce price by fixed amount whereas percentage coupon reduce price by
percentage amount.

Customers able to purchase products displayed on Vinn Cake House. Each product can be
purchased with different quantity and different cake text message, so Purchase class has one to
many Order. Order class responsible to handle different Product with different quantity amount
and update Purchase class. User must be able to select payment method from Paypal and bank
transfer. Payment class have been generalized into Paypal class and BankTransfer class to
operate different types of payment method.

Besides that, Vinn Cake House requirement stated that each user is able to have many addresses
associated to them. So, Address class has been generated with default attribute to select one
default address. Also, user who have purchased product must be able to leave reviews and
ratings of product. ProductComment class handles this information with rating of quality, tasty
and value. ProductComment class saves comment and getRatings summary for each particular
cake. Blog class have been created to handle latest news and posting from Vinn Cake House.
3.2 Design Specification
Design specification provides information regarding database design including its data dictionary
and HCI consideration taken while developing Vinn Cake House website.

3.2.1 Entity Relationship Diagram

According to Rouse (2007), entity-relationship diagram can be defined as display of database
entities and its relationship among them.
Figure 4 displaying Entity-relationship Diagram of Vinn Cake House
There are total of 12 entity mapped on diagram. Users entity responsible to store users data such
as username, realname, email, password, last login, level and status, level attributes differentiate
between customer and administrator of Vinn Cake House. Status attribute of Users entity refers
whether the account is active or not. If the account is not active, the user cannot login into Vinn
Cake House. Based on functional requirement, users can have many addresses, Addresses entity
stores address information and set default address based on user selection.

Product entity stores all information about products such as product title, category, description,
price and type. Type attribute refers to whether the product is added by administrator or custom
product which created by user via do it yourself function. Each product must belongs to a
category. Categories entity can have one or many relationship with products entity. Each product
can have one or many relationship with Product_images, these images will be displayed on
product. Product entity can have reviews and ratings for product, this is connected by one to
many relationship with Product_comments, each ratings and reviews are saved under
Product_comments.

Users can make purchases where Purchases entity stores purchase information such as
shipping_type, payment_type, paid_status and so forth. This attributes responsible to store
purchase information whether the user has paid or not, user selects which shipping method and
payment method. Purchases entity can have one or many Orders, this Orders entity responsible to
store particular product, quantity and price. Price are stored to make sure that previous successful
purchases price doesn’t change if the admin decided to delete product or alter product price.
Requirement stated that each cake can have its own icing message, to store each messages for
cake and its quantity, Order has one or many relationship with Order_Messages. Purchases
required payment information to be stored, Payment entity has type, data, reference no, account
no and so forth attributes. Type attribute refers whether the payment is made via Paypal or bank
transfer. Payment entity and Purchase entity has one to one relationship.

Customers of Vinn cake house can apply coupons to their products. Coupons entity are related to
Purchases by one to one relationship where user can have one coupon applied to their purchase.
3.2.2 Data Dictionary
Data dictionary can be defined as accumulation of objects on a data model (Rouse, 2005). Data
dictionary shows comments and table type including whether the column is null or not. Data
dictionary are derived from database after implementation based on Entity-relationship diagram.
Please refer to Appendix C for data dictionary.
3.3 HCI Considerations
When designing user interfaces for website, there are a lot of considerations to be taken into
context to produce usable and friendly user interface. According to Rouse (2005), usability is a
measure of product designs to meets its objectives and goals.

3.3.1 Responsive Website Design

Responsive websie design was recently popularized due to various medias size such
smartphones, tablets and desktops available to view website. This has brought a new concept of
desgining website to cater all different sizes of medias. The screen size varies among this
devices, so in order to for Vinn Cake House remains presentable on all devices. Responsive
website design have been implemented with the help of Twitter Bootstrap framework.

According to Taylor (2013), responsive website design are important as one size to rule them all
because it enhances user experience and doesn’t cause mobile devices users to use desktop
version size of website. This increases higher chance for more people visit Vinn Cake House due
to availability of website on all available mobile devices size. Besides that, Taylor (2013),
assures that responsive website design is easier to manage than to create each size design for
devices.
Figure 5 displaying website view on desktop
Figure 6 showing website view on mobile devices

Vinn cake house as on iPhone4 simulator. The images are shrinked to fit the medias size and
navigation are hidden and shown as a button at right hand top, once pressed it will dropdown and
display all navigation vertically to fit into screen size of mobile device.
3.3.2 Website Navigation
Website navigation plays important role in presenting website pages and its depth. According to
research conducted by Nielsen (2000), navigation are very useful to determine structure of
website. Without navigation user are lost on where to go or what to do on website. Navigation
should be placed on top where the most visible area to user. Besides that, navigation must be
consistent throughout website in order not to confuse user (Nielsen, 2000). Vinn Cake House
navigation are statically fixed on top with consistent navigation throughout website page. Also,
Vinn Cake House navigation are stays at top even when scrolling down page to make it appear
consistent and persistent to user for quicker and faster navigation.

Figure 7 displays navigation and its position on top

Figure 8 displays persistent navigation which always remain on top

3.3.2.1 Website Breadcrumbs

Website breadcrumbs are secondary navigation to show where user are currently at. This acts as
subpart of navigation. According to Vasile (2011), breadcrumbs improves overall user
experience as user are constantly know where they are in websites. Vinn Cake House
implements breadcrumbs onto its design to show user where they are at all the time.

Figure 9 displays category website breadcrumbs

Figure 10 shows product website breadcrumbs

3.4 Implementation
This section will discuss about Vinn Cake House website critical and interesting parts of code.

Figure 11 displaying codes of products list with sorting

Figure 5 shows controller of product list, the dataProvider is set to display all product with status
of 1 which means only product added by administrator are shown on products list, custom
product created by user is not shown. In order to make product well aligned, pagination for
products list are set to 16 products, 16 products is selected to show 4 x 4 products on list.

Figure 12 displaying codes of products list with sorting

Figure 6 shows all products display with sorting option, the sorting option is made use of Yii
Framework sorting option without having to write the sorting option function which saves time.
To prevent from writing repetitive code, Yii Framework allows itemView to be passed where
each product will make use of codes on {figure}to load each individual item.

Figure 13 displaying individual product item

Figure 7 shows individual each product to be generated based on the code. This each individual
item are formed together a collection of list. Coding shows that product image are loaded based
on image path saved on database, the image are stored on uploads folder. addToCartButton
function shows the button either add to cart to remove based on cart condition whether the
product have been added or not.
Figure 14 showing base function for latest products and similar products

Latest products and similar products displayed on sidebar when viewing product and product
information are actually using single base function to show different products. This function
accepts two arguments which are condition and limit. The condition can be passed to show
whatever product that have to be displayed. Type is always set to 1 to avoid custom product from
user to being fetched. Model are queried using Product::model() to show all active record of
product based on criteria supplied. This simplifies the process without having to call native PHP
MySQL function with string query.

Figure 15 showing JavaScript zoom function using elevateZoom plugin

Figure 16 displaying implementation of image zoom and carousel for multiple photos
Coding on figure 9 is jQuery code to initiate zoom function to all html classes of hasZoom, by
doing this, whenever, there is image with class of hasZoom, the image will be automatically has
zoom function. Figure 10, shows the implementation of zoom function on view product page. If
there is multiple image, images will be shown as carousel instead of single image, this is by
checking the count of productImage, if there is more than 1, then image carousel will be shown.

Figure 17 displaying cake message icing input

One of problem encountered during displaying cake icing messages to user was on how to
produce multiple input and to save them in database. So to solve the problem, it’s first checked
whether the cake is allowed to be icing or not by seeing if textable is set to 1. Then, for loop is
used to loop against quantity of product, then each quantity will have message to input, for
example, if a cake quantity is 3, 3 input messages will be shown to user. Then this message will
be saved under order_mesages with order_id.

Figure 18 displaying Do It Yourself partial function

Do it yourself is one of main problem encountered during development of Vinn Cake House. In
order to make it work on mobile, the implementation of flash cannot be done. So the only option
left is to use JavaScript. Do it yourself cake function are mainly built using jQuery with a
combination of jQuery plugin called ddSlick, ddSlick enhance html dropdown by allowing
image and description to be displayed on dropdown. The onselected function refers once an
option is selected, updateCakeSelection is called to performed. updateCakeSelection function is
to check if previous selected do it yourself function image exist, if it exist, remove the image.
Then the function add a HTML image handler, then cake image is set upon the image handler to
display latest selection of cake option. Then, the image is applied with zooming function, lastly,
the description of cake based on type, filling and flavor are shown.

The second part of the problem was to integrate this custom product into shopping cart. As
custom product cannot be saved into database as normal product, so to overcome it, all products
with different types of cake are prepopulated into database, which means, any cakes user
selectable on do it yourself function are actually already exist on database, this acts as passive
product where it will not show up on normal products listing because of different types.
Figure 19 showing first part of final step on checkout and purchase save to database
function

Shopping cart are used from third party library for Yii Framework, this library are integrated
with Vinn Cake House to allow customers to add products to the shopping cart. First, the data
from previous information are stored on purchase session. This session are read on final
checkout, during final checkout, the selected coupon are calculated based on their type which are
fixed or percentage, then shipping type is evaluated and if it’s 1, RM 20 added to total price
based on their products quantity and amount. There will be validation occur to check whether
address is selected for shipping type of delivery and TA-Q-BIN shipping, meanwhile for self-
pickup option, time of pickup is checked. If these options are selected, the purchase model are
called upon and all data attributes belonging to them are set. Once data is set, the data is saved on
Purchases model and this save will populate database table purchases. Figure 14 will continue
the second part of the above function.

Figure 20 showing final step on checkout and purchase save to database function

Once the main purchase is saved as described on figure 13 explanation, the next step is to save
orders for each products with their quantity, this is done by setting up the orders model attributes,
the purchase id which are already saved on database is used to save all orders, so that the foreign
key links is there to identify which orders belongs to which purchases. Once order are saved,
then order message is called upon to save each quantity of particular products as multiple
messages can be saved for single product with more than 1 quantity. Lastly, Payment model is
called to save payment information, first Payment model attributes are linked to user submitted
form data and then purchase id are set, lastly save function is called to save into database. After
saving function is done, session information about shopping cart, purchase and coupon are
removed. Then a successful purchase message displayed to user and redirects to order page.
3.5 Testing
Testing is a process of checking system or its components with the idea on finding out whether it
completes and finishes the specified requirements or not (Pan, 1999). By running testing
procedures, the results can be categorized as expected, unexpected and differences between the
intended results of development. In a nutshell, testing is finding a problem within system in order
to identify any bugs or errors and the differences within specified requirements (Pan, 1999). The
main objective of doing testing is to make sure objective and requirements of the project are met
without any flaw or errors. For example, login system on Vinn Cake House must not allow
random username and password to login, each username and password must be checked against
database to ensure it is validity and a user cannot access administrator functions. To ensure this,
testing process must be carried out. There will be two testing method conducted to verify and
validate Vinn Cake House functions. One of the method are Black-box testing and another one is
white-box testing. Test case plan will be prepared before conducting test on Vinn Cake House
website.

3.5.1 Black-box Testing

According to Rouse (2008), black box testing is a test conducted by tester without having any
information regarding source code or functionalites of system. Tester conduct testing by seeing
what is shown and what happen to user input when entered into website. Tester can enter any
input they want to test the system. Vinn Cake House black box testing will be done in such
manner, even though the code are well known for me. Stil, I will keep my level best to test as a
guest tester trying to think as a third party tester to test Vinn Cake House website. Based on this
testing method, test plan will be created and their expected outcome will be written down for
further evaluation and fixes to system.

3.5.2 White-box Testing

White-box testing is a testing method where testing will be done over system by analysing
current coding structure and functions (Rouse, 2007). Tester conducting white-box testing have
good knowledge on how the system works and their internal code structure. By knowing this
information, test cases can be planned to attack the system and try to fail the test cases. If the test
cases fails, we will aware that coding for particular function aren’t working as expected. For
Vinn Cake House website, white-box testing conducted by analysing the coding and
functionality code, this code will be evaluated and tested after test case plan derived. If the test
fails, the expected and actual outcome will be noted and further evaluation and fixes will be done
to fix the problem.

3.5.3 Testing Analysis

Please refer to Appendix D for test cases. Test cases are divided into two sections, one is user
functions and another one is administrator functions. Based on testing according test case, there
are bugs found. When testing with entering username and password correctly, there is no login
successful message, by conducting white-box testing, I’ve found that there should be successful
message should appear once user logged in. Also, I’ve found out that whenever product added to
shopping cart, the actual product wasn’t added, this showed on black-box testing that even tester
without knowing the code able to identify the bug availale on website.

Besides that, I have fixed the mentioned above bugs by going thru the implementation code and
the testing was redone again to produce test result. This time, the test was passed. Also, updating
cake quantity doesn’t show multiple text input for cake messages, this means even if 4 cakes
added into shopping cart, only message can be left for a single cake, the rest 3 cakes message
couldn’t be added. This have been rectified and messages can be added for all cakes.

By conducting testing a lot of bugs and errors can be identified and fixed in order to create better
working website for Vinn Cake House. Without using black-box and white-box testing, these
bugs couldn’t be found out and will cause error when user tries to buy cakes. Also, if there is
user acceptance testing, with this bugs, the clien’t will not accept the final product.
 Chapter 4: Evaluation

4.1 Evaluation of Product

Implementation of Vinn Cake House website is evaluated to find out how far its critical objective
is met. One of critical objective for Vinn Cake House is to develop the coding using Model View
Controller concept. By doing heavy research on MVC concept and PHP programming language,
Yii Framework was implemented to product MVC concept website development. Vinn Cake
House are running fully under Yii Framework. Another critical objective of Vinn Cake House is
to research open source e-commerce projects and related websites to derive and enhance its
requirement. This has been done by implementing all requirements stated on functional and non-
functional requirement section.

4.1.1 Important Features

One of important features of Vinn Cake House system are do it yourself cake creation. A user
can create their own cake by combining available cake type, cake flavor and cake fillings. This
function allow user to add their own custom text message to cake, including changing different
combination of cake type and flavor.

Other important features of Vinn Cake House are shopping cart. Vinn cake house shopping cart
allows users to enter multiple cake icing messages despite allowing user to combine custom do it
yourself cake and with normal cake products. For example, setting 2 quantities to a cake, allows
text to be entered twice and the same applied to custom do it yourself product as well.

Besides that, another important feature is to implement Paypal payment gateaway with Vinn
Cake house system. User able to make payment to Vinn Cake House by utilizing Paypal
merchant system, this has been done by implementing Paypal Application Programming
Interface (API) codes. Vinn Cake House website also sends and receives input from Paypal
server. This codes will be saved and status of transaction will be displayed to administrator and
users.
4.1.2 Strengths and Weakness in Meeting Requirements
Even though some requirements are harder to be implemented onto product, this has been done
successfully. All requirements have been carefully planned and analyzed to save time from form
changing them frequently to fit development of e-commerce website. Also, starting the
development early in timeline helps to meeting requirements as plenty of time is available to
study and research each requirements and how to be implemented. One of weakness is that
during development, requirements changes to product requested by supervisor couldn’t be
implemented as fast due to multiple function prototypes is being develop simultaneously.

4.1.3 Significant Techniques

One of significant technique used to develop Vinn Cake House website is to use Model View
Controller approach to development. This have save tremendous amount of development time
because of availability of code and MVC promotes reusable coding and components. This has
fasten up development time as most of function that required to be developed on native PHP is
readily available with Yii MVC framework. Also, usage of HTML framework Twitter Bootstrap
has further decrease development time because of availability of proper HTML semantics and
CSS classes. By using this classes and JavaScript components provided by Twitter Bootstrap
framework, a consistent and cross browser compliance product are achieved.

4.1.4 Product limitation and bugs

Vinn Cake House doesn’t support credit card processing by itself because of security issue,
however it has been found out that not everyone in Malaysia has Paypal account and might find
it harder to use. Another limitation of Vinn Cake House website are only English language are
supported. Different languages used in Malaysia aren’t available to user because of translation
issue. Translating the language needs extra time and effort. All bugs have been spotted on testing
phase and have been ironed out to make the system as bug free as possible.
4.1.5 Conclusion
If I were to given chance to start the project back, I would consider implementing other payment
gateway which is more usable for Malaysian people without Paypal account. Also, Vinn Cake
House currently do not have sufficient accessibility option for people with disabilities to use, so I
would definitely incorporates this into product for everyone to have same level of usage
experience.
4.2 Evaluation of Project Process
Project process started when Terms of References (TOR) was drafted and submitted to
supervisor for approval. Once TOR approved, TOR was main guiding point to start the project
documentation and development. Firstly, literature review was done according to objective set on
TOR, literature review was extensively done on researching how to create e-commerce website,
what e-commerce underlying concepts and how does Business 2 Consumer e-commerce website
model is implemented. Once literature review was concluded, the second part of research is to be
done on technologies going to be used on developing the website. Based on initial research
during creation of TOR, one of objective was identified is to use PHP and MVC concept on
developing Vinn Cake House. Besides that, the project methodology is to use Prototyping model
to produce quick prototypes about the system without having to produce full system. Multiple
prototyping was developed and shown to supervisor for an approval.

4.2.1 Progress against Project Plan

Project plan which was drafted during proposal of TOR, has been used as main project planning
guideline. The actual project and project planning was off by a lot because of frequent changes in
system and this makes following timeline proposed harder. For example, implementation of
project took a lot of time due to new areas to be explored such as MVC concepts and HTML
Framework. The concept of implementation was found out while researching for one of
implementation objectives. This has changed duration of project planning because of new
element introduced which wasn’t included in project plan.

4.2.2 Skill acquired and lesson learned

There are a lot of skills acquired during development of Vinn Cake House website. One of main
skills acquired was to be open to embrace new technologies and its concept. By learning MVC
concept, I have been lead to a great PHP framework which is Yii Framework. This framework
has simplified development time by a lot. This is a skill which will be carried in future. Also, by
following prototyping methodology, I have learned that creating a website isn’t about developing
for one single time for all functions, instead, each functionality can broke into prototypes and can
be integrated with other components to produce a full system. Most importantly, I have learned
about time management, time management is a very important aspect in producing a good
product and its documentation or not. By not following project planning carefully and
meticulously, I have lost precious working hours and was late in schedule. Also another
important skill I have acquired was to draw UML diagrams, I have learned on how to draw a
proper and correct class diagram for software engineer project. Also, drawing entity-relationship
diagram and planning its entity, relationship and attributes have made translation the design into
database a lot easier.

4.2.3 Performance Problem

There was few missed milestones due to lack of time available, even though the project was
started very early, still time has been issue on this project. Implementation milestone was pushed
behind by 3 weeks due to introduction of new technologies which wasn’t researched at TOR
level. This has creates problem because of different implementation than what was researched.
The aforementioned new technologies for me were MVC and usage of Twitter Bootstrap HTML
framework on development system. Learning this has been taken as challenge and Vinn Cake
House has been successfully built using this framework and concept. Also, writing literature
review and requirement specification were having problem and have further delayed the
progress. My inability to understand how to write a good literature review and requirement
specification has caused more consultation from supervisor which late the project schedule by
month.

4.2.4 Conclusion
Developing Vinn Cake House website has been a good experience for me to learn about software
engineering processes and tools. Writing documentation has shown me that documentation are
equal important as development as strong documentation allow better technical understanding of
system. Given second chance, I would put more effort on researching a lot more on TOR level
and produce a more appropriate project planning by taking various problem into consideration as
mentioned before on previous section.
 Chapter 5: Conclusion and
Recommendations
5.1 Conclusion
By undertaking this project, I have learned a lot of new interesting things to be added to my
arsenal. This project developing an e-commerce website for Vinn Cake House has helped me a
lot to gain new skills in researching and developing website.

The analysis phase of this project consist of literature review where I had researched about e-
commerce functions and its meaning. I have learned that authorization and authenication are
required for e-commerce website and how it can be implemented on the project I am doing. Also,
I have learned that encryption are standards to encrypt user senstivie data such as payment
information and user password. I too have learned about websites development programming
language such as PHP, HTML, JavaScript and jQuery. By learning this programming language, I
can develop websites now because of newly gained skills. Prototyping methodology have shown
me how to do prototypes for each smaller functions and built the system at once after all
prototypes have been completed instead of doing websites at on single round which consumes a
lot of time.

Synthesis phase of this project have taught me on how to do analysis model, analysis the
requirements into class diagram and also I have learned about design specification such as
entity-relationship diagram and its data dictionary. Futhermore, HCI techniques such as
responsive website design has taught me that using single design, I can cater for multiple devices
viewing.

Besides that, I have done evaluation on project and its processes. Evaluation helped me to
rethink my apporaches on developing the project and my project strength and weakness. Also,
evaluation done on processes helps me to consolidated methods used and on how to improve on
future projects and undertakings.
5.2 Recommendations
There are some requirements haven’t been explored at the stage of requirements specification.
This project can be extended by

1. Implementing SMS system for order notification

a. Whenever, user successfully made payment, an sms should be sent to user
informing about the order. This allow user to keep track the latest status of
orders made.
b. When payment and shipping status changed, SMS should be sent informing
them about this changes.
2. Live chat customer support
a. Another extension could be done to project is to add live chat customer support
to website where Vinn Cake House administrator or staff can provide live chat
support to users.
3. Extending manual bank transfer payment into automatic
a. Currently, payment for bank transfer are manual and have to be reviewed by
staff or administrators. By implementing Mobile88 Payment gateaway this can
be supported.

Currently, the sales report for administrators are not very extensive and doesn’t show a lot of
information about sales reporting. This are one of shortcoming of this project. Besides that,
another shortcoming of this project that there are no dashboard for administrators of Vinn Cake
House. Dashboard showing latest orders, latest products, latest categories created and new users
all in a glance should be implemented to make administrating job easier.
 References and Bibliography
Carnegie Mellon University. 1999. Software Testing. [online] Available at:
https://www.ece.cmu.edu/~koopman/des_s99/sw_testing/ [Accessed: 01 Jun 2013].

CSS-Tricks. 2009. You Know You Should Use JavaScript When... | CSS-Tricks. [online]
Available at: http://css-tricks.com/you-know-you-should-use-javascript-when/ [Accessed: 15 Jun
2013].

InternetWorldStats. 2012. Asia Internet Stats Facebook Subscribers and Population Statistics.

[online] Available at: http://www.internetworldstats.com/asia.htm [Accessed: 02 May 2013].

KaoriCake. 2013. Kaori Decorative Cakes - Penang Cakes At Your Doorstep!. [online]

Available at: http://kaoricake.com.my [Accessed: 03 May 2013].

Knowledgement from Target Integration. 2011. What is XAMPP?. [online] Available at:

http://www.knowledgement.ie/technical/programming/what-is-xampp [Accessed: 2 Jul 2013].

Malaysia Crunch. 2012. Malaysia's E-Commerce Statistics (Updated) | Malaysia Crunch.

[online] Available at: http://www.malaysiacrunch.com/2012/03/malaysias-e-commerce-
statistics-updated.html [Accessed: 15 Jun 2013].

Oracle. 2010. Introduction to JQuery. [online] Available at:

http://www.oracle.com/technetwork/java/intro-jquery-166845.html [Accessed: 10 Jul 2013].

Project Management. 2008. Project Management and Business Analyst Glossary. [online]

Available at: http://certifedpmp.wordpress.com/2008/09/17/project-management-and-business-
analyst-glossary/ [Accessed: 15 Jun 2013].
TechTarget. 2010. What is authentication, authorization, and accounting (AAA)? - Definition
from WhatIs.com. [online] Available at:
http://searchsecurity.techtarget.com/definition/authentication-authorization-and-accounting
[Accessed: 01 Jun 2013].

Secret Recipe. 2013. Secret Recipe. [online] Available at: http://www.secretrecipe.com.my

[Accessed: 29 Jul 2013].

SK Homemade Cakes. 2013. [online] Available at: http://www.skhomemadecakes.com

[Accessed: 29 Jul 2013].

Slaviero, M. 2010. Symmetric Encryption. [online] Available at:

https://www.simple-talk.com/dotnet/.net-framework/symmetric-encryption/ [Accessed: 10 Jul
2013].

TechTarget. 2005. What is e-commerce (electronic commerce or EC)? - Definition from

WhatIs.com. [online] Available at: http://searchcio.techtarget.com/definition/e-commerce
[Accessed: 15 Jun 2013].

TechTarget. 2006. What is encryption? - Definition from WhatIs.com. [online] Available at:

http://searchsecurity.techtarget.com/definition/encryption [Accessed: 15 Jun 2013].

TechTarget. 2005. What is HTML (Hypertext Markup Language)? - Definition from WhatIs.com.

[online] Available at: http://searchsoa.techtarget.com/definition/HTML [Accessed: 15 Jun 2013].

TechTarget. 2013. What is use case diagram? - Definition from WhatIs.com. [online] Available
at: http://whatis.techtarget.com/definition/use-case-diagram [Accessed: 15 Jun 2013].

ThinkQuest. 1999. Introduction & History of Encryption. [online] Available at:

http://library.thinkquest.org/27158/history.html [Accessed: 2 Jul 2013].
Tutorialzine. 2011. Building a Website with PHP, MySQL and jQuery Mobile, Part 1 |
Tutorialzine. [online] Available at: http://tutorialzine.com/2011/08/jquery-mobile-product-
website/ [Accessed: 01 Jul 2013].

TutsPlus. 2012. Twitter Bootstrap 101: Introduction | Webdesigntuts+. [online] Available at:

http://webdesign.tutsplus.com/tutorials/complete-websites/twitter-bootstrap-101-introduction/
[Accessed: 05 Jul 2013].

W3.org. 2002. W3C QA - Recommended list of Doctype declarations you can use in your Web
document. [online] Available at: http://www.w3.org/QA/2002/04/valid-dtd-list.html [Accessed:
02 Jun 2013].

Webopedia. n.d. Electronic commerce (ecommerce). [online] Available at:

http://www.webopedia.com/TERM/E/electronic_commerce.html [Accessed: 05 May 2013].

YiiFramework. 2013. About Yii | Yii PHP Framework. [online] Available at:

http://www.yiiframework.com/about/ [Accessed: 19 May 2013].

1st Web Designer. 2011. Introduction to Responsive Web Design. [online] Available at:
http://www.1stwebdesigner.com/design/introduction-responsive-web-design/ [Accessed: 24 Jun
2013].

Nielsen Norman Group. 2000. Is Navigation Useful?. [online] Available at:

http://www.nngroup.com/articles/is-navigation-useful/ [Accessed: 24 Jun 2013].

Nielsen Norman Group. 2007. Breadcrumb Navigation Increasingly Useful. [online] Available

at: http://www.nngroup.com/articles/breadcrumb-navigation-useful/ [Accessed: 24 Jun 2013].

Search Engine Watch. 2013. 3 Reasons Why Responsive Web Design is the Best Option For Your
Mobile SEO Strategy. [online] Available at: http://searchenginewatch.com/article/2253965/3-
Reasons-Why-Responsive-Web-Design-is-the-Best-Option-For-Your-Mobile-SEO-Strategy
[Accessed: 24 Jun 2013].

TechTarget. 2005. What is usability? - Definition from WhatIs.com. [online] Available at:

http://searchsoa.techtarget.com/definition/usability [Accessed: 14 Jun 2013].
 Appendixes
Appendix A – Terms of References

Project title
Development of electronic commerce website with customizable product for bakery shop

Background to Project
Electronic commerce also known as e-commerce can be defined as describes business that is
conducted over the Internet using any of the applications that rely on the Internet (Webopedia,
2013). Traditionally commerce is conducted direct interaction where a customer can walk into
any store and starts interact with salesman and view the products before purchasing it. Customer
could feel the product and try it before purchasing it. E-commerce have evolved the way of
transaction are being made. E-commerce has taken traditional approach and redefined it digitally.
A person can buy anything using internet with credit card or another suitable payment method.
There are thousands stores available that allow customer to purchase products from them.
E-commerce features direct interaction but it is slightly different than traditional approach. E-
commerce store lists all available information to user, also, by implementation of live chat with
sales representative and displaying similar items creates an interaction between store and user.
Operating e-commerce website cost is very low compare to running brick and mortar store. Also,
reach of e-commerce is considered globally with advertisement and help of search engine.
E-commerce is no longer strange to internet user in Malaysia. On 2010, RM 1.8 billion are spent
on e-commerce, by 2014 is it predicted to reach RM 5 billion in Malaysia (Wong, 2012). With
this rapid progression, creation of e-commerce for bakery with customized product will boost
and help bakery to make more turnover annually. Malaysia internet penetration are at 60.7% out
of 29.2 million population on year 2012, which roughly translate into 17.7million online users
(InternetWorldStats, 2012).
There are number of e-commerce solutions available, which most of them are available as open
source web application, for example, OpenCart, PrestaShop, WooCommerce and osCommerce.
These open source platform web applications provide great range of options and functionality to
web developer. These open source e-commerce web application provides generic product
placement, it is not very suitable for bakery type of store as customization of product is needed.
With keeping their implementation and structure design, a much suitable e-commerce web
application will be developed where it can cater for bakery type of e-commerce alongside with
product customization.
Besides standard e-commerce functions, product customization are to allow end user to modify
and make their own cake based on subset option provided by system administrator. This allows
more interactive features and personalization option are included to user. A user can make their
own cake by selecting their own toppings, flavors and shapes. In order to create successful
bakery e-commerce web application, extensive research will be done on HCI concepts
particularly on User Experience (UX) and User Interface (UI) and available current open source
solutions.

Aim of Project
To develop an electronic commerce web application with product customization option using
PHP as programming language and MySQL as database with jQuery as JavaScript library.

Objectives
1. Investigation and Research
a. Investigation and research into web application development.
b. Research into designing e-commerce web application for bakery
c. How to designing user interface as user friendly using HCI concepts
d. Web application security
e. MVC concept development

2. Learning New and Enhance Knowledge in the following areas

a. Implementation of testing procedure into web application
b. Designing web application for multiple devices including smartphone and tablets
c. HCI concepts to create interactive web application
 d. Web application development using PHP as a backend and MYSQL as a
database.
e. Integration of do it yourself product customization concept into web application
f. UML Modeling.
g. Model View Controller development concept

3. Production of System Documentation

a. Introduction
b. Literature review
c. Requirements specification
d. Methodology
e. UML modeling
f. Implementation
g. HCI considerations
h. Testing
i. Evaluation

4. Development of E-Commerce Bakery Web Application

a. Design web application via HTML5 and CSS using Twitter Bootstrap as
framework
b. Using jQuery as JavaScript library to do product customization
c. Design MySQL database table schema
d. Using PHP to connect with database server to retrieve and save information
e. Basic web security to prevent SQL Injection, XSS attack
f. Sanitation and filtering of user input
g. Implementation of Email Service to email customers who registered or order
details

5. Investigating Open Source E-commerce solutions

a. Finding available open source e-commerce solutions
b. Compare and contrast functionality of e-commerce solutions
 c. Testing and looking thru available open source e-commerce

6. Project Evaluation
a. Evaluate the outcome of project
b. Evaluate the created website
c. Evaluate the documentation prepared

Project Planning – Gantt Chart

Expected Product Items

The proposed project will be built using PHP as programming language, MySQL as database
storage. For frontend, HTML5 will be used, for scripting, jQuery a JavaScript Library. Also
usage of CSS for styling HTML elements. The MVC (Model-View-Controller) approach will be
taken to build the web application for better maintainability, scalability and future enhancement.
Relationship to Course
Familiar knowledge/skills
• Data Structures and Algorithms : Basic data structures and algorithms
• Systems Analysis/Design/Testing : Professional software application development
process
• Foundation Of Human Computer Interactions : HCI designing concepts
• Integrative Consultancy Project : Develop minor projects
• Dynamic Internet Technologies : Develop skills in html, xml, PHP and AJAX.
• Database Programming : Create database in MySQL
• Software and Data Modelling : Introduction to Software Modelling
• Applied Professional Management : Software Project Management Skills.

New skills, developments and knowledge to be enhanced

• Developing E-Commerce Web Application using PHP and MYSQL with Apache as
webserver
• Knowledge on the Javascript, AJAX, jQuery and Adobe Flash
• Integration of product customization using JavaScript(jQuery) onto web application.
Resources required / Bibliography

Webopedia (2013) electronic commerce (ecommerce). [online] Available at:

http://www.webopedia.com/TERM/E/electronic_commerce.html [Accessed: 10 Mar 2013]

Wong, C. (2012) Malaysia's E-Commerce Statistics (Updated) | Malaysia Crunch. [online]

Available at: http://www.malaysiacrunch.com/2012/03/malaysias-e-commerce-statistics-
updated.html [Accessed: 11 Mar 2013]

InternetWorldStats (2012) Malaysia Internet Usage and TelecommunicationsReports. [online]

Available at: http://www.internetworldstats.com/asia/my.htm [Accessed: 12 Mar 2013].

W3Schools (2013) PHP Introduction. [online] Available at:

http://www.w3schools.com/php/php_intro.asp [Accessed: 15 Mar 2013].

Oracle (2013) MySQL | The Most Popular Open-Source Database | Oracle. [online] Available at:
http://www.oracle.com/us/products/mysql/overview/index.html [Accessed: 14 Mar 2013].

Apachefriends (2000) apache friends - xampp. [online] Available at:

http://www.apachefriends.org/en/xampp.html [Accessed: 19 Mar 2013].

Shea, D. (2013) css Zen Garden: The Beauty in CSS Design. [online] Available at:
http://www.csszengarden.com/ [Accessed: 18 Mar 2013].

jQuery (2013) jQuery. [online] Available at: http://jquery.com/ [Accessed: 18 Mar 2013].

Resources - statement of hardware / software required
Software:
Adobe Dreamweaver/Notepad++ to design HTML and code PHP and connects to Database
XAMPP provides Apache, MySQL and PHP software stack bundle.
Microsoft Office Package to make documentation and charts
Adobe Fireworks to create logo, banner and images
PHPMyAdmin to control database objects via web interface

Hardware:
Desktop PC (Acts as server and client)

Structure and contents of project report

• Chapter 1: Introduction
• Project Background
• Aims
• Objectives
• Product overview
• Project Scope

• Chapter 2: Analysis
• Literature Review
• Technologies Used
• Development Tools
• Requirements Specification

• Chapter 3: Synthesis
• Analysis Model
• Design Specification
 • Implementation

• Chapter 4: Evaluation
• Evaluation of Product
• Evaluation of Project Process

• Chapter 5: Conclusion and recommendations

• Appendixes

Marking scheme
Report
            + Analysis (30 mark):
• Chapter 2

            + Synthesis (30 mark):

• Chapter 3

            + Evaluation (30 mark):

• Chapter 4
Product
          + Fitness for Purpose: 40%.
          + Build Quality: 60 %.
Appendix B – Use Case Description

Table 2 shows use case descriptions for Vinn Cake House

Use case name Login
Actor Guest
Description Allow guest to authenticate into system as user. Authorize user into their type
(customer or administrator)
Flow of events 1. User pressed login
2. Login form is displayed
3. User enters username and password
4. System verifies user entered information
5. Redirects to user profile page
Alternative flows 3a. Empty form submitted, exit with error
4a. Wrong username and/or password entered
4b. System display error and show option for password reset
5a. If user is suspended, show suspended account notice
Preconditions User haven’t been logged in and site is not on maintenance mode
Post conditions
Extension points 1. Register
2. Forgot Password

Use case name Register

Actor Guest
Description Allow guest to register an account
Flow of events 1. User pressed register
2. Register form is displayed
3. User enters required information
4. System verifies user entered information
5. Sends email and wait for activation
Alternative flows 3a. Empty form submitted, exit with error
4a. Username and/or email already exist
4b. System asks user to select another email or username
Preconditions User haven’t been logged in
Post conditions
Extension points

Use case name Forgot Password

Actor Guest
Description Allow guest to reset email associated account password
Flow of events 1. User pressed Forgot Password
2. Forgot Password form is displayed
3. User enters email and/or username
4. System check for email and/or username availability in system
5. Sends reset password email instruction
Alternative flows 3a. Empty form submitted, exit with error
4a. Username and/or email does not exist, exit with error
5a. Email cannot be delivered, inform user and wait further action from user
Preconditions User haven’t been logged in
Post conditions
Extension points
Use case name Logout
Actor Customer
Description Allow customer to reset his session and logout from website
Flow of events 1. User pressed logout
2. Redirected to homepage

Alternative flows
Preconditions Customer must been logged in and is in active session
Post conditions
Extension points

Use case name Contact Us

Actor Customer, Guest and Customer Service Staff
Description Customer and Guest can send an email to Vinn Cake House, this email received by
Customer Service Staff employed by Vinn Cake House.
Flow of events 1. User pressed contact us
2. Show contact us form with fields
3. Sends email to Vinn Cake House and a copy to user email
Alternative flows 2a. Empty form submitted, exit with error
2b. Challenge code entered wrongly, exit with error
Preconditions
Post conditions
Extension points

Use case name Browse Product

Actor Customer and Guest
Description Vinn Cake House products can be browsed and checked for information
Flow of events 1. List of products showed on Vinn’s product page
2. Additional information displayed along with product image and rest.
Alternative flows
Preconditions Vinn’s has atleast one product category and product on the website.
Post conditions If user type is customer, able to add to cart
Extension points
Use case name Search Product
Actor Customer and Guest
Description User can search for product via keywords
Flow of events 1. Display search form
2. Display products with matching keyword
Alternative flows 1a. Empty form submitted, exit with error
Preconditions Vinn’s has atleast one product category and product on the website.
Post conditions
Extension points

Use case name View Categories

Actor Customer and Guest
Description User can view available categories and description
Flow of events 1. User pressed view categories
2. List of categories and description displayed
Alternative flows
Preconditions
Post conditions Error displayed if Vinn’s has no categories
Extension points
Use case name Create custom product
Actor Customer
Description Customer able to create their own cake based on predefined options and text input
Flow of events 1. User pressed DIY Cake on navigation
2. Options are displayed to user to select
3. User able to add their own text on the option
4. Generate cake based on select options and their text
5. Add custom product to shopping cart
Alternative flows 4a. Undo cake
4b. Reset cake and re-select cake options
5a. Cancel cake made
Preconditions
Post conditions Cake added to temporary session in case user wants to retrieve back
Extension points

Use case name Shopping Cart

Actor Customer
Description Customer able to add available products into shopping cart and adjust quantity.
Customer also able to delete product from shopping cart
Flow of events 1. User adds product to shopping cart
2. Shopping cart pressed
3. Product listed with options such as remove and adjust quantity
4. User checkouts shopping cart
5. User redirected to Payment page
Alternative flows 3a. User changes quantity or removes product
3b. Product price, subtotal and total updated on Shopping Cart
Preconditions
Post conditions Cake added to temporary session in case user wants to retrieve back
Extension points
Use case name Purchase Order
Actor Customer
Description Add a purchase order and associate orders to the customer
Flow of events 1. Add purchase order
2. Purchase order saved

Alternative flows
Preconditions Must have product on shopping cart
Post conditions Resets shopping cart items and redirect to account status
Extension points 1. Make Payment
2. Generate Invoice

Use case name Generate Invoice

Actor Customer
Description Generate invoice based on purchase order with all products information and prices
Flow of events 1. Purchase order calls generate invoice
2. Invoice generated and saved in database
3. Invoice emailed to user
Alternative flows
Preconditions Product order must be active and called generate Invoice
Post conditions
Extension points
Use case name Make Payment
Actor Customer
Description Make payment for items on shopping cart
Flow of events 1. Select payment provider
2. Paypal selected
3. Redirects to paypal with items information
4. Paypal sends return data if payment successfully made
Alternative flows 2a. Bank transfer selected
3a. Vinn cake house banking detail shown
3b. User fills payment information
4a. Payment saved and waits for staff review
Preconditions Shopping cart must not be empty
Post conditions
Extension points
Appendix C – Data Dictionary
Addresses
Column Type Null De fault Comments
id int(11) No
created date No
created_by int(11) No
name varchar(32) No
line_1 varchar(128) No
line_2 varchar(128) No
city varchar(64) No
state varchar(64) No
poscode int(5) No
def ault int(1) No sets def ault address f or user

Blogs
Column Type Null De fault Comments
id int(11) No
created date No
created_by int(11) No
title varchar(64) No
image varchar(128) No
description text No
status int(1) No 1

Categories
Column Type Null De fault Comments
id int(11) No
created datetime No
name varchar(32) No
description varchar(400) No
Coupons
Colum n Type Null De fault Com m e nts
id int(11) No
created date No
created_by int(11) No
name varchar(12) No
amount decimal(10,2) No f ixed amount or percentage value
unique int(1) No
type int(1) No type can be f ixed price or discount percentage
status int(1) No

Order_messages
Colum n Type Null De fault Com m e nts
id int(11) No
order_id int(11) No
message varchar(50) No cake message

Orders
Colum n Type Null De fault Com m e nts
id int(11) No
purchase_id int(11) No
product_id int(11) No
quantity int(1) No
price decimal(10,2) No save product price, if there is changes, still original price is saved to order
Payments
Colum n Type Null De fault Com m e nts
id int(11) No
purchase_id int(11) No
name varchar(64) No name of bank, name of paypal account holder
account varchar(64) No account no f or bank, account email f or paypal
ref erence varchar(64) No ref erence no f or banking or paypal ref erence no
date datetime Yes NULL
data text No additional dataset f or paypal
type int(1) No 1 f or paypal and 2 f or bank

Product_comments
Colum n Type Null De fault Com m e nts
id int(11) No
created datetime No
created_by int(11) Yes NULL
modif ied int(11) Yes NULL
modif datetime No
ied_by
product_id int(11) No
comment text No
quality decimal(2,1) No quality rating
value decimal(2,1) No value rating
taste decimal(2,1) No taste rating

Product_images
Colum n Type Null De fault Com m e nts
id int(11) No
product_id int(11) No
path varchar(400) No physical location to image f ile path
Purchases
Colum n Type Null De fault Com m e nts
id int(11) No
created datetime No
created_by int(11) No
address_id int(11) Yes NULL address to ship
coupon_id int(11) Yes NULL
shipping_type int(1) No shipping option (1 = ta-q-bin, 2= f ree delivery, 3 = pickup)
payment_type int(1) No credit card(1), bank transf er(2)
paid_status int(1) No 0 paid(1) or not
payment_date datetime No
ship_status int(1) No 0 shipped(1) or not
ship_date datetime Yes NULL
notes text No
remarks text No
status int(1) No completed/rejected/pending

Users
Colum n Type Null De fault Com m e nts
id int(11) No
username varchar(16) No
realname varchar(32) No
email varchar(32) No
passw ord varchar(128) No
last_login datetime No
level int(1) No buyer(1) and administrator(5)
status int(1) No active/suspended
Appendix D – Test Cases

User functions
ID Description Expected Result Actual Result
1 Website login without any information Please enter username and As expected result
password error shown
2 Website login with wrong username Error message showing As expected result
and password username and/or password
not exist
3 Website login with correct username Redirect to homepage with Redirects to homepage but
and password login successful message no message
4 User login Don’t display administrtor As expected result
option
5 User tries to run administrator function Show unauthorized access As expected result
6 Add product to shopping cart Add products to shopping No product added to
cart and display on sidebar shopping cart
7 Remove product from shopping cart by Delete product from As expected result
clicking Remove shopping cart
8 Update quantity of product on Calculate new subtotal and Subtotal correctly shown
shopping cart shows cake messages for but cake messages still are
new quantity one
9 Add higher quantity than 5 for cake Display error for big As expected result
quantity requires early
order by contact us
(business requirement of
Vinn Cake House)
10 Checkout without selecting shipping Display required shipping Went to next page without
type method without processing validating option
futher
11 Checkout without selecting payment Display required payment As expected result
method method without processing
further
12 Show pickup option if self-pickup Display date/time for user As expected result
 shipping option selected to select pickup time
13 Pickup option show datepicker with Dipla datepicker only from Displayed all date
minimum date is 5 days ahead 5 days advances
(processing time)
14 Show address selection if free delivery Display all address created As expected result
selected by user via their addresses
book
15 Free delivery should display Penang Display all address from Displayed all addresses
address only Penng state only that
created by user
16 TA-Q-BIN courier selection shiping Display address selection As expected result
method
17 If payment selected as Paypal Redirect to Paypal website No redirection occur and
with item information no item have been passed
to paypal
18 If payment selected as Bank Transfer Show banking information As expected result
of Vinn Cake House and
bank transfer information
from user
19 Submit order and checkout Save orders information on Doesn’t remove shopping
purchases and remove cart data
shopping cart saved detail
20 User clicks order status Display no order found if As expected result
no purchases have been
made, if purchases been
made, display current data
of orders
21 Order status have three types, Shows order status As expected result
completed, rejected and pending according to category and
display the status data only
22 Print invoice Display order detail and Layout messed and not
printable invoice printable
23 Allow users who had purchased Show ratings and review on As expected result
 product to leave ratings and reviews bottom of product page

Administrative functions
ID Description Expected Result Actual Result
23 Administrator login using admin Display administrator menu As expected result
account
24 Adminsitrator add category Display on top menu under As expected result
products and new category
created
25 Administrator add product Display on product menu As expected result
and allow to be added to
shopping cart
26 Administrator add product without Display error saying image Product created without
image must be uploaded image
27 Administrator set textable off When product added to As expected result
shopping, icing message
should not appear and
appropriate message
displayed
28 Administrator can update status of Allow administrator to set As expected result
orders payment date and shipping
status
29 Create blog to display news to users List news on top of blog As expected result
page