[an error occurred while processing this directive]

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

 

                         

[an error occurred while processing this directive]