I’m currently working on a project for a client, and I wanted to share the progress we’ve made so far, particularly in the context of developing a web application. In this blog post, I’ll detail the completed front end for the login, registration, and welcome pages, and discuss the next steps for implementing the backend logic using Servlets.
Frontend Development Overview
We’ve successfully completed the front end of our web application, which includes the following key components:
- Login Page: This page allows users to enter their credentials and access their accounts. It includes:
- User input fields for the username and password.
- A login button that triggers the authentication process.
- Links for password recovery and registration.
- Registration Page: This page enables new users to create accounts. It features:
- Input fields for user details such as username, email, and password.
- Validation messages to guide users in filling out the form correctly.
- A submit button to send the information to the server for processing.
- Welcome Page: After successful login, users are redirected to this page, which greets them and provides access to their dashboard. This page includes:
- A welcome message personalized with the user’s name.
- Links to navigate to other parts of the application.
Here’s a brief overview of the HTML and CSS structure for the login page:
HTML Structure
Here are the complete HTML structures for the login and registration pages:1. 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>Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2 class="title">Login</h2>
<form action="/login" method="POST" class="form">
<input type="text" name="username" placeholder="Username" required class="input">
<input type="password" name="password" placeholder="Password" required class="input">
<button type="submit" class="button">Login</button>
<p class="switch-page">Don't have an account? <a href="register.html">Register</a></p>
</form>
</div>
</body>
</html>
Registration Page (register.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2 class="title">Register</h2>
<form action="/register" method="POST" class="form">
<input type="text" name="username" placeholder="Username" required class="input">
<input type="email" name="email" placeholder="Email" required class="input">
<input type="password" name="password" placeholder="Password" required class="input">
<button type="submit" class="button">Register</button>
<p class="switch-page">Already have an account? <a href="login.html">Login</a></p>
</form>
</div>
</body>
</html>
CSS Styling
Now, let’s add some CSS to enhance the appearance of both the login and registration pages. Create a file named styles.css and include the following styles:
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff; /* Light blue background */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white; /* White background for the form */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
padding: 20px;
width: 300px;
}
.title {
text-align: center;
color: #333; /* Dark text for the title */
}
.form {
display: flex;
flex-direction: column;
}
.input {
margin-bottom: 15px; /* Space between inputs */
padding: 10px;
border: 1px solid #ccc; /* Light grey border */
border-radius: 4px; /* Rounded corners for inputs */
}
.input:focus {
border-color: #007bff; /* Blue border on focus */
outline: none; /* Remove default outline */
}
.button {
background-color: #007bff; /* Blue background for button */
color: white; /* White text for button */
padding: 10px;
border: none; /* Remove border */
border-radius: 4px; /* Rounded corners for button */
cursor: pointer; /* Pointer cursor on hover */
}
.button:hover {
background-color: #0056b3; /* Darker blue on hover */
}
.switch-page {
text-align: center; /* Center the switch page text */
margin-top: 10px; /* Space above the text */
}
.switch-page a {
color: #007bff; /* Link color */
text-decoration: none; /* Remove underline */
}
.switch-page a:hover {
text-decoration: underline; /* Underline on hover */
}
Implementing Backend Logic with Servlets
Now that the front end is polished and functional, it’s time to shift our focus to the backend. We will be implementing the server-side logic using Java Servlets. Servlets are a powerful way to handle requests and responses in a web application, making them ideal for our project.
Conclusion
With the HTML and CSS provided above, you now have a complete setup for both a login and a registration page that is visually appealing thanks to the use of colors and styles.
- The login page allows users to enter their credentials, while the registration page provides a way for new users to create an account.
- The CSS styles ensure a user-friendly design, enhancing the overall experience.