How To Page Refresh Using JavaScript In JSP

In this section, we develop an User Login application . We created five file sign.jsp,signout.jsp,user_register.jsp,userlogin.jsp and useradd.jsp.

Brief description of the flow of the application:

User opens sign.jsp in the browser and clicks on "Sign In" button.
New opens where user can provide username and password.
If user enters correct username and password user. If the login is successful, parent window is refreshed and user details is displayed.
User can also signup for new account.

Step 1: Create a web page(sign.jsp) to show a button to Login user.

<%@ page import="java.sql.*" %> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>
  function signout()
  {
	  
	   window.location.href="signout.jsp";
  }
  </script>
 </HEAD>

 <BODY>
 <br><br><br><br><br>
 <table width="250px" align="center" bgcolor="#CDFFFF" border=0 style="border:1px solid;">
<%
if(session.getAttribute("username")!=null && session.getAttribute("password")!=null)
{
 String username="";
  String pass="";
Connection conn = null;
    String url = "jdbc:mysql://localhost:3306/";
    String dbName = "user_register";
    String driver = "com.mysql.jdbc.Driver";
    String userName = "root"; 
    String password = "root";
    String data = "";
    int sumcount=0; 
	Statement st;
	
    try {
      Class.forName(driver).newInstance();
	
      conn = DriverManager.getConnection(url+dbName,userName,password);
	    
	   username = session.getAttribute("username").toString();
	  
	   pass = session.getAttribute("password").toString();

	    String query = 
           "select * from userregister where  username='"+username+"' and password='"+pass+"'";

	
       st = conn.createStatement();
	   ResultSet  rs = st.executeQuery(query);
	   if(rs.next())
		{
		   %>
	      <tr><td colspan=3 align="center"><b>User Details</b></td></tr>
	     <tr><td><b>User Name </b></td><td><b>:</b></td><td><%=rs.getString(2)%></td></tr>
	     <tr><td><b>First Name </b></td><td><b>:</b></td><td><%=rs.getString(4)%></td></tr>
	     <tr><td><b>Last Name </b></td><td><b>:</b></td><td><%=rs.getString(5)%></td></tr>
	     <tr><td><b>City </b></td><td><b>:</b></td><td><%=rs.getString(6)%></td></tr>
	      <tr><td><b>State </b></td><td><b>:</b></td><td><%=rs.getString(7)%></td></tr>
              <tr><td><b>Country</b></td><td><b>:</b></td><td><%=rs.getString(8)%></td></tr>
			  <%
		}

       
		out.println(data);
		
	}
	catch (Exception e) {
      e.printStackTrace();
    }
	


%>

<tr>
  <td align="center" colspan=3>
<input type="button" name="signout" value="Sign Out" onclick="signout();">
</td>
</tr>
	
<%
}
else
{
%>
<tr><td colspan=2>&nbsp;</td></tr>
<tr><td colspan=2 align="center"><b>To Login  User Click on  Sign In</b></td></tr>
<tr><td colspan=2>&nbsp;</td></tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="signin" value="Sign In" 
onClick="window.open('userlogin.jsp','mywindow','width=500,
height=350,toolbar=no,resizable=yes,menubar=yes')">
</td></tr>
<tr><td colspan=2>&nbsp;</td></tr>
<%
}
%>

 </table> 
 </BODY>
</HTML>

Step:2Create a web page (userlogin.jsp) to User Login.

<html>

      <head>

      <style>

      a{

      font: bold 13px Verdana;

      padding: 2px;

      padding-left: 4px;

      display: block;

      width: 100px;

      color: black;

      text-decoration: underline;

      }

      a:hover{

      

    color: black;

	text-decoration: none;

      } 

      </style>

      

      

      <script>

      function validate()

      {

	 if(document.frm.username.value=="")

	{

		 alert("Please enter username");

		 document.frm.username.focus();

		 return false;

	}

	 if(document.frm.password.value=="")

	{

		 alert("Please enter username");

		 document.frm.password.focus();

		 return false;

	}

	return true;

      }

      function trim(stringToTrim) {

	return stringToTrim.replace(/^\s+|\s+$/g,"");

      }

      function login()

      { 

	if(validate())

	{

      

	xmlHttp=GetXmlHttpObject()

	if (xmlHttp==null)

	{

	alert ("Browser does not support HTTP Request")

	return

	}

      

	var username =document.getElementById("username").value;

	var password =document.getElementById("password").value;

      

      

      

	var url="userloginmid.jsp"

	url=url+"?username="+username+"&password="+password;

	//alert(url);

      

	xmlHttp.onreadystatechange=stateChanged 

	xmlHttp.open("GET",url,true)

	xmlHttp.send(null)

	}

      

      }

      

      function stateChanged() 

      { 

      

      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

 { 

      

  var showdata = xmlHttp.responseText; 

  var str  = showdata.toString();
   if(trim(str)=="successLogin")

	 {

		window.opener.location.reload();

		window.location.reload(); 

		window.close();

	 }

	 else

	 {

		 	window.location.href="userlogin.jsp?errmsg=error";

	 }

      

 } 

      }

      

      function GetXmlHttpObject()

      {

      var xmlHttp=null;

      try

 {

 // Firefox, Opera 8.0+, Safari

 xmlHttp=new XMLHttpRequest();

 }

      catch (e)

 {

 //Internet Explorer

 try

  {

  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

  }

 catch (e)

  {

  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

 }

      return xmlHttp;

      }

      

      </script>

      

      </head>

      <body>

      <br><br>

      <%

      

      String errmsg="";

      if(request.getParameter("errmsg")!=null && request.getParameter("errmsg")!="")

      {

   errmsg ="Invalid username and password";

      }

      %>

      

      <form name="frm">

      <table border="0" width="400px" align="center" bgcolor="#CDFFFF">

      <tr><td colspan=2 align="center" style="color:red;"><%=errmsg%></td></tr>

      <tr><td colspan=2 align="center">&nbsp;</td></tr>

      <tr><td colspan=2 align="center"><b>User Login</b></td></tr>

      <tr><td>Username : </td><td><input type="text" name="username" id="username"></td></tr>

      <tr><td>Password : </td><td><input type="password" name="password" id="password"></td></tr>

      

      <tr><td colspan=2 align="center"><input type="button" name="submit" value="Submit" onclick="login();"></td></tr>

      <tr><td colspan=2 align="center"><a href="user_register.jsp">New User</a></td></tr>

      </form>

      </body>

      </html>

Step 3:Create a web page (userloginmid.jsp) to retieve the details of selected user.

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

    <%

    String username = request.getParameter("username").toString();

    String pass = request.getParameter("password").toString();

    

    Connection conn = null;

    String url = "jdbc:mysql://localhost:3306/";

    String dbName = "user_register";

    String driver = "com.mysql.jdbc.Driver";

    String userName = "root"; 

    String password = "root";

    String data = "";

    int sumcount=0; 

	Statement st;

    try {

      Class.forName(driver).newInstance();
      conn = DriverManager.getConnection(url+dbName,userName,password);

	    String query = "select count(*) from userregister where  username='"+username+"' and password='"+pass+"'";
         st = conn.createStatement();

	   ResultSet  rs = st.executeQuery(query);

	   if(rs.next())

		{

		     System.out.println(query);

		   if(rs.getInt(1)>0)

			{

			   session.setAttribute("username",username);

			    session.setAttribute("password",pass);

		    data = "successLogin";

			}

		}

		out.println(data);

	}

	catch (Exception e) {

      e.printStackTrace();

    }

 %>

Step 4:Create a web page (useradd.jsp) to add new user.


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

    <%

    String username = request.getParameter("username").toString();

    String pass = request.getParameter("password").toString();

    String first_name = request.getParameter("first_name").toString();

    String last_name = request.getParameter("last_name").toString();

    String city = request.getParameter("city").toString();

    String state = request.getParameter("state").toString();

    String country = request.getParameter("country").toString();

    String data="";

    

    

    

    Connection conn = null;

    String url = "jdbc:mysql://localhost:3306/";

    String dbName = "user_register";

    String driver = "com.mysql.jdbc.Driver";

    String userName = "root"; 

    String password = "root";

    

    int sumcount=0; 

	Statement st;

    try {

      Class.forName(driver).newInstance();

    

      conn = DriverManager.getConnection(url+dbName,userName,password);

	    String query = "insert into userregister set
    username='"+username+"',password='"+pass+"',first_name='"+first_name+

    "',last_name='"+last_name+"',city='"+city+"',state='"+state+"',country='"+country+"'";

	  System.out.println("query : " + query);

       st = conn.createStatement();

	   int  i = st.executeUpdate(query);

	   if(i>0)

		{

		    data ="successAdd";

		}

    

    

		out.println(data.trim());

	}

	catch (Exception e) {

      e.printStackTrace();

    }

 %>

Successful Output of the program:

Click on Sign In to Login User:

Output when Successfully Submit the User Login refresh the parent window and show the user details.

For New User.

Download the full web application shows here.

Download the application

Related Tags for How To Page Refresh Using JavaScript In JSP:
c, jsp, ide, browser, button, user, password, word, vi, click, new, name, cli, id, open, row, js, rows, where, to, wse, username, ws, e, sign, can, li, use, pe, browse, in, pass, as, m, ca, j, cl, pen, me, pro, s, sp, k, and, tt, s, s, rd, th, sw, .js, pr, nd, on, o

«Previous Index Next»