Displaying images four by four

peggie1990 · Jul 17, 2009

Hey guys do you know how to display images four by four. I try to edit in my code. But fail and ends up the images is a long row. Can you guys help me check what's the problem?

Thanks

Code:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"  
    pageEncoding="ISO-8859-1"%>   
    <%@ page import="java.sql.*"%>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
<html>   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">   
<title>Display Image overall</title>   
</head>   
<body>   
<h1>Products</h1>   
    
  
<p>   
          <%   
            //1. Retrieve all products from database   
               
            //1a.  Load the Driver   
            Class.forName("com.mysql.jdbc.Driver");   
            //1b.  Get a connection to the database   
            Connection con = DriverManager.getConnection("jdbc:mysql://localhost/lilian_morton", "root", "");   
            //1c. Construct our SQL statement   
            PreparedStatement ps = con.prepareStatement("SELECT * FROM products");   
            //1d.  Execute and retrieve our result   
            ResultSet rs = ps.executeQuery();   
               
            //2. Base on the results returned, construct a table   
        %>   
        </p>   
        <fieldset height="145" width="145">   
<legend>Product</legend>   
        <table border="0">    
         <%     
            
if(rs.next()) {        
rs.beforeFirst();  // for making sure you dont miss the first record.      
while(rs.next())      
{                        // opening while loop brackets.      
     
         %>        
       
      
    
 <td>   
        <div style=""><img border="3"  
            src="images/Beanie/<%=rs.getString("ProdImage") %>" height="145" width="145" /></div>   
               
               
            <a href="ProductDesc.jsp?ProductId=<%=rs.getString("ProductId")%>"><%=rs.getString("ProdName")%></a>   
        </td>   
           
           
         <%        
                } //closing while loop bracket      
             }        
             else {        
                 //if no record is found, simply display a no record message        
         %>        
 Nothing.        
 <%        
             }        
          %>     
             
           </table>    
           </fieldset>    
  
  
</body>   
</html>

Thanks

melinite · Jul 18, 2009

Add <tr> tags before and </tr> after loop
I usually also had thead and tbody to any html tables.
added markup is highlighted in blue.

pseudocode:

count currentrow modulo 4 = 0, then

</tr><tr>

Continue

------------------------------
<%
int RecordCounter = 0; //initialize currentrow counter
int numcolumns = 4; //columns you want
%>

<table border="0">
<tr>

<%

if(rs.next()) {
rs.beforeFirst(); // for making sure you dont miss the first record.
while(rs.next())
{ // opening while loop brackets.

%>

<td>
<div style=""><img border="3"
src="images/Beanie/<%=rs.getString("ProdImage") %>" height="145" width="145" /></div>

<a href="ProductDesc.jsp?ProductId=<%=rs.getString("ProductId")%>"><%=rs.getString("ProdName")%></a>
</td>

<% RecordCounter++; // iterate record
if (RecordCounter % numcolumns == 0)
out.print("</tr> <tr>"); //close and start new row after 4th <TD>
%>

<%
} //closing while loop bracket
}
else {
//if no record is found, simply display a no record message
%>
Nothing.
<%
}
%>

</tr>
</table>

peggie1990 · Jul 18, 2009

Hey guys thanks

Its amazing

Thanks

peggie1990 · Jul 18, 2009

Displaying blob images from database instead of the url.

Hey guys do you have any idea on displaying blob images from the database instead of displaying the blob url path.And the images display should come with the details like the image is yellow beanie, the color is yellow...

This is my code:

Code:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ page import="java.sql.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>PRODUCTS DETAILS</h1>
<p>
<%
				//Retrieve the id of the product selected by the user
				//the product id is sent via the URL as a parameter
				int ProductId = -1;
				String strProductId = request.getParameter("ProductId");
				if(strProductId != null) {
					//Convert from string to int
					ProductId = Integer.parseInt(strProductId);
				}
				
				//Load the database driver
		       	Class.forName("com.mysql.jdbc.Driver");
				//Create a connection to our database
		       	Connection con = DriverManager.getConnection("jdbc:mysql://localhost/peisze", "root", "");
				//create an SQL statement
		       	PreparedStatement ps = con.prepareStatement("SELECT * FROM products WHERE ProductId=?");
				//set the ID to be the id above
		       	ps.setInt(1, ProductId);
				//Execute and retrieve our result
		       	ResultSet rs = ps.executeQuery();
			%>
</p>
<%
        	//if there is a result, rs.next() will be true
        	//else it will be false
			if(rs.next()) {
		%>
<fieldset>
<legend>Product Information</legend>
<table border="0">
	<tr>
		<td>
		<div align="left">Image: <%=rs.getBlob("ProdImage")+"\t" %></div>
		</td>
		<td>Product Name: <%=rs.getString("ProdName")+"\t" %>

		<div align="left">Product Color: <%=rs.getString("ProdColor")+"\t" %></div>

		<div align="left">Product Description: <%=rs.getString("ProdDesc")+"\t" %></div>

		<div align="left">Product Price: <%=String.format("$%.2f",rs.getDouble("UnitPrice"))+"\t" %></div>

		<div align="left">Quantity: <%=rs.getString("Quantity")+"\t" %></div>
		
	
		
	    

		</td>
	</tr>
</table>
</fieldset>

<%
			}
			else {
				//if no record is found, simply display a no record message
		%>
No record found.
<%
			}
		 %>
<p>&nbsp;</p>


</body>
</html><%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ page import="java.sql.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>PRODUCTS DETAILS</h1>
<p>
<%
				//Retrieve the id of the product selected by the user
				//the product id is sent via the URL as a parameter
				int ProductId = -1;
				String strProductId = request.getParameter("ProductId");
				if(strProductId != null) {
					//Convert from string to int
					ProductId = Integer.parseInt(strProductId);
				}
				
				//Load the database driver
		       	Class.forName("com.mysql.jdbc.Driver");
				//Create a connection to our database
		       	Connection con = DriverManager.getConnection("jdbc:mysql://localhost/peisze", "root", "");
				//create an SQL statement
		       	PreparedStatement ps = con.prepareStatement("SELECT * FROM products WHERE ProductId=?");
				//set the ID to be the id above
		       	ps.setInt(1, ProductId);
				//Execute and retrieve our result
		       	ResultSet rs = ps.executeQuery();
			%>
</p>
<%
        	//if there is a result, rs.next() will be true
        	//else it will be false
			if(rs.next()) {
		%>
<fieldset>
<legend>Product Information</legend>
<table border="0">
	<tr>
		<td>
		<div align="left">Image: <%=rs.getBlob("ProdImage")+"\t" %></div>
		</td>
		<td>Product Name: <%=rs.getString("ProdName")+"\t" %>

		<div align="left">Product Color: <%=rs.getString("ProdColor")+"\t" %></div>

		<div align="left">Product Description: <%=rs.getString("ProdDesc")+"\t" %></div>

		<div align="left">Product Price: <%=String.format("$%.2f",rs.getDouble("UnitPrice"))+"\t" %></div>

		<div align="left">Quantity: <%=rs.getString("Quantity")+"\t" %></div>
		
	
		
	    

		</td>
	</tr>
</table>
</fieldset>

<%
			}
			else {
				//if no record is found, simply display a no record message
		%>
No record found.
<%
			}
		 %>
<p>&nbsp;</p>


</body>
</html>

However when I debug the images is only show the blob url

And this is my expected outcome if the blob is able to work

Thanks.

melinite · Jul 19, 2009

i am highly against using any form of blob fields especially in MySQL. You lose performance, overall scalability (if your image catalog gets big enough), etc, etc.. (google mysql blob disadvantages)

Store paths in your db and use lightspeed to serve static images on another subdomain.

but the answer to your problem is BLOBs are streamed from mysql. You need to output the image buffer directly to the browser.

JSP isn't good at outputting binary streams to clients, use a servlet to return mime/*whatever your image type* content.

peggie1990 · Jul 19, 2009

Hey sorry I dont really get what you mean

Would you mind explaining more

Thanks

melinite · Jul 19, 2009

avoid storing Binary Large OBjects in db, specifically image files which is something you can store in the OS filesystem and litespeed can serve as static resource very efficiently.

Blob fields are returned as binary stream from mysql. You need to create a servlet to return the object to client as a specific mime type (aka .jpg, .png,.gif)

If you still have trouble i suggest you google JSP servlet BLOB

peggie1990 · Jul 20, 2009

i see i see

Thanks

pypeonent · Feb 7, 2010

Can we get source code or C code for displaying excel sheets having images in .jpeg or .gif formats..

Displaying images four by four

peggie1990

Member

melinite

Member

peggie1990

Member

peggie1990

Member

Attachments

melinite

Member

peggie1990

Member

melinite

Member

peggie1990

Member

pypeonent

New Member