INTERNET BANKING

DEPARTMENT OF SELF-FINANCING STUDIES

N.C (AUTO) COLLEGE, JAJPUR
In Partial Fulfilment Of The Requirement For

SESSION -2023 -2024

Presented By: Dissertation Guide:

ABINASH DASH Mrs. ITISHREE BOITAI
Class Roll No: BCA-SF-21-003 Faculty in Self Financing
Exam Roll No: 1621BC006 Department N.C.(AUTO.) College,
Jajpur
 This is to clarify that the Project Report entitled “INTERNET
BANKING” has been successfully carried by ABINASH DASH, ROLL
NO- BCA-SF-21-003 student of BCA 6th semester in partial fulfillment
of the requirement for the award of “Bachelor of Computer
Application” in N.C (Auto) College, Jajpur & Odisha during the year
2023-24.
The Project Report in my opinion is worthy is consideration for the
award.

Mrs. Itishree Boitai

Dept. of Self-Financing
N.C.(Auto) College, Jajpur
 This is to clarify that the dissertation study entitled “INTERNET
BANKING” is a bonafied work done by,ABINASH DASH, ROLL NO-
BCA-SF-21-003 is a bonafied and original work conducted under my
guidance and supervision and it embodies the results of his contribution.

Mrs. ITISHREE BOITAI

Guide and Supervisor
N.C. (Auto.) College, Jajpur
 This project study has been completed with the guidance, help,
advice and suggestion of many teachers, well-wishers, friends and
relatives. It is my sincere to acknowledge all of them.

First of all express my deep sense of gratitude to my supervisor &

guide Mrs. Itishree Boitai, faculty in Self-Financing Department,
N.C.(Auto.)College, Jajpur for her guidance and suggestion. She has
been a constant source of inspiration and help during my project study.

ABINASH DASH
Class Roll No: BCA-SF-21-003
Exam Roll No: 1621BC006
N.C.(AUTO.) College, Jajpur
 I declare that the Dissertation work entitled “INTERNET
BANKING” submitted to N.C. (Auto.) College, Jajpur is an original
piece of work done by me and has not been published elsewhere,
submitted earlier by anybody in full or part.

ABINASH DASH
Date: Class Roll No: BCA-SF-21-003
Exam Roll No: 1621BC006
N.C.AUTO.College,Jajpur
 CONTACT INFORMATION

Project Name : INTERNET BANKING

Participants

Sl No Name Phone No E-mail Address

01 Sameer Behera 9668742114 [email protected]
02 Tapas Ku. Behera 6372545212 [email protected]
03 Abinash Dash 9348774623 [email protected]
SL. NO PARTICULAR
1 PROJECT INTRODUCTION
1.1 PURPOSE OF SYSTEM
1.2 SCOPE OF THE PROPOSED SYSTEM
1.3 OVERVIEW
1.4 BUSSINESS CONTEXT
2 GENERAL DESCRIPTION
2.1 PRODUCT FUNCTION
2.2 USER PROBLEM STATEMENT
2.3 USER OBJECTIVES
3 SYSTEM ANALYSIS
3.1 FUNCTIONAL REQUIREMENT
3.1.1 SYSTEM REQUIREMENT
3.1.2 PROGRAME REQUIREMENT
3.1.3 STABILITY AND SPEED
3.2 FEASIBILITY STUDY
3.2.1 OPERATIONAL
3.2.2 TECHNICAL
3.2.3 ECONOMIC
4 SYSTEM DESIGN
4.1 SCOPE
4.2 DATABASE DESIGN
4.3 DFD
4.4 E-R DIAGRAM
4.5 UML DIAGRAM
4.6 MODULE DESCRIPTION
5 INTERFACE REQUIREMENT
5.1 GRAPHICAL INTERFACE
5.2 COMMAND LINE INTERFACE
5.3 HARDWARE INTERFACE
5.4 SOFTWARE INTERFACE
SL. NO PARTICULAR
6 PERFORMANCE REQUIREMENT
7 NON FUNCTIONAL ATTRIBUTES
7.1 SECURITY
7.2 RELIABILITY
7.3 MAINTAINABILITY
7.4 PORTABILITY
7.5 REUSABILITY
7.6 RESOURCE UTILIZATION
7.7 STABLE AND SPEED EFFICIENCY
8 SECURITY
8.1 DESCRIPTION
8.2 TECHNICAL ISSUES
8.3 COST AND SHEDULE
8.4 RISK
8.5 ANNEXURE – A SCREENSHOTS
8.6 ANNEXURE – B CODING SECTION
9 REFERENCE AND APPENDICS
10 CONCLUSION
1. INTRODUCTION
Internet banking is a product of e-commerce in the field of banking and financial
services. In what can be described as business to customer domain for banking industry,
Internet banking offers different online services like balance enquiry, balance transfer,
opening account, calculate EMI’s etc. Mostly, these are traditional services offered through
internet as a new delivery channel. Banks are also offering payment services on the behalf of
their customers who shop in different e-shops, e-malls etc. Further, different banks have
different levels of such services offered, starting from level-1 where only information is
disseminated through internet to level-3where online transactions are put through.

1.1 PURPOSE OF THE SYSTEM

1. SECURITY: There is a lot of security of data on this content management system. One
cannot open our system without knowing the password. Immediately after opening login
screen will appear on screen. Only after entering the correct username and password user can
operate our system.

2. REFERENTIAL INTEGRITY: User cannot change the date in the transaction files.
Addition of data can be done only on the master files date in transaction files cannot be
entered until addition is done on the master files.

3. EASY RETRIEVAL OF DATA: Data is retrieved easily and quick using sql commands.
Online commands are used to retrieve huge amount of data.

GENERATION OF AUTOMATIC VALUES: In project in some screen some fields generated

automatically like Profile detail, Account number, etc.
1.2 SCOPE OF THE PROPOSED SYSTEM

Though there are many online systems available on internet but this can compete with
them withsome advancement in its functionality and can be used by any bank organization to
maintain theircustomer’s account and online transaction process.

The basic functionalities of the system are:

• Create Account
• Login
• Update Profile
• Password Recovery
• View Profile
• ATM and Bank finder
• Contact Form
• Amount Transaction
• EMI and Loan Calculator
• Delete account
• Logout

1.3 OVERVIEW OF PROPOSED SYSTEM

1. MENU DRIVEN:

The project uses menu throughout which we can choose required options. Menus are self-
explanatory, as they are very easy to use and user can go to any other web page using the menu.
2. USER CONFIRMATION:

Whenever the user tries to delete or edit the data, the system asks for the confirmation. This is
used to avoid the accidental changes to the database. A confirmation is also provided for the
exitof the application.

3. GRAPHICAL USER INTERFACE:

User is provided with a graphical interface in which user can select from various options and
canperform desired operations with perfect understanding of the menu selected.

4. MULTIPLE DOCUMENT INTERFACE:

The package provides a multiple document interface to the user. The user can view more than
one entry form or pages at the same time.

5. SECURITY AND ACCESS: A password form has been provided at the beginning of the
package. Entering the correct password will take user to the main user page

1.4 BUSINESS CONTEXT

Existing banking system is a manual system, which leads to a number of problems in

maintainingproper records. These are:
PAPER WORK: All the activities that are performed by Management involve a lot of paper
work involving register consultations and entries. A separate file has to be maintained for each
kind of activity and for different periods of time.

1. TIME CONSUMPTION: A lot of time is consumed in referencing the registers involved for
particular activities and a lot of computation as well as report verification activity is also
paper based and time consuming.

2. COMPLEXITY: Complexity of information handling and the gathering and determination of

information is usually the most difficult problem faced.
3. REDUNDANCY: Maintaining separate files for each department can lead to duplication of
data present in files. This can lead to:

a) Inconsistencies

b) Update anomalies

c) Decentralization problems

4. HUMAN ERRORS: Human kind of errors may be generated in typing errors and slow
arithmetic calculations, fatigue and boredom.

5. ILLEGAL ACCESS: The security of a lot of documents, which are paper, based if difficult
may be in terms of illegal access or manipulation by malicious personals either intentionally
or by accident.

6. DYNAMIC ENVIRONMENT: As the working environment is dynamic and company policies

change time and again, changing the way of working will be difficult.
 2. General Description

2.1 Product function:

➢ Track Account Level Data: In this module, check the authentication of users.

➢ Service Level Agreements: It contains the agreements of providing the services related
tousers.

➢ User Contact Information: It maintains all the details (Personal, Official and Contact)
ofthe users.

➢ Product Access Right Details: It maintains the information that does which user have
therights of using which service.

2.2 User problem statement

A problem statement is a concise description of the issues that need to be addressed by a

problem solving team and should be presented to them (or created by them) before they try
to solve the problem. When bringing together a team to achieve a particular purpose provide
themwith a problem statement. A good problem statement should answer these questions:

1. What is the problem? This should explain why the team is needed.
2. Who has the problem or who is the client/customer? This should explain who
needs thesolution and who will decide the problem has been solved.
3. What form can the resolution be? What is the scope and limitations (in time,
money, resources, technologies) that can be used to solve the problem? Does the
client want a white paper? A web-tool? A new feature for a product? A
brainstormingon a topic?

The primary purpose of a problem statement is to focus the attention of the problem solving
team. However, if the focus of the problem is too narrow or the scope of the solution too
limitedthe creativity and innovation of the solution can be stifling.
In project management, the problem statement is part of the project charter. It lists what's
essential about the project and enables the project manager to identify the project scope as
wellas the project stakeholders.

A research-worthy problem statement is the description of an active challenge (i.e.

problem) faced by researchers and/or practitioners that does not have adequate solutions
available including the argumentation for its viability based on solid peer-reviewed sources
as well as theoretical foundation. The research-worthy problem statement should address
all six questions: what, how, where, when, why, and who. On the other hand, a statement of
the problem is one or two sentences claim that outlines the problem that the study addresses.
The statement of the problem should briefly address the question: What is the problem that
the research will address?

2.3 User objectives

2.3.1 CREATE ACCOUNT

This module is used by the user to create a new account to join services of online banking.
The user is required to fill in a few details and is automatically assigned as an user at the
endof process.

2.3.2 LOGIN
This module is used by all the users to log into the account. The user is required enter his/her
user name and password. After login user will be redirected to the user’s home page

2.3.3 UPDATE PROFILE

Update profile module will be used to update or change any detail of user such as address,
phone number, city, state, etc.
2.3.4 PASSWORD RECOVERY

This module is used to recover the lost password by the user by entering his/her valid
email address. This email address will be matched from database and automatically
generated email will be sent to the user containing his/her user name and password.

2.3.4 VIEW PROFILE

This module is the automatically generated page when user clicks the view profile button.
Thiscontain the user account detail such as name, account balance, email id, address, city.

2.3.5 ATM AND BANK LOCATOR

This module is used to find the address and location of ATM and banks in the selected city.

2.3.6 AMOUNT TRANSACTION

This module is the user view page after login where he/she can transfer the amount to
other account by providing the amount to be transferred and the account number where to
be transferred.

2.3.7 CONTACT FORM

This module is used by both registered and non-registered user to contact bank or to give
anyfeedback trough message. His/her message will be saved into the database and further
bank can contact him/her.

2.3.8 EMI AND LOAD INTEREST CALCULATOR

This module is used to calculate the interest amount of EMI and load by proving the
interest rate, total amount and duration.
2.3.9 DELETE ACCOUNT

This module is used to delete the user’s account by the confirmation of user.

2.3.10 LOGOUT

This module is used to logout from the user’s session and redirected to the home page of
website.
3. SYSTEM ANALYSIS

3.1 Functional requirement

3.1.1 System requirement:

To view your accounts in Online Banking you will need internet access using one of
thefollowing supported browsers:

• Microsoft Internet Explorer 6 or higher

• Firefox 3
• Safari 3

To view your accounts in Online Cash Manager you will need internet access using one of
thefollowing supported browsers:

• Microsoft Internet Explorer 6 or higher

• Firefox 3

3.1.2 Program requirement

The following are the most essential requirements for developing and hosting web applications:

(ii) Server-side Runtime Support - This includes support for network services and a
runtimefor executing the applications.

(iii) Deployment Support – Deployment is the process of installing the application on the
server.Deployment could also include customizing the application.

3.1.3 Stability & speed

SPEED delivers unparalleled analysis into the latest developments in payments systems, real
time gross settlement, straight-through-processing, securities trading, risk management and
banking technology.

It is the essential source of information policymakers and market participants like you read to
stay informed about the policy issues shaping settlements, payments, e-money and e-trading.
 Few sources of information set out to analyse changes in the financial infrastructure as a
whole.They stay in their silo. Yet increasingly what happens in one area has far reaching
implications for all others.

SPEED aims to help you track these developments not just at a national or global level, but
asan integrated whole.

3.2 Feasibility study

3.2.1 Operational

Now almost all Banks branches are connected through the online banking facilities.
Thetransactions of a particular bank are transmitted through the Micro-Bank software
from INFLEX Solutions to the Head Office, where every data is stored in the
database.
Real-time On-line any branch banking for the clients is used to facilitate the clients to deposit
/draw or remit funds to and from their accounts, from one bank to another.
Meanwhile, for the Smooth operation and efficient functioning of the system they
havecompleted the proper training to the related personnel

3.2.2 Technical

Infrastructure: HTML, CSS, and JavaScript are client-side technologies and can be hosted on any
web server. PHP and MySQL can be hosted on various server environments.
Technology Stack: HTML, CSS, and JavaScript are standard technologies for building web m
interfaces.PHP is a popular server-side scripting language, and MySQL is a widely used relational
database management system (RDBMS).

Integration: HTML, CSS, and JavaScript can be easily integrated into PHP-based applications.
PHP has extensive support for MySQL, making it feasible to integrate and communicate with the
database.
Scalability: The chosen technologies can scale horizontally and vertically. PHP supports scalability
through load balancing and caching mechanisms. MySQL can be scaled by optimizing queries and
using techniques like sharding or replication.
Security Feasibility:

SSL/TLS: Implementing HTTPS ensures secure communication between the client and server.
Server-Side Validation: PHP can perform server-side validation to ensure that data submitted by
users is sanitized and secure.
Encryption: PHP can implement encryption algorithms for sensitive data. MySQL supports data

encryption for stored data.

Authentication and Authorization: Implement secure user authentication using industry-standard
practices. PHP sessions or tokens can handle user authorization.

Reliability and Availability:

Redundancy: PHP can be deployed in redundant server configurations. MySQL supports master-
slave replication for data redundancy.
Backup and Restore: Regular backups of the MySQL database can be scheduled to ensure data
recovery in case of failures.

GDPR, PCI DSS: Implement measures to comply with data protection regulations (e.g., GDPR) and
payment card industry standards (PCI DSS).
Skill and Expertise:

Developer Skill: There is a large pool of developers skilled in HTML, CSS, JavaScript, PHP, and
MySQL, making it feasible to find resources for development and maintenance.
Cost and Budget:

Open Source: HTML, CSS, JavaScript, PHP, and MySQL are open-source technologies, reducing
software licensing costs.
Hosting Costs: Hosting PHP and MySQL on various hosting platforms is cost-effective.
Legal and Ethical Feasibility:

1. The HTTP Protocol:

The HTTP is an application – level protocol (generally implemented over TCP/IP

Connection). The HTTP is a stateless protocol based on requests & responses. In this
paradigm, client application (such as your web browser) sends request to the server (such as
the web server of anonline store) to receive info (such as downloading a catalog) or to initiate
specific processing onthe server (such as placing an order).

3.2.3 Economic

Personal Banking including personal finance, banking on an international arena, banking on a

priority basis.

Transaction Banking includes management of cash, facilities related to credit availability and
services related to trade.

Relationship services with the investors.

Depository Services including dematerialized account openings and associated updates.
Internet Banking services comprising of account specifications, transaction details,
performance of monetary transactions,bill payment through electronic means, etc latest
news and updates related to the market (world/national) All the information related to the
bank under the head of “About Us” Specifications and online availability of loans,debit and
credit cards, insurance and other investment services.
4. SYSTEM DESIGN

4.1 Scope:

Though there are many online systems available on internet but this can compete with them with
some advancement in its functionality and can be used by any bank organization to maintain their
customer’s account and online transaction process.

The basic functionalities of the system are:

• Create Account
• Login
• Update Profile
• Password Recovery
• View Profile
• ATM and Bank finder
• Contact Form
• Amount Transaction
• EMI and Loan Calculator
• Delete account
• Logout

4.2 Database design:

Database design is required to manage the large bodies of information. The management of data
involves both the definition of structure of the storage of information and provisions of
mechanism for the manipulation of information. in addition to the database system must provide
for the safety of information handled, despite the system crashes due to attempts art unauthorized
access. for developing an efficient data base , we will have to full fill certain condition such as:
 • Control Redundancy

• Ease of use

• Accuracy and integrity

• Avoiding inordinate delays

• Recovery from failure

• Privacy and security

• Performance

There are 6 major steps in design process. The first 5 steps are usually done on paper and finally
the design is implemented.

• Identify the tables and relationship

• Identify the data that is needed for each table and relationship

• Resolve the relationship

• Verify the design

• Implement the design

NORMALIZATION

Normalization is a technique that is more applicable to record based data models. Each of the
process can be carried out independently to arrive at normalized tables. Normalization refines the
data structure and data are group in simple way as possible. So later changes can be bring about
the least impact on database structure and eliminates data redundancy.
DATA INTEGRITY

Data integrity refers to the procedure that ensures correctness of the data entered in the database.
Functions have been provided in the software, which check data while being entered. Integrity
problems are occurred due to hardware or software malfunctions such as power failure and disk
crashes. Side effect from the program development may also be the reason.

DATA CONSISTENCY

Problem with data consistency occur when adding records without first checking for records with
same key or deleting records without deleting other related records. Likewise the software is
coded such that primary keys can’t be duplicated. For developing an efficient database, we have
to fulfill certain conditions such as :

• Control redundancy

• Ease of use

• Data independence

• Privacy and security

• Performance

For achieving the above criteria’s we have to make use of various features that are available with
DBMS such as:

• Enforcing integrity constraints to ensure data integrity and to reduce data inconsistency.
• Recovery from failures using backup facility

.
 DATABASE TABLES AND STORED PROCEDURES

* DATABASE TABLES

1. sign_up

This table has been included in many modules such as Login, register, Update, View Profile,
Transaction, Password Recovery.

Column Name Data Type Null Default Extra

id int No None AUTO_INCREMENT
full_name varchar(255) No None
email varchar(255) No None
mobile varchar(255) No None
username varchar(255) No None
password varchar(255) No None

2. contact
This table has been used in the contact page where user can submit the feedback and queries
along with hisname and email id.

Column Name Data Type Null Default Extra

id int No None AUTO_INCREMENT

name varchar(255) No None

email varchar(255) No None

feedback varchar(255) No None

3. new_accounts

The new_accounts table holds the details of customers who have recently opened bank accounts.
Each account is identified by a unique id. It stores the account holder’s name,email,phone number.
Additionally, it records the initial deposit made by the account holder at the time of opening the
account

Column Name Data Type Null Default Extra

id int No None AUTO_INCREMENT

Full_name varchar(255) No None

email varchar(255) No None

phone varchar(255) No None

Initial_deposit Varchar(255) No None

4. loan_applications

The ‘loan_applications’ table record details of loan applications submitted by bank customers.
Each application is identified by a unique ‘id’ It stores the applicant's ‘name’, email, phone, ‘pan
card number’, ‘date of birth’, and ‘occupation’.Additonally, it records the ‘loan_amount’requested
and the ‘loan_purpose’ specified by the applicant.

Column Name Data Type Null Default Extra

id int No None AUTO_INCREMENT

full_name varchar(255) No None

email varchar(255) No None

phone varchar(255) No None

pan_card varchar(255) No None

dob date No None

occupation varchar(255) No None

loan_amount int(20) No None

loan_purpose varchar(255) No None

5. credit_card_applications

The ‘credit_card_applications’ table record details of credit card applications submitted by bank
customers.Each application is identified by a unique ‘id’. it store the applicant’s ‘full_name’,
‘email’, ‘phone’,’dob’,’occupation’,’annual_income’,credit_limit.

Column Name Data Type Null Default Extra

id int No None AUTO_INCREMENT

full_name varchar(255) No None

email varchar(255) No None

phone varchar(255) No None

pan_card varchar(255) No None

dob date No None

occupation varchar(255) No None

annual_income int(20) No None

credit_limit int(20) No None

6. transactions
The ‘transactions’ table record details of transactions made between bank customers. Each
transaction is identified by a unique ‘id’. It store the ‘sender_name’, ‘recipient_name’ and ‘amount’
of each transactions.

Column Name Data Type Null Default Extra

id int No None AUTO_INCREMENT

sender_name varchar(255) No None

recipient_name varchar(255) No None

amount int(20) No None

STORED PROCEDURES

A stored procedure is a subroutine available to applications accessing a relational database

system. Stored procedures (sometimes called a proc, sproc, StoPro, StoredProc, or SPS) are
actually stored in the database data dictionary.
Following are the stored procedures used in this system :

• sps_contact

• sps_forgot

• Sps_Global

• sps_loc

• sps_register

• sps_transac

4.3 Data flow diagram (DFD)

Data flow diagrams can be used to provide a clear representation of any business function.
The technique starts with an overall picture of the business and continues by analyzing each
of the functional areas of interest. This analysis can be carried out to precisely the level of
detail required. The technique exploits a method called top-down expansion to conduct the
analysis ina targeted way.
There are only five symbols that are used in the drawing of business process diagrams (data
flow diagrams). These are now explained, together with the rules that apply to them.

This diagram represents a banking process, which maintains customer accounts. In this
example, customers can withdraw or deposit cash, request information about their account
or update their account details. The five different symbols used in this example represent
the fullset of symbols required to draw any business process diagram.

External Entity

An external entity is a source or destination of a data flow which is outside the area of study.
Only those entities which originate or receive data are represented on a business process
diagram. The symbol used is an oval containing a meaningful and unique identifier.

Process
A process shows a transformation or manipulation of data flows within the system. The
symbolused is a rectangular box which contains 3 descriptive elements:
Firstly an identification number appears in the upper left hand corner. This is
allocatedarbitrarily at the top level and serves as a unique reference.
Secondly, a location appears to the right of the identifier and describes where in the system
theprocess takes place. This may, for example, be a department or a piece of hardware.
Finally, a descriptive title is placed in the centre of the box. This should be a simple
imperative sentencewith a specific verb, for example 'maintain customer records' or 'find
driver'.

Data Flow

A data flow shows the flow of information from its source to its destination. A data flow is
represented by a line, with arrowheads showing the direction of flow. Information always
flowsto or from a process and may be written, verbal or electronic. Each data flow may be
referencedby the processes or data stores at its head and tail, or by a description of its
contents.

Data Store

A data store is a holding place for information within the system:

It is represented by an open ended narrow rectangle.
Data stores may be long-term files such as sales ledgers, or may be short-term accumulations:
for example batches of documents that are waiting to be processed. Each data store should be
given a reference followed by an arbitrary number.

Resource Flow

A resource flow shows the flow of any physical material from its source to its destination.
Forthis reason they are sometimes referred to as physical flows.
The physical material in question should be given a meaningful name. Resource flows are
usually restricted to early, high-level diagrams and are used when a description of the
physicalflow of materials is considered to be important to help the analysis.
4.4 Entity relationship diagram(E- R diagram)
4.5 UML Diagram
4.6 Module description

4.6.1 CREATE ACCOUNT

This module is used by the user to create a new account to join services of online banking.
The user is required to fill in a few details and is automatically assigned as an user at the
endof process.

4.6.2 LOGIN
This module is used by all the users to log into the account. The user is required enter his/her
user name and password. After login user will be redirected to the user’s home page.

4.6.3 UPDATE PROFILE

Update profile module will be used to update or change any detail of user such as address,
phone number, city, state, etc.

4.6.4 PASSWORD RECOVERY

This module is used to recover the lost password by the user by entering his/her valid
email address. This email address will be matched from database and automatically
generated emailwill be sent to the user containing his/her user name and password.

4.6.5 VIEW PROFILE

This module is the automatically generated page when user clicks the view profile button.
Thiscontain the user account detail such as name, account balance, email id, address, city.

4.6.6 ATM AND BANK LOCATOR

This module is used to find the address and location of ATM and banks in the selected city.

4.6.7 AMOUNT TRANSACTION

This module is the user view page after login where he/she can transfer the amount to
other account by providing the amount to be transferred and the account number where to
be transferred.
 4.6.8 CONTACT FORM

This module is used by both registered and non-registered user to contact bank or to give any
feedback trough message. His/her message will be saved into the database and further bank
can contact him/her.

4.6.9 EMI AND LOAD INTEREST CALCULATOR

This module is used to calculate the interest amount of EMI and load by proving the interest
rate, total amount and duration.

4.6.10 DELETE ACCOUNT

This module is used to delete the user’s account by the confirmation of user.

4.6.11 LOGOUT

This module is used to logout from the user’s session and redirected to the home page of
website.
5. INTERFACE REQUIREMENT

5.1 Graphical interface

• Internet Explorer

• Google Chrome

• Mozilla Firefox

• Opera

5.2 Command line interface

• Notepad ++

• Dreamweaver

• Visual Studio

5.3 Hardware interface

• Intel Pentium-IV processor

• 256 MB RAM or higher

• 40 GB HDD or higher

• Printer

• UPS

• LAN Connectivity (Assets Management should be accessible through Intranet)

5.4 Software interface

• Microsoft Windows XP / 2000 or Above.

 • RDBMS (Back end): Sql Server

• Web Browser: Internet Explorer6 or higher, Mozilla Firefox, Opera.

• Front End: HTML , CSS And Javascript

Editors: Visual Studio Code

6. PERFORMANCE REQUIREMENT

The completion of a system is achieved only after it has been thoroughly tested. Though

this gives a feel the project is completed, there cannot be any project without going through this

stage. Hence in this stage it is decided whether the project can undergo the real time environment

execution without any break downs, therefore a package can be rejected even at this stage.

6.1 SYSTEM TESTING

Testing is a set of activities that can be planned in advance and conducted systematically. The

proposed system is tested in parallel with the software that consists of its own phases of analysis,

implementation, testing and maintenance. Following are the tests conducted on the system.

6.2 UNIT TESTING

During the implementation of the system each module of the system was tested separately to

uncover errors with in its boundaries. User interface was used as a guide in the process.

6.3 MODULE TESTING

A module is composed of various programs related to that module. Module testing is done to

check the module functionality and interaction between units within a module.
It checks the functionality of each program with relation to other programs within the same

module. It then tests the overall functionality of each module.

6.4 INTEGRATION TESTING

Integration testing is a systematic technique for constructing the program structure

while conducting tests to uncover errors associated with interfacing. The objective is to

take unit-tested module and build a program structure that has been dictated by design.

6.5 ACCEPTANCE TESTING

The software has been tested with the realistic data given by the client and produced
fruitful results. The client satisfying all the requirements specified by them has also developed
the software within the time limitation specified. A demonstration has been given to the client
andthe end-user giving all the operational features.
7. NONFUNCTIONAL ATTRIBUTES

7.1 Security

Event management is the application of project management to the creation and

developmentof festivals, events ,extra vagenga and conferences.
Event management involves studying the intricacies of the brand, identifying the target
audience, devising the event concept, planning the logistics and coordinating the technical
aspects before actually executing the modalities of the proposed event. Post-event analysis
and ensuring a returnon investment have become significant drivers for the event industry.
The recent growth of festivals and events as an industry around the world means that the
management can no longer be ad hoc. Events and festivals, such as the Asian Games, have a
largeimpact on their communities and, in some cases, the whole country.
The industry now includes events of all sizes from the Olympics down to a breakfast meeting
forten business people. Many industries, charitable organization and interest groups will hold
eventsof some size in order to market themselves, build business relationships, raise money or
celebrate.

7.2 Reliability

Internet banking renders location and time irrelevant, and empowers customers with
greater control of their accounts. Banks achieve cost and efficiency gains in a large
number of operational areas. This paper addresses the aspects of reliability and
accessibility from a banking enterprise point of view and puts forth present day solutions
to problems involving these issues. An Indian perspective of Internet banking is also
looked at in order to gaining abetter perspective regarding the situation.
7.3 Maintainability

• The aptitude of a system to undergo repair and evolution.

• (1) The ease with which a software system or component can be modified to
correctfaults, improve performance or other attributes, or adapt to a changed
environment.
• (2) The ease with which a hardware system or component can be retained in, or
restoredto, a state in which it can perform its required functions. [IEEE Std. 610.12]
7.4 Portability

Portability in high-level computer programming is the usability of the same software in

different environments. The prerequirement for portability is the
generalized abstraction between the application logic and system interfaces. When software
with the same functionality is produced for several computing platforms, portability is the key
issue for development cost reduction.

7.5 Reusability

In computer science and software engineering, reusability is the likelihood a segment of source
code that can be used again to add new functionalities with slight or no modification. Reusable
modules and classes reduce implementation time, increase the likelihood that prior testing and
use has eliminated bugs and localizes code modifications when a change in implementation is
required.
Subroutines or functions are the simplest form of reuse. A chunk of code is regularly organized
using modules or namespaces into layers. Proponents claim that objects and offer a more
advanced form of reusability, although it has been tough to objectively measure and define
levels or scores of reusability.
The ability to reuse relies in an essential way on the ability to build larger things from smaller
parts, and being able to identify commonalities among those parts. Reusability is often a
required characteristic of platform software. Reusability brings several aspects to software
development that do not need to be considered when reusability is not required.
Reusability implies some explicit management
of build, packaging, distribution, installation, configuration, deployment, maintenance and upgr
ade issues. If these issues are not considered, software may appear to be reusable
from design point of view, but will not be reused in practice.
Software reusability more specifically refers to design features of a software element (or
collection of software elements) that enhance its suitability for reuse.

7.6 Resource utilization

A supply chain network uses resources of various kinds: manufacturing resources (machines,
material handlers, tools, etc.); storage resources (warehouses, automated storage and retrieval
systems); logistics resources (trucks, rail transport, air-cargo carriers, etc.); human resources
(labor, scientific and technical personnel); and financial (working capital, stocks, etc.). The
objective is to utilize these assets or resources efficiently so as to maximize customer service
levels, minimize lead times, and optimize inventory levels.

7.7 Stable and speed efficiency

The implementation is the final and important phase. It involves User training, system testing and
successful running of the developed system. The users test the developed system when changes
are made according to the needs. The testing phase involves the testing of the developed system
using various kinds of data. An elaborate testing of data is prepared and system is tested using
the tests data.

Implementation is the stage where theoretical design turned into a working system.
Implementation is planned carefully to propose system to avoid unanticipated problems. Many
preparations involved before and during the implementation of proposed system. The system
needed to be plugged in to the organization’s network then it could be accessed from anywhere,
after a user logins into the portal. The tasks that had to be done to implement the system were to
create the database tables in the organization database domain. Then the administrator was
granted his role so that the system could be accessed.

The next phase in the implementation was to educate the system. A demonstration of all the
functions that can be carried out by the system was given to examination department person, who
will make extensive use of the system.
8. SECURITY

8.1 Description
Event management is the application of project management to the creation and development
of festivals, events ,extra vagenga and conferences.
Event management involves studying the intricacies of the brand, identifying the target audience,
devising the event concept, planning the logistics and coordinating the technical aspects before
actually executing the modalities of the proposed event. Post-event analysis and ensuring a return
on investment have become significant drivers for the event industry.
The recent growth of festivals and events as an industry around the world means that the
management can no longer be ad hoc. Events and festivals, such as the Asian Games, have a large
impact on their communities and, in some cases, the whole country.
The industry now includes events of all sizes from the Olympics down to a breakfast meeting for
ten business people. Many industries, charitable organization and interest groups will hold events
of some size in order to market themselves, build business relationships, raise money or celebrate.

8.2 Technical issues

➢ Software companies service event planners with a complete Tool, Hotel Booking Tool,
Travel Booking Tool, Budgeting Tool etc.
➢ As far as the technical issues related to this project from security point of view, there is
no chance of steal the data until either we want or if there is any problem in the coding
section.

8.3 Cost and schedule

Merely we think of the cost estimation on the basis of the following points:

Static IP for WEB ---- null

Paper work & reports ---- Rs.400
Labour costs ---- null
Other expenses ---- Rs. 50
 Now looking at the time limit of 15 days and working for 2 hours and work to do we can
divide our work in following parts and complete it.

8.4 Risk

Risk is the term applied to a logical and semantic method of establishing the context, identifying,
analyzing, evaluating, treating, monitoring and communicating risks associated with any activity,
function or process in a way that will enable organizations to maximize losses and minimize
opportunities.

The complete RISK ANALYSIS is given below in the table :-

S.NO. RISK ITEMS. RISK MANAGEMENT TECHNIQUES.

1. Personnel Team comprises of the persons who are ignorant or novice in the
Shortfalls security issues and also in the technology that we are going to use
for the implementation of the same.

2. Unrealistic The term/ time span allotted is very short, quite insufficient and
Schedule and the things are really next to impossible to be in such a short span
Budget of time, with the same working hours per day.

3. Developing the Mission Analysis is strong but what if a person or more gets
wrong s/w diverted from.
functions

4. User interface For the user interface developed , even after getting it sanctioned
from the opposite side if it denies to accept the existing user
interface.
 5. Continuation What if the user side even after signing the contract are
stream of continuously asking for the changes and modification an undue
requirement problem would be there in the development of the software and
changes. undue time would be utilized for the same which can ultimately
result in a delay in the project.

Risk may occur with the WEB is

8.4.1 Internet speed

8.4.2 Proper security and communication for password and premium
submission.

We have to take certain important measures to not face these risks to occur.
8.5 ANNEXURE – A SCREENSHOTS
Output Screen
 8.6 ANNEXURE – B CODING SECTION
Login Page-
login.html:-
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log in Page</title>
<link rel="stylesheet" href="login.css">

</head>

<body>

<div class="button-container">
<button class="page-button" onclick="redirectToATMPage()">ATM Finder</button>
<button class="page-button" onclick="redirectToEMICalculatorPage()">EMI Calculator</button>
<button class="page-button" onclick="redirectToAboutUsPage()">About Us</button>
<button class="page-button" onclick="redirectToContactUsPage()">Contact Us</button>
</div>

<h2 class="welcome-heading">Welcome to All Citizens Bank</h2>

<div class="login-wrapper">
<form class="form">
<h2>Log In To Your Account</h2>
<div class="input-group">
<input type="text" name="loginUser" id="username" placeholder="Enter your username" required />
<label for="loginUser">User Name</label>
</div>
<div class="input-group">
<input type="password" name="loginPassword" id="password"
placeholder="Enter your password (min. 6 characters)" required minlength="6" />
<label for="loginPassword">Password</label>
</div>
<input type="button" value="Login" class="submit-btn" onclick="auth()" />
<a href="signup.html" class="signup-btn">Sign Up</a> <!-- Signup button -->
<a href="forget_pass.html" class="forgot-password">Forgot Password?</a> <!-- Forgot Password link -->
</form>
</div>
<script>
function auth() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var storedUsername = localStorage.getItem("username");
var storedPassword = localStorage.getItem("password");

if (username && password) {

if (username === storedUsername && password === storedPassword) {
alert("Login successful!");
 window.location.href = "home.html";
} else {

alert("Invalid username or password");

document.getElementById("username").value = "";
document.getElementById("password").value = "";
}
} else {

alert("Please enter both username and password");

}
}

function redirectToATMPage() {
window.location.href = "atm.html";
}

function redirectToEMICalculatorPage() {
window.location.href = "emi.html";
}

function redirectToAboutUsPage() {
window.location.href = "bank.html";
}

function redirectToContactUsPage() {
window.location.href = "contact.html";
}
</script>
</body>

</html>
 login.css:-
body {
font-family: Arial, sans-serif;
background-image: url('login_img.png');
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}

.welcome-heading {
color: #fff;
margin-bottom: 20px;
}

.login-wrapper {
background-color: rgba(59, 58, 58, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
max-width: 100%;
text-align: center;
}

.form h2 {
margin-bottom: 20px;
color: #ffffff;
}

.input-group {
margin-bottom: 15px;
position: relative;
}

.input-group input[type="text"],
.input-group input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #007bff;
border-radius: 5px;
box-sizing: border-box;
}

.input-group input[type="text"]:focus,
.input-group input[type="password"]:focus {
outline: none;
border-color: #0056b3;
 }

.input-group label {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease;
pointer-events: none;
color: #999;
opacity: 0;
}

.input-group input[type="text"]:focus+label,
.input-group input[type="password"]:focus+label,
.input-group input[type="text"]:valid+label,
.input-group input[type="password"]:valid+label {
top: -12px;
left: 6px;
font-size: 12px;
color: #007bff;
opacity: 1;
}

.submit-btn, .signup-btn {
background-color: #0056b3;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
margin-right: 10px;
text-decoration: none;
}

.submit-btn:hover, .signup-btn:hover {
background-color: #004080;
}

.forgot-password {
display: block;
margin-top: 10px;
color: #007bff; /* Change color as needed */
text-decoration: none;
font-size: 14px; /* Adjust font size as needed */
}

.forgot-password:hover {
text-decoration: underline;
}
.button-container {
position: absolute;
top: 10px;
right: 10px;
 display: flex;
gap: 10px;
}

.page-button {
background-color: #0056b3;
color: white;
border: none;
padding: 10px 20px;
font-size: 12px;
border-radius: 5px;
cursor: pointer;
}
.page-button:hover{
background-color: #004080;
}
 Signup Page-
signup.html:-

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Page</title>
<link rel="stylesheet" href="signup.css">
</head>

<body>
<h2 class="welcome-heading">Create an Account</h2>
<div class="signup-wrapper">
<form action="signup.php" method="post" class="form" id="signup-form">
<h2>Sign Up For All Citizens Bank</h2>
<div class="input-group">
<input type="text" name="fullName" id="fullName" placeholder="Enter your full name" required />
<label for="fullName">Full Name</label>
</div>
<div class="input-group">
<input type="email" name="email" id="email" placeholder="Enter your email" required />
<label for="email">Email</label>
</div>
<div class="input-group">
<input type="text" name="mobile" id="mobile" placeholder="Enter your mobile number" required />
<label for="mobile">Mobile Number</label>
</div>
<div class="input-group">
<inputtype="text" name="username" id="username" placeholder="Choose a username" required />
<label for="username">Username</label>
</div>
<div class="input-group">
<input type="password" name="password" id="password" placeholder="Choose a password
(min. 6 characters)" required minlength="6" />
<label for="password">Password</label>
</div>
<input type="submit" value="Sign Up" class="submit-btn" />
</form>
</div>

<script>
document.getElementById("signup-form").addEventListener("submit", function(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
localStorage.setItem("username", username);
localStorage.setItem("password", password);
alert("Account created successfully!");
 window.location.href = "login.html";
});
</script>
</body>

</html>

signup.css:-

/* signup.css */

body {
font-family: Arial, sans-serif;
background-image: url('login_img.png'); /* Background image */
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
}

.welcome-heading {
text-align: center;
margin-top: 50px;
color: #f7f1f1;
}

.signup-wrapper {
width: 400px;
margin: 0 auto;
background-color: rgba(233, 227, 227, 0.8); /* Background color with opacity */
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}

.form h2 {
margin-bottom: 20px;
color: #333;
text-align: center;
}

.input-group {
margin-bottom: 15px;
}

.input-group input[type="text"],
.input-group input[type="email"],
.input-group input[type="password"] {
width: 100%;
padding: 10px;
 border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}

.input-group input[type="text"]:focus,
.input-group input[type="email"]:focus,
.input-group input[type="password"]:focus {
outline: none;
border-color: #007bff;
}

.input-group label {
margin-left: 5px;
color: #666;
}

.submit-btn {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
width: 100%;
}

.submit-btn:hover {
background-color: #0056b3;
}

.forgot-password {
display: block;
margin-top: 10px;
color: #007bff;
text-decoration: none;
}

.forgot-password:hover {
text-decoration: underline;
}
 signup.php

<?php
$fullName = $_POST['fullName'];
$email = $_POST['email'];
$mobile = $_POST['mobile'];
$username = $_POST['username'];
$password = $_POST['password'];

$conn = new mysqli('localhost', 'root', '', 'bk_register');

if ($conn->connect_error) {
die('Connection Failed: ' . $conn->connect_error);
} else {
$stmt = $conn->prepare("INSERT INTO sign_up (full_name, email, mobile, username, password) VALUES (?, ?, ?, ?, ?)");
$stmt->bind_param("sssss", $fullName, $email, $mobile, $username, $password);

if ($stmt->execute()) {
echo "Signup Successful!!";
} else {
echo "Error: " . $stmt->error;
}

$stmt->close();
$conn->close();
}
?>
Home Page-
home.html:-

<!DOCTYPE html>
<html>

<head>
<title>Banking System</title>
<link rel="stylesheet" href="home.css">

<!-- Google fonts -->

<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&display=swap"
rel="stylesheet">

</head>

<body onload="loader()">
<!-- loader for splash screen -->

<div id="loading"></div>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img src=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>

</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">

<li class="nav-item">
<a class="nav-link" href="home.html">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="customer.html">View Customers & Transfer History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="bank.html">About Us</a>
</li>
</ul>
<img src="icons8-account-50.png" alt="User Icon" class="user-icon">
<img src="icons8-message-50.png" alt="Message Icon" class="message-icon">
<a href="http://127.0.0.1:3000/contact.html">

<img src="icons8-customer-support-50.png" alt="Customer Support Icon" class="customer-support-icon">

</a>

</div>
</nav>
</section>
<!--banner section-->
<section id="main" class="coloured-section">

<div class="container">
<h1>
<img
src="https://as2.ftcdn.net/jpg/01/32/11/13/500_F_132111352_vAiorf4ahmta4ZtPU9GCe8u9d1gXR3sC.jpg"
width="100px" height="100px">
Welcome to All Citizens Bank!!
<img
src="https://as2.ftcdn.net/jpg/01/32/11/13/500_F_132111352_vAiorf4ahmta4ZtPU9GCe8u9d1gXR3sC.jpg"
width="100px" height="100px">
</h1>
</div>
</section>
<section id="features" class="white-section">
<button type="button" class="btn btn-dark btn-lg download-button">
<h4>
<a class="btn2" href="btn1.html">
<h3>Make Safe Payment</h3>
</a>
</h4>
</button>
<br>
<br>
<button type="button" class="btn btn-dark btn-lg download-button text-button">
<h4>
<a class="btn1" href="btn2.html">How Can We Help You??</a>
</h4>

<!-- <h4 class="text">How Can We Help You??</h4> -->

</button>

<a class="btn3" href=""></a>

</button><br>
<br>
<a href="customer.html"><button type="button" class="btn btn-dark btn-lg download-button">View
Customers</button></a>
<a href="customer.html"><button type="button" class="btn btn-dark btn-lg download-button">Transaction
History</button></a>

</section>

<!-- Footer -->

<footer id="footer" class="coloured-section">
<p>FIND US ON SOCIAL MEDIA</p>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-facebook-square social-icon" aria-hidden="true"></i>
<i class="fa fa-instagram social-icon" aria-hidden="true"></i>
<i class="fa fa-twitter social-icon" aria-hidden="true"></i>
 <i class="fa fa-linkedin social-icon" aria-hidden="true"></i>
<p>Address- Near Life season Complex Shop NO 22,23,24,25 Jajpur,755001</p>
<p>© Copyright 2024</p>
</footer>
<script>

var preloader = document.getElementById("loading");

function loader() {

preloader.style.display = 'none';
}
function howCanWeHelp() {

window.location.href = 'home.html'; // Change 'help.html' to your actual help page

}

document.querySelector('.text-button').addEventListener('click', howCanWeHelp);
function logout() {

window.location.href = "login.html";
}

</script>
<script src="script.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
duration: 700,
});
</script>
</body>

</html>
 home.css:-
/* Reset some default styles */
body,
h1,
h2,
h3,
p{
margin: 0;
padding: 0;
}

body {
font-family: 'Montserrat', sans-serif;
background-image: url('bank_img.png');
background-size: cover; /* Cover the entire viewport */
background-position: center; /* Center the background image */
margin: 0;
padding: 0;
color: #fff;
/* Change text color to white */
}

/* Navbar styles */
#nav-bar {
background-color: #0b0a0a;
background-image: linear-gradient(to top, #173161 0%, #1e3c72 1%, #2a5298 100%);
padding: 10px 20px;
}

.navbar-brand img {
width: 50px;
margin-right: 10px;
vertical-align: middle;
}

.navbar-toggler {
color: #ffffff;
border-color: #ffffff;
}

.navbar-nav .nav-item {
margin-right: 15px;
}

.nav-link {
color: #ffffff !important;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
}

/* Banner section styles */

#main {
text-align: center;
padding: 50px 0;
}

#main h1 {
margin-bottom: 20px;
}

#main img {
border-radius: 20px;
box-shadow: 3px 5px 10px rgb(0, 0, 0);
}

/* Features section styles */

#features {
text-align: center;
padding: 50px 0;

.download-button {
margin-bottom: 10px;
}

/* Footer styles */
#footer {
text-align: center;
padding: 20px 0;
color: #fff;
background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
margin-top: 50px;
/* Increase top margin for spacing */
}

.social-icon {
margin: 0 10px;
font-size: 24px;
color: #fff;
}

.btn1 {
text-decoration: none;
color: rgb(255, 255, 255);
}

.btn2 {
text-decoration: none;
color: rgb(255, 255, 255);
}
.container{
color: rgb(255, 255, 255);
font-family: 'Times New Roman', Times, serif;
}
/* Styling for the buttons */
.download-button {
margin-bottom: 10px;
border-radius: 10px; /* Adjust border radius for smaller buttons */
padding: 8px 16px; /* Adjust padding for smaller buttons */
background-color: #1025a9; /* Change button color to black */
border: none;
color: #fff; /* Change text color to white */
font-size: 12px; /* Adjust font size for smaller buttons */
transition: background-color 0.3s;
text-decoration: none; /* Remove default link underline */
display: inline-block; /* Make buttons display inline */
}

.download-button:hover {
background-color: #1b5aa3; /* Darken button color on hover */
}

/* Styling for the text inside buttons */

.download-button h3 {
margin: 0; /* Remove default margin */
}

/* Adjust spacing between buttons */

#features .download-button {
margin-right: 10px;
}

/* Remove extra buttons */

#features .download-button:last-child {
margin-right: 0;
}
.user-icon,
.customer-support-icon,
.message-icon {
position: absolute;
top: 15px; /* Adjust top position as needed */
}

.user-icon {
right: 30px; /* Adjust right position as needed */
width: 30px; /* Adjust width as needed */
height: auto; /* Maintain aspect ratio */
}

.customer-support-icon {
right: 80px; /* Adjust right position as needed */
width: 30px; /* Adjust width as needed */
height: auto; /* Maintain aspect ratio */
}

.message-icon {
right: 140px;
 width: 30px;
height: auto;
}
.customer-support-icon:hover{
cursor: pointer;
}
/* Add this CSS at the bottom of your CSS file */

.logout-button {
position: fixed;
top: 67px;
right: 30px;
padding: 10px 20px;
background-color: #1f25cb;
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
z-index: 1000; /* Ensure it's above other elements */
}

.logout-button:hover {
background-color: #0056b3;
}

Customer Page-
customer.html:-

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customers</title>
<link rel="stylesheet" href="customer.css">
<link rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css">
<!-- <link rel="stylesheet" href="customer.css"> -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
</head>

<body>
<!-- navbar starts here -->
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img src=""></a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"

aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<!-- <a class="nav-link text-white" href="/">Home <span class="sr-only">(current)</span></a>-->
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="customer.html">View Customers & Transfer History<span
class="sr-only">(current)</span></a>
</li>

<li class="nav-item">
<a class="nav-link" href="bank.html">About Us</a>
</li>
</ul>
</div>
</nav>
</section>
<!-- navbar ends here -->
<section id="main" class="coloured-section">
<hr>
<br>
<hr>
<div class="my-info text-center">
<button class="btn btn-info" data-toggle="modal" data-target="#sendMoney">Send Money</button>
<a class="btn btn-info" href="history.html" data-toggle="modal" data-target="#transactionHistory">See
All
Transactions</a>
</div>
<!-- Modal send money -->

<div class="modal fade" id="sendMoney" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"

aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Send Money</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form action="">
<div class="input-group mb-3">
<input type="text" id="enterSName" class="form-control" placeholder="Sender's username"
aria-label="Sender's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@email.com</span>
 </div>
</div>

<div class="input-group mb-3">

<input type="text" id="enterName" class="form-control"
placeholder="Recipient's username" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@email.com</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Rs</span>
</div>
<input type="text" id="enterAmount" class="form-control" placeholder=" Enter Amount"
aria-label="Amount">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button type="button" onclick="sendMoney()" class="btn btn-success" data-dismiss="modal">Send

Money</button>
</div>
</div>
</div>
</div>
<!-- Modal transaction History-->
<div class="modal fade" id="transactionHistory" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Transaction History</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<ol id="transaction-history-body">
</ol>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
 </div>

<!-- table -->

<div class="container">
<div class="table-responsive">
<table class="table table-hover table-bordered table-danger">
<thead>
<tr class="table-info">
<th scope="col">SR. No.</th>
<th scope="col">Name</th>
<th scope="col">E-mail ID</th>
<th scope="col">Bank Balance</th>
</tr>
</thead>
<tbody>
<tr class="table-light">
<td scope="row">1</td>
<td>Sameer</td>
<td>[email protected]</td>
<td>
<p id="shreyasBankBalance">5000</p>
</td>
</tr>
<tr class="table-danger">
<td scope="row">2</td>
<td>Abinash</td>
<td>[email protected]</td>
<td>
<p id="yogitaBankBalance">100000</p>
</td>
</tr>
<tr class="table-light">
<td scope="row">3</td>
<td>Tapas</td>
<td>[email protected]</td>
<td>
<p id="amrutaBankBalance">10000</p>
</td>
</tr>
<tr class="table-danger">
<td scope="row">4</td>
<td>Sarthak</td>
<td>[email protected]</td>
<td>
<p id="poojaBankBalance">2500</p>
</td>
</tr>
<tr class="table-light">
<td scope="row">5</td>
<td>Bishnu</td>
<td>[email protected]</td>
<td>
 <p id="sayaliBankBalance">6000</p>
</td>
</tr>
<tr class="table-danger">

<td scope="row">6</td>
<td>Jay</td>
<td>[email protected]</td>
<td>
<p id="jayBankBalance">15000</p>
</td>
</tr>
<tr class="table-light">
<td>7</td>
<td>Prathamesh</td>
<td>[email protected]</td>
<td>
<p id="prathameshBankBalance">8500</p>
</td>
</tr>
<tr class="table-danger">
<td scope="row">8</td>
<td>Sid</td>
<td>[email protected]</td>
<td>
<p id="sidBankBalance">9200</p>
</td>
</tr>
<tr class="table-light">
<td scope="row">9</td>
<td>Payal</td>
<td>[email protected]</td>
<td>
<p id="payalBankBalance">4250</p>
</td>
</tr>
<tr class="table-danger">
<td scope="row">10</td>
<td>Shivam</td>
<td>[email protected]</td>
<td>
<p id="shivamiBankBalance">60000</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<script src="customer.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap-material-
 design.js"></script>
</body>

</html>

customer.css:-
/* Reset some default styles */
body,
h1,
h2,
h3,
p{
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: 'Roboto', sans-serif;
background-color: #ffffff00;
color: #000000;
}

/* Navbar styles */
#nav-bar {
background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
}

.navbar {
padding: 15px 20px;
}

.navbar-brand img {
/* Add your logo styling */
}

.navbar-toggler {
color: #000000;
}

.navbar-nav .nav-item {
margin-right: 15px;
}

.nav-link {
color: #000000 !important;
}

/* Main section styles */

#main {
text-align: center;
padding: 50px 0;
 }

.my-info {
margin-top: 20px;
}

/* Modal styles */
.modal-content {
border-radius: 10px;
}

.modal-title {
font-family: 'Sansita Swashed', cursive;
}

.modal-body form {
margin-bottom: 20px;
}

/* Table styles */
.table {
margin-top: 30px;
}

.table thead {
background-color: #17a2b8;
color: #000000;
}

.table th,
.table td {
text-align: center;
}

.table-light,
.table-light td,
.table-light th {
background-color: #075baf;
}

.table-danger,
.table-danger td,
.table-danger th {
background-color: #b61616;
color: #000000;
}

/* Media queries for responsiveness */

@media (max-width: 768px) {
.navbar-toggler {
color: #000000;
}
 .navbar-nav .nav-item {
margin-right: 0;
margin-bottom: 10px;
}
}

customer.js:-

function sendMoney() {
var senderUsername = document.getElementById('enterSName').value;
var recipientUsername = document.getElementById('enterName').value;
var amount = document.getElementById('enterAmount').value;

// Perform validation (you may add more validation as needed)

if (senderUsername && recipientUsername && amount) {
// Perform the transaction logic (you may add your logic here)
// For demonstration purposes, let's just display a success message
var successMessage = `Transaction successful!\n${senderUsername} sent Rs.${amount} to
${recipientUsername}`;
alert(successMessage);

// Update and display transaction history

updateTransactionHistory(senderUsername, recipientUsername, amount);

// Clear input fields

document.getElementById('enterSName').value = '';
document.getElementById('enterName').value = '';
document.getElementById('enterAmount').value = '';
} else {
alert('Please fill in all fields before sending money.');
}
}

function updateTransactionHistory(sender, recipient, amount) {

var transactionHistoryList = document.getElementById('transaction-history-body');
var listItem = document.createElement('li');
listItem.textContent = `${sender} sent Rs.${amount} to ${recipient}`;
transactionHistoryList.appendChild(listItem);
}
Apply Loan Page -
app_loan.html:-

<!DOCTYPE html>
<html lang="en">
<head>
<title>Loan Application</title>
<link rel="stylesheet" href="apply.css">
</head>
<body>
<header>
<h1>Apply for a Loan</h1>
</header>
<main>
<section class="loan-application">
<h2>Loan Application Form</h2>
<form id="loan-form" action="apply.php" method="POST" onsubmit="return displaySuccess()">
<div class="form-group">
<label for="full-name">Full Name:</label>
<inputtype="text" id="full-name" name="fullName" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
</div>
<div class="form-group">
<label for="pan-card">PAN Card:</label>
<input type="text" id="pan-card" name="panCard" required>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
</div>
<div class="form-group">
<label for="occupation">Occupation:</label>
<select id="occupation" name="occupation" required>
<option value="">Select Occupation</option>
<option value="Employed">Employed</option>
<option value="Self-Employed">Self-Employed</option>
<option value="Student">Student</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
<label for="loan-amount">Loan Amount:</label>
<inputtype="number" id="loan-amount" name="loanAmount" required>
</div>
 <div class="form-group">
<label for="loan-purpose">Loan Purpose:</label>
<textarea id="loan-purpose" name="loanPurpose" required></textarea>
</div>
<button type="submit">Submit Application</button>
</form>
</section>
</main>
<footer>
<p>&copy; 2024 All Citizens Bank. All rights reserved.</p>
</footer>
</body>
</html>

app_loan.css:-
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header, footer {
background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
color: #fff;
text-align: center;
padding: 20px 0;
}

main {
min-height: calc(100vh - 140px);
padding: 20px;
}

.loan-application {
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}

.loan-application h2 {
color: #333;
}

.form-group {
 margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 5px;
}

.form-group input,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

footer {
background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
color: #fff;
text-align: center;
padding: 20px 0;
height: 60px;
}-

app_loan.php:-

<?php
$fullName = $_POST['fullName'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$panCard = $_POST['panCard'];
$dob = $_POST['dob'];
 $occupation = $_POST['occupation'];

$loanAmount = $_POST['loanAmount'];
$loanPurpose = $_POST['loanPurpose'];

$conn = new mysqli('localhost', 'root', '', 'bk_register');

if ($conn->connect_error) {
die('Connection Failed: ' . $conn->connect_error);
} else {
$stmt = $conn->prepare("INSERT INTO loan_applications (full_name, email, phone, pan_card, dob, occupation,
loan_amount, loan_purpose) VALUES (?, ?, ?, ?, ?, ?, ?, ?)");
$stmt->bind_param("ssssssis", $fullName, $email, $phone, $panCard, $dob, $occupation, $loanAmount,
$loanPurpose);

if ($stmt->execute()) {
echo "<script>";
echo "alert('Successfully Applied');";
echo "window.location.href = 'apply.html';";
echo "</script>";
} else {
echo "Error: " . $stmt->error;
}

$stmt->close();
$conn->close();
}
?>

Apply credit card page -

apply_card.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apply for a Credit Card - Internet Banking</title>
<link rel="stylesheet" href="card.css">
</head>
<body>

<header>
<h1>Apply for a Credit Card</h1>
</header>

<main>
<section class="credit-card-application">
<h2>Credit Card Application Form</h2>
<form id="credit-card-form" action="card.php" method="POST">
<div class="form-group">
<label for="full-name">Full Name:</label>
<inputtype="text" id="full-name" name="fullName" required>
</div>
 <div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
</div>
<div class="form-group">
<label for="pan-card">PAN Card:</label>
<input type="text" id="pan-card" name="panCard" required>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
</div>
<div class="form-group">
<label for="occupation">Occupation:</label>
<select id="occupation" name="occupation" required>
<option value="">Select Occupation</option>
<option value="Employed">Employed</option>
<option value="Self-Employed">Self-Employed</option>
<option value="Student">Student</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
<label for="annual-income">Annual Income:</label>
<inputtype="number" id="annual-income" name="annualIncome" required>
</div>
<div class="form-group">
<label for="credit-limit">Desired Credit Limit:</label>
<input type="number" id="credit-limit" name="creditLimit" required>
</div>
<button type="submit">Submit Application</button> <!-- Changed type to submit -->
</form>
</section>
</main>

<footer>
<p>&copy; 2024 All Citizens Bank. All rights reserved.</p>
</footer>

</body>
</html>

apply_card.css:-
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
 background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
color: #fff;

text-align: center;
padding: 20px 0;
}
main {
min-height: calc(100vh - 140px); /* Adjusted height to accommodate header and footer */
padding: 20px;
}

.credit-card-application {
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}

.credit-card-application h2 {
color: #333;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}
footer {
background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
color: #fff;
text-align: center;
padding: 20px 0;
 height: 60px;
}

apply_card.php:-
<?php
$fullName = $_POST['fullName'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$panCard = $_POST['panCard']; // Adding PAN Card field
$dob = $_POST['dob']; // Adding Date of Birth field
$occupation = $_POST['occupation']; // Adding Occupation field
$annualIncome = $_POST['annualIncome'];
$creditLimit = $_POST['creditLimit'];

$conn = new mysqli('localhost', 'root', '', 'bk_register');

if ($conn->connect_error) {
die('Connection Failed: ' . $conn->connect_error);
} else {
$stmt = $conn->prepare("INSERT INTO credit_card_applications (full_name, email, phone, pan_card, dob, occupation,
annual_income, credit_limit) VALUES (?, ?, ?, ?, ?, ?, ?, ?)");
$stmt->bind_param("ssssssid", $fullName, $email, $phone, $panCard, $dob, $occupation, $annualIncome,
$creditLimit);

if ($stmt->execute()) {
echo "<script>";
echo "alert('Successfully Applied');";
echo "window.location.href = 'card.html';";
echo "</script>";
} else {
echo "Error: " . $stmt->error;
}

$stmt->close();
$conn->close();
}
?>
 Open New Account –
open_account.html:-
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open New Account - Internet Banking</title>
<link rel="stylesheet" href="open_account.css">
</head>

<body>

<header>
<h1>Open New Account</h1>
</header>

<main>
<section class="new-account-form">
<h2>New Account Application Form</h2>
<form id="account-form" action="openaccount.php" method="POST">
<div class="form-group">
<label for="full-name">Full Name:</label>
<input type="text" id="full-name" name="fullName" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
</div>
<div class="form-group">
<label for="account-type">Account Type:</label>
<select id="account-type" name="accountType" required>
<option value="savings">Savings Account</option>
<option value="current">Current Account</option>
</select>
</div>
<div class="form-group">
<label for="initial-deposit">Initial Deposit:</label>
<input type="number" id="initial-deposit" name="intialDeposit" required>
</div>
<button type="submit">Submit Application</button>
</form>
</section>
</main>
 <footer>
<p>&copy; 2024 All Citizens Bank. All rights reserved.</p>
</footer>

</body>

</html>

open_account.css:-
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header,
footer {
background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
color: #fff;
text-align: center;
padding: 20px 0;
}

main {
padding: 20px;
}

.new-account-form {
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}

.new-account-form h2 {
color: #333;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 5px;
}

.form-group input,
.form-group select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
 button {
background-color: #007bff;
color: #fff;
border: none;

padding: 10px 20px;

border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

footer {
position: fixed;
bottom: 0;
width: 100%;
}
open_account.php:-

<?php
$fullName = $_POST['fullName'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$intialDeposit = $_POST['intialDeposit']; // Corrected variable name

$conn = new mysqli('localhost', 'root', '', 'bk_register');

if ($conn->connect_error) {
die('Connection Failed: ' . $conn->connect_error);
} else {
$stmt = $conn->prepare("INSERT INTO new_accounts (full_name, email, phone, intial_deposite) VALUES (?, ?, ?,
?)");
$stmt->bind_param("ssii", $fullName, $email, $phone,$intialDeposit );

if ($stmt->execute()) {
echo "<script>";
echo "alert('Your Details Are Submitted');";
echo "window.location.href = 'card.html';";
echo "</script>";
} else {
echo "Error: " . $stmt->error;
}

$stmt->close();
$conn->close();
}
?>
Contact Page -
contact.html:-
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Information - Internet Banking</title>
<link rel="stylesheet" href="contact.css">
</head>

<body>
<header>
<h1>Contact Information</h1>
</header>

<main>
<section class="contact-info">
<h2>Customer Support</h2>
<p>If you have any questions or need assistance, feel free to contact our customer support team.</p>
<ul>
<li>Email: <a href="mailto:[email protected]">[email protected]</a></li>
<li>Phone: 1-800-123-4567</li>
<li>Address: 123 Bank Street, Jajpur, Odisha</li>
</ul>
</section>

<section class="feedback-form">
<h2>Send us your feedback</h2>
<form id="feedback-form" action="contact.php" method="post">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Your Email:</label>
<input type="email" id="email" name="email" required>
<label for="feedback">Your Feedback:</label>
<textarea id="feedback" name="feedback" rows="4" required></textarea>
<button type="submit">Submit Feedback</button>
</form>
</section>
</main>

<footer>
 <p>&copy; 2024 All Citizens Bank. All rights reserved.</p>
</footer>

</body>

</html>

contact.css:-
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header,
footer {
background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
color: #fff;
text-align: center;
padding: 20px 0;
}

main {
padding: 20px;
}

.contact-info {
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
margin-bottom: 30px;
}

.contact-info h2 {
color: #333;
}

.contact-info ul {
list-style: none;
padding: 0;
}

.contact-info ul li {
margin-bottom: 10px;
}

.contact-info a {
color: #007bff;
text-decoration: none;
}
.contact-info a:hover {
text-decoration: underline;
}
.feedback-form {
background-color: #f9f9f9;

padding: 20px;
border-radius: 8px;
}

.feedback-form h2 {
margin-bottom: 10px;
color: #1e3c72;
}

.feedback-form label {
display: block;
margin-bottom: 5px;
}

.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

.feedback-form button {
padding: 10px 20px;
background-color: #1e3c72;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

.feedback-form button:hover {
background-color: #0056b3;
}

.feedback-form {
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
}

.feedback-form h2 {
margin-bottom: 10px;
color: #1e3c72;
}
.feedback-form label {
display: block;
margin-bottom: 5px;
}

.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

.feedback-form button {
padding: 10px 20px;
background-color: #1e3c72;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

.feedback-form button:hover {
background-color: #0056b3;
}

contact.php:-
<?php
$fullName = $_POST['fullName'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$panCard = $_POST['panCard']; // Adding PAN Card field
$dob = $_POST['dob']; // Adding Date of Birth field
$occupation = $_POST['occupation']; // Adding Occupation field
$annualIncome = $_POST['annualIncome'];
$creditLimit = $_POST['creditLimit'];

$conn = new mysqli('localhost', 'root', '', 'bk_register');

if ($conn->connect_error) {
die('Connection Failed: ' . $conn->connect_error);
} else {
$stmt = $conn->prepare("INSERT INTO credit_card_applications (full_name, email, phone, pan_card, dob, occupation,
annual_income, credit_limit) VALUES (?, ?, ?, ?, ?, ?, ?, ?)");
$stmt->bind_param("ssssssid", $fullName, $email, $phone, $panCard, $dob, $occupation, $annualIncome,
$creditLimit);
if ($stmt->execute()) {
echo "<script>";
echo "alert('Successfully Applied');";
echo "window.location.href = 'card.html';";
echo "</script>";
 } else {
echo "Error: " . $stmt->error;
}
$stmt->close();
$conn->close();
?>

Make Safe Payment Button -

btn1.html:-
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Safe Payment Awareness</title>
<link rel="stylesheet" href="btn1.css">
</head>

<body>
<header>
<h1>Why should I Enable Safe Pay?</h1>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="home.html">Home<span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="customer.html">View Customers & Transfer History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="bank.html">About Us</a>
</li>
</ul>
</div>
</header>

<main>
<div class="container">
<h2>Tips for Safe Payment</h2>
<div class="tips">
<div class="tip">
<h3>Use Secure Websites</h3>
<p>Always ensure that you are making payments on secure websites. Look for HTTPS in the URL and a padlock
icon in the address bar.</p>
</div>
<div class="tip">
<h3>Avoid Public Wi-Fi</h3>
<p>Avoid making payments while connected to public Wi-Fi networks. They may not be secure, and your
 sensitive information could be intercepted.</p>
</div>
<div class="tip">
<h3>Use Strong Passwords</h3>
<p>Use strong, unique passwords for your accounts and payment services. Avoid using easily guessable
passwords or reusing passwords across multiple sites.</p>
</div>
<div class="tip">
<h3>Be Cautious of Phishing</h3>
<p>Be cautious of phishing attempts. Do not click on suspicious links in emails or messages, and never
provide your payment information unless you are sure of the recipient's authenticity.</p>
</div>
</div>
</div>
</main>

<footer>
<p>Stay Safe, Stay Secure</p>
</footer>
</body>

</html>
btn1.css:-
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}

header {
background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
color: white;
padding: 20px;
text-align: center;
font-style: oblique;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 15px;
}

main {
margin: 20px;
}

.container {
max-width: 800px;
margin: auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.tips {
margin-bottom: 20px;
 }

.tip {
background-color: #f8f9fa;
border-left: 5px solid #007bff;
padding: 10px;
margin-bottom: 10px;

.tip h3 {
margin-top: 0;
}

.tip p {
margin-bottom: 0;
}

footer {
background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 15px;
}
.nav-link{
color: white;
text-decoration: none;
display: flex;

}
a{
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

btn2.html:-
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bank - How can we help you?</title>
<link rel="stylesheet" href="btn2.css">
</head>

<body>
<header>
<h1>Welcome to All Citizens Bank</h1>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="home.html">Home<span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="customer.html">View Customers & Transfer History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="bank.html">About Us</a>
</li>
</ul>
</div>

</header>

<main>
<div class="container">
<h2>How can we help you today?</h2>
<div class="options">
<div class="option" onclick="window.location.href='apply.html'">Apply for a Loan</div>
<div class="option" onclick="window.location.href='open_account.html'">Open a New Account</div>
<div class="option" onclick="window.location.href='contact.html'">Contact Us &nbsp &nbsp &nbsp &nbsp
</div>
<div class="option" onclick="window.location.href='card.html'">Apply for credit card </div>
<!-- Add more options as needed -->
</div>
</div>
</main>

<footer>
<p>Thank you for choosing our bank</p>
</footer>
</body>

</html>
btn2.css:-
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}

header {
background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);

color: #ecf0f1;
text-align: center;
padding: 20px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}
h1{
color: rgb(205, 188, 188);
}

main {
margin: 20px;
text-align: center;
}

.container {
max-width: 600px;

margin: auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

h1 {
margin-bottom: 20px;
color: #ffffff;
}

.options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
justify-items: center;
}

.option {
padding: 20px;
background-color: #3498db;
color: #ecf0f1;
border-radius: 8px;
transition: background-color 0.3s ease;
cursor: pointer;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}

.option:hover {
background-color: #2980b9;
}

footer {
background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
color: #ecf0f1;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
.nav-link{
text-decoration: none;
color: white;
display: flex;
 }

Emi Calculator Page -

emi.html:-
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Loan EMI Calculator</title>
<link rel="stylesheet" href="emi.css">
<style>
/* Styles for the buttons */
.top-buttons {
position: absolute;
top: 10px;
right: 10px;
}

/* Additional style for spacing between buttons */

.top-buttons button {
margin-left: 10px;
}

/* Styles for the heading */

.emi-heading {
text-align: center;
}
</style>
</head>

<body>
<!-- Button container for Contact Us, About Us, and Home buttons -->
<div class="top-buttons">
<button class="page-button" onclick="redirectToHome()">Home</button>
<button class="page-button" onclick="redirectToAboutUsPage()">About Us</button>
<button class="page-button" onclick="redirectToContactUsPage()">Contact Us</button>
</div>

<h2 class="emi-heading">Personal Loan EMI Calculator</h2>

<div class="calculator">
<label for="loanAmount" class="title1">Loan Amount (in Rs.):</label>
<input type="number" id="loanAmount" placeholder="Enter Loan Amount" required>
<label for="interestRate" class="title2">Annual Interest Rate (%):</label>
<input type="number" id="interestRate" placeholder="Enter Annual Interest Rate" required>
<label for="loanTenure" class="title3">Loan Tenure (in months):</label>
<input type="number" id="loanTenure" placeholder="Enter Loan Tenure" required>
<button onclick="calculateEMI()">Calculate EMI</button>
<div id="emiResult"></div>
</div>
 <script>
function calculateEMI() {
var loanAmount = parseFloat(document.getElementById("loanAmount").value);
var interestRate = parseFloat(document.getElementById("interestRate").value) / 100 / 12; // Monthly
interest rate
var loanTenure = parseFloat(document.getElementById("loanTenure").value);

// Calculate EMI
var emi = (loanAmount * interestRate * Math.pow(1 + interestRate, loanTenure)) / (Math.pow(1 +
interestRate, loanTenure) - 1);

// Display result
document.getElementById("emiResult").innerHTML = "Your EMI: Rs. " + emi.toFixed(2);
}

// Function to redirect to About Us page

function redirectToAboutUsPage() {
window.location.href = "bank.html";
}

// Function to redirect to Contact Us page

function redirectToContactUsPage() {
window.location.href = "contact.html";
}

// Function to redirect to Home page

function redirectToHome() {
window.location.href = "login.html";
}
</script>
</body>

</html>
emi.css:-
body {
font-family: Arial, sans-serif;
background-image: url('login_img.png');
background-size: cover;
background-position: center;
margin: 0;
padding: 0;

display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}

.calculator {

background-color: rgba(234, 221, 221, 0.9);

padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(80, 78, 78, 0.1);
max-width: 400px;
width: 100%;
text-align: center;
}

label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}

input {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

#emiResult {
margin-top: 20px;
font-weight: bold;
font-size: 18px;
}
.emi-heading{
color: #fff;

margin-bottom: 20px;

}
.title1,.title2,.title3{
color: rgb(37, 34, 34);
}
 About us Page -
bank.html:-
<html>

<head>
<title>Bank Information</title>
src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&display=swap" rel="stylesheet">
</head>

<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img src=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"="true"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">

<a class="nav-link" href="login.html">Home</a>

</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>

<li class="nav-item">
<a class="nav-link" href="bank.html">About Us<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</section>

<section id="action" class="coloured-section">

<h1 class="title">"Our Extra Facilities!!"</h1>
</section>
<section id="features1" class="white-section">
<div class="row text-center">
<div class="feature-boxes col-lg-4 col-md-6">

<h3 class="feature-title">Do banking in just single click</h3>

<p>You can check your transaction easily by one click</p>
</div>
<div class="feature-boxes col-lg-4 col-md-6">
<h3 class="feature-title">Check your Transaction</h3>
 <p>We provide you best and secure networks to work.</p>
</div>

<div class="feature-boxes col-lg-4 col-md-6">

<h3 class="feature-title">We are here for a service of trust.</h3>
<p>Send your money easily from anywhere.</p>
</div>
</div>
</section>

<!---Action -->
<footer id="footer" class="coloured-section">
<p>FIND US ON SOCIAL MEDIA</p>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-facebook-square social-icon" aria-hidden="true"></i>
<i class="fa fa-instagram social-icon" aria-hidden="true"></i>
<i class="fa fa-twitter social-icon" aria-hidden="true"></i>
<i class="fa fa-linkedin social-icon" aria-hidden="true"></i>
<p>Address- N.C College, Jajpur-755001
<p>
<p>© Copyright 2024</p>
</footer>
</body>

</html>
bank.css:-
*{
margin: 0;
padding: 0;
}

body {
background-image: url("https://www.doughroller.net/wp-content/uploads/201…/largest-banks in-the-world-
648x364-c-default.jpg");
font-family: sans-serif;
}

#nav-bar {
background-color: #1b021bea;
position: sticky;
top: 0;
z-index: 10;
float: right;

.nav-link:hover {
background-color: rgb(10, 49, 134);
}

.navbar {
padding: 0 !important;
}
 navbar-brand img {
height: 40px;
padding-left: 20px;
}

.navbar-nav li {
padding: 0 10px;
}

.navbar-nav li a {
color: #fff !important;
font-weight: 600;
float: right;
text-align: left;
}

.fa-bars {
color: #fd0932;
font-size: 30p !important;
}

.navbar-toggler {
outline: none !important;
}

/*---banner section--*/
#main {
text-align: center;
background-color: rgb(175, 75, 122);
color: #fff;
padding-top: 10%;
}
.container h1 img {
padding-bottom: 10px;
}
#features1 {
text-align: center;
padding: 10% 15%;
}
#features {
text-align: center;
padding: 10% 15%;

background-image: url('file:///C:/Users/hp/Desktop/imgres.htm');

}
.features1 h3 {
padding: 5px;
margin-top: 25px;
text-transform: uppercase;
}
.features h3 {
 padding: 5px;
margin-top: 25px;
text-transform: uppercase;
}
.title::before {
content: '';
background: #e9ec40;
height: 5px;
width: 600px;
margin-left: auto;
margin-right: auto;

display: block;
transform: translatey(63px);
}

.title::after {
content: '';
background: #e3e709;
height: 10px;
width: 50px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
display: block;
transform: translatey(8px);
}

#features .btn-primary {
box-shadow: none;
padding: 10px 25px;
border: none;
align-content: center;
background-image: linear-gradient(to right, #9cba17, #5ed7e7)
}

#action {
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
padding: 7% 15%;
text-align: center;
line-height: 1.5;
color: rgb(250, 246, 246);
}
.main {
font-size: 3rem;
line-height: 1.5;

padding: 10px 0px;

}

.fa {

padding: 20px;

font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}

#footer {
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
color: #fff;
padding: 4% 25%;
text-align: center;
}
9. Reference & Appendices

BOOKS REFERRED

The following books were used extensively for the project development and
implementation.

• Kalen Delaney: “Inside MS SQL Server 2005/2008”

• James A. Sam : “Database Management System”

• Roger S. Pressman : "Software Engineering”

• James Hoffman: “Introduction to Structured Query Language”,4th

Edition

• John Stubbe, Marvin Gore: “ Elements of System Analysis”

WEBSITES REFERRED

The following links were searched and exploited extensively for the project
development andimplementation.

• http://www.w3schools.com/aspnet/default.asp
• http://www.w3schools.com/sql/default.asp
10. Conclusion

This project was successfully completed within the time span allotted.
The project Online Banking has been developed in asp.net. All the
modules are tested separately and put together to form the main system.
Finally the system is tested with real data and everything worked
successfully. Thus the system has fulfilled the entire objective identified.

The system had been developed in an attractive dialogs fashion. So user

with minimum knowledge about computers can also operate the system
easily. It will make easy interactions between users and store. The speed
and accuracy are maintained in proper way.