Mobile Banking Web Application Project
Project Model:
Self-Banking or Inter-Banking System for VIP Members, enabling users to manage their banking operations like transferring money, donating, receiving money, and requesting money themselves.
Technologies Stack:
-
Frontend: HTML5, CSS3, JavaScript (ReactJS or plain JS), Bootstrap
-
Backend: PHP, MySQL
-
Security: SSL, mPIN (4 digits), Onscreen Keypad for login
-
Server: Apache/Nginx
Project Features:
1. User Login Page:
-
Content: Bank Name (West Bengal State Co-operative Bank), Logo, mPIN Input Form, Onscreen Keypad, Weaves Animations in the Footer
-
Security: Login via 4-digit mPIN (Generated during Account Creation)
-
Button Actions: Login button redirects to the User Dashboard
2. User Dashboard:
-
Header Section: Sticky logo with "WBSCB VIP Members' Zone", user greeting ("Hi 'Username'")
-
Banner Section: Image sliders (5:3 ratio) for Ads, linked to Blog Articles uploaded by Admin
-
Account & Card Section:
-
Account Type: VIP CURRENT ACCOUNT
-
Check Balance
-
Virtual MasterCard Status (Active/Blocked)
-
-
Services Section: Icons for "Send Money", "Request Money", "Donation", "Download Statement"
-
Footer Section: Fixed sticky footer with icons for Profile, Settings, Notification, Contact Us, Transaction History
3. Page Details:
-
User Login Page: mPIN form, Onscreen Keypad, and animations.
-
Blog Article Page: Image, Text, and Back button, with similar articles.
-
Account Details Page: Account type, number, balance, recent transactions, IFSC, MICR, branch details.
-
Virtual MasterCard Page: Status of card (Active/Blocked), images, and options to generate ATM pin, enable international transactions, order physical card.
-
Money Transfer Page: Options for domestic or international transfers. Logic for transferring money to the same bank accounts or stored accounts.
-
Download Statement Page: Options to download transactions for specific periods (PDF format).
-
Donation Page: Dropdown to select NGO, amount, and donation button.
-
Profile Page: Photo upload, personal details, account status.
-
Settings Page: Light/Dark mode, Logout, Important links.
4. Admin Dashboard:
-
User Account Management: Create, edit, view, and manage user accounts (User/NGO), including generating new account details (Name, Mobile Number, Email, etc.)
-
Controls on User Accounts: Admin can update user interface info, freeze/unfreeze accounts, change transactional status, etc.
-
Debit Card Management: Admin can issue, block, or modify virtual debit card details (POS limit, international usage).
-
Transaction Management: Admin can credit or debit user accounts manually, modify transactions.
-
Blog Article Creation: Admin can create and upload blog articles with image sliders (3:5 ratio).
-
Edit User Dashboard: Admin can modify user details, add or change UI card elements, and upload/deal with debit card images.
Backend Overview:
-
Database: MySQL
-
Users table (User Details, Account Info, etc.)
-
Transactions table (Transaction ID, Amount, Date, Type)
-
Admin controls table (Permissions, Settings)
-
Card Management table (Card details, Status)
-
Blog table (Article Title, Content, Image)
-
-
PHP Functions:
-
User Functions:
-
Register Users (create bank accounts)
-
Update Account Info (balance, transactions)
-
Validate mPIN and login
-
Handle transfers (validate accounts, internal/external transfer restrictions)
-
Process donations, and generate statements
-
-
Admin Functions:
-
Manage Users (CRUD operations)
-
Manage Bank Transactions (credit, debit)
-
Manage Card Settings (Activate, Block, etc.)
-
Create/Edit Blog Articles
-
System-wide settings control (e.g., Light/Dark mode)
-
-
Frontend Overview:
-
Login Form:
-
HTML Form for mPIN Input
-
JavaScript for Onscreen Keypad functionality
-
-
Dashboard Layout:
-
Responsive Layout using Bootstrap
-
Dynamic Cards with personalized information (Balance, Transactions, etc.)
-
Image Sliders for Ads and Blog Articles, using JavaScript or a library like Slick.js.
-
-
Forms:
-
Money Transfer and Donation forms with validation.
-
PDF Generation for statement downloads.
-
-
Styling:
-
CSS or SCSS with color gradients, shadows, and transitions to enhance UI.
-
Admin Features:
-
Admin UI Cards layout for efficient access to controls
-
Account Management Interface for creating/editing user details
-
Transaction Overview to manage and monitor all banking activities
Security Features:
-
SSL Encryption: Ensure all data exchanged between server and user is encrypted.
-
mPIN Login: Only accessible after account creation and validated during login.
-
Input Validation: Secure input validation for forms (prevent SQL injection, XSS attacks).
Project Flow:
-
User Registers:
-
Admin creates a new account, sets up mPIN for login, and sends the credentials to the user.
-
-
User Logs In:
-
User enters mPIN, login is validated.
-
-
User Interactions:
-
Dashboard displays user's balance, card status, transaction history.
-
User can transfer money, request funds, donate, or view their transaction history.
-
-
Admin Controls:
-
Admin has full access to user accounts, can block/unblock transactions, and update user information.
-
Admin can also manage content like blogs and images on the platform.
-
Final Thoughts:
The project will provide a complete, secure, and user-friendly mobile banking experience, incorporating both frontend and backend technologies. Each page has specific actions based on user roles (admin or regular user), and the backend ensures safe processing of transactions, card management, and account details.
This will be a comprehensive platform for users to manage their accounts, while admins can have control over system-wide operations.
// File: index.php (Main Entry Point)
<?php
session_start();
// Include configuration and utility files
require_once 'config.php';
require_once 'utils.php';
// Check if user is already logged in
if (isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === true) {
header("Location: dashboard.php");
exit();
}
// Handle Login Request
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$mpin = $_POST['mpin'] ?? '';
// Validate mPIN
$user = validateUser($mpin, $db);
if ($user) {
$_SESSION['logged_in'] = true;
$_SESSION['user'] = $user;
header("Location: dashboard.php");
exit();
} else {
$error = "Invalid mPIN. Please try again.";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WBSCB Mobile Banking</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-container">
<h1>Welcome to WBSCB Mobile Banking</h1>
<p>Only for VIP Members</p>
<form method="POST">
<label for="mpin">Enter mPIN:</label>
<input type="password" id="mpin" name="mpin" maxlength="4" required>
<button type="submit">Login</button>
</form>
<?php if (isset($error)): ?>
<p class="error"><?= htmlspecialchars($error) ?></p>
<?php endif; ?>
</div>
</body>
</html>
// File: dashboard.php
<?php
session_start();
require_once 'config.php';
require_once 'utils.php';
// Ensure the user is logged in
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
header("Location: index.php");
exit();
}
$user = $_SESSION['user'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - WBSCB</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>WBSCB VIP Members' Zone</h1>
<p>Hi <?= htmlspecialchars($user['username']) ?>!</p>
</header>
<main>
<section class="banner">
<div class="slider">
<!-- Images dynamically loaded -->
</div>
</section>
<section class="account-details">
<div>
<h2>Account</h2>
<p>Type: VIP Current Account</p>
<p>Balance: ₹<?= number_format($user['balance'], 2) ?></p>
</div>
<div>
<h2>Virtual MasterCard</h2>
<p>Status: <?= htmlspecialchars($user['card_status']) ?></p>
<img src="images/default-card.png" alt="MasterCard">
</div>
</section>
<section class="services">
<a href="transfer.php">Send Money</a>
<a href="request.php">Request Money</a>
<a href="donate.php">Donate</a>
<a href="statement.php">Download Statement</a>
</section>
</main>
<footer>
<nav>
<a href="profile.php">Profile</a>
<a href="settings.php">Settings</a>
<a href="notifications.php">Notifications</a>
<a href="contact.php">Contact Us</a>
<a href="transactions.php">Transactions</a>
</nav>
</footer>
</body>
</html>
// File: config.php
<?php
$host = 'localhost';
$dbname = 'mobile_banking';
$username = 'root';
$password = '';
try {
$db = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
die("Database connection failed: " . $e->getMessage());
}
?>
// File: utils.php
<?php
function validateUser($mpin, $db) {
$stmt = $db->prepare("SELECT * FROM users WHERE mpin = :mpin");
$stmt->bindParam(':mpin', $mpin);
$stmt->execute();
return $stmt->fetch(PDO::FETCH_ASSOC);
}
function getTransactions($userId, $db) {
$stmt = $db->prepare("SELECT * FROM transactions WHERE user_id = :user_id ORDER BY date DESC");
$stmt->bindParam(':user_id', $userId);
$stmt->execute();
return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
?>
// File: transfer.php
<?php
session_start();
require_once 'config.php';
require_once 'utils.php';
// Ensure user is logged in
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
header("Location: index.php");
exit();
}
$user = $_SESSION['user'];
// Handle money transfer request
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$accountNumber = $_POST['account_number'] ?? '';
$ifsc = $_POST['ifsc'] ?? '';
$amount = $_POST['amount'] ?? 0;
if ($amount > 0 && $amount <= $user['balance']) {
// Deduct from sender's balance
$stmt = $db->prepare("UPDATE users SET balance = balance - :amount WHERE id = :id");
$stmt->bindParam(':amount', $amount);
$stmt->bindParam(':id', $user['id']);
$stmt->execute();
// Add to receiver's balance (if within the same bank)
$stmt = $db->prepare("UPDATE users SET balance = balance + :amount WHERE account_number = :account_number AND ifsc = :ifsc");
$stmt->bindParam(':amount', $amount);
$stmt->bindParam(':account_number', $accountNumber);
$stmt->bindParam(':ifsc', $ifsc);
$stmt->execute();
$success = "Money transferred successfully.";
} else {
$error = "Invalid transfer amount or insufficient balance.";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Money Transfer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Transfer Money</h1>
</header>
<main>
<form method="POST">
<label for="account_number">Account Number:</label>
<input type="text" id="account_number" name="account_number" required>
<label for="ifsc">IFSC:</label>
<input type="text" id="ifsc" name="ifsc" required>
<label for="amount">Amount:</label>
<input type="number" id="amount" name="amount" required>
<button type="submit">Transfer</button>
</form>
<?php if (isset($success)): ?>
<p class="success"><?= htmlspecialchars($success) ?></p>
<?php endif; ?>
<?php if (isset($error)): ?>
<p class="error"><?= htmlspecialchars($error) ?></p>
<?php endif; ?>
</main>
</body>
</html>
// File: styles.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
footer nav a {
margin: 0 10px;
color: #333;
text-decoration: none;
}
.login-container {
max-width: 400px;
margin: 100px auto;
padding: 20px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.error {
color: red;
font-weight: bold;
}
.success {
color: green;
font-weight: bold;
}
The initial source code for the mobile banking web application has been generated. It includes a basic structure for the login page, dashboard, configuration, utility functions, and a placeholder stylesheet.
Next Steps:
-
Expand individual pages (e.g., money transfer, donations, etc.).
-
Customize the database schema to store user, transaction, and card details.
-
Enhance styles and JavaScript functionalities.
Post a Comment