Dynamically populating a div with data from a MySQL table

Question

Lets say I have a persons table :

forename    surname    age    gender
--------------------------------------------
adam        example    90      male
john        example    90      male

If I wanted to display this information in separate divs, how could this be done? Say for example the following HTML.

<div class = "container">
     <div class="wrapper">
        <div class = "jumbotron">
            <!-- adams data here -->
        </div>
        <div class = "jumbotron">
            <!-- johns data here -->
        </div>
    </div>
</div>

I'm aware on how to query the DB to get the information into PHP variables, I'm just not sure how to dynamically display the data in separate divs.

Below is how I am getting the data

<?php 

    if($result = $db->query("SELECT forename,surname FROM users ")){
        if($count = $result->num_rows){
            while($row = $result->fetch_object()){
                echo $row->forename, '<br><br>';
                echo $row->surname, '<br><br>';
            }
            $result->free();
       }
    }
   ?>

Answer 1

Well Joe, This is a fairly simple problem that has probably been answered before. I'll use the mysqli class of php

first create a mysqli connection object in a file for best practice then include it in your main script.

<?php
$connection = new mysqli($host_address, $username, $password, $database);
?>

include this in your main script

<?php require "path\to\connection\script"; ?>
<?php
 $sql_adam = "SELECT * FROM persons WHERE forename = 'adam'";
 $sql_john = "SELECT * FROM persons WHERE forename = 'john'";

 $qry1 = $connection->query($sql_adam);
 $qry2 = $connection->query($sql_john);

?>
<div class = "container">
    <div class="wrapper">
        <div class = "jumbotron">
             <?php if ($qry1->num_rows >= 1){
                while($adam = $qry1->fetch_assoc()){
                    foreach ($adam as $column => $data) {
                       echo  "<p>$column : $data </p>";
                    }
                }
             }
        </div>
        <div class = "jumbotron">
            <?php if ($qry2->num_rows >= 1){
                while($john = $qry2->fetch_assoc()){
                    foreach ($john as $column => $data) {
                       echo  "<p>$column : $data </p>";
                    }
                }
             }
        </div>
    </div>
</div>

Your Result should be something like

<div class = "container">
   <div class="wrapper">
      <div class = "jumbotron">
         <p>forename : adam</p>
         <p>surname : example</p>
         <p>age : 90</p>
         <p>gender : male</p>

      </div>
      <div class = "jumbotron">
         <p>forename : john</p>
         <p>surname : example</p>
         <p>age : 90</p>
         <p>gender : male</p>
      </div>
   </div>
</div>

Answer 2

Just wrap the div inside a loop so you'll print a div for each result row

<?php foreach($result as $r): ?>
   <div class = "jumbotron">
     <?php echo $r['name'] // Print fields you need ?>
   </div>
<?php endforeach; ?>

EDIT: Now I can see your query. Try this:

<?php 
  if($result = $db->query("SELECT forename,surname FROM users ")){
    if($count = $result->num_rows){
      while($row = $result->fetch_object()){
?>
        <div class = "jumbotron">
          <?php echo $row->forename; ?><br><br>
          <?php echo $row->surname; ?><br><br>
        </div>
<?php          
      }
    $result->free();
    }
  }
?>