Voorbeeld: HTML tabel

Tot nu toe hebben we een redelijke basis om mee uit de voeten te kunnen. Er is nog zo veel meer over OOP te vertellen en een deel komt verderop in deze handleiding ook zeker aan bod, maar nu is het tijd voor een voorbeeld. Ik kan me heel goed voorstellen dat je na de informatie uit voorgaande hoofdstukken bij jezelf denkt: wat kan ik er nu in hemelsnaam mee?!

En ik geef je hierin geen ongelijk. Ervaring is wederom de sleutel tot succes, voordat je OOP een beetje onder de knie hebt ben je voldoende classes en scripts verder. En nu kan ik wel in de herhaling vallen en je de uitgekauwde voorbeelden van een Hond class die uitgebreid wordt naar een Labrador class enzovoorts voorschotelen, maar daar schieten we niets mee op. Ik heb daarom een voorbeeld gekozen waarvan je eerste reactie misschien zal zijn: 'Dat? Wat heeft dat nu met OOP te maken?', maar ik denk dat het juist heel eenvoudig de informatie uit voorgaande hoofstukken samenvat. Laten we naar het voorbeeld kijken: de tabel in HTML.

Denk bij het definiëren van namen voor classes, methods en properties nog even terug aan het hoofdstuk over naamgeving conventies!

Stap 1: doel bepalen en objecten herkennen
In dit voorbeeld is het doel om, op OOP wijze, een script te schrijven dat de weergave van een HTML tabel verzorgt. Nu weten we allemaal hoe een tabel in HTML eruit ziet, maar voor het herkennen van objecten zal ik hier nog eens de meest eenvoudige structuur geven:

Code (php)

1
2
3
4
5
6

Een tabel bestaat in alle gevallen uit rijen die op hun beurt weer uit cellen bestaan. Hier herkennen we drie objecten met allen hun specifieke eigenschappen: Tabel, Rij en Cel. Kortom, we zullen (minimaal) drie classes krijgen om deze objecten te beschrijven. De eerste opzet is geboren:

Code (php)

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
class Table {

}

class Row {

}

class Cell {

}
?>

Stap 2: herkennen van eigenschappen van objecten
De volgende stap is het herkennen van de eigenschappen van de verschillende objecten. Pas als we dat weten, kunnen we de benodigde properties aan onze classes toevoegen. Als we opmaak van de tabel buiten beschouwing laten, zijn rijen een eigenschap van de tabel. Cellen zijn op hun beurt een eigenschap van een rij en tenslotte is de inhoud van een cel de eigenschap van een cel.

In de Table en Row classes moeten we dus een property hebben voor respectievelijk de rijen en de cellen. De Cell class heeft een property nodig voor de content.

Code (php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
class Table {
    private $_rows;

}

class Row {
    private $_cells;

}

class Cell {
    private $_content;

}
?>

Stap 3: bepalen wat de verschillende objecten moeten kunnen
Binnen de Cell class hebben we op dit moment alleen een method nodig waarmee we de content kunnen aanmaken en een waarmee we de content kunnen opvragen. In het eerste geval kunnen we mooi de constructor gebruiken en voor het tweede ligt een method getContent() voor de hand.

De Row class heeft een method nodig om cellen aan de rij toe te voegen en een om alle cellen op te vragen. De methods append() en getCells() zouden hier logische keuzes zijn.

Als laatste heeft de Table class een method nodig om rijen aan de tabel toe te voegen en een om de tabel weer te geven. Hier zouden de methods append() en draw() voor kunnen zorgen.

Code (php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<?php
class Table {
    private $_rows;

    public function __construct() {
        $this->_rows = array();
    }

    public function append($row) {
        $this->_rows[] = $row;
    }

    public function draw() {

    }
}

class Row {
    private $_cells;

    public function __construct() {
        $this->_cells = array();
    }

    public function append($cell) {
        $this->_cells[] = $cell;
    }

    public function getCells() {
        return $this->_cells;
    }
}

class Cell {
    private $_content;

    public function __construct($content) {
        $this->_content = $content;
    }

    public function getContent() {
        return $this->_content;
    }
}
?>

Je ziet dat de classes Table en Row ook een constructor gekregen hebben. Dit heeft ermee te maken dat de properties $_rows en $_cells als array gedeclareerd moeten worden om later een Notice te voorkomen als we waarden aan de arrays toevoegen. Dit is een stukje vooruit kijken en zou je eventueel ook met een if-statement in de append() methods op kunnen vangen, maar deze manier is netter. Zorg altijd dat je properties op een juiste manier geinitialiseerd zijn.

Stap 4: de draw() method
Het enige dat nu nog moet gebeuren voordat we het geheel kunnen gebruiken is het schrijven van de draw() method. Dit heb ik bewust nog niet gedaan omdat hier een paar kanttekeningen bij geplaatst moeten worden. Normaal gesproken is het namelijk niet gewenst om vanuit methods te echoën. Het is veel vanzelfsprekender om waarden te retourneren om die vervolgens in je procedurele code te echoën. Voor nu negeren we dat even, de reden daarvoor zal later in deze handleiding duidelijk worden.

De draw() method zou er als volgt uit kunnen zien:

Code (php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
public function draw() {
    echo '<table border="1">'.PHP_EOL; // Begin van de tabel, border voor de duidelijkheid

    foreach($this->_rows as $row) {
        echo '<tr>'.PHP_EOL;

        foreach($row->getCells() as $cell) {
            echo '<td>'.$cell->getContent().'</td>'.PHP_EOL;
        }

        echo '</tr>'.PHP_EOL;
    }

    echo '</table>'.PHP_EOL;
}
?>

Stap 5: de procedurele code
Zoals we nu inmiddels weten vormen de classes enkel de blauwdrukken van de objecten die we kunnen gebruiken. We zullen dus nog een klein stukje procedurele code moeten schrijven waarin we de classes (een of meerdere keren) instantiëren om uiteindelijk een tabel met inhoud weer te kunnen geven.

Code (php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php
/* Procedurele code */
$cellA1 = new Cell('Dit is cel A1');
$cellA2 = new Cell('Dit is cel A2');

$rowA = new Row();
$rowA->append($cellA1);
$rowA->append($cellA2);
$rowA->append(new Cell('Dit is cel A3')); // Zo kan het ook!

$table = new Table();
$table->append($rowA);
$table->draw();
?>

Dit is een klein voorbeeldje van hoe je met de drie gemaakte classes kunt werken. Allereerst definiëren we twee Cell objecten met een bepaalde inhoud. Vervolgens creëren we een instantie van de Row class om daar vervolgens de twee Cell objecten aan toe te voegen. Een derde cel wordt aan de rij toegevoegd om te illustreren dat je niet per se een variabele hoeft te declareren voordat je het object kunt gebruiken. Tenslotte wordt het Table object geïnstantieerd, de rij toegevoegd en wordt de tabel weergegeven.

Het resultaat van dit script is hier te zien. De broncode van de resulterende pagina ziet er als volgt uit:

Code (php)

1
2
3
4
5
6
7

Conclusie
Een HTML tabel is opgebouwd uit verschillende onderdelen die wij als objecten gedfinieerd hebben. Met behulp van een beetje OOP kennis is het ons gelukt om de weergave van een HTML tabel te verzorgen met behulp van 3 klasses en een klein beetje procedurele code. Dit voorbeeld laat zien hoe je iets opbreekt in objecten en deze objecten vervolgens samen laat komen tot een geheel.

In de rest van deze tutorial zal ik nog een aantal keer terug komen op dit voorbeeld om te laten zien hoe een en ander eenvoudiger of anders kan.

« vorige pagina | volgende pagina »

« Lees de omschrijving en reacties

Forum berichten

Reacties

PHP scripts

PHP tutorials

Actief op PHPhulp

Voorbeeld: HTML tabel

Inhoudsopgave

PHP tutorial opties

Over PHPhulp

Support

Gesponsord

Extra's

Privacy