Web Programming - Individual Assignment

Asia Pacific Institute Of Information Technology,
Sri Lanka
WEB PROGRAMMING
(CE00425-2)
INDIVIDUAL ASSIGNMENT
Lecturer: Mr. T.Saravanan
Date Submitted: 07th July 2010
Submitted by:
Prasanga Wadanamby (CB003340)
Web Programming
Acknowledgment
I would like to thank Mr.T.Saravanan for his continuous guidance and support in carrying out
this project. Without his valuable supervision, all my efforts would have been short sighted.
His continuous help encouraged me to involve in the project in a wider scope and aspect.
I would also thank my family members and my batch colleagues who rendered me their
immense support throughout this project.
Asia Pacific Institute of Information TechnologyPage 2
Web Programming
Table of content
Acknowledgment........................................................................................................ 2
Table of content.......................................................................................................... 3
List of figures............................................................................................................. 5
List of tables.............................................................................................................. 6
1.0 Introduction.......................................................................................................... 6
1.1 Problem Specification.......................................................................................... 8
1.2 Assumptions...................................................................................................... 8
1.3 Requirement Specification..................................................................................... 8
2.0 Entity Relationship Models - ERM.............................................................................. 9
3.0 Story Boards....................................................................................................... 10
3.1 Bank Home Page.............................................................................................. 10
3.2 Internet Banking Page........................................................................................ 12
3.3 New User Registration Page................................................................................. 13
3.4 Customer Login Page......................................................................................... 14
3.5 Internet Banking Functions Page...........................................................................15
3.6 View Account Details Page.................................................................................. 16
3.7 Make Payments Page......................................................................................... 17
3.8 View Transaction Details Page.............................................................................. 18
3.9 Fund Transfer Page............................................................................................ 19
3.10 Message Page................................................................................................. 20
3.11 Admin Login Page........................................................................................... 21
3.12 View Accounts Page......................................................................................... 22
3.13 Direct Debit Payments Page............................................................................... 23
3.14 Customize Design Page..................................................................................... 24
3.15 Messages Page................................................................................................ 25
4.0 Screen Mock-ups.................................................................................................. 26
4.1 Bank Home..................................................................................................... 26
4.2 Customer Home................................................................................................ 27
4.3 View Account Details......................................................................................... 28
4.4 Make Payments................................................................................................ 29
4.5 View Transactions............................................................................................. 30
Web Programming
4.6 Fund Transfer................................................................................................... 31
4.7 View Bank Messages......................................................................................... 32
4.8 Admin Login.................................................................................................... 33
4.9 View Accounts................................................................................................. 34
4.10 Direct Debit Execution...................................................................................... 35
4.11 Send Messages................................................................................................ 36
5.0
Navigation Design........................................................................................... 37
6.0 Test Plan............................................................................................................ 38

7.0 Critical Analysis................................................................................................... 48
Web Programming
List of figures
Figure 1- Entity relationship model...........................................................................................9
Figure 2 - Bank Home page.....................................................................................................10
Figure 3 - Internet banking page..............................................................................................12
Figure 4 - New user registration page......................................................................................13
Figure 5 - customer login page.................................................................................................14
Figure 6 - Internet banking functions page..............................................................................15
Figure 7 - View account details page.......................................................................................16
Figure 8 - Make payments page...............................................................................................17
Figure 9 - View transaction details page..................................................................................18
Figure 10 - Fund transfer page.................................................................................................19
Figure 11 - Message page.........................................................................................................20
Figure 12 - Admin login page..................................................................................................21
Figure 13 - View accounts page...............................................................................................22
Figure 14 - Direct debit payments page...................................................................................23
Figure 15 - Customize design page..........................................................................................24
Figure 16 - Message page........................................................................................................25
Figure 17 - Bank home.............................................................................................................26
Figure 18 - Customer page.......................................................................................................27
Figure 19 - View account details..............................................................................................28
Figure 20 - Make payments......................................................................................................29
Figure 21 - View transactions...................................................................................................30
Figure 22 - Fund transfer..........................................................................................................31
Figure 23 - View bank messages..............................................................................................32
Figure 24 - Admin login...........................................................................................................33
Figure 25 - View accounts........................................................................................................34
Figure 26 - Direct debit execution...........................................................................................35
Figure 27 - Send messages.......................................................................................................36
Figure 28 - Navigation design..................................................................................................37
Web Programming
Web Programming
List of tables
Table 1 - Bank home page........................................................................................................38
Table 2 - Internet banking page................................................................................................38
Table 3 - Customer registration page.......................................................................................39
Table 4 - Customer login page.................................................................................................39
Table 5 - customer home page..................................................................................................40
Table 6 - Account details page.................................................................................................40
Table 7 - Make payments page.................................................................................................41
Table 8 - Account details page.................................................................................................41
Table 9 - Fund transfer page.....................................................................................................42
Table 10 - View message page.................................................................................................42
Table 11 - Admin login.............................................................................................................43
Table 12 - Admin-view accounts..............................................................................................43
Table 13 - Admin - Direct Debit execution..............................................................................44
Table 14 - Admin - Send Messages..........................................................................................44
Table 15 - Common Links in every page.................................................................................45
Table 16 - Common sub links in the registered users Pages...................................................46
Table 17 - Common sub links in the registered customers Pages...........................................47
Web Programming
1.0 Introduction
Internet is a remarkable invention by the modern world which is now a compulsory recourse
for everyone in todays world. Different needs of the people and their different ideas cause
the rapid development of the internet and its facilities. Now, banking is also became a facility
which is available in internet.
The main inspiration of this Project is two develop a banking web application which enables
the user to do their common banking activates and for the bank, play their admin role. We
have requested by the Providence Bank Management to develop a web applications which
content basic transaction facilities, user reviews and report services.
By using the experience and the talent we have, came up with a simple but effective solution
which meets our customer requirements. This is a application which shows a real time
banking system using by most of the banks in each and every country. This facilitates our
client to improve the banking facilities, reduce their workload and to improve their
productivity.
Web Programming
1.1 Problem Specification

The banking system includes two user levels and their tasks are different from each other.
Identifying those levels and tasks and by carefully understanding the situation, we are
requested to come up with a simple solution where these users can log with the bank online
and do their work through a web based application by our customer.
1.2 Assumptions
These are the assumptions which are going to be critical in this application.
1. Administrator cannot log in to the site from the place that is given to the customer to
login.
2. Admin is not allowed to involve in customers tasks.
3. Customer cannot log in to the site from the place that is given to the admin to login.
4. Admin only can update customer login details in the customer details section.
1.3 Requirement Specification

After analyzing the given scenario I identified the key areas that are essential to the success
of this system. Those areas can be listed as below.
Login
Registration
Activation
Transactions
View Statements
Search and update
These areas are the main functions of this application we have developed.
Web Programming
2.0 Entity Relationship Models - ERM
Figure 1- Entity relationship model
Web Programming
3.0 Story Boards

3.1 Bank Home Page
Figure 2 - Bank Home page
1. Main Form
This form contains the main design with colors in the layout to attract the user.
2. Container Form
This contains Bank Logo, basic banners and Link bars which connects to other pages.
3. Links
Links on the images contains connections to Personal Banking Page and Online
Banking Page.
4. Logo
This is the image which contains the Logo of the bank.
5. Login form
Web Programming
Users can login to their account pages using Login form. This will check the user
name, password and user type and then it leads into their own account pages.
Otherwise it wont lead into any form.
3.2 Internet Banking Page
Figure 3 - Internet banking page
Web Programming
1. Main Form
2. Container Form
3. Links
Links on the page contains connections to Customer Register Page and a basic Login
Page.
4. Logo
3.3 New User Registration Page
Figure 4 - New user registration page
Web Programming
1. Main Form
2. Container Form
3. Logo
4. Registration Form
Contains text fields and buttons which allows the customer to insert account holders
details.
3.4 Customer Login Page
Figure 5 - customer login page
Web Programming
1. Main Form
2. Container Form
3. Logo
This contains a field which allows the customer to login to the site.
Web Programming
3.5 Internet Banking Functions Page
Figure 6 - Internet banking functions page
1. Main Form
2. Container Form
This contains Bank Logo and Link bars which connects to other pages.
3. Links
Links on the page contains connections to View Accounts Page, Payments Page,
Transaction details Page, Fund Transfer Page, Message Page and to User Profile Page.
4. Logo
Web Programming
Figure 7 - View account details page
3.6 View Account Details Page

1. Main Form
2. Container Form
3. Links
Links on the page contains connections to Payments Page, Transaction details Page,
Fund Transfer Page, Message Page and to User Profile Page.
4. Logo
5. View Accounts form
This contains a dataset which shows remaining balance of the account, account status
and the other basic details.
3.7 Make Payments Page
Figure 8 - Make payments page
Web Programming
1. Main Form
2. Container Form
3. Links
Links on the page contains connections to View Accounts Page, Transaction details
Page, Fund Transfer Page, Message Page and to User Profile Page.
4. Logo
This contains two sub forms for bill or credit card details and to make payments.
3.8 View Transaction Details Page
Web Programming
Figure 9 - View transaction details page
1. Main Form
2. Container Form
3. Links
Links on the page contains connections to View Accounts Page, Payments Page, Fund
Transfer Page, and Message Page and to User Profile Page.
4. Logo
This contains a dataset which shows past transactions done by the customer within
last 30 days.
3.9 Fund Transfer Page
Figure 10 - Fund transfer page
Web Programming
1. Main Form
2. Container Form
3. Links
Transaction details Page, Message Page and to User Profile Page.
4. Logo
This contains text fields and buttons to do fund transfers within two accounts directly.
3.10 Message Page
Web Programming
Figure 11 - Message page
1. Main Form
2. Container Form
3. Links
Transaction details Page, Fund Transfer Page and to User Profile Page.
4. Logo
Contains a dataset which shows the messages received from bank administration.
3.11 Admin Login Page
Figure 12 - Admin login page
Web Programming
1. Main Form
2. Container Form
3. Logo
This contains a field which allows the admin to login to the site.
Web Programming
Figure 13 - View accounts page
3.12 View Accounts Page

1. Main Form
2. Container Form
3. Links
Links on the page contains connections to Direct Debit Payments Page, Customize
Design Page and Messages Page.
4. Logo
Contains dataset which shows the details of a searched account and a form which
facilitates the admin to search a account using account number.
Web Programming
Figure 14 - Direct debit payments page
3.13 Direct Debit Payments Page

1. Main Form
2. Container Form
3. Links
Links on the page contains connections to View Accounts Page, Customize Design
Page and Messages Page.
4. Logo
5. Direct Debit Payments form
This contains dataset which shows the details of a recent direct debit payments and a
form which facilitates the admin to execute those payments.
Web Programming
3.14 Customize Design Page

Figure 15 - Customize design page
1. Main Form
2. Container Form
3. Links
Links on the page contains connections to View Accounts Page, Direct Debit
Payments Page, Customize Design Page and Messages Page.
4. Logo
5. Customize Design form
This contains a form which enables the admin to change the basic appearances of the
web site.
Web Programming
3.15 Messages Page

Figure 16 - Message page
1. Main Form
2. Container Form
3. Links
Links on the page contains connections to View Accounts Page, Direct Debit
Payments Page and Customize Design Page.
4. Logo
5. Messages form
This contains a form which enables the admin to send individual or group messages to
the customers.
4.0 Screen Mock-ups

4.1 Bank Home
Figure 17 - Bank home
Web Programming
1. Bank home allow customers to login into site using login section.
2. Common Links allow all users to search for other details.
3. Admin link redirect the users to the admin login page where an admin can log into the
site.
4.2 Customer Home
1. Links which contains here, redirect customers to the location he/she wants.
Figure 18 - Customer page
Web Programming
2. Logout will logout the customer from the website.
Web Programming
4.3 View Account Details
Figure 19 - View account details
1. Facilitates the customer to check his/her account details.

Web Programming
4.4 Make Payments
Figure 20 - Make payments
1. Allows users to make bill or credit card payments.

4.5 View Transactions
1. Allows customer to view bill or credit card payments history details and fund transfer
history and authentication details.
Figure 21 - View transactions
Web Programming
Web Programming
4.6 Fund Transfer
Figure 22 - Fund transfer
1. This page facilitates customer to do fund transfer requests to the bank.

Web Programming
4.7 View Bank Messages
Figure 23 - View bank messages
1. Customers can bank messages using this page.
Web Programming
4.8 Admin Login
Figure 24 - Admin login
1. Admin login allows admin to login into site using this login section.
Web Programming
4.9 View Accounts
Figure 25 - View accounts
1. View accounts page facilitates the admin to view request for register the accounts in the
system.
2. If the details of the request are correct, the admin can activate the customer account and
assign a password.
Web Programming
4.10 Direct Debit Execution
Figure 26 - Direct debit execution
1. Fund Transfer page facilitates the admin to view fund transfer request by the customers.
2. If the details of the request are correct and the account balance is enough, the admin can
execute the fund transfer request.
3. Admin can check the account details of a customer by searching.
Web Programming
4.11 Send Messages
Figure 27 - Send messages
1. Message page facilitates the admin to send messages to the customers.
Web Programming
5.1 Navigation Design

Contains how the navigation has been done within the website.
Figure 28 - Navigation design
Web Programming
6.0 Test Plan

Bank Home Page
1
Test
Login Button Click
Expected Result
Actual Result
If User name and
Messages show
Password is correct,
Login Successful
Message shows
and User name or
Login Successful.
Password Incorrect.
Status
Else User name or

Password Incorrect.
If fields are empty,
message shows Fill
message shows Fill
all Fields
all Fields
Refresh all fields
Cancel Button Click
Refresh all fields
Table 1 - Bank home page
Internet Banking Page
8
9
Test
Click on New User
Click on Registered User
Expected Result
Should redirect to
Actual Result
Redirect to
Registration.php
Registration.php
Should redirect to
Redirect to
Customer Login.php
Customer
Login.php
Table 2 - Internet banking page
Customer Registration Page

Status
Web Programming
Test
Submit button click
Expected Result
If all fields are filled
Actual Result
Message show
message show Data
Data sent
Status
sent successfully. We successfully. We

will Inform You.
will Inform You.
And should redirect
And redirect to
to Bank Home.php.
Bank Home.php.
Else message shows

Fill all Fields.
Message show Fill

all Fields.
Cancel button click
Should redirect to
Redirect to Bank
Bank Home.php
Home.php
Table 3 - Customer registration page
Customer Login Page

8
Test
Login Button Click
Expected Result
Actual Result
If User name and
Messages show
Login Successful
Message shows
and User name or
Login Successful.
Password Incorrect.
And should redirect
Redirect to
to Customer
Customer
Home.php. Else
Home.php.
Status
User name or
Password Incorrect.
message shows Fill
message shows Fill
all Fields
all Fields
Cancel Button Click
Should redirect to
Redirect to Bank
Bank Home.php
Home.php
Table 4 - Customer login page
Customer Home Page

1
Test
Click on Account Details
Expected Result
Should redirect to
Actual Result
Redirect to Account
Status
Web Programming
Click on Payments
Account Details.php
Should redirect to
Details.php
Redirect to
Click on Transaction
Payments.php
Should redirect to
Payments.php
Redirect to
Details
Transaction
Transaction
Click on Fund Transfer
Details.php
Should redirect to
Details.php
Redirect Fund
Click on Messages
Fund Transfer.php
Should redirect to
Transfer.php
Redirect to
Click on User Profile
Messages.php
Should redirect to
Messages.php
Redirect to User
User Profile.php
Profile.php
2
3
Table 5 - customer home page
Account Details Page
Test
View Now button click
Expected Result
Should load the
Actual Result
Load the basic
basic account
account details.
Status
details.
Table 6 - Account details page
Make Payments Page

Test
Expected Result
Actual Result
Status
Web Programming
1
Pay Now button click
Message show
message show
Payments
Payments
successful. And
successful. And
redirect to
should redirect to
Customer
Customer
Home.php.
Home.php.
Cancel button click
Else message shows
Message show Fill
Fill all Fields.
all Fields.
Should redirect to
Redirect to
Customer Home.php
Customer
Home.php
Table 7 - Make payments page
Account Details Page
Test
Expected Result
Should load the
Actual Result
Load the
transaction details of
transaction details
last 30 days.
of last 30 days.
Table 8 - Account details page
Status
Web Programming
Fund Transfer Page
Test
Pay Now button click
Expected Result
Actual Result
Message show
message show
Transaction
Transaction
successful. And
successful. And
redirect to
should redirect to
Customer
Customer
Home.php.
Status
Home.php.
Cancel button click
Else message shows
Message show Fill
Fill all Fields.
all Fields.
Should redirect to
Redirect to
Customer Home.php
Customer
Home.php
Table 9 - Fund transfer page
View messages Page
Test
Expected Result
Should load the
Actual Result
Load the messages
messages from the
from the admin.
admin.
Table 10 - View message page
Admin Login
Status
Web Programming
Test
Login Button Click
Expected Result
Actual Result
If User name and
Messages show
Login Successful
Message shows
and User name or
Login Successful.
Password Incorrect.
And should redirect
Redirect to Admin
Status
to Admin Home.php. Home.php.

Else User name or
Password Incorrect.
message shows Fill
message shows Fill
all Fields
all Fields
Cancel Button Click
Should redirect to
Redirect to Bank
Bank Home.php
Home.php
Table 11 - Admin login
Admin - View Accounts

1
Test
Update button click
Expected Result
Should load the
Actual Result
Load the
registration request
that users sent.

Should validate all
that users sent.

Validate all text
text fields and
fields and update
update the database
the database table.
table.
Table 12 - Admin-view accounts
Status
Web Programming
Admin - Direct Debit execution
Test
Update button click
Search button click
Expected Result
Should load the
Actual Result
Load the
that users sent.

Should validate all
that users sent.

Validate all text
text fields and
fields and update
update the tables.

Should retrieve
the tables.
Retrieve account
account balance
balance from the
from the database.
database.
Status
Table 13 - Admin - Direct Debit execution
Admin - Send Messages

Test
Send button click
Expected Result
Should validate all
Actual Result
Validate all text
text fields and
fields and update
update the database
the database table.
table.
Table 14 - Admin - Send Messages
Common Links in every page
Status
Web Programming
Expected Result
Should redirect to
Actual Result
Redirect to
Personal
Personal
Click on Internet Banking
Banking.php
Should redirect to
Banking.php
Redirect to Internet
Click on Support
Internet Banking.php Banking.php

Should redirect to
Redirect to
Click on About Us
Support.php
Should redirect to
Support.php
Redirect to About
Click on Admin Login
About Us.php
Should redirect to
Us.php
Redirect to Admin
Click on Privacy
Admin Login.php
Should redirect to
Login.php
Redirect to
Click on Security
Privacy.php
Should redirect to
Privacy.php
Redirect to Security
Click on Contact Us
Security Info.php
Should redirect to
Info.php
Redirect to Contact
Contact Us.php
Us.php
Test
Click on Personal Banking
Status
Table 15 - Common Links in every page
Common sub links in the registered users Pages
1
2
Test
Click on Account Details
Expected Result
Should redirect to
Actual Result
Redirect to Account
Click on Payments
Account Details.php
Should redirect to
Details.php
Redirect to
Status
Web Programming
Click on Transaction
Payments.php
Should redirect to
Payments.php
Redirect to
Details
Transaction
Transaction
Click on Fund Transfer
Details.php
Should redirect to
Details.php
Redirect Fund
Click on Messages
Fund Transfer.php
Should redirect to
Transfer.php
Redirect to
Click on User Profile
Messages.php
Should redirect to
Messages.php
Redirect to User
Click on Logout
User Profile.php
Should redirect to
Profile.php
Redirect to Bank
Bank Home.php
Home.php
Table 16 - Common sub links in the registered users Pages
Common sub links in the registered customers Pages
Test
Expected Result
Click on View Accounts Should redirect to
Click on Direct Debit
Click on Customize
Actual Result
Redirect to
AdminAccount.php
Should redirect to
AdminAccount.php
Redirect to
AdminDirectDebit.ph
AdminDirectDebit.ph
p
Should redirect to
p
Redirect to
AdminCustomise.php
AdminCustomise.php
Status
Web Programming
4
Click on Messages
Should redirect to
Redirect
AdminMessage.php
AdminMessage.php
Table 17 - Common sub links in the registered customers Pages
From the beginning of the development the website, I have conducted a testing process
throughout the whole time duration of development process.
Unit testing was the method that I have used to test online banking web application. I have
first designed the site layouts and other appearances with adding java scripts to the forms.
And that java scripts were tested after the development of each main forms and sub forms.
Errors were fixed at the same time they occurred.
Finally the whole website was tested in two sections. First was the navigational test that I
have conducted to check whether the links for each page works. Then the critical test for
forms with adding data into database is the critical and the final test I have conducted.
7.0 Critical Analysis

Test plan is the first step for the finalization of development process of the web application. It
is critical to have a perfect test plan for the testing stage for any type of application. And it
causes an errorless final application as an output.
In the development process of my web application, I have used three testing methods. First
testing was done at the designing level of the web application. It was a simple test plan which
only checked the validations of the forms and the positioning of the layouts. It was really
Web Programming
important to check whether the java scripts that I have coded are working or not before doing
hard coding in PHP language.
After coding each form I have conducted another unit testing process to check whether the
forms are working and data are perfectly transfers between database and forms. It helped me
to work with codes without any error for similar functions.
Finally the navigational and the form testing that I have done were the critical two testing
methods that helped me to identify the issues of the web site before implementing.
This whole testing plan was the significant process in this project of developing an online
banking web application.

Web Programming - Individual Assignment

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Programming - Individual Assignment

Uploaded by

Copyright:

Available Formats

Asia Pacific Institute Of Information Technology,

Lecturer: Mr. T.Saravanan

Date Submitted: 07th July 2010

Asia Pacific Institute of Information TechnologyPage 2

Asia Pacific Institute of Information TechnologyPage 3

6.0 Test Plan............................................................................................................ 38

Asia Pacific Institute of Information TechnologyPage 4

Asia Pacific Institute of Information TechnologyPage 5

Asia Pacific Institute of Information TechnologyPage 6

Asia Pacific Institute of Information TechnologyPage 7

Asia Pacific Institute of Information TechnologyPage 8

1.1 Problem Specification

1.3 Requirement Specification

Asia Pacific Institute of Information TechnologyPage 9

2.0 Entity Relationship Models - ERM

Figure 1- Entity relationship model

Asia Pacific Institute of Information TechnologyPage 10

3.0 Story Boards

Figure 2 - Bank Home page

Asia Pacific Institute of Information TechnologyPage 11

3.2 Internet Banking Page

Asia Pacific Institute of Information TechnologyPage 12

Figure 3 - Internet banking page

Asia Pacific Institute of Information TechnologyPage 13

Figure 4 - New user registration page

Asia Pacific Institute of Information TechnologyPage 14

Figure 5 - customer login page

Asia Pacific Institute of Information TechnologyPage 15

3.5 Internet Banking Functions Page

Figure 6 - Internet banking functions page

Asia Pacific Institute of Information TechnologyPage 16

Figure 7 - View account details page

3.6 View Account Details Page

3.7 Make Payments Page

Asia Pacific Institute of Information TechnologyPage 17

Figure 8 - Make payments page

3.8 View Transaction Details Page

Asia Pacific Institute of Information TechnologyPage 18

3.9 Fund Transfer Page

Asia Pacific Institute of Information TechnologyPage 19

Figure 10 - Fund transfer page

3.10 Message Page

Asia Pacific Institute of Information TechnologyPage 20

Figure 11 - Message page

3.11 Admin Login Page

Asia Pacific Institute of Information TechnologyPage 21

Figure 12 - Admin login page

Asia Pacific Institute of Information TechnologyPage 22

Figure 13 - View accounts page

3.12 View Accounts Page

Asia Pacific Institute of Information TechnologyPage 23

Figure 14 - Direct debit payments page

3.13 Direct Debit Payments Page

Asia Pacific Institute of Information TechnologyPage 24

3.14 Customize Design Page

Asia Pacific Institute of Information TechnologyPage 25

3.15 Messages Page

4.0 Screen Mock-ups

Asia Pacific Institute of Information TechnologyPage 26

Figure 17 - Bank home

4.2 Customer Home

Figure 18 - Customer page

2. Logout will logout the customer from the website.

Asia Pacific Institute of Information TechnologyPage 28