[Link] a Web Application using HTML, CSS, and [Link] inside Apache NetBeans.
Step 1: Install [Link]
1. Download [Link] (LTS version) from [Link]
2. Install it on your system.
3. Verify installation in terminal/command prompt:
Bash :
node -v
npm -v
Step 2: Create Project in NetBeans
1. Open Apache NetBeans.
2. Go to File → New Project → [Link] Application.
o If [Link] project option is not visible, install the [Link] plugin in NetBeans.
3. Project Name: BankNodeApp.
4. Finish.
Step 3: Initialize [Link] Project
1. In NetBeans, open the Terminal (bottom panel).
2. Navigate to your project folder.
3. Run:
Bash:
npm init -y
This creates a [Link] file.
Step 4: Install [Link]
Express is the framework we’ll use for the backend.
Bash:
npm install express
Step 5: Create Server File
1. In NetBeans, right-click project → New File → JavaScript File → Name: [Link].
2. Paste this code:
const express = require("express");
const path = require("path");
const app = express();
const PORT = 3000;
// Middleware
[Link]([Link]());
[Link]([Link]([Link](__dirname, "public")));
// In-memory accounts
let accounts = [
{ accountNo: 1001, holderName: "Rahul", balance: 5000 },
{ accountNo: 1002, holderName: "Anita", balance: 7500 }
];
// CRUD Endpoints
[Link]("/api/accounts", (req, res) => [Link](accounts));
[Link]("/api/accounts", (req, res) => {
[Link]([Link]);
[Link]({ status: "Account Added" });
});
[Link]("/api/accounts/:accountNo", (req, res) => {
let accNo = parseInt([Link]);
let index = [Link](a => [Link] === accNo);
if (index !== -1) {
accounts[index] = [Link];
[Link]({ status: "Account Updated" });
} else {
[Link]({ status: "Account Not Found" });
});
[Link]("/api/accounts/:accountNo", (req, res) => {
let accNo = parseInt([Link]);
accounts = [Link](a => [Link] !== accNo);
[Link]({ status: "Account Deleted" });
});
// Transactions
[Link]("/api/accounts/:accountNo/deposit", (req, res) => {
let accNo = parseInt([Link]);
let amount = [Link];
let acc = [Link](a => [Link] === accNo);
if (acc) {
[Link] += amount;
[Link]({ status: "Deposit Successful", balance: [Link] });
} else {
[Link]({ status: "Account Not Found" });
});
[Link]("/api/accounts/:accountNo/withdraw", (req, res) => {
let accNo = parseInt([Link]);
let amount = [Link];
let acc = [Link](a => [Link] === accNo);
if (acc && [Link] >= amount) {
[Link] -= amount;
[Link]({ status: "Withdraw Successful", balance: [Link] });
} else {
[Link]({ status: "Insufficient Balance or Account Not Found" });
});
[Link](PORT, () => [Link](`Server running at [Link]
Step 6: Create Frontend Files
1. Inside project, create a folder: public.
2. Add three files: [Link], [Link], [Link].
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Bank Web App</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h2>Bank Account Management</h2>
<div>
<h3>Add Account</h3>
<input id="addAccNo" placeholder="Account No">
<input id="addName" placeholder="Holder Name">
<input id="addBalance" placeholder="Balance">
<button onclick="addAccount()">Add</button>
</div>
<div>
<h3>Deposit</h3>
<input id="depAccNo" placeholder="Account No">
<input id="depAmount" placeholder="Amount">
<button onclick="deposit()">Deposit</button>
</div>
<div>
<h3>Withdraw</h3>
<input id="wdAccNo" placeholder="Account No">
<input id="wdAmount" placeholder="Amount">
<button onclick="withdraw()">Withdraw</button>
</div>
<div>
<h3>All Accounts</h3>
<button onclick="viewAccounts()">View</button>
<table border="1">
<thead>
<tr><th>Account No</th><th>Holder Name</th><th>Balance</th></tr>
</thead>
<tbody id="accountTable"></tbody>
</table>
</div>
<script src="[Link]"></script>
</body>
</html>
[Link]
body {
font-family: Arial, sans-serif;
margin: 20px;
h2 {
color: darkblue;
input {
margin: 5px;
padding: 5px;
}
button {
margin: 5px;
padding: 5px 10px;
table {
margin-top: 10px;
width: 50%;
[Link]
async function addAccount() {
let data = {
accountNo: parseInt([Link]("addAccNo").value),
holderName: [Link]("addName").value,
balance: parseFloat([Link]("addBalance").value)
};
let res = await fetch("/api/accounts", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: [Link](data)
});
alert((await [Link]()).status);
async function deposit() {
let accNo = [Link]("depAccNo").value;
let amount = parseFloat([Link]("depAmount").value);
let res = await fetch(`/api/accounts/${accNo}/deposit`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: [Link]({ amount })
});
alert((await [Link]()).status);
async function withdraw() {
let accNo = [Link]("wdAccNo").value;
let amount = parseFloat([Link]("wdAmount").value);
let res = await fetch(`/api/accounts/${accNo}/withdraw`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: [Link]({ amount })
});
alert((await [Link]()).status);
async function viewAccounts() {
let res = await fetch("/api/accounts");
let accounts = await [Link]();
let table = [Link]("accountTable");
[Link] = "";
[Link](acc => {
[Link] += `<tr><td>${[Link]}</td><td>${[Link]}</td><td>${[Link]}</
td></tr>`;
});
Step 7: Run the Application in NetBeans
1. In NetBeans, open Terminal.
2. Run:
bash
node [Link]
3. Open browser:
Code
[Link]
4. Test operations:
o Add new account.
o Deposit money.
o Withdraw money.
o View all accounts in table.
[Link] a complete Banking Web Application with login + user registration + CRUD + deposit/withdraw in
Apache NetBeans
Step 1: Install [Link]
1. Download [Link] (LTS version) from [Link]
2. Install it.
3. Verify installation in terminal:
Bash :
node -v
npm -v
Step 2: Create Project in NetBeans
1. Open Apache NetBeans.
2. File → New Project → [Link] Application.
o If [Link] option is missing, install the [Link] plugin in NetBeans.
3. Project Name: BankNodeApp.
4. Finish.
Step 3: Initialize [Link] Project
1. In NetBeans, open the Terminal.
2. Navigate to your project folder.
3. Run:
Bash:
npm init -y
→ Creates [Link].
Step 4: Install [Link]
Bash:
npm install express
Step 5: Create Server File
Right-click project → New File → JavaScript File → Name: [Link].
const express = require("express");
const path = require("path");
const app = express();
const PORT = 3000;
[Link]([Link]());
[Link]([Link]([Link](__dirname, "public")));
// Dummy users
let users = [
{ username: "admin", password: "1234" },
{ username: "rahul", password: "pass" }
];
// In-memory accounts
let accounts = [
{ accountNo: 1001, holderName: "Rahul", balance: 5000 },
{ accountNo: 1002, holderName: "Anita", balance: 7500 }
];
// LOGIN
[Link]("/api/login", (req, res) => {
const { username, password } = [Link];
const user = [Link](u => [Link] === username && [Link] === password);
if (user) [Link]({ status: "Login Successful" });
else [Link]({ status: "Invalid Credentials" });
});
// REGISTER
[Link]("/api/register", (req, res) => {
const { username, password } = [Link];
const exists = [Link](u => [Link] === username);
if (exists) {
[Link]({ status: "User Already Exists" });
} else {
[Link]({ username, password });
[Link]({ status: "Registration Successful" });
});
// CRUD Accounts
[Link]("/api/accounts", (req, res) => [Link](accounts));
[Link]("/api/accounts", (req, res) => {
[Link]([Link]);
[Link]({ status: "Account Added" });
});
[Link]("/api/accounts/:accountNo", (req, res) => {
let accNo = parseInt([Link]);
let index = [Link](a => [Link] === accNo);
if (index !== -1) {
accounts[index] = [Link];
[Link]({ status: "Account Updated" });
} else [Link]({ status: "Account Not Found" });
});
[Link]("/api/accounts/:accountNo", (req, res) => {
let accNo = parseInt([Link]);
accounts = [Link](a => [Link] !== accNo);
[Link]({ status: "Account Deleted" });
});
// Transactions
[Link]("/api/accounts/:accountNo/deposit", (req, res) => {
let accNo = parseInt([Link]);
let amount = [Link];
let acc = [Link](a => [Link] === accNo);
if (acc) {
[Link] += amount;
[Link]({ status: "Deposit Successful", balance: [Link] });
} else [Link]({ status: "Account Not Found" });
});
[Link]("/api/accounts/:accountNo/withdraw", (req, res) => {
let accNo = parseInt([Link]);
let amount = [Link];
let acc = [Link](a => [Link] === accNo);
if (acc && [Link] >= amount) {
[Link] -= amount;
[Link]({ status: "Withdraw Successful", balance: [Link] });
} else [Link]({ status: "Insufficient Balance or Account Not Found" });
});
[Link](PORT, () => [Link](`Server running at [Link]
Step 6: Create Frontend Files
Inside project, create folder public. Add:
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Bank Login</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h2>Login</h2>
<input id="username" placeholder="Username">
<input id="password" type="password" placeholder="Password">
<button onclick="login()">Login</button>
<p>New user? <a href="[Link]">Register here</a></p>
<script src="[Link]"></script>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h2>User Registration</h2>
<input id="regUser" placeholder="Username">
<input id="regPass" type="password" placeholder="Password">
<button onclick="register()">Register</button>
<p>Already registered? <a href="[Link]">Login here</a></p>
<script src="[Link]"></script>
</body>
</html>
[Link] (Bank Dashboard)
Same as before: Add Account, Deposit, Withdraw, View Accounts (with table).
Step 7: Add Frontend Logic
Update [Link]:
async function login() {
let data = {
username: [Link]("username").value,
password: [Link]("password").value
};
let res = await fetch("/api/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: [Link](data)
});
let result = await [Link]();
if ([Link] === "Login Successful") {
alert("Welcome!");
[Link] = "[Link]";
} else {
alert([Link]);
async function register() {
let data = {
username: [Link]("regUser").value,
password: [Link]("regPass").value
};
let res = await fetch("/api/register", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: [Link](data)
});
let result = await [Link]();
alert([Link]);
if ([Link] === "Registration Successful") {
[Link] = "[Link]";
// Banking functions (addAccount, deposit, withdraw, viewAccounts) same as earlier
Step 8: Run in NetBeans
1. Open Terminal in NetBeans.
2. Run:
Bash:
node [Link]
3. Open browser:
Code
[Link]
4. Workflow:
o New user → Register → Redirect to login.
o Login → Redirect to banking dashboard ([Link]).
o Perform CRUD + deposit/withdraw operations.