Okay, let's create the bank customer management application using Java and the Spring Boot framework. We'll maintain the same frontend structure (HTML, CSS, JavaScript) and create a REST API backend with Java. We'll use Maven as the build tool. 4.0.0 org.springframework.boot spring-boot-starter-parent 2.7.5 com.example bank-customer-manager 0.0.1-SNAPSHOT bank-customer-manager Demo project for Spring Boot Customer Management 11 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-maven-plugin ]]> package com.example.bankcustomermanager; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class BankCustomerManagerApplication { public static void main(String[] args) { SpringApplication.run(BankCustomerManagerApplication.class, args); } } package com.example.bankcustomermanager.model; public class Customer { private long id; private String name; private String email; private double balance; // Default constructor (needed for JSON parsing) public Customer() {} public Customer(long id, String name, String email, double balance) { this.id = id; this.name = name; this.email = email; this.balance = balance; } // Getters and Setters public long getId() { return id; } public void setId(long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public double getBalance() { return balance; } public void setBalance(double balance) { this.balance = balance; } } package com.example.bankcustomermanager.repository; import com.example.bankcustomermanager.model.Customer; import org.springframework.stereotype.Repository; import java.util.ArrayList; import java.util.List; import java.util.Map; import java.util.Optional; import java.util.concurrent.ConcurrentHashMap; import java.util.concurrent.atomic.AtomicLong; @Repository public class InMemoryCustomerRepository { private final Map customers = new ConcurrentHashMap<>(); private final AtomicLong idCounter = new AtomicLong(); public InMemoryCustomerRepository() { // Initial data save(new Customer(0, "Alice Smith (Java)", "alice.java@example.com", 6000.0)); save(new Customer(0, "Bob Johnson (Java)", "bob.java@example.com", 11000.0)); } public List findAll() { return new ArrayList<>(customers.values()); } public Optional findById(long id) { return Optional.ofNullable(customers.get(id)); } public Customer save(Customer customer) { if (customer.getId() == 0) { // New customer customer.setId(idCounter.incrementAndGet()); } customers.put(customer.getId(), customer); return customer; } public boolean deleteById(long id) { return customers.remove(id) != null; } } package com.example.bankcustomermanager.controller; import com.example.bankcustomermanager.model.Customer; import com.example.bankcustomermanager.repository.InMemoryCustomerRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.*; import java.util.List; import java.util.Optional; @RestController @RequestMapping("/api/customers") // Base path for all customer-related endpoints public class CustomerController { @Autowired private InMemoryCustomerRepository customerRepository; // GET all customers @GetMapping public List getAllCustomers() { return customerRepository.findAll(); } // GET a single customer by ID @GetMapping("/{id}") public ResponseEntity getCustomerById(@PathVariable long id) { Optional customer = customerRepository.findById(id); return customer.map(ResponseEntity::ok) // If present, return 200 OK with customer .orElseGet(() -> ResponseEntity.notFound().build()); // If not present, return 404 Not Found } // POST (create) a new customer @PostMapping public ResponseEntity createCustomer(@RequestBody Customer customer) { if (customer.getName() == null || customer.getName().isEmpty() || customer.getEmail() == null || customer.getEmail().isEmpty()) { return ResponseEntity.badRequest().build(); // Basic validation } Customer savedCustomer = customerRepository.save(customer); return ResponseEntity.status(HttpStatus.CREATED).body(savedCustomer); } // PUT (update) a customer @PutMapping("/{id}") public ResponseEntity updateCustomer(@PathVariable long id, @RequestBody Customer updatedCustomer) { Optional existingCustomerOptional = customerRepository.findById(id); if (existingCustomerOptional.isEmpty()) { return ResponseEntity.notFound().build(); } Customer existingCustomer = existingCustomerOptional.get(); // Update fields if provided in the request body if (updatedCustomer.getName() != null) { existingCustomer.setName(updatedCustomer.getName()); } if (updatedCustomer.getEmail() != null) { existingCustomer.setEmail(updatedCustomer.getEmail()); } // Note: In a real app, you might want more specific checks for balance updates existingCustomer.setBalance(updatedCustomer.getBalance()); Customer savedCustomer = customerRepository.save(existingCustomer); // save updates the existing entry return ResponseEntity.ok(savedCustomer); } // DELETE a customer @DeleteMapping("/{id}") public ResponseEntity deleteCustomer(@PathVariable long id) { boolean deleted = customerRepository.deleteById(id); if (deleted) { return ResponseEntity.noContent().build(); // 204 No Content } else { return ResponseEntity.notFound().build(); // 404 Not Found } } } Bank Customer Management (Java)

Customer Management (Java Backend)

Add New Customer

Customer List

Loading customers...

body { font-family: sans-serif; line-height: 1.6; margin: 20px; background-color: #f4f4f4; } h1, h2 { color: #333; text-align: center; } .container { display: flex; flex-wrap: wrap; gap: 20px; max-width: 1000px; margin: 20px auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .form-section, .list-section { flex: 1; min-width: 300px; } .form-section h2, .list-section h2 { text-align: left; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; } #add-customer-form div { margin-bottom: 15px; } #add-customer-form label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; } #add-customer-form input[type="text"], #add-customer-form input[type="email"], #add-customer-form input[type="number"] { width: calc(100% - 22px); /* Account for padding and border */ padding: 10px; border: 1px solid #ccc; border-radius: 4px; } button { background-color: #5cb85c; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; } button:hover { background-color: #4cae4c; } #customer-list { list-style: none; padding: 0; } #customer-list li { background: #e9e9e9; margin-bottom: 10px; padding: 15px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; } #customer-list li span { flex-grow: 1; margin-right: 10px; word-break: break-word; /* Prevent long emails/names from breaking layout */ } .delete-btn { background-color: #d9534f; color: white; padding: 5px 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; flex-shrink: 0; /* Prevent button from shrinking */ } .delete-btn:hover { background-color: #c9302c; } document.addEventListener('DOMContentLoaded', () => { const customerList = document.getElementById('customer-list'); const addCustomerForm = document.getElementById('add-customer-form'); const apiBaseUrl = '/api/customers'; // Use relative path // Function to fetch and display customers const fetchCustomers = async () => { try { console.log(`Fetching customers from ${apiBaseUrl}...`); const response = await fetch(apiBaseUrl); if (!response.ok) { const errorText = await response.text(); throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`); } const customers = await response.json(); console.log("Customers received:", customers); customerList.innerHTML = ''; // Clear existing list if (customers.length === 0) { customerList.innerHTML = '

No customers found.

'; return; } customers.forEach(customer => { const li = document.createElement('li'); li.innerHTML = ` ${customer.name} (${customer.email}) - Balance: $${customer.balance.toFixed(2)} `; customerList.appendChild(li); }); } catch (error) { console.error('Error fetching customers:', error); customerList.innerHTML = `

Error loading customers: ${error.message}. Check console.

`; } }; // Function to add a new customer const addCustomer = async (event) => { event.preventDefault(); // Prevent default form submission const nameInput = document.getElementById('name'); const emailInput = document.getElementById('email'); const balanceInput = document.getElementById('balance'); const newCustomer = { // id is generated by the backend name: nameInput.value, email: emailInput.value, balance: parseFloat(balanceInput.value) || 0 // Ensure balance is a number }; console.log("Adding customer:", newCustomer); try { const response = await fetch(apiBaseUrl, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(newCustomer), }); if (!response.ok) { const errorText = await response.text(); throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`); } console.log("Customer added successfully"); // Clear the form addCustomerForm.reset(); // Refresh the customer list fetchCustomers(); } catch (error) { console.error('Error adding customer:', error); alert(`Failed to add customer: ${error.message}`); } }; // Function to delete a customer const deleteCustomer = async (event) => { if (event.target.classList.contains('delete-btn')) { const customerId = event.target.getAttribute('data-id'); if (!confirm(`Are you sure you want to delete customer ID ${customerId}?`)) { return; } console.log(`Deleting customer with ID: ${customerId}`); try { const response = await fetch(`${apiBaseUrl}/${customerId}`, { method: 'DELETE', }); // DELETE often returns 204 No Content on success, which is ok. if (!response.ok && response.status !== 204) { const errorText = await response.text(); throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`); } console.log("Customer deleted successfully"); // Refresh the customer list fetchCustomers(); } catch (error) { console.error('Error deleting customer:', error); alert(`Failed to delete customer: ${error.message}`); } } }; // Add event listeners addCustomerForm.addEventListener('submit', addCustomer); customerList.addEventListener('click', deleteCustomer); // Initial fetch of customers fetchCustomers(); }); Now you have the Java Spring Boot project structure. You'll need to run it using Maven. I'll provide the command next.