h2 database console in html layout:fragment (Spring Boot + Java) - java

I'm working on a Spring Boot application. I use main.html as a frame around all the other .htmls embedded. For this I use layout:fragment.
I also have a "DATABASE" menu in my navigaton bar, which points to the H2 database console.
Is it possible to embed this console into the main.html as fragment?
main.html's body:
<body>
<div class="container">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>BLOGS</li>
<li>BLOGGERS</li>
<li sec:authorize="hasRole('ROLE_ADMIN')">ADMIN</li>
<li sec:authorize="hasRole('ROLE_ADMIN')">DATABASE</li>
<li><button id="signup-small-button" class="btn btn-success">SIGN UP</button></li>
</ul>
<div class="navbar-right">
<form sec:authorize="!isAuthenticated()" th:action="#{/loginfailed}" method="post">
<input th:value="${username}" type="text" name="username" placeholder="username" required class="login-input"/>
<input th:value="${password}" type="password" name="password" placeholder="password" required class="login-input"/>
<button type="submit" id="login-button" class="btn btn-success btn-xs">Log in</button>
</form>
<div sec:authorize="isAuthenticated()">
<span th:text="${#authentication.name + ' | '}" class="black"></span>
<form th:action="#{/logout}" method="post" id="logout-button-form">
<button type="submit" id="logout-button" class="btn btn-primary btn-xs">Log out</button>
</form>
</div>
</div>
</nav>
<div layout:fragment="content"></div>
<footer>
<hr/>
<p id="footer">Made by hazazs (©Copyrighted by hazazs™)</p>
</footer>
</div>
</body>


The solution was a database.html file:
<html layout:decorate="~{layout/main}">
<head>
<title>DATABASE</title>
</head>
<body>
<div layout:fragment="content" class="center">
<iframe src="http://IP:PORT/h2" id="h2-console"></iframe>
</div>
</body>
</html>
And of course a #RequestMapping for "/database" which returns this html.
#RequestMapping(value = "/database", method = RequestMethod.GET)
public String database() {
return "database";
}
application.yaml:
spring:
h2:
console:
enabled: true
path: /h2

Related

I reference my CSS page to my HTML and it simply won't have any effect

I am currently working on a java project and have made an html page with a design (css) page to accompany it. I have referenced it but it still won't have any effect. I hard reloaded the page still no changes. Don't really understand why this is happening. I keep getting "net::ERR_ABORTED 404" on localhost. The stylesheet file name is indeed correct (being loginStyle.css). They are also both located in the same folder. Would appreciate any help. Thanks!
.btn-color {
background-color: #0e1c36;
color: #fff;
}
.profile-image-pic {
height: 200px;
width: 200px;
object-fit: cover;
}
.cardbody-color {
background-color: #ebf2fa;
}
<!DOCTYPE html>
<html lang="en" xmlns:thymeleaf.org>
<head>
<link rel="stylesheet" type="text/css" href="loginStyle.css" />
</head>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h2 class="text-center text-dark mt-5">Welcome</h2>
<div class="card my-5">
<form class="card-body cardbody-color p-lg-5" th:action="#{/userLogin}" th:object="${user}" method="post">
<div class="text-center">
<img src="https://cdn.pixabay.com/photo/2016/03/31/19/56/avatar-1295397__340.png" class="img-fluid profile-image-pic img-thumbnail rounded-circle my-3" width="200px" alt="profile">
</div>
<div class="mb-3">
<input type="text" class="form-control" id="Username" aria-describedby="emailHelp" placeholder="User Name" th:field="*{Id}">
</div>
<div class="mb-3">
<input type="password" class="form-control" id="password" placeholder="password" th:field="*{password}">
</div>
<div class="text-center"><button type="submit" class="btn btn-color px-5 mb-5 w-100">Login</button></div>
<div id="emailHelp" class="form-text text-center mb-5 text-dark">Not Registered?
<a href="#" class="text-dark fw-bold"> Create an Account
</a>
</div>
</form>
</div>
</div>
</div>
</div>
</html>

NoSuchElementException - junit test error

I am using selenium junit testing.
If i try with selenium ide, the test goes well, but with junit it gives me this error:
org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"#firstName"}
I think that the span doesn't redirect to the page it should (but in normal schedule it does).
#Test
public void adminCreateDoc() {
driver.get("http://localhost:8080/login");
driver.manage().window().setSize(new Dimension(550, 706));
driver.findElement(By.linkText("Accesso amministratori")).click();
driver.findElement(By.id("username")).sendKeys("8245");
driver.findElement(By.id("password")).click();
driver.findElement(By.id("password")).sendKeys("prova1");
driver.findElement(By.cssSelector(".btn")).click();
driver.findElement(By.id("btn_createDoc")).click();
driver.findElement(By.id("firstName")).click();
driver.findElement(By.id("firstName")).sendKeys("Marco");
driver.findElement(By.id("lastName")).click();
driver.findElement(By.id("lastName")).sendKeys("Battiato");
driver.findElement(By.id("doc_type")).click();
driver.findElement(By.id("doc_type")).sendKeys("Cardiologo");
driver.findElement(By.id("id")).click();
driver.findElement(By.id("id")).sendKeys("855555");
driver.findElement(By.id("password")).click();
driver.findElement(By.id("password")).sendKeys("prova1");
driver.findElement(By.cssSelector(".glyphicon-send")).click();
}
I've tried with xpath, but without success...
HTML page with span redirection:
<body>
<div class="container text-center">
<div align="center">
<h2>Gestione dottori</h2>
<table class="table table-striped table-responsive-md">
<tr>
<th>ID</th>
<th>Nome</th>
<th>Specialit&agrave</th>
</tr>
<tr th:each="doc: ${listDoc}">
<td th:text="${doc.getId()}"></td>
<td>Dr. <span th:text="${doc.getFirstName()}"></span> <span th:text="${doc.getLastName()}"></span></td>
<td th:text="${doc.getDoc_type()}"></td>
</tr>
</table>
<a th:href = "#{/admin_createdoc}"><span id="btn_createDoc" class="plus bg-dark" >+</span></a>
<hr>
<div class="col col-lg-2 align-self-center">
<div class="p-1">
<form th:action="#{/admin_logout}" method=post>
<button name="btn_logout_profile" id="btn_logout_profile"
type="submit" class="btn btn-primary">Log Out</button>
</form>
</div>
</div>
</div>
</div>
</body>
Which redirect to this page:
<body>
<div class="container">
<div class="d-flex align-items-center justify-content-start">
<form th:action="#{/admin_homepage}" method=get>
<button name="btn_back_profile" id="btn_back_profile" type="submit"
class="btn btn-info">
<span class="fas fa-chevron-left"></span>
</button>
</form>
</div>
<br>
<div style='text-align: center'>
<form class="well form-horizontal" action="#"
th:action="#{/saveDoctor}" th:object="${doc}" method="POST"
id="contact_form">
<fieldset>
<!-- Form Name -->
<legend>
<center>
<h2>
<b>Doctor Creation Form</b>
</h2>
</center>
</legend>
<br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">First Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i
class="glyphicon glyphicon-user"></i></span> <input name="first_name"
th:field="*{firstName}" placeholder="Doc First Name"
class="form-control" type="text" required>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Last Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i
class="glyphicon glyphicon-user"></i></span> <input name="last_name"
th:field="*{lastName}" placeholder="Doc Last Name"
class="form-control" type="text" required>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Type</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i
class="glyphicon glyphicon-list"></i></span> <input name="doc_type"
th:field="*{doc_type}" placeholder="Doc Type"
class="form-control" type="text" required>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Id</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i
class="glyphicon glyphicon-user"></i></span> <input name="id"
th:field="*{id}" placeholder="Doc ID" class="form-control"
type="number" required>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i
class="glyphicon glyphicon-user"></i></span> <input
th:field="*{password}" name="doc_password"
placeholder="Doc Password" class="form-control" type="password"
required>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group" align="center">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<br>
<button type="submit" class="btn btn-warning">
SUBMIT <span class="glyphicon glyphicon-send"></span>
</button>
</div>
</div>
</fieldset>
</form>
<div>
<form th:action="#{/admin_logout}" method=post>
<button name="btn_logout_profile" id="btn_logout_profile"
type="submit" class="btn btn-primary">Log Out</button>
</form>
</div>
</div>
</div>
</body>
Thank you for your time!

The failure is happening on this line
driver.findElement(By.id("firstName")).click();
ID as a CSS selector is #firstName. Since this is right after a page transition, my guess is that the page isn't fully loaded before the next line of code is run. This can sometimes happen on a modern site where the page is loaded but there's still stuff being loaded asynchronously in the background. The fix is to add a wait, specifically a WebDriverWait, to the following line. That is one option...
Instead of adding a wait piecemeal when it's found that you need it, I prefer to write helper methods that take care of common actions like click(), sendKeys(), etc. and then let those methods take care of the specific waits for me.
public void click(By locator) {
new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(locator)).click();
}
public void sendKeys(By locator, String text) {
findElement(locator).sendKeys(text);
}
public WebElement findElement(By locator) {
return new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(locator));
}
Then you can change your script to
#Test
public void adminCreateDoc() {
driver.get("http://localhost:8080/login");
driver.manage().window().setSize(new Dimension(550, 706));
click(By.linkText("Accesso amministratori"));
sendKeys(By.id("username"), "8245");
sendKeys(By.id("password"), "prova1");
click(By.cssSelector(".btn"));
click(By.id("btn_createDoc"));
sendKeys(By.id("firstName"), "Marco");
sendKeys(By.id("lastName"), "Battiato");
sendKeys(By.id("doc_type"), "Cardiologo");
sendKeys(By.id("id"), "855555");
sendKeys(By.id("password"), "prova1");
click(By.cssSelector(".glyphicon-send"));
}
which I think makes it more readable, adds waits to everything in case it's needed with no extra code, and so on...
The next level is using the Page Object Model to contain the locators and methods for each page. Then your code gets cleaned up significantly, makes it near-human readable, and MUCH easier to manage.

How to pass a value from href in HTML to Thymeleaf?

I am trying to get info from a input bar and use the value for a modal. Currently I am using Thymeleaf and I am getting everything mixed up. I tried setting the attribute for href using jQuery. Though I believe since the th:href gets rendered on page load, my code does not work.
The end goal is to send the info from the input field, process it in Thymeleaf, and then show the results in the modal. I can so far only accomplish it when I hard code everything. I am looking for a more dynamic way. Any help will be appreciated.
HTML:
<!DOCTYPE html>
<html xml="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="ISO-8859-1">
<title>Application</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/landing-page.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs ">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<!-- <a class="nav-link" href="create.html">Create</a> -->
<a class="nav-link" href="/addTyler">Create</a>
</li>
<li class="nav-item dropdown ml-md-auto">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Account</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Settings</a>
<div class="dropdown-divider">
</div> <a class="dropdown-item" href="#">Log out</a>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 class="text-center">
Taddm Mapping
</h3>
</div>
</div>
<div class="row" id="search-row">
<div class="col-md-8">
<div class="filter-search">
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<div class="list-group" id="myList">
<div th:each="plants : ${plants}">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<span class="input-group-btn">
<a class="btn btn-primary eBtn">View</a>
<!-- <a th:href="#{findOne/(appcode=01G)}" class="btn btn-primary eBtn">View</a> -->
</span>
</div>
<div class="myForm">
<form th:action="#{/save}" method="POST">
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update or Create</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="appcode" class="col-form-label">AppCode:</label>
<input type="text" class="form-control" id="appcode" name="appcode" value=""/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="save"/>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
jQuery:
// Empty JS for your own code to be here
$(document).ready(function() {
$("#myList").toggle();
$("#myInput").on("focus", function() {
$("#myList").toggle();
});
$("#myInput").on("focusout", function() {
// Here, it'll wait 100 miliseconds to hide the list.
setTimeout(function() {
$("#myList").toggle();
}, 250);
});
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList a").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
// This is the code to populate the field after selecting an option.
$("#myList a").on("click", function() {
var texto = $(this).text();
$("#myInput").val(texto);
});
$(".eBtn").on("click", function(event){
$("a").attr("href","#{findOne/(appcode='01G')}"); //Test
event.preventDefault();
var href = $(this).attr('href');
console.log(href);
$.get(href, function(appcode,status){
$("#appcode").val(appcode);
});
$("#exampleModal").modal();
});
});
Controller:
#RequestMapping("/findOne")
#ResponseBody
public String findOne(String appcode) {
System.out.println(mAppRepo.findById(appcode).get().getmAppName());
return mAppRepo.findById(appcode).get().getmAppName();
}

JSP null pointer exception cannot be fixed

I have a jsp page that which is used to get data from a user and addthem into a database using a servlet. there is a null exception comes when i try to run the page. but it does not have any error. can somebody help me to figure out what the error is?
error -
type Exception report
messageInternal Server Error
descriptionThe server encountered an internal error that prevented it from fulfilling this request.
exception
org.apache.jasper.JasperException: java.lang.NullPointerException
root cause
java.lang.NullPointerException
my jsp -
<%#page import="java.sql.ResultSet"%>
<%#page import="java.sql.Statement"%>
<%#page import="java.sql.DriverManager"%>
<%#page import="java.util.ArrayList"%>
<%#page import="com.cert.classes.Incident"%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sri Lanka CERT</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/local.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Sri Lanka CERT</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li><i class="fa fa-bullseye"></i> Dashboard</li>
<li><i class="fa fa-tasks"></i> Search and Update</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-user">
<li class="dropdown messages-dropdown">
<i class="fa fa-envelope"></i> Messages<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">2 New Messages</li>
<li class="message-preview">
<a href="#">
<span class="avatar"><i class="fa fa-bell"></i></span>
<span class="message">Security alert</span>
</a>
</li>
<li class="divider"></li>
<li class="message-preview">
<a href="#">
<span class="avatar"><i class="fa fa-bell"></i></span>
<span class="message">Security alert</span>
</a>
</li>
<li class="divider"></li>
<li>Go to Inbox <span class="badge"></span></li>
</ul>
</li>
<li class="dropdown user-dropdown">
<i class="fa fa-user"></i><b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="fa fa-gear"></i> Change Password</li>
<li class="divider"></li>
<li><i class="fa fa-power-off"></i> Log Out</li>
</ul>
<li class="divider-vertical"></li>
<li>
<form class="navbar-search">
<input type="text" value=<%=request.getSession().getAttribute("user") %>><br>
</form>
</li>
</li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-6">
<form role="form" action="/addticket" method="post">
<div class="form-group">
<label>First Name</label>
<input class="form-control" name="firstname">
</div>
<div class="form-group">
<label>Last Name</label>
<input class="form-control" name="lastname">
</div>
<div class="form-group">
<label>Phone</label>
<input class="form-control" name="phone">
</div>
<div class="form-group">
<label>Mode</label><br>
<label class="radio-inline">
<input type="radio" name="mode" value="call">
Call
</label>
<label class="radio-inline">
<input type="radio" name="mode" value="email">
Email
</label>
<label class="radio-inline">
<input type="radio" name="mode" value="visit">
Visit
</label>
<label class="radio-inline">
<input type="radio" name="mode" value="other">
Other
</label>
</div>
<div class="form-group">
<label>Status</label><br>
<label class="radio-inline">
<input type="radio" name="status" value="opened">
Opened
</label>
<label class="radio-inline">
<input type="radio" name="status" value="sent">
Document Sent
</label>
<label class="radio-inline">
<input type="radio" name="status" value="submitted">
Document Submitted
</label>
<label class="radio-inline">
<input type="radio" name="status" value="closed" disabled>
Closed
</label>
</div>
<div cla <label>Comment</label>
<textarea name="comment" class="form-control" rows="3"></textarea>
</div>
<input type="hidden" class="form-control" value=<%=request.getSession().getAttribute("user")%> name="handler">
<%
ArrayList<Incident> list1 = (ArrayList<Incident>) getServletContext().getAttribute("main_list");
ArrayList<Incident> list2 = (ArrayList<Incident>) getServletContext().getAttribute("sub_list");
ArrayList<Incident> list3 = (ArrayList<Incident>) getServletContext().getAttribute("incident_list");
%>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Main Category</label>
<select name="main_category" class="form-control">
<%
for(Incident item : list1){ %>
<option label="<%=item.getType()%>" value="<%=item.getType()%>" >
<%
}
%>
</select>
</div>
<div class="form-group">
<label>Sub Category</label>
<select name="sub_category" class="form-control">
<%
for(Incident item : list2){ %>
<option label="<%=item.getType()%>" value="<%=item.getType()%>" >
<%
}
%>
</select>
</div>
<div class="form-group">
<label>Incident Type</label>
<select name="incident_type" class="form-control">
<%
for(Incident item : list3){ %>
<option label="<%=item.getType()%>" value="<%=item.getType()%>" >
<%
}
%>
</select>
</div>
<div class="form-group has-error">
<label>Target</label>
<input type="text" class="form-control" name="target">
</div>
<div class="form-group has-warning">
<label>Forwarded</label>
<input type="text" class="form-control" name="forwarded">
</div>
<button type="submit" class="btn btn-default">Add Ticket</button>
<button type="reset" class="btn btn-default">Clear</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

The issue with this code is
ArrayList<Incident> list1 = (ArrayList<Incident>) getServletContext().getAttribute("main_list");
first checknull condition for this line if(getServletContext().getAttribute("main_list")!=null) and then type cast to ArrayList. if we are getting null value for this line getServletContext().getAttribute("main_list") and you are trying to typecast with ArrayList then you will get Null Pointer excetion only. Please use JSTL tags instead of direct java code placing in jsp...

Searching in JSP

I have a Jsp page in which there is a table that is populated from the database. I want to Implement a search based on the fields on this table please tell me how to do this.
My Jsp page is given below
<html>
<jsp:include page="Headj.jsp"/>
<body>
<script type="text/javascript">
function deletedata(prdid) {
var url = "Con_Product?action=delete&prdid=" + prdid;
window.location = url;
}
function editdata(prdid) {
var url = "Editprd.jsp?prdid=" + prdid + "&type=p&pg=prd";
window.location = url;
}
</script>
<div id="maindiv" class="container-fluid">
<jsp:include page="Headerj.jsp"/>
<div id="menu_content">
<jsp:include page="Menuj.jsp"/>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Product</h1>
<ul class="nav nav-tabs" role="tablist">
<li class="active">Display</li>
<li>Add New</li>
<!--<li><a href="#">Messages<a><li>-->
</ul>
<br>
<div class="panel panel-default">
<div class="panel-body" style="padding: 3px;">
<strong style="font-size: 20px; font-family: sans-serif; color: #3b6282; margin-left: 10px;">Display Products</strong>
<form class="navbar-right form-inline">
<div class="form-group">
<select class="form-control">
<option>Choose Option</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...">
</div>
</div>
<button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-search"></button>
</form>
</div>
</div>
<div class="alert-success"><p>${param.message}</p></div>
<%
general gen = new general();
Op_Product opp = new Op_Product();
Op_Category opc = new Op_Category();
ResultSet rs = opp.getallproducts();
%>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<th><strong>Sl. No.</strong></th>
<th><strong>Product</strong></th>
<th><strong>Category</strong></th>
<th><strong>Sub-Category</strong></th>
<th><strong>Creator</strong></th>
<th><strong>Operations</strong></th>
</thead>
<%
int no = 1;
while (rs.next()) {
%>
<tr>
<td><%= no%></td>
<td><%= rs.getString("Prd_nme")%></td>
<td><%= opc.getOnecategoryname(rs.getString("Prd_catid"))%></td>
<td><%= opc.getOnesubcategoryname(rs.getString("Prd_scatid"))%></td>
<td><%= gen.getCreator(rs.getString("Prd_usr"))%></td>
<td>
<button type="button" class="btn btn-default btn-sm btn-danger" onclick="deletedata('<%= rs.getString("Prd_id")%>');">
<span class="glyphicon glyphicon-trash"></span>
</button>
<button type="button" class="btn btn-default btn-sm btn-primary" onclick="editdata('<%= rs.getString("Prd_id")%>')">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<%
no++;
}
%>
<tfoot>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<div>
<jsp:include page="Footerj.jsp"/>
</div>
<!-- Modal -->
<div class="modal " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
ScreenShot of my page is given below.
The section the is circled is the search option the drop down list will have the field names and the search values will be entered in the text box.

To implement this you have 2 options:
The nice and slightly more complicated option
You can make an Ajax call using a JavaScript framework like jQuery to a servlet that will make the database query and respond to the ajax call via a Json object. This method will allow you to present the data without updating the page and the user experience will be better.
The easier option
You can submit that form to a servlet that makes the query and exposes the data as request attributes that are then presented in a jsp using jstl
Either way I recommend you to avoid scripting on the jsp files ( no <% %>) and instead use jstl and ${} to expose information. And do all the object creation and other login on servlets. That will make your code a lot easier and maintainable.

I did this operation using Jquery, this way there is no page reload and since it is in the client side it will be more faster. A sample of what i have done is given in
http://jsfiddle.net/9hGym/35/
The JQuery code is given below
$("#search").keyup(function(){
_this = this;
// Show only matching TR, hide rest of them
$.each($("#table tbody").find("tr"), function() {
console.log($(this).text());
var s = $("#sss").val(); if($(this).find('td').eq(s).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
$(this).hide();
else
$(this).show();
});
});

Categories