Login and Register using JSP and MySQL Example with Source Code

In this tutorial, I will show you the steps of creating a simple login and register system using JSP and MySQL with source code.

JavaServer Pages (JSP) is a technology that enables the development of dynamic web pages using Java as the programming language. In combination with MySQL, you can create robust web applications.

I have used the JSP session on the login page that checks only the authenticator session login user will access the welcome page. As well as additionally I have covered JavaScript validation both on the login and registration forms.

Table Content

1. Tools Require

2. Database and Table Design

3. index.jsp [ login page ]

    3.1 custom JavaScript validation for login form

    3.2 JSP code for login form

4. register.jsp [ registration page ]

    4.1 custom JavaScript validation for register form

    4.2 JSP code for register form

5. welcome.jsp

6. logout.jsp

7. Run project on XAMPP server

1. Tools Require

Notepad++: – I've written all the codes in Notepad++ editor for this project.

XAMPP:– I've set up and execute this project on the XAMPP server.

Jar files:– This project needed jsp-api.jar, servet-api.jar and mysq-connector-java-5.1.15-bin.jar files. I've already included in the project lib folder.

2. Database and Table Design

Create a MySQL database named "dbuser" and a table named "login" with columns id, firstname, lastname, email, and password.

Here I put the SQL script below to generate the database and table:

CREATE DATABASE dbuser;
CREATE TABLE `login` (
  `id` int(11) NOT NULL,
  `firstname` varchar(10) NOT NULL,
  `lastname` varchar(12) NOT NULL,
  `email` varchar(40) NOT NULL,
  `password` varchar(20) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Now you need to establish the following JSP pages to perform MySQL login and register functionality.

 – index.jsp

– register.jsp

– welcome.jsp

– logout.jsp

NOTE: The session must be begun on all pages.

3. index.jsp [ login page ]

This is the index.jsp page.

I created a simple login form using a custom CSS code on this page. And take two input boxes that will take user-entered email and password.

<form class="form-register" method="post" name="myform" onsubmit="return validate();">

    <div class="form-register-with-email">

        <div class="form-white-background">

            <div class="form-title-row">
                <h1>Login</h1>
            </div>
     
            <p style="color:red">         
            <%
            if(request.getAttribute("errorMsg")!=null)
            {
               out.println(request.getAttribute("errorMsg")); //error message for email or password 
            }
            %>
            </p>
       
            </br>

            <div class="form-row">
               <label>
                   <span>Email</span>
                   <input type="text" name="txt_email" id="email" placeholder="enter email">
               </label>
            </div>

            <div class="form-row">
               <label>
                   <span>Password</span>
                   <input type="password" name="txt_password" id="password" placeholder="enter password">
               </label>
            </div>

          <input type="submit" name="btn_login" value="Login">
                    
        </div>

        <a href="register.jsp" class="form-log-in-with-existing">You Don't have an account? <b> Register here </b></a>

   </div>

</form>
 

Go to the tutorial end and download the custom CSS template code from the project zip file.

3.1 Custom JavaScript Validation Code for Login Form

See JavaScript validation for the login form to ensure all required fields are filled in. The onsubmit method activates the validate() function event and causes it at the time of submission of the form. And the alert method sends a unique custom message with plain modal on the header section.

<script>
  
 function validate()
 {
  var email = document.myform.txt_email;
  var password = document.myform.txt_password;
    
  if (email.value == null || email.value == "") //check email textbox not blank
  {
   window.alert("please enter email ?"); //alert message
   email.style.background = '#f08080';
   email.focus();
   return false;
  }
  if (password.value == null || password.value == "") //check password textbox not blank
  {
   window.alert("please enter password ?"); //alert message
   password.style.background = '#f08080'; 
   password.focus();
   return false;
  }
 }
   
</script>

3.2 JSP Code for Login Form

Below JSP code compares the combination of user email and password in the database, and when both results are contained in the table. If found, a session will start and allow the user to access the welcome page, otherwise, the appropriate message will be displayed.

<%@ page import="java.sql.*" %>  

<%
if(session.getAttribute("login")!=null) //check login session user not access or back to index.jsp page
{
 response.sendRedirect("welcome.jsp");
}
%>

<%
try
{
 Class.forName("com.mysql.jdbc.Driver"); //load driver
 
 Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/dbuser","root",""); //create connection
 
 if(request.getParameter("btn_login")!=null) //check login button click event not null
 {
  String dbemail,dbpassword;
  
  String email,password;
  
  email=request.getParameter("txt_email"); //txt_email
  password=request.getParameter("txt_password"); //txt_password
  
  PreparedStatement pstmt=null; //create statement
  
  pstmt=con.prepareStatement("select * from login where email=? AND password=?"); //sql select query 
  pstmt.setString(1,email);
  pstmt.setString(2,password);
  
  ResultSet rs=pstmt.executeQuery(); //execute query and store in resultset object rs.
  
  if(rs.next())
  {
   dbemail=rs.getString("email");
   dbpassword=rs.getString("password");
   
   if(email.equals(dbemail) && password.equals(dbpassword))
   {
    session.setAttribute("login",dbemail); //session name is login and store fetchable database email address
    response.sendRedirect("welcome.jsp"); //after login success redirect to welcome.jsp page
   }
  }
  else
  {
   request.setAttribute("errorMsg","invalid email or password"); //invalid error message for email or password wrong
  }
  
  con.close(); //close connection 
 }
 
}
catch(Exception e)
{
 out.println(e);
}
%>


 

4. register.jsp [ registration page ]

This is the user registration page and on this page, I created the registration form.

This page contains a simple HTML form with the firstname, lastname, email, and password fields. This form is the same as the form of the style login, but two additional fields are included with little improvements.

<form class="form-register" method="post" onsubmit="return validate();">

    <div class="form-register-with-email">

        <div class="form-white-background">

            <div class="form-title-row">
                <h1>Register</h1>
            </div>
       
            <p style="color:green">         
            <%
            if(request.getAttribute("successMsg")!=null)
            { 
               out.println(request.getAttribute("successMsg")); //register success message
            }
            %>
           </p>
       
           </br>
       
           <div class="form-row">
               <label>
                   <span>Firstname</span>
                   <input type="text" name="txt_firstname" id="fname" placeholder="enter firstname">
               </label>
           </div>
    
           <div class="form-row">
               <label>
                   <span>Lastname</span>
                   <input type="text" name="txt_lastname" id="lname" placeholder="enter lastname">
               </label>
           </div>

           <div class="form-row">
               <label>
                   <span>Email</span>
                   <input type="text" name="txt_email" id="email" placeholder="enter email">
               </label>
           </div>

           <div class="form-row">
               <label>
                   <span>Password</span>
                   <input type="password" name="txt_password" id="password" placeholder="enter password">
               </label>
           </div>

           <input type="submit" name="btn_register" value="Register">
     
        </div>
    
        <a href="index.jsp" class="form-log-in-with-existing">Already have an account? <b> Login here </b></a>

    </div>

</form>  

See below the stylish registration form that I have created with custom CSS codes.

I put the custom CSS style code in the project zip file. If you like this please to the end of the tutorial and download the project zip file.

4.1 Custom JavaScript Validation Code for Register Form

See below custom JavaScript validation for the registration form. On this page, the JavaScript offers a ready-made format that I have to implement. And below the whole validation check first name & last name must be typed alphabetically, valid email format, password length 6 to 12 with special character permitted.

<script> 
 
 function validate()
 {
  var first_name= /^[a-z A-Z]+$/; //pattern allowed alphabet a-z or A-Z 
  var last_name= /^[a-z A-Z]+$/; //pattern allowed alphabet a-z or A-Z 
  var email_valid= /^[\w\d\.]+\@[a-zA-Z\.]+\.[A-Za-z]{1,4}$/; //pattern valid email validation
  var password_valid=/^[A-Z a-z 0-9 !@#$%&*()<>]{6,12}$/; //pattern password allowed A to Z, a to z, 0-9, !@#$%&*()<> charecter 
   
  var fname = document.getElementById("fname"); //textbox id fname
  var lname = document.getElementById("lname"); //textbox id lname
  var email = document.getElementById("email"); //textbox id email
  var password = document.getElementById("password"); //textbox id password
   
  if(!first_name.test(fname.value) || fname.value=='') 
  {
      alert("Enter Firstname Alphabet Only....!");
      fname.focus();
      fname.style.background = '#f08080';
      return false;                    
  }
  if(!last_name.test(lname.value) || lname.value=='') 
  {
      alert("Enter Lastname Alphabet Only....!");
      lname.focus();
      lname.style.background = '#f08080';
      return false;                    
  }
  if(!email_valid.test(email.value) || email.value=='') 
  {
      alert("Enter Valid Email....!");
      email.focus();
      email.style.background = '#f08080';
      return false;                    
  }
  if(!password_valid.test(password.value) || password.value=='') 
  {
      alert("Password Must Be 6 to 12 and allowed !@#$%&*()<> character");
      password.focus();
      password.style.background = '#f08080';
      return false;                    
  }
 }
  
</script> 
 

4.2 JSP Code for Register Form

In this code, If no validation of JavaScript occurs then new user records will register in the MySQL database with an appropriate message displayed by following the JSP code.

<%@ page import="java.sql.*" %>  

<%
if(session.getAttribute("login")!=null) //check login session user not access or back to register.jsp page
{
 response.sendRedirect("welcome.jsp");
}
%>


<%
try
{
 Class.forName("com.mysql.jdbc.Driver"); //load driver
 
 Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/dbuser","root",""); //create connection
 
 if(request.getParameter("btn_register")!=null) //check register button click event not null
 {
  String firstname,lastname,email,password;
  
  firstname=request.getParameter("txt_firstname"); //txt_firstname
  lastname=request.getParameter("txt_lastname"); //txt_lastname
  email=request.getParameter("txt_email"); //txt_email
  password=request.getParameter("txt_password"); //txt_password
  
  PreparedStatement pstmt=null; //create statement
  
  pstmt=con.prepareStatement("insert into login(firstname,lastname,email,password) values(?,?,?,?)"); //sql insert query
  pstmt.setString(1,firstname);
  pstmt.setString(2,lastname);
  pstmt.setString(3,email);
  pstmt.setString(4,password);
  
  pstmt.executeUpdate(); //execute query
  
  request.setAttribute("successMsg","Register Successfully...! Please login"); //register success messeage

  con.close(); //close connection
 }
}
catch(Exception e)
{
 out.println(e);
}
%> 
 

5. welcome.jsp

This is the welcome page. After a user login properly, this page appears with a login email address.

This page provides the hyperlink called "logout.jsp" page. If users click on this link then they will logout and be redirected to the "index.jsp" page.

<div class="main-content">
 
 <center>
 
 <%
 if(session.getAttribute("login")==null || session.getAttribute("login")==" ") //check condition unauthorize user not direct access welcome.jsp page
 {
   response.sendRedirect("index.jsp"); 
 }
 %>
 
 <h1> Welcome, <%=session.getAttribute("login")%> </h1>

 <h2><a href="logout.jsp">Logout</a></h2>
    
 </center>
  
</div>
 

6. logout.jsp

This page contains only two lines of JSP code to use session.invaidate() method to destroy the current authenticated user session. The page will immediately move to the 'login/index' page after destroying the session.

<% 
session.invalidate(); //destroy session
response.sendRedirect("index.jsp");
%>
 

7. Test Project in XAMPP Server

Start the XAMPP server and click on Apache, MySQL, and Tomcat after starting the whole service.

Open your preferred web browser and type this URL http://localhost:8080/login-register-jsp/ and test this web project.

Download Codes