Database Application in JSP using

NetBeans

INDEX

1. Basic
2. Creating application and adding drivers
3. Creating Database Connection
4. Creating Database Connection pool in application
5. Creating Insert page
6. Creating Update page
7. Creating Delete page
8. Final Screenshots

1. Basic:-
We make simple JSP application in NetBeans. It contains four jsp files.
 o Index.jsp : contains link for other three pages.
o Insert.jsp : Insert data into STUDENT table and display.
o Update.jsp : Update data of STUDENT table and display.
o Delete.jsp : Delete data from STUDENT table and display.

STUDENT table contains three fields and database is made using JavaDB.

COLUMN NAME TYPE DETAIL

ID VARCHAR(15) PRIMARY KEY
NAME VARCHAR(40) NOT NULL
BRANCH VARCHAR(40) NOT NULL

2. Creating application and adding drivers:

o Start NetBeans.
o Go to File -> New project.

o You will see the above window. Here from categories choose Java Web.
o It will show you projects as shown in fig in right side tab.
o Select Web Application and give next.
o You will see next window as shown below.
o Here you can specify project name and path where to store project.
o When you give next it will show the web server settings.
o We are using GlassFish as web server.
o After giving next it will show window to choose framework.
o We are not using framework here so don’t select anyone and click finish
button. Our project is created.
o Index.jsp page is automatically created by default. Now, you have to
create other three JSP pages.
o To do it, in project window write click on Web pages -> New -> JSP.
o It will open new window which ask for page name. Give appropriate
name.
o Create Insert.jsp,Update.jsp and Delete.jsp.
o I have used JavaDB as database. So, I have to include driver for that into
my library. If you are using other database then you have to include
appropriate drivers.
o Right click on Libraries -> Add JAR/Folders….
o It will open a window, browse through your hard disk and select
appropriate JAR and click open.
o It will add drivers to access database into your project.
3. Creating Database Connection:
o Go to services tab.
o Right click on Databases and chose New Connection….
o You have to fill database details here.

o Details for these fields are as follows.

 Name:- database type in this case it is JavaDB.
 Host:- It is the name of computer on which database is resides.
 Port:- Port number through which you connect to database
 Database, User Name and Password is self explanatory.
 o When you will click ok it will create connection to your database.
o I hope you have created STUDENT table in your database.

4. Creating Database Connection pool in application:

o Go to project window.
o Right click on server resources -> New -> Others. It will open a window
as shown below.

o Select your project.

o In Categories chose GlassFish , File Type select JDBC Resource and
click next.
o Select create New_JDBC Connection Pool, Give JNDI name.
o Here, I have given pool name jdbc/myDatasource.
o Then give next, so it will ask for properties at that window just click next.
o You will see window shown below.
o Here, Give connection pool name.
o Select a connection that you have created previously in services and click
next.
o You will see connection pool properties. Now click finish button.
o Open Web pages -> WEB-INF -> web.xml
o Click on references tab, in Resource references click on Add.
 o Give resource name in the textbox. This is JNDI resource that we already
created.
o Open Web pages -> WEB-INF -> sun-web.xml
o Between </jsp-config> and </sun-web-app> tag enter following lines.
<resource-ref>
<res-ref-name>jdbc/myDatasource</res-ref-name>
<jndi-name>jdbc/myDatasource</jndi-name>
</resource-ref>

o It will create reference name correspond to JNDI name.

o You can chose any arbitrary name as reference name.

5. Creating Insert page:

o Open Insert page, if not already open.
o Inside body part create one form. Put action of this form as insert.jsp.
o Inside that form tag create tax boxes and submit button.
o Put all things in such a way so that final view will look like as follows.
o

o When you click submit button, request will go to page it self.

o So page will be reloaded. Code for this html form is as follows.
<form action="insert.jsp" method="POST">
 <table border="0">
<tbody>
<tr>
<td>ID:-</td>
<td><input type="text" name="id" value="" size="30" /></td>
</tr>
<tr>
<td>NAME:-</td>
<td><input type="text" name="name" value="" size="30" /></td>
</tr>
<tr>
<td>BRANCH:-</td>
<td><input type="text" name="branch" value="" size="30" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="SUBMIT" /></td>
</tr>
</tbody>
</table>
</form>

o Above <form> tag, put three c:set tags to get value of id, name and text.
o First time when this page is called these values are null.
o When we come to this page after click on submit, we get parameters from
tax boxes that we want to enter into database.
<c:set var="id" value="${param.id}"/>
<c:set var="name" value="${param.name}"/>
<c:set var="branch" value="${param.branch}"/>

o For using standard tag library, you have to include following two lines at
top in JSP page.
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

o After this c:set statements insert one JSTL IF tag.

o To do this, go to palette window, under that go to JSP tag, drag and drop
JSTL If from there to application after last c:set tag.
o It will show you following window.
o Write condition as shown in fig.
o If this condition is true then and only then we want to insert data into
database.
o So all the code inside c:if tage will be executed if and only if condition is
true.
o Inside c:if tag write code for insert query.
o To do this, go to palette window, under that go to Database tag, drag and
drop DB Insert from there to application inside c:if tag.
o It will show you following window. In which, you have to insert data
source name that we have created and insert query as shown in fig.
o We want to insert parameter value that we set using c:set.
o So after INSERT statement, we place three sql:param tags to set value of
question mark.
o Add following three statements after INSERT statement but inside
sql:update tag.
<sql:param value="${id}"/>
<sql:param value="${name}"/>
<sql:param value="${branch}"/>

o These statements set value of id in place of first question mark, value of

name in place of second question mark and so on.
o Now, code to insert data into database table is over.
o We want to print STUDENT table detail.
o To generate report, go to palette window, under that go to Database tag,
drag and drop DB Report from there to application after </form> tag.
o Here, insert query, data source name and variable as shown in fig and
click ok.

o It will add some code.

o When you built and run application for first time it will show empty html
table with only column names in report.
o Because initially database table is empty.
 o After you insert data into database, report show data into html table.

6. Creating Update page:

o We made update page such that, we can not update id (primary key).
o We choose any id and enter updated value for name and branch for that.
o All things are same as Insert.jsp page except followings.
o After clicking submit button, we run UPDATE query instead of INSERT
query.
o You have to change action of form to update.jsp
o Instead of using text box for id, we use combo box. Code for that is as
shown below.
<select name="id">
<sql:query var="result" dataSource="jdbc/myDatasource">
SELECT ID FROM STUDENT
</sql:query>
<c:forEach var="row" items="${result.rowsByIndex}">
<c:forEach var="column" items="${row}">
<option> <c:out value="${column}"/></option>
</c:forEach>
</c:forEach>
</select>

o Instead of insert query we put update query as shown below.

<sql:update var="res" dataSource="jdbc/myDatasource">
UPDATE STUDENT SET NAME = ?, BRANCH = ? WHERE ID
=?
<sql:param value="${name}"/>
<sql:param value="${branch}"/>
<sql:param value="${id}"/>
</sql:update>
o This completes our update page.

7. Creating Delete page:

o All things are same as update page except following.
o We have to change action of form tag to Delete.jsp
o We remove tax box and label for name and branch.
o We also remove c:set for name and branch.
o Name and branch are also removed from every where.
o We will add one more option name as select in combo box for id.
o Now, if id is null or select then we have to do nothing.
o Otherwise we have to run DELETE query as shown below.
<c:set var="id" value="${param.id}"/>
<c:if test="${(id != null) && (id != 'select') }">
 <sql:update var="res" dataSource="jdbc/myDatasource">
DELETE FROM STUDENT WHERE ID = ?
<sql:param value="${id}"/>
</sql:update>
</c:if>

8. Final Screenshots:
o Insert page

o Update Page

o Delete Page