How to create a login form using HTML + SERVLET + JAVA + XML

___________________________________________________________________

In this article, we will build a simple Login Form using HTML+ SERVLET + JAVA + XML.

In this example, we will create an Employee Login Form and we will validate employee username and password with the database.

Let me list out the tools and technologies that I have used to develop this application.

Tools and technologies used

1. IDE — STS/Eclipse Neon.3

2. JDK — 1.8 or later

3. Apache Tomcat — 8.5

4. MySQL — mysql-connector-java-8.0.13.jar

Development Steps

1. Create Eclipse Dynamic web project

2. Add Dependencies

3. Project Structure

4. MySQL Database Setup

5. Create a HTML — Login.html

6. Create a LoginServlet.java

7. Create a conn.java

8. Create a web.xml

1. Create an Eclipse Dynamic Web Project

To create a new dynamic Web project in Eclipse:

1. On the main menu select File > New > Project….

2. In the upcoming wizard choose Web > Dynamic Web Project.

3. Click Next.

4. Enter project name as “loginForm”;

5. Make sure that the target runtime is set to Apache Tomcat with the currently supported version.

2. Add Dependencies

Add the latest release of below jar files to the lib folder.

- mysql-connector-java-8.0.13.jar

In Eclipse, paste these JAR files to your project directory: WebContent/WEB-INF/lib

3. Project Structure

Standard project structure for your reference -

4. MySQL Database Setup

Let’s create a database named “mysql_database” in MySQL. Now, create a login table using below DDL script:

CREATE TABLE `Login` (
`username` varchar(50) PRIMARY KEY,
`password` varchar(50) Not NULL,
);

Here is an Insert SQL statement:

INSERT INTO `mysql_database`.`login` (`username`, `password`) VALUES ("Ajay", "Ajay");

5. Create a login.html

Let’s design login HTML form with following fields:

. username

. password

html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body><form action="Login" method="post">
Username:<input type="text" name="username">
<br> password:
<input type="password" name="password">
<br>
<input type="submit" name="login">
</form>
</body>
</html>

6. Create a LoginServlet.java

Let’s create a LoginServlet.java class which contains JDBC code to connect with MySQL database. Add the following code to a LoginServlet class:

Java

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet { public void doGet(HttpServletRequest req,
HttpServletResponse res)
throws IOException
{
{
try {
Connection con = conn.databasescon();
System.out.println(
"connected with the database successfully");
PreparedStatement ps = con.prepareStatement(
"select *from login");
ResultSet rs = ps.executeQuery();
while (rs.next()) {
String username
= rs.getString("username");
String password
= rs.getString("Password");
String s1
= req.getParameter("username");
String s2
= req.getParameter("Password");
PrintWriter out = res.getWriter();
out.println("username is : " + s1);
out.println("Password is : " + s2);
out.println("username is : "
+ username);
out.println("Password is : "
+ password);
if (s1.equals(username)
&& s2.equals(password)) {
out.println("You are login");
}
else {
out.println(
"Wrong user id password");
}
}
}
catch (SQLException e) {
System.out.println("Error");
}
}
}
}

7. Create a conn.java

Let’s create conn.java to process HTTP request parameters and redirect to the appropriate HTML page based on the employee login status.

Note: Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/Database name","username","password");

Java

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class conn {
public static Connection databasescon()
throws SQLException
{
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/mysql_database","root", "Ajay@1234");
return con;
}
public static void main(String[] args)
throws SQLException
{
Connection con = databasescon();
System.out.println("Done");
}
}

8. Create a web.xml

After an employee successfully login then this page shows a successful message on screen:

XML

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID"
version="3.1">
<display-name>LoginForm</display-name>

<servlet>
<servlet-name>FirstServlet</servlet-name>
<servlet-class>LoginServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>FirstServlet</servlet-name>
<url-pattern>Login</url-pattern>
</servlet-mapping>
</web-app>

Note that in the above page, we have used html action tags. Read more about action tags here.

Employee Login Form

           username-______________
password-______________
Submit

Login Success Page

You are login

10. Related Articles

. html+ JDBC

. HTML + JDBC + MySQL Example — In this article, we will build a simple Employee Registration module using HTML, JDBC, and MySQL database.

. HTML Login Form + JDBC + MySQL Example — In this article, we will build a simple Login Form using HTML, JDBC and MySQL database.

_____________________________________________

Writer : Ajaydhangar

LinkedIn

Twitter

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store