Displaying images four by four

Discussion in 'Java JSP/Servlet' started by peggie1990, Jul 17, 2009.

  1. peggie1990

    peggie1990 New Member

    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:D
  2. melinite

    melinite New Member

    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>
  3. peggie1990

    peggie1990 New Member

    Hey guys thanks:) Its amazing:)



    Thanks:D
  4. peggie1990

    peggie1990 New Member

    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.

    Attached Files:

    • 1.jpg
      1.jpg
      File size:
      30.2 KB
      Views:
      3
  5. melinite

    melinite New Member

    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.
  6. peggie1990

    peggie1990 New Member

    Hey sorry I dont really get what you mean:(

    Would you mind explaining more:)

    Thanks:)
  7. melinite

    melinite New Member

    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
  8. peggie1990

    peggie1990 New Member

    i see i see:)


    Thanks:)
  9. pypeonent

    pypeonent New Member

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

Share This Page