Question 108390 in PHP Question posted in
Official manual can be found here.

Php – Product card doesn't show up more than once

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/[email protected]/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://phpout.com/wp-content/uploads/2023/05/0Xcxt.png)

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

Tags:

2

Answers


  1. 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

    Login or Signup to reply.
  2. 0

    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/[email protected]/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');
?>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search