PHP While Loop to separate data in to columns - php

Question

Hello Programing Newbie here.. Forgive me if I'm my question doesn't make sense. But, I'm attempting to Loop through a Table and display the Data in 3 Columns based on data..
There is a field "column_number" in the Table to identify the column it needs to be rendered to..
I have things working except getting the "Div's" assigned to "their" column.
right now the loop is creating a column for each. This is undesired..
See image..
Rendered Code :
I'll attach my Loop Code.
<?php
// display data retrieved if it's greater than zero
echo "<div id='colums'>";
if($num>0){
//echo "<div id='colums'>";
// loop through the records
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row);
echo "<div id='column{$column_number}'>";
//echo "<div id='column'>";
// display details
echo "<div class='Div'>";
echo "<div class='DivHeader' style='background-color:#{$title_bg_color}'>";
echo "<p style='color:#{$title_txt_color}' class='alignleft'>{$title}</p>";
echo "<p class='alignright'><a href='edit.php'>edit</a><a href='delete.asp'></a>";
echo "</p>";
echo "</div>";
echo "<div class='DivBody'>";
echo "Div Contents";
echo "</div>";
echo "</div>";
echo "</div>";
}
// the number of rows retrievede
$total_rows=0;
}
// Display message if no data found
else{
echo "<div class='alert'>";
echo "<strong>**** No User Data Found ****</strong>";
echo "</div>";
}
echo "</div>";
?>
I will try to add more information..
You can see in the first below screenshot I would like 3 Columns with the "widgets/DIV's" listed in each that have an associated column_number.
I named each "widgets/DIV's" accordingly the UserName, Column_Number and WidgetID so i can see if the DIV's are showing in the correct DIV/Column based on the logged in user.
I have also attached a pic of the Query and Data in the table for "usrid=3"
I have a Limit in the query because I was playing with possibly paging..
I must confess, The end result is to have the widgets draggable so the users can move them around and it will save/remember their place, column and order in the column.. The "Draggable" is currently working. I just want to get the widgets to land in their assigned column and then tackle the Draggable/Save..
Desired Result Screenshot :
Query and Data Screenshot :
Sample Desired Rendered Result :

Answer 1

Place the fetched results into an array then construct a foreach() loop and structure your column construct within the foreach() loop.
while($row = $result->fetch_assoc()){
$data[] = $row;
}
//Added a static array within $data for example purposes
$data = ['some info', 'somemore info', 'More info here'];//this is an array returned from your DB
if(is_array($data)){
$stmt = '';//declare an empty variable
foreach($data as $key => $value){
$stmt .= "
<div style='float:left; width: max-content; padding:20px;' id='columnTitle'>Column ".$key."
<div class=\"column".$key."\">".$value."</div>
</div>
";
}
$stmt .= "<div style='clear:both;'></div>";
}
Then use in html like:
<div>
<?=$stmt?>
</div>
or
<div>
<?php echo $stmt; ?>
</div>
output

Answer 2

Like an concept, i can propose you to modify the code according to this model:
<?php
$array = array(1,2,3,4,5,6,7,8,9,10); // Assuming we have 10 records
$max_col = 3; //Maximum columns we need
$init_col = 1; //Initial col number
echo "<div class='columns'>\n";
foreach($array as $value){
if($init_col <= $max_col){
//display first and second column
echo 'col' . $init_col;
//set init value increment
$init_col++;
} else {
echo "\n"; //Echo new line since we have new column
$init_col = 1;
//display first and second column
echo 'col' . $init_col;
//set init value increment
$init_col++;
}
}
echo "\n</div>";
Output:
<div class='columns'>
col1 col2 col3
col1 col2 col3
col1 col2 col3
col1
</div>
For your code example i propose this:
$max_col = 3; //Maximum columns we need
$init_col = 1; //Initial col number
if($num>0){
echo "<div id='colums'>";
// loop through the records
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row);
if($init_col <= $max_col){
//display first and second column
echo "<div id='column{$init_col}'>";
// display details
echo "<div class='Div'>";
echo "<div class='DivHeader' style='background-color:#{$title_bg_color}'>";
echo "<p style='color:#{$title_txt_color}' class='alignleft'>{$title}</p>";
echo "<p class='alignright'><a href='edit.php'>edit</a><a href='delete.asp'></a>";
echo "</p>";
echo "</div>";
echo "</div>";
echo "<div class='DivBody'>";
echo "Div Contents";
echo "</div>";
echo "</div>";
//set init value increment
$init_col++;
} else {
//Echo new line since we have new column
$init_col = 1;
//display first and second column
//display first and second column
echo "<div id='column{$init_col}'>";
// display details
echo "<div class='Div'>";
echo "<div class='DivHeader' style='background-color:#{$title_bg_color}'>";
echo "<p style='color:#{$title_txt_color}' class='alignleft'>{$title}</p>";
echo "<p class='alignright'><a href='edit.php'>edit</a><a href='delete.asp'></a>";
echo "</p>";
echo "</div>";
echo "</div>";
echo "<div class='DivBody'>";
echo "Div Contents";
echo "</div>";
echo "</div>";
//set init value increment
$init_col++;
}
}
echo "</div>";
}
// Display message if no data found
else{
echo "<div class='alert'>";
echo "<strong>**** No User Data Found ****</strong>";
echo "</div>";
}
Hope it will helps