Display items from database in HTML/PHP - php

Question

I'm trying to display some items on webpage from a database. I have a function that loops through the data stored in the database. Currently it displays the last item that appears within the database rather than the first or anything else. I have tried ordering the items by the id but it gives the same result. I have also tried to display individual items of the array but it just displays the first character of the last item within the database.
display items function:
<?php
function get_product_details()
{
global $db;
$ret = array();
$sql = "SELECT * FROM Products";
$res = mysqli_query($db, $sql);
while($ar = mysqli_fetch_assoc($res))
{
$ret[] = $ar;
}
return $ret;
}
?>
Area for displaying items:
<article class = "main_area2">
<h1 class = "food_h1">Menu</h1><br>
<section class = "menu_section">
<?php
$products = get_product_details();
foreach($products as $ap)
{
$name = $ap['pro_name'];
$description = $ap['descr'];
$price = $ap['rrp'];
}
?>
<div class = "section_4">
<h1 class = "food_h2"><?php echo $name; ?></h2>
<br><img src = "img/products/hassellback_pot.jpg" class = "img_dis">
<br><h1 class = "food_h2"><?php echo $description; ?></h1>
<br><h1 class = "food_h2">£ <?php echo $price; ?></h1>
<button class = "basket_btn" type = "button"> Buy </button>
</div>
This is the current display and as you can see the first and last are exactly the same (the second to eighth are currently hard-coded).
P.S. Don't worry about closing the section & article with the close tags because it's already done.

Answer 1

You're looping over the array, but you're not doing anything with the values:
foreach($products as $ap)
{
$name = $ap['pro_name'];
$description = $ap['descr'];
$price = $ap['rrp'];
}
Then after the loop, when the values are the last of the array, you finally use them once:
<div class = "section_4">
<h1 class = "food_h2"><?php echo $name; ?></h2>
<br><img src = "img/products/hassellback_pot.jpg" class = "img_dis">
<br><h1 class = "food_h2"><?php echo $description; ?></h1>
<br><h1 class = "food_h2">£ <?php echo $price; ?></h1>
<button class = "basket_btn" type = "button"> Buy </button>
</div>
Instead, use the values in the loop so you can use each of them:
foreach($products as $ap)
{
$name = $ap['pro_name'];
$description = $ap['descr'];
$price = $ap['rrp'];
?>
<div class = "section_4">
<h1 class = "food_h2"><?php echo $name; ?></h2>
<br><img src = "img/products/hassellback_pot.jpg" class = "img_dis">
<br><h1 class = "food_h2"><?php echo $description; ?></h1>
<br><h1 class = "food_h2">£ <?php echo $price; ?></h1>
<button class = "basket_btn" type = "button"> Buy </button>
</div>
<?php
} // end the loop after using the values

Answer 2

It seems, that your HTML- generation should be inside the loop, not outside:
<?php
$products = get_product_details();
foreach($products as $ap) {
$name = $ap['pro_name'];
$description = $ap['descr'];
$price = $ap['rrp'];
?>
<div class = "section_4">
<h1 class = "food_h2"><?php echo $name; ?></h2>
<br><img src = "img/products/hassellback_pot.jpg" class = "img_dis">
<br><h1 class = "food_h2"><?php echo $description; ?></h1>
<br><h1 class = "food_h2">£ <?php echo $price; ?></h1>
<button class = "basket_btn" type = "button"> Buy </button>
</div>
<?php
} ?>

Answer 3

<article class = "main_area2">
<h1 class = "food_h1">Menu</h1>
<br>
<section class = "menu_section">
<?php foreach(get_product_details() as $ap): ?>
<div class = "section_4">
<h1 class = "food_h2"><?php echo $ap['pro_name']; ?></h1>
<br>
<img src = "img/products/hassellback_pot.jpg" class = "img_dis">
<br>
<h1 class = "food_h2"><?php echo $ap['descr'] ?></h1>
<br>
<h1 class = "food_h2">£ <?php $ap['rrp']; ?></h1>
<button class = "basket_btn" type = "button"> Buy </button>
</div>
<?php endforeach; ?>
</section>
</article>