Populate HTML DIV with data from mySQL

Question

I have a MySQL DB "dorav3" with a table "dtab1" with the below column containing business card info. I also have a php script and HTML page to display the DB data in a HTML table.

My question is how can I go from just populating a table to populating my flip cards below

where I currently do <td><?php echo $row1[0];?></td> for the table

Should I do something like for the flip card?

<body>
<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2><?php echo $row1[0];?></h2>
       <h2><?php echo $row1[1];?></h2>
    </div>
    <div class="flip-box-back">
      <h4><?php echo $row1[2];?></h4>
      <h4><?php echo $row1[3];?></h4>
      <h4><?php echo $row1[4];?></h4>
    </div>
  </div>
</div>

I am really stuck!

+--------------------+---------+------+-----+---------+----------------+
| Field              | Type    | Null | Key | Default | Extra          |
+--------------------+---------+------+-----+---------+----------------+
| Title              | text    | YES  |     | NULL    |                |
| Name               | text    | YES  |     | NULL    |                |
| Email              | text    | YES  |     | NULL    |                |
| Website            | text    | YES  |     | NULL    |                |
| Contact            | text    | YES  |     | NULL    |                |
| id                 | int(11) | NO   | PRI | NULL    | auto_increment |
 ----------------------------------------------------------------------

PHP

<?php

// php populate html table from mysql database

$hostname = "localhost";
$username = "xxx";
$password = "xxx";
$databaseName = "dorav3";

// connect to mysql
$connect = mysqli_connect($hostname, $username, $password, $databaseName);

// mysql select query

$query = "SELECT * FROM `dtab1";


// result for method one
$result1 = mysqli_query($connect, $query);

// result for method two 
$result2 = mysqli_query($connect, $query);

$dataRow = "";

while($row2 = mysqli_fetch_array($result2))
{
    $dataRow = $dataRow."<td>$row2[0]</td><td>$row2[1]</td><td>$row2[2]</td><td>$row2[3]</td><td>$row2[4]</td><td>$row2[5]</td><td>$row2[6]</td><td>$row2[7]</td><td>$row2[8]</td><td>$row2[9]</td><td>$row2[10]</td><td>$row2[11]</td><td>$row2[12]</td><td>$row2[13]</td><td>$row2[14]</td><td>$row2[15]</td>";
}

?>

HTML to Populate table

    <body>
        <table>
             <tr>
                <th>Title</th>
                <th>Name</th>
                <th>Email</th>
                <th>Website</th>
                <th>Contact</th>
            </tr>
            </table>
              <?php while($row1 = mysqli_fetch_array($result1)):;?>
            <table>
            <tr>
                <td><?php echo $row1[0];?></td>
                <td><?php echo $row1[1];?></td>
                <td><?php echo $row1[2];?></td>
                <td><?php echo $row1[3];?></td>
                <td><?php echo $row1[4];?></td>
            </tr>
        </table>
        <?php endwhile;?>
    </body>
</html>

What I want to do next is populate a more rich format with my data.

HTML to Populate cards

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Title</h2>
       <h2>Name</h2>
    </div>
    <div class="flip-box-back">
      <h4>Email</h4>
      <h4>Website</h4>
      <h4>Contact</h4>
    </div>
  </div>
</div>
<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Title</h2>
       <h2>Name</h2>
    </div>
    <div class="flip-box-back">
      <h4>Email</h4>
      <h4>Website</h4>
      <h4>Contact</h4>
    </div>
  </div>
</div>
<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Title</h2>
       <h2>Name</h2>
    </div>
    <div class="flip-box-back">
      <h4>Email</h4>
      <h4>Website</h4>
      <h4>Contact</h4>
    </div>
  </div>
</div>

</div>
</body>
</html>

Is your file saved as .html or .php? (the HTML file to populate the cards) — JeanPaul98, Dec 18 '18 at 20:54

score 0 · Answer 1 · answered Dec 18 '18 at 22:12

i am not really getting what u want to do but i think this should work :

<?php while($row1 = mysqli_fetch_array($result1)):;?>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2><?php echo $row1[0];?></h2>
<h2><?php echo $row1[1];?></h2>
</div>
<div class="flip-box-back">
<h4><?php echo $row1[2];?></h4>
<h4><?php echo $row1[3];?></h4>
<h4><?php echo $row1[4];?></h4>
</div>
</div>
</div>
<?php endwhile;?>

score 0 · Answer 2 · answered Dec 19 '18 at 10:51

I'll have a more complicated answer for this one.

You've text fields in your table, my advice to turn to varchar(n). You can learn differences here - Difference between VARCHAR and TEXT in mysql. One of the biggest issues of text field - it can't be part of index, though you can use full-text search features.
Try not to stick to SELECT * FROM ..., it's more advisable to select only necessary data from DB - due to performance and security reasons.
Combining a lot of html and php code in one file will end in hell after all. Let's separate parts of your web applications in different pieces: HTML and CSS will be static templates, JS will be used for page manipulation and making your page dynamic (via requests to server, adding animation etc.) and PHP will be used for DB requests. Such separation will encapsulate your code making it easy to understand/develop/maintain

Thus, i'll give following code:

PHP (server.php)

$hostname = "localhost";
$username = "***";
$password = "***";
$databaseName = "***";

// connect to mysql
$connect = mysqli_connect($hostname, $username, $password, $databaseName);

$query = "SELECT title, name, email, website, contact FROM dtab1";
// result 
$result = mysqli_query($connect, $query);

while($row = mysqli_fetch_array($result))
{
  $dataRow[] = $row;
}

echo json_encode($dataRow);

HTML

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="my_script.js"></script>
</head>
<body>
<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2 id='title'></h2>
      <h2 id='name'></h2>
    </div>
    <div class="flip-box-back">
      <h4 id='email'></h4>
      <h4 id='website'></h4>
      <h4 id='contact'></h4>
    </div>
  </div>
</div>
</body>
</html>

JS (my_script.js)

$(document).ready(function() {
     $.post("server.php", {
        // you can add any POST request
     }, function(server_data) {
        data = JSON.parse(server_data);

        $("#title").html(data[0]['title']);
        $("#name").html(data[0]['name']);
        $("#email").html(data[0]['email']);
        $("#website").html(data[0]['website']);
        $("#contact").html(data[0]['contact']);
     });    
});

How it works - HTML is just plain template, you can easily apply any CSS style and see how it looks like. JS uses popular JQuery for making POST request to your server (ie localhost) and filling data returned. PHP itself only makes necessary DB request and outputs data. All these parts can be easily modified and tested alone.

Hope this helps

Populate HTML DIV with data from mySQL

2 Answers2

Linked