selecting and displaying records randomly from mysql + php
Posted: Wed Jun 19, 2013 9:41 am
hi guys, am new out here and a complete newbie to php. hope i will get some help to complete my website.
below is a working code i wrote to select random records from my tbl_products in mysql database. it works fine.
here is the html i created so that records are randomly displayed. it will display the product name, product image, price of product
[text]<div class="center_content">
<div class="center_title_bar">Featured Products</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="#">Product 1</a></div>
<div class="product_img"><a href="">Image 1</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="#">Product 2</a></div>
<div class="product_img"><a href="#">Image 2</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="#">Product 3</a></div>
<div class="product_img"><a href="#">Image 3</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="#">Product 4</a></div>
<div class="product_img"><a href="#">Image 4</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div> </div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="details.html">Product 5</a></div>
<div class="product_img"><a href="details.html">Image 5</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div> </div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="details.html">Product 6</a></div>
<div class="product_img"><a href="details.html">Image 6</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="center_title_bar">Recommended Products</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="#">Product 7</a></div>
<div class="product_img"><a href="#">Image 7</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="#">Product 8</a></div>
<div class="product_img"><a href="#">Image 8</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="#">Product 9</a></div>
<div class="product_img"><a href="#">Image 9</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
</div>[/text]
how do i combine both so that the products can be displayed randomly in my html codes above?
can it be done this way?
below is a working code i wrote to select random records from my tbl_products in mysql database. it works fine.
Code: Select all
<?php
//Create the connection and select the DB
include('db_connect.php');
// Select records from the DB
$query = "SELECT * FROM tbl_product ORDER BY Rand() LIMIT 7";
$result = mysql_query($query);
// Display records from the table
echo "<table border=\"5\" cellpadding=\"5\" cellspacing=\"0\" style=\"border-collapse: collapse\" bordercolor=\"#808080\" width=\"100%\" id=\"AutoNumber2\" bgcolor=\"#C0C0C0\"><tr>";
while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
echo "<tr><td>$row[1]</td><td>$row[2]</td><td>$row[8]</td></tr>";
}
echo "</table>";
?>[text]<div class="center_content">
<div class="center_title_bar">Featured Products</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="#">Product 1</a></div>
<div class="product_img"><a href="">Image 1</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="#">Product 2</a></div>
<div class="product_img"><a href="#">Image 2</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="#">Product 3</a></div>
<div class="product_img"><a href="#">Image 3</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="#">Product 4</a></div>
<div class="product_img"><a href="#">Image 4</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div> </div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="details.html">Product 5</a></div>
<div class="product_img"><a href="details.html">Image 5</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div> </div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="details.html">Product 6</a></div>
<div class="product_img"><a href="details.html">Image 6</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="center_title_bar">Recommended Products</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="#">Product 7</a></div>
<div class="product_img"><a href="#">Image 7</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="#">Product 8</a></div>
<div class="product_img"><a href="#">Image 8</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="#">Product 9</a></div>
<div class="product_img"><a href="#">Image 9</a></div>
<div class="prod_price"><span class="reduce">%normal%</span> <span class="price">%promo%</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab">
<a href="#" title="header=[Add to fav] body=[ ] fade=[on]"><img src="Images/add_to_fav.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" title="header=[Compare] body=[ ] fade=[on]"><img src="Images/compare-icon.png" alt="" title="" border="0" class="left_bt" /></a>
<a href="#" class="prod_details">details</a>
</div>
</div>
</div>[/text]
how do i combine both so that the products can be displayed randomly in my html codes above?
can it be done this way?