PDA

View Full Version : Displaying images four by four

peggie1990
07-17-2009, 04:28 AM
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:)

<%@ 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
melinite
07-17-2009, 10:55 PM
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
07-18-2009, 02:02 AM
Hey guys thanks:) Its amazing:)



Thanks:D
peggie1990
07-18-2009, 06:56 AM
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:

<%@ 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
07-18-2009, 08:28 PM
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
07-18-2009, 10:01 PM
Hey sorry I dont really get what you mean:(

Would you mind explaining more:)

Thanks:)
melinite
07-19-2009, 08:15 AM
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
07-19-2009, 06:04 PM
i see i see:)


Thanks:)
pypeonent
02-07-2010, 09:20 AM
Can we get source code or C code for displaying excel sheets having images in .jpeg or .gif formats..