Popular Posts

Monday, June 1, 2009

Implement JavaScript with JSP

In this section we are going to implement insert data, delete data, and update data using with JDBC database and also using of JavaScript.

Step 1: Create employee form (EmployeeInformation.jsp) .

In this step first of all create Employee information form and retrieved employee id from database using with JDBC database.

Here is the code EmployeeInformation.jsp
<%@ page language="java" import="java.lang.*" import="java.sql.*" %>

<html>
<body border="1" bgcolor="pink" width="650">
<%
Connection con = null;
String url = "jdbc:mysql://192.168.10.211:3306/";
String db = "amar";
String driver = "com.mysql.jdbc.Driver";
String userName ="amar";
String password="amar123";
Class.forName(driver);
con = DriverManager.getConnection(url+db,userName,password);
Statement stmt=null;
%>

<form method="GET" ACTION="ProcessAction.jsp">
<h3> <P ALIGN="CENTER"> <FONT SIZE=5> EMPLOYEE INFORMATION </FONT> </P> </h3> </br> </br>
<br>
<br>
<table callspacing=5 cellpadding=5 bgcolor="lightblue" colspan=2 rowspan=2 align="center">
<tr>
<td> <font size=5> Enter Employee ID </td>
<td> <input type="TEXT" ID="id" name="empid"> </font>
<select name="empIds" onchange="document.getElementById('id').value=this.options[this.selectedIndex].text"> <option>Select One</option>
<%
String rec="SELECT empid,empname FROM Employee ORDER BY empid";
try {
stmt=con.createStatement();
ResultSet rs=stmt.executeQuery(rec);
while(rs.next())
{
%>
<option><%= rs.getInt(1)%></option>
<%}
}
catch(Exception e){
System.out.println(e);
}
%>
</select>
</font> </td>
</tr>
<tr>
<td> <font size=5> Enter Employee Name </td>
<td><input type="text" name="empname"> </font> </td>
</tr>
<tr> <font size=5> <B>
<td><input type="RADIO" name="r1" VALUE="add" >Insert </td>
</tr>
<tr>
<td><input type="RADIO" name="r1" VALUE="del" >Delete </td>
</tr>
<tr>
<td><input type="RADIO" name="r1" VALUE="mod" >Modify </td>
</tr>
</font> </b>
<tr> <td><input type="SUBMIT" VALUE="Submit">
<input type="RESET" value="Reset"> </TD>
</tr>
</body>
</html>



Step 2 : Create "ProcessAction.jsp" for Process the Data and forward according to user requirement.

In this step first of all we will create ProcessAction.jsp for getting all string value using with getParameter() method and forward on different page like JSPInsertAction.jsp, ClearAction.jsp, and update.jsp.
<%@ page language="java" %>
<%@ page import="java.lang.*" %>
<%@ page import="java.sql.*" %>
<%
String str=request.getParameter("r1");
String name=request.getParameter("empname");
String code=request.getParameter("empid");

if(str.equals("add")) {
%>
<jsp:forward page="JSPInsertAction.jsp"/>

<%
}
else if(str.equals("del")) {
%>
<jsp:forward page="ClearAction.jsp" />
<%
}
else if(str.equals("mod")) {
%>
<jsp:forward page="update.jsp" />
<%
}
else {
%>
<jsp:forward page="Noresponse.html" />
<%
}
%>


Step 3: Create data insert action page ("JSPInsertAction.jsp").

This code using for insert data into database by using JDBC database. When you will select same employee id and employee name then massage will display employee id already exit in database.
<%@ page language="java" import="java.lang.*" import="java.sql.*" %>

<HTML>
<BODY>
<FORM NAME="f1" ACTION="EmplyeeInformation.jsp">
<%
Connection con = null;
String url = "jdbc:mysql://192.168.10.211:3306/";
String db = "amar";
String driver = "com.mysql.jdbc.Driver";
String userName ="amar";
String password="amar123";

String str=request.getParameter("r1");
String empname=request.getParameter("empname");
String code=request.getParameter("empid");
int ent=0;
String failed="";
try{
String click="SELECT COUNT(*) FROM Employee WHERE empid='"+code+"' and empname='"+empname+"'";
Class.forName(driver);
con = DriverManager.getConnection(url+db,userName,password);
Statement stmt=null;
stmt=con.createStatement();
ResultSet ok = stmt.executeQuery(click);
while(ok.next()) {
ent=ok.getInt(1);
}
if(ent==0) {
String insertQry = "insert Employee values('"+code+"','"+empname+"')";
int val = stmt.executeUpdate(insertQry);

%>
<script language="javascript">
alert("Insertion successful");
document.location="EmplyeeInformation.jsp";
</script>
<%
}
if(ent==1) {
%>
<script language="javascript">
alert("This Emp ID already Exists");
document.location="EmplyeeInformation.jsp";
</script>
<%
}
stmt.close();
con.close();
}
catch(Exception e) {
out.println(e.toString());
}
%>
</FORM>
</BODY>
</HTML>

Step 4: Create data deletion code from database ("ClearAction.jsp").

In this step you will learn how to delete data from database. When, you will select employee id and employee name then select delete radio button after selecting delete radio button when you will click on submit button then data will successfully delete from database.
<%@ page language="java" import="java.lang.*" import="java.sql.*" %>

<%
Connection con = null;
String url = "jdbc:mysql://192.168.10.211:3306/";
String db = "amar";
String driver = "com.mysql.jdbc.Driver";
String userName ="amar";
String password="amar123";

String str=request.getParameter("r1");
String name=request.getParameter("empname");
String code=request.getParameter("empid");
int EmpID=Integer.parseInt(code);
try {
Class.forName(driver);
con = DriverManager.getConnection(url+db,userName,password);
String sql = "delete from Employee where empid= ?";
PreparedStatement stmt=null;
stmt=con.prepareStatement(sql);
stmt.setInt(1,EmpID);
int erase=stmt.executeUpdate();
if(erase==0) { %>
<script language="javascript">
alert("Deletion successful");
</script>
<%
}
if(erase==1) { %>
<script language="javascript">
alert("Deletion successful");
</script>
<%
}

stmt.close();
con.close();
out.println("Data delete successfully from database.");
}
catch(Exception e) {
out.println(e);
}
%>

Step 5: Create update data code ("update.jsp").

In this step you will learn, how to modify data in database by using JDBC database.
<%@ page language="java" import="java.lang.*" import="java.sql.*" %>

<HTML>
<BODY>
<%
Connection con = null;
String url = "jdbc:mysql://192.168.10.211:3306/";
String db = "amar";
String driver = "com.mysql.jdbc.Driver";
String userName ="amar";
String password="amar123";


String rep=request.getParameter("empname");
String code=(String)request.getParameter("empid");
int ID=Integer.parseInt(code);
try {
Class.forName(driver);
con = DriverManager.getConnection(url+db,userName,password);
String rec="UPDATE Employee SET empname='"+rep+"' where empid='"+ID+"'";

Statement stmt=null;
stmt=con.createStatement();
int mod=stmt.executeUpdate(rec);
if(mod==0) { %>
<script language="javascript">
alert("This Emp ID already Exists");
</script>
<%
}
if(mod==1) { %>
<script language="javascript">
alert("Record Updated Successfully");

</script>
<%
}
con.commit();
stmt.close();
con.close();

}
catch(Exception e) { %>
<script language="javascript">
alert("Please Enter New Name");
document.location="EmplyeeInformation.jsp";
</script>
<%
}

%>
</BODY>
</HTML>














Retrieving the data posted to a JSP file from HTML file

Now I will show you how to retrieve the data posted from a HTML file in a JSP page. Consider an html page that prompts the user to enter his/her name, let's call it getname.htm. Here is the code of the html file:

<html>
<head>
<title>Enter your name</title>
</head>
<body>
<p> </p>
<form method="POST" action="showname.jsp">

<p><font color="#800000" size="5">Enter your name:</font><input type
="text" name="username" size="20"></p>

<p><input type="submit" value="Submit" name="B1"></p>
</form>
</body>
</html>



The target of form is "showname.jsp", which displays the name entered by the user. To retrieve the value entered by the user we uses the

request.getParameter("username");

code.

Here is the code of "showname.jsp" file:

<%@page contentType="text/html" %>

<!--

http://www.roseindia.net/jsp

-->

<html>

<body>

<p><font size="6">Welcome :  <%=request.getParam
eter("username")%></font></p>

</body>

</html>

Reading Request Information

When an HTTP client such as web browser sends a request to a wen server, along with the request it also sends some HTTP variables like Remote address, Remote host, Content type etc. In some cases these variables are useful to the programmers. So here is the code of the jsp file which prints the HTTP request information:

<%@page contentType="text/html" import="java.util.*" %>

<!--

http://www.roseindia.net/jsp

-->

<html>

<body>

<p><font size="5" color="#800000">Request Information:</font></p>

<div align="left">

<table border="0" cellpadding="0" cellspacing="0" width="70%" bgcolor="#EEFFCA">

<tr>

<td width="33%"><b><font color="#800000">Request Method:</font></b></td>

<td width="67%"><font color="#FF0000"><%=request.getMethod()%></font></td>

</tr>

<tr>

<td width="33%"><b><font color="#800000">Request URI:</font></b></td>

<td width="67%"><font color="#FF0000"><%=request.getRequestURI()%></font></td>

</tr>

<tr>

<td width="33%"><b><font color="#800000">Request Protocol:</font></b></td>

<td width="67%"><font color="#FF0000"><%=request.getProtocol()%></font></td>

</tr>

<tr>

<td width="33%"><b><font color="#800000">Path Info:</font></b></td>

<td width="67%"><font color="#FF0000"><%=request.getPathInfo()%></font></td>

</tr>

<tr>

<td width="33%"><b><font color="#800000">Path translated:</font></b></td>

<td width="67%"><font color="#FF0000"><%=request.getPathTranslated()%></font></td>

</tr>

<tr>

<td width="33%"><b><font color="#800000">Query String:</font></b></td>

<td width="67%"><font color="#FF0000"><%=request.getQueryString()%></font></td>

</tr>

<tr>

<td width="33%"><b><font color="#800000">Content length:</font></b></td>

<td width="67%"><font color="#FF0000"><%=request.getContentLength()%></font></td>

</tr>

<tr>

<td width="33%"><b><font color="#800000">Content type:</font></b></td>

<td width="67%"><font color="#FF0000"><%=request.getContentType()%></font></td>

</tr>

<tr>

<td width="33%"><b><font color="#800000">Server name:</font></b></td>

<td width="67%"><font color="#FF0000"><%=request.getServerName()%></font></td>

</tr>

<tr>

<td width="33%"><b><font color="#800000">Server port:</font></b></td>

<td width="67%"><font color="#FF0000"><%=request.getServerPort()%></font></td>

</tr>

<tr>

<td width="33%"><b><font color="#800000">Remote user:</font></b></td>

<td width="67%"><font color="#FF0000"><%=request.getRemoteUser()%></font></td>

</tr>

<tr>

<td width="33%"><b><font color="#800000">Remote address:</font></b></td>

<td width="67%"><font color="#FF0000"><%=request.getRemoteAddr()%></font></td>

</tr>

<tr>

<td width="33%"><b><font color="#800000">Remote host:</font></b></td>

<td width="67%"><font color="#FF0000"><%=request.getRemoteHost()%></font></td>

</tr>

<tr>

<td width="33%"><b><font color="#800000">Authorization scheme:</font></b></td>

<td width="67%"><font color="#FF0000"><%=request.getAuthType()%></font></td>

</tr>

</table>

</div>

</body>

</html>