LiteSpeed Support Forums - Displaying images four by four

LiteSpeed Support Forums (http://www.litespeedtech.com/support/forum/index.php)

- Java JSP/Servlet (http://www.litespeedtech.com/support/forum/forumdisplay.php?f=21)

- - Displaying images four by four (http://www.litespeedtech.com/support/forum/showthread.php?t=3183)

Displaying images four by four

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

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("P roductId")%>"><%=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>

Hey guys thanks:) Its amazing:)

Thanks:D

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.

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.

Hey sorry I dont really get what you mean:(

Would you mind explaining more:)

Thanks:)

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

i see i see:)

Thanks:)

Displaying images four by four

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