Website Design and Development for XYZ Bank

This article discusses the website design and development process for XYZ Bank, including the use of Principe to secure the website design, object-oriented PHP code, and preventing injection attacks. It includes code snippets for the index, login, and registration pages. This content is relevant for students studying web development, computer science, and information technology. Access more study material on Desklib.

Running head: WEBSITE DESIGN AND DEVELOPMENT
Website Design and Development
Name of the Student
Name of the University
Author’s note

1WEBSITE DESIGN AND DEVELOPMENT
Table of Contents
1. Design:.........................................................................................................................................2
1.a Prototype:...............................................................................................................................2
1.b Using Principe to Secure Website Design for XYZ Bank:....................................................4
2. Development:...............................................................................................................................6
2.a Developed Website:...............................................................................................................6
2.b Secure Development Standards and Methodologies:..........................................................15
3. Security:.....................................................................................................................................16
3.a Data Flow Analysis:.............................................................................................................16
3.b Potential Security Issues:.....................................................................................................18
4. Formal Methods:........................................................................................................................23
4.a Finite State Machine:...........................................................................................................23
4.b Petri Net Model:..................................................................................................................24
Bibliography:.................................................................................................................................25

2WEBSITE DESIGN AND DEVELOPMENT
1. Design:
1.a Prototype:
Figure 1: Home Page of XYZ Bank
(Source: Created by author)

3WEBSITE DESIGN AND DEVELOPMENT
Figure 2: Balance Checking
(Source: Created by Author)

4WEBSITE DESIGN AND DEVELOPMENT
Figure 3: Login Page of XYZ Bank
(Source: Created by Author)
1.b Using Principe to Secure Website Design for XYZ Bank:
Authentication: The authentication is the process of verifying the user access to the
system. The user registers into the system by providing the required values like name, email,
contact number, password and few more. User have to confirm the provided password in order to
be registered. If the password does not match then an error message will appear on the
registration form. The user will use the email id and password for logging into the system. The
PHP code has been used for connecting the GUI of the website with the database. The PHP code

5WEBSITE DESIGN AND DEVELOPMENT
checks the use inputted value against the entireties in the database. If the email and password
match with existing record, the system will login the user. It is to be noted that the email id and
password have to be in the same row.
Authorization: Authorization is similar to authentication in basic functionality but has
huge difference while executing. The authorization is the protocol for checking the user access to
the requested data and functions. The system will apply the authorization at the time of login.
Based on the email, the system will determine the user access. Authorization and authentication
are the part of user management concept of information and communication technology. If the
user will try to access the unauthorized data or page, the system will show an error message. The
authorization will be implemented in two levels. With the advancement of the system, the
authorization level will be increased. Authorization and authentication are the basic factors in
implementing security in the web-based system.
Preventing Access to Page: The system will check if the user has logged into the system
or not. The PHP uses the session to check the login. When the user logs in successfully, the
system starts a session and it will be active until the user logs out of the system. Taken as an
example, the user has not logged in to the system and tries to access the balance.php page, the
system will show the “Please login first” message on the screen. There is no way, the user can
see the account details until logged in. On the other hand, the user cannot access the login or
registration page after login is successful. The system will check if the session is active or not. If
the session is active, the PHP code written in the page will prevent the user to access login or
registration page.
Using Object Oriented PHP Code: The PHP code used within the pages are object
oriented and as per W3 school standard. The codes are secure more than procedural coding. The

6WEBSITE DESIGN AND DEVELOPMENT
system will check and verify the entered input data. After successful verification, the system will
store the data into system.
2. Development:
2.a Developed Website:
Figure 2: Home Page of XYZ Bank
(Source: Created by Author)
Index.php Code:
<?php
require('connection.php');
session_start();
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">

7WEBSITE DESIGN AND DEVELOPMENT
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<title>Untitled Document</title>
</head>
<body>
<div class="top">
<a id="time"></a>
<?php
if(isset($_SESSION['user'])){
?>
<a href="logoutpage.php">Logout(<?php echo $_SESSION['user']; ?>)</a>
<?php
} else { ?>
<a href="loginpage.php">Login</a>
<a href="registrationpage.php">Register</a>
<?php
}
?>
</div>
<div class="header">
<name><a href="index.php">XYZ Bank</a></name>
<div class="menu">
<a href="balance.php">Check Balance</a>
<a href="transfer.php">Transfer Money</a>
<a href="payCredit.php">Pay Credit</a>
</div>
</div>
<div class="content">
<h2>How may we</h2>
<h1>Help you today?</h1>

8WEBSITE DESIGN AND DEVELOPMENT
<a href="">Open an Account</a>
<a href="">Apply for Loan</a></br>
<a href="">Make investment</a>
<a href="">Get a credit Card</a></br>
<a href="">Customizable Savings Account</a>
<a href="">Knowledge Reports</a></br>
<a href="">Investor Relations</a>
</div>
<div class="footer">
<div class="option">
<a href="">How to</a>
<a href="">Official App</a>
<a href="">About Us</a>
<a href="">Contact Us</a>
</div></br>
<a>&copy;XYZ Bank</a>
</div>
<script type="text/javascript">
var d = new Date().toLocaleString();;
document.getElementById("time").innerHTML = d;
</script>
</body>
</html>

9WEBSITE DESIGN AND DEVELOPMENT
Figure 5: Login Page of XYZ Bank
(Source: Created by Author)
Login.php Code:
<?php
require('connection.php');
session_start();
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<title>Untitled Document</title>
</head>
<body>
<div class="top">

10WEBSITE DESIGN AND DEVELOPMENT
<a id="time"></a>
<?php
if(isset($_SESSION['user'])){
?>
<a href="logoutpage.php">Logout(<?php echo $_SESSION['user']; ?>)</a>
<?php
} else { ?>
<a href="loginpage.php">Login</a>
<a href="registrationpage.php">Register</a>
<?php
}
?>
</div>
<div class="header">
<name><a href="index.php">XYZ Bank</a></name>
<div class="menu">
<a href="balance.php">Check Balance</a>
<a href="transfer.php">Transfer Money</a>
<a href="payCredit.php">Pay Credit</a>
</div>
</div>
<div style="text-align: center;">
<?php if(isset($_SESSION['user'])){
echo "<h1>You are already logged in</h1>";
header('Refresh: 2; index.php');
}
else {
?>
</div>
<div class="login">

11WEBSITE DESIGN AND DEVELOPMENT
<?php
if(isset($_POST['login'])){
$email = $_POST['email'];
$password = $_POST['pass'];
$sql = "Select * From customer Where email = '$email' AND password = '$password'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$_SESSION['user']= $email;
header('Refresh: 1; index.php');
}
else {
echo "<h3 style='color:red;'>!!You have entered a wrong username or password!!
</h3><h3>Please login again!</h3>";
$conn->close();
header('Refresh: 2; loginpage.php');
}
}
?>
<h1>Login Form</h1>
<form action="" method="post" name="loginForm" onSubmit="return
formValidation();">
<input type="text" id="email" name="email" placeholder="Enter your email"><br>
<input type="password" id="pass" name="pass" placeholder="********"><br>
<button type="submit" id="login" name="login" value="login">Login</button>
<button type="reset" name="reset" value="reset">Reset</button>
</form>
</div>
<?php } ?>
<div class="footer">
<div class="option">

12WEBSITE DESIGN AND DEVELOPMENT
<a href="">How to</a>
<a href="">Official App</a>
<a href="">About Us</a>
<a href="">Contact Us</a>
</div></br>
<a>&copy;XYZ Bank</a>
</div>
<script type="text/javascript">
var d = new Date().toLocaleString();;
document.getElementById("time").innerHTML = d;
</script>
</body>
</html>
Figure 6: Registration Page of XYZ Bank
(Source: Created by Author)
Registrationpage.php Code:
<?php
require('connection.php');

13WEBSITE DESIGN AND DEVELOPMENT
session_start();
if(isset($_SESSION['user'])){
echo "You are already logged in";
header('Refresh: 2; index.php');
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<title>Untitled Document</title>
</head>
<body>
<div class="top">
<a id="time"></a>
<?php
if(isset($_SESSION['user'])){
?>
<a href="logoutpage.php">Logout</a>
<?php
} else { ?>
<a href="loginpage.php">Login</a>
<a href="registrationpage.php">Register</a>
<?php
}
?>
</div>
<div class="header">
<name><a href="index.php">XYZ Bank</a></name>
<div class="menu">
<a href="balance.php">Check Balance</a>
<a href="transfer.php">Transfer Money</a>
<a href="payCredit.php">Pay Credit</a>
</div>
</div>
<div style="text-align: center;">
<?php if(isset($_SESSION['user'])){
echo "<h1>Please logout first</h1>";
header('Refresh: 2; index.php');
}
else {
?>
</div>
<div class="register">

14WEBSITE DESIGN AND DEVELOPMENT
<?php
if(isset($_POST['register'])){
$name = $_POST['name'];
$phone = $_POST['phone'];
$address = $_POST['address'];
$email = $_POST['email'];
$password = $_POST['pass'];
$confirmPassword = $_POST['confirmpass'];
$sql = "Insert Into customer Values('$name', '$email', '$password', '$address', '$phone')";
$result = $conn->query($sql);
if($password !== $confirmPassword){
echo "<h3 style='color:red;'>!!The password did not match!!</h3>";
header('Refresh: 2; registrationpage.php');
}
elseif ($result) {
echo "<h3 style='color:green;'>You have successfully registered</h3>";
header('Refresh: 2; loginpage.php');
}
else {
echo "<h3 style='color:red;'>!!Something went wrong!!</h3>";
$conn->close();
header('Refresh: 2; registrationpage.php');
}
}
?>
<h1>Registration Form</h1>
<form action="" method="post">
<input type="text" name="name" placeholder="Enter your name"><br>
<input type="text" name="email" placeholder="Enter your email address"><br>
<input type="text" name="phone" placeholder="Enter your phone number"><br>
<input type="text" name="address" placeholder="Enter your address"><br>
<input type="password" name="pass" placeholder="Password"><br>
<input type="password" name="confirmpass" placeholder="Confirm Password"><br>
<button type="submit" name="register" value="register">Register</button>
<button type="reset" name="reset" value="reset">Reset</button>
</form>
</div>
<?php } ?>
<div class="footer">
<div class="option">
<a href="">How to</a>
<a href="">Official App</a>
<a href="">About Us</a>
<a href="">Contact Us</a>
</div></br>
<a>&copy;XYZ Bank</a>

15WEBSITE DESIGN AND DEVELOPMENT
</div>
<script type="text/javascript">
var d = new Date().toLocaleString();
document.getElementById("time").innerHTML = d;
</script>
</body>
</html>
Discussion: As it can be seen, the website uses the same basic format for every page.
Through this the website will not only achieve the consistency in interface design but increase
the usability. The PHP code has made the website extremely dynamic. The PHP code select the
HTML elements to show based on the user session. If the user is not logged in, the system will
show the login and registration links, if the user is logged in ten only the logout page will be
shown.
2.b Secure Development Standards and Methodologies:
Using UpToDate Technology: The programming languages and other developmental
information technologies are updated for better functionality and security. New updates are done
to prevent the errors and issues in previous version. The communities analyze the latest security
loopholes and innovate new standards that can prevent most of the issues. In order to develop the
website, the latest PHP version has been used along with advanced MySQL concept. The
database has been normalized first to prevent database anomalies. The PHP code will efficiently
interact with the website and database. Because of this reason the website has become dynamic
and secured.
Preventing Injection Attack: The SQL injection attacks is the process of using the
website forms and URLs to manipulate the associated database. The developers have to be sure
that no rough code is present in the website. The PHP code has been used for using

16WEBSITE DESIGN AND DEVELOPMENT
parameterized queries. The code checks all the data first and then executes the SQL code. The
system will show error even if the SQL code does not satisfy the security needs.
Error Messages: The error messages are great way of informing the users about the
issues in current requested process. However, the website must not show too much information.
Showing unwanted data can reveal many things to the hackers.
3. Security:
3.a Data Flow Analysis:
Figure 7: The Context Diagram of XYZ Bank
(Source: Created by Author)

17WEBSITE DESIGN AND DEVELOPMENT
The context diagram clearly shows that the customers and admin of the system will
directly access the system functionalities. The customer will provide the personal data along with
password at the time of registration. The customer provides the account number and amount to
be delivered. The website shows the balance of the user after each successful transaction. The
admin will enter the email id of the user to create an account. The system will create a new
account and assign the account to a user using the email. As email is the primary key, no two
rows will have same email.
Figure 8: DFD Level 0
(Source: Created by Author)

18WEBSITE DESIGN AND DEVELOPMENT
3.b Potential Security Issues:
Broken Session and Authentication Management: The external hackers, insiders and
account holders can create the issue of broken session and authentication management. The
attackers will use the loop holes in the session or authentication methods to turn imitate users.
The available code for the transfer page will allow understand the issue in session
management.
Code:
<?php
error_reporting(0);
require('connection.php');
session_start();
$user=$_SESSION['user'];
$sql="select accountNumber, balance, custName from account Inner Join
customer On account.cust=customer.email Where customer.email='$user'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$customerName = $row["custName"];
$account1 = $row["accountNumber"];
$availableBalance1=$row["balance"];
}
}
?>
<!doctype html>
<html>
<head>

19WEBSITE DESIGN AND DEVELOPMENT
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<title>Untitled Document</title>
</head>
<body>
<div class="top">
<a id="time"></a>
<?php
if(isset($_SESSION['user'])){
?>
<a href="logoutpage.php">Logout(<?php echo $_SESSION['user']; ?
>)</a>
<?php
} else { ?>
<a href="loginpage.php">Login</a>
<a href="registrationpage.php">Register</a>
<?php
}
?>
</div>
<div class="header">
<name><a href="index.php">XYZ Bank</a></name>
<div class="menu">
<a href="balance.php">Check Balance</a>
<a href="transfer.php">Transfer Money</a>
<a href="payCredit.php">Pay Credit</a>
</div>
</div>
<div style="text-align: center;">

20WEBSITE DESIGN AND DEVELOPMENT
<?php
if(!isset($_SESSION['user'])){
echo "<h1>Please login first</h1>";
header('Refresh: 2; loginpage.php');
} else {
?>
</div>
<div class="transfer">
<h1>Transfer money</h1>
<form action="" method="post">
<?php
if(isset($_POST['transfer'])){
$account2 = $_POST['account'];
$amount = $_POST['amount'];
$currDate = date("Y-m-d H:i:s");
$sql6="select balance from account Where
account.accountNumber='$account2'";
$result6 = $conn->query($sql6);
if ($result6->num_rows > 0) {
// output data of each row
while($row = $result6->fetch_assoc()) {
$availableBalance2=$row["balance"];
}
}
$sql3="select * from account where accountNumber = '$account2'";
$result3 = $conn->query($sql3);
if ($result3->num_rows > 0) {
$success=1;
}
if($amount>$availableBalance1){

21WEBSITE DESIGN AND DEVELOPMENT
echo "<h3 style='color:red;'>!!You do not have enough balance!!</h3>";
}
elseif($account1===$account2){
echo "<h3 style='color:red;'>!!You cannot send money to your account!!
</h3>";
}
elseif($success!=1){
echo $success;
echo "<h3 style='color:red;'>!!The account number does not
exists!!</h3>";
}
else {
$sql2 = "Insert Into transaction (senderAccount, receiverAccount, method,
amount, transferDateTime) Values('$account1', '$account2', 'Net Banking', '$amount',
'$currDate')";
$result2 = $conn->query($sql2);
$currentBalance1=$availableBalance1-$amount;
$currentBalance2=$availableBalance2+$amount;
$sql4="Update account Set balance='$currentBalance1' Where
accountNumber = '$account1'";
$result4 = $conn->query($sql4);
$sql5="Update account Set balance='$currentBalance2' Where
accountNumber = '$account2'";
$result5 = $conn->query($sql5);
if ($result2 && $result4 && $result5) {
echo "<h3 style='color:green;'>Transfer Successful</h3>";
header('Refresh: 2; balance.php');
}
else {
echo "<h3 style='color:red;'>!!Something went wrong!!</h3>";
$conn->close();
header('Refresh: 2; transfer.php');

22WEBSITE DESIGN AND DEVELOPMENT
}
}
}
?>
<table>
<th>Account Holder</th>
<th>Account Number</th>
<th>Send to</th>
<th>Amount</th>
<?php
echo "<tr>";
echo "<td>" . $customerName . "</td>";
echo "<td>" . $account1 . "</td>";
?>
<td><input type="text" name="account" placeholder="account number"></td>
<td><input type="text" name="amount" placeholder="amount"></td>
</tr>
</table>
<button type="submit" name="transfer" value="transfer">Transfer</button>
<button type="reset" name="reset" value="reset">Reset</button>
</form>
</div>
<?php } ?>
<div class="footer">
<div class="option">
<a href="">How to</a>
<a href="">Official App</a>
<a href="">About Us</a>
<a href="">Contact Us</a>

23WEBSITE DESIGN AND DEVELOPMENT
</div></br>
<a>&copy;XYZ Bank</a>
</div>
<script type="text/javascript">
var d = new Date().toLocaleString();;
document.getElementById("time").innerHTML = d;
</script>
</body>
</html>
4. Formal Methods:
4.a Finite State Machine:
Figure 9: Final Statement Machine Diagram
(Source: Created by Author)

24WEBSITE DESIGN AND DEVELOPMENT
4.b Petri Net Model:
Figure 10: Petri Net Model
(Source: Created by Author)

25WEBSITE DESIGN AND DEVELOPMENT
Bibliography:
Bonthala, V.S. and Gajula, M.N.V., 2016. PvTFDB: a Phaseolus vulgaris transcription factors
database for expediting functional genomics in legumes. Database, 2016.
Di Febbraro, A., Giglio, D. and Sacco, N., 2016. A deterministic and stochastic Petri net model
for traffic-responsive signaling control in urban areas. IEEE Transactions on Intelligent
Transportation Systems, 17(2), pp.510-524.
Fennema, J. and Makowski, L., 2016. Rumprun versus Docker performance evaluation.
Technical report.
Hartono, E., Holsapple, C.W., Kim, K.Y., Na, K.S. and Simpson, J.T., 2014. Measuring
perceived security in B2C electronic commerce website usage: A respecification and validation.
Decision Support Systems, 62, pp.11-21.
Holland, E.C., 2016. " IB Pedia": Informing Educators of the International Baccalaureate Middle
Years Program Through Collaborative Website Development.
Jacobsen, A., Heijmans, N., Verkaar, F., Smit, M.J., Heringa, J., van Amerongen, R. and
Feenstra, K.A., 2016. Construction and Experimental Validation of a Petri net Model of Wnt/β-
catenin Signaling. PloS one, 11(5), p.e0155743.
Lassila, J., 2016. WordPress Website Development.
League, B., Lizardi, R. and Kahn, R., 2018. Use of Effective Information Design Principles to
Encourage Social Media Activism: Designing a Website for Global Social Issues to Enlist
Change and Avoid Slacktivism (Doctoral dissertation).

26WEBSITE DESIGN AND DEVELOPMENT
Lee, T.S., Ariff, M., Shoki, M., Zakuan, N. and Sulaiman, Z., 2016. Assessing Website Quality
Affecting Online Purchase Intention of Malaysia's Young Consumers. Advanced Science,
Engineering and Medicine, 8(10), pp.836-840.
Mui, E.N., Custom, R. and Engineer, D., 2017. FPGA interfacing of HD44780 based LCD using
delayed finite state machine (FSM). Texco Enterprise Ptd. Ltd.
Neugebauer, T., Carson, P. and Krujelskis, S., 2015. Using SemanticScuttle for managing lists of
recommended resources on a library website. Code [4] lib Journal, (27).
Sengupta, S., Vadlamudi, S.G., Kambhampati, S., Doupé, A., Zhao, Z., Taguinod, M. and Ahn,
G.J., 2017, May. A game theoretic approach to strategy generation for moving target defense in
web applications. In Proceedings of the 16th Conference on Autonomous Agents and
MultiAgent Systems (pp. 178-186). International Foundation for Autonomous Agents and
Multiagent Systems.
Sengupta, S., Vadlamudi, S.G., Kambhampati, S., Taguinod, M., Doupé, A., Zhao, Z. and Ahn,
G.J., 2016. Moving target defense for web applications using bayesian stackelberg games. arXiv
preprint arXiv:1602.07024.
Veikkolainen, T., Pesonen, L.J. and Evans, D.A., 2014. PALEOMAGIA: A PHP/MYSQL
database of the Precambrian paleomagnetic data. Studia Geophysica et Geodaetica, 58(3),
pp.425-441.
Wolpert, L., Tickle, C. and Arias, A.M., 2015. Principles of development. Oxford University
Press, USA.

27WEBSITE DESIGN AND DEVELOPMENT
Yahaya, J.H., Ibrahim, A.A. and Deraman, A., 2017. Software Process Model for Dynamic
Website Development towards Quality Product. Journal of Telecommunication, Electronic and
Computer Engineering (JTEC), 9(3-3), pp.39-44.
Yao, J., Yan, H., Das, S., Klemic, J.F., Ellenbogen, J.C. and Lieber, C.M., 2014. Nanowire
nanocomputer as a finite-state machine. Proceedings of the National Academy of Sciences,
111(7), pp.2431-2435.