Cannot understand how to do this loop structure - php

Question

Can someone help me on the way with a SELECT (or more if needed) and some php loops. I've been trying to come up with a solution for 2 days now.
There's this 12 column grid I use which is movable and resizable. I store the data of it, such as x-axis, y-axix, width, height.
Here is an example of the database table elements:
| id | page_id | element_type | element_x | element_y | width | height | element_content
----------------------------------------------------------------------------------------
| 45 | 1 | title | 0 | 0 | 12 | 1 | Content
| 70 | 1 | button | 6 | 2 | 6 | 1 | Content
| 23 | 1 | form | 4 | 1 | 4 | 1 | Content
| 55 | 1 | rich-textfield 0 | 1 | 4 | 1 | Content
| 101| 1 | gallery | 8 | 1 | 4 | 1 | Content
As you can see the height doesn't matter because it's always 1.
This example structure would show this in my resizable grid:
So far I got this to SELECT the grid items:
$id = 1;
$selectElements = $conn->prepare("SELECT * FROM `elements` WHERE `page_id` = :id");
$selectElements->bindParam(':id', $id, PDO::PARAM_STR);
$selectElements->execute();
What I have in mind is something like
foreach element_y
<div class="row">
// loop to loop thru all element_x's per element_y
</div>
endforeach
Note that every element_y number needs to be outputted just one time each. so instead of:
0 - 1 - 1 - 1 - 2 it should be 0 - 1 - 2
Is it possible to make what I have in mind or am I thinking the complete wrong way? :) Highly appreciated!
P.S. If the question is not clear enough tell me, I will change my question!

Answer 1

I'd suggest something along the lines of the following:
Make sure your SQL orders by element_y and element_x:
SELECT * FROM `elements`
WHERE `page_id` = :id
ORDER BY `element_y` ASC, `element_x` ASC
That way, you'll be sure to have the correct order already.
Then, transform your array into a slightly different structure with something like this:
$elements_grouped = [];
foreach ($elements as $key => $element) {
$elements_grouped[$element['element_y']][$key] = $element;
}
That will put your elements in an array with element_y keys holding their respective elements.
Then, you can loop over that, and in in a second loop loop over the elements (using your pseudocode):
foreach elements_grouped as row
<div class="row">
foreach row as element
// output element
endforeach
</div>
endforeach

Answer 2

You should use multi dimensional array ( key and value) to handle all data first
$handleData = array();
foreach($result as $item){
$handleData[$item['element_y'] => array(
$item['element_x'] => array(
'element_type' => $item['element_type'],
'width' => $item['width '],
'element_content' => $item['element_content']
)
)
}
After that, you just need to printout $handleData