This guide focuses on building a simple login and registration system for an online ticket booking application using HTML, JavaScript, and Spring Boot. The system includes user authentication endpoints and frontend pages for login and registration.
Frontend Implementation
Login Page (index.html)
The login page serves as the entry point for users, allowing them to authenticate with their email and password. It includes a loading indicator and redirects to the registration page if needed.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Ticket Booking System</title>
<link rel="stylesheet" href="/static/end/css/styles.css">
<style>
.loading-indicator {
display: none;
color: #007bff;
font-size: 1rem;
margin-top: 1rem;
}
.btn-disabled {
opacity: 0.6;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="container">
<div class="form-container">
<h2>Login</h2>
<form id="loginForm" onsubmit="handleLogin(event)">
<div class="form-group">
<label for="userEmail">Email Address:</label>
<input type="email" id="userEmail" name="userEmail" required>
</div>
<div class="form-group">
<label for="userPassword">Password:</label>
<input type="password" id="userPassword" name="userPassword" required>
</div>
<button type="submit" id="loginBtn">Login</button>
</form>
<p class="loading-indicator" id="loadingText">Logging in, please wait...</p>
<p>Don't have an account? <a href="register.html">Register here</a></p>
</div>
</div>
<script>
function handleLogin(event) {
event.preventDefault();
const loginBtn = document.getElementById('loginBtn');
const loadingText = document.getElementById('loadingText');
loadingText.style.display = 'block';
loginBtn.classList.add('btn-disabled');
const email = document.getElementById('userEmail').value;
const password = document.getElementById('userPassword').value;
const requestData = { email, password };
fetch('/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(requestData)
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
loadingText.style.display = 'none';
loginBtn.classList.remove('btn-disabled');
})
.catch(error => {
console.error('Error:', error);
loadingText.style.display = 'none';
loginBtn.classList.remove('btn-disabled');
});
}
</script>
</body>
</html>
Registration Page (register.html)
The registration page allows new users to create an account by providing a username, email, and password. Upon successful registration, users are redirected to the login page.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register - Online Ticket Booking System</title>
<link rel="stylesheet" href="/static/end/css/styles.css">
</head>
<body>
<div class="container">
<div class="form-container">
<h2>Register</h2>
<form id="registerForm">
<div class="form-group">
<label for="userName">Username:</label>
<input type="text" id="userName" name="userName" required>
</div>
<div class="form-group">
<label for="regEmail">Email Address:</label>
<input type="email" id="regEmail" name="regEmail" required>
</div>
<div class="form-group">
<label for="regPassword">Password:</label>
<input type="password" id="regPassword" name="regPassword" required>
</div>
<button type="submit">Register</button>
</form>
<p>Already have an account? <a href="index.html">Login here</a></p>
</div>
</div>
<script>
document.getElementById('registerForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('userName').value;
const email = document.getElementById('regEmail').value;
const password = document.getElementById('regPassword').value;
const requestData = { username, email, password };
fetch('/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(requestData)
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
alert('Registration successful');
window.location.href = 'index.html';
})
.catch(error => {
console.error('Error:', error);
alert('Registration failed. Please try again.');
});
});
</script>
</body>
</html>
Backend Setup
pom.xml
The Maven POM file manages dependencies for the Spring Boot application, including web support and JPA API for database interactions.
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example.tickets</groupId>
<artifactId>TicketBookingSystem</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>TicketBookingSystem Maven Webapp</name>
<url>http://maven.apache.org</url>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.0</version>
<relativePath/>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>javax.persistence</groupId>
<artifactId>javax.persistence-api</artifactId>
<version>2.2</version>
</dependency>
</dependencies>
<build>
<finalName>TicketBookingSystem</finalName>
</build>
</project>
IDEA Configuration Tips
To improve development efficiency, configure IntelliJ IDEA's auto-import settinsg:
- Go to
Settings->Editor->General->Auto import. - Check the following options:
Add unambiguous imports on the flyto automatically import required packages.Optimize imports on the fly (for current project)to dynamically remove unused imports.
- Apply the changes and restart IDEA if necessary.
These settings ensure that IDEA handles import statements automatically, reducing manual effort and potential errors.