How to display products from database without table? - php

Question

I currently have a table in my lamp database which I would like to display products. However I have displayed the products, but the page looks un-professional. How to make the page more professional? I don't want to display the products in a table.
I have posted my code below:
<?php
$con = mysql_connect("localhost","sam","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("products", $con);
$result = mysql_query("SELECT * FROM Products_table WHERE catid IN (1,2,7,8)");
echo "<table border='1'>
<tr>
<th>Name</th>
<th>Image</th>
<th>Description</th>
<th>Contact Renter</th>
<th>Rent price</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['productname'] . "</td>";
echo "<td><img src='./images/products/".$row['productimage']."' width='150' height='100' alt=''></td>";
echo "<td>" . $row['productdescription'] . "</td>";
echo "<td>" . $row['rentersdetails'] . "</td>";
echo "<td>" . $row['rentprice'] . "</td>";
echo "</tr>";
echo <<<"buttons"
<td>
<input class="button_normal" type="button" value="Google Renter" onclick="window.open('https://www.google.co.uk/')"/>;
<input class="button_normal" type="button" value="Yahoo" onclick="window.open('https://www.yahoo.co.uk')"/>
</td>
buttons;
}
echo "</table>";
mysql_close($con);
?>

Answer 1

You can put the results in a variable:
<?php
$con = mysql_connect("localhost","sam","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("products", $con);
$result = mysql_query("SELECT * FROM Products_table WHERE catid IN (1,2,7,8)");
$results = array();
while($row = mysqli_fetch_assoc($query)){
$results[] = $row;
}
mysql_close($con);
?>
and call your $results array like so:
$results[0]['value']
or in a foreach
foreach($results as $row => $value) {
//display your data however you like
}

Answer 2

What do You mean 'unprofessional'? You can style Your table with css.
Or create grid with div's with block or inline-block display property.

Answer 3

Have you considered using BootStrap CSS? I know you don't want to use tables to display the data but adding BootStrap or other CSS templates will make it look less "ugly" and less like a "table". Other than that, perhaps use lists? or other data structures?
http://getbootstrap.com/css/#tables
Adding it should be pretty simple, you can even use the links from the CDN that they provide below. Hope this helps!
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Answer 4

try to use PDO and use fetchAll() :
http://php.net/manual/en/pdostatement.fetchall.php

Answer 5

$first = '';$rows=array();
while($row = mysql_fetch_array($result)){
if(!$first){
$first="<tr><th>".implode('</th><th>',array_keys($row)).'</th></tr>';
}
$rows[]="<tr><td>".implode('</td><td>',$row).'</td></tr>';
}
$table = "<table class="table">$first".implode("\n",$rows)."</table>";
For Simple Product HTML http://www.hongkiat.com/blog/html5-single-product-page/

Answer 6

<?php
$con = mysql_connect("localhost","sam","");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("products", $con);
$result = mysql_query("SELECT * FROM Products_table WHERE catid IN (1,2,7,8)");
?>
<table style="border:1px solid;">
<tr style="background:#000;color:#fff;">
<th>Name</th>
<th>Image</th>
<th>Description</th>
<th>Contact Renter</th>
<th>Rent price</th>
</tr>
<?php
while($row = mysql_fetch_array($result)) {
?>
<tr>
<td><?php echo $row['productname'];?></td>
<td><img src='./images/products/<?php echo $row["productimage"];?>' width='150' height='100' alt=''></td>
<td><?php echo $row['productdescription'];?></td>
<td><?php echo $row['rentersdetails'];?></td>
<td><?php echo $row['rentprice'];?></td>
</tr>
<?php
}
mysql_close($con);
?>
</table>
apply this code.... remember one thing more don't echo html tags. Due to echo/print html tags in php code it will slow your page speed. Your page will take more time for load.

Answer 7

You can post your data to a responsive table made of Div tags. It looks like a table in large screens and changes to individual elements in smaller mobiles:
<div id = "" class="csstable u-full-width">
<div class="cssthead">
<div class="cssth">ccid</div>
<div class="cssth">administration_title</div>
<div class="cssth">author_id</div>
<div class="cssth">date_created</div>
</div>
<div class="csstbody">
<div class="csstr">
<div class="csslabel">ccid</div><div class="csstd">ccid-5528b9495c6864.97942127</div>
<div class="cssnlbr"></div>
<div class="csslabel">administration_title</div><div class="csstd">ccid-5528b9495c6864.97942127-title</div>
<div class="cssnlbr"></div>
<div class="csslabel">author_id</div><div class="csstd">1</div>
<div class="cssnlbr"></div>
<div class="csslabel">date_created</div><div class="csstd">2015-04-11 08:03:53</div>
<div class="cssnlbr"></div>
</div>
<div class="csstr">
<div class="csslabel">ccid</div><div class="csstd">ccid-5528b992dacfc7.34608410</div>
<div class="cssnlbr"></div>
<div class="csslabel">administration_title</div><div class="csstd">ccid-5528b992dacfc7.34608410-title</div>
<div class="cssnlbr"></div>
<div class="csslabel">author_id</div><div class="csstd">1</div>
<div class="cssnlbr"></div>
<div class="csslabel">date_created</div><div class="csstd">2015-04-11 08:05:06</div>
<div class="cssnlbr"></div>
</div>
</div>
CSS:
/* Larger than tablet */
#media (min-width: 750px)
{ /* border collapse is required for any borders to appear */
.csstable { display: table; border-collapse: collapse; }
.csstr { display: table-row }
.cssthead { display: table-header-group; border-bottom: 2px solid #eaeaea; }
.csstbody { display: table-row-group }
.csstfoot { display: table-footer-group }
.csscol { display: table-column }
.csscolgroup { display: table-column-group }
.csstd { display: table-cell; padding: 4px; }
.cssth { display: table-cell; font-weight: 600; padding: 0 0 0 4px; }
.csscaption { display: table-caption }
.csslabel{ display: none; }
.cssnlbr{ display: none; }
.csstr:nth-child(even) {
background-color: #f1f1f1;
}
}
/* smaller than tablet */
#media (max-width: 750px)
{ /* border collapse is required for any borders to appear */
.csstable { display: block }
.csstr { display: block; border: 1px solid #e1e1e1; padding: 4px; margin-bottom: 4px;}
.cssthead { display: none }
.csstbody { display: block }
.csstfoot { display: none }
.csscol { display: block }
.csscolgroup { display: block }
.csstd { display: inline-block }
.cssth { display: none; font-weight: 600; }
.csscaption { display: table-caption }
.csslabel{ display: inline-block; font-weight: 600; padding-right:6px; }
.cssnlbr{ display: block; height: 3px;}
}
I don't have time to find and use a code parsing site. But you can see how it works here on my framework development site.