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> </td></tr>
<tr><td colspan=2 align="center"><b>To Login User Click on Sign In</b></td></tr>
<tr><td colspan=2> </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> </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"> </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.