How to build a family tree with colspan in PHP - php

Question

I have question about looping out a family tree in PHP. I want the structure to be like this:
See picture
I have truble presenting the data in this way. This is my code:
$start_person = $_GET['search'];
// Hämta alla personer från databasen
$db = new PDO("mysql:host=localhost;dbname=csv2", "root", "");
$stmt = $db->prepare("SELECT * FROM horses");
$stmt->execute();
$persons = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Skapa en array för varje generation och lägg till startpersonen i den första generationen
$generations = array();
$generations[0] = array_filter($persons, function ($p) use ($start_person) {
return $p['Name'] === $start_person;
});
// Loopa igenom varje generation och lägg till personernas föräldrar i nästa generation
for ($i = 1; $i <= 5; $i++) {
$prev_generation = $generations[$i - 1];
$generations[$i] = array();
foreach ($prev_generation as $person) {
$father = $person['Sire_Name'];
$mother = $person['Dam_Name'];
$father_data = array_filter($persons, function ($p) use ($father) {
return $p['Name'] === $father;
});
$mother_data = array_filter($persons, function ($p) use ($mother) {
return $p['Name'] === $mother;
});
if (count($father_data) > 0) {
$generations[$i] = array_merge($generations[$i], $father_data);
}
if (count($mother_data) > 0) {
$generations[$i] = array_merge($generations[$i], $mother_data);
}
}
}
echo '<div class="bg-white rounded-lg shadow-md p-4">';
echo "<table class='bg-white' style='max-width: 700px;'>";
for ($i = 0; $i <= 5; $i++) {
echo "<tr>";
foreach ($generations[$i] as $person) {
// Print out father's generation
echo "<td colspan='" . pow(2, 5-$i) . "' style='border: 1px solid black;'><a style='color:blue' href='query.php?search={$person['Sire_Name']}'>{$person['Sire_Name']}</a></td>";
// Print out mother's generation
echo "<td colspan='" . pow(2, 5-$i) . "' style='border: 1px solid black;'><a style='color:blue' href='query.php?search={$person['Dam_Name']}'>{$person['Dam_Name']}</a></td>";
}
echo "</tr>";
}
echo "</table>";
echo "</div>";
What should I edit to present the data as the picture?

Answer 1

On second thought, a nested table might be easier, although not what you asked for. (Maybe if I had more coffee.)
The class below represents a common structure with a name and two optional leafs, just called left and right in order to not impose any implied logic, although they could be parents, children, sire, dam, etc.
class Thing {
public function __construct(
public readonly string $name,
public readonly ?Thing $left = null,
public readonly ?Thing $right = null,
) {
}
public function hasThings(): bool {
return $this->left || $this->right;
}
public function getThingDepth(): int{
if(!$this->hasThings()) {
return 1;
}
return max($this->left->getThingDepth(), $this->right->getThingDepth()) + 1;
}
public function getHtml(): string {
$buf = [];
$buf[] = '<table>';
$buf[] = '<tr>';
$buf[] = '<td>';
$buf[] = $this->name;
$buf[] = '</td>';
if($this->hasThings()){
$buf[] = '<td>';
$buf[] = $this?->left->getHtml() ?? '-';
$buf[] = $this?->right->getHtml() ?? '-';
$buf[] = '</td>';
}
$buf[] = '</tr>';
$buf[] = '</table>';
return implode("\n", $buf);
}
}
The getThingDepth() method might be useful for the rowspan, so I left it in, although it is not currently used.
Using it is where it gets complicated, and you might need to relax the readonly portions, or change the constructor completely, and that really depends on how you’d be building it programmatically. But here’s a demo usage:
$me = new Thing(
'Child',
new Thing('Dad', new Thing('Dad\'s dad'), new Thing('Dad\'s mom')),
new Thing('Mom', new Thing('Mom\'s dad'), new Thing('Mom\'s mom')),
);
echo $me->getHtml();
You can see an online demo here along with what the rendered HTML looks like here
I know it isn’t what you were initially looking for, but maybe it helps, or maybe puts you down a path at least.