CRUD & prev/next, List buttons. You can select a person from the
master list and work on the detail screen.
Both the detail and list JSP's use JQuery and AJAX calls.
The server side is implemented via Servlets and JSPs.
The data is used from a MySQL table.
CREATE TABLE `persontab` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`firstname` varchar(20) DEFAULT NULL,
`lastname` varchar(20) DEFAULT NULL,
`hobby` varchar(30) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=18 DEFAULT CHARSET=latin1;
You can populate it with:
INSERT INTO `persondao`.`persontab` (`firstname`, `lastname`, `hobby`) VALUES ("name1", "surname", "hobby");
INSERT INTO `persondao`.`persontab` (`firstname`, `lastname`, `hobby`) VALUES ("name2", "surname", "hobby");
Master list JSP uses the JQuery DT abilities fully, including buffering.
ANALYSIS and the source code:
-----------------------------
The application opens with index.jsp which is indicated as welcome file at
web.xml:
...
<display-name>Simple CRUD of ARS</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
...
(I will provide the complete web.xml when I come to servlet definitions).
Index.jsp has a form named 'theDetail'. This is used for input fields name, lastname
and hobby. At the bottom of this for there are navigation buttons next, prev,
new, save, delete. These buttons are linked to corresponding servlets via AJAX calls
which are included via
...
<script type="text/javascript" src="js/JQmultiAJAXCalls.js"></script>
...
at the top of the index.jsp.
A personDAO is defined used to access the MySQL database. personDAO is also
used to keep track of the currentId and the NextAvailableId.
Index.jsp shows the first record in the MySQL DB when it is first opened.
This is done via an AJAX call to the init servlet.
This is the end of an overall outline of the index.page. The complete cource follows.
index.jsp
---------
<%--
Document : index
Created on : 24.Sub.2011, 18:23:21
Author : Ali Riza SARAL
--%>
<%@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">
<%@ page import="mainPackage.*" %>
<%@ page import="daoPackage.*" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ARS's Simple JQ CRUD</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/JQmultiAJAXCalls.js"></script>
<%
System.out.println("index.jsp JSP script began here.");
PersonDAOMySQLDBImpl personDAO;
if (session.getAttribute("personDAOsess") == null){
System.out.println("index.jsp personDAOsess == null ");
personDAO = new PersonDAOMySQLDBImpl();
session.setAttribute("personDAOsess", personDAO);
}
else {
System.out.println("index.jsp personDAOsess!!!!=null");
personDAO = (PersonDAOMySQLDBImpl) session.getAttribute("personDAOsess");
System.out.println("personcurrentid="+personDAO.getPersonCurrentId());
}
%>
<script type="text/javascript" charset="utf-8">
function InitScr() {
//alert ("Merhaba from Ali R+ with best wishes! ");
}
$(document).ready(function() {
$.ajax({
type:"POST",
url: "./init",
contentType: "application/x-www-form-urlencoded",
dataType: "JSON",
success: function(data) {
var jsonData = $.parseJSON(data);
$("input#id").val(jsonData.id)
$("input#name").val(jsonData.name)
$("input#last").val(jsonData.last)
$("input#hobby").val(jsonData.hobby)
}
});
} );
</script>
</head>
<body style="background-color:yellow" onLoad="InitScr()">
<h1>The Simplest JQuery CRUD Application</h1>
<br />
<form name="theDetail" action="" method="get">
<input type="hidden" id="id" name="id"/><br />
First name: <input type="text" id ="name" name="name"/><br />
Last name : <input type="text" id="last" name="last"/><br />
Hobby : <input type="text" id="hobby" name="hobby"/><br />
<br />
<INPUT TYPE="button" id="New" VALUE="New">
<INPUT TYPE="button" id="Save" VALUE="Save">
<INPUT TYPE="button" id="Delete" VALUE="Delete">
<INPUT TYPE="button" id="Next" VALUE="Next">
<INPUT TYPE="button" id="Prev" VALUE="Prev">
<INPUT TYPE="button" id="List" VALUE="List">
<!--INPUT TYPE="button" id="List" VALUE="List"
onclick="document.forms[0].action = '/list'; return true;" /-->
</form>
</body>
</html>
