电商网站项目问题：数据库两条数据仅显示一个Product Card

问题描述 #

我正在进行一个学校的电商网站项目，创建了Product Card用于展示商品，数据来源于phpMyAdmin数据库。目前遇到的问题是：数据库中存在两条商品数据，但网站仅显示一个产品卡片。

问题代码 #

<?php
session_start();
include('header.php');
include('serverconnection.php');
?>
<style>
  body{background-color: #333333;}

  .product-card {
  position: relative;
  width: 200px;
  height : 300px;
  border-radius: 25px;
  padding: 20px 30px 30px 30px;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  z-index: 3;
  overflow: hidden;}

  .product-card .shopping-cart{
  display: flex;
  align-items: center;
  justify-content: space-between;}

  .product-card .shopping-cart img{
  height: 40px;
  width: 40px;
  object-fit: cover;}

  .product-card .shopping-cart i{
    display: flex;
    font-size: 30px;}

  .product-card .main-images{
  position: relative;
  height: 165px;}

  .product-card .main-images img{
  position: absolute;
  height: 150px;
  width: 150px;
  object-fit: cover;
  left : 25px;
  z-index: -1;}

  .product-card .main-images img.active{opacity: 1;}

  .product-card .computer_details .computer_name{
    color: black;
    font-size: 24px;
    font-weight: 550;}
</style>
<?php
$sql_pilihan = "SELECT * FROM komputer";
$laksana_sql = mysqli_query($connection,$sql_pilihan);
if(mysqli_num_rows($laksana_sql)>0)
{
    echo"<hr>";
    foreach($laksana_sql as $pilihan)
    {
        echo"
        <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
        <div class='product-card'>
        <div class='shopping-cart'>
            <img src='image/" . $pilihan['jenama'] . ".png'>
            <i class='bx bx-shopping-bag'></i>
        </div>
            <div class='main-images'>
                <img src='image/" . $pilihan['kod_barang'] . ".png'>
            </div>
            <div class='computer_details'>
            <span class='computer_name'>" . $pilihan['nama_barang'] . "</span>
            </div>
            <div class='price'>
            <span class='price_num'>RM " . $pilihan['harga'] . "</span><hr>
            </div>
            <div class='features'>
            <span class='pemproses_ic'>• Pemproses IC : " . $pilihan['pemproses_ic'] . "</span><br>
            <span class='pemproses_ic'>• Kapasiti RAM : " . $pilihan['kapasiti_RAM'] . "</span>
        </div>";
    }
}
else{echo "Tiada barangan yang telah direkodkan";}

?>
<?php
include('footer.php');
?>

问题分析 #

1. 未闭合产品卡片容器：循环中仅打开了<div class='product-card'>标签，但未添加对应的</div>闭合标签，导致第二条商品内容被嵌套进第一个卡片内部，视觉上只显示一个卡片。
2. 重复加载外部资源：boxicons的link标签被放在循环内，会被重复输出多次，造成不必要的资源加载。
3. 布局缺失：没有设置卡片的排列规则，即使修复闭合标签，卡片也会堆叠在一起，影响展示效果。

修复方案 #

1. 闭合产品卡片标签 #

在循环的echo内容末尾添加</div>，确保每个产品卡片都是独立的容器。

2. 优化外部资源加载 #

将<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>移到页面的<head>区域（比如header.php文件中），避免重复加载。

3. 添加卡片布局样式 #

新增外层容器.products-container，使用flex布局让卡片横向排列，同时支持自动换行，适配不同屏幕宽度。

修复后的完整代码 #

<?php
session_start();
include('header.php');
include('serverconnection.php');
?>
<style>
  body{background-color: #333333;}
  
  /* 新增外层容器，实现卡片横向排列+自动换行 */
  .products-container {
    display: flex;
    gap: 20px;
    padding: 20px;
    flex-wrap: wrap;
  }

  .product-card {
  position: relative;
  width: 200px;
  height : 300px;
  border-radius: 25px;
  padding: 20px 30px 30px 30px;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  z-index: 3;
  overflow: hidden;}

  .product-card .shopping-cart{
  display: flex;
  align-items: center;
  justify-content: space-between;}

  .product-card .shopping-cart img{
  height: 40px;
  width: 40px;
  object-fit: cover;}

  .product-card .shopping-cart i{
    display: flex;
    font-size: 30px;}

  .product-card .main-images{
  position: relative;
  height: 165px;}

  .product-card .main-images img{
  position: absolute;
  height: 150px;
  width: 150px;
  object-fit: cover;
  left : 25px;
  z-index: -1;}

  .product-card .main-images img.active{opacity: 1;}

  .product-card .computer_details .computer_name{
    color: black;
    font-size: 24px;
    font-weight: 550;}
</style>
<?php
$sql_pilihan = "SELECT * FROM komputer";
$laksana_sql = mysqli_query($connection,$sql_pilihan);
if(mysqli_num_rows($laksana_sql)>0)
{
    echo"<hr>";
    // 外层容器包裹所有卡片
    echo"<div class='products-container'>";
    foreach($laksana_sql as $pilihan)
    {
        echo"
        <div class='product-card'>
        <div class='shopping-cart'>
            <img src='image/" . $pilihan['jenama'] . ".png'>
            <i class='bx bx-shopping-bag'></i>
        </div>
            <div class='main-images'>
                <img src='image/" . $pilihan['kod_barang'] . ".png'>
            </div>
            <div class='computer_details'>
            <span class='computer_name'>" . $pilihan['nama_barang'] . "</span>
            </div>
            <div class='price'>
            <span class='price_num'>RM " . $pilihan['harga'] . "</span><hr>
            </div>
            <div class='features'>
            <span class='pemproses_ic'>• Pemproses IC : " . $pilihan['pemproses_ic'] . "</span><br>
            <span class='pemproses_ic'>• Kapasiti RAM : " . $pilihan['kapasiti_RAM'] . "</span>
        </div>
        </div>"; // 闭合产品卡片容器
    }
    echo"</div>"; // 闭合外层容器
}
else{echo "Tiada barangan yang telah direkodkan";}

?>
<?php
include('footer.php');
?>

内容的提问来源于stack exchange，提问作者Avaneesh Ganesan