Populate <div>`s using data from MYSQL

Question

I have entries in my db, which I would like to display on a website. What I would like to achieve is this: I have multiple divs (listings) which should contain data from db. Every listing should have data from next entry in db. I am new to PHP.

What I have for now is this:

<?php
require_once 'dbconfig.php';

try {
 $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

 $sql = 'SELECT `id`,`slika`,`model`,`znamka`,`letnik`,`vozno`,`naslov_vozila`,`cena`, `trajanje`,`timestamp` FROM `oddaja` ORDER BY `timestamp` DESC';

 $q = $conn->query($sql);
 $q->setFetchMode(PDO::FETCH_ASSOC);

} catch (PDOException $pe) {
 die("Could not connect to the database $dbname :" . $pe->getMessage());
}
?>

I am displaying data inside div with

<a class="inventory" href="inventory-listing.html"> 
<?php while ($r = $q->fetch()): ?>
      <div class="title"><?php echo htmlspecialchars($r['znamka'])?></div>  
<?php endwhile; ?>

How div looks:

<div class="inventory margin-bottom-20 clearfix scroll_effect fadeIn"> 
    <input type="checkbox" name="a" class="checkbox compare_vehicle" id="vehicle_2" /> 
    <label for="vehicle_2"></label>                                 
    <a class="inventory" href="inventory-listing.html"> 
    <div class="title">2009 Porsche Boxster Base Red Convertible</div>                                     
    <img src="images/car-2-200x150.jpg" class="preview" alt="preview">                                     
    <table class="options-primary">
        <tr> 
            <td class="option primary">Body Style:</td>
            <td class="spec">Convertible</td>
        </tr>                                         
        <tr> 
            <td class="option primary">Drivetrain:</td>
            <td class="spec">RWD</td>
        </tr>                                         
        <tr> 
            <td class="option primary">Engine:</td>
            <td class="spec">2.9L Mid-Engine V6</td>
        </tr>
        <tr> 
            <td class="option primary">Transmission:</td>
            <td class="spec">5-Speed Manual</td>
        </tr>
        <tr> 
            <td class="option primary">Mileage:</td>
            <td class="spec">26,273</td>
        </tr>
    </table>
    <table class="options-secondary"> 
        <tr> 
            <td class="option secondary">Exterior Color:</td>
            <td class="spec">Guards Red</td>
        </tr>
        <tr>
            <td class="option secondary">Interior Color:</td>
            <td class="spec">Platinum Grey</td>
        </tr>
        <tr> 
            <td class="option secondary">MPG:</td>
            <td class="spec">20 city / 30 hwy</td>
        </tr>
        <tr> 
            <td class="option secondary">Stock Number:</td>
            <td class="spec">590271</td>
        </tr>
        <tr> 
            <td class="option secondary">VIN Number:</td>
            <td class="spec">WP0AB2A74AL060306</td>   
        </tr>
    </table>
    <img src="images/carfax.png" alt="carfax" class="carfax" /> 
    <div class="price"> 
        <b>Price:</b><br> 
        <div class="figure">$34,995<br</div>
        <div class="tax">Plus Sales Tax</div>
    </div>
    <div class="view-details gradient_button"> 
        <i class='fa fa-plus-circle'></i> View Details 
    </div>
    <div class="clearfix"></div>                                     
    </a>                                 
    <div class="view-video gradient_button" data-youtube-id="3oh7PBc33dk">
       <i class="fa fa-video-camera"></i> View Video
    </div>   

I am getting data from db, but when I would like to display title, I am getting every entry from db. What I think I should do: - Generate HTML of a div on a query and loop each row. How would I do it for every ID in db? Any samples?

Answer 1

You need to echo the whole div.

Instead of:

<?php while ($r = $q->fetch()): ?>
<div class="title"><?php echo htmlspecialchars($r['znamka'])?></div>  
<?php endwhile; ?>

Use:

<?php while ($r = $q->fetch()): ?>
<?php echo '<div class="title">' . htmlspecialchars($r['znamka']) . '?></div>';  
<?php endwhile; ?>