Populate empty grid columns with data from database

Question

On my home page is an empty grid with 3 columns per row:

On a different page, the user can fill in specific information so that these squares are filled in with said info (These squares represent projects of students/schools). I already managed to send the data to the database. But now I am a bit stuck, because how should I populate these empty squares with the data from the database?

The PHP for sending data to the db

<?php 
include('../general.config.php');

print_r($_POST);
$title = $_POST['title'];
$summary = $_POST['summary']; 
$shortSummary = $_POST['shortSummary']; 
$type = $_POST['type']; 


    $query = $db->prepare("INSERT INTO `project`( `type`, `short_summary`, `summary`, `title`) VALUES (?, ?, ?, ?)");

    $query->bindPARAM(1,$type, PDO::PARAM_INT);
    $query->bindPARAM(2,$shortSummary, PDO::PARAM_STR);
    $query->bindPARAM(3,$summary, PDO::PARAM_STR);
    $query->bindPARAM(4,$title, PDO::PARAM_STR);

    if($query->execute())
    echo "succes!";
else
    echo "NO SUCCES!";

?>

The grid layout

<div class="grid-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

This square will eventually look like this:

For this I would like to use vanilla JS as much as possible

EDIT How my data gets retrieved from the database:

  <?php 
    include('../general.config.php');

    $sql = "SELECT `type`, `short_summary`, `title` FROM `project`";
    $result = $db->query($sql);
    
    if ($result->rowCount() > 0) {
    // output data of each row
    while($row = $result->fetch(PDO::FETCH_ASSOC)) {
        echo $row["type"]. $row["short_summary"]. $row["title"]. "<br>";
    }
    } else {
    echo "0 results";
    }
?>

Where the data should be put But for every new data entry should be a new box for in the grid:

<div class="grid-container">
    <?php foreach($result as $key=>$value): ?>
        <div class="box"> <?= $key; ?> </div>
    <?php endforeach; ?>
</div>

How it is on the website It just shows the data on the top left corner and not in the grid

Answer 1

You will have to query the data from the database, an example from w3schools:

$sql = "SELECT id, firstname, lastname FROM MyGuests";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) {
    echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
  }
} else {
  echo "0 results";
}

https://www.w3schools.com/php/php_mysql_select.asp

And then you can insert it into the HTML with a for each to populate according to the data you have, in your code it would look like this:

<div class="grid-container">
<?php foreach($array as $key=>$value): ?>
    <div class="box"> <?= $key; ?> </div>
<?php endforeach; ?>
</div>

Answer 2

Based on the code you're using, you'd want to modify the data fetching/handling to this:

include('../general.config.php');

$sql = "SELECT `type`, `short_summary`, `title` FROM `project`";
$result = $db->query($sql);
$data = []; // data array
if ($result->rowCount() > 0) {
    // output data of each row
    while($row = $result->fetch(PDO::FETCH_ASSOC)) {
        $data[] = $row;
    }
} else {
    echo "0 results";
}

As you can see, we've created a new $data array to hold the results for later. When we loop the rows from our mysql query, we add them to the $data array by $data[] = $row; .

Now for your printing/echoing;

<div class="grid-container">
    <?php foreach($data as $key => $value): ?>
        <div class="box"> <?= $key; ?> </div>
    <?php endforeach; ?>
</div>

Note: All of your information will be held in the $value variable while you're looping. To see what data you have access to you can simply print_r($value) and then harness it as an array. Ie echo $value['title']; .