In this example let's study the sample program using MVC Architecture.
MVC (Model View Controller) is a design pattern which is used in web programming. It is having 3 layers:
Model - Responsible for maintaining the data.
View - Represents visualization of data.
Controller - Controls data flow between model object and view.
The View layer
Let's create a frontend containing a button and a table .
<div id="button">
<button type="button" class="btn btn btn-info" onclick="FetchRecords();"> Fetch Records </button>
</div>
<div>
<table id="userdata" cellspacing="0" cellpadding="0" class="table">
<tr>
<th>Slno</th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
</tr>
<tr id="start"> <td colspan="4">No data</td></tr>
</table>
</div>
The following style is to design a table and a button.
<style>
#button{
margin-top: 20px;
margin-left: 10px;
}
.table{
width:75%;
margin-top: 10px;
margin-left: 10px;
}
.table th{
background: #dc4214;
color: white;
}
.table th,.table td{
text-align: center;
padding: 3px;
border: 1px solid #d5d5d5;
}
</style>
Include jquery plugin and css(bootstrap) link in your jsp.
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
On clicking Fetch Records button, FetchRecords() method is called. The ajax call sends the request to the register(Handler) url.
<script>
function FetchRecords() {
$.ajax({
type: 'Post',
url: 'register',
data: 'FetchRecords=Fetch',
dataType: 'json',
success: function (data) {
$("#userdata").find("tr:gt(0)").remove();
var table = $("#userdata");
if (data.jsonarray) {
$.each(data.jsonarray, function (key, value) {
$("#start").empty();
var row = $("<tr><td></td><td></td><td></td><td></td></tr>");
row.children().eq(0).text(value.slno);
row.children().eq(1).text(value.name);
row.children().eq(2).text(value.phone);
row.children().eq(3).text(value.email);
row.appendTo(table);
});
} else {
$("#start").empty();
var row = $("<tr><td>No Records Found</td></tr>");
row.appendTo(table);
}
}
});
}
</script>
In the Controller(register.java), it checks for the request parameter FetchRecords and calls the method FetchRecords() as shown below.
if (request.getParameter("FetchRecords") != null) {
HelperBean hbean = udao.FetchRecords();
if (hbean.getStudentList() != null && hbean.getStudentList().size() > 0) {
for (int i = 0; i < hbean.getStudentList().size(); i++) {
StudentBean cbean = hbean.getStudentList().get(i);
JSONObject json = new JSONObject();
json.put("slno", slno++);
json.put("name", cbean.getName());
json.put("phone", cbean.getPhone());
json.put("email", cbean.getEmail());
array.put(json);
}
json1.put("jsonarray", array);
out.print(json1);
}
}
In the DAO(user.java), fetch the data from sookshmas table, store it in bean array(Helperbean) and return the array object hbean to the controller as shown below.
public HelperBean FetchRecords() {
HelperBean hbean = new HelperBean();
try {
Statement s = null;
ResultSet rs = null;
s = con.createStatement();
String query = "select * from sookshmas;";
rs = s.executeQuery(query);
while (rs.next()) {
StudentBean cbean = new StudentBean();
cbean.setName(rs.getString("name"));
cbean.setPhone(rs.getString("phone"));
cbean.setEmail(rs.getString("email"));
hbean.getStudentList().add(cbean);
}
} catch (Exception e) {
e.printStackTrace();
}
return hbean;
}
The data from DAO will be stored in HelperBean object hbean in the controller. Check for the size of the array. If the size of the array object(hbean) is greater than 0, loop it and fetch all the records by using StudentBean object cbean and put it in json object. Store json object in jsonarray.
After the controller sends back the response, the json object will be sent to the success function in ajax. In the ajax success function, check for the jsonarray. If data is present in the array then loop the array using $.each function and append each record to the table. Else append No Records Found to the table.
NOTE: Make sure your jdbc connections and necessary jar files are added to run the code.
The jsp will look like as shown below:
The final output when the button is clicked will be:
