Simple login page using JSP

Today we will see about creating simple login page using JSP. For this tutorial we have used

Eclipse
Apache Tomcat (Web Server)
Postgres Database

In this example lets start with simple JSP page which will have username and password field with login button. Also wwe have used javascript to validate text fields. In back-end we have created database connection and validating the username and password are valid or not. If its valid then we are returning true else false to the JSP page.

In JSP page if the returned value is true then we are redirecting to success.jsp else displaying error message in same page.

We have done very basic login page which will be understandable for beginners. There are lot and lot of tools and frameworks which we can use and make our web pages more powerful and rich in UI. But we have this taken simple way to start with login page.

To Be Ready with:

i. JDK 1.5 and above should be installed in the machine

ii. Download Eclipse J2EE version according to your machine and OS and install - http://www.eclipse.org/downloads/

iii. Download Apache Tomcat web server and install - http://tomcat.apache.org/download-60.cgi

iv. Download and install Postgres database or any other database according to your choice - http://www.postgresql.org/download/

v. Download necessary database driver jar files. In case of Postgres we need to download postgres SQL JDBC driver - http://jdbc.postgresql.org/download.html

Step - 1: Create Dynamic web project in Eclipse

File -> New -> Dynamic Web Project

Step - 2: Add database driver in project Libraries

Right click Project -> Properties -> Java Build Path -> Libraries -> Add External JARs

Step - 3: Create simple login.jsp

<%@page import="com.javadiscover.login.LoginValidate"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Please Login....</title>

<script type="text/javascript">
    function validate_required(field, alerttxt) {
        with (field) {
            if (value == null || value == "") {
                alert(alerttxt);
                return false;
            }
            else {
                return true;
            }
        }
    }

    function validate_Loginform(thisform) {
        with (thisform) {
            if (validate_required(username, "Please enter the username") == false)
            {
                username.focus();
                return false;
            }

            if (validate_required(password, "Please enter the password") == false)
            {
                password.focus();
                return false;
            }
            return true;
        }
    }
</script>
</head>
<body>


<%
 String msg = "";
 String uname = request.getParameter("username");
 String password = request.getParameter("password");
 if(uname != null && password != null && uname.length() > 0 && password.length() > 0){
  LoginValidate obj = new LoginValidate();
  boolean flag = obj.validateUserLogin(uname, password);
  if(flag){
   request.getRequestDispatcher("success.jsp").forward(request, response);
  }else{
   msg = "Invalid username or password";
  }
 }
%>

 <form action="login.jsp" method="post" onsubmit="return validate_Loginform(this)">
  <table width="40%" border="1" align="center">
   <tr>
    <th colspan="2" align="center" valign="top">Please enter login details</th>
   </tr>
   <tr height="50">
    <td valign="middle" align="right">User Name</td>
    <td align="left"><input name="username" size="20" value=""  type="text">
    </td>
   </tr>
   <tr>
    <td valign="middle" align="right">Password</td>
    <td align="left"><input name="password" size="20" value=""  type="password">
    </td>
   </tr>
   <tr height="40">
    <td colspan="2" align="center"><input value="Login" name="B1" type="submit"></td>
   </tr>
  </table>
  
  <br>
  <br>
  <br>
  <br>
  
  <p align="center"> <b><font color="darkred"><%=msg %></font></b></p>

 </form>
</body>
</html>

Step - 4: Create LoginValidate.java page

package com.javadiscover.login;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

/**
 * @author Java Discover
 */
public class LoginValidate {
 
 public boolean validateUserLogin(String uname, String pwd){
  boolean flag = false;
  Connection con = null;
  try{
   con = createConnection();
   if(con != null){
    Statement stat = con.createStatement();
    String qry = "SELECT * FROM tbl_login_master WHERE uname = '"+uname+"' AND password = '"+pwd+"' ";
    ResultSet rs = stat.executeQuery(qry);
    if(rs.next()){
     flag = true;
    }
   }
  }catch (Exception e) {
   e.printStackTrace();
  }finally{
   if(con != null){
    try {
     con.close();
    } catch (SQLException e) {
     e.printStackTrace();
    }
   }
  }
  return flag;
 }
 
 public Connection createConnection() {
  System.out.println("Createung postgres DataBase Connection");
  Connection connection = null;

  try {
   
   // Provide database Driver according to your database
   Class.forName("org.postgresql.Driver");
   
   // Provide URL, database and credentials according to your database 
   connection = DriverManager.getConnection("jdbc:postgresql://localhost:5432/mydatabase", "javadiscover","postgres");

  } catch (Exception e) {
   e.printStackTrace();
   return null;
  }
  if(connection != null){
   System.out.println("Connection created successfully....");
  }
  return connection;
 }
}

Step - 5: Create success.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

<%
 String uname = request.getParameter("username");
%>
 <h1>Hi <%=uname%>, Successfully Logged in.....</h1>
</body>
</html>