HTML tabel bouwen met PHP en MySQL
Tabel bouwen met behulp van gegevens uit array of database
1. Het idee
2. Benodigdheden
3. Eerste opzet
4. De laatste rij
5. Meerdere pagina's
1. Het idee
Stel je hebt een partij gegevens uit je database gehaald en/of in een array ingelezen, en je wilt deze
gegevens niet onder elkaar afdrukken, maar naast elkaar. Hiervoor zul je dus een HTML-tabel moeten gaan
bouwen (of je gebruikt div's, voor de echte die-hards). Hierbij hangt het aantal rijen van zo'n tabel
af van de hoeveelheid resultaten die je op één pagina wilt afdrukken (en ook van het aantal kolommen per rij).
Het aantal kolommen zul je zelf moeten verzinnen. Stel je hebt bijvoorbeeld 10 items die je naast elkaar wilt
afdrukken in een tabel met 4 kolommen. Je resultaattabel zal er dus als volgt uit zien:
+---------+---------+---------+---------+
| item 1 | item 2 | item 3 | item 4 |
+---------+---------+---------+---------+
| item 5 | item 6 | item 7 | item 8 |
+---------+---------+---------+---------+
| item 9 | item 10 | - | - |
+---------+---------+---------+---------+
Elk item kan zelf ook weer in een tabel zitten, het gaat hier alleen om de "buitenste" tabel, die items
naast elkaar zet.
2. Benodigdheden
Een aantal zaken aan deze tabel zul je zelf in moeten stellen, zoals:
Aantal kolommen
Omdat PHP de tabel bouwt, moet je deze vertellen wanneer er een rij afgesloten moet worden en wanneer er
een nieuwe rij geopend moet worden. Hiertoe sla je het aantal kolommen waar je je tabel uit wilt laten
bestaan op in een variabele, bijvoorbeeld $aantal_kolommen.
Het aantal rijen hoef je niet te weten, tenzij je je tabellen altijd uit een vast aantal rijen en vast
aantal kolommen wilt laten bestaan. We gaan er hier van uit dat de tabel ophoudt wanneer alle items
afgedrukt zijn. Een tabel zal dus nooit meer rijen hebben dan het aantal items gedeeld door
$aantal_kolommen, en dit resultaat naar boven afgerond (bij het bovenstaande voorbeeld: 10/4 = 2.5, naar
boven afgerond is dit 3 - de tabel bestaat uit 3 rijen).
Breedte van een kolom
Meestal is het ook handig om elke kolom een vaste breedte te geven. Deze breedte slaan we op in $kolom_breedte.
De totale breedte van de tabel is dus $aantal_kolommen * $kolom_breedte.
Ook zouden we de hoogte van elke tabelcel kunnen specificeren, maar hier doen we dat niet. Als je elke cel
een vaste hoogte (in pixels) wilt geven, sla je deze hoogte op in een variabele (om je tabel makkelijk aanpasbaar
te houden), bijvoorbeeld $rij_hoogte, en zet je bij het afdrukken van een tabelcel in elke cel het style-attribuut:
<td style="height: <?= $rij_hoogte ?>px;">...</td>.
Ook zou je hiervoor een stylesheet-class kunnen aanmaken, maar
deze moet door PHP aan te passen zijn omdat de waarde van $rij_hoogte kan verschillen.
Let er op dat als je een vaste hoogte wilt introduceren in je gegenereerde tabel, dat het height-attribuut (nog
steeds) géén valid HTML is...
Kolom-teller
Er zal ook een teller moeten meelopen op het moment dat je de tabel gaat genereren. Deze teller houdt bij bij
welke kolom van een rij we zijn aanbeland. Op deze manier kun je bepalen of er een rij moet worden afgesloten en/of
er met een nieuwe rij begonnen moet worden. Deze teller zou je bijvoorbeeld $huidige_kolom
kunnen noemen o.i.d..
Het aantal te doorlopen items
Deze waarde kan ook handig zijn om in een variabele op te slaan. Dit is niet echt nodig, maar kan het programma
leesbaarder maken. Deze variabele noemen we bijvoorbeeld $aantal_items. Wanneer de items uit de database komen
is de waarde hiervan gelijk aan mysql_num_rows($query_resultaat) (er van uitgaande dat je MySQL gebruikt, natuurlijk).
Wanneer de items in een array staan is de waarde van $aantal_items gelijk aan sizeof($je_array).
3. Eerste opzet
In het volgende voorbeeld zal ik een eerste opzet maken voor code die een tabel genereert op grond van een
array. Je kan je array of query-resultaten doorlopen met zowel een for(each)-lus als een while-lus, dit maakt
allemaal niet zoveel uit. De verschillende mogelijkheden op een rij gezet:
for(each) lus:
- array
foreach($je_array as $item) {
// rest van programma
}
|
- query
// $aantal_items is gelijk aan mysql_num_rows($query_resultaat)
for($i=0; $i < $aantal_items; $i++) {
$item = mysql_fetch_assoc($query_resultaat); // of fetch_row of fetch_object, net wat je leuk vindt
// rest van programma
}
|
while lus:
- array
$i = 0; // teller die meeloopt met je array, we gaan er van uit dat je array numerieke indices heeft
// $aantal_items is in dit geval gelijk aan sizeof($je_array)
while($i < $aantal_items) {
// rest van programma
$i++;
}
|
- query
if($aantal_items > 0) {
while($item = mysql_fetch_assoc($query_resultaat)) {
// rest van programma
}
}
|
Waarschijnlijk is de foreach-constructie het handigst voor arrays, en de while constructie het handigst voor queries.
Voorbeeld met array:
<?php
$items = array("item 1", "item 2", "item 3", "item 4", "item 5", "item 6",
"item 7", "item 8", "item 9", "item 10", "item 11", "item 12");
// hulpvariabelen
$aantal_kolommen = 4;
$kolom_breedte = 75; // in pixels
$aantal_items = sizeof($items);
$huidige_kolom = 0; // als deze variabele de waarde 0 heeft dan is er een rij afgelopen
// en moet er een nieuwe beginnen
// bouw de tabel en doorloop de items
?>
<table width="<?= $aantal_kolommen * $kolom_breedte ?>" border="1" cellspacing="0" cellpadding="2">
<?php
foreach($items as $item) {
// waren we klaar met een rij ?
if($huidige_kolom == 0) {
// open een nieuwe rij
echo "<tr>
"; // hier is
toegevoegd om de leesbaarheid van de HTML-source te verhogen
}
// druk het item af - hier zou je dus nog tabellen kunnen nesten - in dit voorbeeld houden we het simpel
echo "<td width="".$kolom_breedte."">".$item."</td>
";
// we zijn een kolom verder, verhoog $huidige_kolom
$huidige_kolom++;
// waren we klaar met een rij ?
if($huidige_kolom == $aantal_kolommen) {
// sluit de rij af en reset $huidige_kolom
echo "</tr>
";
$huidige_kolom = 0;
}
}
?>
</table>
|
4. De laatste rij
Het bovenstaande voorbeeld is bewust makkelijk gehouden. Het aantal items (12) past precies in 3 rijen van
elk 4 kolommen. Wanneer het aantal items ($aantal_items) een veelvoud is van het aantal kolommen ($aantal_kolommen)
passen de items precies in een rij maar vaak is dit niet het geval. Bovenstaande code zal dan dus ook een
foutieve tabel opleveren wanneer niet aan de voorwaarde "het aantal items is een veelvoud van het aantal kolommen"
is voldaan - de laatste tabelrij wordt dan immers niet afgesloten (en heeft ook niet het correcte
aantal cellen).
Stel dat $aantal_kolommen 4 is en $aantal_items 6 (6 is geen veelvoud van 4), dan krijg je dus de volgende tabel:
+---------+---------+---------+---------+
| item 1 | item 2 | item 3 | item 4 |
+---------+---------+---------+---------+
| item 5 | item 6 |
+---------+---------+
En dat klopt dus niet.
Wat je doet is het volgende: je geeft de resterende cellen van de rij een vulling:
+---------+---------+---------+---------+
| item 1 | item 2 | item 3 | item 4 |
+---------+---------+---------+---------+
| item 5 | item 6 |*vulling*|*vulling*|
+---------+---------+---------+---------+
De code wordt aldus:
<?php
$items = array("item 1", "item 2", "item 3", "item 4", "item 5", "item 6",
"item 7", "item 8", "item 9", "item 10", "item 11", "item 12");
// hulpvariabelen
$aantal_kolommen = 4;
$kolom_breedte = 75; // in pixels
$aantal_items = sizeof($items);
$huidige_kolom = 0; // als deze variabele de waarde 0 heeft dan is er een rij afgelopen
// en moet er een nieuwe beginnen
// bouw de tabel en doorloop de items
?>
<table width="<?= $aantal_kolommen * $kolom_breedte ?>" border="1" cellspacing="0" cellpadding="2">
<?php
foreach($items as $item) {
// waren we klaar met een rij ?
if($huidige_kolom == 0) {
// open een nieuwe rij
echo "<tr>
"; // hier is
toegevoegd om de leesbaarheid van de HTML-source te verhogen
}
// druk het item af - hier zou je dus nog tabellen kunnen nesten - in dit voorbeeld houden we het simpel
echo "<td width="".$kolom_breedte."">".$item."</td>
";
// we zijn een kolom verder, verhoog $huidige_kolom
$huidige_kolom++;
// waren we klaar met een rij ?
if($huidige_kolom == $aantal_kolommen) {
// sluit de rij af en reset $huidige_kolom
echo "</tr>
";
$huidige_kolom = 0;
}
}
// fix voor de laatste rij - was een rij volledig gevuld ?
if($huidige_kolom != 0) {
// rij was nog niet vol(ledig) - vul de resterende cellen op met "stuffing"
for($i = $huidige_kolom; $i < $aantal_kolommen; $i++) {
// in plaats van kun je de cel ook met iets anders vullen natuurlijk
echo "<td width="".$kolom_breedte.""> </td>
";
}
// sluit tenslotte de rij alsnog af
echo "</tr>
";
}
?>
</table>
|
Deze code spreekt verder redelijk voor zich lijkt me.
5. Meerdere pagina's
Het is ook vrij eenvoudig om dit script te combineren met een pagina-navigatie. Hoe je een pagina-navigatie maakt
staat in de tutorial Pagina navigatie in PHP en MySQL beschreven.
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
