Running Head HUMAN-COMPUTER INTERFACE 1HUMAN-COMPUTER IN.docx
MoneySafe-FinalReport
1. Canterbury Christ Church
Department of Computing
BSc (Hons) Internet Computing
2012-2013
Individual Project (40)
MCOMD3PRJ40
Title: Design and Development of an Online Banking System
Author: Shaun Michael Stone
Supervisor: Gerald Stock
University Email: ss502@canterbury.ac.uk
Website: www.smks.co.uk
I declare that this report is my own original work containing no personal data as defined in the Data
Protection Act (1998) and that I have read, understood and accept the University's regulations on
plagiarism/intellectual property rights/research ethics (in particular the Research Governance
Handbook) and the Module Handbook.
Further, I accept that digital and/or hard copies of my Individual Project 40, or parts thereof, may be
made available to other students, individuals and organisations after it has been marked.
Finally, I accept that no (digital or hard) copy of my Individual Project 40 (including any
optical/magnetic media and any othermaterial that may have been submitted as part of my Individual
Project 40) will ever be returned regardless of the circumstances
Signed
Submission Date
2. Page 2 of 33
ABSTRACT
The intention of this project is to gain better expertise in building web applications using a variety of
modern techniques, showcase my ability to use good interaction design and improve practise of
database,client and server side design and development. This system will be used merely as a
demonstration of ability but will also make me discover what is technically possible. In this case it is
for academic purposes.
This web application can demonstrate the use of permissions. The administrator has the most and the
customer has the least. With this system in place the system can work in a robust manner if security is
taken into strong consideration. There was a strong focus on smartphone usability. In 2012 United
Kingdom 52% of mobiles were being used multiple times daily. (www.thinkwithgoogle.com)
The implementation was achieved using the LaravelFramework and a MySQL backend database. I
used Sublime Text 2 as my code editor as it’s very rich in features.
Testing made me understand the underlying flaws of the system. More work had to be undertaken to
fathom any faults.
To conclude I was very happy with the outcome of the project and I met what I set out to do in the
project initiation document.
3. Page 3 of 33
ACKNOWLEDGEMENTS
I would like to thank Gerald Stock for supervising me throughout the many phases of the project. He
continued to keep me on track and follow up on my current progress. Without the meetings arranged I
would not have achieved and fulfilled as much as I did.
For all the helpful lectures and insight I would not be at the technical and analytical level I am today. I
thank the Computing department’s staff for challenging me academically and making me realise what
I am capable of doing in the subject area.
The supportive members of Laravel Forums and Stack overflow. They are always of great help and a
great contribution to knowledge on the internet.
I would also like to thank my family and friends for complete support throughout my time at the
University.
4. Page 4 of 33
CONTENTS
Title Page Page 1
Abstract Page 2
Acknowledgements Page 3
Contents Page 4-6
Appendices Page 7
Section1 – Introduction
1.1 – Area of Interest
1.2 – Traditional Bank Problems
1.3 – Modern Banking
1.4 – Problem Specification
1.5 – Project Agreement
1.6 – Personal Ability
1.7 – Project Structure
1.8 – Academic Growth
Page 8
Page 8
Page 8
Page 8
Page 8
Page 8
Page 9
Page 9
Page 10
Section2 – Rationale
2.1 – Choice of Project
2.1.1 – Choices
2.1.2 – Intentions
2.2 – Choice of Languages
2.2.1 – Reasoning
2.2.2 – Pros and Cons
2.2.2.1 – JavaScript
2.2.2.2 – PHP
2.3 – Choice of Framework
2.4 – Summary
Page 11
Page 11
Page 11
Page 11
Page 11
Page 11
Page 12
Page 12
Page 12
Page 13
Page 13
7. Page 7 of 33
APPENDICES
APPENDIXA – Glossary
APPENDIXB – ProjectInitiation Document (PID)
APPENDIXC – Changes to the ProjectInitiation Document
APPENDIXD - Current Environment InvestigationReport
APPENDIXE – Requirements Specification
APPENDIXF – DesignReport
APPENDIXG – Implementation
APPENDIXH – Testing
APPENDIXI – User Guide
APPENDIXJ – ProjectManagement
APPENDIXK – Meetings with Supervisor
APPENDIXL – Agile Development Time box 1
APPENDIXM – Agile DevelopmentTime box 2
APPENDIXN – Agile Development Time box 3
APPENDIXO – Testing Screenshots
APPENDIXP – Questionnaire
8. Page 8 of 33
SECTION 1 – INTRODUCTION
1.1 - Area of Interest
A bank’s purpose is to keep our money safe for us; they have done this since their existence. Whilst
they ensure this is the case they supply a certain amount of interest to our accounts to add to our own
interest in their bank. They make deposits and withdrawals through a bank teller that does this in a
safe and secure manner in a branch. For a customer to manage their finances a teller has to be present
and the bank has to be open. The busier it is the longer you possibly have to wait to see someone
about your enquiry. Paper statements of your account(s) are then sent to your address per month to see
an overview of the transactions you have made.
1.2 - Traditional Bank Problems
This is a traditional way of managing your finances with your average bank. It definitely has its
drawbacks in terms of efficiency and availability. We are limited to only making a trip there if the
branch is open, so if it is closed we have no choice but to wait the next working day. We are
constrained to making transactions only if the bank teller has finished with other customers who were
there before. This is a problem if a customer is struck for time. Paper statements add clutter to
households and can get out of hand if they are not kept organised. Branches are known to be very
costly to run when you think of the overheads, employee salaries and training necessary.
1.3 - Modern Banking
Online/E Banking is the same concept but a migration in terms of transactions. It is in no doubt the
wave of the future. It provides consumers the same functions but through electronic delivery channels.
It has seen exponential growth over the years with more people accessing it in a variety of ways.
Mobiles, Tablets and PersonalComputers make this service much more accessible. In modern times it
is typical for everyone to possess a contracted mobile to access the web for many reasons. It is a
modern approach and a very good subject to explore.
1.4 - Problem Specification
Money Safe is a small bank that contains 3 branches over the South Eastern area of England.
Unfortunately due to the presence/cost of the branches the bank is struggling to create promotions that
can entice more customers to set up accounts. They are looking for a way to reduce their overheads so
they can increase their interest rates,lower charges made and make their services more accessible to
the public. As they are a small bank, competition is tough enough. They need to find a way to separate
themselves from their competitors.
1.5 - Project Agreement
Money Safe is willing to accept an integrated system into their company that can help them with this
problem. It will be an online banking system that will allow their customers to access their accounts at
any time they wish. They can view statements straight away online without the problem of paper
based statements,they can access it instantly without waiting for others to finish. It will also benefit
the bank; they can create statements of all the customers actions so they can make business decisions
based on the results. Any interacting entity that makes a transaction can be recorded and time stamped
so that any suspicious activity can be discovered where applicable.
9. Page 9 of 33
1.6 - Personal Ability
Based on the experience acquired over the past few years I have built up a great understanding of
computing related disciplines. This project will be relevant in my knowledge of creating web based
systems using three tier model architecture composed of a front end (client side) using HTML5 &
JavaScript/jQuery, back end (server side) using PHP and a MySQL database. I have chosen a
financial system because it is an area of interest. It will also put everything I have learned previously
into a big project that can be used to showcase my technical and design capabilities.
I will be testing my ability of the following:
Keeping to a schedule/Project Management
Gathering Requirements
Systems Analysis
Systems Design
Account privileges
Making transactions
Creating a well-designed GUI
Using good programming practises
User guide documentation
Thorough Testing
Work as an individual
1.7 - Project Structure
This system will need to be structured in a way to ensure that all requirements are noted in detail, use
these requirements to design the look and function of the system and then implement the system using
the relevant programming languages. I felt that using the Waterfall method would be very suitable in
this situation.
This report contains a Requirements Specification (Appendix E). It comprises of SSADM methods to
use data flow modelling to understand how data flows through the system. The specification will
provide a general overview of the system and how it interacts with the external entities in context
using Gane and Sarson notation. Decomposing this into multiple processes for a more detailed
understanding of how data flows around the system. It will then cover the stores of the system using
the Entity Relation Model to work out how entities can relate to each other by cardinalities and
relationships.
This report contains a Design Report (Appendix F) that will include a menu map of the system and
details of each web page and its contribution to the system. This will make the implementation easier
to understand.
Implementation Appendix (G) will contain all details of physical code used to make the system
operate as intended along with the screenshots.
Testing (Appendix H) will allow me to thoroughly test all aspects of the system from every angle. The
routing, authorisation, validation, database tables and constraints will all be analysed. It will also have
a section on Human computer interaction principles based around Neilson’s heuristics.
10. Page 10 of 33
A User Guide Appendix (I) is used for tuition on all aspects of how the system operates. This will be
read by anyone who has difficulty understanding any operation. The system is going to be designed to
hopefully not have to rely on the documentation but it will be there anyway as backup. There is also
the option to view a video demonstration of the systems in action.
Appendix O and P (optional extra appendices) contain the results obtained from the Testing phase of
the waterfallmodel.
1.8 - Academic Growth
This project will contain many hard challenges that will judge the quality of my work as a whole,
therefore it is paramount that I keep focused and on track. This project is very relevant to my degree
and will establish the integrity of my performance. Achieving an upper class second in the previous
year I am planning to meet the level of this final year with great success:
This project will show that I can work as an individual
Demonstrate better Organisation skills
Produce a quality system that can be showcased
Improve my understanding of how big scaled web systems function
Build on my knowledge of a variety of programming languages
Increase my experience of software creation
Demonstrate skills to potential employers
11. Page 11 of 33
SECTION 2 – RATIONALE
2.1 – Choice of Project
2.1.1 - Choices
I was struck between two projects that I was interested in creating. I was thinking either an E-
Commerce system or an e-Banking system. So I did some research on both areas to identify what
perhaps need improvement. E-commerce systems have come a long way in terms of scalability and
expansion. Amazon is a great example of a huge complicated web system with great design and
features.
Because I have a great interest in design I was very impressed with most of the E-Commerce systems
that can be found. I then moved my research into online banking systems and found that some were
lacking in design and interaction; old fashioned and very limited in features.
2.1.2 - Intentions
I decided to take on this as a project so I could overhaul some areas where I feelit could ameliorate.
Give it a modernistic feel to the user and create an immersive experience. Make use of statistics so the
customer can keep track of their spending; something that is surprisingly not provided to customers
with many banks.
Because of the nature of the system being online, I had to consider what would be needed to make this
happen. I then did some research on what would be best suited.
2.2 – Choice of Languages
2.2.1 - Reasoning
As my website is internet based I am using HTML as the front end mark-up language because it is the
de-facto standard for presentation to the user with the support of Cascading Style Sheets. I needed a
front end scripting language to make my pages more dynamic in terms of interactivity.
The dominance of JavaScript is a standard on pretty much all websites; it has been developed on from
1994 and browser manufacturers have worked on it since to make it work with their browsers. This
was my choice of a front end programming language because there are no other real competitors.
The next step was to identify a server side language that can deal with sensitive data. When carrying
out research for a choice I looked at certain factors:
Will this suit my server platform?
Do I have experience with this language?
Does it deem suitable for the system.
Where does it fit in?
Will it let me achieve my targets?
Is it compatible?
Is it integrated?
Is it widely used?
Is it deemed as a standard?
12. Page 12 of 33
I then analysed a list of the most popular languages and verified what I felt would be right to
implement this system:
Java Servlets/Applets
PHP
C
ColdFusion
ASP
Based on the list I came to the conclusion I am fairly experienced in PHP and all the other languages I
was either not fully confident using or I felt it was unsuitable for what I planned to do.
MySQL is my choice as a Relational Database Management System (RDBMS) as it is open source
and used in conjunction with PHP. It is open source (in other words it is free to use on a GNU
license). It performs well and is well suited for my proposed e-banking system.
2.2.2 – Pros and Cons
2.2.2.1 - JavaScript
Pros
Speed – Very fast because code functions are run instantly because it does not need to interact
with the server unless it is required.
Simple – Easy to learn and highly supported online.
Versatile – Plays well with other languages.
Cons
Security – Easily exploitable for malicious purposes
Dependence – The user needs to have it enabled for it to function.
2.2.2.2 - PHP
Pros
Databases – Works very well with databases especially MySQL.
Frameworks – An abundance of frameworks available.
Popular – Used on large scaled websites like Facebook.
Large body of functions available.
Interpreted - build cycle is short.
Regular expressions support for any complicated input.
Cons
Change – Constantly changing and deprecation of certain features.
Messy – Syntax in some areas can get messy.
Inconsistent - function names like (isset and is_null)
Global configuration parameters can change language semantics.
13. Page 13 of 33
2.3 – Choice of Framework
Based on the variety of frameworks available I wanted to find the one that best suited my needs.
Researching the web I found a list of potential frameworks to be used for my project that I felt stood
out:
CakePHP – One of the oldest it has a formidable reputation with a strong community.
Yii – Previously my first option it deemed far too complicated with a strong dependency on
the command line.
Laravel– Laravel is fairly new yet deemed a very capable and elegant framework that has
gained high popularity.
I sampled each of the frameworks and concluded Laravelsuited me best because of its easy
expressive syntax and rich features.
2.4 – Summary
With a clear understanding of what tools I was going to use to create the project I could then move on
to analysing what data flows and entities are needed for the banking system.
14. Page 14 of 33
SECTION 3 – LARAVEL FRAMEWORK
The Laravel framework is very well suited to my project. The features it contains make messy and
complicated procedures more simplistic and elegant. It has good community support and is incredibly
well documented. As of the time of writing there have been more than 2 books published and many
tutorials are available on the web. Laravelalso has a forum for any members; something I am
registered to whenever I need support and guidance. Below are some of the features I will be making
use of with my web application.
3.1 – Model View Controller Approach
3.1.1 Basic Concept
Model View Controller is a design pattern that is well established in many PHP frameworks and
Laravelis no exception to this. Originally developed for personal computing it has adapted to web
applications. The basic principle of this pattern is that it breaks the application into three functional
areas:
Model
The model is the business logic; in my case it will involve access and manipulation of stored data in
the database. Each of my database entities will have its own properties to structure it as its own
individual model.
View
The views will be the look and presentation of the system. For my website it will be all the HTML
webpages along with the features; buttons, forms and everything the user can see visually and interact
with.
Controller
The controller will have the power to change the views and update the models. It will be doing all the
work to make things happen essentially.
3.1.2 Benefits and Drawbacks
By separating logic it allows me to focus on specific areas of the application; if I want to design the
look and appeal of the website, I will not interfere with the logic only the visual elements. A problem
would be that because of the complication of separating this all up it may cause confusion when trying
to piece everything together. If this pattern has not been used before it can come across a little
confusing. Luckily I have experienced using it before so I have a good idea of how to make good use
of it.
3.2 – Object Relational Mapping
Laravelsupports a class called Eloquent. This is an object relational mapper, in other words it maps a
model to a table in the database. When it is mapped I can use it anywhere in my application along
with the static methods it handles to access its data from the database. This saves the effort of having
to write queries in the application over and over and use methods that for example; find an id of a
customer; this will return that row so I can use it where needed.
15. Page 15 of 33
3.3 – Classes
3.3.1 – Overview
Laraveluses mostly static methods to use classes in the scripts. This has been criticized by many
developers but in my opinion makes things less complicated. In Object orientation a class object is
instantiated and then used. With Laravel I can just call the method of the class and it keeps things
simple. There is a good deal of classes available and the full documentation can be viewed at
http://laravel.com/docs/home Here are a few classes I will be making use of, to name a few:
3.3.2 – Examples
Blade
Blade is an optional extension that can be added to my PHP scripts. It is a cleaner way of using PHP
in the HTML instead of me having to open and close PHP brackets and echoing out dynamic data. All
I have to do is encapsulate the PHP in between 2 opened and closed brackets. This will echo out the
data with PHP.
Redirect
With this class I can redirect to a page when necessary. So if the user tried to access an unauthorised
page I can redirect them to the login screen.
Input
With this class I can grab any post or get data without having to individually grab each post and put
them in a variable. This will be helpful when I want to validate the customer’s trying to register or log
in to an account.
Validation
I can assign rules to a certain model that means each entry abides to its required criteria. A phone
number would have to be a number and a password would have to be longer than 10 characters.
Validation is known in PHP to be long and tedious; Laravelmakes this process much easier.
Authenticate
Allows me to run methods that can attempt to log in a customer; check if the attempt was a failure or a
success. Also known to be a long winded process Laravelmakes this process much easier.
Form
Forms can be a pain to write out with the HTML syntax. The form class allows me to write out forms
that are easier to interpret. It also adds an extra element called CSRF. This is a procedure that can
prevent cross-site request forgery through a hidden field. CSRF is also known as session riding and is
a type of malicious exploit of a website where unauthorised commands are transmitted from a user
that the website trusts. Generating a session with this hidden field can try and prevent this from being
a problem.
16. Page 16 of 33
3.4 – Database Migrations
Database migrations remove the repetitive notion of having to insert and drop tables. I would maybe
like to alter some properties in my database that are better suited for my system. I would usually have
to open a SQL command line and input or paste all the SQL code into it. Laravel supports its own
command line called artisan than can create a whole database of tables and fields in one command. If
I want to remove the database completely I can use artisan to roll back the inserted tables. This is very
flexible to me and saves time.
Each table is assigned its own class file. It contains two methods called up and down. When up is
called the table is created along with all of its attributes and constraints. If the down method is called;
the table is dropped along with all of the attributes.
3.5 – Summary
Pros
Laravelprovides a clean and classy framework for PHP web development.
It rids me of using mixed HTML and nested PHP throughout the pages, providing a clear
view of all my scripts using simple, expressive syntax.
A variety of available classes that can simplify repetitive tasks; like logging in and registering
customer accounts.
Added Bundles from 3rd
party developers can be installed that can be used straight away.
Great support from the Laravelcommunity.
Separate logic, modelling and presentation using the Model, View, Controller pattern.
Create and drop Tables at the press of a command.
Excellent documentation.
Very configurable.
Blade template engine.
Cons
Because Laravelis created by a single software engineer and even with all his support there is
a possibility this will be dead knowledge.
Laravelmay lose popularity and something new could come around the corner.
Because it was only created in 2011 there may be instability in the code.
Finding answers can be limited because of its newness when compared to other frameworks
that have been around much longer.
New versions are constant. (Laravel4 is in the beta stage)
Based on this evaluation I am confident that Laravel will be the right framework for me as it meets
my requirements for a PHP framework.
17. Page 17 of 33
SECTION 4 – CHOSEN METHODOLOGY
4.1 - Waterfall Model
I chose the Waterfall Model because it fits the nature of my development. The central idea of this
model is to make sure my preceding stages are correct and it saves time and effort later on down the
line. It always provides a big picture with all the requirements and design documents so that
implementation can be approached with great understanding and clear thought.
18. Page 18 of 33
SECTION 5 – REQUIREMENTS
5.1 – Structured Analysis
“Structured analysis is a software engineering technique that uses graphical diagrams to develop and
portray system specifications that are easily understood by users” (Cory Janssen). Trying to identify
all of the risks and requirements we can ease the development process.
I need to use the right tools to provide me with an understanding of the system. My system will no
doubt be making use of inputs and outputs and doing some processing of data. This will be achieved
by using a logical data processing model.
My system will need to hold tables of records; like a customer for instance. It will need support of a
database to keep this information safe and on record for the system to operate. Therefore a data
modelling technique will be used.
5.2 – Process Modelling
This model is used to describe the business processes and externalinteractions with the system.
Context and Data flow diagramming is a very commonly used process modelling technique and this
will be my choice for gathering the requirements.
5.2.1 – ContextDiagram
Benefits
A context diagram is well suited and instrumental because it will show the business overview of my
system. I can learn what users will need to interact with the system. Providing me with a simple
overview I can break down the processes into more detailed fragments. In my experience it has
revealed omissions and errors in my business plan what were once thought as acceptable but were
then deemed either erroneous or unsuitable; this allowed me to make corrections before the design
process.
“The objective of a systemcontext diagramis to focusattention on external factors and events that
should be considered in developing a complete set of systemrequirementsand
constraints.”(Kossiakoff, 2003)
Drawbacks
It will not provide any information that is generated from the system. So I will not have an idea of
how the data is processed. There will also be much more to learn about the system as the context is
regarded as high level and will only show an overview. Another consideration is the use of various
notations that use the same approach but with various diagramming techniques; therefore a key will
have to be provided so that users can interpret the diagram.
Techniques
My Context diagram was composed to be as readable as possible. Separating each external entity;
along with its interactions with the system for clarity. My design kept consistent with the SSADM
notation.
19. Page 19 of 33
5.2.2 – Data Flows and Processes
Benefits
I will make use of data flows to focus on the logical processes my system will provide: Because it is
easy to understand and helps define system boundaries. It will let the user know how the system
communicates with the external entities in a more descriptive way. It will explain logic of the system
with the use of data stores and broken down processes.
Drawbacks
The problem associated with data flows is that it will be going under a lot of alteration to make sure it
is refined and correct. I can’t consider any physical aspects of the system at this stage; this could mean
I will not pick up on areas that may need refinement. Different notation is also used for data flow
diagrams and can be interpreted incorrectly, therefore a key explaining everything will be needed.
There are a lot of rules associated with creating data flows so it is very time consuming.
Techniques
I broke the separate entities into separate diagrams for better readability. I made sure that each entity
corresponded to the processes of the context diagram (Balancing). I kept the diagrams evenly spaced
and clear for the reader. I used only a level 0 data flow diagram as it was enough to understand the
function of the system. Adding more data flow levels would start causing complications and more
unnecessary work in my case.
My responsibility was to check the quality of the syntax and semantics accompanied with creating the
diagram. “Syntax, refersto the structure of the DFDs and whetherthe DFDs follow the rules of the
DFD language.” (Systems Analysis & Design, 2012). I will need to abide to all the rules of creating
the model.
“Semantics refers to the meaning of the DFDs and whetherthey accurately describe the business
process being modelled” (Systems Analysis & Design, 2012). This in my case would be caused by
misunderstanding of analysis.
Some examples are given in (Chapter5.4, Problems Faced) of this report.
20. Page 20 of 33
5.3 – Data Modelling
Because of the understanding of needing a database for my system I needed to model my data in a
way that felt suitable and relevant. An Entity relationship diagram will allow me to view all the data
components of the system in question. The technique of normalising the data is available that will
validate the model once it has been created. (Normalisation was not used in the end)
5.3.1 – Entity Relationship Diagram
“An entity relationship diagram(ERD) is a picture which shows the information that is created,
stored, and used by a business system” (Systems Analysis & Design, 2012).
Benefits
I will be able to identify the entities that will be associated with the system, when these are identified I
can work out how these entities can relate to each other. I can learn what possible attributes can be
assigned to these entities. I can identify parent instances to child instances and how many would be
associated with each (cardinality). I can check if there will be existence of a relationship between two
entities (known as modality). It gives better meaning and understanding of how a database along with
its tables can be designed.
Drawbacks
A limitation to this model is that it does not describe the processes involved, only the data. This is not
a problem as I have the processing covered with Data flow diagrams. If coming from a non-technical
background it will be hard for newcomers to accustom to. They also vary in notation, something that
can be hard to construe. A key will need to be provided for discernment. If my system involved using
classes in an Object Oriented manner then this would not deal with the interaction of classes.
Techniques
I originally used Chen notation but found it to be unreadable and messy. So I used a clearer example
using Visio’s Crows foot notation. I used a parent child hierarchy for a clearer representation.
21. Page 21 of 33
5.4 – Problems Faced
In this section you will find a list of some of the inconsistencies that were found throughout the
Requirements phase:
The context and data flows need to be balanced throughout.
Be clear with the data flows so they are not ambiguously defined.
The pin code should be attached to an account and not a customer. Because each account will
have a unique pin code attached to it.
The customer data flow should add customer details to the customer data store when a new
customer is registered.
No way of identifying how many attempts have been made to log into an account. Solution to
add another attribute called attempts.
Branch and Bank address had to be broken down into two separate attributes (address1 and
address2) avoid congestive fields.
No detailed description of the transaction made.
Check transactions table to see if a customer has withdrawn more than his limit for the day
using the ATM.
Not writing or reading every data store needed in the data flows.
Bad self-understanding of flows of data.
5.5 - Summary
By analysing this in more depth I could fully appreciate the work that had to be carried out for this
system to be successful. Even though this in depth analysis has covered most of the ambiguities; there
will also be the possibility of more problems arising throughout the development. Because of the
Analysis process I am more confident about the outcome of this project whilst before I found myself
trying to take on something very optimistic in terms of completion and scalability. After doing my
research in this area of business I have a better understanding of how everything will be able to work
together. The next phase will allow me to convert all this conceptual modelling into a more physical
and usable model.
22. Page 22 of 33
SECTION 6 – DESIGN
6.1 – Scope
“Design is not just what it looks like and feels like. Design is how it works.”(Steve Jobs). Going
straight into Implementation would have been a big mistake. Designing first allowed me to apply
general guidelines for the interface, structure data entry and provide a clearer approach to
implementation.
Design allows me to plan how I will implement so I have a full understanding of how to piece the
puzzle. Because of the large scale of this application; not designing all the pages and forms
beforehand would most certainly cause errors and mistakes.
6.2 – Processing
In this part of the design I wanted to capture all the processing of the banking system. By designing
the forms I could instantly see flaws in my requirements. This allowed me to correct my requirements.
By the end I could convert my logical processes into a physical process model.
“Design is the craft of visualizing concrete solutionsthat serve human needs and goalswithin certain
constraints.” (KimGoodwin)
My first task was to identify the physical architecture of my application. In my case for the Laravel
framework it was Model, View and Controller: A design pattern that separates allthe logic from the
presentation. This is an image example of how the Laravel framework functions: (Laravelbook.com)
The use of a hierarchical structure chart I could see an overview of how the website can be navigated.
This gave me a foundation to work on because I could then pinpoint the processes on various web
pages, see what permissions can be supplied to various users of the system. I used Microsoft Visio to
create the structure chart as it was best suited.
The structure chart was beneficial because I could:
See what authentication was needed
Understand what data entry was needed
23. Page 23 of 33
Understand the hierarchical structure of the website
Know how many pages were needed
Understand the design of navigation
6.3 – Module Specifications
In this section I wanted to show detailed diagram examples of the structure chart. This was useful
because:
Elaborated explanation of the modules of the website
Design for the necessary form inputs to make system work
Identify the type of inputs for the forms. (Text, dropdown, range)
Check for specific validation needed for the forms
Show the reports that needed to be generated on the pages
Show type of reports needed. (Summary, detail or turnaround)
6.4 – Database Design
With the design of the database I could now create the physical data model so that I could understand
how the processes would output data in the database. This was useful because:
Identify the data types of each attribute.
Identify all the constraints needed.
Identify all the key relations.
Set any defaults.
6.5 - Problems Faced
I had redundant pages that were then compacted.
Identified unnecessary procedures.
Processes could be merged with others in one form.
Simple links like logging out were not incorporated.
Teller id is too specific, changed to employee id as it made more sense.
Went from 26 pages to 17 pages on the website to achieve the same thing.
6.6 – Summary
With all of the design out of the way I could now begin implementing the system. Designing it all
beforehand was a necessity in my case as many inconsistencies were picked up throughout the
process. I learned that some forms needed extra data entries; my database needed more constraints
and reports needed more information. This cleared up all the ambiguities that were not found in the
Requirements phase resulting in an unimpeded approach.
24. Page 24 of 33
SECTION 7 – IMPLEMENTATION
7.1 – Approach
Now I had what I needed to design the system it was a matter of deciding on the best code editor. I
wanted to choose one that didn’t involve generating redundant code like Adobe Dreamweaver. I
wanted to write the html code from scratch and keep it clean and effective. I had the choice between 3
editors: (The images can be found on their respective websites.)
Notepad ++
Aptana Studio
Sublime Text 2
Notepad ++ is an open source code editor and has syntax support for many languages; something that
is a must when writing code. It is written with C++ and is a very light weight and simple portable
application. It is a very good contender.
Aptana Studio is known as more of an Integrated Development Environment (IDE). It is “…touted as
the professional open source development tool for the open web” (htmlgoodies.com) It is based on the
Java equivalent Eclipse but with more of a focus on the JavaScript and web development aspect. It
has weaknesses in terms of debugging and is not as lightweight as the text editors.
Sublime Text 2 is not open source and is a one off cost. Something I committed to because I found it
very good to use when writing code. It is extremely fast and supports a variety of features. You can
install packages that have been created by other developers. It has a good use of navigation, supports
error checking and dynamic code manipulation.
To conclude my choice was Sublime Text 2 as I prefer the features it offers and it’s very easy to use.
It can be found at http://www.sublimetext.com/2
25. Page 25 of 33
7.2 – Practise
7.2.1 Directory Structure
This is the structure I used when creating my separate models, views and controllers:
As you can see being in separate folders can make the structure more simplified. It made it easy to
distinguish certain aspects of the system. I can focus on a separate areas of the system like the logic
and not interfere with the other areas e.g. the visual aspects.
7.2.2 Hypertext Mark-up language Structure
Benefits of Good HTML
Modularity
Quicker to render – less duplicated code is better
Lighter – When Microsoft made the transformation away from tables on its home page in
2004, for example, it saw an improvement of over 72%. (Microsoft)
Better search engine optimisation – good use of keywords
Consistent look and professional appeal to the user
Competitive edge
26. Page 26 of 33
7.3 – Problems Faced
Rearrange Customer_Branch to Branch_Customer to meet requirements of a pivot table.
Add an id to pivot table as a requirement.
Using different username authentication for staff and customer is a big problem.
Not flexible with database queries.
Multiple users cause complications with framework. (Customer and staff).
Teller table is too specific and cannot relate to other staff like managers and administrators.
Authentication
I had a problem of trying to log in different users. Eloquent the Object Relational Mapper could only
assign one table model (in my case Customer). I needed to authenticate staff also, so in this case I
extended from the eloquent class to create my own authentication method that would support logging
in of employees and administrators.
This method started becoming too troublesome. Because of this I decided to split the whole system
into two sub systems:
A system for customers to manage their online banking
A system for employees to log in to (separate from the customers)
This proves to be far more secure as it removes the chances of access from a customer to the staff
system and vice versa. They would both be interacting with the same database so it would still
function exactly as before it’s just now there is more privacy.
System Changes
I have now removed all the database manipulation from the customer system to the staff table. It can
only be altered from the staff’s system.
Displaying results
Whenever a null value is presented it is replaced with N/A.
7.4 – Summary
My Implementation was assumed to take far longer than expected. I made good time and kept
consistent with progress. With the design document alongside I had clear thought of what needed to
be done, making the implementation a speedy process. Overall very pleased with the outcome of the
systems created.
27. Page 27 of 33
SECTION 8 – TESTING
8.1 – Approach
My plan was to use Excel to record my results in a formatted table. For HCI Testing I created a
Questionnaire template that is printed off and handed to people who test the usability of the system.
8.2 – Tests
The tests I found important in the testing phase:
Checking all the routing to see if pages were directing the user incorrectly, it would make the
system not run very effectively.
Making sure permissions were being used as intended. I did not want tellers modifying other
tellers; this would only be allowed for the administrator.
Making sure users were being authorised appropriately. Didn’t want users who were not
logged in accessing pages that were only available to registered customers.
Checking each validation rule for all of the forms. So the user knew how to rectify any
problems they were facing.
Allowing users to test the system; they can pick up on problems with the system that I could
then rectify.
The tests I found not very effective:
The use of HCI principles provided some results. But not enough to be a convincing analysis
of system interaction. I could have found more people to take the questionnaires to build up a
stronger case of understanding. Based on the results I obtained and analysed I was fairly
satisfied with my feedback on the system otherwise.
8.3 – Problems Faced
By testing the system I found small problems in my system. It allowed me to correct these problems:
User can only create one account. Removed unique constraint on customer number foreign
key in accounts table.
Confusion of variables source and destination turned out to be very troublesome. This
affected updates such as blocking accounts when they enter a pin wrong 3 times.
Transactions were displayed in ascending order and looked confusing on a PDF statement. I
changed this order in the query. “ORDER BY Created_At DESC”
8.4 – Summary
With testing done I was now convinced that I ridded the system of any anomalies. I was confident the
system would now be fully functional to users who would like to use it. Now I was confident on how
the system works I could move on to creating the User guide for both systems.
28. Page 28 of 33
SECTION 9 – USER GUIDE
5.1 – Approach
Because my system turned out to be two systems; I had to create a separate user guide for both
explaining everything about the system and how it could be used. This was to be done in a PDF
format as this is a well-known format for reading documents. It allowed me to digitally bind together
a cover page and contents in an orderly fashion.
I then decided to add video guides, as it is well known a lot of users skip reading the user guide and
prefer practical approaches. I found that video tutorials are very helpful as users can follow along with
the videos. I chose to use YouTube because it is very popular; it has less of a probability of going
down as it is very depended on. This makes learning how to use the system more accessible if a user
guide is out of reach.
5.2 – Outcome
The look of my user guides in PDF format look very informative and professional. Something I was
hoping to achieve. Now if the system was to be used there would be no confusion on using it as I
covered everything about how a customer or an employee would use the system.
My video tutorials took practise to demonstrate using the system effectively. This meant avoiding
making mistakes when recording the footage. After a few attempts I learned how I could demonstrate
my system in action clearly and concisely. I could have improved it by adding voice narration or
background music.
29. Page 29 of 33
SECTION 10 – LEGAL CONSIDERATIONS
I declare that based on the Data Protection Act (1998) there is no use of authentic personal data
entered by users. If this personal data is entered it would be removed anyway and not disclosed to any
3rd
party whilst being appropriately protected.
I declare that based on the Computer Misuse Act (1990) throughout this project I have not
accessed/modified unauthorised computer material. I have not accessed a computer/device with intent
to commit or facilitate the commission of a serious crime.
(http://www.lancs.ac.uk/iss/governance/rules/cmisuse.htm)
Software used was free under the MIT license:
“Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
associated documentation files (the "Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software,and to permit persons to whom the Software is furnished to do so, subject to
the following conditions:”
And the GPU (General Public) License (MySQL)
30. Page 30 of 33
SECTION 11 – ETHICAL CONSIDERATIONS
This project required the use of 6 participants. They were all happy to help with the research and there
were no ethical considerations involved with the test.
31. Page 31 of 33
SECTION 12 – CONCLUSION
5.1 – Overview
My overall aim in the project was to deliver a fully functional web based online banking system that
could supply a fast and efficient service, to allow customers and staff to manage their accounts in a
functional, effective and secure manner. Something I have demonstrated with my final
implementation. Customers can register an account and they can handle their accounts securely with
the use of authorisation, effectively with validation in every location. Functionally because it
processes inputs and delivers outputs in the form of reports and data storage. It is effective because it
is very dynamic in features. It has a modern professional appeal and based on my testing it is fully
functional with good feedback from questionnaire participants of the system.
5.2 – Achievement
I aimed to use good coding practise throughout. Commenting code all the way through the
process so I always knew what I was coding; using good research to find the best solutions to
problems in the specifications.
My project management skills were put to the test with the allocation of deadlines and targets
to meet throughout the software development lifecycle. Making a comparison with the
expected deadlines and the actual deadlines I could learn how I could improve in any future
projects by making more realistic projections.
Using a constructive framework to make my system more functional and robust.
Go further than making a simple 3 tiered architecture system and making use of the advanced
model view controller design pattern. I now have experience in this area if I could make use
of it again if need be.
I have demonstrated good testing ability, picking up inconsistencies in the system and
correcting them accordingly.
Setting up a survey on how people interact with the system allowed me to understand where I
can improve.
I have successfully designed a database that has been put into a physical system and works to
a good standard as it is fully integrated and effectively used.
I have learned the uses of data flow modelling and how it can ease the development process.
I have improved my knowledge of creating web systems; this can prove to be very useful to
my future career and overall expertise in this subject area.
I have gained a more realistic understanding of how analysis, design and implementation can
be approached.
Learned how to document a system user guide enough for users to be able to make use of it.
Improve my overall knowledge of the financial sector and how it operates.
Learned how to validate forms more effectively
Learned how to give access privileges to certain users.
Created a fully functional system that can showcase my ability to employers.
Learn how to set up an account sub-system.
Create an aesthetically pleasing web designed site.
Creating a system at a larger scale, something never achieved before.
Making good use of my acquired knowledge at the University.
32. Page 32 of 33
5.2.1 – Strengths
My system has much strength associated with it:
Allows users to create bank accounts
Validates all stored data
Allows registered users to log in
Allows users to log out
Allows the user to view the balance of their accounts
Allows users to transfer sum of money to other accounts
View statements in a PDF format
Prevents Cross Site Request forgery and SQL injection
Makes use of JavaScript for an immersive dynamic experience.
Provides an easy to navigate user interface
Uses CSS styling
Created to a professional standard
Good response times
Compatible with most screen resolutions
Makes use of the advanced design pattern MVC
At the time of writing the software used the most recent versions.
5.2.2 - Weaknesses
It does not use of Geo-location to track the user’s location
There is no time limit expiration feature.
It could be worked on more to give the user even more features.
The ATM side of the system was dropped. (Could not be coded in a practical way)
The use of the search bar on the customer system is redundant. (Nothing to search for that
isn’t navigable)
Money can only be sent to other internal accounts and not externalaccounts.
The database although designed adequately is not built for larger scale data. I.e. when the
customer registration grows the database is not built to handle the workload.
Although the code has been written effectively there could have been some tweaks to improve
efficiency.
I did not normalise the tables so they could possibly contain anomalies.
5.3 – Summary
Overall I am very happy with the turnout. The system from now could be improved on by doing
another lifecycle to improve on the already existing system. Or it could be simply used for
demonstration purposes. This system will go on my portfolio of accomplishments and will be of keen
interest to potential employers.
33. Page 33 of 33
SECTION 13 – BIBLIOGRAPHY
Print
Dawson,CWD, 2009. Projects in Computing and Information Systems. 2nd ed. England: Addison
Wesley
Rees,DW, 2012. Code Happy. 1st ed. Worldwide: Self Published.
Hernandez, MJH, 2003. Database Design for Mere Mortals. 2nd ed. US: Addison-Wesley.
Dennis, Wixom, Roth, DWR, 2012. Systems Analysis & Design. 5th ed. US: RRD/Von Hoffmann.
McCool, SM, 2012. LaravelStarter. 1st ed. Birmingham: PACKT Publishing.
Weaver,PW,2002. PracticalBusiness Systems Development Using SSADM: A Complete Tutorial
Guide. 3rd ed. Worldwide: Prentice Hall.
Ricardo, CR, 2012. Databases Illuminated. 2nd ed. Worldwide: Jones & Bartlett.
Ullman, LU, 2012. PHP and MySQL for Dynamic Websites. 4th ed. US: Peachpit Press.
Ullman, LU, 2013. PHP and Object Oriented Programming. 3rd ed. US: Peachpit Press.
Electronic
Cory Janssen. 2011. What is structured analysis?. [ONLINE] Available
at:http://www.techopedia.com/definition/24637/structured-analysis. [Accessed 22 February 13]
Unknown. 2013. LaravelArchitecture. [ONLINE] Available at:http://laravelbook.com/laravel-
architecture/. [Accessed 27 February 13].
W3C. 2012. Web terms glossary. [ONLINE] Available at:
http://www.w3schools.com/web/web_glossary.asp. [Accessed 19 March 13].
NN Group Nielsons Heuristic Principles. 2010. Nielson's Heurisitics 10 Principles. [ONLINE]
Available at: http://www.nngroup.com/articles/ten-usability-heuristics/. [Accessed 17 March 13]
LaravelForums. 2013. Laravel Forums. [ONLINE] Available at: http://forums.laravel.io/. [Accessed
13 March 13].
Stack Overflow. 2013. Stack Overflow Forum. [ONLINE] Available at: http://stackoverflow.com/.
[Accessed 12 March 13].
