Developing Web Information Systems | Sample Project Proposal Report

Introduction

The internet has found various applications along with acceptance on the procession of banking and put the industry of banking on the pace of acceleration on development. The advanced technology has enabled the banks for achieving the performance in high level and handling all the transactions which are also impossible without E-commerce or online banking. In this report, Researcher is going to develop an online Banking platform for the customer. It is mainly an application where customer and transfer money from one account to another bank account and needs a valid user ID and password for login in the system. It also shows the customer the bank account details along with their balance on the passbook after successful login.

Executive Summary

The advancement of technology has facilitated the linkages with all the customers through using information provision and delivering quality service. It is now entering the retail banking payment system. Banking through the Internet allows the customers to have engagement with the relationship on informal transactions which is also used for traveling long distances or a minimum risk for losing balance. With the help of online banking, the user can review his account any time and do the transactions, pay and receive bills, fund transfers, and so on.

Key Deliverables

The researcher needs to make an effective and robust online platform using a web-based online system of banking. It needs to extend the functionality without any comprising in the security system. There is also the service of personal banking which gives complete control in all the demands of online (Tran et al. 2017, p. 315). All the requirements are met properly such as customers can able to perform on the transactions such as withdrawal and deposit from the account. It is also able to transfer the funds to another account along with the facility to deposit the funds by the client. For interacting with Database, it needs to use SQL in the backend along with the scripts of PHP, and in the front end, it needs to use HTML, CSS, HTML 5, and so on.

Front-End

Sample Code Used in HTML

<html>

<head>

<title>Ssss Bank</title>

<link rel=”icon” href=”img/l.png” type=”image/x-icon”>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

<link rel=”stylesheet” href=”css/response.css”>

<script>

function myFunction() {

var x = document.getElementById(“myTopnav”);

if (x.className === “topnav”) {

x.className += ” responsive”;

} else {

x.className = “topnav”;

}

}

</script>

</head>

<body style=”background: url(img/b.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;”>

<div class=”topnav” id=”myTopnav”>

<img src=”img/lg.png” height=”44″ width=”204.8″>

<a href=”index.html” class=”active”><i class=”fa fa-fw fa-home “></i>Home</a>

<a href=”login/login.html” style=”float: right”><i class=”fa fa-fw fa-sign-in “></i>Login</a>

<a href=”register/register.php” style=”float: right”><i class=”fa fa-fw fa-sign-in “></i>Register</a>

<a href=”javascript:void(0);” class=”icon” onclick=”myFunction()”>

<i class=”fa fa-bars”></i>

</a>

</div>

</body>

</html>

As shown from the above code, it is mainly the code which has the output in below image. CSS is also used as per the required colour in the background. It also uses myfunction() where there are many variables such as variable x, class name which are mainly MyTopNav and name of the class is responsive. User can see that the body style is stated above using the CSS which is the colour combination in background. User can also give nthe colour code but here researcher makes it simple. Width and Height of images are declared in the code as well with the link with another html page.

Home Page

Figure 1: Home Page

As shown from the above figure, HTML code is executed successfully and it gives the page as per requirement. There are also buttons for login and registration.

Registration page for New User

Figure 2: Registration page for New User

As per the requirement, the user can successfully be registered after giving all the credentials. It needs to give first name, last name, email address, password, mobile number for making an account in online banking. It consists of two steps of registrations. In the next step, it takes more detailed information about the user such as in the below.

Step 2 Registration page for New User

Figure 3:  Step 2 Registration page for New User

 Back End Development

Mysql is used for developing as backend language and it manages the databases of MySql very smoothly. It is a part of the backend program and the researcher has developed the databases by setup the tables, insert data for testing into the databases, and so on.

Design of Database-1

Design of Database - 2

Design of Database 3

Figure 4: Design of Database

As shown from the above figures, tables are created successfully for the online banking website of customers. Various functions as well as their attributes are executed, users can visualize it by importing .sql files in PhpMyAdmin.

Functional and Non-Functional Requirements

Functional requirements are defined for measuring the basic behavior of the system. Essentially, it is used for running the system and can do various things in terms of the response of inputs (Keshavarz et al. 2017, p. 131). The requirements on functional things are usually defined for measuring the behavior of the website and it includes the business process, calculations, and many more.

Functional requirements related to any specific product or service deals with the direct customer end requirements that must be considered for consumer-based development of that item (Nielsen, 2017, p. 269). Non-functional requirements, on the other hand, deals with actual requirements related to product development and maintenance focusing on how the product must actually react or operate in real scenarios. Further discussion in this context can be presented as the common behavioral pattern of a particular product or service which can be used as the relevant description for the non-functional requirements (Naudé, 2016, p. 30). Unique product properties and user expectations can be presented as relevant examples of non-functional requirements of a product. Functional requirements differ with varying products and services with changing user experience and properties of that specific product. Unique product features and user requirements can be addressed as specific examples of functional requirements for a given product (Greer, 2020, p. 5). Functional requirements are required to develop an initial prototype for a product or service, whereas, non-functional requirements are required for final designing of the actual product specifications based on real consumer expectations.

Identify Development Approach

In the development approach, various approaches are used which are compatible and seamless between the devices and it is based on the size. There are various commands which are implemented such as

Navbar

On the large screens, it mainly presents the layout which is layout with the tabbed versions and the tab is visible on the screen as well. It is becoming visible for making a click button using the navbar (Sambhanthan and Good, 2016, p. 297). The navbar is very sticky that it is used for scrolling the page using the sticks of the navbar to top.

Sample Code for Dashboard.php

$rowr = mysqli_fetch_array($resultr,MYSQLI_ASSOC);

$balance = $rowb[‘balance’];

$online_limit = $rowb[‘online_limit’];

$card_limit = $rowb[‘card_limit’];

$firstname = $rowr[‘firstname’];

$lastname = $rowr[‘lastname’];

?>

<!DOCTYPE html>

<html>

<head>

<title>State Bank</title>

<link rel=”icon” href=”../img/l.png” type=”image/x-icon”>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

<link rel=”stylesheet” href=”../css/response.css”>

<script>

function myFunction() {

var x = document.getElementById(“myTopnav”);

if (x.className === “topnav”) {

x.className += ” responsive”;

} else {

x.className = “topnav”;

}

}

</script>

</head>

<body>

<div class=”topnav” id=”myTopnav”>

<img style=”float:right; right:1″ src=”../img/lg.png” height=”44″ width=”204.8″>

<a href=”dashboard.php” class=”active”><i class=”fa fa-fw fa-calculator “></i>Dashboard</a>

<a href=”profile.php”><i class=”fa fa-fw fa-id-card-o “></i>Profile</a>

<a href=”transfer.php”><i class=”fa fa-fw fa-cogs “></i>Transfer Money</a>

<a href=”transactions.php”><i class=”fa fa-fw fa-file-text “></i>Transactions</a>

<a href=”limit.php”><i class=”fa fa-fw fa-sliders “></i>Set Limit</a>

<a href=”logout.php” style=”float: right”><i class=”fa fa-fw fa-sign-out “></i>Logout</a>

<a href=”javascript:void(0);” class=”icon” onclick=”myFunction()”>

<i class=”fa fa-bars”></i>

</a>

As shown from the above code of php, it gives the declaration about the set limit and configuration command of the dashboard. It is linked with the profile.php, transfer.php, limit.php, logout.php and so on. After starting the session, it needs to use the account no and then use the command mysqli connects for running the root folder in the localhost. Declaration for the balance function is also provided and researcher has uses the declaration of several function using the classname, and divide command is used as well.

Account Details Page

Figure 5: Account Details Page

As shown from the above figure, it gives the details about the bank account details where the balance is shown as well as the total limit and limit of online transactions and so on.

Edit Profile Page

Figure 6: Edit Profile Page

 

Limit of the Transactions

Figure 7: Limit of the Transactions

 

Customer Profile Details

Figure 8: Customer Profile Details

 

 Transfer Money Details

Figure 9: Transfer Money Details

 

 Password Changing Details

Figure 10: Password Changing Details

 

Password Change Successful Message

Figure 11: Password Change Successful Message

As shown from the above figures, there are various PHP files are executed which can showcased from the above figures. The execution is done for setting the limit, changing passwords, editing profiles, and so on. All the pages are configured successfully using the commands and also developed by using XAMP server.

Conclusion

The above study has essentially covered all the required areas of description for this research project. Researcher has emphasized different aspects related to the chosen topic of developing web-based information systems for a commercial bank. In order to complete this project, researcher has presented various discussions on multiple perceptions related to web development of information systems such as payment methods and transaction procedures for a commercial bank. The report has also delivered elaborative discussions made on the front-end and back-end development of the web information system for the bank. Researcher has also emphasized the discussion of functional as well as non-functional requirements for developing an actual web information system for a commercial bank. The study is also delivered with respective codes for developing user authentication pages and dashboard representation for this project.

References

Keshavarz, H., Fahimnia, F. and Sedigh Talemi, F., 2017. Behavioral Considerations in Developing Web Information Systems: User-centered Design Agenda. Journal of Cyberspace Studies, 2(1), pp.131-149.

Tran, N.K., Sheng, Q.Z., Babar, M.A. and Yao, L., 2017, October. A kernel-based approach to developing adaptable and reusable sensor retrieval systems for the Web of Things. In International Conference on Web Information Systems Engineering (pp. 315-329). Springer, Cham.

Naudé, F., 2016. Electronic Journal of Information Systems in Developing Countries (2000–2013): A Bibliometric Study. The Electronic Journal of Information Systems in Developing Countries, 72(1), pp.1-23.

Greer, T.H., 2020. Critical success factors in developing, implementing, and teaching a Web development course. Journal of Information Systems Education, 12(3), p.5.

Nielsen, P., 2017, May. Digital innovation: a research agenda for information systems research in developing countries. In International Conference on Social Implications of Computers in Developing Countries (pp. 269-279). Springer, Cham.

Walshe, N., 2017. Developing trainee teacher practice with geographical information systems (GIS). Journal of Geography in Higher Education, 41(4), pp.608-628.

Sambhanthan, A. and Good, A., 2016. Strategic advantage in web tourism promotion: an e-commerce strategy for developing countries. In International Business: Concepts, Methodologies, Tools, and Applications (pp. 597-618). IGI Global.