Search code examples
phpjqueryhtmlcsswebshop

Div inside php. Webshop thumbnails


I'm creating a webshop sort of thing without paying. I want to create things like thumbnails, so you can see how a product is called and how it looks like. this is what the thumbnail looks like atm. enter image description here

I use this code to create this:

<div class="product">
        <?php
          include 'assets/php_includes/db_connection.php';

          $query = "SELECT * FROM artikelen";
          $result = mysqli_query($DB_CONNECTION, $query);

          if ($result === false) {
            die(mysql_error());
          }

          while($artikel = mysqli_fetch_array($result)) {
            if ($artikel['Ingeschakeld'] === 1) {
              echo "" . $artikel['Naam'] . "<br>";
              echo "" . $artikel['Prijs'] . "<br>";
              echo "" . $artikel['Informatie'] . "<br>";
              echo "" . $artikel['Ingeschakeld'] . "<br>";
            } else {
              echo "This article isn't available!";
            }
          }
        ?>
      </div>

But all the different items come in 1 thumbnail. How would I make it so it would make multiple thumbnails with only 1 code like this?


Solution

  • Try like below. Just an example.

    <style>
    .product{
    
        border: 2px solid #808080;
        width: 205px;
        height: 205px;
        margin: 5px;
        padding: 5px;
        border-radius: 5px;
        float: left;
    }
    </style>
    <?php
                $artikel = array(array('Naam'=>"Naam 1", "Prijs"=>"Prijs 1", "Informatie"=>"Informatie 1", "Ingeschakeld"=>1),
                                   array('Naam'=>"Naam 2", "Prijs"=>"Prijs 2", "Informatie"=>"Informatie 2", "Ingeschakeld"=>1),
                                   array('Naam'=>"Naam 3", "Prijs"=>"Prijs 3", "Informatie"=>"Informatie 3", "Ingeschakeld"=>2),
                                   array('Naam'=>"Naam 4", "Prijs"=>"Prijs 4", "Informatie"=>"Informatie 4", "Ingeschakeld"=>1),
                                   array('Naam'=>"Naam 5", "Prijs"=>"Prijs 5", "Informatie"=>"Informatie 5", "Ingeschakeld"=>1),
                                  );
    
                    foreach($artikel as $artikel)
                        {
    
                            ?>
                            <div class="product">
                                <?php
                             if ($artikel['Ingeschakeld'] === 1) {      
                                      echo "" . $artikel['Naam'] . "<br>";
                                      echo "" . $artikel['Prijs'] . "<br>";
                                      echo "" . $artikel['Informatie'] . "<br>";
                                      echo "" . $artikel['Ingeschakeld'] . "<br>";
                                } else {
                                    echo "This article isn't available!";
                                }  
                                ?>
                            </div>
    
                        <?php
                        }
    
    ?>