BIT (Building Material Retail Online Store) Project Nay Linn Ko

Building Materials Retail and Property Advertisements Website
COMP-1181 Page 1
Developing Building Materials Retail and Property Advertisements Website According
to DSDM Techniques, Web Standards and Design Guidelines
COMP 1181: Department of Information Systems and Multimedia Undergraduate Project
Due Date: 25/04/2016
Word Count: 13000 (Excluding Appendices, References)
Supervisor: Mr. Francis Murphy
Centre: KMD (Yangon, Myanmar)

COMP-1181 Page 2
Abstract
By reading the title of this project, readers can imagine that the document is about
creating a retail and advertisement website. But the actual purpose of this project is more than
this. The project would be more intended for system analysis. Along with system analysing, all
the aspects that would be important in creating an information system such as business model,
development methodology, UI design, web security and technical aspects would be discussed.
As the result of the project, we would get a retail website which follows those aspects. This
project is created for academic purpose only.

COMP-1181 Page 3
Preface
This document is intended for undergraduate degree project from University of
Greenwich. The chapters in this document are a little bit interdependent on each other. For the
readers who are here for research purpose, chapter 2 and chapter 4 would be fit for purpose. For
the readers who want practical ideas in system analysis, then chapter 3 is all about this. And for
those who are interesting in just creating website, read chapter 5 and also chapter 7 which is
about system testing. But, we recommend looking at a glance for all chapters in order to get
better understanding of what we are talking about.

COMP-1181 Page 4
Acknowledgement
First of all, I like to acknowledge the responsible persons from University of
Greenwich who provide this project for students. I would like to appreciate all the authors and
researchers who researched about creating dynamic websites, system analysis, UI aspects and
technical aspects. Moreover, I would like to present my appreciation for our lecturer, Mr. Francis
Murphy, for his great and expert experiences about business requirements and system analysis.
Last but not least, I would like to thank to responsible teachers and staffs from our centre, KMD
for providing such a good learning environment.

COMP-1181 Page 5
Table of Contents
Chapter-1| Pre-Project ....................................................................................................................10
1.1 Introduction ..............................................................................................................................10
1.1.1 Background........................................................................................................................10
1.1.2 Why the website is needed to be developed? .................................................................. 11
1.2 Project Scope ............................................................................................................................11
1.2.1 Features of the Website ....................................................................................................11
1.2.2 Keywords ..........................................................................................................................13
Chapter-2|Literature Review .........................................................................................................14
2.1 Introduction on Literature Review ..........................................................................................14
2.2 Reviews on E-Commerce Business ........................................................................................14
2.2.1 Situation of E-Commerce Business in Myanmar ...........................................................14
2.2.1 Business Model of the Website .......................................................................................14
2.3 Reviews on Development Methodologies ..............................................................................15
2.3.1 Structured Systems Analysis and Design Methodology (SSADM) ..............................15
2.3.2 Dynamic Systems Development Method (DSDM) ........................................................16
2.3.3 Justifying Development Methodology ............................................................................17
2.4 Reviews on Techniques ...........................................................................................................18
2.4.1 UML (Unify Modelling Language) .................................................................................18
2.4.2 Use Case and Class Diagrams .........................................................................................18
2.5 Reviews on Technology and Development Tools ..................................................................19
2.5.1 Justifying Programming Language ..................................................................................19
2.5.2 Justifying Database and Web servers ..............................................................................21
2.5.3 Justifying Tools and Text Editor .....................................................................................22
2.6 Reviews on User Interface Design ..........................................................................................22
2.6.1 Responsive and Adaptive Design ....................................................................................22

COMP-1181 Page 6
2.6.2 User Interface Design Guidelines ....................................................................................23
2.6.3How to Apply Shneiderman’s Eight Golden Rules..........................................................23
2.6.4 How to Apply W3C Web Standards ....................................................................25
2.6.5 Evaluation of User Interface Design on Existing Websites .....................................26
2.7 Summary ................................................................................................................34
Chapter- 3| Foundation ...................................................................................................................35
3.1 Introduction................................................................................................................................35
3.2 Identifying High Level Requirements .....................................................................................35
3.3 MoSCoW Prioritisation for High Level Requirements ..........................................................37
3.3.1 List of High Level Requirements with Priorities ............................................................37
3.3.2 Reasons in Setting Priorities.............................................................................................38
3.4 Use Case Diagrams for the Website ........................................................................................41
3.5 Low Level Prototypes of the Website .....................................................................................44
3.6 Estimated Timebox and Incremental Delivery Plan for the Website ....................................47
3.7 Detailed Class Diagram for the Website .................................................................................48
3.8 Summary ...................................................................................................................................50
Chapter- 4| Exploration ..................................................................................................................51
4.1 Introduction ...............................................................................................................................51
4.2 Data Security Concerns ............................................................................................................51
4.2.1 SQL Injection Attacks ......................................................................................................51
4.2.2 Cross-Site Scripting XSS Attacks ...................................................................................52
4.3 User Groups of the Website .....................................................................................................53
4.4 Final High Level Prototype for the Website.................................................................54

COMP-1181 Page 7
4.5 Summary ...................................................................................................................................55
Chapter- 5| Engineering ..................................................................................................................56
5.1 Timebox 1..................................................................................................................................56
5.1.1 Creating Relational Database of the Website.........................................................................56
5.2 Timebox 2 .......................................................................................................................58
5.2.1 Connecting with Web Server.....................................................................................58
5.2.2 Customer Registration.......................................................................................................59
5.2.3 Adding New Building Materials.......................................................................................59
5.2.4 Unit Testing for Timebox 2 ......................................................................................60
5.3 Timebox 3 .................................................................................................................................63
5.3.1 Sale Orders................................................................................................................63
5.3.2 Imitation of Online Credit Card Payment ..................................................................64
5.3.3 Recording Payments..................................................................................................65
5.3.4 Unit Testing for Timebox 3 .............................................................................................66
5.4 Timebox 4 .................................................................................................................................67
5.4.1 Displaying Supplier Detail................................................................................................67
5.4.2 Unit Testing for Timebox 4 ......................................................................................68
5.5 Timebox 5 .......................................................................................................................69
5.5.1 Reports ...............................................................................................................................70
5.5.2 Searching Service for Customers .....................................................................................71
5.5.3 Unit Testing for Timebox 5 .............................................................................................71
5.6 Summary ...................................................................................................................................73
Chapter- 6| Deployment ..................................................................................................................74

COMP-1181 Page 8
6.1 Introduction ...............................................................................................................................74
6.2 Iterations during Development Process ..................................................................................74
6.3 New Time Box Plan due to Iterative Development ...............................................................76
6.4 Evaluation of User Interface Design Using Design Criteria ..................................................77
6.5 Summary ...................................................................................................................................78
Chapter- 7| Testing...........................................................................................................................79
7.1 Introduction................................................................................................................................79
7.2 Test Frameworks.......................................................................................................................79
7.3 Integration Testing ...................................................................................................................80
7.4 Accessibility Testing ................................................................................................................82
7.5 End-User Acceptance Testing Plan .........................................................................................85
7.6 Summary ...................................................................................................................................86
Chapter- 8| Post-Project ..................................................................................................................87
8.1 Introduction ...............................................................................................................................87
8.2 System Maintenance Policy for the Website ..........................................................................87
8.3 Legal, Ethical and Social Concerns .........................................................................................88
8.4 Evaluation of the Website ........................................................................................................89
8.4.1 Benefits by Using the Website .........................................................................................89
8.4.2 Possible Risks and Impacts of the Website .....................................................................89
8.5 Missing Things and Further Enhancements ............................................................................90
8.6 Final Evaluation for the Whole Project ...................................................................................90
8.7 What did I learn from this project? .......................................................................................... 91
8.8 Summary ...................................................................................................................................91

COMP-1181 Page 9
Conclusion..........................................................................................................................................92
References ..........................................................................................................................................93
Appendix............................................................................................................................................95
A. Project Proposal..........................................................................................................................95
B. Gantt Chart..................................................................................................................................97
C. Six Filters of DSDM to Ensure Project is Fit or Purpose ........................................................98
D. Low Level Prototypes ..............................................................................................................101
E. Technical Presentations............................................................................................................103
CSS Media Query Codes for Responsive Design..............................................................103
Embedding Javascript with JQuery.....................................................................................105
Important PHP Codes ..........................................................................................................106

COMP-1181 Page 10
Chapter-1 | Pre-Project
1.1 Introduction
By 2016, a lot of SMEs businesses have already changed their business models
generally from offline form to online form in order to compete with stronger competitors.
Retailing market of physical products is one of them. And many of them are changing their
business model online so that to extend their market place to all over the world.
In this project, we would develop a dynamic website dedicated for a building
material retailing store. The title of the project is “Developing Building Materials Retail and
Property Advertisements Website According to DSDM Techniques, Web Standards and
Design Guidelines”.
1.1.1 Background
“Nay La” is a traditional building materials retailing shop. The shop has a
physical store together with a warehouse. Its main business is selling cement of all brands,
bricks, sand and stones. It has already possessed strong consumer market in Yangon, Myanmar.
Recently, its customers requested that they want to order or buy the building
materials online as they have no time to come to the store. And, ordering via phone is also not
so convenient since they had experiences that there are a lot of misunderstandings and no
proof of work. Moreover, some of the customers want to make payment directly by using
internet without intermediary person.
On the other hand, “Nay La” itself wants to promote some new brands by using
its own website. Therefore, they think it is time to have a website of their own which can provide
ordering service, online payment options and advertising building material new brands.
Besides, they want the website to check the stock when an order or payment takes place on
the website.
As the store has a lot of partners in housing firm, some of their partners and
construction companies always request them to advertise about their new developments, office
and residential rooms for rental and sale. And the store is also willing to help so that to straighten
the relationships with its customers. Moreover, the sales of the store will definitely increase if its
customers’ properties were dealt. Therefore, “Nay La” store also wants to provide a space for
every particular customer where they can advertise and search about new developments,
office and residential rooms for rental and sale.

COMP-1181 Page 11
1.1.2 Why the website is needed to be developed?
At the beginning, “Nay La” was a physical store retailing building materials. The
store does not have any virtual communication with its customers and suppliers. Recently, its
customers request that they want to order or buy the building materials online as they have no
time to come to the store. And, they also want to make payment online directly since they do not
want any intermediary person in payment.
Therefore, they want a dynamic website which can provide checking stocks,
ordering service, online payment options and advertising building material new brands.
1.2 Project Scope and Objectives
By using the website, customers can order or buy building materials online.
Many payment methods such as credit cards, debit cards and cash on delivery would be
provided. Once an order or payment is received, the stock of each item would be checked
whether it is available or not. If not, the website will inform to the customer that the delivery
could be delayed or something.
Admins of the website can also order building materials from the suppliers
via the website. The orders to suppliers would be sent as emails. Moreover, the admins can
check delivery of building materials for both customers and suppliers. By registering, the
website will provide a space for every particular customer where they can advertise and
search about new developments, office and residential rooms for rental and sale.
In this building material retailing and property advertisement website, we cannot
support real online payment transactions since we are not going to connect with real online
credit card company or a bank. But we would make an imitation of online payment transaction
which is similar with the real transaction.
1.2.1 Features of the Website
1. Uploading Building Materials Information
Based on categories and e-catalogue, the website will display building materials
information. Along with building materials, we could set the stock of each building material in
order to check whether it is available or not when an order or payment takes place. If not, the
website will inform to the customer that the delivery could be delayed or something.

COMP-1181 Page 12
2. Building Material Orders from Customers
The website would provide order forms to receive building material orders from
customers. After ordering, the customer will receive a quotation letter for his order.
3. Building Material Orders to Suppliers
The website will also provide for the admins to order building materials from the
suppliers if an item is out of stock. Then, they can check the delivery was done or not.
4. Online Payment Options
Various payment options such as debit, credit card payment and cash on delivery
payment methods will be provided. Customers will receive an e-voucher after a payment had
been made. And the website will automatically update the stock.
5. Checking Delivery
Admins can set the building materials have been delivered or not by reviewing
orders and payment. They can also make reports deal with delivery.
6. Posting Property Offers
The website will provide a space for every particular customer where they can
advertise and search about new developments, office and residential rooms for rental and sale.
This can straighten the relations between the store and its customers. And, the sales of the store
will definitely increase if its customers’ properties were dealt.
7. Simple and Advanced Search Options
Simple and advanced search options for building materials based on brand, price,
category and manufacturer would be presented. Search options for property advertisements could
also be provided.

COMP-1181 Page 13
8. Producing reports
The website would be able to produce different kinds of reports for operation
admin and finance admin.
1.2.2 Keywords
Building materials means all kinds of building supplies including cement, stones,
sand and bricks. Property Offers are the real estate property advertisements of all kinds posted
by the customers. Web surfers who have registered at the website are called Customers.
Suppliers are manufacturer or companies that supply building materials for the store.

COMP-1181 Page 14
Chapter- 2| Literature Review
2.1 Introduction on Literature Review
We shall make reviews on Ecommerce business market especially in Myanmar
before developing our website. We have to configure the business model of the website to
understand the scope of the project vividly. So that, we could know how to make revenue from
the website and avoid unexpected business risks and impacts.
On the other hand, we would make user interface design reviews for the
website. User Interface Design guidelines must be applied in order to meet with user’s
satisfaction. Since the website would be operated on different devices, we must consider about
responsive and adaptive designs.
Besides, the suitable development methodology for the project must be
chosen correctly. Otherwise, the whole project would be a complete waste of time. Moreover,
technology, tools and techniques that we need in developing the website must also be justified.
2.2 Reviews on E-Commerce Business
2.2.1 Situation of E-Commerce Business in Myanmar
Researches show that many of SME businesses in Myanmar do not have a
website. The online money transfer and online banking process are also very limited in
Myanmar. But international online banking agents like Visa and Master Companies have entered
the country and therefore, there would be much easier in the future.
Recently, it is found that potential customers who want to buy building materials
are more likely to search online. Some customers do not buy online but look for the building
materials on the website and come to the physical store. Therefore, we trust that our building
material retailing and property advertisements website could advertise “Nay La” store even if
some customers are not willing to buy online.
2.2.2 Business Model of the Website
The website is targeted to get revenues from retailing building materials and
advertising building materials. The core business of the website is online retailing. Building
materials such as cement and bricks can be searched based on price, brand and manufacturer.
Customers can order or buy building materials online. And, many ways of online payment
options are provided. By advertising building materials, the website is aimed to gain profit
from building material manufacturers.

COMP-1181 Page 15
2.3 Reviews on Development Methodologies
There are a lot of methodologies to choose for developing an information system.
A methodology offers a standard road-map and guidelines in order to make sure the quality and
reliability of the system. By using a right methodology for right system, we could protect from
risk factors such as cost and time. Therefore, we need to pick up the most reliable method for our
Building Material Retailing and Property Advertisement Website.
Tow methodologies would be reviewed for the website. They are –
1. SSADM (Structured Systems Analysis and Design Method)
2. DSDM (Dynamic Systems Development Method)
2.3.1 Structured Systems Analysis and Design Methodology (SSADM)
SSADM was derived from civil engineering. The methodology is widely used in
several engineering projects. SSADM is suitable for safety critical systems with complex
transactions because of strict rules of the methodology. The methodology is suitable for large-
scale projects such as government operation projects. SSADM divides a project into stages such
as Feasibility Study, Investigation, Business option, Defining requirements, Technical option,
logical and physical design. In SSADM, business requirements cannot be changed easily. The
steps cannot be iterative.
Advantages of Using SSADM
SSADM was derived from physical engineering, and therefore, it is easy to
predict the time that the project would be finished. SSADM try to finish all the functionality
before deadline and therefore the project could be delivered on time. By using SSADM,
developers can develop the system as they wish since there is no user involvement.
Disadvantages of Using SSADM
Since SSADM try to finish all the functionality before deadline, the quality of
the product would be compromised. There is no user involvement and so that the final
product would not be in line with the business needs. Moreover, there are no time boxing
techniques and therefore, this could lead late delivery. Consuming a lot of times means
consuming money.

COMP-1181 Page 16
Besides, SSADM does not allow iteration. Therefore, if an error occurred in the
middle of development process, the whole project would likely to be restarted from the
beginning.
2.3.2 Dynamic Systems Development Method (DSDM)
Dynamic Systems Development Method is an agile framework which is focusing
on the quality of the product system. DSDM is derived from Rapid Application Development
(RAD) approach. In DSDM, quality and time are fixed and functionality is variable. Therefore,
the quality of the website would be assured and finished on time and budget. By using
prototypes, communicating with users and receiving feedbacks will be easy. The four
fundamental techniques of DSDM are Time boxing, MoSCoW prioritisation, Prototyping and
Facilitated Workshops.
Advantages of Using DSDM
By using time boxing technique, the incremental delivery of the website would
be on time and we can develop iteratively. MoSCoW prioritisation lets us know what
transaction to develop first and which transaction is the most important for the business. Users
can give feedbacks based on prototypes and therefore the final product would fulfil the users’
requirements. Facilitated Workshops of DSDM give user involvement and collaboration
during the development process.
Disadvantages of Using DSDM
Because of the iterative development which accepts changes of users’
requirements, user may change their requirements every time. This can lead to extra budget
and time consuming for the project. Moreover, the development team is self-empowering and
therefore it would be difficult to get a correct decision quickly and long problem solving.
Besides, users may not want to participate in facilitated workshops. Besides, DSDM is
suitable only for small-scale project with limited time. These are the disadvantages of using
DSDM.

COMP-1181 Page 17
2.3.3 Justifying Development Methodology
Based on the knowledge discussed in above, we will choose a development methodology to develop
our website. While choosing, we will use a list of criteria. The criteria for justifying methodology
were set by “Nay La” from business perspective and a system analyst from technical perspective
in order to meet with business requirements through development process.
Reference from: “Six Filters of DSDM” (Ref: DSDM Consortium (2010), “The DSDM Atern Student
Workbook”)
No. Criteria SSADM DSDM
1. Iterative Development No Yes
2. Team Empowerment (self-decision
permission)
No Yes
3. Team Collaboration No Yes
4. Project Size Large Small
5. Team Size Large Small
6. User Involvement No Yes
7. Suitable for Fixed Requirements
Projects
Small Scale Project
According to the criteria, DSDM is more suitable to use than SSADM in
developing our website. This is because, our project is a small project and time constrained.
The processes are generally simple and not computationally complex. And the project is not a
real-time or safety critical project. And, we must also allow iterative development so that the
users can change business requirements. All these points are match with the concept of DSDM
methodology. Therefore, we decided to choose DSDM method as our development
methodology.

COMP-1181 Page 18
2.4 Reviews on Techniques
DSDM provides management techniques such as Time boxing, MoSCoW
prioritisation, Prototyping and Facilitated Workshops. But the method does not support any
development technique. Development techniques are required so that we can define the
boundary of system, the structure of system and the behaviour of the system. One of the
most popular development techniques for DSDM projects is UML modelling technique.
2.4.1 UML (Unify Modelling Language)
UML is a development technique mainly applied in OOP development
frameworks. UML provides development diagrams which can be divided into design, structure
and behavioural model.
Advantages of using UML Technique
By using UML, we can define the design, structure and behaviour of the
system easily. Collaboration between developers and system analysts can be done by using
UML diagrams. Moreover, the development diagrams would be in standard format that all
the people in technical firm could understand. For example, use case diagrams can show the low
level requirements and their actors.
Disadvantages of using UML Technique
UML has just few drawbacks. In some cases, UML diagrams cannot be understood
by the business and users easily. Sometimes, it is difficult to interpret the model to get system
coding. Moreover, some users may think that UML techniques are not useful and a waste of time.
2.4.2 Use Case and Class Diagrams
There are altogether 14 UML diagrams. Among them, we will use Use Case Diagram
and Class Diagram in analysing structure and behavioural model of our website. The followings
are the reasons why we selected the two diagrams.

COMP-1181 Page 19
Use Case Diagram
The main purpose of use case diagram is to know about key actors, key
processes and relationship between them. For each high level requirement of the project, we
could make a use case diagram. By using use case diagram, we can understand the functional
requirements and their actors.
Class Diagram
We can apply class diagram to evaluate the objects and classes of the system. The
attributes which are useful in creating database and functions which are useful in coding process
would also be known. Therefore, class diagrams are important to apply in our project.
Usefulness of Chosen Diagrams
We will apply Use Case Diagram and Class Diagram as the development techniques.
Use Case Diagram will help us in identifying the key actors and their processes. Class Diagram will
offer the classes and attributes so that we can create database, its tables and columns. Prototype
technique will also be used to clearly define the attributes and functions.
2.5 Reviews on Technology and Development Tools
Justifying the suitable development method and techniques are not enough to develop a
successful website. We will have to choose the right programming language, database and
development tools. The following reviews could be assumed as technical aspects.
2.5.1 Justifying Programming Language
For dynamic websites, the most popular and useful programming languages are
ASP.Net and PHP. Therefore, we will compare these two technologies and choose one for our
building material retailing and property advertisement website.

COMP-1181 Page 20
ASP.Net (Active Server Pages.NET)
It is a server-side programming language which is widely used by 20% of websites
all over the world. ASP.Net programming language is compatible with many tools such as Microsoft
Visual Basic and many other technologies such as C#, and JavaScript. The framework supports object
oriented programming concept. Therefore, ASP.Net is an effective and useful programming language.
PHP (Personal Home Page)
PHP is an open source and millions of websites around the world are developed using
PHP programming language. The language could be applied on almost all platforms (e.g. Mac OS,
Linux OS, etc,). It also works well with many different DBMS such as Oracle, MySQL and Microsoft
SQL server.
Comparison of ASP.Net and PHP
Criteria ASP.Net PHP
Purpose To create dynamic websites To create dynamic websites
Price Microsoft product, associated costs
(OS costs, Editor costs, Web server costs)
Most of editors & web servers are
free. Linux OS can be used.
Performance Fair Linux & ext4 file system is faster
than Windows and NTFS file system.
Supports many of frameworks and huge .Net
developer community.
Millions of websites, huge PHP
community, Free web servers.
Tools and Editors Tools and Editors for Windows OS mostlyTools and Editors for all kinds of OS
Ease of Learning ASP.Net is based on C# which is difficult
to understand by human.
PHP syntax are easy to understand by
people.
Reason for Choosing PHP
According to the above evaluation table, we decided to choose PHP to develop our
website. PHP is open source language and so it is completely free for use. Its associative required
software's like database, text editors and Apache web server can be got freely, so it is very cost
effective for the business and for the developers.

COMP-1181 Page 21
Moreover, php is easily deployed across several different platforms and all major
operating systems like Windows, Linux and Mac OS. It can also provide for web servers such as
Apache, IIS and IPlanet and so on. PHP can be simply embedded to html. The security level can be
adjusted that helps to prevent malicious attacks.
2.5.2 Justifying Database and Web servers
PHP is compatible with a lot of DBMS such as MS SQL Server and MySQL. And, a lot
of web servers such as IIS and Apache can be applied for local web servers while developing. All
kinds of DBMS and web servers have their own pros and cons. But the problem is that it is
difficult to compile PHP, web server and the database together.
However, there are a lot of packages which provide web server, database and PHP
environment together. By using the readymade packages, we do not need to compile by ourselves.
The most popular packages for PHP are XAMPP and WAMP packages.
Comparison of XAMPP and WAMP
Actually, XAMPP is just another distribution of WAMP server. But there are some
differences between them in terms of performance, and memory loading.
Criteria XAMPP WAMP
Performance Takes more time to run the code. Takes less time to run than XAMPP.
Memory Loading WAMP consume more memory. XAMPP is less consumed than
WAMP.
Support Multi-platforms, XAMPP for
Windows,
XAMPP for Linux etc.
WAMP is normally only for
Windows.
Price XAMPP is free. WAMP is free but Windows is not
free.
Based on the above comparison, we chose XAMPP package for development process.
This is because it is a multi-platform package and consumes less memory. By using XAMPP, we
would get the ready-made compilation of PHP, MySQL database and Apache web server.

COMP-1181 Page 22
2.5.3 Justifying Tools and Text Editor
There are a lot of text editors and IDEs for PHP projects. But we prefer to use text
editors instead of IDE. This is because IDEs consume a lot of RAM memory of the devices. There are
many helpful text editors. Here, we will compare two popular text editors- Bluefish and Dreamweaver
CS6.
Comparison of Bluefish and Dreamweaver CS6
Criteria Bluefish Dreamweaver
OS Support Windows, Linux, OS X, Unix Windows, OS X
Editor Features FTP upload, server-side scripting, spell
checking, templates, page preview
FTP upload, server-side scripting, shared
editing, spell checking, templates, page
pagepreview
Performance Fair Dreamweaver is a little bit faster on
Windows.
Based on the above comparison, we will use Adobe Dreamweaver CS5 for the
development process. This is because its performance of Dreamweaver is faster and supports multiple
editor features such as shared editing. Moreover, we have some experience in using Dreamweaver.
Thus, it is selected to apply as our text editor.
2.6 Reviews on User Interface Design
The number of internet users is dramatically increasing day by day all around the
world. People from different places are communicating using internet via different devices. Since
the devices have different screen size and resolution, we must endeavour our website to be
flexible to use with all devices. Popular design options are responsive and adaptive web
designs.
2.6.1 Responsive and Adaptive Design
A responsive design is that the interface design can be fluidly changed and
responded to fit any screen or device size. By using some elements and properties of CSS, media
queries and fluid grids, a responsive design could be created.

COMP-1181 Page 23
Unlike with responsive design, Adaptive design is that the interface design is
written for many screen varied devices. When the website is opened, the code will detect the size
of device using predefined set of layout sizes. Then, the most reliable interface would be
displayed on the device.
In this case, responsive design only would be supported for our website. The
website would not provide adaptive design which is providing different kinds of design template
for different screen sized devices. Because of time constraints and skill constraints, we could
not consider adaptive design for our website.
2.6.2 User Interface Design Guidelines
A lot of design guidelines mention about usability, flexibility, visibility and many
more. Among them, we would use Shneiderman’s eight golden rules and W3C web
standards as our guidelines.
2.6.3How to Apply Shneiderman’s Eight Golden Rules
Shneiderman (2010) mentioned the eight rules in which how to follow to be a
good design in a design process. In this section, we would follow Shneiderman’s principle for
our website.
1. Strive Consistency
The interface and functionality of the website must have consistency. If not,
the users will not be familiar or difficult to be familiar with the website. As we can see that
websites with no consistent interface designs are not success, we must aware to have a consistent
design and functionality in our website.
2. Enable Users to use Shortcuts
Providing shortcuts in the website is very critical. Shortcuts such as “Ctrl+L” or
something should be supported that functions would be operated easily. Shortcuts would be very
useful for disable users and for some people who are bored to do many steps.

COMP-1181 Page 24
3. Offer Informative Feedback
After an action had done, users always expect a feedback. System feedbacks
are very vital that users can quickly know they are doing right or wrong and they can make
decision correctly. If there are no feedbacks upon user actions, the users would be ambiguous
what to do next.
4. Design Dialogs to Yield Closure
The interface design of the website should be linked one another logically. We
should structure the design layouts in logical pattern. Otherwise, the user will close the website
and will never come back to the website.
5. Prevent Errors
System errors must be tested and fixed. And, the interface of the website must
encourage the users not to do serious user errors, (e.g. infinity looping error). Error occurring
must be prevented that if the hackers found out the errors, they can enter the database and hack
the data using that error.
6. Permit Easy Reversal of Actions
The website should support “Undo” and “Redo” actions so that user can make
mistakes and they can reset. “Undo” and “Redo” actions make the user a comfort level for
something they have done. Because they know that they can “undo” if they are wrong.
7. Support Internal Locus of Control
Psychologically, people tend to like something that they can control as they like.
Therefore, the interface design of the website must prefer that user can feel they are in control of
the website. Make sure so that users to believe they are the controllers while exploring the
website.

COMP-1181 Page 25
8. Reduce Short Term Memory Load
Most of the people do not want to memorize a lot. And people cannot memorize a
lot of things at the same time. Therefore, we need to reduce short term memory load in our
website.
2.6.4 How to Apply W3C Web Standards
1. Reduce Data Loading Time
In order to reduce data loading time, we should reduce the size of images and
resolution. And we should try to compose background images, icons and navigation to be loaded
quickly.
2. Limit text size
We must use consistent font size. According to W3C, the heading font size should
be exactly two times bigger than the paragraph font size.
3. Limit the number of different colours used on a page.
We must also use consistent colours in our web pages. Using different colours
could be inconvenient for colour blind users. And users can get confused easily if we use a lot of
different colours on our web pages.
4. Be consistent
The interface and functionality of the website must have consistency. If not, the
users will not be familiar or difficult to be familiar with the website, as we can see that websites
with no consistent interface designs are not success.
5. Design for Flexibility
We must keep the functionality and user interface design of the website to be
simple. By using responsive and adaptive design features, we must endeavour our website to be
used via different screened devices flexibly.

COMP-1181 Page 26
2.6.5 Evaluation of User Interface Design on Existing Websites
In this section, we will evaluate the user interface design of two similar existing
websites based on the above guidelines. And we will find out the weak points and good points
of the websites, and then try to embed the good points in our website and to avoid the weak
points.
Website 1- www.econstructionmart.com
www.econstructionmart.com
1. Strive Consistency (Shneiderman Guideline)
The interface (such as banner, footer and layouts) and functionality of the website
are consistent.
Consistent Banner
Design

COMP-1181 Page 27
2. Enable users to use shortcuts (Shneiderman Guideline)
There are no efficient shortcuts for the users. Otherwise, the shortcuts are not
visible by the users easily.
3. Offer Informative Feedback (Shneiderman Guideline)
Some informative feedbacks such as confirmation alert box are provided.
Customer help options are also provided.
4. Permit Easy Reversal of Actions (Shneiderman Guideline)
There are no transparent “undo” and “redo” actions. Some errors cannot be undo
by the users.
No effective shortcuts or
are not easy to find.
Providing Feedbacks

COMP-1181 Page 28
5. Support Internal Lotus of Control (Shneiderman Guideline)
Users can feel that they are in control role while using the website. Buyer
assistance options are supported and therefore, the users can feel like they have assistance
person. And they would get some more confidence in buying online.
6. Reduce Short Term Memory Load (Shneiderman Guideline)
Shopping cart can count the number of selected items and therefore customers do not
need to remember. “How it works” option is also helping the customers in exploring website. But the
customers still have to memorize the detail information of each item.
7. Reduce Data Loading Time (W3C Web Standards)
Ajax like technologies is used in the website. The size or resolutions of images
are low. And there is no background image and thus, can reduce data loading time.
Providing Buyer assistance
makes users to feel they
have assistance person.
How it works option and
shopping cart can reduce
short term memory load.

COMP-1181 Page 29
8. Limit Text Size (W3C Web Standards)
Text sizes are limited. But it is messy to read in some pages since the text sizes
are not consistent.
9. Limit Different Colour Usage (W3C Web Standards)
There is not so much colour usage and therefore disable people like colour blind
people can use easily. But on the other hand, it is too simple and boring since the website is not
colourful.
10. Design for Flexibility (W3C Web Standards)
The website is a responsive website and can display flexibly for different screened
devices.
Font sizes are not
consistent and messy to
read.
Responsive UI of the
website in a mobile
device

COMP-1181 Page 30
Website 2- www.snapdeal.com
www.snapdeal.com
1. Strive Consistency (Shneiderman Guideline)
The interface (such as banner, footer and layouts) and functionality of the website
are consistent. But, the navigation bar of the website is not consistent and a little bit messy.
Navigation bar of
the website is not
consistent design.

COMP-1181 Page 31
2. Enable users to use shortcuts (Shneiderman Guideline)
The shortcuts are supported in the website. But it is very difficult to find out. We
should display the shortcuts in home page so that users can find out easily.
3. Offer Informative Feedback (Shneiderman Guideline)
The website offers some informative feedbacks when some actions are done.
There are also help button to explain about the processes.
4. Permit Easy Reversal of Actions (Shneiderman Guideline)
There is no “undo” and “redo” function in the website. So, if a customer fills a
form and wrongly clicks a button to another page, the filled data will be lost. The customer will
have to refill the form.
5. Support Internal Lotus of Control (Shneiderman Guideline)
The internal lotus of control is supported. Users can explore the website as their
wish. Users can feel that they are in control role while using the website.
A feedback for “searching”
action by customer

COMP-1181 Page 32
6. Reduce Short Term Memory Load (Shneiderman Guideline)
The website provides “favourite item” option in which customers can add building
material items to favourite list. It can reduce to memorise the items for the customers.
7. Reduce Data Loading Time (W3C Web Standards)
The data loading time of the website is very short since there are no high
resolution images. And there is no background image and thus, can reduce data loading time.
8. Limit Text Size (W3C Web Standards)
The font sizes are varying. Especially title fonts in navigation bar, there is no
stable font size.
9. Limit Different Colour Usage (W3C Web Standards)
The colour usage is too simple and boring since the website is not colourful.
Customers can add items to
favourite list, reduce
customers to memorise things.
The font sizes are not so
consistent.

COMP-1181 Page 33
10. Design for Flexibility (W3C Web Standards)
The website also is a responsive website and can display flexibly for different
screened devices.
Evaluating Existing Website against Usability and UX Criteria
Usability and UX Criteria Website 1 Website 2
Strive Consistency
(Shneiderman Guideline)
1 2 3 4 5 1 2 3 4 5
Enable Users to use Shortcuts
1 2 3 4 5 1 2 3 4 5
Offer Informative Feedback
1 2 3 4 5 1 2 3 4 5
Permit Easy Reversal of Actions
1 2 3 4 5 1 2 3 4 5
Support Internal Lotus of Control
1 2 3 4 5 1 2 3 4 5
Reduce Short Term Memory Load
1 2 3 4 5 1 2 3 4 5
Reduce Data Loading Time
(W3C Web Standards)
1 2 3 4 5 1 2 3 4 5
Limit Text Size
(W3C Web Standards)
1 2 3 4 5 1 2 3 4 5
Limit Different Colour Usage
(W3C Web Standards)
1 2 3 4 5 1 2 3 4 5
Design for Flexibility
(W3C Web Standards)
1 2 3 4 5 1 2 3 4 5
Total 33 30

COMP-1181 Page 34
2.7 Summary
In this chapter, we reviewed and justified the user interface design, development
method, technique, technology, development tools, database, web server and text editor. We set a list
of user interface criteria derived from Shneiderman and W3C Guidelines. DSDM along with UML
technique were decided to apply in development process.
After that, we chose PHP programming language as a basic technology to develop
our website. We considered using XAMPP package to compile MySQL, Apache and PHP together.
Finally, we justified Adobe Dreamweaver CS5 as our text editor.

COMP-1181 Page 35
Chapter- 3| Foundation
3.1 Introduction
Throughout the development process, we would apply the concepts of DSDM
methodology. First of all, we must list the high level requirements of our building materials retail
and property advertisement website. After that, we will prioritise the high level requirements
according to MoSCoW technique. We also need to create Use Case Diagrams for some high level
requirements in order to know the low level functional requirements and their actors. After the use
case diagrams, Low level prototypes will be drawn so that we can perceive the entities and
required data to store in the database. Estimated time-boxing and incremental delivery plan are
also required to be set up before the developing process.
3.2 Identifying High Level Requirements
By analysing, we found out that there are altogether 10 high level requirements in our
project. The followings are the list of the high level requirements and detailed description of the
requirements.
1. Manage Building Materials
First of all, the website must allow adding new category, manufacturer, and brand,
registering new building materials, editing building materials and category, and deleting
building materials. This transaction would be the first step in developing our website.
2. Manage Customer Accounts
Manage Customer Accounts includes registration of customers, updating customer
information, retrieving and deleting of customer accounts. Transactions such as display building
materials to customer will also be included.
3. Organise Sale Orders
After customers had signed up at the website, they will order the building materials and
cash online. Manage Sale Orders includes add-to-cart transaction, ordering building materials,
choosing payment method, and cashing processes.

COMP-1181 Page 36
4. Control Sale Delivery
When a delivery to a customer had finished, we have to record delivery, check the
payment, and adjust the stock of material. Editing and deleting of delivery would also be included.
5. Control Supplier Information
Purchase staff or admin have to record the supplier information of the store so that we
can find the supplier easily when we need to order some building materials. Control supplier
information includes adding new supplier, updating supplier information and deleting supplier.
6. Organise Purchase Orders
When a building material is out of stock, we have to order to supplier. Plan purchase
order includes checking material stock, ordering to the supplier and sending email message to the
supplier.
7. Manage Purchase Delivery
After the supplier had delivered the required building material, we have to record the
purchase delivery information into our database. Manage purchase delivery should include
recording delivery information and payment information.
8. Adjust Building Materials Stock
We must adjust the stock of the building material after the purchase delivery had
arrived.
9. Control Property Offers
As an extra service, the website will offer its customers to upload real estate property
advertisement at the website. Manage property offers include uploading property offers, checking
offers by staff, display offers, updating and deleting the offers.

COMP-1181 Page 37
10. Manage Reports
The website is expected to produce two kinds of reports mainly. They are- Loyal
customer report and revenue report. Loyal customer report is important because we can make
discount processes and free delivery services to our loyal customers by reviewing this report.
Revenue report is also vital for Nay La store since people are doing business for revenue.
3.3MoSCoW Prioritisation for High Level Requirements
One of the DSDM core techniques, MoSCoW prioritisation is very useful in
endeavouring to reach the success of the project. The technique helps us in considering that
which high level requirements are most important and which are least important.
According to the technique, maximum 60% of the project should be the “Must
have” requirements, which is considered as the minimal usable subset of the system. Another
20% would be “Should have” requirements, and the left 20% would be “Could have”
requirements.
3.3.1 List of High Level Requirements with Priorities
No. High Level Requirement Priority
1. Manage Building Materials Must have
2. Manage Customer Accounts Must have
3. Organise Sale Orders Must have
4. Control Sale Delivery Must have
5. Control Supplier Information Should have
6. Organise Purchase Orders Should have
7. Manage Purchase Delivery Should have
8. Adjust Building Materials Stock Could have

COMP-1181 Page 38
9. Control Property Offers Could have
10. Manage Reports Won’t have
3.3.2 Reasons in Setting Priorities
Requirement 1: Manage Building Materials
Priority: Must have
Reason : Customers cannot order the building materials if the website did not display the
building materials information. This requirement is the first step in developing our website.
Thus, it is very “Must have” requirement.
Requirement 2: Manage Customer Accounts
Priority: Must have
Reason : According to our business logic, the website should not allow a customer to buy
building materials online who has no account. The customers have to sign up first in order to buy
materials online. Therefore, managing customer accounts is a high priority requirement.
Requirement 3: Organise Sale Orders
Priority: Must have
Reason : As a minimal usable subset, the website must accept orders from customers at
least. This requirement is the minimum output from the website expected by the business.
Without this requirement, we cannot do further transactions such as delivery process.
Requirement 4: Control Sale Delivery
Priority: Must have
Reason : This requirement is a “Must have” requirement since we must deliver the
materials ordered by the customers. It is very important to record delivery information, and
delivery condition of sale orders.

COMP-1181 Page 39
Requirement 5: Control Supplier Information
Priority: Should have
Reason : When a material is out of stock, we have to order from our suppliers. Therefore,
it is important to record supplier information such as email address and phone numbers so that
we can review their contact information.
Requirement 6: Organise Purchase Orders
Reason : Sending ordering email and message to suppliers, recording orders and updating
orders should be provided. This requirement should be assumed as “Should have” requirement.
Requirement 7: Manage Purchase Delivery
Reason : Same with the above requirement, manage purchase delivery is also considered
to be “Should have” requirement since we need to record purchase delivery information.
Requirement 8: Adjust Building Materials Stock
Priority: Could have
Reason : Balancing building materials stock, however, is not so important for a small
online retailing store. We can know a material is out of stock when we take a look at our
warehouse. And, we can also balance the materials in and out by checking purchase orders and
sales orders. That’s why this requirement is a “Could have” requirement.
Requirement 9: Control Property Offers
Priority: Could have
Reason : The requirement “Control property offers” is also a “Could have” requirement
because this requirement is not part of our core business. This is just an extra service that we
want to provide for the customers.

COMP-1181 Page 40
Requirement 10: Manage Reports
Priority: Won’t have
Reason : We can build reporting and statistics transactions in next incremental deliveries.
This requirement is not included in our minimal usable subset. Reporting transactions are
therefore, “Won’t have” requirement.

COMP-1181 Page 41
3.4 Use Case Diagrams for the Website
In this part, we will make use case diagrams for three high level requirements,
organise sale orders, organise purchase orders and manage reports. Use Case Diagrams are
critical in understanding the processes of a high level requirement, along with its actors.
Use Case Diagram for Sale Management

COMP-1181 Page 42
Use Case Diagram for Purchasing Management

COMP-1181 Page 43
Use Case Diagram for Internal Management

COMP-1181 Page 44
3.5 Low Level Prototypes of the Website
Low level prototypes are important because we can perceive the system
architecture of the website using them. For instance, by looking at the text boxes, drop-down
text boxes and check boxes, we can know which data are required to store in the database.
Moreover, a set of low level prototypes can be used as use case description.
Prototype for Adding New Building Material Form
*For more low level prototypes, see Appendix D.

COMP-1181 Page 45
Prototype for Payment Process Using Credit Card

COMP-1181 Page 46
Prototype for Purchase Order Form to Supplier

COMP-1181 Page 47
3.6 Estimated Timebox and Incremental Delivery Plan for the Website
Before the start of February, we have finished the researches, evaluation of
existing websites and requirement analysis. We started the developing of the project on 8th
February 2016. Our submission date would be around the last week of April 2016. So, we
divided our project into five Timeboxes, with two working weeks in each timebox. The
following is the list of timebox plan for our project.
Timebox Duration Tasks Expected Outputs
1. 8th
Feb - 21st
Feb Requirement Analysis, Produce
Class Diagram, Creating
Database
Class Diagram, Creating Database
2. 22nd
Feb – 6th
Mar
Managing Building Materials
and Customer Accounts
Registration and Login pages for
admin, customers. Adding forms
for category, brand and building
materials.
3. 7th
Mar – 20th
Mar
Managing Sales for both admin
and customer view
Sale order forms and payment
forms for customers, sale order
display pages and delivery pages
for admin.
4. 21st
Mar- 3rd
Apr Managing Supplier and Purchase
Orders
Forms to add new supplier,
purchase order display pages and
delivery pages for admin.
5. 4th
Apr- 18th
Apr Managing Property Offers and
reports
Property offer forms for admin
and customer, revenue reports and
customer loyalty report for
materials.
19th
Apr-
Submission Date
Unit testings, Integration
testings, Acceptance testings,
Missing things and further
enhancements
Testing Results, Feedbacks,
Completion of the website.

COMP-1181 Page 48
3.7 Detailed Class Diagram for the Website
Based on the data provided in low level prototypes, we can create a class diagram
including attributes and functions. This is because the low level prototypes show us the
attributes or columns that need to be kept in the database.

COMP-1181 Page 49
Detailed Class Diagram for the Website

COMP-1181 Page 50
3.8 Summary
We listed the high level requirements that exist in our website. We have got ten
high level requirements. And then we prioritised the high level requirements. There are
altogether four “Must have” requirements, three “Should have” requirements, two “Could have”
requirements and one “Won’t have requirement”.
The timeboxing technique of DSDM helps us to break down the entire project
into chunks. After we had finished each timebox, we will get a deliverable output for the
business to test. If any requirement has changed in the middle of the development process, we
can make iterations.

COMP-1181 Page 51
Chaptet-4| Exploration
4.1 Introduction
In this chapter, we would mainly consider about the data architecture of our
website. We would create a detail class diagram based on the use case diagrams and
prototypes displayed in previous chapter. Then we would develop a database for our website.
After that we would explore data security concerns of today websites. And,
we will consider how to escape from these data security threats. We will also create a responsive
design layout for the website.
4.2 Data Security Concerns
Today web world has full of security threats. Many websites are being hacked by
the serious or prank hackers. If the confidential data and personal data of customers are
hacked, the website would be harmed and the business will be criminated. Therefore, it is
very vital to discuss how to escape from the various security threats for our website. The
followings are the main threats that cause the websites harmed or the data hacked.
4.2.1 SQL Injection Attacks
SQL injection attack is a kind of data security attack that harms the database
of a system by putting SQL queries in input data. By putting SQL queries in input data,
attackers can log into the website without registration, and can delete or edit the data stored in
the database without permission. Therefore, it is a dangerous security threat for our website.
Avoiding from SQL Injection Attacks
The website would be protected from SQL injection attacks and some security
threats by using input filtering and output escaping options. By using input filtering options,
special characters such as ‘=’ will be escaped.

COMP-1181 Page 52
Fig Example of Input Filtering Function quote ()
4.2.2 Cross-site Scripting XSS Attacks
XSS attack is a kind of attack that hacks the websites by putting javascript
codes into the input data. By putting javascript codes, the websites cannot show the correct
design until those javascript codes are removed. It is one of the most harmful and threatening
attacks for many web applications. Many websites today are being hacked by this kind of attack.
Avoiding from XSS Attacks
In order to avoid from XSS attacks, we can use some of php output escaping
methods such as htmlspecialchars (). The method replaces the HTML special characters to
entitles such as <b> to < b> Therefore, the scripts will not work on our websites.
If there is necessary to show the javascript elements as they are, we can still use
third party libraries such as HTML purifier.

COMP-1181 Page 53
4.3 User Groups of the Website
Most of the users of the website would be medium aged people since the website
is a retailing building material website. People between the ages of 30 to 60 would be
dominant users. (Ref: www.surveysurfer.com | Dominant users in a normal retail site)
Since the dominant users would be 30 to 60, we should use our UI design to be
more stable and mature without bright colours. We can differentiate the user group of our
website as followings.
1. Customers
The most important and valuable user group of our website would be the
“Customers”. Customers mean that they are the one who will buy the material, not the
representative person. Dominant customers would be between the ages of 40 to 60.
2. Partner Companies’ Staffs
Partner Companies mean the customer companies, supplier companies and others.
The staffs from a customer company would be also treated as customers. But they are not
actually the real customers, since they are representative staffs. The dominant ages could be
30 to 50.
3. Internal Staffs of Nay La Store
Internal employees such as sale staff, marketing staff and purchasing staff of Nay
La store must use the website to handle operations.
4. Building Material Professionals
They can use the website to study about the building materials such as cement
types, and differences between them.

COMP-1181 Page 54
4.4 Final High Level Prototype for the Website
Before creating any database related codes, we must consider about the web
design. Since the dominant users would be 30 to 60, we should use our UI design to be more
stable and mature without bright colours.
Moreover, based on the research results in 2.6, User Interface Design, we prefer
to make a responsive web design rather than adaptive web design. In order to create responsive
design, some useful CSS frameworks such as bootstrap framework will be applied. Moreover,
we will create our own responsive layout by using Media Query. We used CSS media query
codes to build a responsive website.
Fig. Responsive Web design for Desktop Screened Devices

COMP-1181 Page 55
Fig. Responsive Web Design for Tablet and Mobile Screened Devices
4.5 Summary
In this Chapter, we broadly discussed about the data architecture of our website.
We created a detailed class diagram based on use cases and prototypes. We also reviewed about
the data security concerns that our website can be occurred and how to avoid from those data
security threats. Finally, we created a responsive web design template for our website.

COMP-1181 Page 56
Chapter-5| Engineering
5.1 Timebox 1 (8th
Feb - 21st
Feb)
During Timebox 1, we would create a relation database based on the class
diagram we have. By creating database, we would start the implementation process. We would
develop our website according to timebox plan that we have discussed. Along with developing
process, we would also make to meet the business requirements.
5.1.1 Creating Relational Database of the Website
We have made a class diagram to consider about data model of our website in the
previous chapter. Based on the class diagram, we can create a database since the purpose of a
class diagram is to perceive the database architecture.
Fig. Class in Class Diagram to Table in Database
Classes in a class diagram are transformed into tables in the relational database.
The name of a class is the title of the relational database table. The attributes of the class diagram
are organised as columns in the database. The data type of each attribute is also defined in the
database.
Class to Table

COMP-1181 Page 57
Fig. One to Many Relation between Two Classes to Credential Foreign Key
The relations such as one to many relations between classes in class diagram are
developed as credential foreign keys in the database. “*” sign are seen as credential foreign keys
in the database.

COMP-1181 Page 58
5.2 Timebox 2 (22nd
Feb – 6th
Mar)
In Timebox 1, we have finished requirement analysis and creating database. In
timebox 2, we would create registration processes for admin and customers, adding and updating
new building materials, category, brand and manufacturer.
5.2.1 Connecting with Web Server
Fig. Connecting with Web Server
The code shown in the above picture is to connect our php files with the apache
web server. Here, we used the localhost server for development process. For actual use, the
domain name of web hosting server would be written instead of “localhost” server.
We will use PDO (PHP Data Objects) rather than MySQL functions. This is
mainly because of security. MySQL functions are deprecated because of security threats and
inflexible to use with other databases. PDO is a general database abstraction layer with support
for MySQL and many other databases. PDO can work well with many other databases. It
provides prepared statements, input filtering and output escaping methods which are important
for security.

COMP-1181 Page 59
5.2.2 Customer Registration
Fig. Customer Registration Form
Invalid email format will not be accepted by the website. Input boxes with *
sign are compulsory to enter. Otherwise, the website will show alert message. Moreover, the
customers cannot open account using email that is already signed up. The warning message
will pop up if the email address is already existed.
5.2.3 Adding New Building Materials
Fig. Showing Alert Message in Adding New Building Material

COMP-1181 Page 60
The sale price of a building material must not be less than 0 and must not include
special characters. Inputs with special characters and negative values would be denied to enter.
The material name must also be unique.
Fig. Customer Side Item Display
The website allows uploading up to five photos for an item. The names of the
photos are recorded along with the item id in the database so that we can retrieve the photos
correctly. The size of the images will be formatted as 200×200 pixels.
5.2.4 Unit Testing for Timebox 2
Test Case -2.1 Testing Customer Register Form for unique email account
Input Data Name : Someone
Email : nay@gmail.com (already existed email account)
Password : Password
Phone : 0111111
Address : Yangon
Action Enter all the input data and then click “Register” Button.
Expected Result Alert message box showing that “the email account is already existed.
Register with another account please.”
Actual Result Expected alert message was shown.

COMP-1181 Page 61
Fig. Test Case 2.1
Test Case -2.2 Testing New Building Material Form for number format in price
Input Data Name: Brick
Category: Brick
Sale Price: -2 (negative value)
Stock: 1
Brand: MEC Brick & Roof
Description: Brick
Action Enter all the input data and then click “Next” Button.
Expected Result Alert message box showing that “Only positive numbers and decimal
numbers are allowed for sale price”.

COMP-1181 Page 62
Fig. Test Case 2.2

COMP-1181 Page 63
5.3 Timebox 3 (7th
Mar – 20th
Mar)
In timebox 3, we would develop sectors deal with sale orders, payment and sale
delivery. Currently, the website will provide two payment methods, cash on delivery payment
and credit card payment. The website must display sale order lists and their payment methods to
sale admin.
5.3.1 Sale Orders
Fig. Sale Order Form for Customers
There are mainly two types of sale order form, sale order form for cash on
delivery payment and sale order form for credit card payment. For credit card payment order,
extra information such as credit card information and billing address information will be
included.
Customers can choose one of three delivery types for each order. They are-
standard delivery, two day delivery and custom delivery. According to standard delivery, the
ordered materials will be arrived within 2 to 5 business days. Additional 2.5% of total price will
be taken into account as delivery charges. The ordered materials will be arrived within 2 business
days in two-day delivery but the delivery charges are 5%. If the delivery address is outside of the
Yangon region, the customer has to choose custom delivery so that the delivery admin will call
the customer and provide the custom delivery service.

COMP-1181 Page 64
5.3.2 Imitation of Online Credit Card Payment
A real online credit card payment is a set of complex processes. Firstly, the
customer has to fill the credit card information and billing address information in the order form.
Once the customer clicks the “check out” button, the customer will arrive on Payment Service
Provider’s secure payment pages. In this case, we have to connect with our PSP’s API function,
requesting the transfer of data. Parameters such as our merchant’s id, unique data for order, all
the credit card information, total price and currency would be taken by the PSP website.
Then, on the PSP’s website, the card holder’s detail information will be
authenticated by the PSP using several security procedures. If the card is authenticated
successfully, the total price is charged and allocated to the merchant account. According to
business logic, the merchant should not take all the payment without delivery, but take a
deferred payment until the products have actually delivered.
Fig. Credit Card Payment Form

COMP-1181 Page 65
5.3.3 Recording Payments
We should not take the entire payment for any order without delivery. Therefore,
we will record the payment related data once the delivery was success. In the following picture,
when the user click “Mark as delivered” button, the system will ask that has the payment
been made or not. If the user clicks “ok”, the payment data will be recorded in the database.
Fig. Recording Payment for Sale Orders
Besides, we can “undo” the delivery. But if the delivery was not success, the
payment data must also be pending. In fact, we should keep the pending orders in a separate
list.
Fig. Pending Payments for Sale Orders

COMP-1181 Page 66
Test Case – 3.1 Testing for adding one item to cart twice by the customer
Input Data Add to cart : 3 (add twice)
Action Enter the input data and then click “Add to Cart” Button. Make this
action twice.
Expected Result Alert message box showing that “This material is already in your cart.
Are you sure that you need more?”
Fig. Test Case 3.1

COMP-1181 Page 67
5.4 Timebox 4 (21st
Mar to 3rd
Apr)
According to our plan, we have to develop all the supplier related pages in
timebox 4. This should include adding, editing and deleting of supplier, purchase order processes
and delivery processes.
5.4.1 Displaying Supplier Detail
The website will display the supplier detail information along with the list of
purchase orders to them. Therefore, we can see our relations with each supplier vividly.

COMP-1181 Page 68
Test Case – 4.1 Testing recording payment for purchase orders
Input Data Check the warehouse whether the ordered item was received or not.
Action Click “Mark as received” after checking.
Expected Result Alert message box showing that “Has the payment been made for this
order? Please confirm.”
Fig. Test Case 4.1

COMP-1181 Page 69
5.5 Timebox 5 (4th
Apr to 18th
Apr)
In timebox 5, we would create real estate property advertisement related pages.
And, as we mentioned in previous chapters, our website will be able to extract two kinds of
reports, loyal customer report and revenue report.
Fig. New Property Advertisement Upload Form First Step
Fig. Property Advertisements List for Customers

COMP-1181 Page 70
5.5.1 Reports
Fig. Revenue Report
The website can produce the revenue report for a specific period. The period is
defined by the delivery date or payment date. By viewing the report, we can evaluate that
which items have more demand. And we can extract the total revenue for a specific period.
Fig. Loyal Customer Report
The website can also produce loyal customer report in which list of customers are
extracted along with their expense on the store for a specific time. Based on the report, we can
perceive the most valuable customers for a specific time, along with their expense.

COMP-1181 Page 71
5.5.2 Searching Service for Customers
Customers can search all kinds of buildings materials by typing some keywords
such as “cement” or “elephant”. Searching process is linked between tables in the database.
For instance, tables such as “building material”, “category” and “brand” are linked together for
searching by the customers.
Fig. Searching Results for the Word “Cement”
Test Case – 5.1 Testing for revenue report
Input Data Frome Date : 2016-03-22
To Date : 2016-03-24
Action Enter input data and then click “Filter”.
Expected Result The report will show revenues earned on 22-03-2016 and 23-03-2016.
Actual Result Expected list was shown.

COMP-1181 Page 72
Fig. Test Case 5.1
Test Case – 5.2 Testing for loyal customer report
Input Data Frome Date : 2016-03-22
To Date : 2016-03-24
Action Enter input data and then click “Filter”.
Expected Result The report will show customers who ordered materials on 22-03-2016
and 23-03-2016.
Actual Result Expected list was shown.

COMP-1181 Page 73
Fig. Test Case 5.2
5.6 Summary
Throughout chapter 5, we developed the website according to our timebox plan.
Development processes were described along with screen shots. We also made unit testing for
each time box.

COMP-1181 Page 74
Chapter- 6| Deployment
6.1 Introduction
In this chapter, the iterative development during our development process will be
described. Due to the iterations, we also had to make a new plan for incremental delivery or time
box plan. Later in this chapter, we will extract some of the integration testing and accessibility
testing for our website. We will also evaluate the user interface design of the website using
criteria set in chapter 2, 2.3.
6.2 Iterations during Development Process
Iteration 1
The first version of the class diagram for our website did not include brand and
manufacturer class. But our supervisor argued that if we do not have the record of brand and
manufacturer in the database, the spellings of them for each material would be wrong.
And, there would be no standard name for specific brand or manufacturer.
Therefore, we went back to timebox 2 from time box 3 and we added the brand
class and manufacturer class in the class diagram. We built tables for brand and manufacturer in
the database so that the data entry clerk can easily choose the right manufacturer for each
brand and the right brand for each building material.
Fig. Brand Table

COMP-1181 Page 75
Iteration 2
Our supervisor also mentioned the way of displaying sale orders. The old
version of the sale order list contains a lot of unnecessary information. The following picture is
the old version of sale order list.
If we had 500 sale orders at the moment, the responsible sale staff would have to
scroll all these. It would be also difficult for the delivery staff to check orders for delivery.
Therefore, we redesign the sale order list as the following.
We separated the list such as “pending orders”, “delivered orders” and “show all
orders”. Only the delivery location and order date are displayed so that the delivery staff
can make the delivery route easily. By clicking the Sale Order ID shown in blue colour, the
user can see the detail of each order again.

COMP-1181 Page 76
Iteration 3
The data included in first version of loyal customer report, were not met the
business requirements. Some of the columns in the report are not necessarily required. Thus, we
have to review the extracting codes for the report when we were in time box 5.
6.3 New Time Box Plan due to Iterative Development
Because of those iterations described in the above section, we could not follow
our old time box plan. Therefore, we considered renewing our time box plan. The following table
is the new updated time box plan for timebox 4 and timebox 5.
Timebox Duration Tasks Expected Outputs
4. 25th
Mar- 6th
Apr Managing Supplier and Purchase
Orders
Forms to add new supplier,
purchase order display pages and
delivery pages for admin,
Searching Services for Customer
side
5. 7th
Apr- 17th
Apr
Managing Property Offers and
reports
Property offer forms for admin
and customer, revenue reports and
customer loyalty report for
materials.
18th
Apr-
Submission Date
Integration testings, Accessibility
testings, Acceptance testings,
Missing things and further
enhancements
Testing Results, Feedbacks, and
Completion of the website.
Table – New Time Box Plan

COMP-1181 Page 77
6.4 Evaluation of User Interface Design Using Design Criteria
In order to evaluate the user interface design of our website, we will apply the
usability and UX criteria that were set in chapter 2, 2.6.
Usability and UX Criteria Mark Reason
Strive Consistency
1 2 3 4 5 Both the interface and functionality of the
website is very consistent.
Enable Users to use Shortcuts
1 2 3 4 5 There are no effective shortcuts for the users
to use.
Offer Informative Feedback
1 2 3 4 5 Feedbacks such as error and warning alert
boxes are richly provided.
Permit Easy Reversal of Actions
1 2 3 4 5 There are limited “undo” “redo” actions.
User cannot do these actions in some pages.
Support Internal Lotus of Control
1 2 3 4 5 Users can explore the website as they like.
They will feel that they are in control role.
Reduce Short Term Memory Load
1 2 3 4 5 Users can know where they are very easily.
Reduce Data Loading Time
(W3C Web Standards)
1 2 3 4 5 Data loading time is fair.
Limit Text Size
(W3C Web Standards)
1 2 3 4 5 The text sizes are consistent for the whole
website.
Limit Different Colour Usage
(W3C Web Standards)
1 2 3 4 5 Mostly light red, light gray and white
colours are used, good colour match.
Design for Flexibility
(W3C Web Standards)
1 2 3 4 5 The website is responsive; flexible for many
different devices. Colour blind people can
also use the website.
Total 37

COMP-1181 Page 78
Fig. User Interface Design Evaluation
6.5 Summary
In this chapter, we described about the iterative development during development.
We extracted a new time box plan. And we tested integration testing and accessibility testing.
Finally, we evaluated the UI of our website using usability and UX criteria.
Consistent Design
(Shneiderman)
Feedbacks will be here
(Shneiderman)
Applying Color Theory
Limit Different
Color Usage
Limit text size
(W3C Standard)
Keep Design Simple
(Shneiderman)
Shortcuts
(Shneiderman)

COMP-1181 Page 79
Chapter- 7| Testing
7.1 Introduction
Generally, we can divide testing into two aspects, functional testing and
usability testing. Functional testing focuses on the functionality and background codes of a
system. Usability testing mainly focuses on performance, flexibility and ease of use of a system.
Unit testing which we have done in above chapter is a kind of functional testing. In this
chapter, we will make integration testing as part of functionality testing and accessibility testing
as part of usability testing. We would also explain and make an end-user acceptance testing plan.
7.2 Test Frameworks
A test framework contains built-in test functions which can display the results of
a testing as in the following picture. Test frameworks play an important role in system testing
procedures nowadays. The following picture shows the result retrieved by Qunit, which is a test
framework testing a transaction.
In real world, we use this kind of test frameworks for testing process. We have the
idea to do this in testing our website. But because of time constraint, we could not do this.
Therefore, we just worked on original testing style which is testing by processing.

COMP-1181 Page 80
7.3 Integration Testing
Integration testing is a kind of testing in which tasks are combined and tested as a
group. We have to make integration testing after unit testing and before accessibility testing. In
this section we are going extract some of integration test cases for our website.
Integrate Test- 1 Testing for Adding New Building Material
Input Data Name: Burnt Clay Brick (1Kg)
Category : Artificial Brick (Choose from Category Table)
Price :0.25
Brand : MEC Brick & Roof (Choose from Brand Table)
Description : Burnt Clay Brick
Actions Enter all the input data and upload photos. And then click “Add”.
Expected Result New Building Material must be shown in the item list along with the
right brand and the right manufacturer.
Actual Result Expected result was shown.
Fig. Integration Test -1

COMP-1181 Page 81
Integrate Test- 2 Testing for Sale Order Procedures
Input Data -Customer Login Data
-Add items to shopping cart
In the order form-
Delivery Type: Standard Delivery
Delivery Address : Bayint Naung, Yangon
Region : Yangon
Phone :0999999
Actions Enter all the input data and then check invoice. And click “Send Order”.
Expected Result New Sale order must be recorded in the database along with pending
delivery status.
Actual Result Expected result was shown.
Fig. Integrate Test- 2

COMP-1181 Page 82
7.4 Accessibility Testing
Accessibility Testing mainly focuses on the user interface design. It is similar to
usability testing. Design flexibility, users such as colour blind people or other disable people are
in consideration according to accessibility testing. In this section, we would test our website on
various devices and OS in order to make sure that our website provides multiple accesses.
Fig. Testing with Chrome on Windows 7
All CSS and HTML elements work well on google chrome. By using chrome, users can receive
the most convenient interface of our website.

COMP-1181 Page 83
Fig. Testing with IE on Windows 7
Most of the CSS elements cannot work properly on Internet Explorer. Our website would be
annoyed for users if they use IE as their browser. We have to consider how to fix this problem
later.
Fig. Testing with UC on Android

COMP-1181 Page 84
The design of the website will be flexible for tablet and mobile screened devices.
Fig. Testing with Firefox on Ubuntu
The CSS and HTML elements work also well with most browsers on Linux OS.

COMP-1181 Page 85
7.5 End-User Acceptance Testing Plan
User Acceptance Testing (UAT) is also very important to make in order to reach
the success of our website. During UAT, actual end-users test the website to make sure it can
handle the business requirements. Therefore, UAT concerns about real-world scenarios based
on business specifications, rather than technology aspects, although it may contain performance
and security testing. The objective of this testing is to get feedbacks from end-users.
Date Stakeholder Transactions to be Tested Feedback
15-4-2016 Data Entry Staff Admin Register, Admin Login, Manage
Category, Brand, Manufacturer, Manage
Building Materials
No Material
Stock
15-4-2016 Sale Staff (or)
Marketing Staff
Customer Register, Customer Login, Search
Building Materials, Add items to cart, cash on
delivery order and credit card order by customer
No feedback
15-4-2016 Sale Staff View Sale Orders, Record Delivery, Record
Payment
No feedback
16-4-2016 Purchase Staff Add new supplier, purchase order to supplier,
view purchase order, record delivery
Faster way to
collect items
16-4-2016 Sale Staff Revenue report or sales report extracting Graphs
16-4-2016 Marketing Staff Loyal Customer report extracting Graphs
16-4-2016 Data Entry Staff Manage Property Offers uploaded by customers Advanced
Searching

COMP-1181 Page 86
During UAT, the business argued that some of the transactions such as adjusting
stock balance and advanced searching for property offers should be included. Moreover, we
should make faster way in collecting items for purchase order. Item image and detail
description are not actually required for purchase order since the staffs know exactly what the
materials are. Reports should display in graphs or chart in order to be able to visualise by
the managers.
We must consider these feedbacks as further enhancements of the website.
Without the above transactions, the website would not be sure to succeed.
7.6 Summary
Testing processes are very important that system testing is a huge subject itself. In
this chapter, we tested integration testing as part of functionality testing and accessibility testing
as part of usability testing. We also made user acceptance testing plan.

COMP-1181 Page 87
Chapter-8| Post-Project
8.1 Introduction
Throughout chapter 7, we will set the system maintenance policy for the website.
After that, we will discuss the good points and weak points of our website according to the
business perspective. We will also point out the missing things and further enhancements.
8.2 System Maintenance Policy for the Website
In real-world, system maintenance policy must be set in SLA (Service Level
Agreement) as a contract. The responsible stakeholders and their tasks for the system
maintenance should be set clearly. The contract must include financial options and service
options.
The following table is a kind of sample table for system maintenance policy for
the website.
Maintenance Items Daily Weekly Monthly 6 months Yearly
Data Backup
*
Admin and Customer
Accounts Maintenance
*
Security Maintenance
(SIA and XSS Attack)
*
Fixing System Bug
Errors
*
System Updating
*
Extend Maintenance
Policy
*

COMP-1181 Page 88
8.3 Legal, Ethical and Social Concerns
There are varieties of legal, social and ethical issues that need to be considered.
And we need to protect not to happen the issues in the future.
The legal issues include intellectual property and copyright issues. Although
the design, logo and creative ideas embedded in our website were created by using our own idea,
others can steal or imitate that idea. We should declare about the intellectual property rights or
copyrights for our product. In order to avoid this issue, we should register to get a copyright
licence for our website or the store. But there are still other serious legal issues.
Ethical concerns would be arisen deal with delivery process. Late delivery of
building materials could be a kind of ethical issues. To protect the confidential data of customers
are also important. To protect unauthorized access and embezzlement of confidential data,
secured technologies such as software firewalls and hardware firewalls should be used. Virtual
Private Network (VPN) could also be applied to protect the confidential information of
customers from some employees and hackers. Some encryption methods should be used in
processing and distribution of sensitive data.

COMP-1181 Page 89
8.3 Evaluation of the Website
In this part, we will evaluate the website in terms of business aspects. There are
significant gains or losses that the business would be affected by using the website. Here we will
mention these significant gains and losses.
8.3.1 Benefits by Using the Website
Nay La store may enjoy increase in revenue by using the website. The sale
orders and purchase orders would be in database and it will be easier than ever to work for
the employees in the store. However, if there were some technophobes among the employees, we
will have to change their attitudes.
Revenue report and loyal customer reports can be extracted with just one
click. The employees would no longer need to do paperwork and calculating to extract reports.
Therefore, there are a lot of business benefits by using the website.
Moreover, we can store supplier information and respective purchase orders
information in the database which means that the store would not need paper based files
anymore.
8.3.2 Possible Risks and Impacts of the Website
The important data such as the sale orders and purchase order information
can be destroyed. The store has to back up the important data daily and weekly otherwise the
reputation of the store and the revenue may reach decline.
The confidential data of customers and suppliers should also be kept
securely. Nay La store will have to face with legal and ethical problems if one of the confidential
data of stakeholders were stolen or hacked.
The emotional impacts to the employees can be occurred since the working
procedures were changed. We have to encourage the staffs to use the new web based system by
explaining about more benefits with less work.

BIT (Building Material Retail Online Store) Project Nay Linn Ko

BIT (Building Material Retail Online Store) Project Nay Linn Ko

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie BIT (Building Material Retail Online Store) Project Nay Linn Ko

Ähnlich wie BIT (Building Material Retail Online Store) Project Nay Linn Ko (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

BIT (Building Material Retail Online Store) Project Nay Linn Ko