Product card doesn't show up more than once

Question

I'm doing a school project about an e-commerce website. I created a product card to display each of the product and I got the data from my phpmyadmin database. The problem here is although I have two data in my database, the website only shows up one product.

This is my code :

<?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');
?>

and this is the result I got : The website display : (https://i.stack.imgur.com/0Xcxt.png)

Please help me how to display more than one product card.

are you sure the `
` closed properly? you are not missing `
` somewhere? though, after it fixed, your css definitely need some fix. ah right, a PSA, try to [html encode anything you print into UI properly to avoid XSS](https://stackoverflow.com/questions/1996122/how-to-prevent-xss-with-html-php). — Bagus Tesa, May 01 '23 at 04:26
Also `$laksana_sql` will not straight forward work in `foreach()` — Alive to die - Anant, May 01 '23 at 05:01

score 0 · Answer 1 · answered May 01 '23 at 05:02

0

please note that you have forgotten to close the <div class='features'> tag so it is considering last div as close tag and <div class='product-card'> tag remains open so it is not displaying cards

answered May 01 '23 at 05:02

Laheri Keval

11
6

Alive to die - Anant · Accepted Answer · 2023-05-01T05:19:57.033

a) Closing upper-most parent div is missing

b) Don't add the same style sheet repeatedly through the loop, put it outside of the loop.

c) echo everything through PHP along with concatenation can be hard to read and understand, so you can separate them.

d) $laksana_sql will not work straight-forward in the loop as you need to get results first from this resultset object.

Do it like below:

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

Product card doesn't show up more than once

2 Answers2