DCET WP LAB

MOHAMMED ABDUL MATEEN 97 160311733024
9. CREATION OF DYNAMIC CONTENT IN WEB
APPLICATION USING JSP
1. Passing Data Between JSP Pages
1. Open NetBeans IDE 6.5.1

2. Goto file-> New Project



DCET WP LAB
MOHAMMED ABDUL MATEEN 98 160311733024
3. Choose project -> Categories : Java Web -> Web Application ->Click Next

4. Give a project name as Data Passing and Click on Next.

5. Select Glassfish server and click on Next .

6. Click on finish (without checking any of the checkboxes)
DCET WP LAB
MOHAMMED ABDUL MATEEN 99 160311733024

7. A project can be visualized in Project window. Right click on Data Passing project -> Select
New -> JSP

8. A window appears. Give the Inputform name -> Click on Finish

DCET WP LAB
MOHAMMED ABDUL MATEEN 100 160311733024
9. InputForm.jsp will be opened automatically, there just write the following code.
Inputform.jsp
<%--
Document : index
Created on : Mar 13, 2014, 12:02:18 PM
Author : dcet
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Data Passing Demo</title>
</head>
<body>
<%
if(request.getParameter("Username")=="")
{
%>
<jsp:forward page="Errorpage.jsp"/>
<%}
else if(request.getParameter("Username")!=null)
{
%>
<jsp:forward page="MyJSP.jsp"/>
<%
}
else
{%>
<form method="get" action="InputForm.jsp">
<b>Enter Username:</b>
<input type="text" name="Username">
<br/>
<b>Enter Password:</b>
<input type="password" name="Password">
<input type="submit" value="Enter">
</form>
<%
}
%>
</body>
</html>
DCET WP LAB
MOHAMMED ABDUL MATEEN 101 160311733024


10. After entering the code -> Goto file->save all.
11. Then again go to your project window. Right click on Data Passing project -> Select New ->
JSP

12. A window appears. Give the MyJSP name -> Click on Finish
DCET WP LAB
MOHAMMED ABDUL MATEEN 102 160311733024

13. MyJSP.jsp will be opened automatically, there just write the following code.
MyJSP.jsp
<%--
Document : index
Created on : Mar 13, 2014, 12:02:18 PM
Author : dcet
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Data PassingDemo</title>
</head>
<body>
<h1>Hello User!</h1>
<p>Welcome <b>${param.Username}</b>
</body>
</html>
DCET WP LAB
MOHAMMED ABDUL MATEEN 103 160311733024


14. After entering the code -> Goto file->save all.
15. Then again go to your project window. Right click on Data Passing project -> Select New ->
JSP

16. A window appears. Give the ErrorPage name -> Click on Finish
DCET WP LAB
MOHAMMED ABDUL MATEEN 104 160311733024

17. ErrorPage.jsp will be opened automatically, there just write the following code.
ErrorPage.jsp
<%--
Document : index
Created on : Mar 13, 2014, 12:02:18 PM
Author : dcet
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Error Page</title>
</head>
<body>
<p>You have not given username</p>
<a href="InputForm.jsp">Click here to goback</a>
</body>
</html>
DCET WP LAB
MOHAMMED ABDUL MATEEN 105 160311733024


18. After entering the code -> Goto file->save all.
19. Select your project->Configuration Files->Double click on web.xml.

20. A window appears. Click on the XML tab->Change the name of the welcome file as
Inputform.jsp ->Goto file->Save all.
DCET WP LAB
MOHAMMED ABDUL MATEEN 106 160311733024

21. Press F6 to debug the project and the output is seen on the browser.

22. Enter any username and password and click enter.
DCET WP LAB
MOHAMMED ABDUL MATEEN 107 160311733024

23. If username is empty and you hit enter then errorpage.jsp will be displayed.


DCET WP LAB
MOHAMMED ABDUL MATEEN 108 160311733024
2. Program To Demonstrate JSP Using Beans
1. Open NetBeans IDE 6.5.1

2. Goto file-> New Project



DCET WP LAB
MOHAMMED ABDUL MATEEN 109 160311733024
3. Choose project -> Categories : Java Web -> Web Application ->Click Next

4. Give a project name as Beans and Click on Next.

5. Select Glassfish server and click on Next .

6. Click on finish (without checking any of the checkboxes)
DCET WP LAB
MOHAMMED ABDUL MATEEN 110 160311733024

7. Go to projects window -> Beans -> Source Packages -> default package -> right click ->
choose New -> Java Class -> Enter Class Name "Language Bean" and package
"com.apress.beans" -> click -> Finish.

8. Source Package opens the LanguageBean.java file, there write the below code
package com.apress.beans;

public class LanguageBean {
String name;
String Language;
}

9. In Menu-bar select Refractor -> Encapsulate Fields -> Select All -> Refractor.
10. A project can be visualized in Project window. Right click on Data Passing project -> Select
New -> JSP
DCET WP LAB
MOHAMMED ABDUL MATEEN 111 160311733024

11. All the functions will automatically gets listed, there complete the following program and press
(ALT+Shift+F) for Format.

LanguageBeans.java
package com.apress.beans;
public class LanguageBean {
private String name;
private String language;
public LanguageBean() {
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
DCET WP LAB
MOHAMMED ABDUL MATEEN 112 160311733024
public String getLanguage() {
return language;
}
public void setLanguage(String language) {
this.language = language;
}
public String getLanguageComments() {
if (language.equals("Java")) {
return "The King Of OO languages.";
} else if (language.equals("C++")) {
return "Rather too complex for some folks liking.";
} else if (language.equals("Perl")) {
return "Ok If you like incomprehsible code.";
} else {
return "Sorry, I've never heard of " + language + ".";
}
}
}
12. Go to project window -> right click on Beans -> New -> HTML -> Enter file name as
beans.html -> finish


13. Write the following code in beans.html and press (ALT+Shift+F) to format.

Beans.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Use Bean Action Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
DCET WP LAB
MOHAMMED ABDUL MATEEN 113 160311733024
</head>
<body>
<h1>UseBean Action Test Page</h1>
<form action="beans.jsp" method="POST">
<p>Please enter your username:
<input type="text" name="name" value="" />
<br>What is your favourite programming language?
<select name="language">
<option value="Java">Java</option>
<option value="C++">C++</option>
<option value="Perl">Perl</option>
</select>
</p>
<p><input type="submit" value="Submit Information"></p>
</form>
</body>
</html>

14. After entering the code -> Goto file->save all.
15. Right click on ProjectName -> New -> JSP -> Enter name as beans.jsp -> Finish


16. Write the program as given of beans.jsp and click (ALT+Shift+F) to format.
Beans.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<jsp:useBean id="LanguageBean" scope="page" class="com.apress.beans.LanguageBean">
DCET WP LAB
MOHAMMED ABDUL MATEEN 114 160311733024
<jsp:setProperty name="LanguageBean" property="*"/>
</jsp:useBean>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>UseBean Action Test Result</title>
</head>
<body>
<h1>Use Bean Action Test Result</h1>
<p>Hello, <jsp:getProperty name="LanguageBean" property="name"/>.</p>
<p>Your Favorite language is
<jsp:getProperty name="LanguageBean" property="language"/>.</p>
<p>My Comments on your language;</p>
<p><jsp:getProperty name="LanguageBean" property="languageComments"/></p>
</body>
</html>

17. Select your project->Configuration Files->Double click on web.xml.

18. A window appears. Click on the XML tab->Change the name of the welcome file as
beans.html ->Goto file->Save all.
19. Press F6 to debug the project and the output is seen on the browser.
DCET WP LAB
MOHAMMED ABDUL MATEEN 115 160311733024

20. Enter any username, select your favorite language and click Submit Information.


DCET WP LAB
MOHAMMED ABDUL MATEEN 116 160311733024
10. APPLICATION FOR DATABASE ACCESS USING JSP
1. Open -> Start -> Programs -> MySql Command Line Client.
2. Enter the password as "dcet" and type the following code

create database books;
use books;
create table books_info(name varchar(20),ISBN numeric(20),author varchar(20));
insert into books_info values("neon",8041,"rematrix");
insert into books_info values("manish",8031,"matrix");
insert into books_info values("nish",8301,"tetrix");
select * from books_info;



3. Then Go to Start -> Programs -> apachetomcat 5.5 -> configure tomcat -> click Start

4. Next Go to C drive -> Program files -> Apache Software Foundation -> Tomcat 5.5 ->
Webapps -> jspexamples -> create a folder named "jdbc-connection" inside this folder.
5. In this folder, open notepad and write the following program and save it as Inputdata.jsp.
DCET WP LAB
MOHAMMED ABDUL MATEEN 117 160311733024

Inputdata.jsp
<%@page language="java" import="java.io.*"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.ResultSetMetaData"%>
<%@page import="java.sql.Statement"%>
<%
Connection conn=null;
ResultSet rs=null;
Statement stmt=null;
Class.forName("com.mysql.jdbc.Driver").newInstance();
conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/books","root","dcet");
out.write("connected to mysql");
stmt=conn.createStatement();
rs=stmt.executeQuery("select * from books_info");
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JDBC Connection</title>
</head>
<body>
<center>
<h1>JDBC Connection</h1>
<h2>Border List</h2>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><b>Book Name</b></td>
<td><b>ISBN</b></td>
<td><b>Author</b></td>
</tr>
<%
while(rs.next())
{
%>
<tr>
<td><%=rs.getString("name")%></td>
<td><%=rs.getString("isbn")%></td>
<td><%=rs.getString("author")%></td>
</tr>
DCET WP LAB
MOHAMMED ABDUL MATEEN 118 160311733024
<%}
rs.close();
stmt.close();
conn.close();
%>
</table>
</center>
</body>
</html>
6. Save the file and Goto browser and open http://localhost:8090/jsp-examples/jdbc-
connection/Inputdata.jsp
7. There you will see the following output.