Question

So I have this JSP search function as you can see below:

<%
String value=request.getParameter("search");
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection conn = DriverManager.getConnection("jdbc:mysql://instance****.db.xeround.com:*****/mydb", "*****", "*******");
Statement st=conn.createStatement();
ResultSet rs = st.executeQuery("SELECT menu.name, menu.info, menu.price, restaurants.name from menu,"
        + " restaurants where restaurants_restaurantID=RestaurantID AND (menu.name like '%"
        + value
        + "%' "
        + "or menu.info like '%"
        + value
        + "%' or menu.category like '%"
        + value
        + "%' "
        + "or menu.kitchen like '%"
        + value
        + "%' or quick_choose like '%" + value + "%')");

while (rs.next()){ 
    %>
<tr><td>Name:</td><td><input type="text" value="<%=rs.getString("name")%>" > </td></tr>
<tr><td>Info:</td><td><input type="text" value="<%=rs.getString("info")%>" > </td></tr>
<tr><td>Price:</td><td><input type="text" value="<%=rs.getInt("price")%>" > </td></tr>
      <%
}
%>

This is working and pulling the info I need from the database, but what I want to do right now is to somehow make the results line up correctly as in that each result line will display only the name/dish description/price for one food. also I want it to work With a top header that looks like this: Here

Where the results displays under the header Restaurant, Dish, Type, Price. So that they displays correctly under those titles.

And then divide each line with a line. Such as in facebook when you go and search something, the results will be shown and divided by a thin line.

Same as the link above and Shown here:

Summary for those who don’t wanna read too much: I basically want my search results to be like this site:Here, under a header devided into different colums and have a line that separates each search result.

Do any of you know any possible solution for this in HTML? Or can give me any advice on how to preceed? I’ve tried a few alternatives but I just can’t figure it out. Would really appraciate any help or guidance. Thank you so much.

Answer 1

Necessary to you html:

<table>
  <tr class="head">
    <td>Name:</td>
    <td>Info:</td>
    <td>Price:</td>
  </tr>    
<%
 while (rs.next()){ 
%>
  <tr class="content">
    <td class="name"><%=rs.getString("name")%></td>
    <td class="info"><%=rs.getString("info")%></td>
    <td class="price"><%=rs.getInt("price")%></td>
  </tr>
<%
 }
%>
</table>

and approximate css:

table {
    border-collapse: collapse;
}
.head td {
    text-align: center;
}
.content td {
    padding: 5px 10px;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid #C0C0C0;
    border-bottom-style: dotted;
}
.info {
    background-color: #F1F4F6;
}

But first, scriptlets is very poor practice. Secondly, getting of database connection in JSP is shot in the head.
Your JSP page should be responsible only for view. Replace your code into separate Java classes. Otherwise, when your code will bloat your project will be unreadable and bad maintainable.

Using JSTL you can get easily the same view:

<c:forEach var="item" items="${requestScope.items}">
   <div id="item_title" class="item_title">
      <a href="${pageContext.request.contextPath}${item.url}">
        <c:out value="${item.title}" />
      </a>
   </div>
   <div id="item_content" class="item_content">
      <c:out value"${item.content}" />
   </div>
<c:forEach>

or

   <div id="item_title" class="item_title">
      <form name="openItem" action="handlerurl" method="post">
        <input type="hidden" name="itemId" value="${item.id}" />
        <c:out value="${item.title}" />
        <input type="submit" value="read more" />
      </form>
   </div>