Hey guys i have yet another problem.
i would like to know how i can display my mySQL database results on a webpage in a certain layout.
i want it like .. lemme just upload a picture.. it is attached.
i want to display that layout for every row there is where the pic is one column in the database and the rectangles next to the picture are data in more columns like description, price etc.
just want the layout to automatically repeat for all the rows in the database. is this possible?
Thanks.
Well, you can do it in two ways. The old fashioned way is using a table to position pictures and data. Say you have two columns and each cell in column 1 has rowspan attribute set to 3 (or whatever the number of data cells is).
$tbl = '<table border="1"><tr>';
while(rows_exist_in_result_set) {
$tbl .= '<tr><td rowspan="3">PICTURE HERE</td><td>DATA</td></tr>';
$tbl .= '<tr><td>DATA</td></tr><tr><td>DATA</td></tr>';
}
$tbl .= '</table>';Modern way is using divs and css positioning. I am not that good at that but I will give it a try. Someone might give you better css code. First the PHP code (or HTML):
while(rows_exist_in_result_set) {
$tbl = '<div class="left-box">PICTURE HERE</div>';
$tbl .= '<div class="right-box">';
$tbl .= '<div class="data">DATA</div>';
$tbl .= '<div class="data">DATA</div>';
$tbl .= '<div class="data">DATA</div>';
$tbl .= '</div>'; // end of right-box div
}
echo $tbl;and then the css code that will position these divs correctly. Colors and borders are here to help you visually. This is just a conceptual example, the CSS code could be written better. Ask also on the HTML and CSS forum about good examples of positioning.
/* CSS code */
.left-box {float: left; width: 200px;height: 200px; border: 1px solid blue;background-color: green; padding:2px;}
.right-box {margin-left:210px; margin-bottom:2px; width: 200px; height: 200px; border:1px solid blue; background-color: yellow; padding:2px;}
.data {margin: 2px; border:1px solid green; background-color: grey;}If you do it with tables it is simpler but people might say that tables are only meant to represent tabular data (but you can always claim that the stuff you are displaying is tabular data anyway). On the other hand positioning with CSS is more fancy and up to date but requires understanding of floats.
Thanks a lot that helped!
for the css way, how can i make it so that it repeats itself for every record that exists in the database..
this way is just the layout for one record..
Thanks :D
Following code works for me. I simulated reading from a database with an array and foreach loop, so replace that with a while loop iterating through a real recordset.
<html>
<head>
<style type="text/css">
.left-box {float: left; width: 200px;height: 200px; border: 1px solid blue;background-color: green; padding:2px;}
.right-box {margin-left:210px; margin-bottom:2px; width: 200px; height: 200px; border:1px solid blue; background-color: yellow; padding:2px;}
.data {margin: 2px; border:1px solid green; background-color: grey;}
</style>
</head>
<body>
<?php
// data that simulates data read from database
$recordset = array(
array(
'image' => 'Image 1',
'data1' => 'Data 1-1',
'data2' => 'Data 1-2',
'data3' => 'Data 1-3'),
array(
'image' => 'Image 2',
'data1' => 'Data 2-1',
'data2' => 'Data 2-2',
'data3' => 'Data 2-3'),
array(
'image' => 'Image 3',
'data1' => 'Data 3-1',
'data2' => 'Data 3-2',
'data3' => 'Data 3-3')
);
$tbl = '';
// here you would loop throu your recordset
foreach($recordset as $row) {
// left box - the image
$tbl .= '<div class="left-box">' . $row['image'] . '</div>';
// right box
$tbl .= '<div class="right-box">';
// the data in three separate divs
$tbl .= '<div class="data">' . $row['data1'] . '</div>';
$tbl .= '<div class="data">' . $row['data2'] . '</div>';
$tbl .= '<div class="data">' . $row['data3'] . '</div>';
$tbl .= '</div>'; // end of right box
}
echo $tbl;
?>
</body>
</html>Please note that although this works (firefox on Fedora) the css code can be improved and made suitable for all browsers. A job for css gurus.
Omg!! I love you!! Thanks for all that time spent for you.. I really appreciate it!
You are welcome. If this solves the problem please mark the thread solved.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.